uluru with stephen and bernie

Learn basic HTML Tags

HTML consists of instructions to tell a browser how to display the page and how to interact with the internet. These instructions are known as tags and consists of a "<" bracket followed by a "command" word, any "attributes" and a ">" bracket. All commands need closure. Whilst most use a closure command consisting of a "<" bracket followed by a "/" before the command [to signify the end of command] and a ">" bracket.

The commands are usually typed in lower case these days, where as in the past they may have been capitalised.

Let us look at some examples:

<br />
This command causes a BReak to a new line. This does not require a closure command but is self-closed by using a "/" before ">".
<i>
This command causes letters to be italicised up to the closure command. </i>
<u>
This command causes letters to be underlined up to the closure command. </u>
<b>
This command causes letters to be bolded up to the closure command. </b>
<p>
This command causes a new paragraph to be started, ending at the closure command. </p>

Click on "View [Page] Source" in your browser to view the source of this page which show you the codes I have used. Note that I have used some commands to be able to show you the command. Normally you would only see the effect! These commands are:

&lt; prints the less than symbol <.
&gt; prints the greater than symbol >.
&amp; prints an ampersand symbol &.
&nbsp; prints a No Break SPace, needed to provide more than one space between words. [SP]&nbsp;[SP] creates 3 spaces between words.

A couple of other handy character commands:

&copy; This prints the copyright symbol ©
&reg; This prints the registered trademark symbol ®

There are four main tags used in all HTML pages:

<html>
This tells the browser that you are using HTML tags and lives at the top of the page. Use the closure command
</html>
This is the last command on the page. ie all the other HTML tags will exist between these two tags.
<head>
This command tells the browser that the commands following are part of the header. Other than the title, other header commands are usually not displayed.
</head>
This marks the end of the header.
<title>
This is a header command to display a Title on the Title bar of the browser. Used by bookmarks as a page reference name.
</title>
The end of title.
<body>
This is where the bulk of the displayed information is stored.
</body>
The end of Body. Usually just above the </html> final command.

See this page source to see how it is organised.

The BODY tag can be used with attributes to define colours of page [bgcolor] , text [text], hyperlinks [link], visited hyperlinks [vlink], active hyperlink [alink] and background [background] picture. [now deprecated - not supported in future - in favour of CSS styles]

<body bgcolor="white" text="black" link="red" vlink="maroon" alink="fuchsia">

Colours - but spelt the USA way - colors - for attributes

There are 16 standard colours, but more colours can be created by using Hex number format in the form of #[red][green][blue]:

  Black  = "#000000"   Maroon = "#800000"   Navy   = "#000080"   Purple  = "#800080"
  Gray   = "#808080"   Red    = "#FF0000"   Blue   = "#0000FF"   Fuchsia = "#FF00FF"
  Silver = "#C0C0C0"   Green  = "#008000"   Teal   = "#008080"   Olive   = "#808000"
  White  = "#FFFFFF"   Lime   = "#00FF00"   Aqua   = "#00FFFF"   Yellow  = "#FFFF00"

You can specify different size headers. These may display differently on different browsers. They can be modified by CSS as I have done.

<H1>Header size 1</H1>

<H2>Header size 2</H2>

<H3>Header size 3</H3>

<H4>Header size 4</H4>

<H5>Header size 5</H5>
<H6>Header size 6</H6>

Want to separate sections with a ruled line?

<hr> gives you a horizontal rule. You can change some of the attributes of a line with:

align="{left, center, right}" - default is center.
noshade - use solid colour, not the default which uses two colours.
size="xx" pixels of height for the line.
width="xx" pixels or width="xx%" to specify the width of the line with respect to current page width

Some examples:

  1. Horizontal rule covering 50% of the page: <HR width="50%">
  2. Three Horizontal rules one after the other aligned to different parts of the page. The middle one is also a fixed length of 200 pixels, fattened and made solid:
    <hr align="left" width="20%"><hr align="center" noshade width="200" size="10"><hr align="right" width="20%">

Note that the centre line will not resize if you narrow the width of your browser window {on a standard page}. The left and right ones will {normally} as they are a fixed percentage of the page width. I have fixed the page width by using tables.

<TT> We need a fixed width font [set with <TT>] for the next bit
<PRE> Allows for preformatted text like ASCII Art.
 
  |||        ___
 /. .\      /   \__
]  V  [    |_/\__/\|
 \ o /       0   0
  ---
</PRE> end of preformatted text.
 </TT> resort back to the chosen font for the browser - user selectable!

What to connect to another page? Use a hyperlink!:

<a href="index.html"> Back to Stephen & Bernie's Home Page </a>
Back to Stephen & Bernie's Home Page

Noticed that Hyperlinks are a bit different on my page! That is because I have used CSS to modify the page behaviour. Here is my CSS file so you can have a look {but you may need some CSS knowledge to work it out}:

Stephen' CSS file

Want to add an image?:

emu on the road

<img src="pics/thm2.jpg" alt="Emu on the road" height="75" width="112" align="right" />

NB: the self closing "/" at the end of the command, as an image doesn't have a closing command.

Want to add an image to point to a larger one?:

open road sign

<a href="pics/source/RoadOpen.jpg"><img src="pics/thm3.jpg" alt="Open road sign" height="75" width="112" align="left" /></a>


Try clicking on the Road Open Sign [left], it should take you to a larger version [Use the browser "back" button to return here]:
ALIGN allows you to specify LEFT, CENTER or RIGHT.
Note that we are stuck with American spelling for CENTER!
ALT allows you tell the browser what text to display if the user has turned off image downloads or the picture is missing!
HEIGHT and WIDTH sets the picture size, usually the actual size, but can be used to resize a picture [NOT recommended].

Try some different lists:

<ul>
  • <li>list item 1 [closing </li> is now required]</li>
  • <li>list item 2</li>
</ul>

<ol>
  1. <li>list item 1</li>
  2. <li>list item 2</li>
</ol>

<dl>
<dt>Defined term 1 [closing </dt> required]</dt>
<dd>Definition of term 1 [closing </dd> required]</dd>
<dt>Defined term 2</dt>
<dd>Definition of term 2 </dd>
</dl>

Another way to display data - Use a TABLE!

A table is away to display information in a formatted way. The colour example above is an example of a 4 row, 8 column table.

<table summary="table example"> This is the start of a Table.
Attributes: align="{left, center, right}", border="x" pixels, cellspacing="x" pixels between cells, cellpadding="x" pixels within cells, width="xx" pixels or width="xx%" to specify the width of the line with respect to current page width.
summary="table example" is required for HTML 4.0.
<caption valign="{top|bottom}">Table 1 - example</caption>
  <tr>  
This is the start of the header row of the table.
    <th>  
This is the start of the first header of the table.
Attributes for TH|TD: nowrap - suppress word wrap
rowspan="x" and colspan="x" - number of rows|cols spanned by cell
height="xx" pixels to specify the height of the cell
width="xx" pixels or width="xx%" to specify the width of the cell
    </th>  
This is the end of the header item.
    <th>  
This is the start of the second header of the table.
    </th>  
This is the end of the header item.
  </tr>  
This is the end of the header row of the table.
  <tr>  
This is the start of the first row of the table.
    <td>  
This is the start of the first item in the first row of the table.
    </td>  
This is the end of the item.
    <td>  
This is the start of the second item in the first row of the table.
    </td>  
This is the end of the item.
  </tr>  
This is the end of the first row of the table.
  <tr>  
This is the start of the second row of the table.
    <td>  
This is the start of the first item in the second row of the table.
    </td>  
This is the end of the item.
    <td>  
This is the start of the second item in the second row of the table.
    </td>  
This is the end of the item.
  </tr>  
This is the end of the first row of the table.
</table>
This is the end of a Table.

Example:
This is the start of a Table with border=1.

Table 1 - example
This is the start of the first header of the table. This is the start of the second header of the table.
This is the start of the first item in the first row. This is the start of the second item in the first row.
This is the start of the first item in the second row. This is the start of the second item in the second row.

This is the end of a Table.

Want to follow your code by adding comments for easier reading:
<!-- This is a comment. Starts with less than symbol and an exclamation mark then two dashes. Finish with two dashes and a greater than symbol. -->

This page now has some Java script in it to generate my email address at the top of the page. This can be viewed in the source code of this page. Right click the page and select "view [page] source" which works for both Mozilla/Netscape and Internet Explorer.

More tutorial sites: