Hyper Text Mark Up Language
What is HTML?
HTML is a code which tells the web browser what you want the page to look like. It is not an
exact art, each computer and different kind of browser will interpret the code slightly differently.
All HTML code is signaled to the browser by the use of pointy brackets, like this < >. All the code must be enclosed inside these brackets, if you leave one off, the browser won’t
recognize the code.
With only a few exceptions, all HTML codes have to be turned on, and then turned off, a bit like the formatting commands in older versions of Word Perfect. The command for turning off HTML code is a back slash /. If you don’t turn the code off the effect will continue into the rest of the page.
HINT! It doesn't matter if your HTML code is in upper-case or lower-case letters, in fact, for most web servers you can use a mixture of both. However if your web page is going to live on a UNIX server your code MUST be consistent, either all upper or all lower, but not a mixture of both. To make it easier to read, in this document I have made all the HTML code upper-case.
This means that except for the exceptions mentioned above, all HTML codes are paired, a code has to be turned on, and then it has to be turned off. For example, to make text bold you can use the code B (for bold).
The HTML code would look like this:
<B>This text will show up on my browser as bold text</B>.
Beginning your HTML document
<HTML></HTML>
To begin a document you need to tell the browser that all the text following should be read. You should start the document with <HTML> and finish it with </HTML>.
HINT! : Note that all HTML documents end with .html or .htm file extensions. Browsers won't
recognize any other file ending. Generally you will find the .htm ending on files which have been created on PC's, which have generally only allowed three letter file extensions.
<HEAD><TITLE> <HEAD></TITLE>
This is the heading of your document. It won't show up on the screen, but if you, or someone else bookmarks the document, this is the description that will appear in the bookmarks file. It is worth making it descriptive.
For example:
<HEAD>
<TITLE>Useful educational resources for teachers</TITLE>
</HEAD>
HINT! Although it doesn't matter to your browser, it can make it easier for you, if you set your HTML code
out on the page in the way you would like it to appear on the screen. As far as your browser is concerned you could squash all
your code together, but it makes it very difficult for you to read and edit it.
Adding background patterns and colors
<BODY
BACKGROUND=" ">
If you want a background to your document this is the command. You can use an image or simply a
color to produce a background. A background image "tiles" across the screen, while a background
color simply makes the entire screen one color. Your text and other images then sit on top of your background. To make an image your background simply insert the name of the file and where it is.
For example:
<BODY
BACKGROUND="gif/tile.gif">
To make a background you can use a color code, or you can simply put the name of the
color.
For example:
<BODY BGCOLOR="GREEN">.
If you want to have more control over the background color of your page you can use the
color codes on the sheet I have included with this handout. So if you wanted to specify a particular
color by code, the command would be
<BODY BGCOLOR="#238E23">
These color codes are available on the web at: http://www.baylor.edu/baylor/Misc/colors/Background.html You can also use these
color codes to specify the colors of your live links and visited links.
HINT! It is important that if you are experimenting with different colors
of text, background and links, that you bear in mind that what is most important is that people will be able to read your page easily. For example, black backgrounds with pale text are very fashionable at present, but on less-than-perfect screens can be all but impossible to read. The same rules apply with highly
colored or very busy background images, if they make your text hard to read then your audience is missing your message.P>
Headings and font sizes
<H1></H1>
Headings come in five
sizes from <H1> which is the biggest to <H5> which is
the smallest. Heading commands will always insert a paragraph
break after the heading. Try to use the heading commands in
order, for example, make the largest heading on your page the
first heading. Some search engines use these headers as a way of
picking out which sections of a page are the most important. If
you simply want a larger size font for some reason use the next
command.
<FONT SIZE=+1></FONT> <FONT SIZE=-1></FONT>
If you want to change the
size of the text font without inserting a paragraph break after
it, use the <FONT SIZE=+ > command. <FONT
SIZE=+1> is one size bigger than the screen font the
browser is displaying, <FONT SIZE=+2> is two sizes
bigger & etc. You can make your text smaller by using the
same command but with a minus sign, i.e. <FONT
SIZE=-1></FONT>. Remember that like most HTML
commands you have to turn the <FONT SIZE= > command off
with </FONT>
You can change the font color by using the <FONT
COLOR="GREEN"></FONT> commands. Some of
the colors you can use are: green, red, pink, cyan, brown and
purple, or you can use the color codes as above, for example, <FONT
COLOR=" #238E23"> </FONT>.
HINT!For all of these formatting commands you
need to use the US spelling conventions, not the Australian. So
use "color" not "color", "center"
not "center" and "gray" not "grey".
You can also use the
command <FONT FACE="name of font">
</FONT> at the beginning of your document, or in a
particular section, to specify that your page should appear in a
particular font, different from the font which the viewer's
browser has been set up to display. The problem with this is that
your viewer may not have that particular font installed on their
machine, and if you have set up your page formatting with that
particular font in mind, your page could look very odd when
viewed in another type face.
Text formatting
<B></B>
<I></I> <U></U>
These are the commands to
bold, italicize or underline your text. You can use them
together, i.e. bold and italic, which would be <B><I>
text </B></I>. It is a good idea to avoid using
the <U> command in designing web pages , because live links
are usually indicated by underlining> Using non-live
underlining in your page is liable to be confusing.
<CENTER></CENTER>
Will center a block of
text. Note that it is the US spelling, it won't work with
Australian/UK spelling.
Line and paragraph breaks
<BR> <P>
These are line breaks and
paragraph breaks. Unlike most HTML codes, they don't need to
be turned off. <BR> goes to the next line, <P>
inserts a line after the text.
HINT!
It is good coding to turn commands off
in the same order you turned them on, and to open and close codes
on either side of a paragraph or line break. So rather than using
a command like <B>this is my text <P></B>, use
<B>This is my text</B><P>. Although most of the
time it doesn't matter, with some browsers this kind of
carelessness can have a marked effect on the way your page is
viewed.
Inserting images
<IMG SRC="gif/image.gif">
HINT!
Note the quotation marks around the name
of the path to the image file. These quotation marks are very
important, both for including images and when you come to include
hypertext links. Leaving one, or both sets of them out will
usually mean that your picture or hypertext link won't work.
So if you can't work out why you are having trouble with an
image file or link, it is always worth checking to make sure your
quotation marks are in place.
<IMG
SRC="gif/image.gif">
This is the command you
use to insert an image. the "gif/image.gif" indicates
the path to the image, and the name of the image file you want
the browser to display. You can choose where the image will
appear on the page by including alignment information with the ALIGN=
command. Images can be aligned to the left margin, to the right
margin, to the top of the text, the middle of the text or the
bottom of the text. The command is:
<IMG ALIGN=LEFT
SRC="gif/image.gif">
The only two kinds of
image files that a web browser can display are .gif files and .jpg (or jpeg) files. In general try and use .gif files because
they are smaller files, but for high quality images or
photographs you might use .jpg files which are often better
quality. For more information about image file types see:
Using The Internet - All About Images
HINT! Remember, if you are inserting the name
of an image file you need to specify where it is held on the
computer. This is called a path name and all it is, is directions
to your browser on where to find a particular file on a
particular computer. So if your file is held in a directory,
inside another directory, then you need to specify this in
<IMG SRC=" "> command. For example,
<IMG
SRC="homepage/images/picture.gif">, where the image
file is called "picture.gif", which is in a directory
called "images", which is inside another directory
called "homepage". Although you might not have thought
of it like this before, this is how you will probably have most
of the files on your computer organized.
Adding hypertext links
There are three kinds of
hot links: to another part of the same document; to another
document held on the same server; or to a document held on
another server somewhere else.
The code for this is:
<A
HREF="URL">Name of the Page you are linking
to</A>
HINT!
URL stands for Uniform Resource Locator
and is simply the address of a web page. Each web page will have
its own unique address. All WWW pages start with http:// which means hypertext
transfer protocol. For example: <A
HREF="http://www.dse.vic.gov.au">SOFWeb's Home
Page</A>
The bits of the command which stay the same are the <A HREF="
"></A>, all you need to do is add the URL and the
title of the page, the browser does all the rest. Be careful with
this syntax, a space where there shouldn't be one, or a
missing set of quotation marks will often stop the link working.
Link to a document on
the same computer
A link to another document
held on the same server is even simpler. The format is exactly
the same: <A HREF=" "></A>, but you
don't need the entire URL, all you need is the path to the
file, much like inserting an image file. So, <A
HREF="useful.htm">Name of the document you are
linking to</A>.
Link to another part of
the same document
This is a little more
difficult because it is in two parts, the initial link and the
target link. You need to tell the browser where you want it to
jump to, and then put a target so that it can recognize the
place.
The first part we already
know except that instead of a file name we use the format
#target_name. The # tells the browser that it is looking for a
place within a document, not simply the beginning of the page.
The target name can be anything you like, but of course, they
need to be different for each target in the same document.
It looks like this:
<A
HREF="#target">name of the target you are linking
to</A>
An example might be:
At the top of the page you
need to put the target, which looks like this:
<A
NAME="top"></A>.
Note that the second part
is called <A NAME> and not <A HREF> and you
don't need the #, for the target reference.
You can combine a link
from one document to another, with a target command. For example,
if you wanted to go from one page, to a particular section of
another page, you can include this information in your <A
HREF=" "> command. The target might be one that you
have created, or it might be one on another page which someone
else has created. An example of this type of command is:
<A
HREF="http://www.dse.vic.gov.au/publish.htm#graphics">Adding
graphics</A>. This link would take you to a section on a
page on SOFWeb about adding graphics to a web page.
Lists
There are three kinds of
lists in HTML, they are ordered lists, which give each element of
the list a number, unordered lists, which give each element of
the list a dot point, and descriptive lists, which simply indent
list elements..
Ordered list
Ordered lists use the
syntax <OL><LI></OL>, where <UL>
</UL> opens and closes the list, and <LI> indicates
the elements of the list.
An example of an ordered
list would be.
<OL>
<LI>dog
<LI>cat
<LI>rabbit
<LI>horse
</OL>
which on your web browser
will look like
- dog
- cat
- rabbit
- 4 horse
Unordered list
Unordered lists use the
similar syntax to ordered lists, <UL><LI></UL>
opens and closes the list, and <LI> indicates list
elements.
An example of an unordered
list would be:
<UL>
<LI>dog
<LI>cat
<LI>rabbit
<LI>horse
<UL>
On your web browser this
would look like:
HINT!
In an unordered list you can change the
kind of dot point which displays by using the command <UL
type=" ">, where element after "type=" can
be disc, square or circle. If you don't specify then the
browser inserts a disc, which is simply a filled in dot as you
see above.
Descriptive list
A descriptive list allows
you to indent the list, without numbers or dot points.
This kind of list has
three elements, <DL> </DL> which open and
close the list, <DT> which defines the first text
element, and <DD> which describes the indented text
element. So a descriptive list looks like this:
<DL>
<DT>there are
many kinds of domestic animals in the world, some examples are:
<DD>dogs
<DD>cats
<DD>rabbits
<DD>cows
<DT>but of course
there are many others.
</DL>
On your browser this list
would look like this:
-
there are many kinds of
domestic animals in the world, some examples are:
- dogs
- cats
- rabbits
- cows
- but of course there are
many others.
Note that in all these
list, the only elements that need to be switched off (/) are the
initial list command, the other commands with a list
(<LI><DT><DD>) don't require it.
Tables
Tables are a complex, but
very useful way of organizing information on a web page. They can
be confusing at first, but once you get used to them you will
find them invaluable.
The basic syntax for
tables is:
<TABLE>
<TR>
<TD>
</TD>
</TR>
</TABLE>
<TABLE>
</TABLE> open and close the table, so they are always
the first and last elements in your table, and your table
won't display without them.
<TR> </TR>
are the beginning and end of a table row, and you one of each for
each row in your table.
<TD> </TD>
are table columns, and you need one of these for each column in
your table.
A simple table
<TABLE>
<TR><TD>dogs</TD><TD>cats</TD><TD>mice</TD></TR>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR></TABLE>
| dogs | cats | mice |
| horses | ferrets | goldfish |
| rats | sheep | goats |
A Table with borders
<TABLE BORDER=3>
<TR><TD>dogs</TD><TD>cats</TD><TD>mice</TD></TR>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR>
</TABLE>
| dogs | cats | mice |
| horses | ferrets | goldfish |
| rats | sheep | goats |
Column span
Another variation where
the command COLSPAN=3, means that that particular column should
be three columns in width.
<TABLE BORDER=3>
<TR><TD
COLSPAN=3><B>Some domestic
animals</B></TD></TR>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR>
</TABLE>
| Some domestic animals |
| horses | ferrets | goldfish |
| rats | sheep | goats |
Table width
You can also specify the
width a table will take up on the screen. Here I have used a
percentage command which means that whatever the size of the
screen the table is displayed on, the browser will automatically
size table to 50% of the screen. Without the percentage symbol
the browser assumes the command is in pixels.
<TABLE WIDTH=50%
BORDER=1>
<TR><TD
COLSPAN=3><B>Some domestic
animals</B></TD></TR>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR>
</TABLE>
| Some domestic animals |
| horses | ferrets | goldfish |
| rats | sheep | goats |
Cell spacing and cell padding
You can also control the spacing within and between table cells with the CELLPADDING
and CELLSPACING commands. Note that there is no space between the words in these commands.
The cell padding command controls the amount of space around a cell element.
<TABLE BORDER=1
CELLPADDING=10>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR>
</TABLE><P>
| horses | ferrets | goldfish |
| rats | sheep | goats |
The cell spacing command
controls the amount of space between cells.
<TABLE BORDER=1
CELLSPACING=10>
<TR><TD>horses</TD><TD>ferrets</TD><TD>goldfish</TD><TR>
<TR>
<TD>rats</TD><TD>sheep</TD><TD>goats</TD></TR>
</TABLE><P>
| horses | ferrets | goldfish |
| rats | sheep | goats |
HINT!
You can use the "TABLE WIDTH="
command to layout an entire page, so if you want the text and
images on your page to take up a certain amount of the page, or
if you want your page to resize depending on the screen width it
is displayed on, you can simply enclose your whole web page in a
table. Try this: start your page with <TABLE
WIDTH=50%><TR><TD> then compose your page as
normal, including the text and images you want to use. Finish
your page, just before the </BODY></HTML> tags with
</TABLE></TD></TR>. Not only will your not take
up the whole screen, making it easier to read, but your page will
resize to 50% of any screen it displays on. This is a very useful
layout tool.
©
State of Victoria (Department of Education, Employment & Training)
Initiative of the SOFWeb Project Contact:
SOFWeb
Last Updated: August 11, 2000
|
