HTML Lesson 4 Print this page if you want to. It will help you study. I promised to show you how to make your letters and words different sizes and colors. Well here we go. Do you know what the word FONT means? No I'm not swearing at you. Font is the letters to make words.A B C ect.When you want your words to be a certain size or color, you have to have a font tag to tell the browser. Here's an example. I want my words to be fairly big so people can see them good, and I want them to be red. So this is how you write the font tag for this. Lets take a good look at that tag. <font size This part of the tag tells the browser you want your words a certain size. The equal = symbol ties the 2 together. And the quotation " " symbols are to emphasize the size you want using a number. The size of fonts are numbered from 1 to 7. So when you create a page you pick the number you want your words to be. 1 is the smallest and 7 is the largest Size 1 size 2 size 3 size 4 size 5 size 6 size 7 So if you want your words small, <font size="2"color=" "> If you want them bigger but not huge, <font size="5"color=" "> The second part of the tag is really quite simple, color=" "> What ever color you want you just type the name. "red" "green" "blue" ect. Remember later I will show you how to have shades of colors. If you don't want your words in color, you want them black, then leave off that part of the tag. The computer will automatically make them black. The font tag is to make your words the size and color you want. Just type <font size="?">what ever you want. And if you like really small words, don't use a font tag at all. The computer will type everything in font 3 for you. You might type a letter completely in font 3 with no headers, but to make a web site that small and no color!!! No way, what kink of person are you? OK so it's your site and yes you can make it any way you want. By the way, all the words on these pages are font size 4 So, We use the <font size="?"> tag to change JUST the size of our letters any time we want. We use the <font color="?"> tag to change JUST the color of the letters any time we want. We use the <font size="?"color="?"> tag to change BOTH the size and color any time we want. And don't forget each time you open a font tag, just like all tags you must close it when your done with that part.</font> Lets look at an example.
This is how you would have to write it to tell the browser to start and stop things. <html><font size="5"color="blue">My First Web Page</font><font size="4"color="orange">HELLO,</font><font size="3"> welcome to my web page, I hope you enjoy it.</font></html> I know it seems like it's going to be a lot of writing, but only if you keep changing the size or color of your words. This is just to show you that you can if you want to. Ok so far? How about 2 easy tags? O come on you can take it. This tag will blow your mind. <br /> What the heck is that thing? Why it's a break tag. What is it for? To break words. No, not in half. Well, yes you could if you wanted to. It's used to stop a sentence or a word on one line and start the next word on the next line below it. For example, This is my first reason This is my second reason And my third if you write it like this <font size="4"color="blue">This is my first reason<br />This is my second reason<br />And my third</font> Then you will get this, This is my first reason Using the break tag you could even do this, This is my Now the big question. Why is it so different than the other tags? It has a forward slash after the letters instead of infront and it has a space inbetween. All the tags you have learned so far and the ones you will learn come as a pair. One to open something and one to close it. HOWEVER, There are 4 tags that are all alone. Isn't that sad? They have no closing tag. But since all tags have to be closed, they are closed within them selves. You can't do this with any other tag except the 4 that you will learn. If you try it with any other tag you will see that it wont work. You will get nothing. To write the break tag, you just type <br then a space with the space bar then, /> O that wasn't that hard stop crying. Now for the brother, or sister to the break tag, the <p> tag. No it stands for paragraph. What is it used for? Why to give space between paragraphs.See all the white space inbetween the lines of writing on all my pages? With out this tag all your writing would be just one line after another. Let me show you 1. My First Web Page With out the paragraph tag it would look like this, 2. My First Web Page This is how I wrote number 1 with the paragraph tag. <font size="4"color="blue">My First Web Page<p>HELLO, welcome to my web page, I hope you enjoy it.</p></font> And of coarse with number 2 I used a break tag. So you see the paragraph tag is a nice tag to have when you need it. O sure you could use 2 <br /><br /> break tags to get the same space but why the extra writing. This is a long lesson, so if you want to yawn it's ok. Just one more tag and then we will go to the tester. This is the bold tags, <b> </b> This makes your words stand out bold. All my words are in bold These words are regular writing and, These are just with the bold tag Quite a differance arent they? Of coarse the larger the font size the slightly darker they get. But you don't want huge letters all over your pages. So when you want to use the bold tag just put it any where you want it. <font size="4"color="blue"><b>Hello!</b><br />Welcome to my <b>Web</b>Page.</font> And this is what it looks like. Hello! Or write it the easy way <font size="4"color="blue"><b>Hello!<br />Welcome to my web page.</b></font> And get this, Hello! Ok ready to test this stuff? You are going to do 2 practices this time. This time the tester is set to actually work. So read the instructions very carefully. They are here and above the tester. It might be better to print out the instructions. If you don't want to print this entire page then you can go to a seperate page and print just the instructions for the tester.go to, Tester Instructions page Then you can go to practice 4 from that page. Tester Instructions When your ready to return to the tester, just close the window by clicking on the X in the upper right corner. MSN TV just scroll up using your arrow keys. This will bring you back to the tester. You do not have to hit the RESET button. As you know that would erase everything you wrote. Just click in the tester to activate the cursor. Now you can move the cursor with the arrow keys, or just click with the mouse to any letter or word and erase it with the backspace key. MSN TV just highlight it, then hit your return key. Use your arrow keys to move the cursor and erase anything with your delete key. This way you can erase RED and try GREEN, or change the font size. Yes practice a little.Have fun. Then if you want to start all over again, Just click "Reset" to clear the screen on the tester, then click in the tester to activate the cursor. Practice 4 |