HTML: A Simple Introduction

Electronic Text Center
Alderman Library
University of Virginia
Charlottesville, VA 22904
434.924.3230

Introduction

About the Internet, Servers, and Clients

For many years, individual universities, schools, and businesses have had computers at their sites that have been networked together locally. The Internet is the same basic notion, on a global scale: a linking of countless individual sites all over the world, so they can share data globally rather than simply locally. It is most simply thought of as a "network of networks".

Internet-accessible HTML documents reside on a machine called a server that performs two basic functions: it receives requests for files and it responds to those requests by sending out the files across the internet. The requests come from a client machine -- like your home PC or Mac -- that can run browser software for viewing and navigating Internet documents, such as Netscape Navigator, Microsoft Internet Explorer, etc. The client has the ability to ask the server for a file, and when the server delivers it, the client can then display or otherwise manipulate its contents.

HTML -- What Is It and Why Do We Need It?

Because the Internet is so vast, it includes computers all over the world, which run countless different operating systems and browser programs. Unlike standard word-processor files, which contain proprietary codes that can only be read by the program that created them, Internet-accessible documents have to be in a format that can be displayed by any machine, anywhere in the world. Thus, HTML files use a simple set of universal codes to describe their content and formatting. These files are saved as plain text, or ASCII, which can be understood by all computers.

HTML is a subset of SGML (Standard Generalized Markup Language). SGML and HTML employ tags in angle brackets to mark off classes of information such as the structure of a document or its typography. For example, a heading might be tagged <H1>Chapter One</H1>. Strictly speaking, HTML and SGML are intended to define the structure of a document, not its appearance. However, in practical terms most authors of HTML documents routinely employ HTML tags to indicate format as well as structure.

A Few Words about HTML Authoring

The browsers program (Netscape, IE) largely controls how an HTML-encoded document looks on the screen, based on the tags it contains, which tags the browser recognizes, and what fonts or other capabilities a particular user's computer has installed. As an HTML author you have considerable, but not total, control over how your document will appear to a viewer who isn't using the same browser and/or hardware as you. Not all browsers display the same document the same way. You should try out your documents on several different browsers as you write them, to insure that they display the way you wish (expect) them to.

The number of HTML tags available grows continually. However, fairly complex web pages can be constructed using a small set of tags. The following lists those which commonly form the basis for most typical WWW pages. Note that the tags mentioned here are mostly "standard" and should work on all browsers. However, some browsers recognize other "non-standard" options as well, which are ignored or displayed unpredictably on other browsers. Deviations from "standard HTML" will be noted where applicable.

Basic HTML Structure

Every HTML document has the same basic structure. The whole document is bounded by a pair of <html> and </html> tags. Within these is a <head></head> section and a <body></body> section.

        <html>

                <head>

                        <title>Text of title</title>

                </head>

                <body>

                        Your text and images go here.

                </body>

        </html>

The most important element contained in the <head> is the <title> field, which should contain clear and concise information about your document. Browsers use the title field to generate lists of bookmarks; in addition, web search tools are able to use this field to index and retrieve your document. Advanced HTML authors sometimes include <META> tags in the head of their documents to further describe the contents.

Information in the head of an HTML document does not appear on the page itself. All text, images, and links on your page should be placed within the body, which contains the visible content of the page. All of the tags described from this point on are for use in the body only.

Basic HTML tags for use in the <body>

Section headers

Headers can be displayed in up to six different sizes, depending upon the browser. Level one headers are the largest, level two headers are slightly smaller, level three headers are smaller still, etc.

<h1>Level one header text</h1>

<h2>Level two header text</h2>

<h3>Level three header text</h3>

<h4>Level four header text</h4>

<h5>Level five header text</h5>

Divisional markers and Page Organization

<center></center> centers elements and text contained

<p></p> marks a paragraph

<blockquote></blockquote> marks a long quotation (usually indented)

<br> a line break; has no closing tag (called an "empty tag")

<hr> horizontal rule; has no closing tag (called an "empty tag")

Typography

<i>italics text</i>

<u>underlined text</u>

<sub>_subscript</sub>

<sup>^superscript</sup>

Lists

Some Examples

Unordered: items in these lists are marked with bullets:

<ul>

</ul>

Ordered: items in these lists are numbered:

<ol>

</ol>

Definition: items in these lists contain a headword and a definition:

<dl>

<dt>headword 1</dt>

<dd>definition 1</dd>

<dt>headword 2</dt>

<dd>definition 2</dd>

</dl>

Images on the page

All images that appear on the page ("in-line images") should be in .gif or .jpg format.

<IMG SRC="filename.gif">

<IMG SRC="images/filename.gif">

To accomodate users viewing your documents through a VT100 client (or through a graphical client that has the image loading turned off), it is a good idea to use the alt= attribute. The prose description in this field displays in lieu of the image:

<IMG SRC="filename.gif" alt="prose description of image">

Hypertext links

Links (text or images) can be made to another place in the same document, or to another file (text, image, sound, digital video).

<A HREF="filename or URL">The text or item to be a button goes here.</A>

<A HREF="filename.gif"><IMG SRC="filename.gif"></A>

<A HREF="resume.html">Click here to see my resume</A>

<A HREF="http://etext.lib.virginia.edu/"> Connect to the Electronic Text Center.</A>

This example links to an e-mail program in the browser:

<A HREF="mailto:dms8f@virginia.edu"> Send me Mail!</A>

Controlling Colors and Alignment

The <body> attributes

The entire "page" as it will display in the browser is contained within the <body> tag. Hence, attributes of the <body> apply to the entire document.

<BODY BACKGROUND="filename.gif">
The BACKGROUND attribute lets you specify a background image.
<BODY BGCOLOR=number|name>
The BGCOLOR attribute lets you specify a background color.
<BODY TEXT=number|name>
The TEXT attribute lets your specify a base color for text.
<BODY LINK=number|name>
The LINK attribute lets you identify hypertext links with a specific color.
<BODY ALINK=number|name>
The ALINK attribute higlights a hypertext link in a given color as a user clicks on it. After flashing the ALINK color, visited links change to the VLINK color.
<BODY VLINK=number|name>
The VLINK attribute lets you identify links which have already been followed.

The <font> tag

<font color|size="color|number">text in specified font color or size</font>

The <hr> attributes

<HR SIZE=number>
The SIZE attribute controls thickness of the horizontal rule.
<HR WIDTH=number|percent>
The WIDTH attribute controls the width, in pixels or as a relative percentage of the document width.
<HR ALIGN=left|right>
When using WIDTH, the ALIGN attribute specifies whether the rule should be up against the left margin, the right margin, or centered in the page.
<HR NOSHADE>
NOSHADE attribute lets you specify that you do not want any fancy shading of your horizontal rule.

The <img> attributes

<IMG ALIGN=left|center|right|top|middle|bottom>
The ALIGN attribute specifies the alignment of the image in relation to the surrounding text that wraps around it.
<IMG HEIGHT=pixels WIDTH=pixels >
The HEIGHT and WIDTH attributes determine the dimensions of the image. If the actual size of the image is not equal to the dimensions specified, the browser will automatically resize the image to fit those dimensions.