Continuing Studies cs21 • Beginning Web Site Design

Basic HTML Tags

Structural Tags
Layout Tags
Text Formatting Tags
Links
Graphics

Structural Tags

<HTML>
These tags enclose the entire Web page document.
</HTML>

<HEAD>
These tags enclose the Head part of the document.
</HEAD>

<BODY>
These tags enclose the body of document.
</BODY>

<TITLE>
These tags enclose the title of the document. This text appears in the title bar in the browser and on the bookmark list if someone bookmarks your web page.
</TITLE>

Sample Structure

<HTML>


<HEAD>


        <TITLE>


        John Doe's Web Page


        </TITLE>


</HEAD>


<BODY>


        All the information you ever wanted to know about John Doe!


</BODY>


</HTML>

Layout Tags

Containers

Header Tags

Used for marking sections and sub-sections in a document
<H1> Header 1 </H1>
<H2> Header 2 </H2>
<H3> Header 3 </H3>
<H4> Header 4 </H4>
<H5> Header 5 </H5>
<H6> Header 6 </H6>

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Paragraphs

<P>
Encloses paragraphs. Inserts a line before each paragraph.
</P>

Container Attributes

Paragraphs can be modified with the following attribute:

align=left/center/right

<P ALIGN="LEFT">
Aligns paragraph to the left hand border -- this is the default
</P>

<P ALIGN="CENTER">
Aligns paragraph to the center of the page
</P>

<P ALIGN="RIGHT">
Aligns paragraph to the right hand border
</P>

Related Tags

<BR>
Line Break
This allows text within a paragraph or header to stop and start on the very next line. Line Break Attributes <BR CLEAR="ALL">
This allows the line break to "clear" any alignment features that might be carrying over and affecting the look of a page. It is especially useful after aligned graphics -- see GRAPHICS.

<HR>

Horizontal Rule
This puts a graphical line across the page. Example:

Horizontal Rule Attributes

NOSHADE
A solid line with no shading
Example:

WIDTH="xx%/xx"
This feature controls the width of the line. You can specify either actual pixels or a percentage of
the width of the page.
Example:

SIZE="xx"
This feature controls the height of the line. You need to specify the dimension in pixels.
Example:

ALIGN="left/center/right"
This feature allows the line to be aligned to the left, right, or center of the page.
Example:

Text Formatting Tags

Basic Text Formatting Styles

Tag	Result
<PRE> Preformatted Text </PRE>	Preformatted Text
<BLOCKQUOTE>Blockquotes</BLOCKQUOTE>	Blockquotes
<ADDRESS>Address</ADDRESS>	Address
<CITE>Citations</CITE>	Citations
<CODE>Source Code</CODE>	`Source Code`
<I>Italic</I>	Italic
<B>Bold</B>	Bold

Lists

Unnumbered

<UL>
<LI>Labrador Retriever
<LI>Curly-Coated Retriever
<LI>Golden Retriever
<LI>Flat-Coated Retriever
<LI>Chesapeake Bay Retriever
</UL>

Labrador Retriever
Curly-Coated Retriever
Golden Retriever
Flat-Coated Retriever
Chesapeake Bay Retriever

Unnumbered List Attributes

TYPE=disc/circle/square
This allows you to specify what the bullet point will be for your unnumbered list. Example:

Disc

Circle

Square

Numbered

<OL>
<LI>Labrador Retriever
<LI>Curly-Coated Retriever
<LI>Golden Retriever
<LI>Flat-Coated Retriever
<LI>Chesapeake Bay Retriever
</OL>

Labrador Retriever
Curly-Coated Retriever
Golden Retriever
Flat-Coated Retriever
Chesapeake Bay Retriever

Numbered List Attributes

TYPE=i/I/a/A/1
This allows one to specify what the numbering scheme will be for your list.

lower roman numeral

upper roman numeral

lower roman numeral

lower-case letters

upper-case letters

numbers (this is the default)

START="xx"
This attributes allows one to specify what number you start your list with.

start
list
with
5

Definition

<DL>
<DT>Labrador Retriever
<DD>A sturdy, short-haired retreiver which comes in black, chocolate, and yellow.
<DT>Curly-Coated Retriever
<DD>A lighter-boned retriever with a curly haired coat. They come in black and liver.
<DT>Golden Retriever
<DD>A study, long-haired retriever which comes in shades of golden.
<DT>Flat-Coated Retriever
<DD>A lighter-boned, long-haired retriever which comes in black and liver.
<DT>Chesapeake Bay Retriever
<DD>A sturdy, wavy-haired retriever which comes in various shades of brown.
</DL>

Labrador Retriever: A sturdy, short-haired retreiver which comes in black, chocolate, and yellow.
Curly-Coated Retriever: A lighter-boned retriever with a curly haired coat. They come in black and liver.
Golden Retriever: A study, long-haired retriever which comes in shades of golden.
Flat-Coated Retriever: A lighter-boned, long-haired retriever which comes in black and liver.
Chesapeake Bay Retriever: A sturdy, wavy-haired retriever which comes in various shades of brown.

Links

The ANCHOR tag is used to link from one document to another or from one part of a document to another part of the same document. Because of the way URL (Uniform Resource Locators) work, one can also specify an email link.

Basic Links

<A HREF="http://www.stanford.edu/">Stanford University</A>
Stanford University

Inter-Document Links

<A HREF="http://www.stanford.edu/#spot">Point to Spot</A>
Point to Spot

Specifying a Point in a Document

<A NAME="spot">Spot</A>
Spot

Email Link

<A HREF="mailto:sample@stanford.edu">Sample Email Link</A>
Sample Email Link

Graphics

Graphics Attributes alt="text text text" (type in a description of the graphic)

This attribute is used as a courtesy to those who cannot see graphics for various reasons. Keep the description brief but make sure it is a good description of the graphic. The text will appear if the user has graphics turned off on their browser or if they are using a web page reader for the blind.

width="xx" (specify pixels)
height="xx" (specify pixels)

These two attributes should be used to specify the actual size of a graphic. This allows the webpage to load more quickly. They can also be used to display a smaller version of the graphic. Be aware that this does not change the size or download time of the graphic. It should be used with care.

border="xx" (specify pixels)
Specify a value of 0 (zero) if you want no border to show up. This attribute is especially useful if you are creating a linked button (ie. a graphic that is also a link). hspace="xx" (specify pixels)
vspace="xx" (specify pixels)

These two attributes put a buffer around the graphic. A value of "5" is useful when you have text and graphics butted up against each other. Hspace defines the buffer horizontally and vspace defines the buffer vertically.

align=top/middle/bottom/right/left

This is the most complicated attribute for graphics. It is used to specify how text and graphics will line up with each other.

Small graphics that are included in a block of text use the first three attributes (top, middle, bottom) to specify how the text will line up with them. Example:

Top
Middle
Bottom

Many times, one will want to wrap text around graphics. This is done using the last two align attributes:
Left
Left
Left
Left

Right
Right
Right
Right