Text Control Tags (continued)
Another important attribute to <FONT> is the size attribute. It controls the size of your text. Possible values for size are anything between 1-7, at least for most browsers. IE 5.0 and above can have a higher value than 7. 1 is the smallest, 7 is the biggest.
The last attribute of <FONT> that I will explain to you is the face attribute. It controls what font is displayed in the browser. If you want Verdana to be the font, just type <FONT face="verdana">, and then type your text, and close it with a </FONT>. Replace Verdana with any font your computer has, and that font will be displayed. If your not sure what font your viewers will have, you can use more than one font. To do this, add a comma (,) after 'Verdana', put a space, and type a different font. The browser should interpret this by searching the system for Verdana first, then looking for the next font you typed in.
Thats about it for the <FONT> tag, so lets take a look at an example of this being used:
<HTML>
<HEAD><TITLE>Hackers of Heaven: the most informative site on the Web</TITLE>
</HEAD>
<BODY>
<FONT size="4" face="courier new, courier, monospace" color="#FF0000">Hackers of Heaven</FONT> is the most informative site on the Web!
</BODY>
</HTML>
Analysis:
Click here to see what your browser would display for the above code. As you can see, you can put many attributes into one tag. The first attribute changes the size of the font to four, the second will change the font to Courier New, or Courier if the viewer doesn't have Courier New; if they don't have either, it interprets monospace as the default monospace font (usually Courier or Sys). The third attribute changes the color of the text to red. Since the closing </FONT> tag is after Heaven; only the words 'Hackers of Heaven' would have the characteristics defined earlier.
Another few text control tags are the tags that boldface your text, italicize your text, and underline your text. To bold text, enclose the text you want bolded between a <B> and a </B>. To italicize text, enclose the desired text between a <I> and a </I>. To underline text, enclose it between a <U> and a </U>. You can also add subscript and superscript. To add subscript, put the desired text between <SUB> and a </SUB>. To add superscript, put your text between a <SUP> and a </SUP>. Here's an example of subscript: H2O. An example of superscript: 3rd.
Links
Now that you can control what your text looks like, let's try to link to another page on the Web or in your site. To link to another site, type <A href="http://www.geocities.com/hackerofheaven/index.html>, replacing 'http://www.geocities.com/hackerofheaven/index.html' with 'http://' and the URL of the link, and closing it with </A>. To link to a section of your site on the same page, it's a little more complicated. First, type <A name="bobdole">, replacing 'bobdole' with the name of this link. Put your cursor where you want to put the link and type <A href="#bobdole>, then your link text, then close it with a </A>. The # is important, don't forget to put it in.
So you're tired of the plain old blue links, purple if they have been visited already? To change the color of a link, we must go back to the <BODY> tag, and add a few attributes. If you added: link="green" alink="purple" vlink="red", it would make your links green, purple while you had your mouse over them, and red if you've visited them already. Replace the colors with anything, and it will be done. To have even more control, replace the colors with the hexed color number. Some browsers don't support this function. The browsers that don't support that simply ignore it, so don't worry.
Ok, now that links are pretty much taken care of, let's try to use one in a site:
<HTML>
<HEAD><TITLE>Hackers of Heaven: the most informative site on the Web</TITLE>
</HEAD>
<BODY>
<P><FONT size="4" face="courier new, courier, monospace" color="#FF0000">Hackers of Heaven</FONT> is the most informative site on the Web! <A href="http://www.hackersofheaven.com/">Click here</A> to check out the Web site.</P>
<P><A href="#archives">Click here</A> to go to the archives section.</P>
<A name="archives"><P>This is the archives section. Cool, huh? You are now and HTML pro!</P>
</BODY>
</HTML>
Analysis:
Click here to see what your browser would display for the above code. First things first, it may seem like the link to the archives section doesn't work. That's because our practice site isn't really big enough to make it look like we went anywhere. If you used the links at the top of the section, you may notice that they work. I used the same code for those as I did in the example. I hope that setup of the code in the example helps explain anything incomprehensible in the paragraph about links. You may have also noticed that I snuck in a new tag. This is the <P> tag, which means it starts a paragraph. As you can see, there is an extra line between the few lines in our example. That's what the paragraph tag does, it adds a line above and below the text, unless there is already one due to another <P>. It doesn't require a closing </P> tag, but it is good practice to put in there.
<< Previous | Top | Next >>
Basic Information
