-- Click to visit --
Home Page
Site Map,

Bones of a Web Site

Hyper Text Markup Language Tags

Table of Contents
Layout	Text Style	Blocks	Headings	Images	Anchors
Lists	Separators	Comments	Tables	Urls	Special

Introduction

Hyper Text Markup Language (HTML) is the language of the World Wide Web (WWW) where web pages are displayed. The language is in the form of tags such as <HR> (horizontal rule) which are instructions to the browser (such as Netscape or Mosaic) The tags tell the browser such things as how to display text, graphics or link to another site. All tags are enclosed in angle brackets and certain tags have attributes which modify the way the tag behaves.

Some tags, such as <HR> are stand-alone tags and other tags such as <B> text </B> come in pairs. The following is a list of basic HTML tags:

Page Layout

<HTML>....</HTML>:

Indicates the entire HTML document. These tags go at the very top and bottom of the page

<HEAD>...</HEAD>

Indicates the "head" of the document. The title tags are included within these tags.

<TITLE>text</TITLE>

Text which appears in the title bar of the browser. (required tag)

<BODY

BACKGROUND="URL"
- tiles a background image
BGCOLOR="color"
- specifies a particular background color
LINK= "color"
- specifies a particular color for links
ALINK="color"
- specifies a particular color for a link when it is clicked
VLINK=" color"
- specifies a particular color for links after they are visited
TEXT="color"
- specifies a particular color for the text

...</BODY>

The body tags enclose the entire "body" of the document. "color" is a # and a hexadecimal string. Such as #0000FF for a blue background.

Table of Contents

Text Styles

<B>text</B>	Display text in bold
<BIG>text</BIG>	Display text in big font
<I>text</I>	Display text in italics
<SMALLl>text</SMALL>	Display text in small font.
<S>text</S>	Strikethrough ~~text~~
<SUB>text</SUB>	Subscript_text
<SUP>text</SUP>	Superscript^text
<TT>text</TT>	Typewriter `text`
<U>text</U>	Underline text
<KBD>text</KBD>	Keyboard `text`
<STRONG>text</STRONG>	Strong emphasis text
<FONT SIZE="size">text</FONT>	Font size = 1 to 7 Text
<BLINK>text</BLINK>	Blinking Text

Table of Contents

Blocks of Text

Text can be specially separated and formatted using the following tags:

<ADDRESS>text</ADDRESS> Mailing address

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<BLOCKQUOTE>text</BLOCKQUOTE> Quotations

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<CODE>code</CODE> Computer Code

Text Text Text Text Text Text Text Text Text Text Text Text
 Text Text Text Text Text Text Text Text Text Text Text Text Text
 Text Text Text Text Text Text Text Text Text Text Text Text Text

<CENTER>text</CENTER> Center text and/or images.

Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

<PRE CLEAR=["left"l "right"l"all"] text </PRE> Text is diplayed exactly as typed

Text Text    Text Text    Text    Text Text    Text Text Text Text Text
 Text Text Text Text Text    Text Text Text Text Text Text Text Text
 Text Text    Text Text Text      Text Text Text Text Text Text Text Text

Table of Contents

Headings

Headings begin and end with a new line, H1 being the largest font and H6 the smallest.

<H1>text</H1>
Heading
<H2>text</H2>
Heading
<H3>text</H3>
Heading
<H4>text</H4>
Heading
<H5>text</H5>
Heading
<H6>text</H6>
Heading

Attributes:
<hx

ALIGN="center"
SRC="URL" Image with heading

>...</hx>
Examples of Headings with attributes added:

This Heading is using the ALIGN="center" Attribute

Table of Contents

Images

To display an image:

<IMG SRC="URL": ALT= "text" - alternate text to be diplayed in case the image can't be shown
ALIGN=["top"|"middle"|"bottom"|"texttop"|"absmiddle"|"baseline"|
"absbottom"|"right"|"left"] - aligns following text
WIDTH=pixels
HEIGHT=pixels
BORDER=pixels
VSPACE=pixels
HSPACE=pixels
ISMAP> - indicates a clickable map (requires a server script)

Examples:

This is how the text will appear with the ALIGN=TOP attribute.

This is how the text will appear with the ALIGN=MIDDLE attribute.

This is where the text will appear when the ALIGN=BOTTOM attribute is used.

This is where the text will appear with the ALIGN=TEXTTOP attribute.

This is where the text will appear when the ALIGN=ABSMIDDLE attribute is used.

This is where the text will appear when the ALIGN=BASELINE attribute is used.

This is where the text will appear when the ALIGN=ABSBOTTOM attribute is used.

This is where the text will appear when the ALIGN=RIGHT attribute is used.

This is where the text will appear when the ALIGN=LEFT attribute is used.

This is the same image using WIDTH=50 and HEIGHT=50 pixel sizing

Here it is again using WIDTH=75 and HEIGHT=75 pixels.

This time the image has a BORDER=5 tag.

An empty space is left around this image by using the VSPACE=50 and the HSAPCE=100 tags.
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Table of Contents

Anchors

Anchors "link" the page to such things as other pages, images or even sounds.

<A: HREF=" URL" (another page)
NAME="text" (a location within the page); text</A>

Examples:

This is a link to nowhere

Lists

<HL Attributes>text</HL> List Header
<DIR>list</DIR> Directory List
<MENU Attributes>list</MENU> Menu List
<UL Attributes>list</UL> Unordered List
<OL TYPE="type" Attributes>list</OL> Ordered List
- "type" =
- A - capital letters
- a - small letters
- I - large roman numerals
- i - small roman numerals
- 1 - default numbers
<LI Attributes>text An item in a directory, menu, unordered or ordered list.
<DL Attributes> list</DL> definition List.
<DT>text</DT> definition term
<DD>text</DD> definition data
<DT> and <DD> must be used as pairs
within the <DL> tags

Attributes for all lists:

CLEAR=["left"|"right"|"all"] Clear around floating images

Table of Contents

Separators

<BR

CLEAR=["left"l "right"l"all"]>
Forces a line break. The CLEAR attribute stops text from flowing around an image

<DIV

CLEAR=["left"|"right"|"all"]>
ALIGN=["left"|"right"|"center"]>
NOWRAP>text</DIV>
- division within the page

ALIGN=["left"|"right"|"center"|"justify"]
NOWRAP>paragraph</P>
- a new paragraph

<HR

CLEAR=["left"|"right"|all"]
SRC= "URL"
SIZE=value
WIDTH=pixels|percent>
ALIGN=["left"|"right"|"center"]
NOSHADE> - a horizontal rule

Table of Contents

Comments

Comments are not displayed by the browser.

Table of Contents

Tables

<TABLE

BORDER> text </TABLE>
- indicates the entire table
- all other table tags fall inside these tags

- Table Row

- Table Data
- a "cell" of data
- must fall within the <TR> tags

<TH>text</TH>Table Heading

- heading centered over table

<CAPTION

ALIGN=["top"|"bottom"]>text</CAPTION>
- Table Caption

<TH> and <TD> share the following attributes:

ALIGN=["left"|"center"|"right"]

- Hozizontally aligns text within the cell

VALIGN=["top"|"middle"|"bottom"|"baseline"]

- Vertically aligns text within the cell

NOWRAP

- Nowrap of text within cell

COLSPAN

- Indicates how many columns the cell will span

ROWSPAN

- Indicates how many rows the cell will span

Example:

This is the Table Heading
Text Text Text Text

Text Text Text

Text Text Text

Caption Text

Table of Contents

Urls

URL stands for: Uniform Resource Locator

Basic format:

method://server[:port ]/file[#anchor]

Some common URL's:

http://host[/path[/file]]
- HyperText Transfer Protocol
- if no file is specified the server's default file, ususally index.html, will be returned

ftp://lhost[/path[/file]]
- File Transfer Protocol

mailto:user@host
- internet mail

Table of Contents

Special Characters

The browser can display special symbols by using the following codes:

< Less than sign

> Greater than sign

& Ampersand

" Double quote

Non-breaking space

® Registered symbol

© Copyright symbol

* This is a much abreviated list. Most of the other special characters are accents used in languages other than english.

Table of Contents

This page was created by S. Howlett for VoxWeb Design Co. and adapted by E Janson

Home, Site pages, back to Lesson 8

Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
the 140 Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour,

My Web Address is http://www.geocities.com/mallee2007

This website is developed and maintained by
, Elizabeth Janson

Hosted by www.Geocities.ws