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.
Aligning Images with Text
You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.
By default the bottom of an image is aligned with the following text, as shown in this paragraph.
You can align images to the top or center of a paragraph using the ALIGN= attributes TOP and MIDDLE.
HEIGHT=79 WIDTH=60
This text is aligned with
the top of the image (<IMG SRC="images/hrglass.gif" ALIGN=TOP>). Notice how the browser aligns only
one line and then jumps to the bottom of the image for the rest of the text.
And this text is centered on
the image (<IMG SRC = "images/hrglass.gif" ALIGN=MIDDLE>).
Again, only one line of text is centered; the rest is below the image.
However, if you use the ALIGN=LEFT feature (<IMG SRC="images/hrglass.gif" Align=LEFT>) as done in
this example, the image will align to the left of the text which continues beside the image.
This results in the image being left justified with text to the right of the image.
Notice that the paragraph starts at the top of the image and, if the paragragh is long enough
the text will wrap around the image.
The ALIGN=RIGHT feature (<IMG SRC="images/hrglass.gif" Align=RIGHT>) as done in this example does the same thing only reversed. The image will align to the right of the text which continues beside the image on the left. This results in the image being right justified with text to the left of the image. Again, notice that the paragraph starts at the top of the image and, if the paragragh is long enough the text will wrap around the image.
There is still a potential difficulty. Browsers do not place any blank space around the image so that the text can be butted up against the image. Blank space can be left above and below (vertical), and on both sides (horizontal) of an image by using the VSPACE and HSPACE features. Note that space can not be specified for just one side of an image. For example:
Now, what if you want to display an image on the left and a statement in the middle on the right. The statement
will be on one or two lines depending on the width of the display. This presents no problem as long as
the statement fits on one line, just use the ALIGN=MIDDLE attribute. But, if the statement wraps to a
second line, it will be displayed below the image. This dilemma can be solved by using a TABLE as shown below.
Alternate Text for Images
Some World Wide Web browsers cannot display images. Also, some users turn off image loading even if their software can display images (especially if they are using a modem or have a slow connection). HTML provides a mechanism to tell readers what they are missing on your pages.
The ALT=" " attribute lets you specify text to be displayed when the image is not displayed.
For example:
<IMG SRC="UpArrow.gif" ALT="Up">
where UpArrow.gif is the picture of an upward pointing arrow. With graphics-capable viewers that have image-loading turned on, you see the up arrow graphic. With a browser that cannot display images or if image-loading is turned off, the word Up is shown in your window.
You should try to include alternate text for each image you use in your document, as a courtesy to your readers.
Images without Text
To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN=" " attribute to center the image or adjust it to the right side of the window as shown below:
<p ALIGN="CENTER">
<IMG SRC="images/hrglass.gif">
</p>
which results in:
External Images
You may want to have an image displayed on a separate page when a user activates a link on either a word or on a smaller, inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images. That is, links to images can be included in a document so that the image is viewed only if the reader selects the link. This speeds the transfer of the main document since the graphic is sent only if requested.
To include a reference to an external image, enter:
<A HREF="path/ImageName.ext">link text</A>You can also use a smaller image as a link to a larger image.
For example:
<A HREF="LargImage.ext"><IMG SRC="SmallImage.ext"></A>The reader sees the SmallImage.ext image and clicks on it to open the LargImage.ext file.