Ariston Module 8 - Step-By-Step Solutions

ESSENTIAL IT ASSIGNMENTS Web Authoring
Module 8 – Web Authoring

Step-by-step Solutions
To complete the assignments in this module, you need:
 Microsoft Internet Explorer – Web Browser Program
 Microsoft Notepad – Text Editor Program
OR any recognised Web Editor Program (e.g. Macromedia Dreamweaver)
 The Support Files Module 8 folder
 A 3½" diskette
Solutions
Each Web document is displayed showing all of the HTML tags. An explanation of the
HTML in the document is then given. The HTML tags are shown here in upper case letters
to highlight them from the text on the web page. However, HTML tags can be type in upper-
or lower-case letters; the browser ignores the case of the letters. HTML tags are enclosed in
‘<’ and ‘>’ brackets.
Loading the Programs:

During the course of these assignments, you will be asked to load Notepad and Internet
Explorer. The instructions for loading these programs are as follows:
To load the text editor Notepad:

 Click on the Start button.
 Choose the Programs option.
 Choose the Accessories option.
 Click on Notepad.
To load the web browser Microsoft Internet Explorer:

 Click on the Start button.
 Choose the Programs option.
 Click on Internet Explorer.
Any recognised Web Browser program can be used instead of Microsoft Internet Explorer. A
popular alternative is Netscape Navigator.
Assignment 8.1 Assignment 8.2

 Create a simple web page.  Add background and text colours.
 Save the web page to a folder.  Produce a heading.
 View the page using a web browser.  Add spaces after a period.
 Bold and italicise text.

 Use an image as a background.  Produce an unordered list.
 Increase the size of text.  Insert a picture.
 Centre and underline text.

 Produce an ordered list.  Create a hyperlink from an image file.
 Create hyperlinks between web pages.
 Alter link colours. Assignment 8.7
 Create anchors and hyperlinks on the
same web page.
Ariston College www.aristoncollege.com 1


 Create hyperlinks to external websites.  Create a simple table.
 Create a table with merged cells.
Assignment 8.9  Alter the background colour of cells.
 Insert a sound file.
 Create an image map.
Assignment 8.1
Web Document Solution - internet.html:
<HTML>
<HEAD>
<TITLE>The Internet and the World Wide Web</TITLE>
</HEAD>
<BODY>
The Internet
<P>The Internet is the fastest-growing communications medium the world has ever
known. Radio took 37 years to reach 50 million listeners and television took 15 years to
reach the same number of viewers. In contrast, the World Wide Web took just over three
years to acquire 50 million users. There are now 500 million people using the Internet
worldwide. </P>
<P>Almost anything you could possible want to know is out there somewhere on the
World Wide Web. Indeed its best use is for education. This purpose is in fact part of the
very ethos of the Internet. The dissemination of information and the sharing of
knowledge is the reason it was created in the first place. <P>
</BODY>
</HTML>
Step-by-step and Explanation:
Question 1
1. Click on the Start button.
2. Choose the Programs option.
3. Choose the Accessories option.
4. Click on Notepad.
Question 2
1. Choose File > New.

Question 3
1. Enter the following text:
The Internet
The Internet is the fastest-growing communications medium the world has ever known.
Radio took 37 years to reach 50 million listeners and television took 15 years to reach
the same number of viewers. In contrast, the World Wide Web took just over three years
to acquire 50 million users. There are now 500 million people using the Internet
worldwide.
Almost anything you could possible want to know is out there somewhere on the World
Wide Web. Indeed its best use is for education. This purpose is in fact part of the very
ethos of the Internet. The dissemination of information and the sharing of knowledge is
the reason it was created in the first place.
Questions 4 and 5
1. To indicate that this is a web page, we must place the tags - <HTML> and </HTML> -
first and last respectively in the document.
1. Most web pages are divided into two sections: the HEAD and the BODY. The HEAD
section can be used to provide information about the URL (address) of your page as well
as its relationship with other pages at the website. The only element of the HEAD
section that is visible to the user is the title of the web page itself. The start and end of
the HEAD section is denoted by the tags <HEAD> and </HEAD>.
2. The title of our page is ‘The Internet and the World Wide Web’. Notice it appears in the
title bar in the Browser window and not on the web page itself. The title is enclosed
between the tags <TITLE> and </TITLE>.
3. Everything that appears on the web page itself is enclosed between the <BODY> and
</BODY> tags. The </BODY> tag is usually the second last tag on the web page
immediately before </HTML>.
4. To indicate the start and end of a paragraph, we use the <P> and </P> tags. Without
these tags, the page would appear as a mass of text.
Observe the placement of the tags in the internet.html file on the previous page.
Question 6
1. Choose File > Save As.
2. Select 3½ Floppy (A:) in the Save in box.
3. Enter internet.html as the file name.
4. In the Save as type box, ensure the ‘All Files (*.*)’ option is selected.
5. Press Enter.
Question 7
3. Click on Internet Explorer.

Question 8
1. Enter a:\internet.html in the address box:
2. Press the Enter key. The completed web page should appear as follows:
Assignment 8.2
Web Document Solution – internet2.html:
<HTML>
<HEAD>
<TITLE>The Internet and the World Wide Web</TITLE>
</HEAD>
<BODY BGCOLOR = “BLUE” TEXT = “WHITE”>
<H1>The Internet</H1>
<P>The Internet is the fastest-growing communications medium the world has ever
known. &nbsp Radio took 37 years to reach 50 million listeners and television took 15
years to reach the same number of viewers. &nbsp In contrast, the World Wide Web
took just over three years to acquire 50 million users. &nbsp <B>There are now 500
million people using the Internet worldwide</B>.</P>
<P>Almost anything you could possible want to know is out there somewhere on the
World Wide Web. <I>Indeed its best use is for education</I>. &nbsp This purpose is in
fact part of the very ethos of the Internet. &nbsp The dissemination of information and
the sharing of knowledge is the reason it was created in the first place.<P>
</BODY>
</HTML>

Question 1
Question 2
1. Choose File > Open.
2. In the Look in: box, select 3½ Floppy (A:).
3. Select ‘All Files (*.*)’ in the Files of type box.
4. Click on the file:
5. Click on the Open button.
Questions 3
1. To change the background and text colours, the <BODY> tag must be amended as
follows:
<BODY BGCOLOR = “Blue” TEXT = “White”>. BGCOLOR is an attribute of the
<BODY> tag that allows you to change the background colour of a web page while the
TEXT attribute allows you to change the text colour. Notice the American spelling
COLOR.
Question 4
1. To increase the point size of text, we can use the header tags <H1> and </H1>. Any text
enclosed between these tags will be displayed prominently on the web page. Indeed, we
can use any one of five other header tags – <H2>, <H3>, <H4>, <H5> or <H6>. The
simple rule is ‘the higher the number the smaller the heading’. Try experimenting with
each one of these tags. Another method of changing the point size of the text would be
to use the <FONT> tag. We will look at this use of the <FONT> tag in the next
assignment.
Question 5
1. It is conventional to have two spaces after a period or full stop (.) However, even if you
press the space bar twice in Notepad, the Browser will only to display one space. To get
an additional space you must enter the code: &nbsp (non-breaking space). Notice this
code in internet2.html above.
Question 6
1. To display text in bold type on a web page, the tags <B> and </B> must enclose the text.
In our assignment, the text appears as follows:
<B>There are now 500 million people using the Internet worldwide</B>
Question 7
1. To display text in italics on a web page, the tags <I> and </I> must enclose the text. In
our assignment, the text appears as follows:
<I>Indeed its best use is for education</I>
Question 8
3. Enter internet2.html as the file name.
4. In the Save as type box, ensure the ‘All Files (*.*)’ option is selected. Press Enter.

Question 9
Question 10
1. Enter a:\internet2.html in the address box:
2. Press the Enter key. The completed web page should appear as follows:
Assignment 8.3
Web Document Solution – pasteur1.html:
<HTML>
<HEAD>
<TITLE>Louis Pasteur</TITLE>
</HEAD>
<BODY>
Louis Pasteur (1822-1895)
<P>Louis Pasteur was born on December 27, 1822 in Dole, in the region of Jura,
France. &nbsp His discovery that most infectious diseases are caused by germs, known
as the "germ theory of disease", is one of the most important in medical history. &nbsp
His work became the foundation for the science of microbiology and a cornerstone of
modern medicine.
<P>Pasteur's phenomenal contributions to microbiology and medicine can be

summarized as follows. &nbsp Firstly, he championed changes in hospital practices to
minimize the spread of disease by microbes. &nbsp Secondly, he discovered that
weakened forms of a microbe could be used as an immunization against more virulent
forms of the microbe. &nbsp Thirdly, Pasteur found that very small agents transmitted
rabies. &nbsp These agents could not be seen under a microscope, thus revealing the
world of viruses. &nbsp As a result he developed techniques to vaccinate dogs against
rabies and to treat humans bitten by rabid dogs. &nbsp And fourthly, Pasteur developed
"pasteurisation", a process by which harmful microbes in perishable food products are
destroyed using heat, without destroying the food.
</BODY>
</HTML>

Question 1
1. Load Windows Explorer.
2. Click on Drive C: (or on whichever drive the eita folder is installed).
3. Double-click on the eita folder.
4. Double-click on the Support Files subfolder.
5. Double-click on the Support Files Module 8 subfolder.
6. Double-click on the Assignment 8.3 folder.
7. Drag the dark.gif file in the right pane to the 3½” floppy (A:) in the left pane.
Question 2
Question 3
Question 4
Louis Pasteur (1822-1895)
Louis Pasteur was born on December 27, 1822 in Dole, in the region of Jura, France.
His discovery that most infectious diseases are caused by germs, known as the "germ
theory of disease", is one of the most important in medical history. His work became the
foundation for the science of microbiology and a cornerstone of modern medicine.
Pasteur's phenomenal contributions to microbiology and medicine can be summarized

as follows. Firstly, he championed changes in hospital practices to minimize the spread
of disease by microbes. Secondly, he discovered that weakened forms of a microbe
could be used as an immunization against more virulent forms of the microbe. Thirdly,
Pasteur found that very small agents transmitted rabies. These agents could not be
seen under a microscope, thus revealing the world of viruses. As a result he developed
techniques to vaccinate dogs against rabies and to treat humans bitten by rabid dogs.
And fourthly, Pasteur developed "pasteurisation", a process by which harmful microbes
in perishable food products are destroyed using heat, without destroying the food.
Question 5
3. The title of our page is ‘Louis Pasteur’. Notice it appears in the title bar in the browser
window and not on the web page itself. The title is enclosed between the tags <TITLE>
and </TITLE>.

6. To indicate an extra space after a period or full stop (.), enter the &nbsp code.
Observe the placement of the tags in the pasteur1.html file on the previous page.
The web page should appear in the Browser window as follows:
Question 6
3. Enter pasteur1.html as the file name.
5. Press Enter.
Question 7
1. To use an image as a background, we use the BACKGROUND instead of the
BGCOLOR attribute with the BODY tag. The BACKGROUND attribute tiles the image.
This means that the image is displayed the appropriate number of times so as to fill the
screen. In our assignment, we wish to use a small graphic file named ‘dark.gif’ as a
background. The line appears as follows:
<BODY BACKGROUND = “dark.gif” TEXT = “white”>
Question 8
1. In the previous assignment, we used the <H1> and </H1> tags to give prominence to the
document heading. In this assignment, we will use the <FONT> tag together with the
SIZE attribute. The line appears as follows:
<FONT SIZE = "+3">Louis Pasteur (1822-1895)</FONT>
The “+3” is known as a flag. There are 12 font size flags: +6 through +1 and –1 through
–6. +6 is huge while –6 is the smallest.

Question 9
1. To centre text on a web page, it must be enclosed between the <CENTER> and
</CENTER> tags. The text in this assignment appears as follows:
<CENTER><FONT SIZE = "+3">Louis Pasteur (1822-1895)</FONT></CENTER>
Notice the heading is being formatted by two tags: <CENTER> and <FONT>
Question 10
1. To underline text on a web page, the tags <U> and </U> must enclose the text. In our
assignment, the line appears as follows:
<U>His work became the foundation for the science of microbiology and a
cornerstone of modern medicine</U>
Question 11
3. Enter pasteur2.html as the file name.
5. Press Enter.
Question 12
Question 13
1. Enter a:\pasteur2.html in the address box:
2. Press the Enter key.

Assignment 8.4
Web Document Solution – shark1.html:
<HTML>
<BODY>
Great White Shark

<BR>Carcharodon Carcharias
<P>Great white sharks occur in a wide range of sizes, but average between 4.3 and 5.5
metres in length and roughly between 680 and 1,800 kilograms in weight. &nbsp The
largest great white ever documented was caught off the coast of Cuba and measured 6.4
metres in length. &nbsp Although it is not the largest of all sharks, the great white is the
largest predatory shark. &nbsp Some relatively harmless sharks, like the whale shark,
are much larger than the great white.</P>

<P>Great white sharks inhabit temperate waters worldwide, primarily along coastlines.
&nbsp Though not abundant, they are most frequently sighted off the coasts of the
following countries:</P>
<P>United States
<BR>Australia
<BR>South Africa
<P>Scientists can easily identify the teeth of a great white shark. &nbsp The upper teeth
are large, broad, and triangular, while the lower teeth are slightly more slender. &nbsp All
the teeth are serrated. &nbsp Like other sharks, a great white continually looses its teeth
and replaces them with new ones.</P>
<P>Though great white attacks on humans are well documented, they are generally
rare. &nbsp Recent studies suggest that great whites may find humans unpalatable.
&nbsp Attacks probably occur when a shark mistakes a human for a seal or sea lion, the
great white's principal prey.</P>
</BODY>
</HTML>
Question 1
6. Double-click on the Assignment 8.4 folder.
7. Drag the shark.gif file in the right pane to the 3½” floppy (A:) in the left pane.
Question 2
Question 3
Question 4
Great White Shark

Carcharodon Carcharias
Great white sharks occur in a wide range of sizes, but average between 4.3 and 5.5
metres in length and roughly between 680 and 1,800 kilograms in weight. The largest
great white ever documented was caught off the coast of Cuba and measured 6.4
metres in length. Although it is not the largest of all sharks, the great white is the largest
predatory shark. Some relatively harmless sharks, like the whale shark, are much larger
than the great white.

Great white sharks inhabit temperate waters worldwide, primarily along coastlines.
Though not abundant, they are most frequently sighted off the coasts of the following
countries:
United States
Australia
South Africa
Scientists can easily identify the teeth of a great white shark. The upper teeth are large,
broad, and triangular, while the lower teeth are slightly more slender. All the teeth are
serrated. Like other sharks, a great white continually looses its teeth and replaces them
with new ones.
Though great white attacks on humans are well documented, they are generally rare.
Recent studies suggest that great whites may find humans unpalatable. Attacks
probably occur when a shark mistakes a human for a seal or sea lion, the great white's
principal prey.
Question 5
5. To indicate an extra space after a period or full stop (.), enter the &nbsp code.
6. To place Australia and South Africa on separate lines, place the <BR> tag before each
country. The line break tag <BR> ensures that the Browser will display the text on the
next line.
Observe the placement of the tags in the shark1.html file at the beginning of this
assignment solution.
Question 6
1. The title of our page is ‘The Great White Shark’. Notice it appears in the title bar in the
Browser window and not on the web page itself. The title is enclosed between the tags
<TITLE> and </TITLE>.
Question 7
3. Enter shark1.html as the file name.
5. Press Enter.

Question 8
1. To change the background and text colours to midnight blue and gold respectively, the
<BODY> tag must be amended as follows:
<BODY BGCOLOR = “#191970” TEXT = “#FFD700”>. Any one of the following colour
names can be used with BGCOLOR attribute of the body tag: silver, gray (American
spelling), maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta,
yellow and cyan. However, if you wish to use a colour different from those listed, the
hexadecimal code for that colour must be used. A list of colours and their hexadecimal
codes are given at the end of the assignments module in Essential IT Assignments.
Question 9
1. Amend the following lines in the document to appear as primary and secondary
headings:
Great White Shark

<BR>Carcharodon Carcharias
Delete the <BR> tag.
2. When the <H1> and <H2> tags have been inserted, the amended lines should appear as
follows:
<H1>Great White Shark</H1>

<H2>Carcharodon Carcharias</H2>
Question 10
1. Delete the <BR> tags in the following lines:
<BR>Australia
<BR>South Africa
Question 11
1. To display the three countries in bulleted format, the relevant lines on the page should
appear as follows:
<UL>
<LI>United States
<LI>Australia
<LI>South Africa
</UL>
The <UL> and </UL> tags signify the start and end respectively of an Unordered List.
The <LI> or List Item tag marks out each item in the list. A bullet point will appear on the
page where an <LI> tag has been placed. The text should appear in the Browser
window as follows:
 United States
 Australia
 South Africa
If the <OL> tag is used instead of the <UL>, we get an ordered (numbered) list instead
of a bulleted list.

Question 12
1. To insert the picture (with no border) beneath the final paragraph, insert the following line
beneath the final paragraph:
<IMG SRC = “shark.gif” BORDER = 0>
The <IMG > or Image tag is used to place images or graphic elements on a web page.
The SRC or Source attribute of the <IMG > tag specifies the image. A border can be set
around the image using the BORDER attribute of the <IMG> tag. However, we choose
not to place a border around this image and so we set the BORDER attribute to zero.
Question 13
3. Enter shark2.html as the file name.
5. Press Enter.
Question 14
4. Enter a:\shark2.html in the address box:
5. Press the Enter key to see the completed web page.
Assignment 8.5
Question 1
1. Place a fresh disk in the 3½” floppy (A:) drive.
7. Click on the Assignment 8.5 subfolder.
8. Click the folder solar in the right pane and drag it to the 3½” floppy (A:) in the left pane.
Question 2
Question 3
2. Ensure that 3½ floppy (A:) is selected in the Look in: box:
3. Double-click on in the dialog box.

4. Select All Files (*.*) in the Files of type: box:
5. Click on the solar1 file.

6. Click the button:
Question 4
1. The title of our page is ‘Our Solar System’. Notice it appears in the title bar in the
browser window and not on the web page itself. The title is enclosed between the tags
<TITLE> and </TITLE>.
Question 5
1. The <BODY> tag must be edited to appear as follows:
<BODY BACKGROUND = “solarback.gif” TEXT = “#FFFFE0”>
Question 6
1. The heading on the page should be enclosed by the <H1> and </H1> tags as follows:
<H1> What is the solar system? </H1>
Question 7
1. To place the image on the page, insert the following line immediately beneath the
heading produced in question 6:
<IMG SRC = “system.gif” BORDER = 0>
We have decided not to have a border surrounding the image so we set the BORDER
attribute of the <IMG> tag to 0.
Question 8
1. Highlight the <BR> tag before Venus.
2. Press the Delete key.
3. Highlight the <BR> tag before Mars.
4. Press the Delete key.

Question 9
1. Add the following tags to the lines containing Venus and Mars:
<OL>
<LI>Venus
<LI>Mars
</OL>
The <OL> tag indicates to the Browser that an Ordered List is required. The List Item
tag signifies each item to be numbered.
Question 10
1. A hyperlink is a link from one web page to another or from one part of a web page to
another part of the same web page. Clicking on the hyperlink with a mouse activates it.
The idea in this assignment is to create two links:
 The first link will be from the word Venus on your web page to a page called
venus.html in your solar folder.
 The second link will be from the word Mars on your web page to a page called
mars.html in your solar folder.
Both venus.html and mars.html have been prepared by myself and are stored in your
solar folder.
2. We amend the lines containing Venus and Mars as follows:
<OL>
<LI><A HREF = “venus.html”>Venus</A>
<LI><A HREF = “mars.html”>Mars</A>
</OL>
We place the tag <A HREF = “venus.html”> before Venus. The closing </A> tag is
placed after Venus. The text enclosed between the <A HREF> and </A> tags is our link.
A HREF stands for Anchor Hyperlink REFerence. It is used here for specifying the name
of the page to which we wish to link. In this case, if we click on the word Venus in the
browser window, we will be taken to the venus.html page. We will see another use for
A HREF in Assignment 8.7.
Question 11
1. We place the tag <A HREF = “mars.html”> before Mars. The closing </A> tag is placed
after Mars. If we click on the word Mars in the Browser window, we will be taken to the
mars.html page.
Question 12
1. The hyperlink text is underlined and is a default blue colour. The problem here is that
the blue text will clash with the background colour, as the latter is also mainly blue. The
<BODY> tag, however, has three attributes to help us with the hyperlink’s text colours:
 LINK – This allows us to change the colour of links that have not yet been visited.
 VLINK - This allows us to change the colour of links that have already been visited.
 ALINK – This allows us to change the colour of a link when the user clicks on it.
2. In this assignment, we amend the <BODY> tag as follows:
<BODY BACKGROUND = “solarback.gif” TEXT = “#FFFFE0” LINK = “#90EE90” ALINK

= “#87CEFA” VLINK = “#FFD700”>
The new link, active link, visited link colours of Venus and Mars will appear as light green
(90EE90), light sky blue (87CEFA) and gold (FFD700) respectively.

Question 13
2. Select 3½ Floppy (A:) in the Save in box:
4. Enter solar2.html as the file name.
5. In the Save as type box, ensure the ‘All Files (*.*)’ option is selected:
6. Click on the button.
Question 14
4. Enter a:\solar\solar2.html in the address box:

6. Click on the Venus and Mars links to see venus.html and mars.html respectively.
Assignment 8.6
Question 1
1. Place a fresh disk in the 3½” floppy (A:) drive.
8. Click the folder canaries in the right pane and drag it to the 3½” floppy (A:) in the left
pane.
Question 2
Question 3

5. Click on the canaries1 file.

6. Click the button.
Question 4
1. To change the background and text colours to light sky blue and midnight blue
respectively, the <BODY> tag must be amended as follows:
<BODY BGCOLOR = “#87CEFA” TEXT = “#191970”>.
Question 5
1. The heading on the page should be enclosed by the <H1> and </H1> tags as follows:
<H1> Canary Islands </H1>
Question 6
1. To place the image on the page, insert the following line immediately beneath the
heading produced in question 5:
<IMG SRC = “canaries.gif” BORDER = 1 ALT = “Map of the Canary Islands”>
We have decided to have a border width of 1 pixel surrounding the image. Sometimes,
visitors to a web page may have the graphics facility of their web browser turned off.
This means that they will be unable to see any graphics on a web page only the text.
The ALT attribute of the <IMG> tag enables you to tell visitors to your page the nature of
a particular graphic image if they have the graphics facility of their web browser turned
off.

Question 7
1. The section of the web page containing the list of islands should be amended as follows:
<UL>
<LI><A HREF = “gran.html”>Gran Canaria</A>
<LI><A HREF = “fuerteventura.html”>Fuerteventura</A>
<LI><A HREF = “lanzarote.html”>Lanzarote</A>
<LI><A HREF = “tenerife.html”>Tenerife</A>
<LI><A HREF = “lapalma.html”>La Palma</A>
<LI><A HREF = “gomera.html”>Gomera</A>
<LI><A HREF = “hierro.html”>Hierro</A>
</UL>
2. The name of each island is a link, when a link is clicked in the web browser window the
user will be taken to the relevant web page.
Question 8
4. Enter canaries2.html as the file name.
Question 9
4. Enter a:\canaries\canaries2.html in the address box:
Question 10
1. Click on the island names in the list and observe the working links. To return to the
home page from one of the island web pages, click on BACK button in the toolbar (if you
are using Microsoft Internet Explorer).
Question 11
1. Using Notepad, choose File > Open.
5. Click on the gran file. There are two gran files in the folder – a web document
(gran.html) and an image file (gran.gif). You must click on the web document.

Question 12
1. Amend the line immediately before the </BODY> tag at the bottom of the web page:
<IMG SRC = “home.gif” BORDER = 0> to appear as follows:
<A HREF = “canaries2.html”><IMG SRC = “home.gif” BORDER = 0></A>
You are creating a hyperlink from the image home.gif to the home page
canaries2.html.
Question 13
1. Choose File > Save.
Question 14
1. Open each of the other 6 island files in turn - fuerteventura.html, lanzarote.html,
tenerife.html, lapalma.html, gomera.html and hierro.html and amend the:
<IMG SRC = “home.gif” BORDER = 0> to be:
<A HREF = “canaries2.html”><IMG SRC = “home.gif” BORDER = 0></A>
After re-saving each file test the new link in the web browser window. Are you returned
to the home page canaries2.html in each case?
Assignment 8.7
Question 1
1. Ensure that there is a disk in the 3½” floppy (A:) drive.
8. Click the folder nations in the right pane and drag it to the 3½” floppy (A:) in the left
pane.
Question 2
Question 3
5. Click on the nations1 file.

Question 4
1. To change the background and text colours to light yellow and dark green respectively,
the <BODY> tag must be amended as follows:
<BODY BGCOLOR = “#FFFFE0” TEXT = “#006400”>
Question 5
1. To change the font to ‘Arial’, insert the following tag beneath the <BODY> tag:
<FONT FACE = “Arial”>
The FACE attribute is used with the <FONT> tag to change the font. Place the </FONT>
tag immediately before the </BODY> tag at the bottom of the document.
Question 6
1. Enclose the heading ‘Nations of the World’ between the <H1> and </H1> tags:
<H1>Nations of the World</H1>
Question 7
1. Place the cursor beneath the final paragraph.
2. Enter the following line:
<IMG SRC = “button.gif” BORDER = 0>
3. To centre the button on the page, amend the line as follows:
<CENTER><IMG SRC = “button.gif” BORDER = 0></CENTER>
Question 8
1. An anchor is the point on the page to which the cursor jumps when you click on a link.
Place each of the following tags before the country name at the start of the paragraph on
each country and not before the list of countries at the top of the page:
<A NAME = “country1”>Nigeria

<A NAME = “country2”>Japan
<A NAME = “country3”>Brazil
<A NAME = “country4”>Peru
<A NAME = “country5”>Poland
<A NAME = “country6”>New Zealand
A NAME stands for ‘Anchor Name’. We can choose any name we wish; here we have
decided on anchor names country1, country2, country3, country4, country5 and
country6. A closing </A> tag is not required here.
Question 9
1. To establish hyperlinks from the list of countries at the top of the page to links to their
respective anchors further down the page, add the following tags:
<P><A HREF = “#country1”>Nigeria</A>

<BR><A HREF = “#country2”>Japan</A>
<BR><A HREF = “#country3”>Brazil</A>
<BR><A HREF = “#country4”>Peru</A>
<BR><A HREF = “#country5”>Poland</A>
<BR><A HREF = “#country6”>New Zealand</A>

The idea is that when a country name is clicked in the list of countries, you will be
brought to information on that country further down the page i.e. once you click the link
you jump to the relevant anchor.
Notice in this exercise, we are linking to anchors on the same page and not to other
pages in the website. Observe the ‘#’ symbol before each country. This is only put in
the link and not in the anchor.
Question 10
1. To place a ‘top’ anchor before ‘Nations of the World’, make the following addition to the
line:
<A NAME = “top”><H1>Nations of the World</H1>
Question 11
1. To create a link from the button at the bottom of the page to the ‘top’ anchor, make the
following addition to the line:
<CENTER>
<A HREF = “#top”><IMG SRC = “button.gif” BORDER = 0></A>
</CENTER>
Question 12
4. Enter nations2.html as the file name.
Question 13
4. Enter a:\nations\nations2.html in the address box:
Question 14
Click on each of the countries at the top of the document to test the links and anchors. Do
you jump to the correct point in the page when you click a link? If not, why?

Assignment 8.8
Question 1
8. Click the folder pc in the right pane and drag it to the 3½” floppy (A:) in the left pane.
Question 2
Question 3
5. Click on the pc1 file.
Question 4
1. Place the following line after the <BODY> tag:
<FONT FACE = "VERDANA" SIZE = "-1">
The FACE and SIZE attributes of the <FONT> tag allow you to alter the font type and
size of the text. This will apply to the text in the entire document.
Question 5
1. Amend the heading as follows:
<H3>The Personal Computer</H3>
This heading will now be a different size to the other text on the page. These tags
override the setting in question 4 on this line only.
Question 6
1. Insert the following line beneath the heading:
<IMG SRC = "pc.gif" BORDER = 0 ALT = "Image of Personal Computer">
We have no border around the image and the alternative text ‘Image of Personal
Computer’ will appear if one views the web page with the graphics facility disabled.
2. When we add the <CENTER> and </CENTER> tags to centre the heading and image,
these lines will appear as follows:

<CENTER>
<H3>The Personal Computer</H3>
<IMG SRC = "pc.gif" BORDER = 0 ALT = "Image of Personal Computer">
</CENTER>
Question 7
1. Amend the text ‘hardware and software’ in the first paragraph to appear as follows:
<A HREF = "hardware.html">hardware</A> and <A

HREF = "software.html">software</A>
2. The words hardware and software will now act as hyperlinks to the files hardware.html
and software.html respectively.
Question 8
1. Choose File > Save As. The following dialog box will appear:
2. Enter pc2.html in the File name: box.
3. In the Save as type: box, ensure the ‘All Files (*.*)’ option is selected:
Question 9
1. Choose File > Open:
2. Select in the dialog box.
3. Click the button
Question 10
1. Edit Home | Software at the bottom of the web page to appear as follows:
<A HREF = "pc2.html">Home</A>|<A HREF = "software.html">Software</A>
2. This line creates hyperlinks from the Home and Software words to the files pc2.html and
software.html respectively.
Question 11
Question 12
3. Click the button
Question 13
1. Edit Home | Hardware at the bottom of the web page to appear as follows:
<A HREF = "pc2.html">Home</A>|<A HREF = "hardware.html">Hardware</A>
2. This line creates hyperlinks from the Home and Hardware words to the files pc2.html
and hardware.html respectively.
Question 14

Question 15
3. Click the button
Question 16
1. Edit the text ‘Dell and IBM’ to appear as follows:
<A HREF = "http://www.dell.com">Dell</A> and <A

HREF = "http://www.ibm.com">IBM</A>.
2. This creates hyperlinks from the words Dell and IBM to the Dell and IBM websites on the
World Wide Web. This is the first time that you have created hyperlinks to external
websites.
Question 17
Question 18
3. Click the button
Question 19
1. Edit the text ‘Microsoft and Macromedia’ to appear as follows:
<A HREF = "http://www.microsoft.com">Microsoft</A> and <A

HREF = "http://www.macromedia.com">Macromedia</A>
2. This creates hyperlinks from the words Microsoft and Macromedia to the Microsoft and
Macromedia websites on the World Wide Web.
Question 20
Choose File > Save.
Question 21
4. Enter a:\pc\pc2.html in the address box:

Question 22
1. Click on the hardware and software hyperlinks. Click the hyperlinks on these pages.
Test each of the:
a) Internal hyperlinks – ‘Home, Hardware and Software’.
b) External hyperlinks – ‘Dell, IBM, Microsoft and Macromedia’.
Assignment 8.9
Question 1
8. Click the folder beatles in the right pane and drag it to the 3½” floppy (A:) in the left
pane.
Question 2
Question 3
5. Click on the beatles1 file.
Question 4
1. Insert the following line beneath the <BODY>:
<IMG SRC = "logo.gif" BORDER = 0 ALT = "Beatles’ Logo">
We have no border around the image and the alternative text Beatles’ Logo will appear if
one views the web page with the graphics facility of the web browser disabled.
Question 5
1. Insert the following lines beneath the Beatles Logo:
<P>
<IMG SRC = "beatles.jpg" BORDER = 0 ALT = "Beatles’ Photograph">
We have no border around the image and the alternative text Beatles’ Photograph will
appear if one views the web page with the graphics facility disabled.

Question 6
1. Add the <CENTER> and </CENTER> tags before the first image and beneath the
second image respectively as follows:
<CENTER>
<IMG SRC="logo.gif" BORDER=0 ALT="Beatles' Logo">
<P>
<IMG SRC="beatles.jpg" BORDER=0 ALT="Beatles' Photograph">
</CENTER>
Question 7
1. To add a midi version of the Beatles’ hit I Want to Hold Your Hand as background sound
to the page, add the following line beneath the <BODY> tag:
<BGSOUND SRC="hand.mid">
2. This section of HTML code should now appear as follows:
<BODY>
<BGSOUND SRC="hand.mid">
<CENTER>
<IMG SRC="logo.gif" BORDER=0 ALT="Beatles' Logo">
<P>
<IMG SRC="beatles.jpg" BORDER=0 ALT="Beatles' Photograph">
</CENTER>
Question 8
1. To create hyperlinks from John, Paul, George and Ringo at the bottom of the web page
to the relevant html files in the beatles folder, amend this section as follows:
<A HREF="john.html">John</A>
|
<A HREF="paul.html">Paul</A>
|
<A HREF="george.html">George</A>
|
<A HREF="ringo.html">Ringo</A>
2. All of this text can appear on one line but we decide to split it up into 7 lines in order to
make it more legible.
Question 9
Choose File > Save As.
2. Enter beatles2.html in the File name: box.
Question 10
1. We will use the Image Map program, Mapedit, to produce the image map. The latter
shareware program can be downloaded from www.boutell.com.
2. Once Mapedit is installed on your computer, choose:
Start > Programs > Mapedit > Mapedit.
3. The following dialog box will appear:

4. Choose File > Open HTML document.

9. Click on in the dialog box.
10. Click .
12. Select the beatles.jpg file in the dialog box and click the OK button.

14. Click the icon in the toolbar.

15. Place the mouse pointer on Paul’s nose (Top left Beatle in the photograph).
16. Drag the mouse outwards so the circle will cover Paul’s face.
17. Click the left mouse button to halt the drawing of the circle.
19. Enter paul.html in the top box as shown below:

20. Click the OK button. Congratulations! You have just set up a hyperlink from Paul’s face
in the picture to the file paul.html.
21. Repeat steps 14 to 20 inclusive to produce hyperlinks from Ringo (Top right Beatle in the
photograph), George (Bottom left Beatle in the photograph) and John (Bottom right
Beatle in the photograph) to the files ringo.html, george.html and john.html
respectively.
Question 11
Question 12
4. Enter a:\beatles\beatles2.html in the address box:

6. Click on each face in the photograph to test the hyperlinks.

Question 13
1. In Notepad, choose File > Open.
Question 14
1. Edit the following line:
<IMG SRC = "home.gif" BORDER = 0>
So it appears as follows:
<A HREF = "beatles2.html"><IMG SRC = "home.gif" BORDER = 0></A>
Question 15
Question 16
1. In the paul.html file, edit the following line:
Re-save the file.
2. In the george.html file, edit the following line:
Re-save the file.
3. In the ringo.html file, edit the following line:
Re-save the file.
Question 17
4. Enter a:\beatles\beatles2.html in the address box:


6. Click on each face in the photograph to test the hyperlinks. After each separate Beatle
page has loaded click the HOME button at the bottom of the web page. What does it
do?
Assignment 8.10
TASK 1:
Question 1
1. Choose Start > Run.
2. When the dialog box appears, type explorer into the box:
3. Click the OK button.

4. Click on 3½ floppy (A:).
5. Choose File > New > Folder.
6. Enter tables as the new name for the folder.
Question 2
Question 3
1. Type the following:
<HTML>
<HEAD>
<TITLE>Countries of the World</TITLE>
</HEAD>
<BODY>
<HR>
The <HR> tag produces a horizontal rule running the width of the screen.

Question 4
1. Type the following text beneath the <HR> tag:
<H2>Countries of the World</H2>
Question 5
1. Type another <HR> tag beneath the previous line. You now have a horizontal rule
above and one below your main heading.
Question 6
1. The HTML tags required to set the table out are now shown:
<TABLE BORDER = 1>

<TR>
<TD ALIGN = LEFT>Country
<TD ALIGN = CENTER>Capital
<TD ALIGN = CENTER>Population
<TR>
<TD ALIGN = LEFT>Britain
<TD ALIGN = CENTER>London
<TD ALIGN = CENTER>60 Million
<TR>
<TD ALIGN = LEFT>Germany
<TD ALIGN = CENTER>Berlin
<TR>
<TD ALIGN = LEFT>Ireland
<TD ALIGN = CENTER>Dublin
</TABLE>
Explanation:
1. The <TABLE> and </TABLE> tags at the beginning and end of the section define the
table.
2. To produce a grid on the table we must specify a border width. BORDER is also an
attribute of the <TABLE> tag and we have set it to one pixel.
3. To specify a new row in a table, we must use the <TR> tag (Table Row).
4. Each time we wish to create a new cell or box within a row, we must use the <TD> tag
(Table Data).
5. The <TR> and <TD> can take a number of attributes. In our table, we use the ALIGN
attribute with the <TD> tag to align data within cells.
Question 7
1. On our web page, place:
a) The <CENTER> tag before the <TABLE> tag.
b) The </CENTER> tags after the </TABLE> tag.

Question 8
1. Choose File > Save As. Enter country1.html in the File name: box.
Question 9
Question 10
1. Enter a:\tables\country1.html in the address box:
Question 11
1. We insert a new row above the first row in the table. We also want to merge the three
cells in this new row into one.
2. We add the follow two lines directly beneath <TABLE BORDER = 1>:
<TR>
<TD COLSPAN = "3" ALIGN = CENTER>European Countries
3. The <TR> tag gives us the new row.

4. <TD COLSPAN = "3" ALIGN = CENTER> gives us a new cell that spans across three
columns. The data - European Countries - in this new wide cell will be centred.
Question 12
2. Enter country2.html in the File name: box.
Question 13
4. Enter a:\tables\country2.html in the address box:

TASK 2:
Question 1

<HTML>
<HEAD>
<TITLE>Car Sales Figures (1999-2001)</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER =1 WIDTH = 60%>
<TR>
<TD COLSPAN = 4 ALIGN = CENTER><FONT SIZE = "+2">Car Sales Figures (1999-
2001)</FONT>
<TR>
<TH ALIGN = LEFT WIDTH = 40%>Vendor
<TH>1999
<TH>2000
<TH>2001
<TR>
<TD>AutoCare Ltd
<TD ALIGN = CENTER>3200
<TR>
<TD>Parnell Motors Ltd
<TR>
<TD>Tynan Cars Ltd
</TABLE>
</CENTER>
</BODY>
</HTML>
Explanation:
a) The table is centred horizontally on the web page using the <CENTER> and
</CENTER> tags.
b) The table is defined using the <TABLE> tag. Notice we have set the WIDTH attribute
to 60%. This means that the table width will take up 60% of the width of the browser
window.
c) As in the last task, the <TR> tag specifies a new row.

d) The <TH> or Table Heading tag is most frequently used to specify headings in a
table. It is very similar to the <TD> tag in that it sets up a new cell or box in the table.
However, it differs from the <TD> tag in that the data in a cell will be automatically
centred and displayed in bold type.
e) Notice that we have specified a width of 40% for the first cell using the <TH> tag.
This means that this cell with take up 40% of the width of the table.
f) The <TD> tag is used to create a new cell for ordinary data.
Question 2
1. Amend the BODY tag so it appears as follows:
<BODY BGCOLOR = "#191970" TEXT = "#FFD700">
This sets the background colour and text colour of the web page to midnight blue and
gold respectively.
Question 3
1. Amend the line:
<TD COLSPAN = 4 ALIGN = CENTER><FONT SIZE = "+2"> Car Sales

Figures (1999-2001)</FONT>
To appear as follows:
<TD COLSPAN = 4 ALIGN = CENTER BGCOLOR = "#006400">

<FONT SIZE = "+2">Car Sales Figures (1999-2001)</FONT>
Explanation:
The COLSPAN attribute is set to 4, this ensures that the cell will span over four columns
in the table. The CENTER attribute allows the text - Car Sales Figures - to appear
centred in the cell. To change the background colour of the cell, we use the BGCOLOR
attribute of the <TD> tag. The Font size is set to “+2”.
Question 4
1. Choose File > Save As. The following dialog box should appear:
3. Enter car.html in the File name: box.
Question 5
4. Enter a:\tables\car.html in the address box and then press Enter:

TASK 3:
Question 1
<HTML>
<HEAD>
<TITLE>
Chester College - Student Numbers
</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER =1 WIDTH = 100%>

<TR>
<TD COLSPAN = 4 ALIGN = CENTER><FONT SIZE = "+2">Chester College - Student
Numbers</FONT>
<TR>
<TH COLSPAN = 2>Computer Science
<TH COLSPAN = 2>Medicine
<TR>
<TD ALIGN = CENTER>Men
<TD ALIGN = CENTER>Women
<TD ALIGN = CENTER>Men
<TD ALIGN = CENTER>Women
<TR>
<TR>
<TD COLSPAN = 4 ALIGN = CENTER><I>More Women take Medicine while more Men
take Computing</I>
</TABLE>
</CENTER>
</BODY>
</HTML>
Explanation:
a) To create the table, we must use the <TABLE> tag. We want the table to span the
width of the screen so we use the WIDTH attribute again. The latter is set to 100%.
The BORDER attribute is set to 1 pixel to ensure we get the table grid.
b) To obtain a new row, we use the <TR> tag.

c) The first row is made up of one cell spanning across 4 columns. To achieve this
effect, the COLSPAN attribute of the <TD> tag is set to ‘4’. The ALIGN attribute of
the <TD> tag is set to CENTER – any text will be centred in the cell.
d) On the second row of the table, we have two cells containing table headings. Each
cell spans across two columns. Using the <TH> tags and setting the COLSPAN
attribute to ‘2’ achieves the effect.
e) As in the previous tasks, the <TD> tag is used to create cells for ordinary data.
f) The row at the bottom of the table is just one complete cell. Using the <TD> tag and
setting the COLSPAN attribute to ‘4’ achieves the effect. The CENTER attribute is
also used here to centre the text in the cell. Using the <I> and </I> tags, the text is
also italicised.
Question 2
1. To obtain gold and dark green as the text and background colours respectively, alter the
BODY tag to appear as follows:
<BODY BGCOLOR = "#006400" TEXT = "#FFD700">
Question 3
1. To obtain dark red as the text colour for the table heading, alter the line:
<TD COLSPAN = 4 ALIGN = CENTER><FONT SIZE = "+2"> Chester

College - Student Numbers</FONT>
To appear as follows:
<TD COLSPAN = 4 ALIGN = CENTER BGCOLOR = "#8B0000"> <FONT

SIZE = "+2">Chester College - Student Numbers</FONT>
Question 4
3. The following dialog box should appear:
4. Enter chester.html in the File name: box.
Question 5
4. Enter a:\tables\chester.html in the address box and then press Enter:

Ariston Module 8 - Step-By-Step Solutions

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Ariston Module 8 - Step-By-Step Solutions

Hochgeladen von

Copyright:

Verfügbare Formate

ESSENTIAL IT ASSIGNMENTS Web Authoring

Module 8 – Web Authoring

Loading the Programs:

To load the text editor Notepad:

To load the web browser Microsoft Internet Explorer:

Assignment 8.1 Assignment 8.2

Assignment 8.3 Assignment 8.4

Assignment 8.5 Assignment 8.6

Ariston College www.aristoncollege.com 1

Assignment 8.8 Assignment 8.10

Step-by-step and Explanation:

Ariston College www.aristoncollege.com 2

Ariston College www.aristoncollege.com 3

<BODY BGCOLOR = “BLUE” TEXT = “WHITE”>

Ariston College www.aristoncollege.com 4

Step-by-step and Explanation:

<I>Indeed its best use is for education</I>

Ariston College www.aristoncollege.com 5

Louis Pasteur (1822-1895)

<P>Pasteur's phenomenal contributions to microbiology and medicine can be

Ariston College www.aristoncollege.com 6

Step-by-step and Explanation:

Louis Pasteur (1822-1895)

Pasteur's phenomenal contributions to microbiology and medicine can be summarized

Ariston College www.aristoncollege.com 7

The web page should appear in the Browser window as follows:

<BODY BACKGROUND = “dark.gif” TEXT = “white”>

<FONT SIZE = "+3">Louis Pasteur (1822-1895)</FONT>

Ariston College www.aristoncollege.com 8

<CENTER><FONT SIZE = "+3">Louis Pasteur (1822-1895)</FONT></CENTER>

2. Press the Enter key.

Great White Shark

Ariston College www.aristoncollege.com 9

Step-by-step and Explanation:

Great White Shark

Ariston College www.aristoncollege.com 10

Ariston College www.aristoncollege.com 11

Great White Shark

Delete the <BR> tag.

<H1>Great White Shark</H1>

Ariston College www.aristoncollege.com 12

<IMG SRC = “shark.gif” BORDER = 0>

5. Press the Enter key to see the completed web page.

Ariston College www.aristoncollege.com 13

4. Select All Files (*.*) in the Files of type: box:

5. Click on the solar1 file.

<BODY BACKGROUND = “solarback.gif” TEXT = “#FFFFE0”>

<H1> What is the solar system? </H1>

<IMG SRC = “system.gif” BORDER = 0>

Ariston College www.aristoncollege.com 14

2. In this assignment, we amend the <BODY> tag as follows:

<BODY BACKGROUND = “solarback.gif” TEXT = “#FFFFE0” LINK = “#90EE90” ALINK

Ariston College www.aristoncollege.com 15

5. Press the Enter key to see the completed web page.

3. Double-click on in the dialog box.

Ariston College www.aristoncollege.com 16

4. Select All Files (*.*) in the Files of type: box:

5. Click on the canaries1 file.

<BODY BGCOLOR = “#87CEFA” TEXT = “#191970”>.

<H1> Canary Islands </H1>

<IMG SRC = “canaries.gif” BORDER = 1 ALT = “Map of the Canary Islands”>

Ariston College www.aristoncollege.com 17

4. Select All Files (.) in the Files of type: box:

4. Select All Files (.) in the Files of type: box: