Some basic HTML
Still being written - last edited: September, 2004

Some Useful Links

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.

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

<CENTER>..</CENTER> 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: 
    gamma
    alpha
    beta

Ordered

a list
<OL>
  <LI>gamma
  <LI>alpha
  <LI>beta
</OL>
will result in : a list: 
  1. gamma
  2. alpha
  3. 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: 
  1. gamma
  2. alpha
    • alpha
    • beta
    • gamma
  3. 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

<img src=" address"> Inserts an Image, where SRC is the Pointer to the address of the image that will be embedded.
<img SRC="images/fujwavsm.gif" height="100" width="150">

results in: 
<img SRC="images/fujwavsm.gif" BORDER="2" height="100" width="150">

gets this result: 
<table BORDER="4" >
<tr> <td>
<img SRC="images/fujwavsm.gif" BORDER="0" height="100" width="150"> 
</td> </tr> </table>
gets this result: 
<table BORDER="4" BORDERCOLOR="darkblue">
<tr> <td>
<img SRC="images/fujwavsm.gif" BORDER="4" height="100" width="150"> 
</td> </tr> </table>
gets this result: 
Or:
<center><img SRC="images/fujwavsm.gif" height="100" width="75%"></center>
results in:
The HTML code:
<IMG SRC="rainban.gif" HEIGHT="12" WIDTH="100%">
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
Visit W3Schools



Written by Tony Drewry, CEMS, UWE.