Exercise Manual

Exercise Manual for Course 4542
Getting Started With HTML
4542/MA/A.2/510/A.1
by Steve Lockwood
Technical Editor:
Randy Casburn
© LEARNING TREE INTERNATIONAL, INC.
All rights reserved.
All trademarked product and company names are the property of their respective trademark holders.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, electronic,
mechanical, photocopying, recording or otherwise, or translated into any language, without the prior written permission of the publisher.
Copying software used in this course is prohibited without the express permission of Learning Tree International, Inc.
Making unauthorized copies of such software violates federal copyright law, which includes both civil and criminal penalties.
Exercise Manual Contents
Legend for Course Icons...................................................................................................... ii

Login Credentials: For Course Virtual Machine................................................................... 1
Hands-On Exercise 1.1: Exploring the Complete Solution...................................................3
Hands-On Exercise 2.1: Formatting Web Pages With HTML body Elements..................... 5
Hands-On Exercise 2.2: Adding Lists and Hypertext Links................................................. 9
Hands-On Exercise 2.3: Embedding Images in Web Pages............................................. 13
Hands-On Exercise 2.4: Using HTML Tables.................................................................... 17
Hands-On Exercise 3.1: Adding Style and Structure to Web Pages..................................25
Hands-On Exercise 3.2: Styling a Navigational Menu....................................................... 33
After-Course Activity--Sandbox: Formatting Additional Pages........................................... 39
© Learning Tree International, Inc. All rights reserved. Not to be reproduced without prior written consent.
4542-MA-i
Legend for Course Icons
Standard icons are used in the hands-on exercises to illustrate various phases of
each exercise.
Major step Warning
1. ❏ Action Hint
Checkpoint Stop
Question Congratulations
Information Bonus
Solution/Answer
4542-MA-ii
Login Credentials:
For Course Virtual Machine
During this course, you will be using a Windows virtual machine. The username
and password are documented below for your reference:
Username: user
Password: pw
4542-MA-1
4542-MA-2
Hands-On Exercise 1.1:
Exploring the Complete Solution
Objective
In this exercise, you will browse the complete solution to the course case study
website.
During this course, you will be developing web pages for a fictional
company called Nui Manu Airlines. This exercise allows you to browse a
completed version to see an example of what the pages will look like at
the completion of the couse.
During this course, you have a choice of using many different web
browsers, including Mozilla Firefox, Microsoft Internet Explorer, Google
Chrome, SeaMonkey, and Opera. Feel free to use any browser you are
most familar with, or maybe one you are not familar with.
1. ❏ Start a browser of your choice by double-clicking the appropriate icon on the

desktop.
You should see the Course 4542 home page.
2. ❏ Under Course Links on the left side, click the link for Complete Solution.
You should see the Nui Manu Airlines website.
3. ❏ Take a few minutes and browse the site.
4. ❏ When you are done, your instructor will lead a discussion about the Nui Manu
Airlines website.
Congratulations! You have used a web browser to explore the completed

Nui Manu Airlines website.
If you have more time
5. ❏ Browse the website with a different browser and compare how the site looks to
how it looked in the first browser you used.
4542-MA-3
Exploring the Complete Solution
(continued)
This is the end of the exercise.
4542-MA-4
Formatting Web Pages With HTML body Elements
Objective
In this exercise, you will begin working on the web pages for your fictional airline,
Nui Manu Airlines. You will use various <body> elements to format a couple of
pages (index.html and whatsnew.html) of Nui Manu Airlines. These pages
currently contain the basic elements to define the structure of the page; you will
add a few elements we discussed, such as <h1> . . . <h6>, <em>, <strong>, <b>,
<i>, <hr />, <p>, and <br />.
1. ❏ Start a web browser of your choice and open the file C:\web4542\exercises
\index.html.
Hint...
To open a file in Internet Explorer, use File | Open and click Browse.
To open a file in Firefox, use File | Open File. To open a file in
Opera or Google Chrome, press <Ctrl><O>.
You will see a first draft of the Nui Manu Airlines home page. Notice that
the page does not yet contain any exciting formatting tags.
To edit a web page, all you need is a text editor. For this course, we
have installed several editors that can be used: Textpad, Notepad++,
Webstorm, and Komodo Edit. There are icons for each on your desktop.
Feel free to explore them all.
4542-MA-5
(continued)
2. ❏ Start any of the editors (TextPad, Notepad++, Webstorm, or Komodo Edit) by

double-clicking the icon on the desktop.
3. ❏ Open the C:\web4542\exercises\index.html file in the editor by selecting

File | Open.
4. ❏ Investigate the contents supplied in the index.html file. The file currently just
contains some basic elements to define the page structure.
What is currently specified for the page's title?
Welcome to Nui Manu Airlines
5. ❏ Feel free to change the title of the page if you like.
6. ❏ Locate the word "Home" that is inside the <header> element.
Each page in the Nui Manu Airlines website has a <header> that
currently just contains the page name. For consistency, we want to format
each of these page name lines exactly the same in each page. We would
like each of these lines to be formatted as an <h1>.
7. ❏ Use the <h1> tag to format the text "Home".
8. ❏ Locate the text "Aloha! Welcome to Nui Manu Airlines!" inside the <section>
element.
Each <section> element in a page should include a heading to title the

section. For consistency, we want to include an <h2> heading within each
section.
9. ❏ Use the <h2> tag to format the text "Aloha! Welcome to Nui Manu Airlines!"
10. ❏ Save the index.html file, switch back to the web browser, and click the
browser's reload or refresh button.
You should see the text "Home" and "Aloha! Welcome to Nui Manu
Airlines!" formatted as an <h1> and <h2> respectively.
4542-MA-6
(continued)
11. ❏ Open the file whatsnew.html in your browser. This page is used by your airline
to announce new services.
12. ❏ Open the whatsnew.html file in the editor.
13. ❏ Locate the text "What's New" within the <header> element, and format this text
using an <h1> tag.
14. ❏ Locate the text "Pets Fly Free*" within the <section> element, and format this
text using an <h2> tag.
15. ❏ Save the whatsnew.html file, switch back to the web browser, and click the
browser's reload or refresh button.
Similar to the index.html page, the text "What's New" and "Pets Fly
Free" should be formatted as <h1> and <h2> respectively
A finished version is provided in the C:\web4542\exercises
\solutions\ex21 directory, if you wish to review an example.
16. ❏ Spend a few minutes adding any other HTML elements discussed in the
Course Notes to enhance either of the pages just edited. For example, try using
<strong>, <em>, <hr>, etc.
Hint...
Use your creativity to format the page. Remember that most tags
must be closed (e.g., <strong> . . . </strong>).
Congratulations! You have formatted web pages with HTML <body>

elements.
4542-MA-7
(continued)
17. ❏ Edit the fleet.html page and add some HTML formatting to the provided text.
Information about the actual aircraft will be added in a later exercise.
Hint...
Be sure to use the <h1> and <h2> elements within

the <header> and <section> as you did for the other files.
18. ❏ Test all of your pages in several different browsers and verify that they look good
in each browser.
4542-MA-8
Adding Lists and Hypertext Links
Objective
In this exercise, you will continue to enhance your Nui Manu Airlines website. You
will use ordered lists to number a series of items and add hypertext links to allow
for easy navigation of the site.
This exercise builds on the finished version of the previous exercise.
1. ❏ If you did not finish the previous exercise, copy all files from the C:
\web4542\exercises\solutions\ex21 directory and place them in the C:
\web4542\exercises directory. Select Yes to All if asked to replace existing
files.
Using lists
In this part of the exercise, you will use ordered lists (<ol>) to format the
steps required to allow your pet to fly free.
2. ❏ Open the whatsnew.html file an editor.
3. ❏ Remove the numbers that are hardcoded in front of the steps required to allow
your pet to fly free.
4. ❏ Remove the <br /> tags at the end of each step.
The <br /> tags were adding line breaks after each line, but they are not
needed in a list.
5. ❏ Add the <ol> and <li> tags to format these steps as an ordered list.
Hint...
Be sure to close all tags.
4542-MA-9
(continued)
The code for the list will look similar to:
<ol>
<li>If you have not already done so, join our popular
<strong>Frequent Flyer</strong> program</li>
<li>Tell all your friends about our great airline</li>
. . .
</ol>
6. ❏ Save the file and view it in your browser.
Adding hypertext links to your page
In this section of the exercise, you will add hypertext links using the <a>
tag.
7. ❏ Reopen the index.html file in an editor.
8. ❏ Locate the sentence that begins with:

Be sure to check the What's New page. . .
9. ❏ Add an <a href . . . > to link the text "What's New" to the document
whatsnew.html.
Hint...
Remember that anchor tags must be closed:

<a href="whatsnew.html">What's New?</a>
10. ❏ Save the document and reload the index.html file in the browser.
The link should appear underlined and highlighted.
11. ❏ Test the link by clicking it.
12. ❏ In the editor, open the whatsnew.html file.
4542-MA-10
(continued)
13. ❏ At the bottom of the page, add a "Back to Home" hypertext link to allow users to
return to the index.html page. Be sure to place this link before the </body>
tag.
Hint...
The following is an example of the code for the hypertext link:
<a href="index.html">Back to Home</a>
You may also need to place this in a new paragraph to

ensure that it appears on a separate line.
14. ❏ Save and test the document.
Congratulations! You have successfully used HTML formatting elements to

refine a series of pages.
15. ❏ Switch back to, or reopen, the whatsnew.html file in the editor. Add a new item
to the ordered list that reads, Tell all your friends about our great
airline. Add this as the second item in the list.
16. ❏ Save the file and view it in your browser.
Notice that all of the numbers in the list updated automatically.
17. ❏ Feel free to add or remove some list items, and notice that the browser now
automatically numbers them.
18. ❏ Change the ordered lists to an unordered list.
4542-MA-11
(continued)
19. ❏ In the editor, switch back to the index.html file, locate the following text, and
add the required HTML code to link the text to the specified page:
Text string to link Link to

our fleet of aircraft fleet.html
frequent flyer program frequent.html
20. ❏ Test all of your pages in several different browsers and verify that they look good
in each browser.
4542-MA-12
Embedding Images in Web Pages
Objective
In this exercise, you will continue to refine your web pages using both static and
active (linked) images.
Part 1: Adding static images to your web pages
files.
In this first part of the exercise, you will place static images on the web
pages of Nui Manu Airlines.
2. ❏ Switch back to, or reopen, the index.html file in an editor.
You will now add an image to the top of the page.
3. ❏ Add the required HTML to embed the images/NuiManuLogo.jpg image as the

first line within the <header> element. The image width is 1000 pixels and the
height is 162.
Hint...
The code to embed the image may look like this:
<img src="images/NuiManuLogo.jpg" alt="Nui Manu

Logo Image" title="Nui Manu Airlines" width="1000"
height="162"/>
This line should be placed inside the <header> element and before
the line <h1>Home</h1>
4542-MA-13
(continued)
The above HTML will place the NuiManuLogo.jpg image at the

top of the home page. Notice that this image is located in the images
subdirectory. This directory contains many other images for use on your
pages. (Some of these images are animated GIFs.)
4. ❏ Save the index.html file and load this page in your browser.
Your page should look similar to the following example:
5. ❏ Add the same NuiManuLogo.jpg image to the top of the whatsnew.html

page.
6. ❏ Save and test in a web browser.
4542-MA-14
(continued)
Part 2: Adding active images to your web pages
In this part of the exercise, you will place an active image on a web page.
7. ❏ Switch back to, or reopen, the whatsnew.html file in the editor.
8. ❏ Near the end of the document, replace the HTML code similar to the following
(this code was added in an earlier exercise):
<a href="index.html">Back to home</a>
with:
<a href="index.html">
<img src="images/home.gif" alt="Fly me back to the home
page" title="Back to home" width="84" height="45"/></a>
Hint...
The "Back to Home" link was added in the last exercise. If you
are missing this link, you must have not completed the previous
exercise. You can either refer back to the previous exercise or just
enter the new link near the bottom of the page.
9. ❏ Save your work and test it in the browser.
You will see that the "Back to Home" link has been replaced with a
clickable home image:
Congratulations! You have successfully used both static and active images
to enhance web pages.
4542-MA-15
(continued)
10. ❏ Add the Nui Manu logo image to the fleet.html page.
11. ❏ Add the Petsflyw.gif image to the whatsnew.html page within the
<section> element.
Hint...
The HTML to add the image will look like....
<img src="images/petsflyw.gif" alt="Pets Fly Free"

title="Pets Fly Free" width="440" height="55"/>
12. ❏ Add a few more images to some of the web pages.
Hint...
The images folder contains many images

you can use. A few other suggested images
are gatesAnim.gif, planeAnim.gif, gateSignSmall.png,
and luggageTagSmall.jpg.
4542-MA-16
Using HTML Tables
Objective
In this exercise, you will add a table to a web page. Tables can be used to display
data in a row/column structure.
Part 1: Getting started
files.
2. ❏ Open the fleet.html file in your web browser.
This page currently does not contain any information about Nui Manu's
modern fleet of aircraft.
3. ❏ Open the fleet.html file in an editor.
You will now add a table to display information about the four different
aircraft operated by Nui Manu Airlines.
Part 2: Creating a table
4. ❏ To start the table, place a <table border="1"> tag below the paragraph
describing the fleet.
4542-MA-17
Using HTML Tables
(continued)
5. ❏ Add the appropriate tags to create a table containing the information below.
The aircraft names and descriptions are included within comments in the
fleet.html page. HTML comments begin with . You
can use the text in the comments to save yourself some typing.
Aircraft name Aircraft description

Canadair Regional Jet Twin-engine jet. 26.7 meters
long with a wingspan of 21.2
meters. Maximum range of
1500 nautical miles.
Embraer Regional Jet Twin-engine jet. 33.7 meters
long with a wingspan of 20
Airbus A319 Twin-engine jet. 33.8 meters
Boeing 767 Twin-engine jet. 48.5 meters
Hint...
Remember, the <th> tag should be used for the header rows
and will by default render text in cells as center-justified and bold.
The <td> tag should be used for the table data cells and will
render the text in cells by default as left-justified. Be sure to use
the <tr> tag to start each new row.
6. ❏ End your table by placing a </table> tag at the end of your table data.
7. ❏ Save the file and test in a browser.
4542-MA-18
Using HTML Tables
(continued)
Your browser should display a page similar to the one below:
4542-MA-19
Using HTML Tables
(continued)
Hint...
The code for your table should look similar to the following code:
<table border="1">
<tr>
<th>Aircraft Name</th>
<th>Aircraft Description</th>
</tr>
<tr>
<td>Canadair Regional Jet</td>
<td>Twin engine jet. 26.7 meters long with a
wingspan of 21.2 meters. Maximum range of 1500
nautical miles.</td>
</tr>
<tr>
<td>Embraer Regional Jet</td>
<td>Twin engine jet. 33.7 meters long with
a wingspan of 20 meters. Maximum range of 2000
</tr>
<tr>
<td>Airbus A319</td>
wingspan of 33.9s meters. Maximum range of 3697
</tr>
<tr>
<td>Boeing 767</td>
</tr>
</table>
Congratulations! You have successfully used tables to display data in a

web page.
4542-MA-20
Using HTML Tables
(continued)
8. ❏ Modify the table to contain another column titled "Seating Chart" that displays the
image of the appropriate aircraft. Use the image filenames provided below:
Image filename of aircraft

images/crj.png
images/Emb.png
images/A319.png
images/B767.png
Hint...
Don't forget to give each image alt text and a title.
9. ❏ Save and test the page in the web browser.
4542-MA-21
Using HTML Tables
(continued)
Your browser should display a page similar to the one below:
4542-MA-22
Using HTML Tables
(continued)
Hint...
The code for the first two airplanes in the table should look similar
to:
<tr>
<th>Aircraft Name</th>
<th>Aircraft Description</th>
<th>Seating Chart</th>
</tr>
<tr>
<td>Canadair Regional Jet</td>
<td><img src="images/crj.png" border="0"
alt="Canadair Regional Jet" /></td>
</tr>
<tr>
<td>Embraer Regional Jet</td>
<td>Twin engine jet. 33.7 meters long with
a wingspan of 20 meters. Maximum range of 2000
<td><img src="images/Emb.png" border="0"
alt="Embraer Regional Jet" /></td>
</tr>
4542-MA-23
4542-MA-24
Adding Style and Structure to Web Pages
Objective
In this exercise, you will investigate the use of style sheets to add structure and
format to the web pages of the Nui Manu Airlines website. Additionally, you will link
a single style sheet to several existing web pages.
Part 1: Creating page structure
files.
In this first part of the exercise, a style sheet has been provided for you.
This style sheet contains selectors for a few different tags. The style sheet
will be added to each page and then a div tags will be added to the
pages to apply an id selector.
2. ❏ Open the nuimanu.css file in an editor. The file is in the C:

\web4542\exercises directory.
This style sheet defines several selectors to style tags, including: body,
header, section, and footer tags. It also contains an id selector:
#pageWrapper.
4542-MA-25
(continued)
3. ❏ Investigate the selectors provided in the style sheet and answer the following
questions.
a. Which background color will be used for the page body?
b. Which background color will be used for <header> elements?
c. How will an h1 element be formatted when inside the header?
d. Which background color will be used for <footer> elements?
e. Which background color will be used for the #pageWrapper?
f. What border will be placed around the #pageWrapper?
4. ❏ Open the index.html file in an editor, and add the required tag to the <head>
section to link to the nuimanu.css external style sheet.
Hint...
Use the <link> tag and do not forget to close the tag.
<link rel="stylesheet" href="nuimanu.css"/>
5. ❏ Create a page footer by adding the following lines immediately after the
</section> tag:
<footer>
Nui Manu Airlines
</footer>
4542-MA-26
(continued)
6. ❏ Save the file and load in a browser.
At this point, you should notice a few changes, including:

● The page background color has changed to gray
● The header has a blue background
● The <h1> in the header is now right-aligned, white, and smaller
● The main content is floated to the right

● A footer line across the bottom
7. ❏ Switch back to the editor.
8. ❏ In the index.html file, add a <div id="pageWrapper"> element that

surrounds everything in the body of the page.
Hint...
Add the <div id="pageWrapper"> tag just after the

opening <body> tag, and add the closing </div> tag just before
the closing </body> tag.
4542-MA-27
(continued)
9. ❏ Switch back to the web browser and reload the index.html file.
You should now see the home page with the page structure and style
sheet formatting applied.
The float property has not yet been discussed, but it is used in the CSS
used here as an example to lead into the next section. If you look in the
selector for the section tag, you will see a float:right. This causes
the entire section element to be "floated" to the right side of its containing
area. Float will be discussed in more detail shortly.
10. ❏ Open the whatsnew.html file in the editor.
4542-MA-28
(continued)
11. ❏ Repeat the same steps you just performed to the index.html page to
whatsnew.html. These steps are outlined below for reference:
1. In the <head> section, add a link to the external style sheet

nuimanu.css.
2. Add a <div id="pageWrapper"> element that surrounds everything in
the body of the page.
3. Add the following lines just after the </section> tag:
<footer>
Nui Manu Airlines
</footer>
12. ❏ When you are done, save the file and view in a web browser.
4542-MA-29
(continued)
The whatsnew.html page should now be formatted very similar to

index.html.
Congratulations! You have used style sheets to structure and format web
pages.
4542-MA-30
(continued)
If you have more time: Creating new selectors
13. ❏ Repeat the same steps you just performed to the index.html and
whatsnew.html pages to the fleet.html page.
14. ❏ Feel free to add new selectors to the style sheet and apply them to any page or
element. Experimenting with style sheets is the best way to learn.
Several pages for the Nui Manu site are provided for you that already
contain all of the required tags. However, these pages do not yet
contain the link to the style sheet. You will investigate how a page will be
displayed by a browser when the style sheet is not available or even in a
browser that does not support style sheets.
15. ❏ Open the schedule.html file in the editor.
Notice that this page does not contain the link to the nuimanu.css file,
but it does already contain the <div id="pageWrapper"> and the
<footer>. This page also contains a <nav> element that contains a
menu. This menu will be styled in the next exercise.
16. ❏ Open the schedule.html file in a web browser.
Even though the page does not have a link to the style sheet, the page still
displays and all of the information is visible. When browsers cannot locate
a style sheet, they perform graceful degradation and display the page in
linear layout.
17. ❏ Switch back to the editor. In the <head> section, add a link to the external style
sheet nuimanu.css.
18. ❏ Save the schedule.html file and reload in the web browser.
The page should now be styled using the id selectors from the style
sheet.
What happened to the <nav><menu>... </menu></nav> section?
4542-MA-31
(continued)
The style sheet float property is causing the menu to appear on the left.
The float property has not yet been discussed, but it is used here as an
example to lead into the next section. The menu is displayed on the left of
the browser because the <section> element is floating the content area
to the right.
4542-MA-32
Styling a Navigational Menu
Objective
In this exercise, you will implement the style sheet selectors needed to create a
navigational menu for the Nui Manu Airlines website. Menus are sometimes created
by styling an unordered list as a menu, but in this exercise we will use the HTML5
<nav> element instead.
Part 1: Creating the menu selectors
files.
In this first part of the exercise, the selectors needed to style a menu will
be added to the style sheet used in the previous exercise.
2. ❏ Open the aboutus.html file in an editor and locate the <nav> element.
What content is within the <nav>?
A <menu> element containing a list of links to other pages on

our site
3. ❏ View the aboutus.html file in a web browser.
4542-MA-33
(continued)
The page should look similar to the one below:
The <nav> element is currently displayed on the left. This is because the
section selector investigated in the previous exercise is floating the main
page content to the right. No other formatting is performed on the menu
because the style sheet does not yet include the required selectors.
4. ❏ Click the link for Frequent Flyers.
This page should look very similar to the All About Us page as it already
contains the <nav> element.
The C:\web4542\examples\CSS\menu.css stylesheet was discussed

during the lecture just prior to this exercise. It contains all the CSS
required to style the navigational menu.
5. ❏ Open the C:\web4542\examples\CSS\menu.css in the editor. Press

<Ctrl><a> to select all text in the file and press <Ctrl><c> to copy it.
6. ❏ Open the nuimanu.css file in an editor and paste the code just copied at the
end of this file.
7. ❏ This should add the required selectors to style the menu as a vertical menu.
8. ❏ Save the nuimanu.css file when you are done.
4542-MA-34
(continued)
9. ❏ Switch back to the web browser and reload the web page. Click the links for
Frequent Flyers and All About Us.
The list should now be styled as a navigational menu on each of these

pages.
The changes just made to the nuimanu.css file have caused all pages
that use the file to be affected. One huge advantage of external style
sheets is that any changes made will affect all pages linking to the style
sheet.
10. ❏ The Home and What's New pages currently do not contain the HTML for the
menu. You will add that now.
Part 2: Adding the menu to the remaining pages
You will now add the menu to the remaining pages.
11. ❏ Open the aboutus.html file in an editor.
12. ❏ Using the mouse, select the entire <nav> ... </nav> element and select Edit
| Copy.
4542-MA-35
(continued)
13. ❏ Open the index.html file in an editor and locate the <footer> element.
14. ❏ Paste the text you just copied before the <footer> element.
15. ❏ Save the index.html file and reload in a web browser.
The page should now contain the navigational menu.
16. ❏ Repeat the last three steps and add the menu to the whatsnew.html page.
17. ❏ Test all pages and menu links when you are done.
Congratulations! You have implemented a vertical navigational menu.
4542-MA-36
(continued)
If you have more time: Investigating a horizontal menu
It is also possible to implement a horizontal menu using similar techniques.
18. ❏ Implement the menu on the fleet.html page.
19. ❏ Open the nuimanu.css file in the C:\web4542\exercises\solutions

\ex32\bonus-horizMenu folder.
The menu selectors have been modified in this style sheet to style the
menu as a horizontal menu.
20. ❏ Investigate the menu selectors in the style sheet.
21. ❏ Open the index.html file that is in the same folder in a web browser.
You should see the menu displayed as a horizontal menu across the top.
4542-MA-37
4542-MA-38
After-Course Activity--Sandbox:
Formatting Additional Pages
Objectives
During this exercise, you will use the knowledge gained in the course to format a
few additional pages to look similar to the pages created during the course.
Overview
The files to use for this exercise are in the C:\web4542\exercises\AfterCourse

folder. In that folder, you will find a completed version of all the files used during
the course. Additionally, you will find several pages related to the Hawaiian islands
(hawaiianIslands.html, bigisland.html, kauai.html, lanai.html,
maui.html, molokai.html, and oahu.html). The hawaiianIslands.html file is
also already finished for you and contains an image map of the Hawaiian islands. Image
maps are outside the scope of this course, but they provide the ability to click on different
regions of an image to link to different pages.
During this exercises, you are to complete the bigisland.html, kauai.html,

lanai.html, maui.html, molokai.html, and oahu.html pages and add all the
required HTML to format them like the pages created during the course.
1. ❏ Open the c:\web4542\exercises\AfterCourse

\hawaiianislands.html file in a web browser.
The page should look similar to the following:
4542-MA-39
(continued)
2. ❏ Click on one of the Hawaiian islands in the map.
The browser should go to a currently unformatted page about that island.
3. ❏ Click the browser's Back button and click on another island in the map.
The hawaiianislands.html page is provided for you. It contains an

image map, which is outside the scope of this course. Feel free to explore
the source of that page if you wish.
4542-MA-40
(continued)
4. ❏ Add the required HTML to the following pages to format them like all the other
pages of the Nui Manu site (as you did in the course):
bigisland.html
kauai.html
lanai.html
maui.html
molokai.html
oahu.html
You can look at any of the other HTML files in the folder as an example
of what needs to be done. There is also a solution to this exercise in the
solutions folder.
Following are screen shots of how a couple of the pages may look when
done:
4542-MA-41
(continued)
5. ❏ Modify the navigational menu on each page to add a link to the

hawaiianislands.html page.
6. ❏ There is also an inflightmenu.html page that can be formatted and added to

the navigational menu.
4542-MA-42
(continued)
The navigational menu may now look like the following:
Again, a solution for this entire exercise can be found in the c:

\web4542\exercises\solutions\AfterCourse folder.
Congratulations! You have formatted additional pages to match the Nui

Manu site created during the course.
4542-MA-43
4542-MA-44

Exercise Manual

Uploaded by

Copyright:

Available Formats

Exercise Manual

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Exercise Manual

Uploaded by

Copyright:

Available Formats

Exercise Manual for Course 4542

Getting Started With HTML

Legend for Course Icons...................................................................................................... ii

Major step Warning

1. ❏ Start a browser of your choice by double-clicking the appropriate icon on the

You should see the Course 4542 home page.

You should see the Nui Manu Airlines website.

3. ❏ Take a few minutes and browse the site.

Congratulations! You have used a web browser to explore the completed

If you have more time

This is the end of the exercise.

2. ❏ Start any of the editors (TextPad, Notepad++, Webstorm, or Komodo Edit) by

3. ❏ Open the C:\web4542\exercises\index.html file in the editor by selecting

What is currently specified for the page's title?

Welcome to Nui Manu Airlines

5. ❏ Feel free to change the title of the page if you like.

6. ❏ Locate the word "Home" that is inside the <header> element.

7. ❏ Use the <h1> tag to format the text "Home".

Each <section> element in a page should include a heading to title the

12. ❏ Open the whatsnew.html file in the editor.

Congratulations! You have formatted web pages with HTML <body>

If you have more time

Be sure to use the <h1> and <h2> elements within

This is the end of the exercise.

This exercise builds on the finished version of the previous exercise.

2. ❏ Open the whatsnew.html file an editor.

4. ❏ Remove the <br /> tags at the end of each step.

Be sure to close all tags.

The code for the list will look similar to:

6. ❏ Save the file and view it in your browser.

Adding hypertext links to your page

7. ❏ Reopen the index.html file in an editor.

8. ❏ Locate the sentence that begins with:

Remember that anchor tags must be closed:

The link should appear underlined and highlighted.

11. ❏ Test the link by clicking it.

12. ❏ In the editor, open the whatsnew.html file.

The following is an example of the code for the hypertext link:

<a href="index.html">Back to Home</a>

You may also need to place this in a new paragraph to

14. ❏ Save and test the document.

Congratulations! You have successfully used HTML formatting elements to

If you have more time

16. ❏ Save the file and view it in your browser.

Notice that all of the numbers in the list updated automatically.

18. ❏ Change the ordered lists to an unordered list.

Text string to link Link to

This is the end of the exercise.

Part 1: Adding static images to your web pages

This exercise builds on the finished version of the previous exercise.

2. ❏ Switch back to, or reopen, the index.html file in an editor.

You will now add an image to the top of the page.

3. ❏ Add the required HTML to embed the images/NuiManuLogo.jpg image as the

The code to embed the image may look like this:

<img src="images/NuiManuLogo.jpg" alt="Nui Manu

The above HTML will place the NuiManuLogo.jpg image at the

Your page should look similar to the following example:

5. ❏ Add the same NuiManuLogo.jpg image to the top of the whatsnew.html

6. ❏ Save and test in a web browser.

Part 2: Adding active images to your web pages