HTML I: Basic HTML

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

Hypertext Markup Language (HTML), allows one to create documents in which one piece of text can contain links ("buttons") to other documents. The links can be to files on the same machine as the source document, or on networked machines anywhere on the Internet.

The Internet

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 cabling-together of these innumerable 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.

The Web Server and Client

Internet-accessible HTML documents reside on a machine -- 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 viewing and navigating software -- clients. Netscape Navigator, Microsoft Internet Explorer, etc. are all clients, with versions written for the Macintosh, MS Windows, and X Windows, that can display and navigate HTML documents in a graphical environment. There is also a functional VT100 viewer for HTML texts, called Lynx; while the VT100 viewer cannot show you images, it does give you full use of the hypertext links between text documents. The client asks for a file, and then deals with it when it arrives.

To create web pages at UVA, you need to establish an account on one of the University's World Wide Web Server machines. See the helpsheet on

Creating a New Unix Account

Standard Generalized Markup Language

HTML is a simple implementation of SGML (Standard Generalized Markup Language). SGML employs items in angled brackets to mark off classes of information such as the structure of a document or its typography. So, a title might be tagged in this form: <title>Great Expectations</title>. One then relies on a piece of software that can read these tags, use them as a database structure in order to limit searches (search for "Expectations" only when it is a word in a title and not some other piece of data), and represent the information typographically: Great Expectations (italicized, with the tags hidden from view).

HTML Standards

The official W3C HTML standard is currently 4.0, though most browsers don't fully support it yet. See http://www.w3.org/pub/WWW/MarkUp/ for the official word on HTML. Some browsers such as Netscape Navigator and Internet Explorer support additional, non-standard tags, known as "extensions," which may not work in all browsers. There are services on the web now that will check your document and tell you where you depart from the standard:

HTML Validation Service

http://validator.w3.org/

How to Write HTML files:

The following on-line guides should be of use as you continue to develop your HTML skills.

HTML 4.0: http://www.w3.org/pub/WWW/MarkUp/
Netscape Navigator Handbook: http://home.netscape.com/eng/mozilla/3.0/handbook/
A Beginner's Guide to HTML: http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html
How to Create Web Services: http://home.netscape.com/home/how-to-create-web-services.html
Creating High-Impact Documents for Netscape: http://home.netscape.com/assist/net_sites/impact_docs/index.html
More HTML (I) -- Tables and Frames: An Etext Center handout: http://etext.lib.virginia.edu/services/helpsheets/html/morehtml-a.html
More HTML (II) -- Image Maps: An Etext Center handout: http://etext.lib.virginia.edu/services/helpsheets/html/morehtml-b.html

Selected "helper" web sites, including HTML Creation software

Web Weaver (Mac): http://www.mcwebsoftware.com/webweav.asp
Colormaker Page: http://www.bagism.com/colormaker/
Controlling Colors in Your Document: http://home.netscape.com/assist/net_sites/bg/index.html
The Background Image Sampler: http://home.netscape.com/assist/net_sites/bg/backgrounds.html

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>

HTML tags for use in the <head> only

Each <head> requires a <title> field, which contains information about your document. Web search tools are able to use this field to locate your document.

(Only text and elements within the <body></body> field will appear on the page itself. The text in the <title></title> field is used to identify the page.)

HTML tags for use in the <body> only

Section headers

(levels indicate orders of importance -- these will appear in decreasingly smaller type)

<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>

<li>item 1

<li>item 2

</ul>

Ordered: items in these lists are numbered:

<ol>

<li>item 1

<li>item 2

</ol>

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

<dl>

<dt>headword 1

<dd>definition 1

<dt>headword 2

<dd>definition 2

</dl>

Images on the page

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

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:

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 to be formatted 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.

HTML tags -- A selected glossary

Unless otherwise noted, these tags are not permitted in the <head> section.

See also W3C HyperText Markup Language (HTML) Home Page -- http://www.w3.org/MarkUp/ -- for details of the current HTML standard.

A: Hypertext anchor.

Can contain: headers, typographic tags, <IMG>

Allowed in: <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

Principal attribute: href

<A href="file.html">click here</A>

ADDRESS: Short description of address or sigature.

Can contain: typographical tags; <IMG>

Allowed in: <blockquote> <body> <form>

<address>etextcenter@virginia.edu</Address>

B: Bold text

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

<b>The Electronic Text Center</b>

BLOCKQUOTE: contains text quoted from another source.

A typical rendering might be a slight extra left and right indent, and/or italic font. Typically provides space above and below the quote.

Allowed in: <body> <dd> <form> <li>

<blockquote>characters... </blockquote>

BODY: The main content of a document

Can contain: everything except <HEAD> and <HTML>

Contained in: <HTML>

BR: Line break -- an empty tag -- has no closing tag.

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

CENTER: All lines of text between the begin and end of CENTER are centered between the current left and right margins.

Can contain: <body> elements

CITE: Citation (e.g. a book title) -- appears in italics

Can contain: typographical tags; <IMG>

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

<CITE><I>Canterbury Tales</I></CITE>

CODE: An example of computer code -- appears in monotype.

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

DL: Definition list

Allowed in: <blockquote> <body> <dd> <form> <li>

DD Definition in a definition list

Allowed in: <dl>

DT Definition term in a definition list

Allowed in: <dl>

<DL>

<DT>Term</DT><DD>This is the definition of the first term.</DD>

<DT>Term</DT><DD>This is the definition of the second term.</DD>

</DL>

EM Emphasis (usually italics)

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

<EM>The Electronic Text Center</EM>

H1 H2 H3 H4 H5 H6: Levels of heading -- less important as number increases.

Can contain: typographical tags; <IMG>

Allowed in: <a> <blockquote> <body> <form>

<H1>Main Section</H1>

<H2>Sub Section</H2>

HEAD: Information regarding the document

Contained in: <HTML>

Usually contains: <TITLE>

HR Horizontal rule -- an empty tag -- has no closing tag.

HTML Top level document wrapper

Contained in: nothing

Contains: everything

I Italics

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

<I>Canterbury Tales</I>

IMG Image -- an empty tag -- has no closing tag.

Principal attributes: src= alt= align=

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <samp> <strong> <tt> <var>

Often contained in the <A> tag, as an image button. Images that are "inline" -- that is, on the page, must be in the GIF file format.

alt= alternative text description, for non-graphical clients

align= alignment of the image with respect to the text baseline.

`TOP' specifies that the top of the image aligns with the tallest item on the line containing the image.

`MIDDLE' specifies that the center of the image aligns with the baseline of the line containing the image.

`BOTTOM' specifies that the bottom of the image aligns with the baseline of the line containing the image.

KBD indicates text typed by a user, typically rendered in a mono-spaced font. This is commonly used in instruction manuals. For example:

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

e.g. Enter <kbd>FIND IT</kbd> to search the database.

LI list item -- marks off individual items in a list.

Can contain: typographical tags, <a> <img> <pre> <cite>

Allowed in: <dir> <menu> <ol> <ul>

MENU a list of items with typically one line per item. The menu list style is typically more compact than the style of an unordered list.

Must contain: LI

Allowed in: <blockquote> <body> <dd> <form> <li>

OL Ordered list -- items are numbered

Must contain: LI

Allowed in: <blockquote> <body> <dd> <form> <li>

P Paragraph

Allowed in: <address> <blockquote> <body> <dd> <form> <li>

PRE Preformatted fixed pitch text. Makes the client software obey hard returns and tab keys as layout instructions

Can contain: typographical tags

Allowed in: <blockquote> <body> <dd> <form> <li>

STRONG Strong emphasis (usually bold)

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

<strong>the electronic text center</strong>

TT teletype font -- fixed width (monotype).

Allowed in: <a> <address> <b> <blockquote> <body> <cite> <code> <dd> <dt> <em> <form> <h1> <h2> <h3> <h4> <h5> <h6> <i> <kbd> <li> <p> <pre> <samp> <strong> <tt> <var>

UL unordered list -- items are not numbered but are marked with a bullet.

Must contain: <li>

Allowed in: <blockquote> <body> <dd> <form> <li>

Special Character Codes for HTML

Æ	Æ	capital AE ligature
Á	Á	capital A, acute accent
Â	Â	capital A, circumflex
À	À	capital A, grave accent
Å	Å	capital A, ring
Ã	Ã	capital A, tilde
Ä	Ä	capital A, umlaut
Ç	Ç	capital C, cedilla
Ð	Ð	capital Eth, Icelandic
É	É	capital E, acute accent
Ê	Ê	capital E, circumflex
È	È	capital E, grave accent
Ë	Ë	capital E, umlaut
Í	Í	capital I, acute accent
Î	Î	capital I, circumflex
Ì	Ì	capital I, grave accent
Ï	Ï	capital I, umlaut mark
Ñ	Ñ	capital N, tilde
Ó	Ó	capital O, acute accent
Ô	Ô	capital O, circumflex
Ò	Ò	capital O, grave accent
Ø	Ø	capital O, slash
Õ	Õ	capital O, tilde
Ö	Ö	capital O, umlaut mark
Þ	Þ	capital THORN, Icelandic
Ú	Ú	capital U, acute accent
Û	Û	capital U, circumflex
Ù	Ù	capital U, grave accent
Ü	Ü	capital U, umlaut
Ý	Ý	capital Y, acute accent
á	á	small a, acute accent
â	â	small a, circumflex accent
æ	æ	small ae ligature
à	à	small a, grave accent
å	å	small a, ring
ã	ã	small a, tilde
ä	ä	small a, umlaut mark
ç	ç	small c, cedilla
é	é	small e, acute accent
ê	ê	small e, circumflex accent
è	è	small e, grave accent
ð	ð	small eth, Icelandic
ë	ë	small e, umlaut mark
í	í	small i, acute accent
î	î	small i, circumflex accent
ì	ì	small i, grave accent
ï	ï	small i, umlaut mark
ñ	ñ	small n, tilde
ó	ó	small o, acute accent
ô	ô	small o, circumflex accent
ò	ò	small o, grave accent
ø	ø	small o, slash
õ	õ	small o, tilde
ö	ö	small o, umlaut mark
ß	ß	small sharp s, sz ligature
þ	þ	small thorn, Icelandic
ú	ú	small u, acute accent
û	û	small u, circumflex accent
ù	ù	small u, grave accent
ü	ü	small u, umlaut mark
ý	ý	small y, acute accent
ÿ	ÿ	small y, umlaut mark
©	©	copyright
®	®	registered trademark