Overall document structure

Getting Started

A typical Web page or document consists of two sections, the head and body. The following tags bracket the document and sections:

<html>...</html> bracket the entire document

<head>...</head> bracket the heading section

<body>...</body> bracket the body section

Therefore, a typical document is structured like this:

<html>

<head>

<title>title text goes here</title>

</head>

<body>

the document content goes here

</body>

</html>

There are many tags available for use in the body section, and a fewer for the head section. To get started, here are some body tags that are commonly used in the document and to control character style.

General document:

start paragraph

<hn>...</hn> level n heading, where n is between 1 (major heading) and 6 (minor)

<hr> horizontal rule

force a line break

... un-breakable text

comment

Character style:

... boldface type

... italic type

<tt>...</tt> monospace, typewriter-style type

... underline type (some browsers)

... emphasized type (often = italic)

... strong type (often = bold)

Tags often have optional attributes, specified as attribute-value pairs, att = value, for example:

<hr size = 4 width = 25% align = center>: a horizontal rule which is 4 pixels thick, centered in the window, and covers 25% of its width.

: start of a centered paragraph.

Lists

There are two types of list, ordered and unordered. Unordered lists use bullets, and ordered lists use number, letters, or some other indication of order. The list is bracketed by opening and closing tags, and each list element begins with an <li> tag. The structure of an unordered list (<ul>) is:

<ul>

<li> first list element

<li> second list element

...

<li> last list element

</ul>

An ordered list would be the same, but use the <ol> and </ol> tags. Bullet or numbering style is controlled using tag attributes, as follows.

Ordered lists:

type = 1 elements are listed as 1, 2, 3, ...

type = a elements are listed as a, b, c, ...

type = A elements are listed as A, B, C, ...

type = I elements are listed as I, II, III, ...

type = i elements are listed as i, ii, iii, ...

Unordered lists:

type = disc bullet is a solid circle

type = circle bullet is an open circle

type = square bullet is an open square

Examples:

<ul type = square>: an unordered list with square bullets.

<ol type = A>: an ordered list with elements labeled A, B, C, ....

Links

Links use the anchor (<a> ... </a>) tag, and the href (hypertext reference) attribute.

The anchor tag for a link to a document on another server has this form:

The URL, uniform resource locator, is the location of the document you wish to link to, and the link text is the highlighted text the user clicks on to retrieve that document.

The general format of a URL is:

server type://host name/directory/file

The server type is usually http, hypertext transfer protocol, which indicates a Web server. The host name, is the name of the host where the document is stored. The directory and file names are optional.

For example, the URL of my home page is:

http://som1.csudh.edu/fac/lpress/index.htm

This says my home page is a file called index.htm, which is found on the host called som1.csudh.edu, which is running a Web server. When you set up a Web server, you specify a root directory for documents on the server, and the file index.htm is in the fac/lpress/ subdirectory of the document root directory on the server.

Putting all this together, a link to my home page might look like this:

<a href = "http://som1.csudh.edu/fac/lpress/index.htm" >Larry Press</a>

This would cause Larry Press to be displayed as a hot link, and if the user clicked on it, my home page would be retrieved from the Web server som1.csudh.edu.

A link to a document on the same server has the form:

The path is optional. If it is not used, the target file will be assumed to be in the same directory as the linking document. If there is a path, and it begins with a "/" character, it is relative to the Web server document root. If it does not begin with a "/," it is relative to the directory of the linking document. Some examples are:

<a href = "any.htm" >any</a>: link to a file called any.htm in the same directory.

<a href = "/any.htm" >any</a>: link to a file called any.htm in the document root.

<a href = "documents/any.htm" >any</a>: link to a file called any.htm in the sub-directory called documents.

More Handy HTML Tags

Definition lists

The definition list may be used for a list of terms and their definitions, dialog in a play, etc. The list is enclosed tags, <dl> ... </dl>, and the terms and there definitions are tagged <dt> and <dd> respectively. A list of 3 terms and their definitions would be marked up as follows:

<dl>

<dt>term1<dd>definition of term 1

<dt>term2<dd>definition of term 2

<dt>term3<dd>definition of term 3

</dl>

Blockquotes

The <blockquote> ... </blockquote> tag indents the bracketed text from both margins. This is designed for long quotations, but it looks good in other contexts as well.

Preformatted text

The <pre> ... </pre> tags are used for preformatted text like tables. The browser will not do word-wrapping on preformatted text -- it leaves spacing exactly as it is in the original. It also uses monospaced type.

Other head section elements

Most Web pages use only the title tag in the head section, but there are others, including:

<base href = url> URL for relative links if the page is moved

Other body attributes

Several attributes of the body tag change overall appearance. Two of these are bgcolor and background.

bgcolor = #xxxxxx set the page background color

text = #xxxxxx set the text color

background = "gif file" set the page background pattern

The color value, #xxxxxx, is a hexadecimal number with two hex digits for the red, green, and blue components of the background color or color of the text. The gif file in background contains an image that is repeated to form a background texture or pattern.

Inline Images

All Web browsers support in line images in the .gif format, and most allow inline images in the .jpg format as well. An inline image is treated as if it were a large character, and included in the text. The surrounding text may be aligned at the top, middle or bottom of the image using the align attribute.

The img tag specifies an image, and gives its file location and alignment. For example:

displays the file called image.gif and aligns the surrounding text with the top of the image.

Since the image file is treated as if it were an oversized character, it may be used as a link name or as part of a link name. The <img> tag is just included within the index text portion of an anchor tag. For example:

<a href = "target.htm" > <img src = "arrow.gif"> </a>see the target.

displays a picture of an arrow (arrow.gif), and, if the user clicks on it, target.htm will be retrieved. The arrow image would be surrounded by a colored border indicating it was a link.

Later browsers allow the align attribute to take on the values left or right. In these cases, the text following the image will flow around it. For example,

<img src = "image.gif" align = "left" > followed by a long paragraph ...

would display image.gif at the left of the window, with the paragraph flowing around it.