Rough Guide to HTML

Paul May 24/10/95
revised 17/8/05

This document is intended for people who have zero (or nearly zero) knowledge of HTML, but wish to learn some in order to create or edit their own WWW pages. These notes are on the web at:

http://www.chm.bris.ac.uk/pt/shared/rghtml.htm

The course will start off with very basic HTML, such as formatting documents, but will end with how to do fancier stuff, like tables, etc.

Recommended software

Most of the above software can be downloaded using the web from this directory which also also contains many other useful Web-related software, like pkunzip, mpegplayers, and a variety of useful GIF images (telephones, faxes, etc) to liven up your web pages.

HTML

This is the 'language' of the Web. It stands for HyperText Markup Language, and there are numerous on-line helps and reference sources for it, such as the list in the local FAQ.

In this document we will only deal with the parts of HTML that are necessary to get a reasonable Web page working. Remember, though, you'll also need a computer account and disk space to put all the information onto (see here for directions for how to do this in the Chemistry Dept).

Why learn HTML?

Most programs such as Word or Powerpoint will have a Save as...web page option, which turns it straight into HTML. So you might ask 'why bother to learn HTML at all?' Well, strictly speaking you don't need to. These programs work perfectly well. So these notes are for those of you who want to know a bit about ow it all works behind the scenes.

Tags

HTML is composed of normal ASCII text, with the formatting instructions being enclosed in tags, shown as <format>. Most tags come in pairs, one at the start of a piece of text you want formatted, and one at the end, turning it off. The syntax is:

<format>this is formated text</format> this isn't formatted

An example is bold type, for which the tag is <b>

Another example is italics:

There are dozens of these types of formatting tags, and I've included the most commonly used ones in a table at the end.

Some tags require extra (usually optional) information, and this is included within the turn-on tag. For example, the <table> tag used for defining tables (see later) has an option to have a border or not. If the option is turned on, the border info is placed into the tag as: <table border="1"> table contents here </table>.

The minimum HTML document

The minimum you require for a Web page is the following:

<html>
<title>This a title</title>
...text of document (if any) goes here...
</html>

We tell the browser that the document is HTML at the very beginning, and tell it that the HTML ends at the very bottom. We also require a title for the page, which appears at the top of the screen.

The current version of HTML in use around the world is 4.0. To make a document minimally compatible with HTML-4.0 , we need to add two more tags to the basic document. <head> specifies which text in the document is a header - which is important because some automated search engines use only this part of large files to get their key words from. (Although some of the most modern search engines search the entire document as well). Likewise, <body> means the rest of the text. So, our minimal document is now:

<html>
<head>
<title>This a title full of useful key words</title>
</head>
<body>
...text of document (if any) goes here...
</body>
</html>

Note that HTML tags should all be in lower case. Also, it's useful (but not necessary) to put line-feeds in after major tags (e.g. <head>, but not <b> ).

Formatting Documents

HTML works by defining levels of formatting, from the whole document, to individual characters, each with their own set of tags.

Headings

There are various levels of headings; h1 is the largest used for the main titles of home pages, going down through various sizes of fonts and boldness for sub-headings to h6.

For example:

<h1>This is a level one heading</h1>

This is a level one heading

<h2>This is a level two heading</h2>

This is a level two heading.

Paragraphs and Line Feeds and Horizontal Rules

The text you type in to your editor wraps around, and the browser does not recognise any of your carriage returns as line feeds until you specifically tell it to put a line feed in using the correct tag. This means that editing raw HTML can get messy, so it's always good practice to split the document up into readable sections, even though the browser doesn't require it.

To force a single line feed, the tag is <br /> for break, and for a double line feed or end of paragraph there is <p>.

Example:

forces an end of paragraph.

The recommended syntax is to put the <p> at the start of the new paragraph, with any formatting instructions contained within it, e.g. <p align="center">, with a </p> at the end.

Paragraphs, images (see later), tables, heading, etc, can all be centred on the screen using the <center> tag.

<center><h6>This is a centred level 6 heading</h6></center>

This is a centred level 6 heading

The recommended syntax is to use the center within the p or h tag, rather than as a separate center tag:

<h6 align="center">This is a centred level 6 heading</h6>

This is a centred level 6 heading

It is often useful to separate chunks of text using a horizontal line, for which the tag is <hr /> and these can also be centred.

Lists

There are two main types of lists that are commonly used, ordered and unordered, the tags for which are <ol> and <ul>. A list item is given the tag <li>. For example, an ordered list might be:

<ol>
<li> First item in list</li>
<li> Second item in list</li>
<li> Third item in list</li>
</ol>

  1. First Item in list
  2. Second item in list
  3. Third item in list

and an unordered list might be:

<ul>
<li> First item in list</li>
<li> Second item in list</li>
<li> Third item in list</li>
</ul>

You can have lists within lists, the level of indentation just increases. For example:

<ul>
<li> First item in list</li>
<li> Second item in list
<ul>
<li> Sub-sets of second item</li>
<li> Sub-sets of second item</li>
</ul></li>
<li> Third item in list</li>
</ul>

Fonts and Colours

HTML allows a whole range of different fonts to be used, including some mathematical characters. These are selected by using the <font> tag, which takes attributes such as size, color and face. Note that stylesheets are a better way to manage global text fonts and colors, but those are too difficult to cover here.

Examples:

Special Characters

However, you must be careful of using characters which are part of tags, such as less-than < or greater-than > signs, or ampersands &. To show these, you need to insert special characters, e.g. &gt; for >. I've included a few of the more useful ones in a table at the end.

Greek letters are done by using the special characters & and a semicolon,e.g.

alpha = &alpha; = α,       Gamma = &Gamma; = Γ

Links and Anchors

It's the fact that a HTML document contains active links that has made the web so powerful. In a link you anchor the selected text to the URL of the document you require. On the browser, the selected text is highlighted (usually looks blue and is underlined), and when clicked on, the computer then jumps to the address specified by the associated anchor.

There are two types of link, absolute and relative. Absolute links require you to type out the full URL address for the linked document/image. Relative links are for when the document you require is held on a subdirectory of the same computer as the current page, and so allows you to use UNIX-style file commands (../ for go up a directory, ./ or nothing for the same directory, etc). The advantage of using relative links is that if you ever have to move your web site to a different directory, or even a different computer, only the URL of the home page will change and all the relative links from it will be unaffected (so long as you keep the directory and file structure the same as it was on the old system).

The Syntax of Links

The syntax is messy, but easy. For absolute links, say we want to link a portion of text to the file at a URL like: http://www.bris.ac.uk/. We enclose the selected text in the tag <a>, for anchor, and give the URL as extra information in the tag. So we'd have:

For relative links, it's exactly the same, except easier. Imagine we've got a document called temp1.htm in the same directory as the document we're editing. To put a link to it we just type:

For a document, temp2.htm, in a subdirectory called temp, type:

For a document, temp3.htm, in a higher directory, type:

It's always best to check your links work every time you edit them, as it's very easy to make a small typo in a long URL which stops the link working.

Images

You put an in-line image into the text in the same way as you put links. All you need is an image file stored somewhere on disk (it doesn't have to be on your own computer, it can be remote) and its URL. The file format of Web images is gif or jpg, and these are the images which can be displayed directly by browsers. Other image files can be used (e.g. tiff), but the reader must then use an external helper program (such as Lview or Paintshop Pro) to view the files. gif and jpg files can be created easily by taking drawings, diagrams or photographs created/stored in, say, Windows Paintbrush, and saving them as bmp files, and then using another graphics program (e.g. Lview to read in these files and resave them as gif or jpg files). Alternatively, certain graphics packages like Paintshop Pro can save files directly as gifs or jpgs.

To put images in-line, we just use the Image Source tag, <img src="image.gif">. The bit between the inverted commas is the URL containing the image file, and this can be an absolute link or a relative link as before. So to link to the info symbol in the main chemistry page, we'd use:

It's often a good idea to keep all the images for your home pages in the same directory, so you can use relative addressing. For example, all the common images used for the physical chemistry page are kept in the same top directory as the home page, so to include an image of say a telephone in a document lower down the directory tree, you type:

Anchoring an Image

You can make images link to another web page, by just putting the anchor tags around the image. The image appears on screen with a blue border, showing it's clickable.

It's another good practise to keep the size of non-optional images small! (<100kb) It's a real pain if you're trying to download a document from the States, say, and it takes hours to do so because there's a large image - which turns out to be a trivial picture of no importance. If an image needs to be large, e.g. scanned colour photos, use a small thumb-nail version of the same image on the page, which the user can click on to retrieve the full-sized image if they choose to. It's also a good idea to give an indication how big the full image is in kbytes, so the user can decide whether they want to bother waiting for it to download...

For example: This is an SEM photo of a diamond-coated tungsten wire (71 kb gif image)

Tables

As you might expect, the tag for table is just <table>. The optional command border allows us to specify whether or not we want a border on the table. We have to specify the beginning of each new table row with the tag <tr>, and each new table data point by <td>. We can also have column headings using <th>. For example:

HTML:

<table border="1">
<tr><th>Data for x</th><th>Data for y</th><th>Data for z</th></tr>
<tr><td>1</td><td>3</td><td>8</td></tr>
<tr><td>2</td><d>4</td><td>-5</td></tr>
<tr><td>3</td><td>7</td><td>3</td></tr>
</table>

Screen:

Data for x Data for y Data for z
1 3 8
2 4 -5
3 7 3

Tables without borders can be very useful for aligning images and text so they look nice on the page, although the recommended way nowadays is to use stylesheets.

You can get other examples of how to write HTML by looking at the source for the page you are currently reading (from Netscape do View...Source). For a more complete guide to HTML, see some of the other reference sources I gave earlier.

Chemistry Tags - Chime

To put 3D structures on a page requires either (a) the Chime plug-in from MDL, and the use of some specialised tags, or (b) a Java Applet called Jmol.

Table 1 - List of common character formatting tags

Character HTML tag
< &lt;
> &gt;
& &amp
" &quot
© &copy
± &#177
é &eacute
è &egrave
Å &Aring

A complete list of codes can be found here.

Table 2 - Tags for Common Character Formatting

Formatting type Tags
bold <b>
italic <i>
emphasis <em>
underlined <u>
subscript <sub>
superscript <sup>

Note that you need the corresponding turn-off tags, e.g. </b>.

References