IAL HTML Header

Encoding an HTML Page

General

Your browser can read HTML (hypertext markup language) code from any source, including your own hard disk; it doesn't have to come from the Web or Internet. For example, your "web address" can be a file like c:\IAL_HTML.htm. This means that you can examine the page you are creating before you place it on the final Web site.
Your browser can also display any image in "gif" or "jpg" (pronounced J-peg) using an "address" like c:\HTML1.gif or c:\images\Chris.jpg.

Many of the following codes come in pairs: you can think of this as one switching ON and the second switching OFF the command.

Overall Page Structure

These header and footer commands define the start and end of a web page:

Header

<HTML>
<HEAD>
<TITLE>Title of Page as seen at top of Browser</TITLE>
Metadata should be inserted here; eg:
<META name = "DC.author" type = "name" scheme = "AACR2" content = "Armstrong, Chris J.">
</HEAD>
<BODY>

Footer

</BODY>
</HTML>

In between the page headers and the footer go the texts, links and images which make up what is seen on the screen.

Some Basic HTML Commands

This HTML code

looks like this in the browser
<b> and </b>

<i> and </i>

<b><i> and </i></b>

Multiple markup should be "nested" so that ending markup are in the reverse order from opening markup, thus <b><i></i></b>.

 makes text bold

makes text italic

bold italic text
<P> and </P>

 Paragraph opening and closing codes - used in pairs: the closing code </p> means that the browser places a line space between paragraphs.
<BR> To keep paragraphs together (that is, without the line space) use <br> instead of </p> (remember "BReak")
This is a second "paragraph" after a <br> command.

<ul> and </ul>




<ul><li>Text</li><li>Text</li></ul>
    This code indents text from the left, but doesn't indent from the right.


  • Add <li>and the program puts a bullet at the beginning of each paragraph coded in this way.
  • Like this
<ol><li> and </li></ol>
  1. This code indents and numbers paragraphs.
  2. Each new <li> increments the number automatically.
  3. Do not forget to "switch off" each code!
<blockquote> and </blockquote>

This code enables you to indent text - perhaps a quote - from left and right, making it more readable than if it goes all the way to your browser's outside margins.
<P align="right"> and </P>

<P align="center"> and </P>

<P align="left"> and </P>

This code aligns your paragraph to the right.

This code centers your paragraph.

This code aligns the paragraph to the left margin (normal)
<H1> and </H1>

Heading 1
<H2> and </H2>

Heading 2
and so on down to
<H6>Heading 6</H6>
Heading 6
<HR> This gives a horizontal rule
<img src="rd_pin.gif" align="left">

This puts an image "rd_pin.gif" at the left side of your paragraph, at the beginning. The text wraps around it to the left.
<A HREF="http://www.dil.aber.ac.uk"> and
</A> to mark the end of the linked text

<A HREF="CM_Bibl.htm"> and
</A> to mark the end of the linked text

This links to a remote page


This links to a local page

To combine both image and link:
<A HREF="CM_Bibl.htm"><img src="rd_pin.gif" align="left" border=0></A>

This links the image to the local page. The "border=0" is necessary to prevent a blue line around the image.

© Information Automation Limited, 1999, 2000, 2004
This page last updated 23 November 2004 19:15
Site maintained by IAL