kasperanalytics.

com

9123820085

INTRODUCTION TO
HTML

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

Introduction

These workshop notes describe how to create simple HTML documents for use on
the World Wide Web. They are intended for people who have never created a Web
page before. Familiarity with using the World Wide Web and a working knowledge
of Windows NT/95/98/2000 are assumed. The material is designed for use on ITS
managed workstations.

Contents
1. Introduction …………………………………………………………………………………………………………………………….2
2. Getting Started………………………………………………………………………………………………………………………..5
3. Creating a Simple HTML Document……………………………………………………………………………6
4. Adding Text to your HTML Document…………………………………………………………………………8
5. Adding Headers to your HTML Document………………………………………………………………10
6. Using Lists…………………………………………………………………………………………………………………………………….11
7. Task 6 Physical and Logical Tags. ……………………………………………………………………………….12
8. Task 7 Using Hypertext Links……………………………………………………………………………………………..13
9. Task 8 Adding Images…………………………………………………………………………………………………………..14
10. Task 9 Creating a Simple Table………………………………………………………………………………………16
11. Task 10 Finding Out More……………………………………………………………………………………………………..18
12. Task 11 Adding a Background Colour……………………………………………………………………………21
13. Task 12 Adding Colour to Text and Links…………………………………………………………………….22
14. Task 13 Adding Background Images…………………………………………………………………………….24
15. Task 14 Adding local Font Settings…………………………………………………………………………………24
16. Task 15 Adding Colour to Tables………………………………………………………………………………………25
17. Optional Task - Checking Your HTML…………………………………………………………………………….27
18. Web Page Design Guidelines…………………………………………………………………………………………….30
19. HTML Resources………………………………………………………………………………………………………………………….31

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

1. Introduction
What is HTML?…

1. Hyper Text Markup Language

2. A standard set of codes, called tags, used to format all Web pages.
3. HTML includes a set of rules defining the way tags can be used and
combined.
4. Learning HTML means learning the tags and learning the rules.
5. You can write it by hand or use an editor package.

What is a Web page?…

6. A text-only file (ascii text).

7. Formatted in HTML.
8. Interpreted and displayed by a Web browser.
9. Must be named with a .htm or .html extension
10. Filenames are case-sensitive
11. No spaces allowed in file names
12. There are no graphics embedded in the text.
13. All the graphics are stored as separate files (graphic formats .gif or .jpg),
each one referenced by an HTML tag.
• Web browsers…
• Web browsers can read files stored locally on your PC: Internet Explorer
File menu > Open then click on Browse
• And read pages stored on a remote web-server: Location
http://www.bbk.ac.uk/
• Pages must be transferred to a web-server to be world accessible.
• Web servers…
• The Birkbeck web server is a UNIX machine called www
• The web site is stored in a hierarchical file structure
• Each School and Department has a directory for their pages
• You can create your own subdirectories

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

Working method…

1. Plan and design pages

2. Create and edit them locally on your PC
3. Test the pages in Web browsers
4. Transfer files to the remote Web server using an FTP package (file transfer
protocol). Some HTML editors have FTP built in.

HTML basics – syntax…

• Tags are defined using angle brackets, with a formatting code inside:
<BR> is a linebreak, <B> is bold
• Tags come in pairs, acting on everything that they enclose: <B>bold
text</B>
• The closing tag always begins with a forward slash /
o Tags can be in upper or lower case
o Tags can be combined
o They must be nested symetrically:
<P><B><I>bold italic</I></B></P>

• Additional tag properties can be set using attributes:

<P>text</P>
<P ALIGN=“center”>text</P>
• One tag can have several attributes, separated by spaces:
<TABLE WIDTH=“580” BORDER=“0” BGCOLOR=“#FFFFCC”>

HTML basics – structure…

• All web pages start with this basic structure of ‘container’ tags
which enclose the entire document:
<HTML>
<HEAD>
<TITLE>Home Page</TITLE>
</HEAD>
<BODY>

all visible content goes here

</BODY>

</HTML> [email protected]

kasper-analytics
 kasperanalytics.com

9123820085

A simple web page…

<HTML>

<HEAD><TITLE>My First Web Page</TITLE>

</HEAD>

<BODY BGCOLOR="#FFFFCC">

<H1>Main Heading</H1>

<H2>Subheading</H2>

<P>This is a very simple web page.</P>

<P>This is a second paragraph</P>

<P>This is a link:<BR>

<A HREF="http://www.bbk.ac.uk/">Birkbeck Home Page</A>

</P>

</BODY>

</HTML>

… as viewed in Internet Explorer

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

2. Getting Started
Objectives Login to the PC network, access the Windows desktop and run the
software to be used in these exercises.

Method: You will login and run the Notepad text editor and Internet Explorer.

2.1 Login to the PC using your username and password.

2.2

Click on the Start button at bottom left corner of the screen and
select Programs, then Accessories. Click once on Notepad to run the
application. A blank document will be opened.

In Notepad, open the Format menu and check

that Word Wrap has a tick beside it, as shown.
If not, click once on Word Wrap to turn it on.

2.3 Start Internet Explorer by double clicking on the desktop icon, shown left, or use
the Start menu. The opening screen will resemble Figure

Note Switch between applications by clicking on the status bar buttons at the
bottom of the screen.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

3. Creating a Simple HTML Document

Objectives To create and view a simple HTML document.

Method You will create a simple HTML document using Notepad, then view
the document using a WWW browser.

Comments Notepad is a simple MS Windows editor which can be used to create

and edit text files.

3.1 In the Notepad window type the following text:

<HTML>

<HEAD>

<TITLE>My First HTML Document</TITLE>

</HEAD>

<BODY>

This is my first HTML document.

</BODY>

</HTML>

Note Notice that you have typed in some HTML tags, which are enclosed in
angle brackets e.g. <TITLE>

3.2 Within Notepad, select the File menu and choose the Save option. Choose the
N: drive (for example) and name the file test.htm Make sure that Save as type: is
set to Text Files (*.txt)

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

Note Make a note of where you save your file. You may wish to create a folder in
your My documents folder for the files created in these exercises.

3.3 Switch to the Internet Explorer window (by clicking the button on the status bar
at the bottom edge of the screen)

3.4 From the File menu click on Open

In the Open window, click on the Browse… button, In the Open window, select the
test.htm file you just saved (you will need to select the N: drive at the top of the
window) and click on the Open button.

In the Open Page window, click on the Open button to open the page in Internet
Explorer.

The document will be displayed as shown below.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

4. Adding Text to your HTML Document

Objectives To add some paragraphs to your simple HTML document.

Method You will add some paragraphs separated by carriage returns, and
view them. You will then add the <P> paragraph tag.

Comments Paragraphs are delimited by the <P> and </P> tags

4.1 Return to the Notepad window and add only the text shown in bold to your
document (replace John Smith with your own name):

<HTML>

<HEAD>

<TITLE>My First HTML Document</TITLE>

</HEAD>

<BODY>

This is my first HTML document.

I have created this document using Notepad.

John Smith

</BODY>

</HTML>

Save the file, (File menu, Save option).

4.2 Switch to Internet Explorer and click on the Reload icon on the button bar near
the top of the screen.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

4.3 Return to Notepad. Enclose each paragraph with the <P> and </P> start and
end tags:

<P>This is my first HTML document.</P>

<P>I have created this document using Notepad. </P>

<P>John Smith</P>

Save the file.

4.4 Return to Internet Explorer and select the Reload option (F5). Notice that the
three paragraphs are now displayed correctly.

Note WWW browsers use the <P> tag to identify paragraphs. Carriage returns
normally have no effect on the way in which an HTML document is
displayed.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

5. Adding Headers to your HTML Document

Objectives To use the header tags in your HTML document.

Method You will add the <H1> and <H2> header tags.

Comments Headings can be delimited using the <Hn> and </Hn> tags. There are
six different levels, from <H1> the largest, down to <H6>. Header tags
should not be nested.

5.1 In Notepad, add only the text shown in bold to your document:

<HTML>

<HEAD>

<TITLE>My First HTML Document</TITLE>

</HEAD>

<BODY>

<H1>HTML Authoring Course</H1>

<H2>My First Document</H2>

<P>This is my first HTML document.</P>

<P>I have created this document using Notepad.</P>

<P>John Smith</P>

</BODY>

</HTML>

Then save the file.

5.2 Return to Internet Explorer and Reload your document. Notice how the headers
are displayed differently from the main text.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

6. Using Lists
Objectives To add a bulleted list to your HTML document.

Method You will use the <UL>, <OL> and <LI> tags.

Comments The <UL> … </UL> tags are used to define the start and end of an
unordered list (bulleted). The <OL> … </OL> tags are used to define
the start and end of an ordered list (numbered). The <LI> tag is used
to define list items.

6.1 In Notepad add only the text shown in boldto your document:

<P>I have created this document using Notepad.</P>

<H2>Summary</H2>

<P>So far I have learnt:</P>

<UL>

<LI>How the TITLE tag is displayed</LI>

<LI>The role of the paragraph tag</LI>

<LI>The use of the H1 and H2 tags for headings</LI>

</UL>

<P>I am about to learn the following two things:</P>

<OL>

<LI>About unordered (bulleted) lists</LI>

<LI>About ordered (numbered) lists</LI>

</OL>

Then save the file.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

6.2 Return to Internet Explorer and Reload the document. Notice how the
unordered and ordered lists are displayed.

6.3 Create another ordered list using the <OL>, </OL>, <LI> and </LI> tags.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

7. Task 6 Physical and Logical Tags.

Objectives To use physical and logical formatting tags to create bold and italic
text.

Method You will use <B> (bold), <I> (italic), <STRONG> and <EM> tags.

Comments Physical tags such as <B> and <I> give you control over the
appearance of a document. Logical tags, such as <STRONG> or

<EM>, define the role of the text in a document as well as changing

its appearance.

7.1 Switch to Notepad and add italic <I> and bold <B> tags to the text as shown
below in bold:

<P>This is my <I>first</I> HTML document.</P>

<P>I have created this document using <B>Notepad.</B></P>

Save the file. Switch to Internet Explorer, Reload the document and view the
changes:

7.2 Return to Notepad and replace the italic <I> tags with the emphasis <EM>

tag, and the bold <B> tags with the strong <STRONG> tag, as shown below:

<P>This is my <EM>first</EM> HTML document.</P>

<P>I have created this document using

<STRONG>Notepad.</STRONG></P>

Save the file, switch to Internet Explorer and Reload the document. Notice that the
appearance of the text is the same.

Note Physical formatting tags such as <B> and <I> change the appearance of
text in your document. Logical tags, such as <STRONG> and <EM>, change
the appearance of text too, but they also define the role of the text within
the document.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

This can be important if your page is read by a text reader for the visually
impaired. If an audio-enabled browser encounters a logical tag, <EM> or

<STRONG>, it will interpret its meaning by placing extra emphasis on the

word, whereas physical formatting tags like <B> and <I> will not be
interpreted differently from the rest of the text.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

8. Using Hypertext Links

Objectives To create a hypertext link in your HTML document.

Method You will use the <A> anchor tag to add a link to the Birkbeck College
home page.

Comments The <A> tag is used to create links to other files, either locally or on
computers systems anywhere on the Internet.

8.1 Return to your document in Notepad and add only the text shown below in

bold:

<P>John Smith</P>

<A HREF="http://www.bbk.ac.uk/index.shtml”>Birkbeck College</A>

Save the file and then go back to your WWW browser and select the

Reload option.

Notice how the words Birkbeck College, i.e. the text contained between the <A…>
and </A> tags, is displayed differently from the rest of the text, usually in
underlined blue. If you point the mouse at it the pointer changes to a hand
symbol. This always indicates that you are pointing at a hyperlink that

will take you to another document.

Note Notice that the <A> tag always uses the syntax

<A HREF=“http://domain_name/pathname”>link text</A>

The attribute HREF is a mnemonic for ‘Hypertext REFerence’.

The domain_name is the name of the computer system (Web server) you

wish to access.

The pathname refers to the name of the file you wish to retrieve and the
directory in which it is located.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

8.2 In Internet Explorer, click on the words Birkbeck College. You will be taken to the
college home page, as shown below:

8.3 Open the View menu and click on the Source option. This allows you to

examine the HTML used in the document you are viewing. This is a useful way to
learn new tags and steal ideas. Close the source window (by clicking on the x in
the top right corner) when you have finished.

Click on the browser Back button to return to your document.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

9. Task 8 Adding Images

Objectives To add an image file to your HTML document.

Method You will use the <IMG SRC=“image_filename”> tag to include an

image.

Comments The <IMG SRC=“...”> tag specifies the location of an image. You will
normally use GIF or JPEG image formats in HTML documents.

9.1 Return to Notepad and insert the following text after the <BODY> tag, as shown
below (it may all fit on one line):

<BODY>

<IMG SRC=“http://www.bbk.ac.uk/images/weblogo220x68.gif”
ALT=“Birkbeck, University of London”>

Save the file and then go to your WWW browser. Use the Back option to re- display
your original page and then select the Reload option. The Birkbeck logo will
appear in your document, as shown below.

9.2 Visit the web page http://intra.bbk.ac.uk/web/visualid.html and read the

guidelines on use of the college logo.

9.3 Visit the web page http://www.ncl.ac.uk/images/gifs4us/

Select one of the sets of clipart (by clicking on one of the links to Set-A, Set-B etc.)

9.4 Move the cursor over one of the images and then hold down the right mouse
button. A menu will be displayed (as shown in figure 9-2). Click on the Properties
option.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

You will now see the properties for that picture, including its address

Highlight the address and copy it (use either right-click – Copy or CTRL+C)

Return to Notepad and add the tag: <IMG SRC=“”>

Open the Edit menu and use the Paste option to insert the image’s URL between
the quotes, as in the example shown below (your number will differ):

<IMG SRC=“http://www.ncl.ac.uk/images/gifs4us/Set-B/3.7.gif”>

9.5 Return to the clipart collections and right mouse click on another image. This
time select the Save Picture As.. option, and save it to the same location as your
test.htm file – write your filename below as a reminder; it will be x.x.gif.

My filename is ____________.gif

Add another IMG tag to your page, but this time instead of inserting the full URL,
insert just the filename between the quotes, as in the example below:

<IMG SRC=“2.6.gif”>

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

Note If you refer to an image just by its filename, as above, the image file must
be stored in the same directory as the web page file.

You can also link to images stored in parent directories and subdirectories,
in relation to the location of the HTML file:

<IMG SRC=“images/2.6.gif”>

(The file “2.6.gif” is stored in a subdirectory of the current location, called images)

<IMG SRC=“../2.6.gif”>

(The file “2.6.gif” is stored in the parent directory of the current location)

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

10. Creating a Simple Table

Objectives To create a simple table in your HTML document.

Method You will use a number of basic table tags. These include <TABLE>,

<TR>, <TH> and <TD>.

Comments Tables are a useful tool for improving layout and fitting more
information onto a page. Note that old browsers do not support
them, and that they can cause difficulties for audio-enabled
browsers as used by the visually impaired.

10.1 Return to the Notepad program. Select a suitable place in the body of the
document for placing your table and add the following text:

<TABLE BORDER=“1”>

<TR>

<TH>Contents</TH>

</TR>

<TR>

<TD>Task 1</TD>

<TD>Getting Started</TD>

<TD>Page 1</TD>

</TR>

</TABLE>

The <TABLE> ... </TABLE> tag is a container for the whole table.

The <TR> ... </TR> tags define a table row and within this you use the <TD> ...

</TD> tags to define cells in the row (table data).

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

The <TH> tag defines a heading, making the text inside it bold and centred.

Text, images and other HTML tags can all be included inside a table, but must only
be positioned inside the <TD> ... </TD> or <TH> ... </TH> container tags.

10.2 Save your document. Return to your browser and Reload the page. The table
should now appear in your document as shown below:

10.3 You can merge cells of your table using the COLSPAN attribute in the <TR> and
<TH> tags. Return to your document in Notepad and add the text shown below in
bold to the <TH> tag:

<TH COLSPAN=“3”>

This makes the cell span three columns as shown below:

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

You can use the ALIGN attribute to position data within each <TD> cell. Add more
rows to your table and experiment with COLSPAN and ALIGN attributes, as in the
example row shown below:

<TR>

<TD ALIGN=“right”>Task 2</TD>

<TD ALIGN=“center”>Using Colour</TD>

<TD>Page 2</TD>

</TR>

or try:

<TR>

<TD COLSPAN=“2” ALIGN=“center”>Experiments</TD>

<TD>Page 3</TD>

</TR>

10.4 There are other TABLE attributes you can experiment with.

To set the width of the whole table, add:

<TABLE WIDTH=“50%”> to define as a percentage of the total screen

width

or

<TABLE WIDTH=“580”> to define as an absolute value in pixels.

Note You need to consider all users when setting table widths. The smallest
screen display generally in use measures 800 pixels wide by 600 pixels
high, so it is generally a bad idea to set a width greater than 760 (allowing
for a scroll bar).

To remove the table border, use:

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

<TABLE BORDER=“0”>

To set the spacing between cells (cellspacing) and spacing between the cell
contents and the border (cellpadding), set a distance in pixels, for example:

<TABLE CELLSPACING=“5” CELLPADDING=“10”>

To align cell contents vertically, use:

<TD VALIGN=“top”>

<TD VALIGN=“bottom”>

<TD VALIGN=“middle”>

10.5 Open the URL

http://home.netscape.com/assist/net_sites/table_sample.html

to see several more table examples.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

11. Task 10 Finding Out More

Objectives To find out more about HTML

Method You will access some of the information available on the Web to find
out more about HTML.

Comments Many resources are available to assist Web authors. Some useful
starting points are included here.

11.1 Visit the primary reference site for HTML:

http://www.w3.org/MarkUp/

This is a good place for reading about current developments, and you will
also find the official HTML specifications here.

11.2 Visit the Netskills Training Materials site:

http://materials.netskills.ac.uk/login.html

The Netskills organisation produce a broad range of training materials which can
be used for self training. Birkbeck has a site licence and if you register at this site
you can download the modules. Each module consists of a Powerpoint
presentation and Word workbook and there is a lot there for web authors. To
register to use the materials:

Click on the Register link

Fill out the form, entering Birkbeck College as the organisation. Click on Proceed
with Registration

Scroll down and click on the I agree button.

Enter a username and password (make one up, don't use a real one), then click
on Continue with Registration.

Scroll down and click on the Login button.

You will now see the full list of training modules with brief descriptions.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

Click on the View Module Files button to the left of each title to access the
materials:

Netskills also run excellent HTML authoring workshops, which are highly
recommended. Their current workshop program is listed at:

http://www.netskills.ac.uk/workshops/forthcoming.html

11.3 These sites are also worth a look.

The WebMonkey HTML Teaching Tool:

http://www.hotwired.com/webmonkey/teachingtool/

The NCSA Beginners Guide to HTML:

http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html Web
Design Group reference site:

http://www.htmlhelp.org/

You will find lots more at the Yahoo subject index site: http://dir.yahoo.com/

In the Yahoo index displayed on the left-hand side of the page, click on the
Computers heading, and then on the World Wide Web link on the next page. You’ll
find several categories including HTML and Beginners Guides.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

12. Task 11 Adding a Background Colour

Objectives To familiarise yourself with background colours.

Method You will set the background colour for an HTML document.
Comments Using a background colour can change the impact of your HTML

12.1 Using Notepad, type the following into a new document:

<HTML>

<HEAD>

<TITLE>My Colour HTML Document</TITLE>

</HEAD>

<BODY>

<H2>This is my document</H2>

</BODY>

</HTML>

Save the file, (File menu, Save) as colour.htm

Open the file in Internet Explorer.

12.2 Return to Notepad and replace the <BODY> element with the following:

<BODY BGCOLOR=“#FFDDDD”>

Note the spelling of BGCOLOR. Save the file again, then return to Internet Explorer
and select the Reload button. The background colour should now be pink.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

12.3 In Internet Explorer, open the URL:

http://www.bbk.ac.uk/ITS/html/color/hexrgb.htm

The following page will be displayed:

Return to Notepad and try a few of the colours listed in Fig 11-1 by replacing the
value “#FFDDDD” in the <BODY> tag. The hash-mark # is required.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

13. Task 12 Adding Colour to Text and Links

Objectives To change the colour of your document’s text and hypertext links.
Method You will use a number of <BODY> element attributes. These include

TEXT=“#rrggbb”, LINK=“#rrggbb” and VLINK=“#rrggbb”

Comments (#rrggbb represents a hexadecimal colour value, e.g. #FF0000 is red.

Three pairs of digits are used to specify the proportion of

red/green/blue in a particular colour, hence known as RGB colour
values.)

Setting colours in the BODY tag will change the text and link colours
for the whole page.

13.1 Use Notepad to open the file colour.htm and replace the opening

<BODY> element with the following:

<BODY BGCOLOR=“#FFFFFF" TEXT=“#FF0000”>

Save the file.

13.2 Switch to Internet Explorer and Reload the page. Your document should now
have red text on a white background.

13.3 Return to Notepad and add the following hypertext link to your document,
positioning it inside the <BODY> .. </BODY> tag:

<A HREF=“http://www.netskills.ac.uk/”>Netskills WWW Site</A>

Now add the text shown below in bold to your opening BODY element:

<BODY BGCOLOR=“#FFFFFF" TEXT=“#FF0000” LINK=“#00FF00”>

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

13.4 Return to your browser and Reload the page. The hypertext link to Netskills
should now appear as green.

13.5 Return to Notepad and add the text shown below in bold to the BODY
element:

<BODY BGCOLOR=“#FFFFFF" TEXT=“#FF0000” LINK=“#00FF00”

VLINK=“#CD7F32”>

Save the file.

13.6 Return to Internet Explorer and Reload the page. The Netskills link will now
appear in gold when the link has been visited.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

14. Task 13 Adding Background Images

Objectives To add an image to your HTML document background.

Method You will use the BACKGROUND=“image.gif” attribute of the

BODY tag.

Comments Using an image file as a background allows you to use textured

effects.

14.1 In Notepad, open the file colour.htm and replace the opening <BODY> tag with
the text below:

<BODY

BACKGROUND=“http://www.bbk.ac.uk/ITS/html/color/blue_paper.gif”>

Save the file.

14.2 Return to Internet Explorer and Reload the page. Your page should now have
a blue, textured background.

14.3 In Notepad, replace the image file name ‘blue_paper.gif’ with one of the
following:

yellow_stucco.gif

multidot_paper.gif

pink_fabric.gif

rock.gif

Save the file and view the change in Internet Explorer.

Note Any image can be used as a background, in .gif or .jpg format. Usually it is a
small ‘tile’ that is repeated across the page. A large image will slow the
loading of the page.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

15. Adding local Font Settings

Objectives To change the colour of short segments of text, overriding the main

<BODY TEXT colour setting.

Method You will use the <FONT COLOR=“#rrggbb”> .. </FONT> attribute.

Comments The <FONT> tag is useful for changing the colour of text
independently of the overall page settings within the <BODY> tag. It
can also be used to change the font size and face.

15.1 In Notepad, add the following to the file colour.htm:

<P>This is the default text colour.</P>

<P><FONT COLOR=“#FF33CC”>This colour is set with the FONT

tag.</FONT></P>

Save the file.

15.2 Switch to Internet Explorer and Reload the page. Your document should now
have some pink text where you used the FONT tag.

In Notepad, add the following to your page:

<P><FONT SIZE=“5”>This is size 5 text</FONT></P>

<P><FONT SIZE=“-1”>This is –1 size text</FONT></P>

Save your file, switch to Internet Explorer and Reload the page. You should now
have some large and small text.

Note You can set the font SIZE as a number from 1 (smallest) up to 7, or as a
relative value such as ‘+2’ or ‘-1’, in relation to the default text size (which is
‘3’).

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

15.3 We will now try changing the font face. In Notepad, add the following to your
page:

<P><FONT FACE=“Arial, Helvetica, sans-serif”>This font is

<B>Arial</B></FONT></P>

Save the file, switch to Internet Explorer and Reload the page. The text
above should appear in san-serif style.

Note Not all computers use the same font names. For example Arial, a common
Windows PC font, is often called Helvetica on Macintoshes and ‘sans-serif’
on Unix machines. Therefore, when you use the <FONT FACE attribute it is
advisable to include all the equivalent font names found on different
platforms, separated by commas as in the example above.

15.4 The COLOR, SIZE and FACE attributes of the FONT tag can be combined
together. Try adding the following to your page, or experiment with your own
combination:

<P><FONT COLOR=“#CC3333” SIZE=“4” FACE=“Arial,

Helvetica”>This is dark red, size 4 text</FONT></P>

Save the file and view in Internet Explorer.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

16. Adding Colour to Tables

Objectives To change the background colour of table cells.

Method You will use the BGCOLOR=“#rrggbb” attribute of the <TR>, <TD>

and <TABLE> tags.

Comments Adding background colour to table cells is a useful design technique.

However, this attribute is not recognised by some older browsers so
you should ensure that the page is still readable without the table
background (white text on a dark table background will not show up
if the main page background is also white).

16.1 Use Notepad to add the following to your colour.htm file:

<TABLE WIDTH=“400” BORDER=“0”>

<TR BGCOLOR=“#00CCCC”>

<TD>Row 1, cell 1</TD>

<TD>Row 1, cell 2</TD>

</TR>

<TR>

<TD BGCOLOR=“#66FF66”>Row 2, cell 1</TD>

<TD BGCOLOR=“#00CC99”>Row 2, cell 2</TD>

</TR>

</TABLE>

Save the file.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

16.2 Return to Internet Explorer and Reload the page.

Your page should now display a coloured table, with a turquoise row at the top
and a light and dark green cell in the bottom row.

16.3 In Notepad, remove the BGCOLOR attributes from the <TR> and <TD> tags and
add a BGCOLOR attribute to the main TABLE tag as shown below:

<TABLE BGCOLOR=“#00CC99” WIDTH=“400” BORDER=“0”>

Save the file. Switch to Internet Explorer and Reload the page. The whole table
should now have a green background.

16.4 In Notepad, add a BGCOLOR attribute to the first cell as shown below in bold:

<TABLE BGCOLOR=“#00CC99” WIDTH=“400” BORDER=“0”>

<TR>

<TD BGCOLOR=“#000000”>Row 1, cell 1</TD>

Save your file. Return to Internet Explorer and Reload (F5).

You should see a green table with a single black cell at top left. This illustrates the
way in which individual cell attributes override the settings in the top-level

<TABLE> tag.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

17. Optional Task - Checking Your HTML

Objectives To validate your HTML document.

Method You will use the ‘Web Design Group HTML validation service’ and
learn what a DOCTYPE tag is.

Comments Use of HTML validation (rules checking) is recommended. HTML is a

standard, and the rules concern which tags and attributes may be
used, their syntax, and the ways in which they can be positioned and
nested within a document.

17.1 Return to the WWW browser and type the following address, known as a URL
(Uniform Resource Locator), into the Location box at the top:

http://www.htmlhelp.org/tools/validator/direct.html

Press the <ENTER> key to visit the site. The WDG (Web Design Group) Validator will
be displayed.

Note There have been several versions of HTML, each of which has added new
features. Level 2.0 is an early version that includes only simple tags with no
tables, frames or fancy fonts. Level 3.2 is the version we are using in this
course, and includes tables, frames and font tags. The most recent version
is HTML 4.0, which comes in two flavours - transitional and strict. Because
there are several versions of HTML in use it is good practice to add a
‘DOCTYPE’ tag at the start of your document to show which version you are
using. In particular, HTML validators require one in order to know which set
of rules to apply when checking your document for errors.

17.2 Return to Notepad. At the start of your document, above the opening

<HTML> tag, add the text shown below in bold (this line must be typed exactly as
shown and is case-sensitive):

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2

Final//EN”>

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

<HTML>

This is the DTD or ‘Document Type Declaration’ for HTML Level 3.2

17.3 In Notepad, select your entire document by opening the Edit menu and
choosing the Select All option. Then select the Copy option, to copy your
document to the clipboard.

Switch to Internet Explorer. Block the entire contents of the validation text

17.4 box, as shown below in Fig 8.1. Then overwrite the contents using the Paste
option form the Edit menu, (or by pressing the CTRL + V keys). This will paste the
contents of your HTML document into the validator form.

your
HTML document

17.5 Click on the Validate it! button (you may need to scroll down to see it.) If there
are no errors in your document the following screen will be diplayed (after a short
wait):

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

If your document contains errors, they will be listed with a description.

Note If you receive a list of errors you should make a note of the first one, return
to the validation form (using the browser ‘Back’ button) and correct it. Then
resubmit the document by clicking on the ‘Validate it!’ button again, and
repeat corrections in this way until all errors are removed. Remember to
apply the changes to your original file in Notepad.

Certain errors can cause a whole series of ‘cascading errors’ and very
often, fixing the first one will also correct the others in the list.

• Some HTML editors, such as Softquad’s HotMetal Pro or Macromedia

Dreamweaver, have built-in validators and will always produce valid HTML.
(Not all packages are reliable however, and some produce non- standard
HTML that would not pass a validation test, for example Microsoft Word)

• Most editors will create the opening DOCTYPE tag for you. As we’ve seen in
the previous exercises, a Web page will still display without one so they are
not essential, but must be included if you want to use an online validation
service.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

• You will find other DOCTYPE tags and descriptions of the differences
between versions of HTML (and lots of reference links) at
http://www.htmlhelp.org/tools/validator/doctype.html
• There is another good validator at http://validator.w3.org/ which can be
used to check live pages on a Web server.
• The WebXact validator at http://webxact.watchfire.com/ will analyse web
pages for their accessibility to people with disabilities.

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

18. Web Page Design Guidelines

• Plan what you want to say and do.
• How will the information be used?
o will the pages be printed?
o will the pages be used to ‘springboard’ to other pages.
• How will the information be navigated?
o hierarchical or flat?
• Design a template and reuse it
• Design the pages before writing them.
o ‘storyboarding’
o ‘prototyping’
• Look at other web pages for what is good and bad.
• Consider the use of graphics:
o too much will slow loading of the page.
o too little will result in a dull page
o but no graphics are preferable to bad graphics.
• How will the page look on various platforms, in various browsers, on
different size screens
• Indicate who is responsible for the pages, and the date last modified.
• If appropriate, include a copyright notice.
• Include a link to the Birkbeck home page.
• Provide navigation paths through your pages.
• Be consistent with naming, headings and titles.
• Test all URL references regularly.
• Avoid ‘under construction’ signs. Pages should be completed before
publishing!

Use of the Birkbeck Logo - Web guidelines: http://intra.bbk.ac.uk/web/

Birkbeck Code of Practice for the WWW: http://intra.bbk.ac.uk/regs/webcode.html

Birkbeck Guidelines for Personal Web Pages:

http://intra.bbk.ac.uk/regs/webguide.html

[email protected]

kasper-analytics
 kasperanalytics.com

9123820085

19. HTML Resources

Free Clipart Sites

A few of the many sites where you can download free icons, graphics and
backgrounds for your web pages:

Clip Art Warehouse http://www.clipart.co.uk/

Icon Bazaar http://www.iconbazaar.com/

Animated Image Factory http://www.animfactory.com/

See Yahoo for more sites:

http://dir.yahoo.com/Arts/Design_Arts/Graphic_Design/Web_Page_Design_and
_Lay out/Graphics/

Graphic Banner Generators

Instant Online Banner Creator http://www.crecon.com/oem/littlegraphics/

Meta Tag Generators

Meta Tag Builder

http://vancouver-webpages.com/META/mk-metas.html

[email protected]

kasper-analytics