HTML L2 PDF

Web Design with XHTML, HTML, and CSS
- Level 2
Your Classroom Learning experience is just one part of the New Horizons learning solution; an enriching, dynamic
and valuable experience that includes Web-based resources during and after class.
The New Horizons learning solution includes online resources such as assessments, eCourseware and self-study
tutorials, making it the finest and most robust learning environment available.
A full electronic version of the user manual - eCourseware - is available for reference and use post-class. Updates to
the content within the eCourseware manual are automatic, providing you with access to the latest version of the
course material at all times.
To access eCourseware and other online resources for this class, visit www.newhorizons.com and select Student
Resources. New Horizons Learning Port a hosted, Web-based platform supports the delivery and management of
your post-class resources. For more information about other available learning options, contact your local New
Horizons Computer Learning Center.
(Note: Access keys are case-sensitive and must be entered exactly as displayed.)
To access your online resources:

1. Go to the New Horizons homepage at www.newhorizons.com.
2. Click the Student Resources link on the lower left side of the New Horizons homepage.
3. Click on the Learning Port link to log in to the site.
4. Log in to the Learning Port using one of the options below:
Option 1: Returning User -- if you have an existing classroom Learning Port account, enter your
Username and Password in the Registered Student area and click Login.
a) Once you are successfully logged in to Learning Port, the homepage will display.
b) Enter the Access Key box and click on Send.
c) Your online learning resources will be added to your Catalog.
-OR-
Option 2: New User -- if you are a new classroom Learning Port user, you will need to complete
the Personal Information form.
a) Begin by clicking on the Enroll button. The Access Key box will display.
b) Enter the Access Key in the Access Key box and click on Send.
c) The Personal Information form will display. Enter your information and click on Submit.
(Note: Remember to write down your Username and Password for future reference. This login will be used to
access post class resources for current and future classes.)
d) The student login page will display. Enter the Username and Password you created in your
new student profile and click Login.
e) Your online learning resources will be added to your Catalog.
Username:
Password:
This login provides access to class resources only. When creating your “Username” enter something unique such as adding the
letters ILT (Instructor Led Training) to the end of the name. This will set it apart from logins that you may use for other types of
online training.
Web Design with XHTML, HTML, and
CSS - Level 2
Part Number: NH85961 (CWEE)
Course Edition: 1.0
ACKNOWLEDGMENTS
Project Team
Content Developer: Praveena Jaipal • Content Manager: Harleen Sethi • Graphic Designer: Ganeshkumar B • Project
Manager: Lamayu A • Media Instructional Designer: Praveena Jaipal • Content Editor: Tayub Refai • Materials Editor: Arul M
• Quality Assurance Specialist: Shobana TS • Technical Reviewer: Jaron J Rubenstein • Project Technical Support: Mike
Toscano
NOTICES
DISCLAIMER: While Element K Corporation takes care to ensure the accuracy and quality of these materials, we cannot guarantee their accuracy, and all materials are provided without any warranty
whatsoever, including, but not limited to, the implied warranties of merchantability or fitness for a particular purpose. The name used in the data files for this course is that of a fictitious company. Any
resemblance to current or future companies is purely coincidental. We do not believe we have used anyone’s name in creating this course, but if we have, please notify us and we will change the name in
the next revision of the course. Element K is an independent provider of integrated training solutions for individuals, businesses, educational institutions, and government agencies. Use of screenshots,
photographs of another entity’s products, or another entity’s product name or service in this book is for editorial purposes only. No such use should be construed to imply sponsorship or endorsement of
the book by, nor any affiliation of such entity with Element K. This courseware may contain links to sites on the Internet that are owned and operated by third parties (the ″External Sites″). Element K is
not responsible for the availability of, or the content located on or through, any External Site. Please contact Element K if you have any concerns regarding such links or External Sites.
TRADEMARK NOTICES: Element K and the Element K logo are trademarks of Element K Corporation and its affiliates.
Microsoft® Internet Explorer 7 is a registered trademark of Microsoft Corporation in the U.S. and other countries; the Microsoft products and services discussed or described may be trademarks of the
Microsoft Corporation. All other product names and services used throughout this course may be common law or registered trademarks of their respective proprietors.
Mozilla Firefox™ 2 is a registered trademark of Mozilla Foundation in the U.S. and other countries; the Mozilla products and services discussed or described may be trademarks of Mozilla Foundation. All
other product names and services used throughout this course may be common law or registered trademarks of their respective proprietors.
Copyright © 2008 © 2008 Element K Corporation. All rights reserved. Screenshots used for illustrative purposes are the property of the software proprietor. This publication, or any part thereof, may not
be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, storage in an information retrieval system, or otherwise, without express written
permission of Element K, 500 Canal View Boulevard, Rochester, NY 14623, (585) 240-7500, (800) 478-7788. Element K Courseware’s World Wide Web site is located at
www.elementkcourseware.com.
This book conveys no rights in the software or other products about which it was written; all use or licensing of such software or other products is the responsibility of the user according to terms and
conditions of the owner. Do not make illegal copies of books or software. If you believe that this book, related materials, or any other Element K materials are being reproduced or transmitted without
permission, please call (800) 478-7788.
ii Web Design with XHTML, HTML, and CSS - Level 2

CONTENTS
WEB DESIGN WITH XHTML, HTML, AND
CSS- LEVEL 2
LESSON 1 - CREATING WEB PAGE LAYOUTS

A. Group Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
<div> Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
The overflow Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
<span> Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
B. Create Box Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
The Box Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
The position Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
The clear Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
The z-index Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
LESSON 2 - MANAGING CSS

A. Apply Advanced CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Advanced CSS Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
B. Create an External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
External CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
The <link> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
The @import Rule . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Style Sheet Precedence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
C. Apply a CSS to Multiple Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
D. Apply Browser-Specific CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Conditional Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
E. Provide Alternate CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Alternate CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Contents iii
CONTENTS
LESSON 3 - TESTING A WEBSITE
A. Test Markup . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
The W3C® Markup Validation Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
B. Test CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
The W3C® CSS Validation Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
LESSON 4 - CREATING ADVANCED NAVIGATION

A. Create CSS-Based Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Common Menu Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
The display Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
B. Incorporate Images in CSS-Based Menus . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
C. Create Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Image Maps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Image Map Elements and Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
LESSON 5 - INCORPORATING META-CONTENT AND MULTIMEDIA

A. Refresh and Redirect Pages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
<meta> Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
B. Link Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Media File Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
C. Embed Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Elements Used for Embedding Media . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Streaming . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Media MIME Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
LESSON LABS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

SOLUTIONS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149
GLOSSARY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
iv Web Design with XHTML, HTML, and CSS - Level 2

INTRODUCTION
ABOUT THIS COURSE

You know how to create a basic website. However, for your website to be successful, it must
stand out from the crowd and attract visitors. In this course, you will learn skills that will be
instrumental in creating advanced web pages.
A website without frills might not always be a crowd-puller, for many factors play a role in
attracting visitors to it. A sophisticated and attractive design, error-free code that works in all
browsers, advanced navigation options, and interactive content all help your website gain an
edge over the millions of other sites on the Internet. Incorporating such features in your
website will require more advanced skills in employing XHTML and CSS in web design.
Course Description
Target Student
This course is designed for persons who understand the fundamentals of XHTML, HTML, and
CSS and have used the three technologies to create basic web pages. It is aimed at individuals
interested in using these technologies to create advanced web pages and test their validity.
Course Prerequisites
Students should be familiar with using personal computers with a mouse and keyboard. Basic
typing skills are mandatory. You should be comfortable in the Windows environment and be
able to use Windows to manage information on your computer. Specifically, you should be
able to launch and close programs; navigate to information stored on the computer; and man-
age files and folders. Familiarity with Internet Explorer 7 and Firefox is an advantage. Apart
from these, the user should be familiar with Web Design with XHTML, HTML, and CSS -
Level 1.
Introduction v
INTRODUCTION
How to Use This Book
As a Learning Guide
Each lesson covers one broad topic or set of related topics. Lessons are arranged in order of
increasing proficiency with XHTML, HTML, and CSS; skills you acquire in one lesson are used
and developed in subsequent lessons. For this reason, you should work through the lessons in
sequence.
We organized each lesson into results-oriented topics. Topics include all the relevant and sup-
porting information you need to master XHTML, HTML, and CSS, and activities allow you to
apply this information to practical hands-on examples.
You get to try out each new skill on a specially prepared sample file. This saves you typing
time and allows you to concentrate on the skill at hand. Through the use of sample files,
hands-on activities, illustrations that give you feedback at crucial steps, and supporting back-
ground information, this book provides you with the foundation and structure to learn XHTML,
HTML, and CSS quickly and easily.
As a Review Tool
Any method of instruction is only as effective as the time and effort you are willing to invest
in it. In addition, some of the information that you learn in class may not be important to you
immediately, but it may become important later on. For this reason, we encourage you to
spend some time reviewing the topics and activities after the course. For additional challenge
when reviewing activities, try the ″What You Do″ column before looking at the ″How You Do
It″ column.
As a Reference
The organization and layout of the book make it easy to use as a learning tool and as an after-
class reference. You can use this book as a first source for definitions of terms, background
information on given topics, and summaries of procedures.
Course Objectives
In this course, you will create advanced web pages and test their validity.
You will:
• create web page layouts.
• manage CSS.
• test a website.
• create advanced navigation.
• incorporate meta-content and multimedia.
vi Web Design with XHTML, HTML, and CSS - Level 2

INTRODUCTION
Course Requirements
Hardware
• Intel® Pentium® 1 GHz or higher processor.
• 512 MB RAM or more.
• 10 GB available hard-disk space or more.
• CD-ROM or DVD-ROM drive.
• 1024 x 768 or higher resolution monitor.
• Microsoft Mouse, Microsoft IntelliMouse®, or a compatible pointing device.
• 14.4 Kbps or faster modem, and a multimedia computer with headphones or speakers to
access sound and other multimedia effects.
• Display system to project the instructor’s computer screen.
• Internet connection.
Software
• Microsoft® Windows® XP Professional with Service Pack 2
• Microsoft® Internet Explorer 7
• Mozilla Firefox™ 2 or above
• A source code editor, Notepad++ 4.6
• QuickTime Player 7 or above
• Adobe® Flash® Player plug-in for Internet Explorer
• Adobe® Flash® Player plug-in for Firefox
Class Setup
1. Install Windows XP Professional on the C drive using the following parameters:
a. Accept the license agreement.
b. Create a 4 GB partition on the C drive.
c. Format the C partition to NTFS.
d. Select the appropriate regional and language settings.
e. Enter the appropriate name and organization for your environment.
f. Enter the product key.
g. For each student computer, configure the settings:
— Name of computer: Computer# (where # is a unique integer representing the
student computer)
— Administrator password: password
— Select your time zone
— Select the Typical network configuration
2. Install Service Pack 2 for Windows XP.
Introduction vii
INTRODUCTION
3. Download and install Windows Internet Explorer 7 or Mozilla Firefox 2.0 or above.
— Windows Internet Explorer 7 can be downloaded at http://www.microsoft.com/
windows/downloads/ie/getitnow.mspx?wt_svl=20510a&mg_id=20510b.
— Mozilla Firefox 2.0 or above can be downloaded at http://www.mozilla.com/en-US/
firefox/.
4. Display the file extensions of your documents.
a. Choose Start→All Programs→Accessories→Windows Explorer.
b. In Windows Explorer, choose Tools→Folder Options.
c. Select the View tab and uncheck the Hide extensions for known file types check
box.
5. Install Notepad++ 4.6.
a. Open http://notepad-plus.sourceforge.net/uk/site.htm in Internet Explorer.
b. Click the Download link.
c. Under the Binary files heading, click the Download Notepad++ executable files
link.
d. In the SourceForge.net window, expand npp 4.6 bin.
e. Click the npp.4.6 Installer.exe link.
f. If you experience problems with the download, click the this direct link link.
g. In the File Download Security Warning dialog box, click Run.
h. In the Internet Explorer-Security Warning dialog box, click Run.
i. In the Installer Language dialog box, verify if English is selected and click OK.
j. In the Notepad++v.6 setup dialog box, click Next.
k. In the License Agreement dialog box, click I agree.
l. In the Choose Install Location dialog box, click Browse.
m. In the Browse For Folder dialog box, click Make New Folder and name it as
Notepad++ and click OK.
n. Click Next.
o. In the Choose Components dialog box, check the As default html viewer check
box.
p. Click Install.
q. Click Finish.
6. Install QuickTime Player 7.
a. Open http://www.apple.com/quicktime/download in Internet Explorer.
b. In the Download the free player pane, select the QuickTime 7.4.1 for Windows
XP or Vista option.
c. Click the Free Download Now link.
d. In the File Download - Security Warning message box, click Save.
e. Download and install the EXE file.
7. Install the Adobe® Flash® Player plug-in for Internet Explorer.
a. Open http://www.adobe.com in Internet Explorer.
b. Click the Get Adobe® Flash® Player link.
c. Follow the instructions on the web page to install the plug-in.
viii Web Design with XHTML, HTML, and CSS - Level 2

INTRODUCTION
® ®
8. Install the Adobe Flash Player plug-in for Firefox.
a. Open http://www.adobe.com in Firefox.
b. Click the Get Adobe® Flash® Player link.
c. Follow the instructions on the web page to install the plug-in.
9. Change the security settings for Internet Explorer.
a. Choose Start, right-click Internet Explorer and choose Internet Properties.
b. In the Internet Properties dialog box, select the Advanced tab.
c. Scroll down and in the Security section, check the Allow active content to run in
files on My Computer check box and click Apply.
d. Select the Security tab and click Custom level to launch the Security Settings -
Internet Zone dialog box.
e. In the Security Settings - Internet Zone dialog box, scroll down and in the ActiveX
controls and plug-ins section, select the Enable option under Allow previously
unused ActiveX controls to run without prompt.
f. Scroll down and select the Enable option under Display video and animation on a
webpage that does not use external media player.
g. In the Security Settings - Internet Zone dialog box, click OK.
h. In the Warning dialog box, click Yes.
i. In the Internet Properties dialog box click Apply and then click OK.
10. On the course CD-ROM, run the 085961dd.exe self-extracting file located within. This
will install a folder named 085961Data on your C drive. This folder contains all the data
files that you will use to complete this course. Solution files are also provided in this
folder. These files may help you find a possible solution if you are unable to proceed at
any point during the course. If you would like to view the final output or solution of an
activity, navigate to the respective Lesson\Solution folder.
List of Additional Files

Printed with each activity is a list of files students open to complete that activity. Many activi-
ties also require additional files that students do not open, but are needed to support the file(s)
students are working with. These supporting files are included with the student data files on the
course CD-ROM or data disk. Do not delete these files.
Introduction ix
x Web Design with XHTML, HTML, and CSS - Level 2
LESSON 1
LESSON 1 Lesson Time

1 hour(s), 40 minutes
Creating Web Page Layouts

In this lesson, you will create web page layouts.
You will:
• Group content using the <div> and <span> tags.
• Create box layouts.
Lesson 1: Creating Web Page Layouts 1

LESSON 1
Introduction
You have created basic web pages. Now it is time to present their content in a more organized
fashion, adding that professional touch. In this lesson, you will create web page layouts.
Presenting content in a clearly organized layout rather than a haphazard grouping increases the
user-friendliness and readability of a web page. These are important factors that influence
whether visitors return to your web page. You wouldn’t want someone visiting your website to
give up because it takes too much time to make sense of what is on the page. Thus, clear web
page layouts are essential to good web page design.
TOPIC A
Group Content
Web pages display content such as paragraphs of text, images, and hyperlinks. Sometimes you
need to apply a particular set of styles to several elements collectively or drill down to the
desired contents of a specific tag. In this topic, you will group content.
Suppose you want to apply certain styles to the first two paragraphs of your web page, or for-
mat particular letters or words in a paragraph. Using multiple inline styles is not good practice
as they are redundant and time-consuming to update, and they increase the likelihood of errors.
It would be far more convenient and efficient to apply the desired formatting to the specific
section of content in one go.
<div> Tags
The intent of the <div> container element, comprising an opening and closing tag, is to
enable web designers to logically group elements. In other words, it is used to divide one set
of related content from other content. These sections of content are called layers or logical
divisions. Formatting applied to a <div> tag is inherited by the elements it encapsulates. The
only visible effect of using the <div> element on its own is a line break at both the start and
end of the layer. This is because it is a block-level tag.
2 Web Design with XHTML, HTML, and CSS - Level 2

LESSON 1
Figure 1-1: <div> element containing logically grouped elements.
Child Elements
The elements within a container element, such as a <div> element, are its children or
child elements. The container element is the parent of these children. If any of these
child elements are container elements, they can contain child elements too.
The overflow Property

With the overflow property, you can determine how you want to display content that takes
up more space than the dimensions of the containing element will allow. This property is typi-
cally applied to the <div> element and controls whether or not the content that lies outside
the fixed dimensions of the layer should be visible, hidden, or scrollable.
Style Rule Description

overflow: scroll; Instructs the browser to make all the content accessible by scrolling. Both
vertical and horizontal scroll bars are displayed even if the content doesn’t
overflow the container.

LESSON 1
overflow: hidden; Instructs the browser to hide any content that doesn’t fit into the con-
strained region. Users have no way to access this hidden content.
overflow: visible; Instructs the browser to show all the content even if it overflows the area
of the container. This value is the default.
overflow: auto; Allows the browser to determine the best way to display all the content. If
the content extends beyond the size of the region, scroll bars are displayed.
If the content is small enough to fit within the region, it’s displayed nor-
mally.

LESSON 1
overflow: inherit; Instructs the browser to use the overflow value of the element’s parent
element, assuming the parent element is assigned a value.
<span> Tags
The <span> element, comprising an opening and closing tag, gives web designers a means to
group content without affecting page layout. Because it is an inline tag, browsers do not add
extra whitespace before or after it, as they would with block-level tags. You can apply CSS to
a <span> tag so that particular letters or words in your document are formatted as desired.
The style settings of the <span> tag override the styles these characters would normally
inherit from the tags that contain them or their parent elements.
Figure 1-2: Result of formatting applied to a <span> element containing text.

LESSON 1
How to Group Content
Procedure Reference: Group Content with the <span> Element
To group content with the <span> element:
1. Identify the section of content that is to be grouped.
2. Before the start of the section of content, type <span>.
3. After the end of the section of content, type </span>.
4. Assign an id or a class attribute to the <span> element with a suitable value.
5. Apply styles to the <span> element.
6. Save the file.
7. View the web page in Internet Explorer or Firefox so that the formatting applied
to the <span> element is visible.
Procedure Reference: Group Content with the <div> Element

To group content with the <div> element:
1. Identify the section of content that is to be grouped.
2. Before the start of the section of content, type <div> and press Enter.
3. Click after the end of the section of content, press Enter, and type </div>.
Line breaks are not needed for grouping content using the <div> element. However, they help
make the code more readable.
4. Assign an id or a class attribute to the <div> element with a suitable value.

5. If necessary, make the layer scrollable.
a. Within the <style> tags, create a selector based on the layer’s class or
id attribute value.
b. Set the value of the overflow property.
6. If necessary, apply more styles to the <div> element.

LESSON 1
ACTIVITY 1-1
Grouping Content
Data Files:
• history.html
• copyright.html
Before You Begin:

From the C:\085961Data\Creating Layouts\Activity 1 folder, open the history.html file in
Notepad++.
Scenario:
You have created a few basic pages for the Everything for Coffee website. You have received
input that the year on the History page needs to be formatted so that it stands out and the
lengthy text on the Trademarks page should be made scrollable.
Line numbers have been provided, but if any extra lines are added to the code, these numbers will no longer be
accurate. Ensure that you type the code correctly; otherwise, the results of the activity will not match the solu-
tions provided. Notepad++ does not provide any tools to quickly locate typing errors.

LESSON 1
What You Do How You Do It
1. Group the text “600 A.D.” within a. Choose Run→launch in IE to view the
<span> tags and format it. web page in Internet Explorer.
b. Observe that the text “600 A.D.” in the

first sentence does not stand out from the
other text on the page.
c. Close Internet Explorer and in the

Notepad++ editor, scroll down to line 66.
d. Click before “600” and type

<span class="special_formatting">
See Code Sample 1.
e. Click after the text “A.D.” and type

</span>
f. Click at line 60, the blank line above the

closing </style> tag, so that the inser-
tion point is within the <style> element.
g. Apply styles to the class

special_formatting so that the text
within the <span> tags gets formatted.
See Code Sample 2.
The hexadecimal value of the color property

contains zeroes, not the letter “o.” No hexa-
decimal value can contain the letter “o.”
h. Save the file.
Code Sample 1
<p id="bodytext"><strong>History of Coffee</strong><br />
The origin of coffee dates back to <span class="special_formatting">600 A.D.
Code Sample 2
.special_formatting{
font-weight: bold;
font-style: italic;
font-size: 14px;
color: #990000;
}
</style>

LESSON 1
2. View the formatted text in Internet a. Launch the web page in Internet Explorer.
Explorer and Firefox.
b. Observe that the text “600 A.D.” has been
formatted to stand out from the other
text on the web page.
c. Switch to Notepad++ and launch the file in

Firefox.
d. Observe that the text exhibits the same

formatting.
e. Close Firefox and Internet Explorer.

LESSON 1
3. Place the text on the Trademarks a. Open the copyright.html file in
page in a layer and make it Notepad++.
scrollable.
b. Scroll down so that the closing </html>
tag is visible.
c. In line 65, the line with the code <p id=

"bodytext">, click before p. Press
Delete and type div
See Code Sample 3.
d. Click at the beginning of line 73, the line

below the code <strong>Trademarks
</strong><br />, and press End to go
to the end of the line.
e. In the closing tag </p>, change p to div
f. Press Home so that the insertion point

moves to the beginning of the line of code
and the other lines of code can be seen.
g. Click at line 59, the blank line below the

code height: 250px; under the selec-
tor #bodytext.
h. Apply styles to the layer with id=

"bodytext" so that it becomes
scrollable and there is padding of 10 px on
its left.
See Code Sample 4.
i. Save the file.
Code Sample 3
<div id="bodytext">
<strong>Copyright</strong><br />
Code Sample 4
#bodytext{
width: 770px;
height: 250px;
overflow: auto;
padding-left: 10px;
}

LESSON 1
4. View the scrollable layer in Internet a. Launch the web page in Internet Explorer
Explorer and Firefox. and maximize the window.
b. Observe the scroll bar on the right of the

text.
c. Scroll down so that the rest of the text

can be seen.
d. Switch to Notepad++ and launch the file in

Firefox.
e. Maximize Firefox.
f. Observe that the text is scrollable.
g. Close Firefox and all Internet Explorer

windows.
h. In Notepad++, choose File→Close to close

the copyright.html file. Then, close the
history.html file.
TOPIC B
Create Box Layouts
You have grouped content in web pages. These sections of content should be positioned in a
logical and visually appealing manner. In this topic, you will create box layouts.
Your web page might have great content. But, it loses its edge if this content is not presented
clearly. More importantly, it could lose users’ attention. A well-designed layout with proper
spacing, positioning, and alignment engages users’ interest and is more likely to keep them on
your page.
The Box Layout

Definition:
A box layout is a web page layout built with <div> elements. The number of layers
used depends on how content needs to be divided on the web page. If required, layers
can be stacked on top of each other. They are positioned, sized, and aligned using
CSS. The border, padding, margin, and background-color properties can
also be applied to the layers. Fixed layouts, whose dimensions are set in pixels, retain
their original dimensions when the browser is resized. Fluid layouts, whose dimensions
are set in percentage, resize along with the browser window.

LESSON 1
Example:
Fluid Layouts
Fluid layouts have cross-browser compatibility issues. A fluid layout that looks great in
Firefox can look completely different in Internet Explorer. Issues vary with the brows-
er’s version as well.
Table Layouts
In the early days of web development, tables were a popular option for building lay-
outs. However, tables were never intended for this purpose and table layouts confuse
accessibility devices. Moreover, such layouts are difficult to update and their use is
discouraged. Web developers generally do not use them to create layouts.
Frames
Frames were used to create layouts that partition the browser window into independent
sections that can load different web pages. They are created by a frameset document,
an XHTML document in which the <body> tags are replaced by <frameset> tags,
that specifies how the browser window is to be divided. According to the XHTML 1.0
specification, frames are not valid under the strict and transitional DTDs. But the
frameset DTD allows you to use frames.
Since each frame loads a different page, they cause many problems. If you try pasting
a copied URL in a browser’s address bar, you simply open the frameset document, not
the appropriate pages within each frame. Similarly, they cause problems with book-
marks and launching a website from a search engine. They are difficult to print and are
problematic for accessibility devices. Furthermore, they increase the technical complex-
ity of a website. Thus, frames are considered bad practice and are not used to create
layouts.
Traditional vs. W3C Model

The dimensions of layers can be calculated according to two box models. The tradi-
tional model includes the padding and borders, if any, in the element’s width.
However, according to the W3C standard, padding and borders lie outside the
element’s width. In any case, the model that is used depends on the mode the browser
uses to interpret CSS.

LESSON 1
A browser can be in quirks, strict, or almost strict mode. Generally, early browser ver-
sions use quirks mode whereas most current browsers use strict or almost strict mode.
Browsers in quirks mode use the traditional model and those in strict mode use the
W3C model. Browsers in almost strict mode attempt to implement the W3C model.
However, the doctype that you set can trigger different modes in browsers.
The position Property

The position property is used to specify how an element is positioned on a web page.
However, the actual coordinates are specified using the left, right, top, and bottom
properties.

position: static; An element with this setting takes the position
given to it by the web page. But it ignores any
left, right, top, or bottom settings.
position: absolute; An element with this setting is placed at the speci-
fied coordinates relative to the top-left corner of its
container element.
position: fixed; An element with this setting is placed at the speci-
fied coordinates relative to the top-left corner of
the browser window. Despite scrolling, the element
remains at the same position.
position: relative; An element with this setting is placed relative to
the position it would normally take on the web
page. So, top:30px; adds 30 pixels to the
default top position of the element.
The clear Property

You can make elements appear side-by-side in the browser by using the float property. The
clear property allows you to prevent floating content from appearing on a particular side or
both sides of an element by forcing the content to the next line.
Figure 1-3: Effect of the clear property.

LESSON 1
clear: left; An element with this setting does not allow any
floating elements to its left.
clear: right; An element with this setting does not allow any
floating elements to its right.
clear: both; An element with this setting does not allow any
floating elements on either side.
clear: none; An element with this setting allows floating ele-
ments on both sides. This is the default value.
Floating Content
Floating content is any content that appears next to an element in the browser. In order
to float on a particular side, the float property need not be applied to the content.
Consider a web page that has two <p> elements with some text. By default, they
would appear one below the other in the browser. Applying the style rule float:
left; to the first <p> element will make both <p> elements appear side-by-side,
although you have not set the float property for the second <p> element. So the
second <p> element is floating content even though the float property has not been
applied to it. If you apply the style rule clear: left; to the second <p> element
it would appear on the second line. Alternatively, applying the style rule clear:
right; to the first <p> element would have the same effect.
The z-index Property

The z-index property allows you to stack elements on top of each other. You can also
change the order in which the elements are stacked. It may take a positive or negative integer
value. Elements with higher values are placed on top of those with lower values. The default
z-index of an element is 0. However, this property only affects elements whose position
is set as absolute.
Figure 1-4: Code that places an image on top of a heading.

LESSON 1
How to Create Box Layouts
Procedure Reference: Set the Placement of an Element with the position Prop-
erty
To set the placement of an element with the position property:
1. Identify the element whose placement is to be set.
2. Within the <style> element, create a selector for this element.
3. Set the value of the position property for this element to control how it is dis-
played.
4. Set the element’s coordinates using the left, right, top, or bottom proper-
ties.
Procedure Reference: Control Floating Content with the clear Property

To control floating content with the clear property:
1. Identify the element that should not allow floating content on a particular side or
both sides.
2. Within the <style> element, locate the selector corresponding to this element.
3. Set the clear property for this element.
If inline styles have been set, you can set the clear property inline. However, it is better prac-
tice to use an embedded style sheet.
Procedure Reference: Stack Elements

To stack elements:
1. Identify the elements that are to be stacked on top of each other.
2. Set the style rule position: absolute; for each element that is to be
stacked.
3. For the element to be placed at the bottom of the stack, set the z-index prop-
erty as a negative or positive integer.
4. For the element to be placed above the lowest element, set the z-index property
as a higher integer value.
5. Similarly, set the z-index property for the remaining elements with successively
increasing integer values.
Procedure Reference: Create a Box Layout

To create a box layout:
1. Identify the different sections of content in the code.
2. Encapsulate each section of content between an opening <div> tag and a closing
</div> tag.
3. Set id or class attributes for the layers so that styles can be applied to them.
4. Apply styles to control the positioning and appearance of the layers and the ele-
ments within them.

LESSON 1
ACTIVITY 1-2
Creating a Layout with Three Rows
Data Files:
• copyright.html
Before You Begin:

From the C:\085961Data\Creating Layouts\Activity 2 folder, open the copyright.html file in
Notepad++.
Scenario:
After taking a look at how the website is coming along, your manager asks you to organize the
content into a box layout for a more professional appearance. Your manager needs to approve
the layout before it is applied to all web pages of the website, so you will create a sample lay-
out comprising three rows for just one web page. Since the appearance of the web page will
require new style rules, you have deleted the unnecessary style rules in the embedded style
sheet.

LESSON 1
1. Group content in layers correspond- a. Scroll down so that the closing </html>
ing to the header, footer, and parent tag is visible.
container.
b. Select the code in line 34, the line below
the <body> tag, and delete it.
See Code Sample 1.
Clicking a line number or to the left of a line

number will select the corresponding line of
code. Holding down Shift and clicking line
numbers allows you to select multiple lines of
code. However, when you delete code selected
by this method, you do not get a blank line in
which to type new code. In this case, line num-
bers in the instructions will not match the line
numbers in the datafiles.
c. Type
<div id="header" ⇒
title="Everything for ⇒
Coffee.com"> </div> to create a
layer that will replace the deleted code.
See Code Sample 2.
The ⇒ character identifies a line that is too

long to fit in the printed book. You should
enter it as one line in your editor.
d. In line 43, select the code <hr /><p>

and delete it.
See Code Sample 3.
e. Type <div id="footer">
f. In line 45, select the </p> tag below the

hypertext links and delete it.
g. Type </div> to encapsulate the

hypertext links in a layer.
h. In line 33, click after the code <body>,

press Enter, and type
<div id="container">
See Code Sample 4.
i. Click at line 47, the blank line above the

LESSON 1
tag <p class="footer-note">. Type
</div> to encapsulate most of the
<body> element’s content in a parent
container.
See Code Sample 5.
Code Sample 1
<body>
<p><img src="images/Banner1.png" alt="Everything For Coffee.com" width=
"778" height="152" /></p>
<div id="content">
Code Sample 2
<body>
<div id="header" title="Everything for Coffee.com"> </div>
<div id="content">
Code Sample 3
</div>
<hr /><p>
<a href="index.html">Home</a>
Code Sample 4
<body>
<div id="container">
Code Sample 5
</div>
</div>
<p class="footer-note">

LESSON 1
2. Apply styles to set the position and a. Click at line 30, the blank line above the
appearance of the layers and their closing </style> tag.
content.
b. Apply styles to the container layer with
id="container" to set its width, mar-
gins, and background color.
See Code Sample 6.
The margin setting centers the content on the

web page because the browser automatically
calculates the left and right margins.
c. Press Enter to create a blank line.
d. Apply styles to the header layer to set its

size and background image.
See Code Sample 7.
e. Press Enter to create a blank line.
f. Apply styles to the content layer to set

its size, margins, padding, and the
appearance of its text.
See Code Sample 8.
g. Press Enter to create a blank line.
h. Apply styles to the footer layer to set its

background color and the appearance of
its text.
See Code Sample 9.
i. Save the file.
Code Sample 6
#container{
width: 778px;
margin: 0 auto;
background-color: #FFFFFF;
}
</style>
Code Sample 7
#header{
width: 100%;
height: 151px;
float: left;
background: url(images/Banner1.png) no-repeat left top;

LESSON 1
}
</style>
Code Sample 8
#content{
width: 748px;
height: 300px;
clear: both;
text-align: justify;
font-size: 12px;
line-height: 16px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
overflow: auto;
margin: 10px 0;
}
</style>
Code Sample 9
#footer{
clear: both;
color: #FFFFFF;
background-color: #3C0C0C;
text-align: center;
font-size: 11px;
line-height: 24px;
}
</style>
3. View the layout in Internet Explorer a. Launch the web page in Internet Explorer
and Firefox. and maximize the window.
b. Observe that the content has been orga-

nized into a header, body, and footer.
c. From Notepad++, launch the file in

Firefox.
d. Observe that the same layout is displayed.
f. In Notepad++, choose File→Close to close

the copyright.html file.
Do not close the Notepad++ application. Close

the copyright.html file. If you close the
Notepad++ application without first closing the
file, the same file will be open in Notepad++
the next time you launch the application.

LESSON 1
ACTIVITY 1-3
Creating a Layout with a Header and Two Columns
Data Files:
• copyright.html
Before You Begin:

Notepad++.
Scenario:
After you submit your first layout design, your manager requests an alternative design so that
the clients can choose the layout they prefer. You decide to alter your first design by incorpo-
rating columns instead of rows below the header image. You have deleted the styles that will
not be required in this design.

LESSON 1
1. Group content into two columns a. Scroll down so that the closing </html>
below the header. tag is visible.
b. Click at the end of line 49, after the code

<div id="content"> and press Enter.
c. Press Tab and type

<div id="left_panel"> </div>
to create the left column inside the
content layer.
See Code Sample 1.
The character between the two words is an

underscore not a hyphen.
d. Press Enter and type

<div id="right_col">
See Code Sample 2.
e. Click at line 58, the blank line above the

code </div> .
f. Press Tab and type </div> to place all

the text inside the layer with
id="right_col".
Code Sample 1
<div id="content">
<h2>Copyright</h2>
Code Sample 2
<div id="content">
<div id="right_col">
<h2>Copyright</h2>

LESSON 1
2. Delete the footer layer and place the a. Click at the beginning of line 62, the line
links with the trademark message. below the code <div id="footer">.
b. Select the hypertext links in lines 62 and

63.
c. Right-click and choose Cut to cut the

selected lines of code.
d. Click at line 66, the blank line below

<p class="footer-note">.
e. Right-click and choose Paste to paste the

hypertext links inside the <p> element
with class="footer-note".
See Code Sample 3.
f. Press Enter and type <br/><br/> to give

two line breaks between the hypertext
links and the trademark message.
g. Click at the beginning of line 60, before

the <hr /> tag.
h. Select the horizontal rule and the opening

and closing tags of the layer with
id="footer".
i. Delete the selected code.
See Code Sample 4.
Code Sample 3
<div id="footer">
</div>
</div> 
<p class="footer-note"><a href="index.html">Home</a> |<a href=
"copyright.html">Trademarks & Copyrights</a>
|<a href="history.html">History of Coffee</a>
This website represents a fictitious organization and is used for training
purposes.</p>
Code Sample 4
</div> 
<hr />
<div id="footer">
</div>

LESSON 1
3. Apply styles to set the position and a. Click at line 41, the blank line below the
appearance of the columns and the code #content{ and press Tab.
layer that contains them.
b. Apply styles to the layer with id=
"content" to set its width and
background color. Set the clear property
so that no floating content is allowed on
either side of the layer.
See Code Sample 5.
c. Click at line 45, the blank line above the

closing </style> tag.
d. Apply styles to the layer with id=

"left_panel" to set its size,
background color, and float as left.
See Code Sample 6.
f. Apply styles to the layer with id=

"right_col" to set its size, padding,
and margins. Make it float, set the
appearance of its text, and make the text
scrollable.
See Code Sample 7.
g. Save the file.
Code Sample 5
#content{
width: 100%;
background-color: #FFFFFF;
clear: both;
}
Code Sample 6
#left_panel{
width: 196px;
height: 345px;
background-color: #88775B;
float: left;
}
</style>
Code Sample 7
#right_col{
width: 552px;
height: 300px;
padding-top: 15px;
padding-right: 15px;

LESSON 1
padding-left: 15px;
margin: 10px 0;
float: left;
text-align: justify;
font-size: 12px;
line-height: 16px;
overflow: auto;
}
</style>
4. View the layout in Internet Explorer a. Launch the file in Internet Explorer and
and Firefox. maximize the window.
b. Observe that the layout comprises the

image in the header, two columns below
it, and the hypertext links at the bottom.
c. Close Internet Explorer and launch the file

in Firefox.
d. Observe that the hypertext links and

trademark message appear to the right of
the layout and the background color of
the layer containing the text is not white.
The layout appears incorrectly in Firefox due to

a browser compatibility issue.
e. Close Firefox.

LESSON 1
5. Correct the mistake in the layout. a. Scroll down and click at the beginning of
line 80, before the code </div>
 and press
Enter.
b. Click the blank line created and type

<div class="clear"></div>
See Code Sample 8.
c. Click before the closing </style> tag

and press Enter. Place the insertion point
in the blank line created.
d. Apply styles to the layer with class=

"clear" so that it does not allow any
content to appear on either side of the
layout.
See Code Sample 9.
e. Save the file.
Code Sample 8
<div class="clear"></div>
</div> 
Code Sample 9
.clear{
clear: both;
}
</style>

LESSON 1
6. View the corrected layout in Firefox a. Launch the file in Firefox.
and Internet Explorer.
b. Observe that the layout is correct now,
with the hypertext links and trademark
message at the bottom. The background
color of the right column is white.

Internet Explorer. Maximize the window.
d. Observe that the layout is also displayed

correctly in Internet Explorer.
e. Close Internet Explorer and Firefox.
f. In Notepad++, close the copyright.html

file.
ACTIVITY 1-4
Creating a Layout with a Header, Two Columns, and a
Footer
Data Files:
• copyright.html
Before You Begin:

Notepad++.
Scenario:
The clients have seen both the layouts and they have requested a layout that combines features
from both of them. Specifically, they want the layout with columns modified to include the
footer from the first design.

LESSON 1
1. Create the footer layer. a. Scroll down so that the closing </html>
tag is visible.
b. Click at line 88, the blank line above the

code </div> .
c. Press Tab, type <div id="footer">

and press Enter twice.
d. Type </div> to close the layer with

id="footer".
See Code Sample 1.
Code Sample 1
<div id="footer">
</div>
2. Place the hypertext links in the a. Click at the beginning of line 93, below
footer layer. the code <p class="footer-note">.
b. Select the two lines of code containing

the hypertext lines.
c. Cut the selected code.
d. Click at line 89, the line below the code

<div id="footer"> and paste the code
so that the hypertext links are in the
footer layer.
See Code Sample 2.
e. In line 95, delete the code <br/><br/>

to remove the line breaks.
Code Sample 2
<div id="footer">
<a href="index.html">Home</a> |<a href="copyright.html"> ⇒
Trademarks & Copyrights</a>
|<a href="history.html">History of Coffee</a>
</div>

LESSON 1
3. Apply styles to the footer layer. a. Click at line 69, the blank line above the
</style> tag.
b. Apply styles to the footer layer to set its

background color and the appearance of
its text. Set the clear property so that
no content is allowed on either side of the
layer.
See Code Sample 3.
c. Save the file.
Code Sample 3
#footer{
color: #FFFFFF;
text-align: center;
font-size: 11px;
line-height: 24px;
clear: both;
}
</style>
4. View the modified layout in Internet a. Launch the file in Internet Explorer and
Explorer and Firefox. maximize the window.
b. Observe that the layout has a header, two

columns, and a footer.
c. Launch the file in Firefox.
d. Observe that the layout looks the same in

Firefox.
f. Close the copyright.html file.

LESSON 1
Lesson 1 Follow-up
In this lesson, you organized the content of a web page by creating web page layouts. Such
layouts enhance the user-friendliness and readability of the page, making visitors more likely
to return to it.
1. What circumstances would require you to group content on the job?
2. How will you use web page layouts to enhance the presentation of content in a web
page?

LESSON 2

Managing CSS
In this lesson, you will manage CSS.
You will:
• Apply advanced CSS selectors.
• Create an external CSS.
• Apply a CSS to multiple pages.
• Apply browser-specific CSS.
• Provide alternate CSS.
Lesson 2: Managing CSS 31

LESSON 2
Introduction
You have created web page layouts for better organization of content. The next step is to fur-
ther enhance the visual appeal of your web pages using CSS. In this lesson, you will manage
CSS.
Consolidated styles in a single location can easily be applied to all pages of a website, rather
than writing styles for each web page. This harnesses the true power of CSS, with a single
change in one location updating all linked pages. However, efficiency is just one aspect of
good design. A well-designed website should not only display as intended in different brows-
ers, it should also have provisions to help users with accessibility issues. These professional
touches help your website reach a wider audience.
TOPIC A
Apply Advanced CSS Selectors
CSS are used to control the visual appearance of all elements on a web page. Some situations
call for specific formatting of particular elements. In this topic, you will apply advanced CSS
selectors.
You might need to apply specific formatting to the first child element of every <div> tag, or
to the last child element of a certain element. Perhaps every child element of elements with a
particular id or class attribute requires unique formatting. In such cases, advanced selectors
allow you to easily refer to the elements that are to be formatted.
Advanced CSS Selectors

Advanced CSS selectors can help you select elements based on their positions in the docu-
ment’s markup, as well as their parents or attribute values.
Selector Description
#myid p Selects any <p> element that is the child of an
element with id="myid". This selector is sup-
ported by IE 6 and IE 7.
.myclass p Selects any <p> element that is the child of an
element with class="myclass". This selector
is supported by IE 6 and IE 7.
* Selects all elements on the page. This selector is
supported by versions of IE below IE 7.
body > p Selects any <p> element that is a direct child of
the <body> element. It does not apply to a <p>
element within a <div> element in the <body>
section as it is not a direct child of the <body>
element. This selector is not supported by versions
of IE earlier than IE 7.

LESSON 2
Selector Description
p[class] Selects any <p> element with a class attribute.
The attribute can have any value. This selector is
not supported by versions of IE earlier than IE 7.
p[class=myclass] Selects any <p> element with the attribute
class="myclass". This selector is not sup-
ported by versions of IE earlier than IE 7.
p[class~=my] Selects any <p> element with a class attribute
one of whose values is "my". The values should
be separated by spaces, so that a <p> element
with class="my class" would be selected.
However, if the <p> element has class=
"myclass" it does not get selected. This selector
is not supported by versions of IE earlier than IE
7.
p[class^=mi] Selects any <p> element if the value of its class
attribute starts with "mi," so that a <p> element
with class="mine" would be selected. This
selector is not supported by versions of IE earlier
than IE 7.
p[class$=ne] Selects any <p> element if the value of its class
attribute ends with "ne," so that a <p> element
than IE 7.
p[class*=in] Selects any <p> element if the value of its class
attribute contains "in," so that a <p> element
than IE 7.
div + p Selects any <p> element that directly follows a
<div> element. This selector is not supported by
versions of IE earlier than IE 7.
div ~ p Selects any <p> element that follows a <div>
element. The <p> element does not have to
directly follow the <div> element. This selector
is not supported by versions of IE earlier than IE
7.
p.cl1.cl2 Selects any <p> element with two values in its
class attribute, such as class="cl1 cl2".
However, the selector p.cl1 will select this <p>
element as well as any <p> element with class=
"cl1". Versions of IE earlier than IE 7 are unable
to correctly interpret this type of selector.
Browser Support of Selectors

Several advanced selectors are not supported by certain browsers. This is especially
true of early versions of browsers. Due to this, web developers primarily use id and
class attributes as selectors and avoid using advanced selectors. It is not common
practice to use class attributes that have more than value separated by spaces.

LESSON 2
How to Apply Advanced CSS Selectors
Procedure Reference: Apply Advanced CSS Selectors
To apply advanced CSS selectors:
1. Identify the element or elements that require specific formatting.
2. In the <style> element, type the appropriate advanced CSS selector that refers
to these elements.
3. Type { after this selector and press Enter.
4. Write the desired style rules.
5. Below the style rules, type the closing brace }.
6. Save the file.
7. Launch the file in a browser to view the results of the styles that have been
applied.
ACTIVITY 2-1
Applying Advanced CSS Selectors
Data Files:
• copyright.html
Before You Begin:

From the C:\085961Data\Managing CSS\Activity 1 folder, open the copyright.html file in
Notepad++.
Scenario:
You have noticed that the hypertext links in the footer of the Trademarks page are the wrong
color. You need to correct this error in the file’s embedded CSS. You also decide to ensure that
the styles apply only to hypertext links in the page’s footer, in case other hypertext links are
later added to different sections of the web page that require different styles.

LESSON 2
1. View the Trademarks page in a. Launch the copyright.html file in Internet

Internet Explorer. Explorer and maximize the window.
b. Observe that the hyperlinks in the page’s

footer are not white so they are hardly
visible. They are underlined and there is
no space between them.
The same errors are seen in Firefox.
c. Close Internet Explorer.

LESSON 2
2. Correct the appearance of the a. Scroll down so that the closing </html>
hypertext links. tag is visible.
b. Observe the code from lines 91 through

94. The anchor tags are within a layer
with id="footer". These anchor tags
are the children of that layer.
c. Place the insertion point in line 73, the

blank line above the closing </style>
tag.
d. Type the selector #footer a to refer to

anchor tags that are children of an ele-
ment with id="footer".
See Code Sample 1.
e. Type { and press Enter.
f. Apply styles to the hypertext links in the

layer with id="footer". The styles
should set the color and size of the text,
remove the underline, and add some
space between the links.
See Code Sample 2.
g. Save the file.
Code Sample 1
#footer a
</style>
Code Sample 2
#footer a{
color: #FFFFFF;
font-size: 11px;
text-decoration: none;
padding: 0 10px;
}
</style>

LESSON 2
3. View the corrected hypertext links in a. Launch the file in Internet Explorer and
Internet Explorer and Firefox. maximize the window.
b. Observe that the hypertext links in the

footer are white and they are not under-
lined. They are also easier to read
because they have been spaced out.
d. Launch the file in Firefox.
e. Observe that the hypertext links look the

same in Firefox as they did in Internet
Explorer. They are white, not underlined,
and they have been spaced out.
f. Close Firefox.
g. In Notepad++, close the copyright.html

file.
TOPIC B
Create an External CSS
You have applied advanced CSS selectors within an embedded CSS. However, consolidating
styles in one location is more efficient than implementing multiple style sheets. In this topic,
you will create an external CSS.
When each page contains the styles relevant to it, you are restricted to altering their appear-
ance individually. If the same styles have been applied to several pages, embedded style sheets
are redundant. Moreover, multiple styles in disparate locations are error prone and time con-
suming to debug and update. Placing all styles in a single consolidated location avoids such
difficulties.
External CSS
An external CSS is a file with the extension .css that contains styles to be applied to a web
page or multiple web pages. Styles in an external CSS are not enclosed within <style> tags.
In order to apply an external CSS to a web page, you must link it to the web page. An exter-
nal CSS can be linked to many web pages. You can also link multiple external CSS to the
same page. A change in the external CSS affects all the pages that are linked to it.

LESSON 2
Figure 2-1: An external CSS that is linked to multiple web pages.
The <link> Tag

The <link> tag is primarily used to link external style sheets to an XHTML document. It
must be placed in the <head> section of the XHTML document. Its syntax is as follows:
<link rel="stylesheet" type="text/css" href="filename.css" />The rel attribute
identifies the nature of the relationship between the two linked documents. The type attribute
specifies the kind of document that is linked to the XHTML document. The href attribute
indicates the path to the external style sheet. The order of the attributes does not matter, but
they are mandatory. Multiple <link> tags can be used to link several external CSS to the
XHTML file.
Persistent and Preferred Style Sheets

A style sheet linked with the default syntax of the <link> tag is known as a persis-
tent style sheet. However, if the optional title attribute is specified, the style sheet
becomes a preferred style sheet. When a page loads in the browser window, both per-
sistent and preferred style sheets are applied to it. If there is more than one preferred
style sheet, Internet Explorer applies all of them to the web page. However, in other
browsers, only the first preferred style sheet is applied to the web page. This is
because preferred style sheets are mutually exclusive in browsers other than Internet
Explorer. Setting the same title for several style sheets groups them together so that
the browser treats them as one style sheet. Firefox’s menu allows you to choose
between preferred style sheets based on their titles. When you pick a different pre-
ferred style sheet, the page no longer retains the styles of the previous preferred style
sheet. Internet Explorer requires scripting to provide this functionality to a user.
The @import Rule

The @import rule is another method of linking an external style sheet to an XHTML docu-
ment. There are two forms of syntax it may follow:
@import "filename.css";
@import url(filename.css);Unlike the <link> tag, the @import rule does not have any
attributes. So, you cannot set the relationship or title of an external CSS. Such rules are
placed within the <style> element of an XHTML document. Alternatively, they can be
placed at the beginning of an external style sheet that is in turn linked to a web page. This
nesting of styles in an external CSS is not possible with the <link> tag.

LESSON 2
If the external CSS is not in the same folder as the web page that it is linked to, you will have to specify the rela-
tive path of the external CSS as well as the file’s name.
Early versions of browsers malfunctioned when they encountered CSS rules that they did not support. Such
browsers were also unable to recognize the @import rule, whereas more advanced browser versions could rec-
ognize it. Web designers took advantage of this functionality using the @import rule to hide style sheets from
browsers that did not support them. However, this is no longer an issue with current browser versions. So, the
@import rule is no longer used for this purpose.
Style Sheet Precedence

Style sheets may be inline, embedded, or external. When multiple style sheets contain the same
style rule, the style closest to the element is the one that gets applied. In other words, lower-
level styles override higher-level styles. So, if an external style sheet and an embedded style
sheet both apply the same style rules to an element, the element exhibits the embedded style
sheet’s formatting. Similarly, inline styles override embedded and external style sheets.
However, the order in which styles are placed is the key factor in style sheet precedence. If a
<link> tag is placed after the <style> section of an embedded style sheet, the external
CSS takes precedence. When multiple external CSS have been linked, the last one takes high-
est precedence. Similarly, if a CSS contains two rules using the same property for the same
selector, the second rule comes into effect.
Figure 2-2: Precedence of an inline style over embedded and external style sheets.
The W3C provides information on the precedence of style sheets at http://www.w3.org/TR/REC-CSS2/

cascade.html#cascade.
How to Create an External CSS

Procedure Reference: Create an External CSS
To create an external CSS:
1. In your editor, open the web page.
2. In the <style> element, select the desired styles and copy the selected styles.
3. In your editor, create a new file and paste the copied styles.

LESSON 2
4. Save the file as filename.css in the same folder as the web page to create an exter-
nal CSS.
You can save the external CSS in another folder but it is usually saved in the same folder as the
web page.
5. In the .html file, delete the <style> element and all the styles within it.
6. Link the external CSS to the web page.
• In the <head> element below the <title> element, type
<link rel="stylesheet" type="text/css" href="filename.css" />
• In the <head> element below the <title> element, type
@import "filename.css";
• Or, in the <head> element below the <title> element, type
@import url(filename.css);
The code filename.css will have to include the relative path of the external CSS as well as
the file name if the external CSS is not in the same folder as the web page.
7. Save the file.

8. View the web page in a browser to observe that the styles in the external CSS are
applied to the web page.
If the styles do not seem to be in effect, check the syntax of the code linking the external CSS to
the web page. If the syntax is correct and styles still seem to be missing when the page displays,
you have forgotten to add those styles to the external CSS. If you make a change in the external
CSS, you must save the style sheet before viewing the web page in a browser in order to see the
effect of this change.

LESSON 2
ACTIVITY 2-2
Creating an External CSS
Data Files:
• copyright.html
Before You Begin:

From the C:\085961Data\Managing CSS\Activity 2 folder, open the copyright.html file in
Notepad++.
Scenario:
Now that you have finalized the layout and style of the Trademarks page, the file contains a
lot of code corresponding to the style rules. You need to make this code more manageable so
that the appearance of the web page can be easily updated.
1. Create an external CSS. a. Launch the copyright.html file in Internet

Explorer and maximize the window.
b. Observe the appearance of the web page.

The layout comprises a header, two col-
umns below it, and a footer. It is
surrounded by a brown background. The
text is on a white background with a scroll
bar and the hypertext links in the footer
are white.
d. In Notepad++, select all the code between

the opening <style> tag and the closing
</style> tag.
e. Copy the selected code.
f. Choose File→New to create a new file.
g. In the new file, paste the copied code.
h. Save the file as style.css in the same

folder as copyright.html.

LESSON 2
2. Delete the embedded style sheet. a. Select the copyright.html tab.
b. Delete the selected code.
c. Select the opening and closing tags of the

<style> element.
d. Delete the selected code.
3. Link the external CSS to the web a. In the blank line above the closing
page. </head> tag, type
<link rel="stylesheet" ⇒
type="text/css" ⇒
href="style.css" />
See Code Sample 1.
b. Save the copyright.html file.
c. Launch the copyright.html file in Internet

d. Observe that the web page displays prop-

erly in Internet Explorer. All the styles
that were applied by the embedded style
sheet are still in effect.
e. Close Internet Explorer.
f. Launch the copyright.html file in Firefox.
g. Observe that the web page also displays

properly in Firefox. Close Firefox.
h. In Notepad++, close the copyright.html

and style.css files.
Code Sample 1
<title>Trademarks | Everything for Coffee</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

LESSON 2
TOPIC C
Apply a CSS to Multiple Pages
You have created an external CSS. However, all the pages of a website should have a consis-
tent style. In this topic, you will apply a CSS to multiple pages.
The purpose of an external style sheet is to consolidate styles for all pages of a website,
thereby reducing redundancy and promoting a consistent style. It also cuts down on the work
needed to update pages, as a single change in the CSS reflects on all pages it is linked to.
However, these consolidated styles have no effect unless they are linked to all the pages of the
website.
How to Apply a CSS to Multiple Pages

Procedure Reference: Apply a CSS to Multiple Pages
To apply a CSS to multiple pages:
1. In your editor, open the external CSS and all the pages to which it is to be
applied.
2. Add the unique styles from the other pages to the external CSS.
a. Select the unique styles in the web page’s embedded style sheet.
b. Paste the copied styles in the external CSS.
c. Save the external CSS.
d. Repeat this for the unique styles in the other pages.
3. Delete the embedded style sheets in the web pages.
4. Link the external CSS to each web page and save the web page.
5. View the web page in a browser to observe that the styles in the external CSS are
applied to the web page.

LESSON 2
ACTIVITY 2-3
Applying a CSS to Multiple Pages
Data Files:
• index.html
• history.html
• style.css
Before You Begin:

From the C:\085961Data\Managing CSS\Activity 3 folder, open the style.css, index.html, and
history.html files in Notepad++. The history.html tab should be selected.
Scenario:
You have applied the layout comprising a header, two columns, and a footer to all the pages of
your website, resulting in redundant styles in the embedded style sheets of the History and
Trademarks pages. Your manager asks you to make the styles of the website more efficient
and easier to update so that other developers can work on them as required.
1. View the History and Home pages in a. Launch the history.html file in Internet
Internet Explorer. Explorer and maximize the window.
b. Observe the appearance of the History

page. The layout comprises a header, two
columns below it, and a footer. It is sur-
rounded by a brown background. The text
is on a white background and “600 A.D.”
has been formatted to stand out from the
other text. The hypertext links in the
footer are white.
c. In the web page’s footer, click the Home

link.
d. Observe the appearance of the Home

page. The layout and color scheme is the
same, but the right column below the
header contains an image instead of text.

LESSON 2
2. Add the unique styles of the History a. In the history.html file, scroll down to line
page to the external CSS. 80, the line with the code
.special_formatting{. The closing
</style> tag should also be visible.
b. Select the selector

.special_formatting and all the
styles under it.
c. Copy the selected code.
d. Select the style.css tab.
e. Scroll down to line 73, the last line in the

file. In this line, place the insertion point
after } and press Enter.
f. Paste the copied code. Press Enter to cre-

ate a blank line.
3. Add the unique styles of the Home a. Select the index.html tab.
page to the external CSS.
b. Scroll down to line 80, the line with the
code #img1. The closing </style> tag
should also be visible.
c. Select the styles under the selectors

#img1 and #img1 img.
The #img1 selector refers to the layer that

contains the image. In the other web pages,
this layer has the attribute id="text". How-
ever, the image on the home page requires
different styles than the text on the other pages
so the layer has been give a different id. The
selector #img1 img refers to any <img>
element that is the child of an element with
id="img1".
d. Copy the selected code.
e. Select the style.css tab.
f. In line 80, the blank line that is the last

line in the file, paste the copied code.
g. Save the style.css file.

LESSON 2
4. Delete the embedded style sheets in a. Select the history.html tab.
the History and Home pages.
b. Select the <style> element and all the
styles within it.
c. Delete the selected code.
d. Select the index.html tab.
e. Select the <style> element and all the

styles within it.
f. Delete the selected code.
5. Link the external CSS to the web a. In line 6, the blank line above the closing
pages. </head> tag, type
type="text/css" ⇒
href="style.css" />
See Code Sample 1.
b. Save the index.html file.
c. Select the history.html tab.
d. In line 6, the blank line above the closing

</head> tag, type
type="text/css" ⇒
href="style.css" />
See Code Sample 2.
e. Save the history.html file.
Code Sample 1
<title>Home | Everything for Coffee</title>
</head>
Code Sample 2
<title>History | Everything for Coffee</title>
</head>

LESSON 2
6. View the pages of the website in a. Launch the history.html file in Internet
Internet Explorer and Firefox. Explorer and maximize the window.
b. Observe that the web page displays prop-

erly in Internet Explorer. All the styles
that were applied by the embedded style
sheet are still in effect.
c. In the web page’s footer, click the Home

link.
d. Observe the appearance of the Home

page. All the styles that were applied by
the embedded style sheet are still in
effect.
f. Launch the history.html file in Firefox.
g. Observe that the web page also displays

properly in Firefox.
h. In the web page’s footer, click the Home

link.
i. Observe that the web page also displays

properly in Firefox. Close Firefox.
j. In Notepad++, close the history.html,

index.html, and style.css files.

LESSON 2
TOPIC D
Apply Browser-Specific CSS
You have applied a CSS to multiple pages. In some cases, a particular browser may render the
CSS incorrectly. In this topic, you will apply browser-specific CSS.
Ideally, your website should look the same no matter what browser is used to access it. How-
ever, certain browsers interpret particular CSS properties incorrectly, causing your website to
display differently than intended. This problem can be overcome by writing another CSS spe-
cifically for that browser to fix the issue.
Conditional Comments
Conditional comments are comments used to demarcate code that targets or bypasses Internet
Explorer. They are supported by Internet Explorer 5 upwards. These comments can be included
in the <head> or <body> sections of XHTML documents. But they cannot be used in exter-
nal CSS.
Syntax Description






 The encapsulated code is ignored by IE. It is
code for browsers other than IE executed by browsers other than IE.
 You can also exclude the code  in the last line. This code has
been included in the last line as it affects the for-
matting of the code in Notepad++, making it
harder to read.

LESSON 2
How to Apply Browser-Specific CSS
Procedure Reference: Apply Browser-Specific CSS
To apply browser-specific CSS:
1. Identify the discrepancy that appears in various browsers.
2. Write the CSS code that fixes the discrepancy.
• If the issue is global to all pages, save a copy of the website’s persistent
style sheet with another name. In this external CSS, write the code that fixes
the discrepancy and save the file.
• If the issue is specific to a particular page and only requires a few lines to
correct it, write the code that fixes the issue in an embedded style sheet
within the page.
When a minor fix is required on a single page, an embedded style sheet is used because it
would be redundant to create another style sheet that is almost identical to the page’s
original style sheet. However, you can make the fix using another external CSS if you wish.
3. If you have made the fixes in an external CSS, link this new external CSS to a
web page that requires it.
4. Encapsulate the style sheet intended for Internet Explorer in a conditional com-
ment as follows.

5. Encapsulate the style sheet intended for browsers other than Internet Explorer in a
conditional comment as follows.

code linking the style sheet for browsers other than IE or
embedded style sheet for browser other than IE

6. Save the web page.
7. If the issue is global, repeat this encapsulation within conditional comments for
all pages of the website and save the changes made.
8. View the web page(s) in different browsers to verify that the discrepancy has been
resolved.

LESSON 2
ACTIVITY 2-4
Applying Browser-Specific CSS
Data Files:
• copyright.html
• style.css
Before You Begin:

From the C:\085961Data\Managing CSS\Activity 4 folder, open the style.css and
copyright.html files in Notepad++. The copyright.html tab should be selected.
Scenario:
The horizontal rule on the Trademarks page appears differently in Internet Explorer and
Firefox. You need to ensure that the horizontal rule looks the same in both browsers.

b. Observe the horizontal rule between the

two sections of text. It is dark brown and
it is evenly positioned between the para-
graph of text above it and the heading
“Trademarks” below it.

Firefox.
d. Observe that the horizontal rule looks dif-

ferent. It is gray and it is not evenly
positioned between the paragraph of text
above it and the heading “Trademarks”
below it. The amount of space above the
horizontal rule is less than the amount of
space below it.
If necessary, you can switch between Internet

Explorer and Firefox to see this difference more
clearly.
e. Close Firefox.
f. Switch to Internet Explorer and close it.

LESSON 2
2. Create an embedded style sheet for a. Place the insertion point in line 8, the
browsers other than Internet blank line above the closing </head> tag.
Explorer.
b. Type  and press
Enter twice. This is the opening line of a
conditional comment for browsers other
than Internet Explorer.
c. Type  as the clos-

ing line of the conditional comment.
d. Place the insertion point in the blank line

within the conditional comment.
e. Type <style type="text/css"> and

press Enter twice, then type </style>
to create an embedded style sheet within
the conditional comment.
See Code Sample 1.
Code Sample 1

<style type="text/css">
</style>

</head>

LESSON 2
3. Set the appearance of the horizontal a. Place the insertion point in the blank line
rule in the browser-specific CSS. inside the <style> element and press
Tab.
b. Type hr{ and press Enter twice, then

type } to create a selector for the hori-
zontal rule.
c. Place the insertion point in the blank line

below hr{ and press Tab.
d. Type border: 0; so that all the borders

of the horizontal rule are 0 pixels in
width. Press Enter.
e. Select the style.css tab and scroll down to

the bottom of the file so that the hr
selector and the style rules under it are
visible.
f. Observe that the value of the height

property is 2px.
g. Select the hexadecimal value of the

color property. Copy the selected code.
The color property usually sets the color of

text in an element. When this property is
applied to horizontal rules, it sets the color of
the horizontal rule in Internet Explorer. Make
sure you do not select the semicolon at the
end of the line.
h. Select the copyright.html tab, type

border-top: and press Spacebar, then
paste the code copied from the external
CSS.
i. Press Spacebar and type 2px solid; so

that the appearance of the horizontal rule
in Firefox matches its appearance in
Internet Explorer.
j. Save the file.

LESSON 2
4. View the updated web page in a. Launch the copyright.html file in Firefox.
Firefox.
b. Observe that the color of the horizontal
rule is dark brown instead of gray. But it
is still not evenly positioned between the
text.
Firefox interprets all the style rules in the exter-

nal CSS as well as the embedded style sheet
c. Close Firefox.
5. Correct the amount of space above a. In line 24, the line below the code <h2>
the horizontal rule in the browser- Copyright</h2>, set the attribute
specific CSS. id="p1" for the <p> tag.
Make sure you type the number one and not

the letter “l” in the value of the id attribute.
b. In line 13, click after } above the closing

</style> tag and press Enter.
c. Type #p1{ and press Enter twice, then

type } to create a selector for the ele-
ment with id="p1".

below #p1{ and press Tab.
e. Type padding-bottom: 8px; to add

more space between the first paragraph
and the horizontal rule below it.
See Code Sample 2.
f. Save the file.
Code Sample 2
#p1{
}
</style>


LESSON 2
6. View the corrected web page in a. Launch the copyright.html file in Firefox.
Firefox and Internet Explorer.
b. Observe that the horizontal rule appears
to be evenly positioned between the para-
graph above it and the heading below it.
c. Switch to Notepad++. Launch the

copyright.html file in Internet Explorer
and maximize the window.
d. Observe that the appearance of the hori-

zontal rule in Internet Explorer has not
changed. It is still dark brown and evenly
positioned between the paragraph above
it and the heading below it. This is
because Internet Explorer ignores the
embedded style sheet in the conditional
comment.
e. Close Internet Explorer and Firefox.

TOPIC E
Provide Alternate CSS
You have applied browser-specific CSS to overcome a browser’s faulty rendering of CSS.
However, you should also take users with accessibility issues into consideration when design-
ing a website. In this topic, you will provide alternate CSS.
Some users with visual accessibility issues require larger font sizes and more spacing between
elements of a web page. A certain percentage of users will not perceive colors as intended.
They might not be able to distinguish between colors that are the same shade. You can help
such users access the content on your website by providing the choice of alternate styles that
cater to their requirements.
Alternate CSS
An alternate CSS is simply an external CSS linked with the rel attribute of the <link> tag
set to "alternate stylesheet". More than one alternate style sheet can be linked to a
web page. However, as they are mutually exclusive, only one can be applied to the web page
at a time. They can be used to provide a different color scheme or a high contrast look to your
web page, giving the user more control over the page’s appearance. The styles within an alter-
nate style sheet do not come into effect when the page loads in the browser window.

LESSON 2
Firefox’s menu allows you to pick the alternate CSS you want to apply to the page based on
the value of its title attribute. If no title attribute has been specified, the Firefox menu
does not provide the alternate CSS. When several alternate CSS have the same title, they
are treated as a single alternate style sheet. Unlike Firefox, Internet Explorer requires scripting
to allow the user to pick an alternate CSS.
Figure 2-3: Code that links an alternate CSS to a web page.
Multiple Web Pages

Applying an alternate style sheet to a web page does not apply its styles to the entire
website. Other pages on the same website, display the formatting of their persistent
and preferred style sheets. A little scripting is required to make the alternate style sheet
reflect on all the pages of a website.
How to Provide Alternate CSS

Procedure Reference: Provide Alternate CSS
To provide alternate CSS:
1. In your editor, open the web page that requires an alternate CSS.
2. In the <head> element, place the insertion point below the <title> element
and the code linking any persistent or primary style sheets.
The alternate CSS does not have to be specified below the other style sheets. This positioning is
to place the code in logical order for readability.
3. Type the code

<link rel="alternate stylesheet" type="text/css" ⇒
title="Alternate Style" href="filename.css" />
The attributes of the <link> tag can be in any order.
4. If necessary, link more alternate CSS to the web page using the same syntax.
5. Set unique titles for each alternate CSS, if you wish to provide them as mutually
exclusive choices. If you want to apply several alternate CSS collectively, give
them the same title.
6. Save the web page.
7. Similarly, link the alternate CSS to the other pages of the website and save the
changes in their code.
8. Launch the web page in Firefox.
9. Choose View→Page Styles and choose the desired alternate CSS to modify the
web page’s appearance.

LESSON 2
10. If necessary, choose View→Page Styles→Basic Page Style to apply the page’s
persistent style sheet so that the page resumes its original appearance.
ACTIVITY 2-5
Providing an Alternate CSS
Data Files:
• index.html
• history.html
• copyright.html
• contrast.css
Before You Begin:

From the C:\085961Data\Managing CSS\Activity 5 folder, open the copyright.html,
history.html, and index.html files in Notepad++. The index.html tab should be selected.
Scenario:
Your manager has asked you to make provisions for users with visual accessibility issues in
the Everything for Coffee website so that it reaches a wider audience. You have been provided
with a style sheet contrast.css, containing styles that cater to such users. You need to provide a
choice of styles for the website.

LESSON 2
1. Link the alternate CSS to the pages a. In the index.html file, place the insertion
of the website. point at the end of line 6 and press Enter.
Line 6 contains the code linking the style
sheet style.css.
b. Type
<link rel="alternate ⇒
stylesheet" ⇒
type="text/css" ⇒
title="High Contrast" ⇒
href="contrast.css" /> to link the
alternate CSS to this web page.
See Code Sample 1.
c. Select the new line of code that links the

alternate CSS to the index.html file.
d. Copy the selected code.
e. Save the index.html file then select the

history.html tab.
f. Place the insertion point at the end of line

6 and press Enter.
g. Paste the code linking the alternate CSS

and save the file.
h. Select the copyright.html tab.
i. Place the insertion point in line 7, the

blank line above the closing </head> tag.
Paste the code linking the alternate CSS
and save the file.
Code Sample 1
<link rel="alternate stylesheet" type="text/css" ⇒
title="High Contrast" href="contrast.css" />
</head>

LESSON 2
2. Apply the alternate CSS to the a. Launch the copyright.html file in Firefox.
Trademarks and Home pages.
Firefox’s menu allows users to pick the alter-
nate CSS they want to apply to a page based
on the value of its title attribute. But
Internet Explorer requires scripting to provide
users with alternate CSS.
b. Choose View→Page Style→High Contrast

to apply the alternate CSS to the web
page.
c. Observe that the appearance of the web

page has changed. The text is larger and
easier to read.
d. In the web page’s footer, click the Home

link.
e. Observe that the Home page displays with

the default styles of the website. It does
not display with the high contrast styles of
the alternate CSS.
f. Choose View→Page Style→High Contrast

page, giving it a high contrast look.
g. Choose View→Page Style→Basic Page

Style to apply the web page’s persistent
style sheet so that the page resumes its
original appearance.
style.css is the persistent style sheet for all the

pages of this website.
h. In the web page’s footer, click the Trade-

marks & Copyrights link.
i. Observe that the alternate CSS is no

longer in effect. This is because each time
a web page loads in the browser window,
its persistent style sheet gets applied to
it.

LESSON 2
3. Apply the alternate CSS to the His- a. In the web page’s footer, click the History
tory page. of Coffee link.
b. Choose View→Page Style→High Contrast

page giving it a high contrast look.
c. Close Firefox.
d. In Notepad++, close the copyright.html,

history.html, and index.html files.
Lesson 2 Follow-up
In this lesson, you managed CSS. This facilitates efficient website design that is supported
across different browsers, reaching a wider audience.
1. Will implementing external CSS make your job easier? How?
2. What circumstances would require you to implement browser-specific or alternate CSS

on the job?

NOTES

LESSON 3

35 minutes
Testing a Website
In this lesson, you will test a website.
You will:
• Test markup.
• Test CSS.
Lesson 3: Testing a Website 61

LESSON 3
Introduction
You have used CSS to enhance the visual appeal of your website. A website should also con-
tain valid code that renders properly in browsers and meets W3C standards. In this lesson, you
will test your website.
Before any new product is launched in the market, it should be tested so that its defects can be
detected and fixed. Websites are no exception. In order to have a better quality website, you
need to test, debug, and validate its code. This helps you provide an error-free website that
complies with W3C standards.
TOPIC A
Test Markup
Valid code is important to the quality of your website. However, most browsers overlook
errors in tags. In this topic, you will test markup.
Most browsers can successfully render incorrect markup, allowing errors to pass undetected.
Fortunately, there are validators that allow you to identify and fix such errors. This helps
ensure that your website contains valid markup that meets W3C standards.
The W3C® Markup Validation Service

The W3C® Markup Validation Service is a free service that provides facilities to validate a
web page’s markup. It is available at the URL http://validator.w3.org/. The syntax of a page’s
markup is checked against the rules in its DTD and any errors found are reported. It is a con-
venient tool for quickly identifying errors that are ignored by browsers. Although validating
markup is not mandatory since browsers can display web pages with incorrect code, it is con-
sidered good practice.
This validator provides three methods to validate markup. You can specify the page’s URL if
the website has been hosted on the Internet. Alternatively, you can upload the file but this
method has issues with Internet Explorer on certain versions of Windows XP with Service
Pack 2. Lastly, the Direct Input facility allows you to paste the code from your file and sub-
mit it. Any code within the <style> element is ignored as this validator only checks markup.
The flavor of markup is automatically detected based on the file’s DTD. However, there are
also options that allow you to specify the type of markup.
Common Mistakes
Typing mistakes, incorrect syntax, and using deprecated code are the most common
mistakes made by web developers. The W3C validator is limited to identifying such
issues. If code is syntactically correct, but logically incorrect, the validator will not
spot the mistake. For example suppose you have specified the wrong path in an
<img> element’s src attribute, the validator will not be able to help you fix such a
mistake.

LESSON 3
How to Test Markup
Procedure Reference: Validate Markup
To validate markup:
1. In the browser address bar, type http://validator.w3.org to open the W3C® Markup
Validation Service.
2. Specify the markup to be validated.
• On the Validate by URI page, in the Address text box, type the web page
address.
• Select the Validate by File Upload tab, in the File text box, type the file
location or click Browse to navigate to the file.
• Or, use the Direct Input facility.
a. Select the Validate by Direct Input tab.
b. In your editor, select all web page’s code and copy it.
c. In the Enter the Markup (Full Document) to validate text area, paste
the code.
Although selecting all the web page’s code might include embedded CSS, this valida-
tion service ignores any CSS. So only the page’s markup is validated.
3. If necessary, click More Options and select the desired options for validation.
4. Click Check so that the results of validation are displayed.
5. Based on the validation results, fix any errors in the page’s markup, save the
changes, and try validating it again.
If you are validating markup by uploading the file or specifying the URL, you must save the
changes before validating again. However, when using the Direct Input facility, you do not have
to save the changes before validating the markup again, as you are copying the updated markup.
In this case, you can save the changes after the markup validates. The same goes for validating
CSS.

LESSON 3
ACTIVITY 3-1
Validating Markup
Data Files:
• copyright.html
Before You Begin:

From the C:\085961Data\Testing A Website\Activity 1 folder, open the copyright.html file in
Notepad++.
Scenario:
In the interest of future compatibility with evolving W3C standards, management has decided
to ensure that all projects contain XHTML that meets W3C standards. Your website should
contain markup that meets these standards and is displayed properly by browsers. As only one
page can be validated at a time, you will start with the Trademarks page.

b. Observe that the banner image is not dis-

played at the top of the web page and the
layout is too wide.
c. Launch the file in Firefox.
d. Observe that the sections of the layout

below the banner image are too wide.
Close Firefox.
e. Switch to the Internet Explorer window.

LESSON 3
2. Validate the markup of the Trade- a. In the address bar, type http://
marks page. validator.w3.org and press Enter to open
the W3C® Markup Validation Service.
b. Select the Validate by Direct Input tab.
c. Switch to Notepad++ and choose Edit→

Select All to select all the markup of the
Trademarks page.
d. Choose Edit→Copy to copy the selected

code.
e. Switch to Internet Explorer.
f. In the Enter the Markup (Full Document)

to validate text area, right-click and
choose Paste.
g. Click Check to validate the pasted

markup.
h. Observe that the page does not contain

code that meets the XHTML 1.0 Strict
specification. The Result section shows
“13 Errors.”
3. Fix the errors in the page’s markup. a. In Internet Explorer, scroll down so that
the text “Validation Output: 13 Errors” is
visible.
b. Observe that the first and second errors

are to do with the id and title
attributes in line 10.
c. Scroll down to the third error—element

“divc” undefined.
d. Observe that this error is also in line 10.
e. Switch to Notepad++.
f. In line 10, place the insertion point after

divc and press Backspace so that c is
deleted.

LESSON 3
4. Validate the corrected markup. a. Select all the code and copy it.
b. Switch to Internet Explorer.
c. In the address bar, select the text check

at the end of the URL and delete it. Press
Enter so that the home page of the
validator is displayed.
d. Select the Validate by Direct Input tab.

In the Enter the Markup (Full Document)
choose Paste.
e. Click Check to validate the pasted

markup.
f. Observe that the page still does not con-

tain code that meets the XHTML 1.0 Strict
specification. The Result section shows “7
Errors.”
5. Fix the remaining errors in the a. Scroll down so that the text “Validation
markup. Output: 7 Errors” is visible at the top of
the window.
b. Observe that the second error message

tells you that quotation marks are
required for the attribute value in line 24.
In the line of code below the error mes-
sage, you can see that the value of the
href attribute, index.html, is not
within double quotation marks.
c. Switch to Notepad++. In line 24, below

the code <div id="footer">, place
the insertion point between the = symbol
and index.html.
d. Place the attribute value index.html

within double quotation marks.

LESSON 3
6. Validate the corrected markup again. a. Select all the code and copy it.
b. Switch to Internet Explorer. Return to the

home page of the validator.
c. Select the Validate by Direct Input tab.

In the Enter the Markup (Full Document)
choose Paste.
d. Click Check to validate the pasted

markup.
e. Observe that the page has passed valida-

tion successfully. Close Internet Explorer.
7. View the corrected web page in a. Save the file.

Internet Explorer and Firefox.
b. Launch the copyright.html file in Internet
c. Observe that the layout is displayed cor-

rectly and the banner image is visible.
Close Internet Explorer.
d. Launch the file in Firefox.
e. Observe that the layout is displayed cor-

rectly. Close Firefox.

file.

LESSON 3
TOPIC B
Test CSS
You have tested the markup of your website. However, errors in style sheets can also adversely
affect how your website is rendered in browsers. In this topic, you will test CSS.
Imagine poring over lines of code in a style sheet, trying to locate the source of a problem in
your website. This could take ages, especially when you do not have a clear idea of what is
causing the problem. Not to worry, validators are an easy way to quickly locate the source of a
defect and resolve it so that your website renders correctly in the browser.
The W3C® CSS Validation Service

The W3C® CSS Validation Service is a free service that helps you validate style sheets. It is
available at the URL http://jigsaw.w3.org/css-validator/. You can specify the URL at which
the style sheet is located, upload an external CSS, or directly paste the code. Since this
validator only recognizes style sheets, you should not include <style> tags in pasted code.
Similarly, you cannot upload XHTML documents, only external CSS can be uploaded. By
default, style sheets are validated against the CSS 2.1 specification. If necessary, you can also
specify other versions of CSS.
Certain browser versions might be unable to cope if a large chunk of code is pasted via the direct input facility.
In such cases, you can simply upload the file for validation.
How to Test CSS

Procedure Reference: Validate CSS
To validate CSS:
1. In the browser’s address bar, type http://jigsaw.w3.org/css-validator to open the
W3C® CSS Validation Service.
2. Specify the CSS to be validated.
• On the By URI page, in the Address text box, type the address of the exter-
nal CSS.
• Select the By file upload tab. In the File text box, type the location of the
external CSS or click Browse to navigate to the file.
• Or, use the direct input facility.
a. Select the By direct input tab.
b. In your editor, select all the code in the external CSS. If the style sheet
is embedded, select all the code within the web page’s <style> ele-
ment.
c. Copy the selected code.
d. In the Enter the CSS you would like validated text area, paste the
copied code.

LESSON 3
Internet Explorer may hang if there are many lines of code. This is a browser-specific
issue. If this happens, you can use Firefox to validate CSS by the direct input facility.
3. If necessary, click More Options and select the desired options for validation.
4. Click Check so that the results of validation are displayed.
5. Based on the validation results, fix any errors in the CSS, save the changes, and
try validating it again.
Inline Styles
Inline styles are difficult to validate. You need to copy the code between the double
quotation marks of a tag’s style attribute and validate it by direct input.
ACTIVITY 3-2
Validating CSS
Data Files:
• style.css
• copyright.html
• index.html
• history.html
Before You Begin:

From the C:\085961Data\Testing A Website\Activity 2 folder, open the style.css and
copyright.html files in Notepad++. The copyright.html tab should be selected.
Scenario:
You have been temporarily assigned to a new project as the original developer is on leave for
a few days. The Everything for Coffee website is not displaying correctly in browsers and you
need to fix the problem before continuing with development. A colleague suggests using the
CSS validation service provided by the W3C to locate the source of the issue.

LESSON 3
1. View the pages of the website in a. Launch the copyright.html file in Internet
b. Observe that the background color has

changed to white and the hyperlinks in
the footer are not center-aligned.
c. In the footer, click the Home link.
d. Observe that the same issues with the

background color and alignment of the
hyperlinks are visible on the Home page.
e. In the footer, click the History of Coffee

link.
f. Observe that the same issues are visible

on the History page.
The same errors are seen in Firefox.
2. Validate the external CSS. a. If necessary, maximize the window.
b. In the address bar, type http://

jigsaw.w3.org/css-validator and press
Enter to open the W3C® CSS Validation
Service.
c. Select the By file upload tab and click

Browse to launch the Choose file dialog
box.
d. Navigate to the C:\085961Data\Testing A

Website\Activity 2 folder.
e. Select style.css and click Open.
f. Click Check to validate the CSS.
g. Observe that there are two errors. In line

4, under the body selector, there is a typ-
ing error: background-colro. In line
63, under the #footer selector, there is
a property that does not exist—the align
property.

LESSON 3
3. Fix the errors in the CSS. a. Switch to Notepad++ and select the
style.css tab.
b. In line 4, change background-colro to

background-color
c. Scroll down so that the selector #footer

and the style rules under it are visible.
d. In line 63, place the insertion point before

align and type text-
See Code Sample 1.
e. Save the file.
Code Sample 1
text-align: center;
font-size: 11px;
4. Validate the corrected CSS. a. Switch to Internet Explorer.
b. In the address bar, delete “validator” at

the end of the URL. Press Enter so that
the home page of the validator is dis-
played.
c. Select the By file upload tab and click

Browse to launch the Choose file dialog
box.
d. In the C:\085961Data\Testing A Website\

Activity 2 folder, select style.css and click
Open.
e. Click Check to validate the CSS.
f. Observe that the CSS is valid. Close

Internet Explorer.

LESSON 3
5. View the effect of the corrected CSS a. In Notepad++, select the copyright.html
in Internet Explorer. tab.
b. Launch the file in Internet Explorer and

maximize the window.
c. Observe that the background color is no

longer white and the hyperlinks in the
footer are center-aligned.
d. In the footer, click the Home link.
e. Observe that the background color and

hyperlinks are displayed correctly on this
page.
f. In the footer, click the History of Coffee

link.
g. Observe that the background color and

hyperlinks are displayed correctly on this
page.
h. Close Internet Explorer.
The result of this activity is the same in Firefox.
i. In Notepad++, close the copyright.html

Lesson 3 Follow-up
In this lesson, you tested a website. This helps you provide a better quality website with error-
free code that complies with W3C standards.
1. How will testing your website improve its quality?
2. What are the common syntax mistakes most web designers make?

LESSON 4

Creating Advanced
Navigation
In this lesson, you will create advanced navigation.
You will:
• Create CSS-based menus from lists.
• Incorporate images in CSS-based menus.
• Create image maps.
Lesson 4: Creating Advanced Navigation 73

LESSON 4
Introduction
You have tested the validity of your website. However, a valid website serves no purpose if a
user cannot easily browse its pages. In this lesson, you will create advanced navigation.
Links are the essence of the World Wide Web, enabling the connection of multiple locations on
the Internet. Websites must support this principle of interconnectivity by providing visitors
with an easy means to browse to different locations within a website or outside it. You
wouldn’t want a visitor to get lost on your website, stuck on a dead-end web page, with no
clue how to get back to the home page.
TOPIC A
Create CSS-Based Menus
A means of navigation is essential for users to get from one page to another on your website.
However, you might wish to provide visitors with more structured navigation options that are
clearly visible. In this topic, you will create CSS-based menus.
Visitors to websites often waste a great deal of time trying to navigate to content they are
interested in, or simply trying to find their way around a website. Hypertext links are not par-
ticularly noticeable and could be overlooked, especially if the website contains a lot of textual
content. Moreover, they are not particularly feasible when sites comprise many pages. Provid-
ing clear-cut, well-positioned, and visually attractive navigation options is professional practice
that avoids such problems.
Common Menu Types

Menus are a common method of providing users with navigation options to browse the pages
of a website. CSS-based menus comprise hypertext links organized into lists with CSS format-
ting applied to them. The options provided in a menu should reflect the structure of the
website, and they may be oriented vertically or horizontally on its web pages. Menu items can
have submenus if the website structure calls for it. There may be multiple levels of submenus,
but too many sublevels are not good practice, reflecting poor website design.
The display Property

The display property is used to determine how an element is displayed on a web page. It
can also be used to control whether an element is displayed.

display: block; An element with this setting is displayed with a
line break above and below it.
display: inline; An element with this setting is displayed without
any line breaks above or below it.
display: none; An element with this setting is not visible on the
web page. The browser does not display blank
space in the element’s place.

LESSON 4
display: list-item; An element with this setting is displayed as a list.
This style rule is not supported by versions of IE
earlier than IE 6.
The :hover Pseudoclass

Internet Explorer 7 and other browsers allow you to create rollovers for elements other
than links using the :hover pseudoclass. Unfortunately, versions of Internet Explorer
below Internet Explorer 7 can only apply the :hover pseudoclass to links. So, when
it comes to menus, a little scripting is required for lower versions of Internet Explorer
to support rollovers for elements other than links.
How to Create CSS-Based Menus

Procedure Reference: Create CSS-Based Menus
To create CSS-based menus:
1. In your editor, open the web page that requires the menu.
2. In the appropriate section of the markup, create an unordered list using the <ul>
element.
3. In this unordered list, create list items using <li> elements. Within each list
item, create a hypertext link to another page.
4. Save the file.
5. Apply styles so that the unordered list of hypertext links appears as a menu.
Apply styles for rollover effects.
The same method is used to create both horizontal and vertical menus. Styles can control
whether the menu options are displayed horizontally or vertically.
6. Save these changes.

7. View the web page in a browser so that the CSS-based menu is visible and click
a link to verify that the menu works.
8. If necessary, view the menu in other browsers.
9. Copy the unordered list and paste it in each web page that requires the menu.
Save the changes.
The unordered list includes all the list items within it and the hypertext links in each list item.
Procedure Reference: Create Popup Submenus

To create popup submenus:
1. In your editor, open the web page that requires a submenu.
2. If a submenu is required for some menu options, place each list item containing a
main menu option inside an unordered list and set the class="myclass"
attribute for these <ul> elements.

LESSON 4
Remember that each new <ul> element must be created within an <li> element so that the
markup is valid.
3. If all menu options require submenus, this placement of list items in unordered
lists is not required but a class or id attribute set as parent_ul for the top-
level <ul> containing the main menu options.
4. Under the appropriate main menu option, create an unordered list for the
submenu.
5. Within the submenu unordered list, create list items containing the required
hyperlinks and set the same attribute class="myclass" for these hyperlinks.
6. Similarly, create the other submenus under the appropriate menu options. Set the
same attribute class="myclass" for the hyperlinks in these submenus.
7. Save the file.
8. Create a new external CSS to apply styles to the updated menu.
9. Apply styles to the main menu options that have submenus.
• Apply the following styles if some main menu options have submenus.
ul.myclass{
display: block;
position: relative;
list-style-type: none;
float: left;
width: value in pixels;
padding: value in pixels;
margin: value in pixels;
}
• Apply the following styles if all menu options have submenus.
ul.parent_ul li{
display: block;
position: relative;
width: value in pixels;
padding: value in pixels;
margin: value in pixels;
}

LESSON 4
The display and position properties are most important. You must set position:
relative; so that the submenus’ absolute coordinates display in the correct position. If the
web page already has styles for the appearance of menu items, the other properties are not
required.
The settings display: block; and float: left; ensure that all main menu options are
displayed with the same alignment and proper spacing. When some main menu options are
placed in unordered list, they would appear as children of the other main menu options. So these
settings are required.
10. Apply styles to the submenus.

ul.myclass ul{
position: absolute;
left: value in pixels;
top: value in pixels;
z-index: integer value;
display: none;
margin: 0;
padding: 0;
}
If all main menu options have submenus, the selector will be ul.parent_ul ul. Although
the coordinates are absolute, they are absolute relative to the parent element because this parent
element has the setting position: relative;.
11. Apply styles to display the submenu when the mouse pointer is over the appropri-
ate main menu option.
li:hover ul{
display: block;
}
A more specific selector may be used if certain list items contain <ul> elements that have differ-
ent display settings.
12. Apply styles to set the appearance of the hyperlinks within the submenus. If nec-
essary, set styles for rollovers.
13. Save the external CSS and link it to the web page.
14. If necessary, link the external CSS to the other pages of the website and copy the
updated menu structure to these pages. Save the changes.
It is not possible to cover all possible methods of creating popup submenus in a single proce-
dure. This procedure attempts to list the generic steps involved when all main menu options
require submenus and when some main menu options require submenus. Different approaches
can be used.

LESSON 4
ACTIVITY 4-1
Creating a CSS-Based Menu
Data Files:
• index.html
• style.css
Before You Begin:

From the C:\085961Data\Advanced Navigation\Activity 1 folder, open the index.html and
style.css files in Notepad++. The index.html tab should be selected.
Scenario:
There are many pages on the Everything for Coffee website, so you need to provide navigation
options that allow visitors to access them. You will provide these options on the Home page
and submit it for the manager’s approval before incorporating them in all pages of the website.

LESSON 4
1. Add the navigation options to the a. Place the insertion point in line 13, the
Home page as an unordered list. blank line below <div id=
"left_panel">.
b. Type <ul> and press Enter twice, then

type </ul> to create an unordered list in
the left_panel layer.
c. Place the insertion point in the blank line

within the unordered list and press Tab.
d. Type <li><a href="index.html">⇒

Home</a></li> and press Enter. This
list item contains a hypertext link to the
Home page.
e. Similarly, add list items containing

hypertext links to the remaining pages of
the website.
See Code Sample 1.
f. Save the file.
Code Sample 1
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="coffeemakers.html">Coffee Makers</a></li>
<li><a href="gourmetbeans.html">Gourmet Beans</a></li>
<li><a href="filtersandcups.html">Filters and Cups</a></li>
<li><a href="history.html">History of Coffee</a></li>
<li><a href="about.html">About Us</a></li>
</ul>
2. View the navigation options in a. Launch the file in Internet Explorer and
Internet Explorer. maximize the window.
b. Observe that the hypertext links are vis-

ible in the left column. They are in an
unordered list.
c. Click any link to load the corresponding

page.
If you wish to test the other menu options,

click the Home link in the footer.
d. Close Internet Explorer.

LESSON 4
3. Apply CSS formatting to the naviga- a. Select the style.css tab. Scroll down so
tion options so they appear as a that the #left_panel selector and all
menu. the styles under it are visible.
b. Place the mouse pointer after the closing

brace } above #img1{ and press Enter.
This places the insertion point in a blank
line between the styles for #left_panel
and #img1.
You can add the code that formats the naviga-

tion options at the end of the style.css file. The
order of the styles does not affect the result of
this activity. The styles are inserted at this loca-
tion so that they are in logical order. This
makes it easier for other developers to work
with the file.
c. Apply styles to the unordered list within

the left_panel layer. The styles should
set the margins and padding of the ele-
ment and remove the bullets from the list
items.
See Code Sample 2.
d. Press Enter to create a blank line.
e. Set the height of the list items in this

unordered list.
See Code Sample 3.
Each <li> element is a child of the <ul>

element, which is in turn a child of the layer
with id="left_panel". The selector
reflects this nesting of elements.
f. Press Enter to create a blank line.
g. Set the appearance of the hypertext links

within the list items.
See Code Sample 4.
h. Press Enter to create a blank line.
i. Apply a style to the hypertext links so that

they change color on rollover.
See Code Sample 5.
j. Save the style.css file and close it.

LESSON 4
Code Sample 2
#left_panel ul{
margin: 10px;
padding: 0px;
}
#img1{
Code Sample 3
#left_panel ul li{
height: 45px;
}
#img1{
Code Sample 4
#left_panel ul li a{
display: block;
padding-left: 10px;
font-size: 14px;
line-height: 45px;
color: #FFFFFF;
}
#img1{
Code Sample 5
#left_panel ul li a:hover{
color: #3C0C0C;
}
#img1{

LESSON 4
4. View the menu in Internet Explorer. a. Launch the index.html file in Internet
b. Observe the menu in the left column of

the layout. Place the mouse pointer over
any link in the menu.
c. Observe that the color of the hypertext

link changes on rollover.
d. Click the link to load the corresponding

page.
You can launch the index.html file in Firefox

and test the menu if you wish. The result is the
same as in Internet Explorer.
f. In Notepad++, close index.html.
The menu has only been applied to one page.

From index.html, copy the unordered list within
the left_panel layer. Paste this code inside
the left_panel layer in each web page’s
code and link menu.css to all pages, then save
these changes. This makes the menu available
on these pages. This has been done in the
solution files. The Home link has also been
removed from the footer of these files as it is
available in the menu.

LESSON 4
ACTIVITY 4-2
Creating a Popup Submenu
Data Files:
• index.html
Before You Begin:

From the C:\085961Data\Advanced Navigation\Activity 2 folder, open the index.html file in
Notepad++.
Scenario:
Since there are many pages on the Everything for Coffee website, the client requests a menu
that groups the Coffee Makers, Gourmet Beans, and Filters and Cups pages under the menu
option Our Store. You decide to make the changes on one page so that the design can be
approved before it is applied to the entire website.

LESSON 4
1. Add the hyperlinks corresponding to a. Place the insertion point in line 19, the
the submenu. blank line below <li><a href="#">
Our Store</a> and press Tab.
b. If necessary, press Tab as many times as

needed so that the insertion point is
below the <li> tag in line 18.
c. Type <ul> and press Enter twice, then

type </ul> to create an unordered list.

within the unordered list and press Tab.
e. Type
<li><a class="menu" href=
"coffeemakers.html"> Coffee Makers
</a></li>to create a list item
containing a hyperlink to the
coffeemakers.html page.
g. Similarly, create list items containing

hyperlinks to the gourmetbeans.html and
filtersandcups.html pages.
See Code Sample 1.
h. Observe the code <ul class="menu">

in line 17 and </ul> in line 25. This unor-
dered list is the parent of the unordered
list containing the three submenu
hyperlinks that was just created. Each of
these hyperlinks has the same attribute
class="menu".
i. Save the file.
Code Sample 1
<li><a href="#">Our Store</a>
<ul>
<li><a class="menu" href="coffeemakers.html">Coffee Makers</a></li>
<li><a class="menu" href="gourmetbeans.html">Gourmet Beans</a></li>
<li><a class="menu" href="filtersandcups.html">Filters and Cups</a></li>
</ul>

LESSON 4
2. Create an external CSS that applies a. Choose File→New to create a new file.
styles to the submenu so it appears
as a popup menu.
b. Save the file as menu.css in the
C:\085961Data\Advanced Navigation\
Activity 2 folder.
c. Apply styles to the unordered list with

class="menu". The styles should display
the element as a block-level element with
relative positioning. It should not have
bullets and it should float to the left. The
styles should also set the width, padding,
and margins of the element.
See Code Sample 2.
These styles only apply to the unordered list

containing the list item Our Store and the
submenu hyperlinks because it has the attribute
class="menu". The position property of
this parent element must be set as relative
so that the submenu within it can be positioned
using absolute coordinates. If you set
position: absolute; in this step, at the
end of the activity, the submenu will not appear
at the desired position to the right of the list
item Our Store. If necessary, view the code in
index.html for a better understanding of the
markup structure.
d. Press Enter to create a blank line.
e. Apply styles to the unordered list that is a

child of a <ul> element with class=
"menu". This child unordered list is the
submenu containing three hyperlinks. The
styles should set its position using abso-
lute coordinates and make the menu
appear on top of all the other content on
the page. The submenu should not be dis-
played by default and there should not be
any space around it.
See Code Sample 3.
Although the coordinates are absolute, they are

absolute relative to the parent element
<ul class="menu"> because this parent
element has the setting position:
relative;. The margin and padding
settings remove space around this element so
that there is no space between the submenu
and the main menu option Our Store.

LESSON 4
g. Apply styles to display the submenu when
the mouse pointer is over Our Store,
which is a list item in the unordered list
with class="menu".
See Code Sample 4.
You can also use this code:
li:hover ul{
display: block;
}
The code in the step is specific to list items
that are children of <ul> with class=
"menu". The code in this note applies to all
list items irrespective of their parents. Both
selectors have the same effect because all ele-
ments are already displayed, except for the
submenu. So the submenu is made visible
when the mouse pointer is over Our Store and
no other element is affected. However, if certain
elements under list items are displayed as
inline elements, you would use the selector
with the class value.
h. Press Enter to create a blank line.
i. Apply styles to hyperlinks with class=

"menu" to set the appearance of the
hyperlinks in the submenu.
See Code Sample 5.
j. Save the file.
Code Sample 2
ul.menu{
display: block;
position: relative;
float: left;
width: 176px;
padding: 0px;
margin: 0px;
}
Code Sample 3
margin: 0px;
}
ul.menu ul{
position: absolute;
left: 160px;
top: -10px;
z-index: 10;
display: none;
margin: 0;

LESSON 4
padding: 0;
}
Code Sample 4
padding: 0;
}
ul.menu li:hover ul{
display: block;
}
Code Sample 5
display: block;
}
a.menu{
display: block;
width: 176px;
padding-left: 10px;
}
3. Link the new style sheet to the Home a. Select the index.html tab.
page.
b. Place the insertion point in line 7, the
blank line above the closing </head> tag.
c. Type <link rel="stylesheet"

type="text/css" href="menu.css"
/>
d. Save the file.

LESSON 4
4. View the popup submenu in Internet a. Launch the file in Internet Explorer and
Explorer. maximize the window.
b. In the menu, place the mouse pointer

over the Our Store link so that the
submenu is visible.
c. Observe that the appearance of the menu

option, Our Store, is different from the
other main menu options. The background
color is lighter and the text Our Store is
dark brown instead of white. The
submenu has dark brown as the back-
ground color and white text.
d. In the submenu, place the mouse pointer

over the Coffee Makers link.
e. Observe that the appearance of the

submenu option, Coffee Makers, is differ-
ent from the other submenu options.
These styles were not set in menu.css.
They are inherited from style.css.
f. Click the Coffee Makers link to load that

page. Close Internet Explorer.
The submenu will not be available in other

pages. Copy the unordered list and the
hyperlinks within it (lines 19 through 23) from
index.html and paste this code below <li>
<a href="#">Our Store</a> in every
web page and save the changes. This will make
the submenu available on all pages of the
website. This has been done in the solution
files.
g. In Notepad++, close the index.html and

menu.css files.

LESSON 4
TOPIC B
Incorporate Images in CSS-Based
Menus
You have created CSS-based menus. Although attractive, they might not be sufficiently eye-
catching. In this topic, you will incorporate images in CSS-based menus.
A CSS-based menu can provide an attractive and organized method of navigation for a
website. However, it might require a little more emphasis to make it stand out from the other
elements on the page. If used appropriately, images can help you achieve this effect without
overshadowing the page’s content.
How to Incorporate Images in CSS-Based Menus

Procedure Reference: Incorporate Images in CSS-Based Menus
To incorporate images in CSS-based menus:
1. Place the required images in the appropriate folder of the website.
2. In your editor, open the page that requires images in its menu.
3. Set class or id attributes for each hyperlink in the menu, so that corresponding
selectors can be created in the style sheet.
• If a different image is required for each menu option, set unique class or
id attributes.
• If the same image is required for each menu option, set class attributes
with the same value.
4. Save the file.
5. In your editor, open the external CSS that contains the web page’s styles.
If the web page contains an embedded style sheet, you do not have to open any other file.
6. If necessary, in the style sheet, delete any styles that are no longer required.
7. Create a selector for the first menu option based on the value of its class or id
attributes.
8. Under this selector, create styles that set the display property, the appearance
of the menu option’s text, its size, and its background image.
.classname{
display: block;
background-image: url(relative location of the file);
background-repeat: no-repeat;
background-position: left top;
}

LESSON 4
9. Write styles to change the background image of the menu option on rollover.
.classname:hover{
background-image: url(relative location of the file);
}
10. If each menu option has the same class attribute, no further coding is required.
11. If each menu option requires a different image, create styles for each menu
option.
a. Create selectors for each menu option based on the values of their unique
class or id attributes.
b. Create selectors for each menu option using the :hover pseudoclass for
styles to be applied on rollover.
c. Copy the styles of the first menu option and paste them under each menu
option’s selector.
d. Under each selector, change the value of the background-image property
as required.
e. Copy the rollover styles of the first menu option and paste them under each
menu option’s rollover selector.
f. Under each rollover selector, change the value of the background-image
property as required.
12. Save the style sheet.
13. View the web page in a browser to observe the images in the menu.
14. Place the mouse pointer over a menu option to view the change in its image.
15. Set the same class or id attributes in all other pages of the website and save
the changes so the images are visible in each page’s menu.

LESSON 4
ACTIVITY 4-3
Incorporating Images in a CSS-Based Menu
Data Files:
• index.html
• style.css
Before You Begin:

style.css files in Notepad++. The index.html tab should be selected.
Scenario:
You have received feedback from the client requesting the use of images to make the menu
options more attractive. The graphic designer has sent you the required images and you have
placed them in the images folder of the website.
1. Set class attributes for each menu a. In line 14, click after "index.html" and
option. press Spacebar.
b. Type class="home_link" to set a

class attribute for the hyperlink to the
index.html page.
c. Similarly, in line 15, set the attribute

class="coffee_link" for the
hyperlink to the coffeemakers.html
page.
d. In line 16, set the attribute class=

"gourmet_link" for the hyperlink to
the gourmetbeans.html page.
e. In line 17, set the attribute class=

"cups_link" for the hyperlink to the
filtersandcups.html page.
f. In line 18, set the attribute class=

"history_link" for the hyperlink to
the history.html page.
g. In line 19, set the attribute class=

"about_link" for the hyperlink to the
about.html page.
h. Save the file.

LESSON 4
2. In the external CSS, delete the cur- a. Select the style.css tab. Scroll down so
rent styles for the menu options. that the selectors #left_panel ul li,
#left_panel ul li a, and
#left_panel ul li a:hover are vis-
ible.
b. Select the code from lines 41 to 54; the

code for the styles under the selectors
#left_panel ul li, #left_panel
ul li a, and #left_panel ul li
a:hover, and delete them.

LESSON 4
3. In the external CSS, incorporate a. Scroll down to the end of the file, place
images for the first menu option. the insertion point after the last closing
brace and press Enter to create a blank
line.
b. Apply styles to the menu option with

class="home_link". The menu option
should display as a block-level element
and home_dn.jpg in the images folder
should be its background image. The back-
ground image should not repeat and it
should display on the left of the menu
option’s text. The styles should also set
the appearance of the text in the menu
option.
See Code Sample 1.
The keywords left and top control the loca-

tion of the corresponding edges of the image.
d. Apply styles to the menu option with

class="home_link" so that its back-
ground image changes to home_up.jpg on
rollover.
See Code Sample 2.
f. Save the file.
Code Sample 1
outline: none;
}
.home_link{
display: block;
background-image: url(images/home_dn.jpg);
width: 160px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-indent: 60px
height: 45px;
line-height: 45px;
color: #FFFFFF;
}
Code Sample 2

LESSON 4
}
.home_link:hover{
background-image: url(images/home_up.jpg);
}
4. View the updated menu in Internet a. Select the index.html tab.

Explorer.
b. Launch the index.html file in Internet
c. Observe that an image of a house is dis-

played on the left of the first menu
option.
d. In the menu, place the mouse pointer

over the Home link.
e. Observe that the image has changed. The

outline around the house is white.
f. Close Internet Explorer.
g. Select the style.css tab.

LESSON 4
5. Incorporate images for the second a. Type .coffee_link{ and press Enter
menu option. twice, then type } to create a selector for
an element with class=
"coffee_link".
b. Press Enter to create a blank line. Type

.coffee_link:hover{ and press Enter
twice, then type } to create a selector
that applies to an element with class=
"coffee_link" when the mouse pointer
is over it.
c. Select the styles under the selector

.home_link and copy them.
Do not copy .home_link{ or the closing

brace }.

below .coffee_link{ and paste the
copied code.
e. Under the .coffee_link selector,

double-click home_dn to select it, press
Delete, and type maker_dn to change
the background image for this menu
option.
See Code Sample 3.
f. Select the styles under the selector

.home_link:hover and copy them.
g. Scroll down to the end of the file. Place

the insertion point in the blank line below
.coffee_link:hover{ and paste the
copied code.
h. Under the .coffee_link:hover selec-

tor, double-click home_up to select it,
press Delete, and type maker_up to
change the background image for this
menu option when the mouse pointer is
over it.
See Code Sample 4.
i. Scroll down and place the insertion point

after the closing brace } in the last line.
Press Enter to create a blank line. Save
the file.
Code Sample 3

LESSON 4
.coffee_link{
display: block;
background-image: url(images/maker_dn.jpg);
Code Sample 4
.coffee_link:hover{
background-image: url(images/maker_up.jpg);

LESSON 4
6. Incorporate images for the third a. Type .gourmet_link{ and press Enter
menu option. twice, then type } to create a selector for
an element with class=
"gourmet_link".
b. Press Enter to create a blank line.
c. Type .gourmet_link:hover{ and press

Enter twice, then type } to create a
selector that applies to an element with
class="gourmet_link" when the
mouse pointer is over it.
d. Select the styles under the selector

.coffee_link and copy them. Place the
insertion point in the blank line below the
.gourmet_link selector and paste the
copied code.
e. Under the .gourmet_link selector,

double-click maker_dn to select it and
type beans_dn to change the background
image for this menu option.
See Code Sample 5.
f. Select the styles under the selector

.coffee_link:hover and copy them.
g. Scroll down to the end of the file. Place

the insertion point in the blank line below
.gourmet_link:hover{ and paste the
copied code.
h. Under the .gourmet_link:hover selec-

tor, double-click maker_up to select it
and type beans_up to change the back-
ground image for this menu option when
the mouse pointer is over it.
See Code Sample 6.
i. Place the insertion point after } in the

last line of the file and press Enter to cre-
ate a blank line. Save the file.
Code Sample 5
.gourmet_link{
display: block;
background-image: url(images/beans_dn.jpg);
Code Sample 6
.gourmet_link:hover{

LESSON 4
background-image: url(images/beans_up.jpg);

LESSON 4
7. Incorporate images for the remaining a. Create the required selectors for the
menu options. remaining menu options.
See Code Sample 7.
b. Select the styles under the

.gourmet_link selector and copy them.
Paste these styles under the .cups_link
selector, the .history_link selector,
and the .about_link selector.
c. Under the .cups_link selector, change

the background image from
beans_dn.jpg to cups_dn.jpg
See Code Sample 8.
d. Under the .history_link selector,

change the background image from
beans_dn.jpg to history_dn.jpg
See Code Sample 9.
e. Under the .about_link selector, change

the background image from
beans_dn.jpg to about_dn.jpg
See Code Sample 10.
f. Select the code under the selector

.gourmet_link:hover and copy it.
Paste these styles under the
.cups_link:hover selector, the
.history_link:hover selector, and
the .about_link:hover selector.
g. Under the .cups_link:hover selector,

change the background image from
beans_up.jpg to cups_up.jpg
See Code Sample 11.
h. Under the .history_link:hover selec-

tor, change the background image from
beans_up.jpg to history_up.jpg
See Code Sample 12.
i. Under the .about_link:hover selec-

tor, change the background image from
beans_up.jpg to about_up.jpg
See Code Sample 13.
j. Save the file.

LESSON 4
Code Sample 7
}
.cups_link{
}
.cups_link:hover{
}
.history_link{
}
.history_link:hover{
}
.about_link{
}
.about_link:hover{
}
Code Sample 8
.cups_link{
display: block;
background-image: url(images/cups_dn.jpg);
Code Sample 9
.history_link{
display: block;
background-image: url(images/history_dn.jpg);
Code Sample 10
.about_link{
display: block;
background-image: url(images/about_dn.jpg);
Code Sample 11
.cups_link:hover{
display: block;
background-image: url(images/cups_up.jpg);
Code Sample 12
.history_link:hover{
display: block;
background-image: url(images/history_up.jpg);
Code Sample 13
.about_link:hover{
display: block;

LESSON 4
background-image: url(images/about_up.jpg);
8. View the updated menu in Internet a. Select the index.html tab.

Explorer.
b. Launch the file in Internet Explorer and
c. Observe that an image is displayed on the

left of each menu option.
d. In the menu, place the mouse pointer

over the History of Coffee link.
e. Observe that the image has changed. The

outline around the hourglass is white
unlike the outlines of the other images in
the menu.
f. Click the History of Coffee link to load

the History page.
g. Observe that the menu in this page con-

tains hyperlinks that are not formatted.
This is because class attributes have not
been set for the hyperlinks in the menus
of the other pages. So the styles in the
external CSS do not get applied to these
menus.
In order for the images to be present on every

web page’s menu, set the class attributes for
each hyperlink as done in the index.html file.
You can type the relevant code in each file. Or,
you can copy the <ul> element and the
hyperlinks within it from index.html and replace
the corresponding code in the other files. This
has been done in the solution files provided.
i. In Notepad++, close the index.html and

style.css files.

LESSON 4
TOPIC C
Create Image Maps
You have incorporated images in CSS-based menus. However, certain circumstances might be
better suited to purely image-based navigation. In this topic, you will create image maps.
Images are a powerful means of communication, but they can be an even more powerful
means of interacting with users. Moreover, the use of graphical navigation options provides
users with a more intuitive and enjoyable method of navigating to portions of your website.
Being able to provide this sort of feature will help you make your website stand apart from the
many other less professionally produced sites on the web.
Image Maps
Definition:
An image map is a graphic within which sections have been coded to behave as
hyperlinks to different locations. These clickable sections are known as hotspots and
they may be circular, rectangular, or polygonal. An image map must contain at least
one hotspot. Specifying a circular hotspot requires the coordinates of its center and the
value of its radius. A rectangular hotspot requires the top-left and bottom-right coordi-
nates of the shape within the image. A polygonal hotspot requires the coordinates of
each vertex in clockwise order.
Example:

LESSON 4
Image Map Elements and Attributes
The <img> element specifies the image to be used as an image map and the usemap attribute
serves as a reference to this image. The <map> element is used to define the hotspots in the
image map. The values of its name and id attributes must match the value of the usemap
attribute except for #. Each <area> element corresponds to a hotspot. The shape attribute
can take the value rect, circle, or poly. The coords attribute is assigned the coordi-
nates of the hotspot. The href attribute specifies the page each hotspot links to.
Figure 4-1: Code corresponding to an image map.
The <img> element requires an alt attribute for the file to validate successfully. Since alt text is usually pro-
vided for each hotspot, and we do not want Internet Explorer to display a tooltip for sections of the image other
than hotspots, a blank alt attribute is set.
How to Create Image Maps

Procedure Reference: Create an Image Map
To create an image map:
1. In your editor, open the web page that requires the image map.
2. Add the image to be used as the image map using the <img> element.
3. In the <img> element, set the value of the usemap attribute.
<img src="path to the file" alt="" width="200" height="200" ⇒
usemap="#Mymap"/>
The blank alt attribute is required for the file to validate successfully. The value of the usemap
attribute must start with #.
4. Below the <img> element, type <map name="Mymap" id="Mymap"> and

press Enter twice. Then, type </map>.
5. In the <map> element, create hotspots.
• To create a rectangular hotspot that links to the specified web page, type
<area shape="rect" coords="x1,y1,x2,y2" href="filename.html"
⇒
alt="Some Text" />
• To create a circular hotspot, type
<area shape="circle" coords="x1,y1,radius" href=
"filename.html" ⇒
alt="Some Text" />
• To create a polygonal hotspot, type
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4" href=
"filename.html" alt="Some Text" />

LESSON 4
An image map requires at least one hotspot of any type. The polygonal hotspots require the
coordinates of each vertex in clockwise order. The number of coordinates required for polygonal
hotspots will vary.
6. If necessary, create more hotspots.

7. Save the file.
8. View the web page in a browser and click a hotspot to load the corresponding
page.
9. If necessary, test the other hotspots or test the image map in other browsers.
Hotspot Coordinates
Creating an image map requires the coordinates of its hotspots. You can get these coor-
dinates by opening the image in a graphics editing software such as Microsoft® Paint,
and placing the mouse pointer over a particular point. The coordinates of this point
will be displayed on the status bar at the bottom of the window. You can note down all
the required coordinates and use them to create the hotspots.
ACTIVITY 4-4
Creating an Image Map
Data Files:
• index.html
• coordinates.txt
• home_1.png
Before You Begin:

coordinates.txt files in Notepad++. The index.html tab should be selected.
Scenario:
The client has requested that you make the Home page more fun and interactive. A colleague
suggests using an image map. The graphic designer has created an image and sent you the
coordinates of the hotspots. You have saved these coordinates in a .txt file along with other
details.

LESSON 4
1. In the Home page, add the image to a. Place the insertion point at the end of line
be used as the image map. 12 after the code <div id="img1">.
b. Type
<img src="images/home_1.png" alt=
"" width="778" height="353" /> to
display the image home_1.png in this
page.
The alt attribute has not been set because

each hotspot will have its own alt attribute.
c. Save the file.
d. Launch the file in Internet Explorer and

e. Observe the image displayed. The poster

on the wall will link to the History page.
The cups and beans will link to pages with
corresponding content. The newspaper
will link to the About Us page and the
coffee maker on the right will link to the
Coffee Makers page.

LESSON 4
2. Create the image map. a. Place the insertion point after "353" and
press Spacebar, then type
usemap="#Map"
b. Click in the blank line below the <img>

element.
c. Type <map name="Map" id="Map">

and press Enter twice, then type </map>
d. Click in the blank line created. Type

<area shape="rect" coords="" ⇒
href="history.html" alt="History"
/>
f. Create hotspots that link to the remaining

pages of the website.
See Code Sample 1.
Code Sample 1
<area shape="rect" coords="" href="history.html" alt="History" />
<area shape="rect" coords="" href="coffeemakers.html" alt="Coffee Makers" />
<area shape="circle" coords="" href="gourmetbeans.html" alt="Gourmet Beans"
/>
<area shape="poly" coords="" href="about.html" alt="About Us" />
<area shape="poly" coords="" href="filtersandcups.html" alt="Cups" />
</map>
3. Set the coordinates of the hotspots. a. Select the coordinates.txt tab.
b. In line 1, place the insertion point before

“195.” Select the coordinates in the first
row and copy them.
c. Select the index.html tab. In line 14,

place the insertion point between the
double quotation marks of the coords
attribute of the hotspot that links to
history.html.
d. Paste the copied code.
e. Similarly, copy and paste the coordinates

of the remaining hotspots.
f. Save the file.

LESSON 4
4. View the image map in Internet a. Launch the web page in Internet Explorer
Explorer. and maximize the window.
b. Place the mouse pointer over the poster

on the wall.
c. Observe that the tooltip History is dis-

played.
This tooltip will not be visible in Firefox.

Browsers other than Internet Explorer do not
display the values of alt attributes as tooltips.
d. Click the poster so that the History page

is loaded.
e. If necessary, return to the Home page and

test the other hotspots.
g. In Notepad++, close the index.html and

coordinates.txt files.
Lesson 4 Follow-up
In this lesson, you created advanced navigation. This provides a website’s visitors with an easy
means to browse to different locations within the website without getting lost.
1. How would you use CSS-based menus to enhance a website’s navigation?
2. Find instances when you would use an image map.

NOTES

LESSON 5

Incorporating Meta-
Content and Multimedia
In this lesson, you will incorporate meta-content and multimedia.
You will:
• Refresh and redirect pages.
• Link media to a web page.
• Embed media in a web page.
Lesson 5: Incorporating Meta-Content and Multimedia 109

LESSON 5
Introduction
You have created advanced navigation for your website. Now that your website is close to
completion, you would like to make it more interactive with richer content. In this lesson, you
will incorporate meta-content and multimedia.
Websites abound on the Internet. In order for your website to be successful, you need visitors
to revisit it. So what is it that keeps visitors coming back for more? Fresh, updated content is
an important factor; web pages that remain unchanged are not likely to be revisited frequently.
An enjoyable experience is also key to drawing users back to your website. Multimedia is a
powerful means of providing such an experience as it helps create rich, interactive web pages
that stand out.
TOPIC A
Refresh and Redirect Pages
Interactive, rich content enhances the appeal of your website. However, you would not want
users looking at stale versions of your website when updated content is available. In this topic,
you will refresh and redirect pages.
Pages on the Internet do not remain unchanged, they get updated periodically with new con-
tent. When updates happen every few minutes, users stand a chance of missing this new
content unless the page is refreshed. But stale news is not as bad as losing your address on the
Internet. This is a very real possibility in the event of your website shifting to another URL,
particularly if the new URL is a lengthy string that is hard to remember. Fortunately, you can
point users to the new URL from the old one rather than expecting them to memorize the
address.
<meta> Tags
The <meta> tag is an element that must be placed in the <head> section of an XHTML
document. Though it does not have a closing tag, it must be properly closed. The
http-equiv attribute can be set to refresh. The content attribute specifies the refresh
rate in seconds. The page reloads periodically in the browser window based on the refresh rate.
The content attribute also allows you to specify an address to which the page gets redi-
rected after a set time period.
Figure 5-1: Code that refreshes and redirects a web page.
However, browsers allow users to disable the refresh triggered by a <meta> tag so that the web page would not
be able to refresh or redirect.

LESSON 5
How to Refresh and Redirect Pages
Procedure Reference: Refresh a Web Page
To refresh a web page:
1. In your editor, open the appropriate web page.
2. In the <head> section, below the <title> element, type
<meta http-equiv="refresh" content="number of seconds" /> so that the
page gets refreshed periodically after the specified number of seconds.
3. Save the file.
4. View the web page in a browser.
5. On the status bar, observe the green progress bar that appears when the page gets
refreshed.
Procedure Reference: Redirect a Web Page

To redirect a web page:
2. In the <head> section, below the <title> element, type
<meta http-equiv="refresh" content="number of seconds; url=web
address" /> so that the page gets redirected to the specified address after the
specified number of seconds.
The web address should include http:// at the beginning.
3. In the <body> section, provide a hyperlink to the address that the page should
redirect to.
The hyperlink is provided in case a user has automatic refresh by <meta> tags disabled in the
browser.
4. Save the file.

5. View the web page in a browser.
6. Observe that the website at the specified address loads in the browser window
after the specified number of seconds.

LESSON 5
ACTIVITY 5-1
Refreshing a Web Page
Data Files:
• about.html
Before You Begin:

From the C:\085961Data\Meta-ContentAndMultimedia\Activity1 folder, open the about.html
file in Notepad++.
Scenario:
The content on the About Us page will be updated periodically with new content. To ensure
that users see this updated content sooner rather than later, you decide to make the page
refresh itself periodically. After writing the code, you will test the web page to make sure it
works.
1. Add code to refresh the About Us a. In line 5, place the insertion point after
page every 10 seconds. the closing </title> tag. Press Enter to
create a blank line.
b. Type <meta http-equiv="refresh"

content="10" /> so that the page gets
refreshed every 10 seconds.
c. Save the file.

LESSON 5
2. Test the updated web page in a. Launch the file in Internet Explorer and
b. On the status bar, observe the green

progress bar that appears when the page
gets refreshed.
The green progress bar may only be visible

very briefly.
c. Switch to Notepad++.
d. In line 26, place the insertion point

between the text “soon!” and the closing
</p> tag.
e. Press Spacebar, type Check refresh. and

save the file.
f. Switch to Internet Explorer.
g. Observe that the text on the web page

has changed to “Coming soon! Check
refresh.” although you have not clicked
the Refresh button.
i. In Notepad++, close the about.html file.

LESSON 5
ACTIVITY 5-2
Redirecting a Web Page
Data Files:
• index.html
Before You Begin:

From the C:\085961Data\Meta-ContentAndMultimedia\Activity2 folder, open the index.html
file in Notepad++.
Scenario:
The Everything for Coffee website has moved to another address, so you need to redirect users
from the old address to the new one. You should also provide a hyperlink to the new address
in case a user’s browser does not allow automatic refresh from <meta> tags.
1. Add code that redirects the web page a. In line 5, place the mouse pointer after
to the new address. the closing </title> tag. Press Enter to
create a blank line.
b. Type
<meta http-equiv="refresh"
content="5; url=
http://www.everythingforcoffee.com" />
so that the page gets redirected to the
specified address after five seconds.
c. In line 26, place the insertion point before

the word “here”.
d. Type
<a href=⇒
"http://www.everythingforcoffee.com">
You can copy the address from the <meta>

tag and paste it, instead of typing it again.
e. Place the insertion point after the word

“here” and type </a> so that the word
“here” is a hyperlink to the specified
address.
f. Save the file.

LESSON 5
2. Test the web page in Internet a. Launch the web page in Internet Explorer
Explorer. and maximize the window.
b. Observe that a new page loads in Internet

Explorer after five seconds.
In Firefox, the new page loads in the same win-

dow.
c. Observe that the URL in the address bar is

http://www.everythingforcoffee.com.
e. In Notepad++, close index.html.
TOPIC B
Link Media
You have refreshed and redirected pages on your website. In addition to providing up-to-date
content, you might wish to add interactive content that captures the user’s attention to your
web page. In this topic, you will link media.
Images and words are the basic means of presenting content. Now, add sound and video to the
mix. This makes for a far more interesting, interactive, and attractive web page that is likely to
keep visitors coming back.
Media File Formats

The term multimedia encompasses different types of media such as images, audio, video, and
animation. Various file formats correspond to these different types of media. Certain file for-
mats are proprietary to particular players and cannot be played in other players.
Media File Format Description

.wma This file format corresponds to audio files that play
in Windows Media Player.
.wmv This file format corresponds to video files that play
in Windows Media Player.
.mov This file format corresponds to video files that play
in Apple’s QuickTime Player.
.swf This file format corresponds to animations created
with Adobe’s Flash software.

LESSON 5
Media File Format Description
.wav This file format corresponds to audio files.
.mp3 This file format corresponds to audio files.
.mpg and .mpeg These file formats corresponds to video files.
RealPlayer
RealPlayer is a popular player. It has its own proprietary formats, but it can also play
other file formats that are commonly used.
How to Link Media

Procedure Reference: Link Media to a Web Page
To link media to a web page:
2. In the <body> section, create a hyperlink using the anchor element.
3. Set the location of the media file as the href attribute value.
4. Save the file.
5. Launch the web page in a browser.
6. Click the hyperlink so that the media file starts playing in the appropriate player.
ACTIVITY 5-3
Linking a Media File
Data Files:
• about.html
• video.wmv
Before You Begin:

file in Notepad++. Ensure that the volume is set so audio playing on the computer can be
heard.
Scenario:
In order to make the website more attractive so that visitors come back to it, the client has
decided to incorporate a video file. This file will be available on the About Us page, and you
have placed this file in the media folder of the website.

LESSON 5
1. Create a hyperlink that links the a. Place the insertion point at the end of line
video file to the About Us page. 25 and press Enter. Line 25 contains the
code <p>Enjoy the taste of
Everything for Coffee!</p>.
b. Type
<a href="media/video.wmv">⇒
Click here for a video clip.</a>
to create a hyperlink to the video file.
c. Save the file.
2. View the updated web page in a. Launch the file in Internet Explorer and
b. Click the hyperlink Click here for a video

clip.
c. Observe that Windows Media Player has

opened and a video has started playing.
It may take some time for the video to start

playing in Windows Media Player.
d. Close Windows Media Player.
f. In Notepad++, close about.html.

LESSON 5
TOPIC C
Embed Media
You have linked media to a web page. However, you may require a media file to play within
the web page instead of opening locally in a player. In this topic, you will embed media.
Media such as audio and video can jazz up your web page. But what if you don’t want the
user to have a copy of these media files? Embedding media provides users with a rich multi-
media experience while protecting your content.
Plug-ins
A plug-in extends the functionality of a software application. Browsers require plug-ins to play
media files that have been embedded in web pages. The plug-in required depends on the for-
mat of the embedded media file. In some cases, different browsers may use different plug-ins
to play the same format, such as MP3 files. Files with the extension .swf require the Adobe
Flash Player plug-in. However, plug-ins are usually browser specific. So there is a Flash Player
plug-in for Internet Explorer and another plug-in by the same name for Firefox. Sometimes
installing the appropriate player provides the plug-ins needed. This is the case with Apple’s
QuickTime Player and MOV files. Some plug-ins are provided by default; for instance, most
systems have an older version of the Flash Player plug-in for Internet Explorer.
Elements Used for Embedding Media

The <object> and <param> elements allow you to embed media files in web pages. The
<object> element comprises an opening and closing tag. Its classid and codebase
attributes specify details of the plug-in required to play the embedded media file, so that
browsers without this plug-in can download it. However, certain browsers such as Firefox are
unable to understand these attributes. The <object> element’s width and height can be
used to set the dimensions of the media file. Its data attribute specifies the path of the media
file to be embedded, and its standby attribute sets the text to display while the media file is
loading.
The <param> element is placed within the <object> element. It can be used to specify
additional parameters that control the embedded media file. Although this element does not
have a closing tag, it should be properly closed. Its attributes are name and value. Some
browsers have a problem interpreting the data attribute for certain file formats. In this case, a
<param> element is required to specify the path of the media file to be embedded. You can
also set another <param> tag to control whether the media file plays when the page loads.
More <param> elements can be specified within the <object> element if required.
Figure 5-2: Code that embeds a media file in a web page.
The <embed> Element

The HTML <embed> element was commonly used to embed media files in web
pages. However, it is not valid under the XHTML 1.0 Strict specification.

LESSON 5
Cross-Browser Compatibility
Since different browsers support different code, two sections of code are sometimes
needed to embed media files in web pages. One section for Internet Explorer and the
other for Firefox. As Firefox does not recognize classid and codebase attributes,
it ignores the code intended for Internet Explorer. A conditional comment is used to
hide the Firefox code from Internet Explorer.
Streaming
When a web page contains a hyperlink to a media file, the file downloads to a user’s computer
and plays after the download is complete. When media files are available from a server, they
can be streamed. Streamed media files start playing as they download instead of waiting for the
entire file to download before playback begins. The advantage of streaming is that media files
do not get saved locally on a user’s machine. However, a user’s Internet connection must have
sufficient bandwidth to support streaming. Bandwidth is the amount of data transmitted per
unit of time.
Compression
Since media files are usually quite large, they are compressed before transmission and
de-compressed at the receiving end. If files are not compressed, far too much band-
width would be required to download the file.
Media MIME Types

Media MIME (Multipurpose Internet Mail Extensions) types identify the file format of media
files embedded in web pages. The type attribute of the <object> element takes a MIME
type as its value. This information helps browsers play an embedded media file with the appro-
priate plug-in. MIME types are so named because they were originally developed to serve a
similar purpose in email. A MIME type comprises two parts: a type and a subtype separated
by a forward slash. It may also include optional parameters. MIME types with the type appli-
cation can be used to associate a file with a particular software application, making all
browsers use the same application to play that file. MIME types are also referred to as Internet
media types. They are not mandatory; their necessity varies depending on the browser and the
media file’s format.
MIME Type Description

audio/x-ms-wma The MIME type for audio files with the extension
.wma.
audio/x-wav The MIME type for audio files with the extension
.wav.
audio/mpeg The MIME type for audio files such as MP3 files
and MPEG (Motion Picture Experts Group) audio.
video/x-ms-wmv The MIME type for video files with the extension
.wmv.
video/quicktime The MIME type for video files with the extension
.mov.
application/x-shockwave-flash The MIME type for files with the extension .swf.

LESSON 5
MIME Type Description
application/x-mplayer2 The MIME type to make files play in Windows
Media Player. It can be used for audio and video
files.
MIME Type Reference

The IANA (Internet Assigned Numbers Authority) maintains a list of registered MIME
types at http://www.iana.org/assignments/media-types/. This page lists the types—the
first part of a MIME type. Each type is a hyperlink to all the subtypes under it. Types
or subtypes starting with x- will not be registered with IANA because they are not
standard. Subtypes starting with vnd. are vendor-specific.
How to Embed Media

Procedure Reference: Embed a WMV File
To embed a WMV file:
1. In the <body> section of the XHTML document, type
<object width="numeric value" height="numeric value" ⇒
standby="text to display while the file loads" ⇒
type="video/x-ms-wmv">
2. Two lines below the opening <object> tag, type </object> to close the
<object> element.
3. Place the insertion point in the blank line within the <object> element.
4. Type <param name="src" value="relative location of the
file" /> to specify the file to be embedded.
5. In the next line, type <param name="autostart" value="true or
false" /> to control whether the file plays when the web page loads.
6. In the next line, type <param name="ShowControls" value="true
or false" /> to control whether the media player’s controls are displayed.
7. Save the file.
8. Launch the file in a browser to view the embedded WMV file.
Procedure Reference: Embed an MP3 File

To embed an MP3 file:
<object standby="text to display while the file loads" ⇒
type="application/x-mplayer2" data="relative location of the
file" ⇒
width="numeric value" height="numeric value">
Setting width="320" and height="45" displays only the controls of the Windows Media
Player as there is no video to be seen.

LESSON 5
2. Two lines below the opening <object> tag, type </object> to close the ele-
ment.
You need to provide a <param> tag because not all browsers understand the data attribute of
the <object> element.

6. If necessary, in the next line, type <param name="ShowControls"
value="true or false" /> to control whether the media player’s controls
are displayed.
7. Save the file.
8. Launch the file in a browser to listen to the embedded MP3 file.
Procedure Reference: Embed an MOV File

To embed an MOV file:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" ⇒
codebase="http://www.apple.com/qtactivex/qtplugin.cab" ⇒
width="numeric value" height="numeric value">
2. Two lines below the opening <object> tag, type </object> to close the
<object> element.
6. If necessary, in the next line, type <param name="ShowControls"
value="true or false" /> to control whether the media player’s controls
are displayed.
7. In the next line, create an <object> element that Firefox recognizes within the
first <object> element.
<object type="video/quicktime" data="relative location of the
file" width="numeric value" height="numeric value" id="myid">
<param name="autostart" value="true or false" />
</object>
8. Place the insertion point before the closing </head> tag.

LESSON 5
9. Hide the second <object> element from Internet Explorer.

10. Save the file.
11. Launch the file in a browser to view the embedded MOV file.
Procedure Reference: Embed an SWF File

To embed an SWF file:
<object type="application/x-shockwave-flash" ⇒
data="relative location of the file" ⇒
width="numeric value" height="numeric value" ⇒
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" ⇒
codebase="http://download.macromedia.com/pub/shockwave/cabs/ ⇒
flash/swflash.cab#version=9,0,28,0">
Change the value of the codebase attribute to the version of Flash Player you require.
2. Two lines below the opening <object> tag, type </object> to close the ele-
ment.
5. If necessary, in the next line, type <param name="quality" value=
"high" /> to set the quality of the file.
6. In the next line, create an <object> element that Firefox recognizes within the
first <object> element. Hide the element from Internet Explorer using a condi-
tional comment.

<object data="relative location of the file" width="numeric
value" height="numeric value" type=
"application/x-shockwave-flash">
<param name="quality" value="high" />
</object>

The <param> element is optional.
7. Save the file.

8. Launch the file in a browser to view the embedded SWF file.

LESSON 5
ACTIVITY 5-4
Embedding a WMV File
Data Files:
• about.html
• video.wmv
Before You Begin:

heard.
Scenario:
The client has requested that the video file play in the web page instead of opening locally on
a user’s computer. This prevents users from saving a local copy of the file. You need to make
this change in the About Us page.
1. In the About Us page, delete the a. In line 26, select the code
hyperlink to the video file.
<a href="media/video.wmv"> ⇒
Click here for a video clip.</a>
b. Delete the selected code.
See Code Sample 1.
c. Save the file.
Code Sample 1
<p>Enjoy the taste of Everything for Coffee!</p>
<a href="media/video.wmv">Click here for a video clip.</a>
</div>

LESSON 5
2. Add code to embed the video file. a. Type
<object width="320" height="240"
standby="Loading video..." ⇒
type="video/x-ms-wmv"> to create the
opening tag of an <object> element. The
standby text displays while the file loads, and the
type attribute tells the browser that the file is a
Windows Media Player video file.
b. Press Enter twice and type </object> to

close the element.
c. Place the insertion point within the

<object> element.
d. Type
<param name="src" ⇒
value="media/video.wmv" /> to
specify the location of the video file to be
embedded in the web page.
f. Type
<param name="autostart" ⇒
value="false" /> so that the video file
does not start playing when the page
loads.
g. Press Enter to create a blank line.
h. Set a <param> tag so that the embedded

media player’s controls are visible.
See Code Sample 2.
i. Save the file.
Code Sample 2
<param name="autostart" value="false" />
<param name="ShowControls" value="true" />
</object>

LESSON 5
3. View the About Us page in Internet a. Launch the file in Internet Explorer and
b. Observe that a black rectangle is visible

on the page. Scroll down so that the con-
trols of the media player are visible.
c. Click the black rectangle to activate the

control.
In Internet Explorer, when the mouse pointer is

over a control that needs to be activated, a
dotted border appears around it. This activation
is not required in Firefox.
d. Click the Play button so that the video

starts playing.
e. Watch the video. After it finishes, close

Internet Explorer.
f. In Notepad++, close the about.html file.
ACTIVITY 5-5
Embedding an MP3 File
Data Files:
• about.html
• coffee.mp3
Before You Begin:

heard.
Scenario:
The client has decided that regularly updating the content of the About Us page will draw
visitors back to the website. They have provided an audio file to replace the embedded video
file. You have placed this file in the website’s media folder.

LESSON 5
1. In the About Us page, update the a. In line 26, select the opening <object>
code to embed the audio file. tag and delete it.
See Code Sample 1.
b. Type
<object ⇒
standby="Loading audio..." ⇒
type="application/x-mplayer2" ⇒
data="media/coffee.mp3" The type
attribute tells the browser to use Win-
dows Media Player to play the file, and
the data attribute specifies the path to
the file.
d. Type width="320" height="45"> to

complete the opening <object> tag.
e. In line 28, change video.wmv to

coffee.mp3
See Code Sample 2.
The path to the file is provided in the data

attribute of the <object> element and in the
<param> element, so that both Internet
Explorer and Firefox can play the embedded
file.
f. In line 29, change false to true so that

autostart is true.
See Code Sample 3.
g. Save the file.
Code Sample 1
<object width="320" height="240" standby="Loading video..." type=
"video/x-ms-wmv">
<param name="src" value="media/video.wmv">
Code Sample 2
width="320" height="45" >
<param name="src" value="media/coffee.mp3">
<param name="autostart" value="false">
Code Sample 3

LESSON 5
width="320" height="45" >
<param name="src" value="media/coffee.mp3">
<param name="autostart" value="true">
2. View the About Us page in Internet a. Launch the file in Internet Explorer and
b. Observe that the Windows Media Player

controls are visible on the page and the
audio starts playing automatically.
c. Listen to the audio file. After it finishes,

close Internet Explorer.
d. In Notepad++, close the about.html file.
ACTIVITY 5-6
Embedding an MOV File
Data Files:
• about.html
• code.txt
• coffee.mov
Before You Begin:

and code.txt files in Notepad++. The about.html tab should be selected. Ensure that the vol-
ume is set so audio playing on the computer can be heard.
Scenario:
After a week, the client provides a QuickTime movie to be placed on the About Us page. You
have placed it in the website’s media folder and deleted the code that embedded the audio file
in the About Us page. You have documented the values required for the classid and
codebase attributes.

LESSON 5
1. Create an <object> element and a. Place the insertion point in line 26, the
set its classid and codebase blank line below <p>Enjoy the taste
attributes. of Everything for Coffee!</p>.
b. Type <object> and press Enter twice,

then type </object> to create an
<object> element.

> in the <object> tag. Press Spacebar,
type classid=""
d. Press Enter and type codebase=""
See Code Sample 1.
e. Select the code.txt tab. Select the code

in line 1 and copy it.
f. Select the about.html tab and paste the

copied code as the value of the classid
attribute.
g. Select the code.txt tab. Select the code

in line 3 and copy it.
h. Select the about.html tab and paste the

copied code as the value of the
codebase attribute.
i. In line 27, place the insertion point before

> and press Spacebar. Type
width="320" height="255"
See Code Sample 2.
Code Sample 1
<object classid=""
codebase="">
</object>
Code Sample 2
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height=
"255">
</object>

LESSON 5
2. Set <param> tags within the a. Place the insertion point in the blank line
<object> element. above the closing </object> tag.
b. Type
<param name="src" ⇒
value="media/coffee.mov" /> This tag
specifies the media file to be embedded.
d. Type
value="false" /> so that the movie
does not start playing when the page
loads.
See Code Sample 3.
f. Save the file.
Code Sample 3
codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="320" height=
"255">
<param name="src" value="media/coffee.mov" />
</object>

LESSON 5
3. View the web page in Internet a. Launch the file in Internet Explorer and
b. In the MIME Type Configuration message

box, check the Do not prompt in the
future check box and click No.
c. Observe that a movie clip is visible on the

web page but it is not playing.
d. Scroll down so that the controls below the

movie clip are visible.
e. Click the movie clip to activate the con-

trol. Click the Play button so that the
video starts playing.
This activation is not required in Firefox.
f. Watch the video. After it finishes, close

Internet Explorer.
g. Launch the file in Firefox.
h. Observe that nothing is displayed below

the text in the About Us page. This is
because Firefox does not understand the
classid and codebase attributes. Close
Firefox.

LESSON 5
4. Write code that allows Firefox to dis- a. Press Enter to create a second blank line
play the embedded content. above the closing </object> tag.
b. Type <object> and press Enter twice,

then type </object> to create an
<object> element within the first object
element.
See Code Sample 4.

> of the <object> tag and press
Spacebar. Type
type="video/quicktime" ⇒
data="media/coffee.mov" ⇒
width="320" height="255" ⇒
id="IEhide"
See Code Sample 5.

below and type
value="false" />
See Code Sample 6.
e. Save the file.
Code Sample 4
<object>
</object>
</object>
Code Sample 5
<object type="video/quicktime" data="media/coffee.mov" width="320" height=
"255" id="IEhide">
</object>
</object>
Code Sample 6
<object type="video/quicktime" data="media/coffee.mov" width="320" height=
"255" id="IEhide">
</object>

LESSON 5
5. Hide the second <object> element a. In line 6, place the insertion point at the
from being displayed in Internet end of the code linking the external CSS
Explorer. and press Enter.
b. Create a conditional comment for Internet

Explorer, and create an embedded style
sheet within the conditional comment.
See Code Sample 7.
c. Place the insertion point within the

embedded style sheet and press Tab.
d. Type #IEhide{display:none;} so that

the <object> element with id=
"IEhide" is not displayed in Internet
Explorer.
See Code Sample 8.
e. Save the file.
Code Sample 7

</head>
Code Sample 8
#IEhide{ display: none;}
</style>

LESSON 5
6. View the updated web page in a. Launch the file in Firefox.
Firefox and Internet Explorer.
b. If necessary, in the MIME Type Configura-
tion message box, check the Do not
prompt in the future check box and click
No.
c. Observe that a movie clip is displayed on

the web page but it is not playing. Click
the Play button.
d. Watch the movie. After it finishes, close

Firefox.
e. Launch the file in Internet Explorer and

f. Observe that a movie clip is visible on the

web page but it is not playing. Scroll down
so that the controls below the movie clip
are visible.
g. Observe that there is nothing below the

movie clip because the conditional com-
ment hides the second <object>
element from Internet Explorer.
h. Click the movie clip to activate the con-

trol. Click the Play button so that the
video starts playing.
i. Close Internet Explorer.
j. In Notepad++, close the about.html and

code.txt files.

LESSON 5
ACTIVITY 5-7
Embedding an SWF File
Data Files:
• index.html
• topBanner.swf
Before You Begin:

From the C:\085961Data\Meta-ContentAndMultimedia\Activity7 folder, open the index.html
and code.txt files in Notepad++. The index.html tab should be selected.
Scenario:
The client has asked for the banner image at the top of each page to be animated so that the
website is more attractive and appealing. You have placed the animated SWF file in the media
folder. You decide to embed the file on the Home page for the client’s approval rather than
embedding it in every web page.

LESSON 5
1. In the Home page, create an a. Place the insertion point in line 11, the
<object> element and set its blank line below <div id="header"
attributes. title="Everything for
Coffee.com">.
b. Type
<object type=
"application/x-shockwave-flash" ⇒
data="media/topBanner.swf" ⇒
width="779" height="180">
c. Press Enter twice, then type </object>
d. In the opening <object> tag, place the

insertion point before > and press Enter.
e. Type classid="" and press Enter, then

type codebase=""
See Code Sample 1.
f. Select the code.txt tab and copy the code

in the first line.
g. Paste the copied code as the value of the

classid attribute.
h. From code.txt, select the code in line 3

and paste it as the value of the codebase
attribute.
Code Sample 1
<div id="header" title="Everything for Coffee.com">
<object type="application/x-shockwave-flash" data="media/topBanner.swf"
width="779" height="180"
classid=""
codebase="">

LESSON 5
2. Set <param> tags within the a. In the blank line within the <object>
<object> element. element, type <param name="src" ⇒
value="media/topBanner.swf" />
b. Press Enter to create a blank line.
c. Type
<param name="quality" ⇒
value="high" /> to set the quality of
the embedded file.
d. Press Enter twice to create blank lines.
e. Save the file.

LESSON 5
3. Create an <object> element for a. Create a conditional comment for brows-
Firefox. ers other than Internet Explorer.
See Code Sample 2.
b. Place the insertion point in the blank line

c. Create an <object> element that

embeds the topBanner.swf file from the
media folder using the data attribute.
Set its dimensions and its type attribute
with the appropriate value for an SWF
file.
See Code Sample 3.
d. In the blank line within the <object>

element, type <param name=
"quality" value="high" />
e. Save the file.
Code Sample 2
<param name="quality" value="high" />


Code Sample 3

<object data="media/topBanner.swf" width="779" height="180" ⇒
type="application/x-shockwave-flash">
</object>


LESSON 5
4. View the Home page in Internet a. Launch the file in Internet Explorer and
b. Observe that there is steam rising off the

coffee cup at the top of the web page.
Watch the animation for a few seconds.
c. Place the mouse pointer over the anima-

tion at the top of the page so that a
dotted line appears around it. Click the
animation at the top of the page to acti-
vate it so that the dotted line around it
disappears.
This activation is only required in Internet

Explorer, not in Firefox.
e. Launch the file in Firefox.
f. Observe that the same animation is visible

in Firefox. Watch the animation for a few
seconds.
g. Close Firefox.
h. In Notepad++, close the index.html and

code.txt files.
Lesson 5 Follow-up
In this lesson, you incorporated meta-content and multimedia. This ensures that your website
offers engaging, up-to-date content that helps make your website more successful by drawing
visitors back to it.
1. What circumstances would prompt you to periodically refresh a web page?
2. What multimedia format would you most likely use on a website?

Follow-up FOLLOW-UP
In this course, you created advanced web pages with box layouts and external CSS. You also
validated and tested these web pages, added advanced navigation using CSS-based menus and
image maps, and incorporated meta-content and multimedia.
1. What factors would you take into consideration when designing a web page layout?
2. What are the different ways in which you can use CSS to enhance your website?
3. How would you design a website that draws visitors back to it?
What’s Next?
Web Design with XHTML, HTML, and CSS - Level 3 is the next course in this series.
139
NOTES

LESSON
LABS
LESSON LABS
Due to classroom setup constraints, some labs cannot be keyed in sequence immediately fol-
lowing their associated lesson. Your instructor will tell you whether your labs can be practiced
immediately following the lesson or whether they require separate setup from the main lesson
content. Lesson-level lab setup information is listed in the front of this manual in the course
setup section.
LESSON 1 LAB 1
Creating Web Page Layouts
Activity Time:
20 minutes
Data Files:
• index.html
Before You Begin:

From the C:\085961Data\Creating Layouts\Lab folder, open the index.html file in Notepad++.
Scenario:
The graphic designer has finalized the look of the home page of the Citizens Information Cen-
ter website and the client has approved the design. You need to code the home page to match
the design’s layout comprising a header with an image, a navigation row containing
hyperlinks, and a third layer for the remainder of the content; all centered within the browser
window.
1. Group content into four layers with id attributes set as container, header,
navigation, and content.
Comments have been provided in the data file to help you create the layers in the correct locations.
Lesson Labs 141

LESSON
2. In the phrase “Chermont is a large city”, place the text “Chermont” within a
LABS <span> element and set the attribute class="spl_format".
3. Within the <style> element, delete the styles under the selectors
p.content_txt and p#colorstrip.
Delete the code from line 9 to 22.
4. Apply styles to the <span> element with class="spl_format" so that the text
is 12 px, bold, and its color is #061B61.
5. Apply styles to the <body> element so that its margins and padding are 0. Set a
repeating background image using the settings given below.
CSS Property Value

background url(graphics/bg.gif) repeat left
top
6. Apply styles to the layer with id="container" using the settings given in the
table.
CSS Property Value

width 778px
margin 0px auto
background-color #FFFFFF
7. Apply styles to the layer with id="content" so that its width, height, and pad-
ding are 758 px, 310 px, and 10 px, respectively. No floating content should be
allowed on both sides of the layer.
8. Apply styles to <p> elements with class="content_txt" using the settings

given in the table.
CSS Property Value

margin 7px 0
padding 0
font-family Arial, Verdana,sans-serif
font-size 12px
color #222222

LESSON
9. Apply styles to the layer with id="header" so that its width is 100%.
LABS
10. Apply styles to the element with id="head_img" so that its margins and padding
are 0, and it floats on the left.
11. Apply styles to the layer with id="navigation" to set its height as 22 px and its
background color as #E3E3E3. No floating content should be allowed on both
sides of the layer and the text should be bold.
12. Apply styles to the horizontal rule using the settings given in the table.
CSS Property Value

clear both
height 2px
margin 0
padding 0
border #8C8C8C 1px solid
13. Save the file and view the web page in Internet Explorer.
LESSON 2 LAB 1
Managing CSS
Activity Time:
5 minutes
Data Files:
• index.html
• contact.html
Before You Begin:

From the C:\085961Data\Managing CSS\Lab folder, open the contact.html and index.html files
in Notepad++.
Scenario:
Your manager has asked you to separate styles from content and reduce the amount of code in
the website if possible, so that the code can be managed more efficiently. A colleague suggests
using advanced CSS selectors to reduce the number of id or class attributes in the web
pages.
Lesson Labs 143

LESSON
LABS 1. In the index.html file, change the selector p.content_txt to #content p and
delete the attributes class="content_txt" in lines 111 and 120.
2. Copy all the code within the <style> element and save it in an external CSS
named style.css in the same folder as the web pages.
3. In index.html, delete the embedded style sheet, link the external CSS to the web
page, and save the file.
4. Similarly, in contact.html, replace the embedded style sheet with a link to the
external CSS, and save the file.
5. View the pages of the website in Internet Explorer.
LESSON 3 LAB 1
Testing a Website
Activity Time:
10 minutes
Data Files:
• index.html
• contact.html
• style.css
Before You Begin:

1. From the C:\085961Data\Testing A Website\Lab folder, open the style.css,
contact.html, and index.html files in Notepad++.
2. In Internet Explorer, open the W3C® Markup Validation Service located at http://
validator.w3.org and the W3C® CSS Validation Service located at http://
jigsaw.w3.org/css-validator.
Scenario:
Due to a quality decision by management, all websites must be validated using the W3C®
Markup Validation Service as well as the W3C® CSS Validation Service. You must also make
sure that website is displayed properly by the browser.
1. Validate the markup of the contact.html file using the Direct Input facility of the
W3C® Markup Validation Service.

LESSON
2. Validate the markup of the index.html file using the Direct Input facility of the
W3C® Markup Validation Service. LABS
3. Identify the error based on the validation output, fix the error, save the changes,
and validate the markup again.
4. Validate the code of the style.css file using the file upload facility of the W3C®
CSS Validation Service.
5. Identify the error based on the validation output, fix the error, save the changes,
and validate the styles again.
6. View the pages of the website in Internet Explorer to verify that they are dis-
played as intended.
LESSON 4 LAB 1
Creating Advanced Navigation
Activity Time:
15 minutes
Data Files:
• index.html
• style.css
• coordinates.txt
Before You Begin:

From the C:\085961Data\Advanced Navigation\Lab folder, open the coordinates.txt, style.css,
and index.html files in Notepad++.
Scenario:
The Citizens Information Center website is complete in terms of content, but the navigation
options, comprising hypertext links in an unordered list, need to be enhanced for a more pro-
fessional appearance. The client has also requested the use of images as a means of navigation
so that the website is more interactive.
Lesson Labs 145

LESSON
LABS 1. In the external CSS, apply styles to the unordered list that is a child of an element
with id="left_col" using the settings given in the table.
CSS Property Value

margin 0
padding 10px
list-style none
2. Apply the style line-height: 45px; to the list items in the unordered list.
3. Apply styles to the anchor tags that are children of the list items in the unordered
list, which is in turn a child of an element with id="left_col" using the set-
tings given in the table. On rollover, the color of the hyperlinks should change to
#E88725.
CSS Property Value

text-decoration none
color #061B61
font-size 14px
4. Save and close the file.
5. In the index.html file, in the layer with id="img_map", create an image map
with polygonal hotspots that link to the contact.html and newsroom.html web
pages, using the coordinates from the coordinates.txt file.
6. Save the index.html file and launch it in Internet Explorer. Test the menu options
and the image map.

LESSON
LESSON 5 LAB 1 LABS
Incorporating Meta-Content and Multimedia
Activity Time:
10 minutes
Data Files:
• newsroom.html
• index.html
• audio.mp3
Before You Begin:

From the C:\085961Data\Meta-ContentAndMultimedia\Lab folder, open the index.html and
newsroom.html files in Notepad++.
Scenario:
Since the content on the Newsroom page will be updated periodically, the client has requested
that the web page get refreshed automatically every 6 seconds. To enhance the interactivity and
appeal of the website, the client has also provided an audio file to be embedded on the Home
page.
1. In the newsroom.html file, add code that refreshes the web page every 6 seconds
and save the file.
2. In the index.html file, add code that embeds the audio file so that it starts playing
in Windows Media Player when the web page loads.
3. Save the index.html file and launch it in Internet Explorer to listen to the audio
file.
4. Navigate to the Newsroom page to view the green bar that appears on the status
bar when the page gets refreshed every 6 seconds.
5. Close Internet Explorer.
Lesson Labs 147

NOTES

SOLUTIONS
SOLUTIONS
Solutions 149
NOTES

GLOSSARY
GLOSSARY
alternate CSS persistent style sheet
An external CSS linked with the rel attribute A style sheet linked with the default syntax of
of the <link> tag set to “alternate stylesheet”. the <link> tag.
box layout plug-in

A web page layout built with <div> elements. Extends the functionality of a software appli-
cation.
conditional comments
Comments used to demarcate code that targets preferred style sheet
or bypasses Internet Explorer. A style sheet linked with the default syntax of
the <link> tag and a title attribute.
external CSS
A file with the extension .css that contains streamed media files
styles to be applied to a web page or multiple Files that start playing as they download
web pages. instead of waiting for the entire file to down-
load before playback begins.
fixed layouts
Layouts whose dimensions are set in pixels W3C CSS Validation Service
that retain their original dimensions when the A free service that helps you validate style
browser is resized. sheets.
fluid layouts W3C Markup Validation Service

Layouts whose dimensions are set in percent- A free service that provides facilities to vali-
age that resize along with the browser date a web page’s markup.
window.
hotspot
A clickable section of an image map that
behaves as a hyperlink to a particular loca-
tion.
image map
A graphic within which sections have been
coded to behave as hyperlinks to different
locations.
Media MIME types
(Multipurpose Internet Mail Extensions) Iden-
tify the file format of media files embedded in
web pages.
Glossary 151
NOTES

INDEX
INDEX
A S
alternate CSS, 54 streamed media files, 119
style sheets
C persistent, 38
conditional comments, 48 preferred
CSS menus, 75
T
E tags
external CSS, 37, 39 <div>, 2
<link>, 38
F
<span>, 5
floating content, 14
frames, 12 W
W3C® CSS Validation Service, 68
H
W3C® Markup Validation Service, 62
hotspots, 102
Z
I
z-index, 14
image maps, 102
@import rule, 38
L
layouts
fixed, 11
fluid
box
M
<meta> tags, 110
multimedia, 115
P
plug-ins, 118
properties
clear, 13
display, 74
overflow, 3
position, 13
Index 153

HTML L2 PDF

Uploaded by

Document Information

Original Title

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

HTML L2 PDF

Uploaded by

Copyright:

Available Formats

Web Design with XHTML, HTML, and CSS

To access your online resources:

ii Web Design with XHTML, HTML, and CSS - Level 2

LESSON 1 - CREATING WEB PAGE LAYOUTS

LESSON 2 - MANAGING CSS

LESSON 4 - CREATING ADVANCED NAVIGATION

LESSON 5 - INCORPORATING META-CONTENT AND MULTIMEDIA

LESSON LABS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141

iv Web Design with XHTML, HTML, and CSS - Level 2

ABOUT THIS COURSE

vi Web Design with XHTML, HTML, and CSS - Level 2

viii Web Design with XHTML, HTML, and CSS - Level 2

List of Additional Files

LESSON 1 Lesson Time

Creating Web Page Layouts

Lesson 1: Creating Web Page Layouts 1

2 Web Design with XHTML, HTML, and CSS - Level 2

Figure 1-1: <div> element containing logically grouped elements.

The overflow Property

Style Rule Description

Lesson 1: Creating Web Page Layouts 3

4 Web Design with XHTML, HTML, and CSS - Level 2

Figure 1-2: Result of formatting applied to a <span> element containing text.

Lesson 1: Creating Web Page Layouts 5

Procedure Reference: Group Content with the <div> Element

4. Assign an id or a class attribute to the <div> element with a suitable value.

6 Web Design with XHTML, HTML, and CSS - Level 2

Before You Begin:

Lesson 1: Creating Web Page Layouts 7

b. Observe that the text “600 A.D.” in the

c. Close Internet Explorer and in the

d. Click before “600” and type

See Code Sample 1.

e. Click after the text “A.D.” and type

f. Click at line 60, the blank line above the

g. Apply styles to the class

See Code Sample 2.

The hexadecimal value of the color property

h. Save the file.

8 Web Design with XHTML, HTML, and CSS - Level 2

c. Switch to Notepad++ and launch the file in

d. Observe that the text exhibits the same

e. Close Firefox and Internet Explorer.

Lesson 1: Creating Web Page Layouts 9

c. In line 65, the line with the code <p id=

See Code Sample 3.

d. Click at the beginning of line 73, the line

e. In the closing tag </p>, change p to div

f. Press Home so that the insertion point

g. Click at line 59, the blank line below the

h. Apply styles to the layer with id=

See Code Sample 4.

i. Save the file.

10 Web Design with XHTML, HTML, and CSS - Level 2

b. Observe the scroll bar on the right of the

c. Scroll down so that the rest of the text

d. Switch to Notepad++ and launch the file in

f. Observe that the text is scrollable.

g. Close Firefox and all Internet Explorer

h. In Notepad++, choose File→Close to close

The Box Layout

Lesson 1: Creating Web Page Layouts 11

Traditional vs. W3C Model