Andrew's HTML Tutorial Page

HTML stands for "HyperText Markup Language" and was developed at CERN - The European Organisation for Nuclear Research. There is a standards body for HTML which suggests the development route future HTML versions - The World Wide Web Consortium".
First, to have a look at the source code producing this page, go to "View - Page Source" in Netscape, or "View - Source" in I.E.
If you are serious about page layout & use I.E., download a copy of a standards compliant browser, I use Mozilla which is an open source browser that complies with the www.w3c.org html standards body. Have a look this site to see just how bad Internet Explorer can be.
Hint:- to use any of this code on your own web pages, just highlight the code you wish to copy and do a copy & paste into your own page.

Also, have a look at this page and this page for more exhaustive guides to writing html.

Head Section

The start of every html document should start with something like:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta NAME="description" CONTENT="The Birmingham Media Hub">
   <meta NAME="keywords" CONTENT="Public Internet access, education, Training">
   <title> Andrew's HTML Tutorial Page. </title>
</head>

and end with something like:-

</body>
</html>

The first line declares what standard of html you are using, here it is "HTML 4.01 Transitional" in english "//EN".
The <html> & </html> tags enclose the html code, and the <head> & </head> tags enclose the "head" section of the page.
This "head" section contains information about the page, and the only part actually displayed is the text between the <title> & </title> tags.

Body Section

The displayed part of the page goes in the <body>.....</body> section as shown below.
This page starts out :-

<body bgcolor="#cccccc" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
<h1>HTML Tutorial Page</h1><br>
.
.
....rest of page
.
.
</body>

Inside the </body> tag is a bgcolor="#cccccc" directive which sets the colour of the page background. Note the rather nasty spelling of "bgcolor". This and other misspellings can be a frequent cause of pages not displaying as expected. The format of this is #rrggbb (r=red, g=green & b=blue) and is a hexadecimal (ie to the base 16) number. You can convert hex to denary using "calculator" in windows, set to "Scientific" under "view" menu. The text directive sets the text colour and the links one are for the colours of hyperlinks. More on this later. Common values are:-

#000000  Black
#ff0000  Pure red
#00ff00  Pure green
#0000ff  Pure blue
#ffffff  White

The <h1> & </h1> tags control the size of headings, 1 being the largest and 4 being the smallest. Bold Text can be created using <b> & </b>. As you may have guessed, a "/" signifies a closing tag, paired with a tag without a "/". So </body> signifies the end of the body section.

Tables

Tables are a convenient way of laying out a page when a particular format is desired. Html is a page markup language, not a precise page layout language, so a browser is quite free to format text how it wishes given the sixe of window it is displaying in. Tables are a way to force the browser to display things how you want. As an experiment, try to re-size the browser window displaying this page to see the effect this has.
I tend to use tables to display heading banners on a page, as can be seen on the Media Hub index page, reproduced below:-

WAP	Welcome to The Birmingham Media Hub !

<table width="100%" border="0" bgcolor="ffffff">
<tr>
 <td><a href="../index.wml">WAP</a>
  <center><img SRC="media_logo_sml.gif" alt="The Birmingham Media Hub">
  </center>
 </td>
 <td>
  <center><font size="+3">Welcome to <br>The Birmingham Media Hub !</font>
  <br><br>
  </center>
 </td>
</tr>
</table>

The important parts of a table code are the <table> & </table> tags which enclose all of the table, the <tr> & </tr> tags which define a table row, and the <td> & </td> tags which enclose the table data or "cells" to use a spreadsheet term.
The above example has one table row enclosing two table data elements. Colours are always given as Hexadecimal values, and this is shown by the "#" at the beginning of the value. The bgcolor can be used in a <table bgcolor="#ffffff"> context as well as at the start of the body section. The <width="100%"> tells the table to occupy the whole page width (i.e. 100%). The <table border="0"> gives the table an invisible outline. Setting this to "1" gives a 1 pixel border, "2" is two pixels, etc.
Hint - as a test when developing a page, it can be useful to set borders to "1" to see where they are, and turn them off when you are satisfied with the result.
In order to create a line break, the tag <br> is used. It is used on its own, there is no </br> to end it as with other tags. The <center>.........</center> tags cause any text or images in between to be aligned centrally, they can be used just surrounding on line of code or many and can have other tags enclosed as well. Again note the rather nasty spelling.
Also shown above is an example of a text hyperlink and how to insert an image. More on this later.....

Tables are very flexible and with a little planning can be used in many ways. The background colour of the whole table can be set

<table border="1" bgcolor="#aaaaff">

and can also be overidden for individual table data elements.

<td bgcolor="#ffffaa">3rd col</td>

See this link for an HTML Colour Chart. Select the colour you want, and copy & paste the hex number into your editor (#xxxxxx).
Shown below is an example using three other tags as well, <td rowspan="2"> causes the cell to span two rows, and <td colspan="2"> causes the cell to span two columns. The number dictates how many rows/columns are spanned. <caption align="bottom"> allows a table caption to be included, alignment can be top or bottom.

<table border="1" bgcolor="#aaaaff">
<caption align="bottom">Table Caption</caption>
<tr>
<td>1st col</td>
<td bgcolor="#ffaaff">2nd col</td>
<td>3rd col</td>
</tr>

<tr>
<td>1st col</td>
<td>2nd col</td>
<td>3rd col</td>
</tr>

<tr>
<td rowspan="2">1st col</td>
<td>2nd col</td>
<td bgcolor="#ffffaa">3rd col</td>
</tr>

<tr>

<td colspan="2"><center>2nd col</center></td>
<td></td>
</tr>

</table>

Table Caption
1st col	2nd col	3rd col
1st col	2nd col	3rd col
1st col	2nd col	3rd col
1st col	2nd col

Lines

Shown above is a horizontal line to seperate out section in this page. The is created by using <hr> (horizontal ruler). As with <br> it does not have a closing tag. By adding a width statement, the length can be controlled e.g. <hr width=50%> for the line above.

Text formatting

Simple text formatting is easy. Bold text is created with <b>Bold text</b>, italic text is created with <i>italic text</i> and underlined text is created with <u>underlined text<u>. (note <u>...</u> and not <ul>...</ul>). *Note* Use underlined text with care, it can look like hyperlinked text. Also used rerely is striked out text, Retail Price ~~£99.99~~, Media Hub price only £89.99! <strike>..... </strike>.

Bold text

italic text

<i>italic text</i>

underlined text

<u>underlined text</u>

~~strikeout text~~

<strike>strikeout text</strike>

typewriter text

<tt>typewriter text</tt>

Superscript text, E=mc² & small tag E=mc²

E=mc<sup>2</sup>

and

E=mc<small><sup>2</sup></small>

Subscript text, H₂O & small tag H₂O

H<sub>2</sub>O

and

H<small><sub>2</sub></small>O

bold, italic underlined text -- Note the way the tags are nested in this example.

<b><i><u>bold, italic underlined text</u></i></b>

Phrases which should always be grouped together and not split across lines, such as "The Birmingham Media Hub" can be joined with a "non breaking space" ( ), rather than just a normal space. If you alter the width of the browser window, the phrase will jump between lines as one entity, and not split in to its individual words.

The&nbsp;Birmingham&nbsp;Media&nbsp;Hub

The size of heading text can be altered using <h1>text</h1>. The number controls the text size. 1 is the biggest, as the number increases, the text size decreases. Use of the <font="xxx">text</font> is not recommended as not all computers have the same font families installed, so the results can be unpredictable.

<h1>text</h1>	text
<h2>text</h2>	text
<h3>text</h3>	text
<h4>text</h4>	text
<h5>text</h5>	text
<h6>text</h6>	text
<h9>text</h9>	text

Images

Images both convey certain sorts of information much better than words and brighten up a web page. Here are a few simple examples. The tag <img src="/path-to/yourimage.gif" alt="[graphic.jpg]" title="Descriptive Text"> is used to point to where the image can be found from (the "src" bit), and some text to be displayed while the image is loading (the "title" bit) and alternate text to display before images have finished loading (the "alt" bit). A border can be added (border="1") and the width and height of the image should be specified (width="100" height="50"). This allows the browser to format text round the image before the image has been downloaded. This improves the loading time for web pages.
In the last example here, the height and width have been deliberately set too small. This forces the browser to scale the image the the size specified.
Please note, IE incorrectly displays the alt text if a title tag is not present, Mozilla and other browsers correctly do not display the alt tag unless the image has not loaded (eg. incorrect link to image). So use both for best effect.

<img src="./hostedsites1.gif" alt="[hostedsites1.gif]" width="149" height="32" title="Hosted Sites">

<img src="./hostedsites1.gif" alt="[hostedsites1.gif]" border="1" width="149" height="32" title="Hosted Sites">

<img src="./hostedsites1.gif" alt="[hostedsites1.gif]" width="100" height="26" title="a scaled image">

Links

Hyperlinks are an essential part of how the World Wide Web works. In essence they provide a shortcut to another page of information. That page may be located on the same server, or may be on the other side of the world. These type of links are called relative links for ones on the same system or absolute links where the whole url needs to be specified.
Below are two relative links, the first takes you up a level in the directory structure in the same window, the second opens a new window, leaving the first where it was. The two dots ".." indicate to go up a level, and the forward slash "/" is equivalent to a back slash "\" used in dos as a directory seperator. index.html is the file name you wish to link to. If this path is spelt wrongly, your link will not work, so if things do not happen as you expect, this is another item to check.

Go up a level.

<a href="../index.html">Go up a level.</a>

Go up a level in new window.

Go up a level in <a href="../index.html" target="_blank">new window.</a>

Below are two absolute links, the first takes you to www.bbc.co.uk in the same window, the second opens a new window to www.bbc.co.uk, leaving this page alone. Because the page here is off this server, we have to specify the protocol for the browser to use to fetch the page. For www pages this is almost always "http://" (HyperText Transfer Protocol) but sometimes you may see a "https://". This is a secure version of http which uses encryption to protect the contents of the page from being spyed on while in transit. It is used for banking transactions and the like.

www.bbc.co.uk.

<a href="http://www.bbc.co.uk">www.bbc.co.uk</a>

Go to www.bbc.co.uk in a new window.

Go to www.bbc.co.uk in a <a href="http://www.bbc.co.uk" target="_blank">new window.</a>

Another type of hyperlink used frequently is to connect the user to an "ftp" site. File Transfer Protocol is a more efficient way to download large files from the Internet, and an example is shown below.
ftp.novell.de.

<a href="ftp://ftp.novell.de">ftp.novell.de</a>

The last type of link used frequently is a "mailto:". This opens up an email client on the viewers pc, and inserts the email address you specify. An example is shown below. The "?subject=Enquiry from HTML Tutorial" part adds a subject to the email automatically for the user. It is optional.

Send your email to support@mediahub.co.uk.

Send your email to 
<a href="mailto:support@mediahub.co.uk?subject=Enquiry from HTML Tutorial">support@mediahub.co.uk</a>

Just for completeness, there are other protocols used for links, you will hardly ever, if at all see them. Here are examples, depending how your pc and browser are set up and also depending if any firewalls you have to use are set up to allow it, they may or may not work. The examples below all link to the Library of Congress.
The Gopher protocol was developed by the University of Minnesotta as a hierchical, linked database, similar in concept to the world wide web, but much more primitive. It is now totally eclipsed by the www, but a few sites still live on. Depending on what you want to believe, the name Gopher either comes about because the service "goes for" (go fer -> gopher) information you want, or the gopher animal just happens to be the University's mascot.
gopher://marvel.loc.gov/

<a href="gopher://marvel.loc.gov/">gopher://marvel.loc.gov/</a>

Telnet is a terminal emulator used for text based access to remote computers, eg mainframes and unix computers.
telnet://locis.loc.gov/

<a href="telnet://locis.loc.gov/">telnet://locis.loc.gov/</a>

TN3270 is similar to telnet but is for access to IBM mainframe & minicomputers, it emulates the old, green screen 3270 series terminals.
tn3270://locis.loc.gov

<a href="tn3270://locis.loc.gov">tn3270://locis.loc.gov</a>

These examples point to the United States of America's Library of Congress's reference catalogue. There is also a good overview of HTML, SGML, XML and XHTML as well as URL's. Click here to visit the Library.

Network news transport protocol is similar (nntp):-
nntp://news.novell.com

<a href="nntp://news.novell.com">nntp://news.novell.com</a>

Images can be made in to links, so clicking on a logo for example points the browser to the new web site. Illustrated below is a logo with a "link" border, and below it without the border (use border="0"). The alt and width & height parameters are as described above.

<a href="/index.html"><img src="./media_logo_sml.gif" alt="media_logo_sml.gif"width="200" height="73" title="Media Hub logo"></a>

<a href="/index.html"><img src="./media_logo_sml.gif" alt="media_logo_sml.gif" width="200" height="73" border="0" title="Media Hub logo"></a>

In the body section, the first line has some directives which control the link text/border colour:-

<body bgcolor="#cccccc" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

"bgcolor is the whole page background colour and "text" is the colour of text on the page.
"Link" controls the colour of an unvisited link, "vlink" is the colour of a visited link, and "alink" is for active links.

See the Web Templates directory in the "ERC_All area of the MARS server (drive I:\)