UWE - CEMS - Some HTML Tags

Some basic HTML

Still being written - last edited: September, 2004

These pages look at basic HTML tags. The Web is moving towards increased use of CSS (Style Sheets) and 'strict' XHTML coding. All the codes described here work in all browsers, but some of the tags described here, e.g. the Font and Center tags, will disappear or change - though generally speaking they will be recognised by browsers for many years yet.
HTML is presented here because it is (a) more easily accessible to beginners than XHTML, and (b) currently widely used. However, links are included to Style Sheet equivalents since once you move from creating single pages to sites the Style Sheet approach has many benefits.

Introduction

HTML stands for HyperText Markup Language.
HTML is used to format documents as Pages on the Web.

HTML is essentially a set of codes - known as Tags. Tags make a part of a Web Page special in some way. A more formal definition is that a Web page is made up of a number of elements which are delimited by paired tags (i.e. html tags mark the beginning and end of html elements).
An html page has two main elements: Head and Body.
Elements that appear within the Head and Body elements include: Title, Script, Header, Link and Image elements.
Web browsers are programmed to display html elements in standard ways.
An HTML file is a plain ASCII file - the source code for a Web Page is simple text. Words, phrases, sentences, paragraphs, filenames, and web addresses can be 'bracketed' by paired tags which tell a browser how to format the text contained within the tags. (Tags are enclosed within a < and a > and End-Tags start with a /.
An HTML file itself must start with the tag <HTML> and close with its pair </HTML>.
Most Tags are paired, although some work without the end-Tag.

Basic Page

Top

The tags which define a basic web page are as shown in the text/code on the right.
If you:
(a) put the text in an editor (copy and paste it);
(b) save it as e.g. webpage.htm, and then
(c) look at webpage.htm using a browser

<HTML>
<HEAD>
<TITLE> your title </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

You will just see a blank page (but with the Title showing at the top of the screen). Check it out

A very simple way to create a web page is to put <PRE> </PRE> tags between the <BODY> </BODY> tags.

Any text you put between the <PRE>..</PRE> tag pair is shown exactly as formatted with all spaces and carriage returns. (i.e. as 'preformatted' text).
However, display is limited to a single font: the typewriter font - also known as Courier.

Check out how the text shown here appears as a web page.

Check out how the text shown here appears without the <PRE>..</PRE> tag pair (i.e. typed in exactly as shown, but without <PRE> and </PRE>

<HTML>    <HEAD>
<TITLE> your title </TITLE> </HEAD>
<BODY>
<PRE>
.................
My name is:
        Tony Drewry.
                            Hello.
.................
</PRE>
</BODY> </HTML>

Examples of widely used html formatting tags

Here is the same text without the <PRE> .. </PRE> tags - now using common html tags to format the text.
(The <HTML> and <HEAD> tag pairs are still in the file - but not shown here)

Note that no Font is specified, so the Browser will use the default font style.

Check out how the text shown here appears as a web page.

<BODY>
<! common html tags >
<HR>
<P>
<B>.................</B>
<H3> My name is:</H3>
<CENTER>
<B><U>Tony Drewry.</U></B>
<BR><BR>
<I>Hello.</I>
</CENTER>
<B>.................</B>
</P>
<HR>
</BODY>

The tags in the example:

Top

does exactly what it says (American spelling!)

<P>..</P>	are Paragraph delimiters - browser dependent; typically a paragraph has one blank line before the paragraph text. The</P> end-Tag is not mandatory in earlier versions of HTML but is now.
<BR>	Line-break; i.e. moves down a line.
<B>text</B>	Enclosed text is Bold. (<strong>text </strong> is also used)
<I>text</I>	Enclosed text is in Italics . (<em>text </em> is preferred for Italics)
<U>text</U>	Enclosed text is Underlined
<Hn>text</Hn>	(where 'n' is a number) Enclosed text is one of the header sizes. See examples of headers.
<HR>	a line - specified by 'size='. See some examples of Lines
<!author comments >	Comments - not displayed by browser.

Hyperlinks (Anchor Tags)

Top

In the link tags the a stands for 'anchor.

<a name="name">text</a>
	Enclosed text is an internal hypertext 'target' referenced by "name" in an <a href=" " (see next tag). (Note that the 'text' part is often empty so that the target is invisible to the user).
<a href="address">text</a>
	The 'address' is the place to which the browser will go. The 'text' provides a Hyperlink hotspot in the web page, typically different - e.g. blue underlined - from surrounding text. When the hotspot is clicked, the browser goes to 'address' which may be an internal (in the same page) named target or an external target. Typically an external target is another html page, but can be almost any type of file.

Some Example Links

<A HREF="Lines.htm">Look at examples of Lines</A>
results in:	Look at examples of lines where 'Lines.htm' is a file in the same directory as the current file and no path is needed.
<A HREF="http//www.google.com"><b>Google</b></A>
results in:	Google
<center><A HREF="#TOP"><b>Back to the Top</b></A></center>
results in:	Back to the Top (#TOP is a marker placed at the top of this file, using the code: <A NAME="TOP"></A>
<A HREF="images/fujwavsm.gif"> Using a hyperlink to look at a picture</A>
results in:	Using a hyperlink to look at a picture
<center><A HREF="mailto:Tony.Drewry@uwe.ac.uk">Email Tony!</A></center>
results in:	Email Tony! (But note that this only works where the user's browser mail preferences have been configured)

Fonts

Top

<font size=0>Try</font>
<font size="1">using</font>
<font size="2">or</font>
<font size="3">playing</font>
etc. etc. (up to size 7 here)

results in:
Try usingor playingwith different font sizes

Fonts and Colours

<font size=4>
<font color="#66FF33">OR</font>
<font color="#FFFF00">PERHAPS</font>
<font color="#9966FF">OTHER</font>
<font color="#FF3300">COLORS</font>
</font>

results in:

OR PERHAPS OTHER COLORS

(See some Colors Examples)

Or how about some different font types

<TT><font size=+1>This is fixed width </font></TT> gives: This is fixed width

<font face="Algerian" size=+2>this is "Algerian" </font>

gives:

this is "Algerian"

(See some MoreExamples of Fonts)

List Structures - <ul> <ol> <dl>

Top

The principle tags used in Lists are:

<UL>..</UL>	Start and End an Unordered (i.e. bulletted - not numbered) List
<OL>..</OL>	Start and End an Ordered (i.e. numbered) List
<LI>..</LI>	Start and End a List Item in Unordered and Ordered lists - bulletting or numbering depending on list type. A <BR> between elements can be used to insert a blank line. <LI>..<LI> can also be omitted - and replaced with <BR> to get an indented list - but without bullets or numbers.
<DL>..</DL>	Start and End a Definition List
<DT>..</DT>	term that is defined. (First part of a line in Definition List)
<DD>..</DD>	definition (Second part of a line in Definition List)

Example Lists

Note that Lists are always preceded by a blank line

Unordered

a list
<UL>
<LI>gamma
<LI>alpha
<LI>beta
</UL>

will result in :

a list:

gamma
alpha
beta

and

a list
<UL>
gamma<BR>
alpha<BR>
beta
</UL>

will result in :

a list:

Ordered

a list
<OL>
<LI>gamma
<LI>alpha
<LI>beta
</OL>

will result in :

a list:

gamma
alpha
beta

A List within a List

a list
<OL>
<LI>gamma
<LI>alpha
   <UL>
     <LI>alpha
     <LI>beta
     <LI>gamma
   </UL>
<LI>beta
</OL>

will result in :

a list:

gamma
alpha

alpha
beta
gamma

beta

A Definition List

a definition list:
<DL>
<DT>gamma</DT>
  <DD>is short for grandma</DD>
<DT>alpha</DT>
  < DD>is for Anthony</DD>
<DT>beta</DT>
  <DD>is for Better</DD>
</DL>

will result in :

a definition list:

gamma: is for Grandma
alpha: is for Anthony
beta: is for Worse

Tables

Top

The principle tags used in Tables are:

<table>..</table>	are the tags which delimit the table.
<th>..</th>	delimit a table header.
<tr>..</tr>	delimit a row in a table
<td>..</td>	delimit a cell

Note that, by default, the column widths are defined by the cell in that column which has the most text.

Tables are commonly used to control where text and images appear on a page.

Some Table Examples

<table border>
<tr>
<td>This is a single cell table</td>
</tr>
</table>

results in:

This is a single cell table

<table border>
<tr>
<td> This is a table with</td>
<td> two cells</td>
</tr>
</table>

results in:

This is a table with

two cells

the same table, but with cellpadding
<table border cellpadding="9"> etc.

results in

This is a table with

two cells

the same table, but with cellspacing
rather than cellpadding
<table border cellspacing="9"> etc.

results in

This is a table with

two cells

<table border>
<tr>
<td>This is a table with</td>
<td> two rows and</td>
</tr>
<tr>
<td> three cells</td>
</tr>
</table>

results in:

This is a table with	two rows and
three cells

<table border="8">
<tr>
   <td COLSPAN="2">
This is a table with two rows and four cells
   </td>
</tr>
<tr>
    <td> But the top two cells</td>
    <td>have been joined</td>
</tr>
</table>

results in:

This is a table with two rows and four cells
But the top two cells	have been joined

<table border width="100%">
<tr>
<td>a table with</td>
<td> </td> <td>2 rows and 6 cells</td>
</tr> <tr>
<td> </td>
<td> using WIDTH in the Table tag</td>
<td> </td>
</tr> </table>

results in:

a table with		2 rows and 6 cells
	using WIDTH in the Table tag

<TABLE border="10" width="100%">
<tr>
<td>a table with</td> <td>2 rows</td> <td>and 6 cells</td>
</tr> <tr>
<td>one cell</td>
<td>
<TABLE border=6>
    <tr>
     <td>This is a table</td> <td>with two rows</td>
   </tr> <tr>
     <td>and four</td> <td> cells</td>
    </tr>
</table>
</td>
<td>contains another table</td>
</tr>
</table>

results in:

a table with

2 rows

and 6 cells

one cell

This is a table	with two rows
and four	cells

contains another table

However, the above, with one less BORDER, a couple ofALIGN tags and some BGCOLOR inclusions:

<table width="100%">
<tr> <td>a table with</td>
     <td BGCOLOR="#00ffff">2 rows</td>
    <td ALIGN=RIGHT>and 6 cells</td>
</tr> <tr>
     <td> one cell</td>
    <td ALIGN="CENTER">
    <table border="6">
      <tr>
        <td BGCOLOR="#FFFF00"> This is a table</td>
        <td>with two rows</td>
      </tr> <tr>
        <td>and four</td>
        <td>cells</td>
      </tr>
    </table>
    </td>
    <td BGCOLOR="#ff0000"> contains another table</td>
  </tr>
  </table>

results in:

a table with

2 rows

and 6 cells

one cell

This is a table	with two rows
and four	cells

contains another table

The following:

<table width="100%" cellpadding = "5">
<tr>
<td width="30%" VALIGN=TOP> <hr size=6 noshade> </td>
<td width="70%"> You may include lines and images within tables. <br>
This appears to be a common way of organizing where a picture appears in relation to some text.</td>
</tr> </table>

results in:

You may include lines and images within tables.
- a common way of organizing where an appears in relation to some text.

Including Images

Top

Inserts an Image, where SRC is the Pointer to the address of the image that will be embedded.

results in:

gets this result:

gets this result:

gets this result:

Or:

results in:

The HTML code:

results in:

(Just right-click on any image in any web page to capture it!)

Some useful links

Top

My Links Page The HTML Reference Library Beginner's Guide to HTML Barebones Guide to HTML HTML Elements List The Web Developer's Virtual Library	A wide selection of HTML Resources and Links which includes (among many others): An RGB color chart A Web Page visitor-counter HTML Frames Tutorial My HTML Forms Guide

Written by Tony Drewry, CEMS, UWE.