|
LESSON
3 |
|
By this time you should be familiar with the Editor and know what tags are, you should also know what the <html> , </html> and <head> , </head> and <title> , </title> tags are used for. If not then you should see Lesson 2 before going any further. Go ahead I'll wait! What you put inbetween the body tags will determine what goes where on your page, the example I give is a basic one, I will go deeper in a later lesson CENTER tagsNow lets take a look at the test page again (you do have your editor running dont you?). The first tag you see inbetween the body tags is: <center> , if you go further down you will see: </center> . Everything inbetween these tags will be centered on the page (which in this case, is the entire page). If the tags were not there, then everything would be aligned to the left of the page. FONT tags
The next set of tags we see are:
<font>
,
</font>
. These tags control the look of your text, in this case I have set the
face
or style of the text to Georgia and the
size
to 6 and the
color
to blue (Note I have used the word blue in quote marks instead of a code, this
works with basic colors only). If you do not specify a color here the color of
the text would be the
defualt
color in your body tag. There are seven basic font sizes 1-7. 1 being the
smallest, Heres what they look like:
The next couple of sets of tags are: <b> , </b> meaning Bold and <i> , </i> meaning Italic , and they should be self explanitory. These tags do not have to be inside the font tags, they just have to be on either side of the text that you want bold or italic , they do not have to be used with each other, they can be used separately. Another set of tags that can be used around text are: <u> , </u> these are used to underline text like this . LINE BREAK & HORIZONTAL RULE tagsThe next couple of tags after the font tags do not have End tags, they are: <br> meaning Line Break (This tag will start the next "item" on a new line), and <hr> meaning Horizontal Row or Horizontal Rule (This tag makes a line across your page). If the Line Break was not there, the Horizontal Rule would be put next to the text, and not below it. NOTE: The font size examples in the Font section are separated by Line Breaks ! This tag: <p> is called a Page Break and this note is separated above and below by Page Breaks !IMAGE tags Now, the next new tag is the magic "IMAGE" tag! This tag puts an image on your page. You will notice it does not need an End tag, all the info it needs is inside the tag. The first thing you see inside this tag is: img src= . Yep, it means " im a g e s ou rc e" and it is asking for the Source of the image (or the Address to the image). In this example I have a directory called webhelp and inside it I have an image file called bye(1).gif . Make sure you add the " " quote marks to either side of the address and that the address points to an image file(.gif, .jpg, .bmp)! If you know the width and height of the image you can put it in here (I dont know why, but your page will load faster if you do!) NOTE: For more on Addresses , go here !The only thing I want you to take note of in the next set of font tags is that the color command in the tag has no " " quote marks around the word red , that is because you dont need them when you are using the word instead of the color code. the next 2 sets of font tags do not have the color command at all and the text will be the defualt color that is in the body tag. LINK tagsInside those last 2 sets of font tags you see: <a href=""> And </a> these are link tags and they provide the means to link to another page or to an image! The a in "a href" stands for Anchor , I'm not sure what that and href mean, but I do know it is asking for the Address to the page or image you want to link to. It can be almost any file type (.html, .cgi, .gif, .jpg). As with the image tag, be sure to include the " " quote marks on either side of the address. In the second set of link tags the address has been shortened, you can do that if the link is to another page on your web site, otherwise you must include the whole address! The text that you want to use as a link goes inbetween the <a href=""> and </a> tags, the second set of link tags has an image tag inbetween them, <a href=""><img src=""></a> , thats how you use an image as a link! Well thats about it, except to say that this is by no means a full set of tags that are availible, I will be covering more tags as we go. For now, save a copy of the Test Page as a back up and play around with the original! (I back up everything, my whole site is saved on my hard drive!) Once you get bored with what you can do, come back here and we'll take a look at Table's .
|