ariston module 8 - step-by-step solutions

8/8/2019 ariston Module 8 - Step-by-step Solutions

1/39

E S S E N T I A L I T A S S I G N M E N T S Web Authoring

Module 8 Web AuthoringStep-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 8folder

A 3" diskette

SolutionsEach Web document is displayed showing all of the HTML tags. An explanation of theHTML in the document is then given. The HTML tags are shown here in upper case lettersto 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 brackets.

Loading the Programs:During the course of these assignments, you will be asked to load Notepadand InternetExplorer. The instructions for loading these programs are as follows:

To load the text editorNotepad:

Click on the Startbutton.

Choose the Programs option.

Choose theAccessories option.

Click on Notepad.

To load the web browserMicrosoft Internet Explorer: Click on the Startbutton.

Choose the Programs option.

Click on Internet Explorer.

Any recognised Web Browser program can be used instead ofMicrosoft Internet Explorer.A popular alternative is Netscape Navigator.

Assignment 8.1

Create a simple web page.

Save the web page to a folder. View the page using a web browser.

Assignment 8.2

Add background and text colours.

Produce a heading. Add spaces after a period.

Bold and italicise text.

Assignment 8.3

Use an image as a background.

Increase the size of text.

Centre and underline text.

Assignment 8.4

Produce an unordered list.

Insert a picture.

Assignment 8.5

Produce an ordered list.

Create hyperlinks between web pages. Alter link colours.

Assignment 8.6

Create a hyperlink from an image file.

Assignment 8.7

Create anchors and hyperlinks on the

Ariston College www.aristoncollege.com 1


2/39


same web page.

Assignment 8.8

Create hyperlinks to external websites.

Assignment 8.9 Insert a sound file.

Create an image map.

Assignment 8.10

Create a simple table.

Create a table with merged cells.

Alter the background colour of cells.

Assignment 8.1

Web Document Solution -internet.html:

The Internet and the World Wide Web

The Internet

The Internet is the fastest-growing communications medium the world has everknown. Radio took 37 years to reach 50 million listeners and television took 15 years toreach the same number of viewers. In contrast, the World Wide Web took just over threeyears to acquire 50 million users. There are now 500 million people using the Internetworldwide.

Almost anything you could possible want to know is out there somewhere on theWorld Wide Web. Indeed its best use is for education. This purpose is in fact part of thevery ethos of the Internet. The dissemination of information and the sharing ofknowledge is the reason it was created in the first place.

Step-by-step and Explanation:

Question 1

1. Click on the Startbutton.2. Choose the Programs option.

3. Choose theAccessories option.

4. Click on Notepad.

Question 2

1. Choose File > New.



3/39


Question 31. 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 reachthe same number of viewers. In contrast, the World Wide Web took just over three yearsto acquire 50 million users. There are now 500 million people using the Internetworldwide.

Almost anything you could possible want to know is out there somewhere on the WorldWide Web. Indeed its best use is for education. This purpose is in fact part of the veryethos of the Internet. The dissemination of information and the sharing of knowledge isthe reason it was created in the first place.

Questions 4 and 51. To indicate that this is a web page, we must place the tags - and -

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 wellas its relationship with other pages at the website. The only element of the HEADsection that is visible to the user is the title of the web page itself. The start and end ofthe HEAD section is denoted by the tags and .

2. The title of our page is The Internet and the World Wide Web. Notice it appears in thetitle bar in the Browser window and not on the web page itself. The title is enclosedbetween the tags and .

3. Everything that appears on the web page itself is enclosed between the and tags. The tag is usually the second last tag on the web pageimmediately before .

4. To indicate the start and end of a paragraph, we use the

and
tags. Withoutthese tags, the page would appear as a mass of text.
Observe the placement of the tags in the internet.htmlfile on the previous page.

Question 6

1. Choose File > Save As.

2. Select 3 Floppy(A:) in the Save in box.

3. Enterinternet.html as the file name.4. In the Save as type box, ensure the All Files (*.*)option is selected.5. Press Enter.

Question 7

1. Click on the Startbutton.

2. Choose the Programs option.

3. Click on Internet Explorer.



4/39


Question 8

1. Entera:\internet.html in the address box:

2. Press the Enterkey. The completed web page should appear as follows:

Assignment 8.2

Web Document Solution internet2.html:

The Internet and the World Wide Web

The Internet

The Internet is the fastest-growing communications medium the world has everknown. &nbsp Radio took 37 years to reach 50 million listeners and television took 15years to reach the same number of viewers. &nbsp In contrast, the World Wide Webtook just over three years to acquire 50 million users. &nbsp There are now 500million people using the Internet worldwide.

Almost anything you could possible want to know is out there somewhere on theWorld Wide Web. Indeed its best use is for education. &nbsp This purpose is infact part of the very ethos of the Internet. &nbsp The dissemination of information andthe sharing of knowledge is the reason it was created in the first place.



5/39



Question 1



3. Choose theAccessories option.4. Click on Notepad.

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 tag must be amended asfollows:. BGCOLOR is an attribute of the tag that allows you to change the background colour of a web page while theTEXT attribute allows you to change the text colour. Notice the American spellingCOLOR.

Question 4

1. To increase the point size of text, we can use the header tags and . Any textenclosed between these tags will be displayed prominently on the web page. Indeed, wecan use any one of five other header tags , , , or . The

simple rule is the higher the number the smaller the heading. Try experimenting witheach one of these tags. Another method of changing the point size of the text would beto use the tag. We will look at this use of the tag in the nextassignment.

Question 5

1. It is conventional to have two spaces after a period or full stop (.) However, even if youpress the space bar twice in Notepad, the Browser will only to display one space. To getan additional space you must enter the code: &nbsp (non-breaking space). Notice thiscode in internet2.html above.

Question 6

1. To display text in bold type on a web page, the tags and must enclose the text.In our assignment, the text appears as follows:

There are now 500 million people using the Internet worldwide

Question 71. To display text in italics on a web page, the tags and must enclose the text. In

our assignment, the text appears as follows:

Indeed its best use is for education

Question 8



3. Enterinternet2.html as the file name.



6/39


4. In the Save as type box, ensure the All Files (*.*) option is selected. Press Enter.

Question 9




Question 10

1. Entera:\internet2.html in the address box:

2. Press the Enterkey. The completed web page should appear as follows:

Assignment 8.3

Web Document Solution pasteur1.html:

Louis Pasteur

Louis Pasteur (1822-1895)

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, knownas the "germ theory of disease", is one of the most important in medical history. &nbspHis work became the foundation for the science of microbiology and a cornerstone ofmodern medicine.

Pasteur's phenomenal contributions to microbiology and medicine can besummarized as follows. &nbsp Firstly, he championed changes in hospital practices tominimize the spread of disease by microbes. &nbsp Secondly, he discovered thatweakened forms of a microbe could be used as an immunization against more virulentforms of the microbe. &nbsp Thirdly, Pasteur found that very small agents transmittedrabies. &nbsp These agents could not be seen under a microscope, thus revealing theworld of viruses. &nbsp As a result he developed techniques to vaccinate dogs againstrabies and to treat humans bitten by rabid dogs. &nbsp And fourthly, Pasteur developed"pasteurisation", a process by which harmful microbes in perishable food products aredestroyed using heat, without destroying the food.



7/39



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.giffile in the right pane to the 3 floppy (A:) in the left pane.

Question 2





Question 3




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 "germtheory 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 summarizedas follows. Firstly, he championed changes in hospital practices to minimize the spreadof disease by microbes. Secondly, he discovered that weakened forms of a microbecould 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 beseen under a microscope, thus revealing the world of viruses. As a result he developedtechniques to vaccinate dogs against rabies and to treat humans bitten by rabid dogs.And fourthly, Pasteur developed "pasteurisation", a process by which harmful microbesin perishable food products are destroyed using heat, without destroying the food.

Question 51. To indicate that this is a web page, we must place the tags - and -



3. The title of our page is Louis Pasteur. Notice it appears in the title bar in the browserwindow and not on the web page itself. The title is enclosed between the tags

and .



8/39


4. Everything that appears on the web page itself is enclosed between the and tags. The tag is usually the second last tag on the web pageimmediately before .

5. To indicate the start and end of a paragraph, we use the

and
tags. Withoutthese tags, the page would appear as a mass of text.
6. To indicate an extra space after a period or full stop (.), enter the &nbsp code.

Observe the placement of the tags in thepasteur1.htmlfile on the previous page.

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

Question 6



3. Enterpasteur1.html as the file name.4. In the Save as type box, ensure the All Files (*.*) option is selected.5. Press Enter.

Question 7

1. To use an image as a background, we use the BACKGROUND instead of theBGCOLOR 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 thescreen. In our assignment, we wish to use a small graphic file named dark.gif as abackground. The line appears as follows:

Question 81. In the previous assignment, we used the and tags to give prominence to the

document heading. In this assignment, we will use the tag together with theSIZE attribute. The line appears as follows:


The +3 is known as a flag. There are 12 font size flags: +6 through +1 and 1 through6. +6 is huge while 6 is the smallest.



9/39


Question 91. To centre text on a web page, it must be enclosed between the and

tags. The text in this assignment appears as follows:


Notice the heading is being formatted by two tags: and

Question 101. To underline text on a web page, the tags and must enclose the text. In our

assignment, the line appears as follows:

His work became the foundation for the science of microbiology and acornerstone of modern medicine

Question 11


2. Select 3 Floppy(A:) in the Save in box.3. Enterpasteur2.html as the file name.

4. In the Save as type box, ensure the All Files (*.*) option is selected.5. Press Enter.

Question 12




Question 13

1. Entera:\pasteur2.html in the address box:

2. Press the Enterkey.

Assignment 8.4

Web Document Solution shark1.html:

Great White Shark
Carcharodon Carcharias

Great white sharks occur in a wide range of sizes, but average between 4.3 and 5.5metres in length and roughly between 680 and 1,800 kilograms in weight. &nbsp Thelargest great white ever documented was caught off the coast of Cuba and measured 6.4metres 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.



10/39


Great white sharks inhabit temperate waters worldwide, primarily along coastlines.&nbsp Though not abundant, they are most frequently sighted off the coasts of thefollowing countries:

United States

Australia
South Africa

Scientists can easily identify the teeth of a great white shark. &nbsp The upper teethare large, broad, and triangular, while the lower teeth are slightly more slender. &nbsp Allthe teeth are serrated. &nbsp Like other sharks, a great white continually looses its teethand replaces them with new ones.

Though great white attacks on humans are well documented, they are generallyrare. &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, thegreat white's principal prey.


Question 1



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

7. Drag the shark.giffile in the right pane to the 3 floppy (A:) in the left pane.

Question 2





Question 3



Great White SharkCarcharodon Carcharias

Great white sharks occur in a wide range of sizes, but average between 4.3 and 5.5metres in length and roughly between 680 and 1,800 kilograms in weight. The largestgreat white ever documented was caught off the coast of Cuba and measured 6.4metres 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 largerthan the great white.



11/39


Great white sharks inhabit temperate waters worldwide, primarily along coastlines.Though not abundant, they are most frequently sighted off the coasts of the followingcountries:

United States

AustraliaSouth 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 areserrated. Like other sharks, a great white continually looses its teeth and replaces themwith 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. Attacksprobably occur when a shark mistakes a human for a seal or sea lion, the great white'sprincipal prey.

Question 51. To indicate that this is a web page, we must place the tags - and -



3. Everything that appears on the web page itself is enclosed between the and tags. The tag is usually the second last tag on the web page

immediately before .4. To indicate the start and end of a paragraph, we use the

and
tags. Without
these tags, the page would appear as a mass of text.

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
tag before each

country. The line break tag
ensures that the Browser will display the text on thenext line.

Observe the placement of the tags in the shark1.htmlfile at the beginning of thisassignment solution.

Question 61. The title of our page is The Great White Shark. Notice it appears in the title bar in theBrowser window and not on the web page itself. The title is enclosed between the tags and .

Question 7



3. Entershark1.html as the file name.

4. In the Save as type box, ensure the All Files (*.*) option is selected.5. Press Enter.



12/39


Question 8

1. To change the background and text colours to midnight blue and goldrespectively, the tag must be amended as follows:. Any one of the following colournames 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, thehexadecimal code for that colour must be used. A list of colours and their hexadecimalcodes are given at the end of the assignments module in Essential IT Assignments.

Question 91. Amend the following lines in the document to appear as primary and secondary

headings:

Great White Shark
Carcharodon Carcharias

Delete the
tag.

2. When the and tags have been inserted, the amended lines should appear asfollows:

Great White SharkCarcharodon Carcharias

Question 101. Delete the
tags in the following lines:

Australia

South Africa

Question 111. To display the three countries in bulleted format, the relevant lines on the page should

appear as follows:

United StatesAustraliaSouth Africa

The and tags signify the start and end respectively of an UnorderedList.The orListItem tag marks out each item in the list. A bullet point will appear on thepage where an tag has been placed. The text should appear in the Browserwindow as follows:

United States

Australia

South Africa

If the tag is used instead of the , we get an ordered(numbered) listinsteadof a bulleted list.



13/39


Question 121. To insert the picture (with no border) beneath the final paragraph, insert the following line

beneath the final paragraph:

The orImage tag is used to place images or graphic elements on a web page.The SRC orSource attribute of the tag specifies the image. A border can be setaround the image using the BORDER attribute of the tag. However, we choosenot to place a border around this image and so we set the BORDER attribute to zero.

Question 13



3. Entershark2.html as the file name.

4. In the Save as type box, ensure the All Files (*.*) option is selected.

5. Press Enter.

Question 14




4. Entera:\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 foldersolarin the right pane and drag it to the 3 floppy (A:) in the left pane.

Question 2





Question 3




14/39


2. Ensure that 3 floppy (A:) is selected in the Look in: box:

3. Double-click on in the dialog box.



15/39


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 thebrowser window and not on the web page itself. The title is enclosed between the tags and .

Question 51. The tag must be edited to appear as follows:

Question 61. The heading on the page should be enclosed by the and tags as follows:

What is the solar system?

Question 71. To place the image on the page, insert the following line immediately beneath the

heading produced in question 6:

We have decided not to have a border surrounding the image so we set the BORDERattribute of the tag to 0.

Question 8

1. Highlight the
tag before Venus.

2. Press the Delete key.

3. Highlight the
tag before Mars.

4. Press the Delete key.



16/39


Question 9

1. Add the following tags to the lines containing Venus and Mars:

Venus

Mars

The tag indicates to the Browser that an Ordered List is required. The List Itemtag signifies each item to be numbered.

Question 10

1. A hyperlink is a link from one web page to anotherorfrom one part of a web page toanother 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 calledvenus.html in yoursolarfolder.

The second link will be from the word Mars on your web page to a page calledmars.html in yoursolarfolder.

Both venus.html and mars.html have been prepared by myself and are stored in yoursolarfolder.

2. We amend the lines containing Venus and Mars as follows:

VenusMars

We place the tag before Venus. The closing tag isplaced afterVenus. The text enclosed between the and tags is our link.A HREF stands forAnchorHyperlink REFerence. It is used here for specifying the nameof the page to which we wish to link. In this case, if we click on the word Venus in thebrowser window, we will be taken to the venus.html page. We will see another use forA HREF in Assignment 8.7.

Question 11

1. We place the tag before Mars. The closing tag is placedafter Mars. If we click on the word Mars in the Browser window, we will be taken to themars.html page.

Question 121. 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 tag, however, has three attributes to help us with the hyperlinks 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 tag as follows:

The newlink, active link, visitedlink colours ofVenus and Mars will appear as light green(90EE90), light sky blue (87CEFA) and gold (FFD700) respectively.



17/39


Question 13


2. Select 3 Floppy(A:) in the Save in box:


4. Entersolar2.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. Entera:\solar\solar2.html in the address box:

5. Press the Enterkey to see the completed web page.

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 foldercanaries in the right pane and drag it to the 3 floppy (A:) in the left

pane.

Question 2





Question 3






18/39



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 bluerespectively, the tag must be amended as follows:

.

Question 51. The heading on the page should be enclosed by the and tags as follows:

Canary Islands

Question 61. To place the image on the page, insert the following line immediately beneath the

heading produced in question 5:

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 tag enables you to tell visitors to your page the nature ofa particular graphic image if they have the graphics facility of their web browser turnedoff.



19/39


20/39


Question 12

1. Amend the line immediately before the tag at the bottom of the web page:

to appear as follows:

You are creating a hyperlink from the image home.gifto the home pagecanaries2.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:

to be:

After re-saving each file test the new link in the web browser window. Are you returnedto 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 foldernations in the right pane and drag it to the 3 floppy (A:) in the left

pane.

Question 2





Question 3




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

5. Click on the nations1 file.




21/39




22/39


Question 4

1. To change the background and text colours to light yellowand dark green respectively,the tag must be amended as follows:

Question 51. To change the font to Arial, insert the following tag beneath the tag:

The FACE attribute is used with the tag to change the font. Place the tag immediately before the tag at the bottom of the document.

Question 6

1. Enclose the heading Nations of the World between the and tags:

Nations of the World

Question 71. Place the cursor beneath the final paragraph.2. Enter the following line:

3. To centre the button on the page, amend the line as follows:

Question 81. 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 oneach country and not before the list of countries at the top of the page :

NigeriaJapanBrazilPeruPolandNew Zealand

A NAME stands for Anchor Name. We can choose any name we wish; here we havedecided on anchor names country1, country2, country3, country4, country5andcountry6. A closing tag is not required here.

Question 91. 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:

Nigeria
Japan
Brazil

Peru
Poland
New Zealand



23/39


The idea is that when a country name is clicked in the list of countries, you will bebrought to information on that country further down the page i.e. once you click the linkyou jump to the relevant anchor.

Notice in this exercise, we are linking to anchors on the same page and not to otherpages in the website. Observe the # symbol before each country. This is only put inthe link and not in the anchor.

Question 101. To place a top anchor before Nations of the World, make the following addition to the

line:

Nations of the World

Question 111. To create a link from the button at the bottom of the page to the top anchor, make the

following addition to the line:

Question 12


2. Select 3 Floppy(A:) in the Save in box:


4. Enternations2.html as the file name.

5. In the Save as type box, ensure the All Files (*.*) option is selected:


Question 13




4. Entera:\nations\nations2.html in the address box:


Question 14Click on each of the countries at the top of the document to test the links and anchors. Doyou jump to the correct point in the page when you click a link? If not, why?



24/39


Assignment 8.8

Question 1



3. Click on Drive C: (or on whichever drive the eita folder is installed).4. Double-click on the eita folder.




8. Click the folderpc 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 41. Place the following line after the tag:

The FACE and SIZE attributes of the tag allow you to alter the font type andsize of the text. This will apply to the text in the entire document.

Question 51. Amend the heading as follows:

The Personal Computer

This heading will now be a different size to the other text on the page. These tagsoverride the setting in question 4 on this line only.

Question 61. Insert the following line beneath the heading:

We have no border around the image and the alternative text Image of PersonalComputer will appear if one views the web page with the graphics facility disabled.

2. When we add the and tags to centre the heading and image,these lines will appear as follows:



25/39


The Personal Computer

Question 7

1. Amend the text hardware and software in the first paragraph to appear as follows:

hardware and software

2. The words hardware and software will now act as hyperlinks to the files hardware.htmland software.html respectively.

Question 8

1. Choose File > Save As. The following dialog box will appear:

2. Enterpc2.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:

Home|Software

2. This line creates hyperlinks from the Home and Software words to the files pc2.html andsoftware.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:

Home|Hardware

2. This line creates hyperlinks from the Home and Hardware words to the files pc2.htmland hardware.html respectively.

Question 141. Choose File > Save.



26/39


Question 15



3. Click the button

Question 161. Edit the text DellandIBMto appear as follows:

Dell and IBM.

2. This creates hyperlinks from the words Delland IBMto the Dell and IBM websites on theWorld Wide Web. This is the first time that you have created hyperlinks to externalwebsites.

Question 17


Question 18



3. Click the button

Question 19

1. Edit the text Microsoft and Macromediato appear as follows:

Microsoft and Macromedia

2. This creates hyperlinks from the words Microsoftand Macromedia to the Microsoft andMacromedia websites on the World Wide Web.

Question 20Choose File > Save.

Question 21




4. Entera:\pc\pc2.html in the address box:




27/39


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, Microsoftand Macromedia.

Assignment 8.9

Question 1







7. Click on the Assignment 8.9 subfolder.8. Click the folderbeatles in the right pane and drag it to the 3 floppy (A:) in the left

pane.

Question 2





Question 3

1. Choose File > Open.2. Ensure that 3 floppy (A:) is selected in the Look in: box:



5. Click on the beatles1 file.


Question 41. Insert the following line beneath the :

We have no border around the image and the alternative text Beatles Logo will appear ifone views the web page with the graphics facility of the web browser disabled.

Question 51. Insert the following lines beneath the Beatles Logo:

We have no border around the image and the alternative text Beatles Photograph willappear if one views the web page with the graphics facility disabled.



28/39


Question 61. Add the and tags before the first image and beneath the

second image respectively as follows:

Question 7

1. To add a midi version of the Beatles hit I Want to Hold Your Handas background soundto the page, add the following line beneath the tag:

2. This section of HTML code should now appear as follows:

Question 8

1. To create hyperlinks from John, Paul, George and Ringo at the bottom of the web pageto the relevant html files in the beatles folder, amend this section as follows:

John|Paul|George|Ringo

2. All of this text can appear on one line but we decide to split it up into 7 lines in order tomake it more legible.

Question 9Choose File > Save As.

2. Enterbeatles2.html in the File name: box.

3. In the Save as type: box, ensure the All Files (*.*) option is selected:


Question 10

1. We will use the Image Map program, Mapedit, to produce the image map. The lattershareware program can be downloaded from www.boutell.com.

2. Once Mapeditis installed on your computer, choose:Start > Programs > Mapedit > Mapedit.

3. The following dialog box will appear:

http://www.boutell.com/http://www.boutell.com/


29/39


4. Choose File > Open HTML document.5. The following dialog box will appear:


7. Double-click on in the dialog box.8. The following dialog box will appear:

9. Click on in the dialog box.

10. Click .


12. Select the beatles.jpg file in the dialog box and click the OKbutton.




30/39


14. Click the icon in the toolbar.15. Place the mouse pointer on Pauls nose (Top left Beatle in the photograph).16. Drag the mouse outwards so the circle will cover Pauls face.17. Click the left mouse button to halt the drawing of the circle.18. The following dialog box will appear:

19. Enterpaul.html in the top box as shown below:



31/39


20. Click the OKbutton. Congratulations! You have just set up a hyperlink from Pauls facein the picture to the file paul.html.

21. Repeat steps 14 to 20 inclusive to produce hyperlinks from Ringo (Top right Beatle in thephotograph), George (Bottom left Beatle in the photograph) and John (Bottom rightBeatle in the photograph) to the files ringo.html, george.html andjohn.htmlrespectively.

Question 111. Choose File > Save.

Question 12




4. Entera:\beatles\beatles2.html in the address box:

5. Press the Enterkey to see the completed web page.6. Click on each face in the photograph to test the hyperlinks.



32/39


Question 13

1. In Notepad, choose File > Open.



Question 141. Edit the following line:

So it appears as follows:

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



3. Click on Internet Explorer.4. Entera:\beatles\beatles2.html in the address box:



33/39



6. Click on each face in the photograph to test the hyperlinks. After each separate Beatlepage has loaded click the HOMEbutton at the bottom of the web page. What does itdo?

Assignment 8.10

TASK 1:

Question 1

1. Choose Start > Run.2. When the dialog box appears, type explorerinto the box:

3. Click the OKbutton.

4. Click on 3 floppy (A:).

5. Choose File > New > Folder.

6. Entertables as the new name for the folder.

Question 2






Question 31. Type the following:

Countries of the World



34/39


The tag produces a horizontal rule running the width of the screen.

Question 41. Type the following text beneath the tag:

Countries of the World

Question 51. Type another tag beneath the previous line. You now have a horizontal rule

above and one below your main heading.

Question 61. The HTML tags required to set the table out are now shown:

CountryCapitalPopulationBritainLondon60 MillionGermanyBerlin80 Million

IrelandDublin5 Million

Explanation:1. The and 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 tag and we have set it to one pixel.

3. To specify a new row in a table, we must use the tag (Table Row).

4. Each time we wish to create a new cell or box within a row, we must use the tag(Table Data).5. The and can take a number of attributes. In our table, we use the ALIGN

attribute with the tag to align data within cells.

Question 71. On our web page, place:

a) The tag before the tag.b) The tags after the tag.



35/39


Question 8

1. Choose File > Save As. Entercountry1.html in the File name: box.



Question 9




Question 10

1. Entera:\tables\country1.html in the address box:


Question 111. 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 :

European Countries

3. The tag gives us the new row.

4. gives us a new cell that spans across threecolumns. The data - European Countries - in this new wide cell will be centred.

Question 12


2. Entercountry2.html in the File name: box.



Question 13




4. Entera:\tables\country2.html in the address box:



36/39



TASK 2:

Question 1





5. Choose File > New.6. Type the following:

Car Sales Figures (1999-2001)Car Sales Figures (1999-2001)Vendor19992000

2001AutoCare Ltd320049004400Parnell Motors Ltd560087007600

Tynan Cars Ltd280045003900

Explanation:a) The table is centred horizontally on the web page using the and

tags.

b) The table is defined using the tag. Notice we have set the WIDTH attributeto 60%. This means that the table width will take up 60% of the width of the browserwindow.



37/39


c) As in the last task, the tag specifies a new row.

d) The orTable Heading tag is most frequently used to specify headings in atable. It is very similar to the tag in that it sets up a new cell or box in the table.However, it differs from the tag in that the data in a cell will be automaticallycentred and displayed in bold type.

e) Notice that we have specified a width of 40% for the first cell using the tag.This means that this cell with take up 40% of the width of the table.f) The tag is used to create a new cell for ordinary data.

Question 21. Amend the BODY tag so it appears as follows:

This sets the background colour and text colour of the web page to midnight blue andgold respectively.

Question 31. Amend the line:

Car SalesFigures (1999-2001)

To appear as follows:

Car Sales Figures (1999-2001)

Explanation:The COLSPAN attribute is set to 4, this ensures that the cell will span over four columnsin the table. The CENTER attribute allows the text - Car Sales Figures - to appearcentred in the cell. To change the background colour of the cell, we use the BGCOLORattribute of the tag. The Font size is set to +2.

Question 4

1. Choose File > Save As. The following dialog box should appear:


3. Entercar.html in the File name: box.



Question 5




4. Entera:\tables\car.html in the address box and then press Enter:



38/39


39/39


a) To create the table, we must use the tag. We want the table to span thewidth 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 tag.c) The first row is made up of one cell spanning across 4 columns. To achieve this

effect, the COLSPAN attribute of the tag is set to 4. The ALIGN attribute ofthe 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. Eachcell spans across two columns. Using the tags and setting the COLSPANattribute to 2 achieves the effect.

e) As in the previous tasks, the 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 tag and

setting the COLSPAN attribute to 4 achieves the effect. The CENTER attribute isalso used here to centre the text in the cell. Using the and tags, the text isalso italicised.

Question 2

1. To obtain gold and dark green as the text and background colours respectively, alter theBODY tag to appear as follows:

Question 31. To obtain dark red as the text colour for the table heading, alter the line:

ChesterCollege - Student Numbers

To appear as follows:

Chester College - Student Numbers

Question 4


2. Double-click on in the dialog box.3. The following dialog box should appear:

4. Enterchester.html in the File name: box.



Question 5




4. Entera:\tables\chester.html in the address box and then press Enter:

ariston module 8 - step-by-step solutions

Documents