Crowell Public Library, City of San Marino
Hours: Mon-Thurs 10-9, Fri - Sat 10-5, Sun 1-5
Home | Catalog | Nearby Libraries | Your Account | Contact Us

BASIC WEB PAGE DESIGN

By Irene E. McDermott, Librarian, Crowell Public Library, City of San Marino

Essential Tags on a Web Page

<HTML>
<HEAD>
<TITLE>
Web Site Title</TITLE>
</HEAD>
<BODY>
Contents of Web Site
</BODY>
</HTML>

Headings: H1 ... H6

The six heading elements, H1 through H6, denote section headings. H1 is large; H6 is the smallest. Documents should not skip levels (for example, from H1 to H3). 

<HEAD>
<TITLE>
Sample Headings</TITLE>
</HEAD>
<BODY>
<H1>
Engine Tune-Up</H1>
        <H2>Change The Oil</H2>
        <H2>Change the Spark Plugs</H2>
                <H3>Prepare the New Plugs</H3>
                        <H4>Remove the Guards</H4>
                        <H4>Check the Gap</H4>
</BODY>
</HTML>
The output is:

Engine Tune-Up

Change The Oil

Change the Spark Plugs

Prepare the New Plugs

Remove the Guards

Check the Gap

Paragraph

The P element indicates a paragraph. Typically, paragraphs are surrounded by a vertical space. 
<H1>This Heading Precedes the Paragraph</H1>
<P>This is the text of the first paragraph.
<P>This is the text of the second paragraph. Although you do not
need to start paragraphs on new lines, maintaining this convention 
facilitates document maintenance.</P>
<P>This is the text of a third paragraph.</P>

Line Break

The BR element specifies a line break between words. For example:

Pease porridge hot<BR>
Pease porridge cold<BR>
Pease porridge in the pot<BR>
Nine days old.

Lists

HTML supports unnumbered and numbered lists. You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.

To make an unnumbered, bulleted list,

  1. Start with an opening list <UL> (for unnumbered list) tag
  2. Enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is needed
  3. End the list with a closing list </UL> tag
Below is a sample three-item list:

<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>

The output is:

  • apples
  • bananas
  • grapefruit
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. The following HTML code:

<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>

Produces this formatted output:

  1. oranges
  2. peaches
  3. grapes

Logical Versus Physical Styles

Logical Styles

Emphasis: EM

The EM element indicates an emphasized phrase, typically rendered as italics. For example: 
A singular subject <em>always</em> takes a singular verb.

Strong Emphasis: STRONG

The STRONG element indicates strong emphasis, typically rendered in bold. For example: 
<strong>STOP</strong>, or I'll say "<strong>STOP</strong>" again!

Physical Styles

The I element indicates italic text. For example: 
A singular subject <i>always</i> takes a singular verb.
The B element indicates bold text. For example: 
<b>STOP</b>, or I'll say "<b>IT</b>" again!

URLs and Hyperlinks

A URL is a Uniform Resource Locator, that is, a Web address. HTTP stands for HyperText Transport Protocol. A file called "computer.html" on HTTP server "www.yoyodyne.com" in directory "/pub/files" corresponds to this URL: 
http://www.yoyodyne.com/pub/files/computer.html
The chief power of HTML comes from its ability to link text and/or an image to another document or section of a document. A browser highlights the identified text or image with color and/or underlines to indicate that it is a hypertext link HML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in your document:
  1. Start the anchor with <A (include a space after the A)
  2. Specify the document you're linking to by entering the parameter HREF="filename" followed by a closing right angle bracket (>)
  3. Enter the text that will serve as the hypertext link in the current document
  4. Enter the ending anchor tag: </A> (no space is needed before the end anchor tag)
Here is a sample hypertext reference: 
<A HREF="http://www.ncsa.uiuc.edu/General/Internet
/WWW/HTMLPrimer.html"> NCSA's Beginner's Guide to HTML</A>
This entry makes the text NCSA's Beginner's Guide to HTML a hyperlink to this document.

Images

The IMG element refers to an image or icon via a hyperlink. Attributes of the IMG element:
  • 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.
  • ALT: Text to use in place of the referenced image resource. 
<IMG SRC="triangle.gif" ALT="Warning:" ALIGN=TOP> Be sure to read this!
Or, to make the image a hyperlink: 
<a href="http://machine/htbin/imagemap/sample"> <IMG SRC="sample.jpg"> </a>

Escape Sequences (a.k.a. Character Entities)

Character entities have two functions:
  1. Escaping special characters
  2. Displaying other characters not available in the plain ASCII character set (primarily characters with diacritical marks)

Three ASCII characters--the left angle bracket (<), the right angle bracket (>), and the ampersand (&)--have special meanings in HTML and therefore cannot be used "as is" in text. (The angle brackets are used to indicate the beginning and end of HTML tags, and the ampersand is used to indicate the beginning of an escape sequence.) To use one of the three characters in an HTML document, you must enter its escape sequence instead: 

&lt;  the escape sequence for < 
&gt;  the escape sequence for >
&amp;  the escape sequence for &

mailto:%20%20

Every good Web page should include a link to the page author. You can make it easy for a reader to send electronic mail to a specific person or mail alias by including the mailto attribute in a hyperlink: <A HREF="mailto:%20%20emailinfo@host">Name</a>

For example, enter: <A HREF="mailto:%20%20pubs@ncsa.uiuc.edu"> NCSA Publications Group</a>

Also, mark every page with the date that you made or updated it.

For more information, see A Beginner's Guide to HTML by the National Center for Supercomputing Applications (NCSA) http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

Web Site Content
Return to Home Page

Crowell Public Library, City of San Marino, 1890 Huntington Drive San Marino, CA 91108
626.300.0777 smpl "at" ci.san-marino.ca.us
Last updated July 31, 2008