HTML - A detailed tutorial which will
give you the basics you need to start writing your own HTML documents. This
section also includes an HTML tag index and colour reference chart;
HTML, or Hyper Text Markup
Language, is the programming code recognised by internet browsers. Whilst
there are a number of 'WYSIWYG' (What You See Is What You Get) HTML editors
available commercially that will build the code automatically, it is a good
idea to at least learn the basics required for fine-tuning your code.
This section, whilst not exhaustive, is intended to provide you with a good
general understanding of the language. We have covered the following
areas:
- The basics;
- Text & Colour;
- Images;
- Tables;
- Frames; and
- a comprehensive Tag Index
and Colour
Chart
Please keep in mind that
this guide is intended for people who have little or no knowledge of HTML. It
is for this reason that we've concentrated on the basics and tried to keep
explanations as straightforward as possible. If you feel that we've omitted an
important aspect or, for that matter, imparted erroneous or misleading
information we would appreciate you drawing it to our attention via e-mail
It is our hope that, as
time allows, we will eventually be able to include guides on more advanced
areas of HTML programming.
HTML Basics
Probably the most simple
form of HTML editor is the Notepad application that comes with Microsoft
Windows. You can type HTML code directly into Notepad, save it as a .HTML file,
and there's your web page. Pretty easy, isn't it? A common method of
development, for those at least reasonably familiar with the code, is to
construct the basic page with Notepad, save it, open up the internet browser
and view the source, which displays the code in Notepad. From here, changes can
be made to the code, saved, then the browser can be refreshed to immediately
see how the page is developing.
Tags are used in order to
denote the various elements in an HTML document. They are composed of up to
four parts, those being:
|
a 'less than' sign (<); |
Tags usually have a start
and an end tag eg. <p> to start and </p> to finish. As HTML is not
case sensitive, <head> is equivalent to <HEAD> and so forth.
The following section
describes the four fundamental HTML tags that will be found in every web page.
<HTML> Specifies the beginning and end of
the HTML document. The first and last tags in your HTML page should be
<HTML> and </HTML>. If your document consisted of only these two
tags, the browser would display a blank page.
<HEAD> Contains all of the internet
document's header information, such as the title, meta tags etc.
<TITLE> Identifies the page name.
This text is displayed at the top of the browser window as well as being used
as the default title for bookmarking or for history files. The title can be as
long as you want, but it's recommended that you use it to indicate the page's
contents.
An example:
<TITLE>Intergrafx HTML Help Page</TITLE>
<BODY> Defines the page attributes
including background colour, background image (if appropriate), text colour,
link colour, active link colour and visited link colour. All the images text
and hyperlinks that are actually displayed in the browser window are defined
between the <BODY> </BODY> tags.
With all that in mind, your
basic HTML structure should be as follows:
|
<HTML> |
This will work, but will
produce a totally blank page when run by a web browser. In further sections of
HTML Tips we will show you how to add text, images and other elements to your
HTML document.
Using Text and
Colour
Headings
Before we start talking about headings, it's important to make it clear that a
heading as we're referring to it here has nothing at all to do with the
<HEAD> tag described in the Basics
section.
There are six levels of
headings, Heading 1 (H1) being the most important through to Heading 6 being
the least important. By default, browsers will display the six heading levels
in the same font, with the point size decreasing as the importance of the
heading decreases.
Headings are meant for
section titles and the like, and are defined as existing on a line by
themselves. A heading always begins at the margin of a line and always forces a
line break at the end of the heading, therefore two heading levels cannot be on
the same line. This also means that you cannot highlight text in the middle of
a paragraph by marking it as a heading. If you try this, the paragraph will be split
in two, with the heading text on its own line between the two pieces.
Paragraphs
The beginning of a paragraph is marked by <P> and the end by </P>.
It doesn't matter how much white space there is in your HTML document between
words, or how many returns are entered, everything between those tags will be
displayed in the browser as a sequence of words separated by single spaces.
For example:
|
<p>This text will appear normal in the browser.</p> |
will appear in the
browser as:
|
This text will appear normal in the browser. |
Line Break
A line break is invoked by using the <BR> tag which forces a line break
after the position where it's placed in the content, that is, whatever is after
the <BR> tag will start from the left margin of the next line on the
screen. As the line break tag is an empty tag, there's no requirement for
a closing </BR> tag.
Blockquote
The <BLOCKQUOTE> tag is used for when you want to indent a passage of
text and set it apart from other text on your page. For example:
This text is in blockquotes.
Blockquotes are useful for
highlighting quoted material.
Other
Text Tags
There are a number of other tags that can be applied to text, such as <b>bold</b>,
<i>italic</i> and <s>strikeout</s>.
Refer to the HTML Tags Index
for an ever-evolving yet comprehensive list of text, image and other tags to
use on your web pages.
Unnumbered
Lists
Unnumbered lists can be created using the unnumbered, or bulleted list, tag.
The list should be started with the opening list tag <ul> and ended with
a closing list tag </ul>. List item tags <li> should precede the
individual items, and no closing tags are required for these. For example:
|
<ul> |
would be displayed on
the browser as:
|
Numbered Lists
Numbered lists are constructed identically to unnumbered lists, except the
<ol> and </ol> tags are used to start and finish the list. For
example:
|
<ol> |
would be displayed on
the browser as:
|
ifirst item |
Linking with Text
The HTML hypertext-related tag is <a>. To include a hypertext anchor in
your document:
1. begin the anchor with
<a (be sure to leave a space after the 'a');
2. specify the document you want to link to by entering the parameter
href="filename" and follow this with a closing 'greater than' sign
(>).
3. specify the text that will become the hypertext link in the current
document; and
4. enter the ending anchor tag (</a>).
For example:
<a
href="default.htm">Home Page</a>
This would make the words
Home Page the hyperlink to the document default.htm, assuming that default.htm
is in the same directory as the current document.
In order to link to
documents not in the same directory as the current document a relative path
must be specified.
For example:
<a href="Internet
Documents/default.htm">Home Page</a>
This would link to the file
default.htm located in the subdirectory Internet Documents.
Mailto
Links
You can specify a link in order to make it easy for a user to send e-mail to a
mail alias by including the Mailto attribute in a hyperlink.
For example:
<a
href="mailto:df@intergrafx.com.au">David</a>
In this example, clicking
on the word 'David' will open an e-mail window that is already configured to
send mail to df@intergrafx.com.au. David doesn't get much mail so send him
something to let him know he's appreciated.
Linking
to Specific Sections of the Current Document
For example, to link to the SERV anchor from within the page prodserv.htm
enter:
...for more information,
check out our <a href="#SERV">Services</a> section,
elsewhere on this page.
In order to achieve this,
the <a name> tag must be used to identify the point in the document you
want to link to eg. <a name="SERV">Services</a>.
Colour
Those of you who are used to using graphics applications such as Photoshop or
Picture Publisher will be familiar with the concept of RGB colour. The RGB code
is a decimal code that represents the intensity or percentage of Red, Green and
Blue that make up each of the 16 million colours that are available. HTML,
however, uses a hexadecimal colour code and in order to use an RGB colour in
your HTML document you must first convert the RGB code to hexadecimal. It all
sounds very complicated but in fact it's quite simple.
In your Start>Programs>Applications
menu you'll find a calculator. You'll need to make sure the View is set to
'Scientific'. Make sure the 'Dec' radio button is selected and type in the 'R'
figure of the RGB code. Select the 'Hex' radio button and the calculator will
automatically convert the number to a hexadecimal code. Continue on with the G
and B parts of the code. Obviously this can also be done with any scientific
calculator. It can also be performed in reverse, that is, converting a
hexadecimal code to an RGB code by reversing the process described above.
For example:
An 'R' code of 255 will
return the hexadecimal code of FF. Following on from this, the RGB code of 255,
94, 177 equals FF5EB1 in hex. When this is entered into the color attribute
within a <body> or <font> tag, the hex code is preceded by a hash
mark (#).
For example:
<body
bgcolor="#FF5EB1">; or
<font face="Arial" size="2"
color="#FF5EB1">
For a comprehensive list of
hex colour codes, along with their word counterparts, check out our Colour Chart
Using Images in
HTML
Most internet browsers can
display images that are in GIF or JPEG format (other image formats are also
being introduced). Images take longer to download than text so you should
be careful to not have too many images on a page, as well as ensuring that the
images are not too large in file size.
To include an image in your
HTML code, enter:
<img src="image
name">
where image name is
the URL of the image file.
If the image file is a GIF,
then image name must end with .gif and similarly for JPEG files, image
name ending with the .jpg extension.
Other attributes that can
be included in the <img> tags are height and width.
These allow the browser to set aside the appropriate space, in pixels, for the
images as it downloads the rest of the HTML document.
For example:
<img
src="landscape.gif" height="101" width="150">
Some browsers cannot
display images, while some users turn off the option to display images in order
to accellerate download time. By using the <alt> attribute, you can
specify text to be displayed instead of the image on these occasions.
For example:
<img
src="landscape.gif" height="70" width="125"
alt="Mount Kosciusco">
In this instance, for an
images-enabled browser a picture of a mountain is displayed, whereas for a
text-only browser the words Mount Kosciusco is shown in place of the
image. For most browsers, the <alt> text is usually displayed in a
popup tag when the cursor is moved over the image.
Including alternate text,
while not essential, is recommended as a courtesy for visitors to your site.
Images can also be used as
hyperlinks in the same way as it is for text.
For example:
<a
href="victoria.htm"><img src="landscape.gif"
alt="Mount Kosciusco"></a>
In this example, the image landscape.gif
acts as a hyperlink to the document victoria.htm when it is clicked
on.
Making an image a clickable
hyperlink can cause the browser to put a border around the image. To remove
this border, or adjust it's size, the border attribute can be used.
For example:
<a
href="victoria.htm"><img src="landscape.gif"
alt="Mount Kosciusco" border="5"></a>
Setting the border to
"0" will remove it.
To make the page background
display an image, the BACKGROUND tag is included in the page <body> or
<table> statement.
For example:
<table
background="landscape.gif">
|
|
This will, if the image is
smaller than the size of the page within the browser window, tile the image
repeatedly across and down the page. It is recommended that, if you include a
background image, you choose one that won't make the text displayed over the
image difficult to read.
Creating Tables
in HTML
Tables are one of the most
useful aspects of HTML code. Not only do they allow you to display tabular
information, they also assist greatly in the control of layout and presentation
of web pages. The main table tags are as follows:
<table></table>
Defines a table within HTML.
<caption></caption> Defines the caption for the title of the table,
which by default is centred at the top of the table. By using the
align="bottom" attribute within the opening <caption> tag the
caption can be positioned below the table.
<tr></tr> Specifies a row within a table.
<th></th> Specifies a table header cell. This is, by default,
displayed within the cell centred and in bold.
<td></td> Defines a cell within a table.
Table Attributes
The following attributes can be placed within the <table> tag to affect
table characteristics:
width="X" where X
is the table width in pixels or as a percentage, for example:
width="601" or width="90%".
cellpadding="X" where X is the amount of cellpadding in pixels.
cellspacing="X" where X is the amount of Cellspacing in pixels.
The following attributes
can be placed within the <tr> and <td> tags to affect table
characteristics:
align="X" where X
is left, center or right.
valign="X" where X is top, middle or bottom.
colspan="X" where X is the number of columns the row spans.
rowspan="X" where X is the number of rows a column spans.
nowrap turns off word wrapping within a cell.
Note: Attributes that are
defined within a <th> or a <td> tag override the default alignment
specified within a <tr> tag.
A typical table, in HTML
code, may look like this:
<table
width="80%" border="1" cellpadding="1"
cellspacing="1">
<caption>Caption goes here</caption>
<tr>
<td>first row, first cell contents</td>
<td>first row, second cell contents</td>
</tr>
<tr>
<td colspan="2" align="center">last row, first cell
spanning two columns with cell contents aligned centrally</td>
</tr>
</table>
|
first
row, first cell contents |
first
row, second cell contents |
|
last row, first cell spanning two
columns with cell contents aligned centrally |
|
It's very important to
ensure that the closing tags are placed in the code, otherwise the table
formatting will not work correctly. Remember also that the <caption> and
<th> tags are optional. Within a row, any number of cells can be defined by
the <td> tags. Each row is formatted independently of those above and
below it, allowing you to specify and display single cells spanning several
columns of a table.
Designers often use tables
to control the display of a number of images so that they appear to create one
whole image. There are many examples of this technique on the internet.
HTML Tag Index
Following is a list of HTML
tags that can be used in the construction of an internet document. As new
technologies become available, this list will continue to grow.
|
|
|
|
|
<a
href> |
Creates a
link to another site, page or different spot on the current page. |
|
|
<a
name> |
Generates
an anchor point for jumping to specific parts of a page. |
|
|
<address> |
Specifies
an address on your page. |
|
|
<applet> |
Enabling
command for a JAVA application. |
|
|
<area> |
Defines a
clickable area of an image map. |
|
|
<audioscope> |
Defines
the appearance of a graphical display for sound when viewed using WebTV. |
|
|
<b> |
Bolds the
text inside the tags. |
|
|
<base> |
Specifies
the URL of the page within the HTML code. |
|
|
<basefont> |
Specifies
the default font, font size and font colour for the entire page. |
|
|
<bgsound> |
Uses midi
or wav files to add background sound to an web page. |
|
|
<big> |
Makes the
text between the tags to be one size bigger than the base font. |
|
|
<blackface> |
For WebTV
users, makes the font bold and double the size. |
|
|
<blink> |
Makes the
text blink at regular intervals. |
|
|
<blockquote> |
Makes a
block of text indented. |
|
|
<body> |
Defines
the text, link and visited link colours as well as the background image. |
|
|
<bq> |
For WebTV,
indents a block of text. |
|
|
<br> |
Makes a
line break after text or images. |
|
|
<caption> |
Creates a
caption for tables. |
|
|
<center> |
Centres
text or graphics. |
|
|
<cite> |
Makes text
appear in italics. |
|
|
<code> |
Formats
text in monospaced font. |
|
|
<comment> |
Inserts
comments into the HTML that will not appear on the actual page. |
|
|
<dd> |
When used
inside the <dl> tag will indent the text one level. |
|
|
<dfn> |
Defines a
term. |
|
|
<dir> |
Creates a
list of items in a single column. |
|
|
<div> |
Represents
different sections of text. |
|
|
<dl> |
Displays a
list of terms and definitions. |
|
|
<dt> |
When used
in a <dl> listing, defines a term. |
|
|
<em> |
Makes text
appear in italics. |
|
|
<embed> |
Embeds a
sound file or audio visual (avi) file into your HTML. |
|
|
<fn> |
Creates an
anchor point. |
|
|
<font> |
Changes
the font, colour and size of the text. |
|
|
<form> |
Defines a
page or text area as an input form. |
|
|
<frame> |
Defines a
frame within the <frameset> tag. |
|
|
<frameset> |
Defines a
frames page attributes. |
|
|
<h1>
<h6> |
Formats
text in a header font. |
|
|
<head> |
Defines
the head of an HTML document. |
|
|
<hr> |
Creates a
horizontal line. |
|
|
<html> |
Specifies
that the document is written in HTML code. |
|
|
<i> |
Makes text
appear in italics. |
|
|
<img> |
Inserts an
image, animation or imagemap. |
|
|
<input> |
For forms,
defines an input field. |
|
|
<isindex> |
Generates
a prompt to gather a request for indexing. |
|
|
<kbd> |
Formats
text in a monospaced font. |
|
|
<li> |
Creates a
new line or bullet point in a list when used inside the <dir>,
<menu>, <ol> or <ul> tags. |
|
|
<limittext> |
For WebTV,
defines the maximum width for text to be displayed. |
|
|
<link> |
Generates
an organisation for navigating a series of documents. |
|
|
<listing> |
Preformatted
text in the listing are formatted in a monospaced font. |
|
|
<map> |
Defines a
client side map. |
|
|
<marquee> |
For
Microsoft IE, creates scrolling text. |
|
|
<menu> |
Creates a
list. |
|
|
<nobr> |
Prevents
line breaks in text or a series of images. |
|
|
<noframes> |
For
viewing with a browser that does not support frames, defines what will be
seen. |
|
|
<ol> |
Defines
the start and end to a list. |
|
|
<option> |
Creates a
list from which the viewer may choose. |
|
|
<p> |
Defines
the start and end to a paragraph. |
|
|
<plaintext> |
Formats
text in a monospaced font. |
|
|
<pre> |
Preformats
text in a monospaced font. |
|
|
<s> |
Draws a
line through text. |
|
|
<samp> |
Formats
text in a monospaced font. |
|
|
<script> |
Defines
the start and end of a JAVA script. |
|
|
<select> |
Creates a
list from which the viewer may choose. |
|
|
<server> |
A method
of doing animation from a server. |
|
|
<small> |
Formats
text one size smaller than the default font. |
|
|
<strike> |
Draws a
line through text. |
|
|
<strong> |
Formats
text in a bold font. |
|
|
<sub> |
Formats
text as subscript. |
|
|
<sup> |
Formats
text as superscript. |
|
|
<table> |
Creates a
table. |
|
|
<td> |
Defines a
cell within a table. |
|
|
<textarea> |
Specifies
size of a text area. |
|
|
<th> |
Specifies
a table heading. |
|
|
<title> |
Specifies
the title of a page. |
|
|
<tr> |
Specifies
a row within a table. |
|
|
<tt> |
Formats
text in a monospaced font. |
|
|
<u> |
Underlines
text. |
|
|
<ul> |
Formats an
unnumbered list. |
|
|
<var> |
Formats
text in italics. |
|
|
<xmp> |
Formats
text in a monospaced font. |
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||