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.
HTML
The <HTML> </HTML> tag tells your browser that the contents between the tags contains HTML-coded information. The file extension .html (or .htm) also indicates that this is an HTML document. The appropriate extention must be used. (If your operating system, e.g. WIN 3.11, is restricted to 3 character extensions, use .htm for the extension.)Thus an HTML document has the following structure:
<HTML>
...page contents...
</HTML>
HEAD
The <HEAD> </HEAD> tag identifies the first part of your HTML-coded document. The HEAD section contains the document's title.The structure of a page is:
<HTML>
<HEAD>
...title section...
</HEAD>
...remander of page contents...
</HTML>
TITLE
The <TITLE> </TITLE> tag contains the document's title. The title is displayed somewhere on the browser window (usually at the top), but not within the text area. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique, and relatively short. A title is also used during a WAIS search of a server.For example, you might include a shortened title of a book along with the chapter contents: HTML Tutorial Guide (Windows): The Basics. This tells the software name, the platform, and the chapter contents, which is more useful than simply calling the document Basics. Generally you should keep your titles to 64 characters or less.
The structure of a page is:
<HTML>
<HEAD>
<TITLE>
...page title...
<TITLE>
</HEAD>
...remainder of page contents...
</HTML>
BODY
The second--and the largest--part of your HTML document is the BODY section. The <BODY> </BODY> tag contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.The structure of a page is:
<HTML>
<HEAD>
<TITLE>
...page title...
</TITLE>
</HEAD>
<BODY>
...contents of page body...
</BODY>
</HTML>
Background Color
By default, browsers display text in black on a gray background. However, you can change both colors if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.Always preview changes in colors to make sure that your pages are easy to read. (For example, many people find red text on a black background difficult to read!)
You change the color of text, links, visited links, and active links using attributes of the <BODY> tag.
For example, enter:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">This creates a window with a black background (BGCOLOR), white text (TEXT), and silvery hyperlinks (LINK).
The six-digit number and letter combinations represent colors by giving their RGB (red, green, and blue) value. The six digits are actually three two-digit numbers in sequence, representing the amount of red, green, and blue to be "mixed" to make up the color. Each number is a hexadecimal value in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright red, and FFFFFF is white (fully saturated with all three colors). These number and letter combinations are cryptic. Fortunately an online resource is available to help you track down the combinations that map to specific colors:
Background Graphics
Newer versions of Web browsers can load an image and use it as a background when displaying a page (instead of using a background color). Some people like background images and some don't. In general, if you want to include a background, make sure your text can be read easily when displayed on top of the image.Background images can be a texture (linen finished paper, for example) or an image of an object (a logo possibly). You create the background image as you do any image.
However you only have to create a small piece of the image. This is baecause a browser takes the image and repeats it across the screen and down the screen to fill the window. In sum, you generate a small image, and the browser replicates it enough times to fill the window. This action is automatic when you use the background tag shown below.
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND="filename.ext">
The above thin image is an example of how thin an image can be (with a corresponding small file size) and still give the desired results. The above image is 7K. You can view this background in Example 1 below.
Another example is a small image which is replicated or "tiled" to give a background pattern. You can view this background in Example 2 below.
This is a geometric background example. Because it is geometric, and the sides match, it produces a seamless background. The image is a good example of a seamless background, but over all it is a poor background, because it is difficult to read text over this background.
Background Examples:
Links to Background Resourses:
Headings
HTML has six levels of headings, identified as H1 through H6, with H1 assumed to be the major, i.e. the first and largest, heading in your document. Headings are displayed in bold. The size of the characters in a heading vary from very large (H1) to very small (H6).
The syntax of the heading element is:
<Hx>Text of heading</Hx>where x is a number between 1 and 6 specifying the level of the heading.
Examples of headings:
This is an example of a H1 heading
This is an example of a H2 heading
This is an example of a H3 heading
This is an example of a H4 heading
This is an example of a H5 heading
This is an example of a H6 heading
Paragraphs
The <P></P> tag marks the beginning and ending of a paragraph. Unlike documents in most word processors, carriage returns in HTML files aren't significant. So you don't have to worry about how long or short your lines of text are (better to have them fewer than 72 characters long though so that each complete line will fit within a window of an editor). Browsers ignore carriage returns when displaying a document. They also condense multiple spaces into a single space. Line breaks occur based on the width of the display window, the occurence of a <P> tag, or a <BR> tag (See BR below). A <P> tag causes 2 line breaks to occur which produces a blank line in the displayed text.
In the folowing example the paragraph is coded as:
<P>
Welcome to the ACS HTML Tutorial.
This is a paragraph.
While short, it is still a paragraph!
</P>
and is displayed without line breaks as:
Welcome to the ACS HTML Tutorial. This is a paragraph. While short, it is still a paragraph!
Eventhough the three sentences are on three different lines in the HTML document, a Web browser ignores the carriage returns and starts a new line only when the line in the display window is full.
Important: You must indicate the beginning of paragraphs with a <P> tag. A browser ignores any indentations or blank lines in the source text. Without <P> tags, the document becomes one large paragraph. (One exception is text tagged as "preformatted," which is explained below.) For example, the following would produce identical results as the above HTML example:
<P>Welcome to the ACS HTML
Tutorial. This the first paragraph. While short, it is still
a paragraph!</P>
To preserve readability when editing HTML files, put headings on separate lines, use a blank line or two
where it helps identify the start of a new section, and separate paragraphs with blank lines
(in addition to the <P> tags). These extra spaces will help
you when you edit your files (but browsers will ignore the extra spaces because they have their own set
of rules on spacing that do not depend on the spaces you put in your HTML file).
NOTE: The </P> closing tag can be omitted. This is because browsers understand that when they encounter a <P> tag, it implies that there is an end to the previous paragraph. However, by using the <P> and </P> to delimit a paragraph you can center the paragraph by including the ALIGN= attribute in your source file.
For example:
<P ALIGN=CENTER>This is a centered paragraph.</P>Displays as:
This is a centered paragraph.
BR
The <BR> tag (with no ending tag) forces a single line break with no extra blank line. (Remember, <P> creates a blank line.)
For example:
Illinois State University<BR>
XXX College Avenue<BR>
Normal, Illinois 61701<BR>
Displays as:
Illinois State University
XXX College Avenue
Normal, Illinois 61701
HR
The <HR> tag (which does not have an ending tag) produces a horizontal line the width of the browser window. A horizontal rule is useful to separate sections of your document. For example, many people use a horizontal rule to separate sections of their text (as in this tutorial), or to indicate the end of a document.
You can vary a rule's size (thickness) and width (the percentage of the window covered by the rule). Experiment with the settings until you are satisfied with the presentation.
For example:
<HR SIZE="4" WIDTH="50%">displays as:
Lists - UL, OL, and DL
HTML supports unnumbered, numbered, and definition lists. You can nest lists too, but use this feature sparingly because too many nested items can be difficult to follow.
To make an unnumbered, bulleted list,
- start with a beginning unnumbered list tag, <UL>
- enter the <LI> (list item) tag followed by the individual item for each item in the list (with no closing </LI> tag)
- end the entire list with an end of list tag, </UL>
Below is a sample three-item list:
<UL>
<LI>apples
<LI>bananas
<LI>grapefruit
</UL>
The list is displayed as:
- apples
- bananas
- grapefruit
The <LI> items can contain multiple paragraphs. Define the paragraphs with the <P> paragraph tags.
A numbered list (also called an ordered list, from which the tag name derives) is very similar to an unnumbered list. The numbered list tag is <OL>. The items are tagged using the same <LI> tag as in the numbered list.
For example:
<OL>
<LI>oranges
<LI>peaches
<LI>grapes
</OL>
is displayed as:
- oranges
- peaches
- grapes
A definition list (coded as <DL>) usually consists of alternating a definition term (coded as <DT>) and a definition (coded as <DD>). Web browsers generally format the definition on a new line.
The following is an example of a definition list:
<DL>
<DT>ACS
<DD>School of Information Technology at Illinois State University
<DT>CAST
<DD>College of Applied Science and Technology at Illinois State University
</DL>
The displayed list looks like:
- ACS
- the School of Information Technology at Illinois State University
- CAST
- the College of Applied Science and Technology at Illinois State University
The <DT> and <DD> entries can contain multiple paragraphs (defined by <P> paragraph tags), lists, or other definition information.
The COMPACT attribute can be used in case the terms are very short and you want the term and its definition to be displayed on the same line.
For example:
<DL COMPACT> <DT> -i <DD>invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path <DT> -k <DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode </DL>is displayed as:
- -i
- invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path
- -k
- invokes NCSA Mosaic for Microsoft Windows in kiosk mode
Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item.
Here is a sample nested list:
<UL>
<LI> A few New England states:
<UL>
<LI>Vermont
<LI>New Hampshire
<LI>Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI>Michigan
<LI>Indiana
</UL>
</UL>
The nested list is displayed as:
- A few New England states:
- Vermont
- New Hampshire
- Maine
- Two Midwestern states:
- Michigan
- Indiana
PRE
Use the <PRE> </PRE> tag (which stands for "preformatted") to generate text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file). This is useful for program listings, among other things.
For example, the following lines:
<PRE>
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
will be display as:
#!/bin/csh
cd $SCR
cfs get mysrc.f:mycfsdir/mysrc.f
cfs get myinfile:mycfsdir/myinfile
fc -02 -o mya.out mysrc.f
mya.out
cfs save myoutfile:mycfsdir/myoutfile
rm *
The <PRE> tag can be used with an optional WIDTH
attribute that specifies the maximum number of characters for a line, e.g. <PRE WIDTH=40>.
WIDTH also signals your browser to choose an appropriate font and indentation for the text.
Hyperlinks (See Linking below) can be used within <PRE> sections. You should avoid using other HTML tags within <PRE> sections, however.
