Home Up Feedback Contents Search

Html Guide

 

 SOFWeb's

 Beginner's Guide To HTML

 

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

  1. dog

  2. cat

  3. rabbit

  4. 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:

  • dog
  • cat
  • rabbit
  • horse

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>
dogscatsmice
horsesferretsgoldfish
ratssheepgoats


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>
dogscatsmice
horsesferretsgoldfish
ratssheepgoats

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
horsesferretsgoldfish
ratssheepgoats

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
horsesferretsgoldfish
ratssheepgoats

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>

horsesferretsgoldfish
ratssheepgoats

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>

horsesferretsgoldfish
ratssheepgoats

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

 

 

 

Home ] Up ]

Send mail to postmaster@computerbuddies.us with questions or comments about this web site.
Copyright 2005 Computer Buddies
Last modified: June 04, 2008