Most HTML tags are used in pairs, that is, HTML tags generally have a beginning tag and an ending tag surrounding the text that they affect, e.g.
<TagName>the affected text</TagName>The tag name itself (here, TagName) is enclosed in brackets (< >).
The beginning tag "turns on" a feature (such as headings, bold, etc.), and the ending tag turns it off. Closing tags have the same name as the beginning tag except that the closing tag name is preceded by a slash (/). For example, the following <STRONG> tag will make the word basic in the following sentence bold when displayed by a browser.
This is a <STRONG>basic</STRONG> tag tutorial.will be displayed as:
This is a basic tag tutorial.Not all HTML tags have a beginning and an end. Some tags are only one-sided, such as the <LI> tag for an element in a list.
All HTML tags are case-insensitive; that is, you can specify them in upper or lower case, or in a mixture. <STRONG> is the same as <strong> or <STrong>. It is common practice, however, to specify all tags in uppercase because they are easier to spot when editing an HTML document.
The following sections describe the use of commonly used HTML tags. If HTML is new to you, I suggest that you read each section in sequence. If you are interested in learning about a particular feature then you can use one of the following links.
Formatting Tags--BOLD, ITALICS, and CENTER
Preceed the text you want formatted with the beginning tag and place the ending tag where you want the feature to stop. The tag pairs are:
- BOLD
- Either <STRONG></STRONG>
- or <B></B>
- ITALICS
- Either <EM></EM>
- or <I></I>
- CENTER
- <CENTER></CENTER>
Netscape introduced the "CENTER" tag to permit center alignment of a block of text, figures, etc. They did this because there was a bug in several other browsers such that expressions like <P ALIGN="center"> did not work. This is now fixed, so that you should use ALIGN to center text wherever possible.
CENTER does not introduce vertical spacing, so you can use this tag to center text between two closely spaced horizontal rules.
Examples of CENTER:
<CENTER>
here is some centered text.....
<P>Here is another centered paragraph.
<P>And yet another.
</CENTER>
is displayed as:
Here is another centered paragraph.
And yet another.
Images
Most Web browsers can display images in a document (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes time to process and slows down the initial display of a document. Carefully select your images and the number of images in a document. Keep the number to a minimum and the images as small as possible.To include an inline image, enter:
<IMG SRC="path/ImageName.ext">
where path is the relative or absolute path of the image file.
The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with an extention (ext).gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.
For example:
<CENTER>
<IMG SRC="http://www.itk.ilstu.edu/images/icons/next.gif">
<CENTER>
displays the following image.
Using an Image as a Link
If you wish to include an image as an link the sample code is:
<A HREF="LinkTo"><IMG SRC="path/ImageName.ext"></A>
In other words, simply type your anchor and insert the IMAGE tag where you would normally put the anchor text. You can then click on the image to activate the link. Also, if you want to turn off the anchor hyperlink border around the image simply insert BORDER=0 at the end of the image tag before the > and after the filename.
For example:
<A HREF="http://www.itk.ilstu.edu/"><IMG SRC= "http://www.itk.ilstu.edu/images/icons/isuhome.gif" BORDER=0></A>
sets up an image that links to the ACS Home Page.
