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.
BLOCKQUOTE
Use the <BLOCKQUOTE> tag to display lengthy quotations in a separate block on the screen. Most browsers generally change the margins for the quotation to separate it from surrounding text.
For example:
<BLOCKQUOTE>
<P>Omit needless words.</P>
<P>Vigorous writing is concise. A sentence should contain no
unnecessary words, a paragraph no unnecessary sentences, for the
same reason that a drawing should have no unnecessary lines and a
machine no unnecessary parts.</P>
--William Strunk, Jr., 1918
</BLOCKQUOTE>
is displayed as:
Omit needless words.
Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts.
--William Strunk, Jr., 1918
ADDRESS
The <ADDRESS> tag is generally used to specify the email address of the author of a document. It is usually near the end of a document.
For example:
<ADDRESS>Send comments to ACS WebMaster@ilstu.edu</ADDRESS>is displayed as: Send comments to ACS WebMaster@ilstu.edu
NOTE: <ADDRESS> is not used for postal addresses. See BR above to see how to format postal addresses.
MAILTO:
You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink. The format is:
<A HREF="mailto:emailaddress">LinkName</A>For example, enter:
<A HREF="mailto:acsweb@ilstu.edu">ACS WebMaster</A>to create a link that will open a mail window for the ACS WebMaster alias.
The ADDRESS and MAILTO: tags are often combined to provide an email link.
For example:
<ADDRESS> Send comments to the <A HREF="mailto:acsweb@ilstu.edu">ACS WebMaster</A> </ADDRESS>will be displayed as:
Send comments to the ACS WebMaster
Linking
The chief power of HTML comes from its ability to link text and/or an image to another document or to a section of a document. A browser highlights the identified text or image with color and/or an underline to indicate that it is a hypertext link (often shortened to hyperlink or link).HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
- start the anchor with <A (include a space after the
A) - specify the document you're linking to by entering the parameter HREF="filename" followed by a closing right angle bracket (>)
- enter the text that will serve as the hypertext link in the current document
- enter the ending anchor tag: </A> (no space is needed before the end anchor tag)
Here is a sample hypertext reference to a file named MaineStats.htm:
<A HREF="MaineStats.htm">Maine</A>
This entry makes the word Maine the hyperlink to the document MaineStats.htm, which, in this example, must be in the same directory as the document containing the hyperlink.
Relative Pathnames
You can link to documents in other directories on the same computer by specifying the relative path from the current document to the linked document. For example, a relative link to a file named NYStats.htm located in the subdirectory AtlanticStates would be:
<A HREF="AtlanticStates/NYStats.htm">New York</A>
Where AtlanticStates is a subdirectory in the directory containing the document with the link. These are called relative links because you are specifying the path to the linked file starting at the location of the current file. You can also use the absolute pathname (the complete URL) of the file, but relative links are more efficient in accessing another file on the same server.
Pathnames use the standard DOS and UNIX syntax. The syntax for the parent directory (the directory that contains the current directory) is "..". (For more information consult a beginning UNIX reference text such as Learning the UNIX Operating System from O'Reilly and Associates, Inc.)
For example, a link in the NYStats.htm file back to the original document in the above example would look like this:
<A HREF="../US.htm">United States</A>
In general, you should use relative links because:
- if, at some point, you want to move a group of documents to another directory the links will not have to be changed (because the relative path names will still be valid)
- it's more efficient when the files are on the same server
- there is less to type
However, absolute pathnames (see next section) may be used when linking to documents that are not closely related even though they are on the same server. For example, consider a group of documents that comprise a user manual. Links within this group should be relative links. Links to other documents (perhaps a reference to the author's home page) should use full path names. This way if you move the user manual to a different directory, none of the links would have to be updated. (Of course, if the author's home page is moved the link must be changed in any case.)
Absolute Pathnames
The World Wide Web uses Uniform Resource Locators (URLs) to specify the location of files on servers. A URL includes the type of resource being accessed (e.g., Web, gopher, WAIS), the address of the server, and the location of the file.
The syntax is:
scheme://host.domain [:port]/path/filename.ext
where scheme is one of:
file a file on your local system ftp a file on an anonymous FTP server http a file on a World Wide Web server gopher a file on a Gopher server WAIS a file on a WAIS server news a Usenet newsgroup telnet a connection to a Telnet-based service
The port number can generally be omitted. (That means unless someone tells you otherwise, leave it out.)
For example, to include a link to this tutorial in your document, enter:
<A HREF="http://www.itk.ilstu.edu/HTMLtutr/tutorhom.htm">ACS HTML Tutorial</A>
This entry makes the text ACS HTML Tutorial a hyperlink to this document.
For more information on URLs, refer to:
Links to Specific Sections in a Document
Anchors can also be used to move a reader to a particular section within a document (either in the same document or in a different document). This type of an anchor is commonly called a named anchor because to create the links, you must first insert HTML names within the document.
The power of HTML and the WWW is closely linked (pun intended) to the ability to jump from one document to another anywhere in the world. A link to another document normally begins displaying that text at the beginning of the document. But, the use of anchors allows us to begin at any point in a document where there is a named anchor.
This guide is a good example of using named anchors in a document. The guide is constructed as one document to make printing easier. But as one (long) document, it can be time-consuming to move through when all you really want to know about is one particular HTML tag. Internal hyperlinks can be used to create a "table of contents". These hyperlinks move you from one location in this document to another location in this document.
Links to Specific Sections in Another Document
Suppose you want to set a link from document A (documentA.htm) to a specific section about Acadia National Park in another document (MaineStats.htm).
Create the named anchor (in this example "ANP") in MaineStats.htm at the point in the document you want to link to.
For example:
<H2><A NAME="ANP">Acadia National Park</A></H2>
Next, enter the HTML coding in document A for a link to the named anchor in MaineStats.htm. Put the link at the point in document A where a reader might want to jump to the link.
For example:
In addition to the many state parks, Maine is also home to
<A HREF="MaineStats.html#ANP">Acadia National Park</A>.
With both of these elements in place, a reader can jump directly to the Acadia reference in MaineStats.htm.
NOTE: You cannot make links to specific sections within a different document unless you have permission to place anchors in the coded source of that document or that document already contains appropriate named anchors. For example, you could include named anchors to this tutorial in a document you are writing because there are named anchors in this guide (use View Source in your browser to see the coding). But if this document did not have named anchors, you could not make a link to a specific section because you cannot edit this file on ISU's ACS server.
You can practice linking to another document by linking to the anchor, "TestAnchor", at this point in this document. Enter the following link in your HTML document, display the document, and click on the link. Presto, you will at this point in this document.
<A HREF="http://www.itk.ilstu.edu/htmltutr/tags.htm#TestAnchor">Test Anchor</A>
Links to Specific Sections within the Same Document
This technique differs from linking to another document only in that the filename is omitted in the link.
For example, to link to the ANP anchor from another point within MaineStats, enter:
...More information about <A HREF="#ANP">Acadia National Park</A>
is available elsewhere in this document.
Of course, the <A NAME= " "> tag must be at the place in the document
where you want the link to jump to (i.e. <A NAME="ANP">Acadia National Park</A>).
Named anchors are particularly useful when you think readers will want to print a document in its entirety so that you do not want to spread the text over a sequence of small files. They are also useful when you have a lot of short information segments you want to place online combined together in one file.
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.
Speeding Up Image Processing
In general, image files are much larger than text files. Thus, a text only HTML file can be transfered and be ready for viewing much more rapidly than a document that has images associated with it. As an example, this document is very long (it requires about 72KB of storage) and contains very few images. The images it does use are all small, individually requiring only 500 to 4200 bytes of storage each. Still, around 50KB of graphics are used in displaying this document. But, since some images are used multiple times, only about 20KB are actually transfered to display this document. Thus, over 20% of the bytes transmitted for this document are for the graphics (and you thought this page was virtually all text!).
But, a major use of the WWW is to display images. So, eventhough we want to be efficient, we also want to include images with our documents. This means that we would like for our image files to be as small as possible. The major determinants of file size are the physical size of the image, the resolution or quality of the image, the number of colors in the image, and the level of compression.
Size and Color
When you have a choice, keep the size of the image as small as possible and minimize the number of colors used. The number of colors (including different shades) in an image are typically 2, 16, 256, 64K, or 16.7M. Icons and graphics usually use 2 to 256 colors, photographs use 64K, and 16.7M colors are used for very high quality artwork and photographs.
Resolution
When a picture is scanned and converted to digital format you have a choice of the resolution obtained up to the limit of the scanning device you are using. Typical resolutions are 300 X 600 dots per inch to 1200 X 4800 DPI. To speed the display of images, use the lowest resolution that still yields the required quality. For displaying graphics on the web, 72 DPI (for MAC) and 144 DPI (for PCs) are often sufficient.
Compression
The forth determinate of file size is the level of compression. The two common compression techniques used for images on the WWW are CompuServe GIF and JPEG. GIF files are limited to 256 colors and are therefore used primarily for icons and other graphics with distinct colors. JPEG compression is used for photographs and for other images with gradations in color (i.e. more than 256 colors). JPEG also allows you to set a compression level. High compression produces smaller files but poorer quality images. You will have to try several levels of compression with an image to determine the highest level that still produces the required quality image. Programs such as WebGraphics Optimizer assist in this process and can be downloaded over the web.
When scanning an image you might try using 200 to 300 DPI which will yield a large displayed image relative to the original. Then RESAMPLE the image to reduce it to the size you want to display. And, finally, save the image as a JPEG image with an appropriate level of compression (10% to 50% compression will often give good results, i.e. 90% to 50% quality). A good original will yield surprisingly good display quality even at a high compression level.
You should include (but it is optional) two other attributes on <IMG> tags to tell the browser the size of the images it is downloading. The HEIGHT and WIDTH attributes let the browser set aside the appropriate space (in pixels) for the images it is downloading. This allows the browser to continue downloading text while the image is being tranfered. (Get the pixel size from your image-processing software, such as Adobe Photoshop.)
For example, to include a self portrait image in a file along with the portrait's dimensions, you might enter:
<IMG SRC="SelfPortrait.jpg" HEIGHT=200 WIDTH=125>
NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers. Not all browsers do this. So don't plan on your readers having access to this feature. Check your dimensions and use the correct ones.
Use of Dual Resolution Images
Some browsers allow you to send two copies of an image to the browser, one low resolution (i.e. a small file) and the other a higher quality copy (both images must be the same size). The low resolution file is sent first. While sending two copies does not speed up the complete transfer operation, it does increase the perceived speed. This is because the person viewing the HTML document sees the low resolution copy quickly along with the text. The high resolution copy is then sent and enhances the already received low resolution copy.
For example:
<IMG SRC="SelfHigh.jpg" HEIGHT=200 WIDTH=125 LOWSRC="SelfLow.jpg">This is a very good technique for large image files (large physical size, high resolution, etc.). Browsers that do not recognize LOWSRC= just ignore it and display the high resolution image.
Progressive JPEG
Progressive JPEG is a method of compressing an image so that a low resolution version is displayed and then repeated passes (3 to 5) are made to successively add detail to the image. This allows the user to see the entire image being formed similarly to the dual image technique.
Interlaced GIFs
Non-interlaced image files are displayed from top to bottom. Interlaced GIF images are displayed in an alternating line format than produces a "venetian blind" effect. This allows the browser to continue to download text as the image is being displayed.
To use interlaced GIFs, save the image in the interlaced GIF89a format when you create or capture it. Or retrieve an image into a graphic editing program and save it as an interlaced file. Many graphic editing programs will do this. The interlaced file is then used in HTML statements just as any other type of image file.
For example:
<IMG SRC="MyInterlaced.gif" HEIGHT=250 WIDTH=400>
Thumbnails
Thumbnails are small versions of full-sized images. A thumbnail is often displayed instead of the full image when a number of images are being presented. A page with thumbnails will transmit much faster than a page with full images. The viewer can select from the thumbnails which, if any, full images will be viewed. Then only selected full images will have to be transmitted.
The full image is referenced by the thumbnail so that the full image is selected by clicking on the thumbnail. For example:
<A HREF="full_image.jpg"><IMG SRC="thumbnail.jpg" HEIGHT=100 WIDTH=80></A>Produces the following image. Click on it to see the larger version. (Then click on your browser's BACK button to return here.)
[The thumbnail above is a reproduction of Renoir's On The Terrace in The Art Institute of Chicago.]
Obviously, the idea of using a thumbnail is to transmit as few bytes as possible but still convey to the viewer the essence of the full image. A good rule-of-thumb is to keep each thumbnail around 2,000 bytes or less in storage size. A recognizable image can usually be obtained with a thumbnail 80 to 120 pixels in height. The low storage requirement can be achieved by using a high compression level with a JPEG file. For example, the thumbnail above requires 1,768 bytes of storage. (The full sized image requires 57,279 bytes.) The thumbnail is 100 pixels high and was created at 75% compression.
Avoid using extremely small thumbnails (60 to 70 pixels high). Using high compression levels with taller images usually gives better results.
Thumbnails are easy to make with image editing packages such as Paint Shop Pro or Lview Pro.
To create a thumbnail with Lview Pro open the full sized image (FILE/OPEN), then duplicate it (EDIT/COPY then EDIT/PASTE/AS A NEW IMAGE) and then close the original so that you will not accidently destroy it.
Set the JPEG compression level to 75% (FILE/PREFERENCES/GRAPHICS/JPG). Lview Pro uses "compression quality" instead of "compression level" so you should enter 25 to get 25% quality for 75% compression. Next select IMAGE/RESIZE and then enter the desired height of the thumbnail in the right most box next to NEW SIZE. Make sure that "Preserve Aspect Ratio" is checked. Then click "OK".
The thumbnail version should now be displayed. Save the thumbnail to disk (FILE/SAVE AS) as a ".jpg" file and close the image window.
Now, open the thumbnail you just saved. If it does not look suitable start over with the original and either use a larger height or decrease the compression level (higher quality level). If the thumbnail is of very good quality, you may want to try again with a higher compression level (lower quality level).
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.
You can find some example images here, WWW Images (from AIcons).
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.
