Uploading Files| Creating a Webpage | Webspace FAQ


HTML (Hypertext Markup Language) formats documents displayed on the World Wide Web. A browser will interpret the formatting commands and then display the information in its window. HTML is often confused as being a programming language, but it is actually a scripting language and much easier to learn than a programming.

HTML uses instructions known as tags to tell the browser how to format the document. These tags are placed in the document itself, at the start and end of the text to be modified. A tag consists of both a left anglebracket (<) and a right angle bracket(>) surrounding the tag name, and are usually paired (e.g. <h1> header</h1>). The "/" before the name in a tag denotes the end of the tag.

Some tags will include a attribute to specify more information for the tag (link location, colour, font, etc.). This will be added after the tag name in the starting (or opening) tag.

NOTE: HTML also allows you to place graphics, photographs, and multimedia into your web page by using the appropriate tags.

ANCHOR BLOCKQUOTE BODY
BOLD BREAK CAPTION
CENTER COMMENT DEFINITION LISTS
DIVISION FONT HEAD
HEADERS HORIZONTAL RULE HTML
IMAGE ITALIC LIST ITEM
ORDERED LIST PARAGRAPH SPECIAL CHARACTERS
TABLES TITLE UNORDERED LIST

ANCHOR  (<a>, </a>)

Anchor tags allow you to create links between documents. To anchor a link to another location,
  • Start by opening the anchor tag <a>.
  • Specify the document or website that you want to create a link to by using the href="filename" attribute.
  • Type the word that you would like visitors to click on to go to the new location.
  • Close the anchor </a>

For example:

<a href="http://www.windows95.com">Windows95.com</a>

The link will then look like this Windows 95

Links to other pages on your own website can also be created using the anchor tag. If, for example, you wanted to create a link to your second document, page2.htm, you could use the following syntax;

<a href="page2.htm">Next Page</a>

The link will then look like this Next Page

Hyperlinks in anchor tags can also be modified with the "target" attribute to change the window that displays the document.

To open a document in a new browser window, the tag would look like this:

<a href="page2.htm" target="_blank">Next Page</a>

The link will then look like this Next Page except when clicked on the link will open in a new browser window

Top


BLOCKQUOTE  (<blockquote>, </blockquote>)

The blockquote tag is most commonly used to indent a block of text on a web page. For example,

<blockquote>The text contained within the blockquote tag will be indented from the rest of the text on the web page.</blockquote>

Top


BODY  (<body>, </body>)

The body tag surrounds the content of your web page. It often contains a number of attributes that modify what the body tag does. For example:

<BODY bgcolor="#666699">

Background colors can be specified as a word, ie; "white" or "black", but it is preferable to use the hexidecimal notation. A complete list of available colors and their corresponding hexidecimal values is available here

Background Image - allows you to specify an image to appear as your web page's background. Bear in mind that images used as backgrounds are tiled to fit the browser window, so plain backgrounds work best.

If you had an image called "paper.gif" in a folder called "images" in your webspace directory and you wanted it to appear as your web page's background the tag would look like this:

<BODY background="images/filename.gif">

Link color - allows you to set the colors that hypertext links on your web page will appear. There are three link modifiers; alink, vlink and link.

  • link - The color that hypertext links will appear when the page is first opened.
  • alink - The color that hypertext links will change to when they are clicked on and still active. This means that it will stay this color until you click somwhere else on the page or until you click on another link.
  • vlink - The color that a hypertext link will appear once it has been clicked on.

<BODY background="images/paper1.gif" link="white" alink="blue" vlink="red">

Top


BOLD  (<b>, </b>)

The bold tag will bold text that is placed between the opening and closing tags. For example,

<b>This text will be bolded</b>

Top


BREAK  (<br>, </br>)

The break tag will force a linebreak with no extra (white) space between lines. For example:

This is line 1<br>
This is line 2

Top


CAPTION  (<caption>, </caption>)

This tag creates a plain line of text above a table. It is inserted right after the opening table tag.

<TABLE BORDER=2>
<CAPTION><B><I>This is a caption</I></B></CAPTION>

Top


CENTER  (<center>, </center>)

Any text or images contained within the center tags will appear centered on the web page. For example:

<center>This text will appear centered on the page</center>

Top


COMMENT  (<!--comment goes here-->)

Comment tags allow you to place text within the source code of your web page that the browser will ignore. It is often used by html programmers to illustrate important points within a document. For example,

<html>
<head>
<title>
<!--Comments can be entered here or anywhere for future reference-->
</title>
</head>
<body>
</body>
</html>

Top


DEFINITION LISTS  (<dl>, </dl>)

Definition list tags are used to format a list of terms by using alternating definition term (<dt>) and definition definition (<dd>) tags. Web browsers will indent each new line on the list. For example:

<dl>
<dt>First item
<dd>This line is indented and corresponds to the first item.
<dt>Second item
<dd>This line is indented and corresponds to the second item.

Top


DIVISION  (<div>, </div>)

Used to break up portions of text for the purpose of alignment. Text contained within these tags can be aligned left, center or right. For example:

<div align="left">Text within this tag will be left aligned</div>

Top


FONT  (<font>, </font>)

The font tag defines the style of text contained within the tags. Size and color attributes can also be added to define the text size and color. For example:

<font face="Arial" size="-1" color="#669999">This text would be displayed in blue colored arial font with a size of -1</font>

There are currently 216 "web safe" colors that can be used in your font tag. A complete list of these colors and their corresponding hexidecimal values is available here.

Top


HEAD  (<head>, </head>)

This tag identifies the first part of your HTML document, known as the head. The head also typically contains the title tag.

Top


HEADERS  (<h1>, </h1>)

Header tags are used to create titles in your document and are often used to divide sections of a web page. There are 6 sizes of header tags available (h1 - h6); the largest is h1, the smallest is h6.


<h1>This is a header</h1>

<h2>This is a header</h2>

<h3>This is a header</h3>

<h4>This is a header</h4>

<h5>This is a header</h5>
<h6>This is a header</h6>

Top


HORIZONTAL RULE  (<hr>)

The horizontal rule tag produces a horizontal line that runs the width of the browser window, often used to divide sections of a web page. A number of attributes can be added to the horizontal rule to define thickness and width. For example:

<hr size="2" width="50%"> will produce a line 2 pixels wide that covers 50% of the width of the browser window.

Top


HTML  (<html>, </html>)

This tag tells your browser that the file or document contains HTML code.

Top


IMAGE  (<img>, </img>)

The image tag allows pictures or artwork to be displayed on a web page. It always contains a src attribute to identify the location (source) of the image. There are also a number of modifiers that can be added to the image tag to define the size of the image, and the text to be displayed when the mouse pointer is placed over the image. For example:

<img src="images/filename.gif" height="100" width="100" alt="this text will become visible when the mouse pointer is moved over the image">

In this example, the image tag refers to a picture called "picture.gif", located in a folder called "images", that is 100 pixels wide by 100 pixels high. When someone places their mouse over the image, a small window will become visible containing the text in the alt attribute.

Images can also be used as links to other web pages on your site by using the anchor tag. For example:

<a href="page2.htm"><img src="images/filename.gif" height="100" width="100" alt="click here to go to the next page">

In this example, a visitor could click on the image (filename.gif) and be taken to page2.htm.

Top


ITALIC  (<i>, </i>)

The italic tag will italicize text that is placed within the opening and closing tags. For example,

<i>This text will be italicized</i>

Top


LIST ITEM  (<li>, </li>)

There are three types of lists that can be incorporated into a web page using list tags. Examples include unordered lists, ordered lists and definition lists.

Top


ORDERED LIST  (<ol>, </ol>)

Ordered lists allow you to create a numbered list. For example:

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

Top


PARAGRAPH  (<p>, </p>)

The paragraph tag defines individual paragraphs on your web page.

<p>All of the text contained here would be a paragraph.</p>
<p>
This would be the next paragraph.</p>

Top


SPECIAL CHARACTERS

There a number of symbols that can be displayed using special characters in HTML. The table below lists what the characters represent, the HTML code needed to create the character and how the character is rendered on your web page. Please note that symbols do not have open and closing brackets around them.

Entity

HTML Code

Symbol

Copyright

&copy;

Ampersand &amp; &
"Less than" &lt; <
"Greater than" &gt; >
Non-breaking Space &nbsp; [space]

Top


TABLES  (<table>, </table>)

Tables are used quite often in web page design to align text and images, defined by various table tags. Tables consist of headers <th>, table data <td> columns <colspan> and rows <tr>.

  • <th>, </th> - Defines a table header cells. By default, text in this cell is bold and centered. Table header cells can contain attributes that modify the default characteristics.
  • <td>, </td> - Defines a table data cell. By default, text in a data cell is left aligned and vertically centered. Columns are defined within the table data tag;
  • <tr><td colspan=2> for example, specifies a two column table row.
  • <tr>, </tr> - Specifies a table row. Again, attributes are available to modify how text is displayed in a table row.

Table tags often contain modifiers that define the width of the table, background color and whether the table will have a border. For example;

<table width="500" border="2" bgcolor="#000000">

The above example defines a 500 pixel wide table with a 2 pixel wide border and a black background. Because the table's width has been specified using pixels, it will not be scaleable if the browser window is resized.

The other way of defining the width of a table is to use percentage. Using a percentage instead of a fixed width allows a table to "scale" when a browser window is increased or decreased in size.

<table width="80%">

A complete table might look like this;

<table width="500" border="2"> <tr><td>
<th>This is the table header</th>
</tr></td>
<tr><td colspan=2>
This text would appear in the first column of the first row
</tr></td>
<td>
This text would appear in the second column of the first row
</td>
<tr><td colspan=2>
This text would appear in the first column of the second row
</tr></td>
<td>
This text would appear in the second column of the second row
</td>
</tr></td>
</table>

Top


TITLE  (<title>, </title>)

This tag contains the title of your web page, and is placed within the head. The title will display in the title bar of the browser window when the web page is accessed.

Top


UNORDERED LIST  (<ul>, </ul>)

Unordered lists are most commonly used to create a bulleted list. For example,

<ul>
<li>first item</li>
<li>next item</li>
</ul>

Top


Back