|
Most documents have common elements, such as, titles, paragraphs, and lists. These elements are
identified in HTML through the use of tags. Everything that is not an HTML tag is part of the
document content. With a few exceptions, HTML does not allow you to describe the exact appearance or layout of
a document. The designers of HTML did this on purpose. Why? Because you don't know the capabilities of the
computer that is going to display the document, i.e. the size of the screen, the fonts that are installed,
etc. By separating the structure of a document and its appearance, a browser program that reads and
interprets HTML can make formatting decisions based on the capabilities of the end user's computer.
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. HeadingsHTML 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 headingThis is an example of a H2 headingThis is an example of a H3 headingThis is an example of a H4 headingThis is an example of a H5 headingThis is an example of a H6 headingParagraphsThe <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. BRThe <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
HRThe <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 DLHTML 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,
Below is a sample three-item list: <UL>
<LI>apples
<LI>bananas
<LI>grapefruit
</UL>
The list is displayed as:
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:
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:
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:
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:
|