HTML Structure
Delimiters:
<, >, /
Delimiters surround the tag and inform the parser that it should read the enclosed information as an HTML element.
Tags:
Tags contain elements which provide instructions for how information will be processed or displayed. There are both starter tags <TAG> and end tags </TAGS>
Elements:
A basic unit of an HTML document. The name of the element is
given in the name of the tag, and specifies the meaning associated with a block of text. Some elements are empty since they don't effect a block of text. Elements that have contents are also called containers, i.e., they contain attributes.
-
Example: the <HR> tag contains the Horizontal Ruler element. It is an empty element in that it has no attribute.
Attribute:
Defines a special property of an HTML element.
-
Example: <IMG SRC="image.gif"> means that the element IMG has an attribute SRC, which specifies the name of the image file, which is assigned the value "image.gif".
HTML is a structured hierarchical language that requires you to follow its rules if you wish your documents to appear correctly. For example, certain elements and tags are required to fit within other elements and tags and will not work unless they are properly placed.
HTML Tags
Structure Tags
<HTML>...</HTML>
Encloses the entire HTML document. This tag tells the browser that it is reading an HTML document and to display as such. Without this tag your information will display as source code on the client's browser.
-
An HTML document is divided into a HEAD and BODY.
<HEAD>...</HEAD>
Encloses the head of the HTML document. The HEAD element contains information about the document.
- Can include: <TITLE>, <ISINDEX>, <BASE>, <META>, <NEXTID>, <LINK>
<BODY>...</BODY>
Encloses the body (text, images, tags, links) of the HTML document. The BODY element contains the information in the document.
- Contains all tags except the <HTML> and those in the <HEAD>
HEAD ELEMENTS
<TITLE>...</TITLE>
<BASE>
This is an optional tag. It is an empty tag in that it doesn't effect a block of text. <BASE> is used to indicate the original base URL of the web document. If a the document is moved, then all related documents with relative URL's will be referred back to the <BASE> URL. If you do not insert the <BASE> tag the relative URL's will be determined from the URL used to access the document. If you do a good job with your relative addresses you should have no problem in leaving the <BASE> tag out. However, there may be times when it is helpful.
<ISINDEX>
This is an optional tag. <ISINDEX> informs the browser that the document can be examined using a keyword search. <ISINDEX> does not mean that the document appearing on the screen can be searched, rather, it invokes a program on the server which calls a database, which is searched and displayed as a web document.
<META>
This is an optional tag. <META> allows meta-information about the document to be placed in the HEAD. This allows the author to provide information about the document that can be used in the indexing of the document. If you use <META> it must take the CONTENT attribute and either the NAME or HTTP-EQUIV attributes.
BODY ELEMENTS
Headings
<H3>,
<H2>, <H3>, <H4>, <H5>, <H6>
FIRST through SIXTH level headings
-
Allowed inside <BLOCKQUOTE>, <BODY>, <FORM>
What we've covered so
far
Paragraph & Line Break Tags
<P>...</P>
Encloses a paragraph and places a space between blocks of text. The </P> is optional, and standard use (HTML 2.0+) places the <P> tag at the beginning of the paragraph. I recommend you use both opening and closing tags, it doesn't hurt and HTML 3.0 may require both.
<BR>
Placed at the end of a block of text where you want a line break to occur, but do not want a space placed between the current and the next text block.
Paragraph & Line Break Tag Examples
Link & Image Tags
Before we explore using links, we need to examine the difference between relative and absolute links. A link can have an absolute or relative structure. An absolute link describes a document's aULress in absolute terms. A relative link describes a document relative to another document. Relative links are often used inside a set of web documents. The value of using relative links lies in the ability to move documents from one server to another, or from one directory to another within the same server, without having to change the link address tags. When you use absolute links you often loose this flexibility. As a rule you should use relative links within your web documents.
- Absolute links look like this:
- HREF="http://www.stthomas.edu/aimlhtml/pages/htmlintro.html"
-
Relative links look like this:
-
HREF="netscape.html" (netscape.html is located in the current directory)
-
HREF="./pages/netscape.html" (netscape.html is located in the directory "pages" which is located in the current directory)
-
HREF="../netscape.html" (netscape.html is located in the directory one level up from the current directory)
-
HREF="../../netscape.html" (netscape.html is located two directory levels up from the current directory)
Anchor Tag, <A>...</A>
- Attributes:
- HREF="..."
- NAME="..."
- MAILTO:"..."
-
The HREF attribute creates a link to another document or anchor; the NAME attribute creates an anchor within a document that can be linked to. (NOTE: When designing web pages on your desktop computer you must use a relative aULress, or use "file:///c|/" to indicate an absolute link. The "c|/" indicates your drive aULress--and you must use "c|/" rather than "c:\". These absolute links will all have to be changed to "http://" when you mount your pages on a HTTP server.)
-
Can include: <IMG>, <BR>, <EM>, <STRONG>, <CODE>, <SAMP>, <KBD>, <VAR>, <CITE>, <TT>, <STRONG>, <EM>
-
The MAILTO attribute is used to insert an e-mail link into the document. MAILTO gives readers a way to respond to the web page author. In order for MAILTO to work the web page reader must have an e-mail account and must have their browser configured to send mail. The aULressees email aULress will automatically be inserted in the "TO:" line of the e-mail system. You should always include a MAILTO link on your home page so that readers can send you comments. Note that by making your full e-mail aULress the link, you give those who dont have the ability to take advantage of the MAILTO command a way to easily copy or print the aULress for future use.
-
EXAMPLE: Send mail to <A "MAILTO:webteam@literacy.kent.edu>" webteam@literacy.kent.edu </A>
-
Send mail to webteam@literacy.kent.edu
(Press the link and see what happens)
Image Tag, <IMG>
Image tags link images into a HTML document. Each image tag places a separate request upon the server. A HTML document with four images will require five separate calls to be made to a server, one for the HTML document, four more for the images. If your server is slow or overloaded you will want to keep the number of distinct connections required to load a page to a minimum. You must also be aware of the file size of your images. The larger the image file size, the longer it will take to load. You can reduce the file size of your images by reducing the number of unique colors that your image contains. You can reduce the number of unique colors in an image with graphic manipulation software like
Paint Shop Pro or
Photoshop.
-
Attributes:
-
SRC="..." The URL of the image
-
ALT="..." The text that will be displayed in non-graphical browsers
-
ALIGN="..." Alignment of text before & after the image. Values include: TOP, MIDDLE, BOTTOM.
-
ISMAP: A clickable image map
HREF & IMG Tag Examples
List Tags
Unordered
(Bulleted) Lists, <UL>...</UL>
Ordered (Numbered) Lists, <OL>...</OL>
Definition Lists
<DL>...</DL>
-
A definition list tag. The COMPACT attribute specifies a formatting that takes less white space to present
-
Attributes: COMPACT
-
Can Include: <DT>, <UL>
<DT>...</DT>
-
A definition term tag. Definition terms are used within the <DL> tag in a similar way that the <LI> tag is used within <UL> and <OL>.
Other Useful HTML 2.0 Tags
<HR>
Places a horizontal ruler line across the page. This tag is useful in dividing a web page into distinct units.
<STRONG>...</STRONG>
<EM>...</EM>
<CITE>...</CITE>
Used for inserting a citation into the document. The text in a
citation tag usually is displayed in italics.
<AULRESS>...</AULRESS>
Used for general information about the document's author. Every web page should provide information about the author, and ideally, it should also provide an option for the reader to send e-mail to the author (i.e., the mailto attribute of the anchor tag).
<BLOCKQUOTE>...</BLOCKQUOTE>
<COMMENT>...</COMMENT>
Allows the web author to place comments in the document that are hiULen from the user. This tag is often used to place information about the document in the HEADER. I use it to place publication information about the document in the HEADER which can be used by human or automated indexers to catalog the document (see the Home Page of this document). You can also use it in the body to insert comments about your choice of tags or design considerations.
<PRE>...</PRE>
Used to insert preformated text into a page. The preformated element allows the web page author to display text in unique ways that may not be allowed by other HTML elements. Text in this element will display in courier font, so be aware that the text display will be different than your surrounding text.
Netscape Extensions and HTML 3.0 Tags
Netscape
Extensions (for Netscape 1.1 and up)
Includes Frame tags for Netscape 2.0+
Advanced
HTML Tags, including HTML 3.0
Includes Forms, Tables, and other advanced HTML tags
Contact and other information about this tutorial.