HTML and CSS

Project Workbook

First Edition

LearnKey creates signature multimedia courseware. LearnKey provides expert instruction for popular computer software,
technical certifications, and application development with dynamic video-based courseware and effective learning
management systems. For a complete list of courses, visit https://www.learnkey.com.

All rights reserved. Unauthorized reproduction or distribution is prohibited.

© 2021 LearnKey
www.learnkey.com
Table of Contents
Introduction 1
Best Practices Using LearnKey’s Online Training 2
Using This Workbook 3
Skills Assessment 4
HTML and CSS Video Times 5
Domain 1 6
Fill-in-the-Blanks 7
Script and Noscript Tags 8
Link and Meta Tags 9
HTML Fundamentals 10
Domain 2 11
Fill-in-the-Blanks 12
Creating Style Sheets 13
Style Sheet Precedence 14
Valid Syntax for Rule Sets 15
Apply Classes 16
Apply IDs 17
Apply Pseudo Classes 18
Domain 3 19
Fill-in-the-Blanks 20
HTML Tables 22
HTML Headings, Paragraphs, and Line Breaks 23
Hr, Div, and Span Tags 24
HTML List Tags 25
Semantic Tags 26
Details and Summary Tags 27
Figure and Caption Tags 28
Image Links 29
Hyperlinks 30
Bookmarks 31
Relative and Absolute Links 32
Navigating Folder Hierarchies 33
 Map and Area Tags 34
Action and Method Attributes 35
Accessibility 36
Input Types and Labels 37
The Select Tag 38
Textarea Tag 39
Button Tags 40
Output Tags 41
Option Tag 42
Datalist 43
Fieldset and Legend Tags 44
Domain 4 45
Fill-in-the-Blanks 46
Add Images 47
Image Layouts and Links 48
Video and Source Tags 49
Audio and Track Tags 50
Simple Iframe Implementations 51
Domain 5 52
Fill-in-the-Blanks 53
Height and Max-Width Used with an Element 55
Float Positioning 56
Relative and Absolute Positioning 57
Static and Fixed 58
Overflow and Alignment Settings 59
Display 60
Inline vs. Block 61
Visibility 62
Box Model Margins and Padding 63
Font Families in CSS 64
Font Colors in CSS 65
Font Styles and Weights in CSS 66
Link Colors in CSS 67
Font Variant 68
 Text Alignment and Decoration 69
Indentation 70
Line Height and Word-Wrap 71
Letter-Spacing, Word-Spacing 72
Border Color and Style 73
Border Width 74
Backgrounds 75
Divs and Colors 76
Units of Measure 77
Viewport and Media Query Settings 78
Percentages and Pixels 79
Frameworks, Templates, and Max Width 80
Grids 81
Domain 6 82
Fill-in-the-Blanks 83
Reusing Rules and Rule Sets 84
CSS Comments 85
Multiple Browser Tests and Web Safe Fonts 86
Separation of Structure and Style 87
Text Alternatives 88
Color Contrast and Typography 89
Tab Order and Text Resizing 90
Text Hierarchy 91
Syntax Errors 92
Tag Mismatch 93
Cascading Issues 94
Appendix 95
Glossary 96
Objectives 99
HTML and CSS Lesson Plan 101
Domain 1 Lesson Plan 101
Domain 2 Lesson Plan 102
Domain 3 Lesson Plan 103
Domain 4 Lesson Plan 105
Domain 5 Lesson Plan 106
Domain 6 Lesson Plan 108
Introduction

1 | Introduction: Best Practices Using LearnKey’s Online Training HTML and CSS Project Workbook, First Edition
Best Practices Using LearnKey’s Online Training
LearnKey offers video-based training solutions that are flexible enough to accommodate private students and educational
facilities and organizations.

Our course content is presented by top experts in their respective fields and provides clear and comprehensive
information. The full line of LearnKey products has been extensively reviewed to meet superior standards of quality. Our
course content has also been endorsed by organizations such as Certiport, CompTIA®, Cisco, and Microsoft. However, it is
the testimonials given by countless satisfied customers that truly set us apart as leaders in the information training world.

LearnKey experts are highly qualified professionals who offer years of job and project experience in their subjects. Each
expert has been certified at the highest level available for their field of expertise. This expertise provides the student with
the knowledge necessary to obtain top-level certifications in their chosen field.

Our accomplished instructors have a rich understanding of the content they present. Effective teaching encompasses
presenting the basic principles of a subject and understanding and appreciating organization, real-world application, and
links to other related disciplines. Each instructor represents the collective wisdom of their field and within our industry.

Our Instructional Technology

Each course is independently created based on the manufacturer’s standard objectives for which the course was
developed.

We ensure that the subject matter is up-to-date and relevant. We examine the needs of each student and create training
that is both interesting and effective. LearnKey training provides auditory, visual, and kinesthetic learning materials to fit
diverse learning styles.

Course Training Model

The course training model allows students to undergo basic training, building upon primary knowledge and concepts to
more advanced application and implementation. In this method, students will use the following toolset:

Pre-assessment: The pre-assessment is used to determine the student’s prior knowledge of the subject matter. It will also
identify a student’s strengths and weaknesses, allowing the student to focus on the specific subject matter he/she needs
to improve the most. Students should not necessarily expect a passing score on the pre-assessment as it is a test of prior
knowledge.

Video training sessions: Each training course is divided into sessions or domains and lessons with topics and subtopics.
LearnKey recommends incorporating all available external resources into your training, such as student workbooks,
glossaries, course support files, and additional customized instructional material. These resources are located in the folder
icon at the top of the page.

Exercise labs: Labs are interactive activities that simulate situations presented in the training videos. Step-by-step
instructions and live demonstrations are provided.

Post-assessment: The post-assessment is used to determine the student’s knowledge gained from interacting with the
training. In taking the post-assessment, students should not consult the training or any other materials. A passing score is
80 percent or higher. If the individual does not pass the post-assessment the first time, LearnKey recommends
incorporating external resources, such as the workbook and additional customized instructional material.

Workbook: The workbook has various activities, such as fill-in-the-blank worksheets, short answer questions, practice
exam questions, and group and individual projects that allow the student to study and apply concepts presented in the
training videos.

2 | Introduction: Best Practices Using LearnKey’s Online Training HTML and CSS Project Workbook, First Edition
Using This Workbook
This project workbook contains practice projects and exercises to reinforce the knowledge you have gained through the
video portion of the HTML and CSS course. The purpose of this workbook is twofold. First, get you further prepared to
pass the HTML and CSS exam, and second, to get you job-ready skills and increase your employability in the area of
HTML5 and CSS.

The projects within this workbook follow the order of the video portion of this course. To save your answers in this
workbook, you must first download a copy to your computer. You will not be able to save your answers in the web version.
You can complete the workbook exercises as you go through each section of the course, complete several of these at the
end of each domain, or complete them after viewing the entire course. The key is to go through these projects to
strengthen your knowledge of this course.

Each project is based upon a specific video (or videos) in the course and specific test objectives. The materials you will
need for this course include:

• LearnKey’s HTML and CSS courseware.

• The course project files. All applicable project files are located in the support area where you downloaded this
workbook.

We value your feedback about our courses. If you have any questions, comments, or concerns, please let us know by
visiting https://about.learnkey.com.

3 | Introduction: Using This Workbook HTML and CSS Project Workbook, First Edition
Skills Assessment
Instructions: Rate your skills on the following tasks from 1-5 (1 being needs improvement, 5 being excellent).

Skills 1 2 3 4 5
Construct markup that uses metadata elements.

Construct well-formed page markup.

Analyze and implement inline styles, internal (embedded) style

sheets, and external style sheets.

Construct and analyze rule sets.

Construct and analyze markup to structure content and

organize data.
Construct and analyze markup that uses HTML5 semantic
elements.

Construct and analyze markup that implements navigation.

Construct and analyze markup that uses form elements.

Construct and analyze markup that displays images.

Construct and analyze markup that plays video and audio.

Construct and analyze styles that position content.

Construct and analyze styles that format text.

Construct and analyze styles that format backgrounds and

borders.
Construct and analyze styles that create a simple responsive
layout.
Construct well-formed HTML and CSS markup that conforms to
industry best practices.

Apply accessibility principles and evaluate content accessibility.

Evaluate the structural integrity of HTML and CSS markup.

4 | Introduction: Skills Assessment HTML and CSS Project Workbook, First Edition
HTML and CSS Video Times
Domain 1 Video Time
Introduction 00:02:03
Markup with Metadata 00:08:13
Well-Formed Markup 00:11:23
Total Time 00:21:39

Domain 2 Video Time

Define Style Sheets 00:06:08
CSS Rule Sets 00:09:13
Total Time 00:15:21

Domain 3 Video Time

Structure Content Through Markup 00:17:10
Semantic HTML Elements 00:10:01
Navigation Elements 00:15:15
Form Elements 00:24:37
Total Time 01:07:03

Domain 4 Video Time

Image, SVG, and Canvas Elements 00:05:10
Video and Audio Formats 00:08:34
Total Time 00:13:44

Domain 5 Video Time

Position Text with CSS 00:28:43
Format Text with CSS 00:23:37
Backgrounds and Borders 00:14:18
Responsive Layouts 00:13:01
Total Time 01:19:39

Domain 6 Video Time

Construct HTML and CSS 00:10:56
Accessibility Principles and Evaluate Content
00:12:15
Accessibility
Structural Integrity of HTML and CSS Markup 00:04:43
Course Conclusion 00:01:33
Total Time 00:29:27

5 | Introduction: HTML and CSS Video Times HTML and CSS Project Workbook, First Edition
Domain 1

6 | Domain 1: HTML and CSS Video Times HTML and CSS Project Workbook, First Edition
Fill-in-the-Blanks
Instructions: While watching Domain 1, fill in the missing words according to the information presented by the instructor.
[References are found in the brackets.]

Markup with Metadata

1. Out of the four main parts of an HTML document, the tag contains information that describes a
webpage but does not necessarily show on a webpage. [Script Tag]

2. The noscript tag lets a user know that the browser used does not support the in the script tag
code. [Noscript Tag]

3. Finish this code: <link rel=”stylesheet”text/csshref=”test.css” . [Link Tag]

4. is often described as data defining data. [Meta Tags]

Well-Formed Markup
5. Besides HTML5, other DOCTYPES you may find on a webpage are HTML 4, 4.0.1 or . [DOCTYPE
Declaration and Html Tag]

6. The two most common pieces of information in the head tag, besides meta information, are scripts
and . [Head Tag]

7. The body tag contains information that on a webpage. [Body Tag]

8. A /> symbol at the end of a tag indicates a tag to where the closing portion does not need to be .
[Closing Tags]

9. Entities are pieces of HTML code which display and characters. [Entities]

10. The opening and closing tags for an HTML comment are and . [Comments]

7 | Domain 1: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

Script and Noscript Tags Project Details
Project file
Script tags are tags which hold programming code in a language other than 11a-scripts.html
HTML, usually JavaScript. These are often found in the body of an HTML
Estimated completion time
document but can be in the head section if the script is meant to run on a
10 minutes
webpage but not display the information contained in the script.
Video reference
The noscript tag is used to display text that will show if the browser being used Domain 1
to display a webpage does not support the scripting language used within a Topic: Markup with Metadata
script tag. Subtopic: Script Tag; Noscript Tag

Objectives covered
Purpose
1 HTML Fundamentals
Upon completing this project, you will be able to use script and noscript tags 1.1 Construct markup that uses
metadata elements
within an HTML document. Note that when you are called upon to open a file
1.1.a Script
throughout this workbook, you will want to open it in your code editor and not 1.1.b Noscript
a browser unless specifically told to do so.
Notes for the teacher
Steps for Completion The completed file, 11a-scripts-
completed, is inside the Finished folder.
1. Open the 11a-scripts.html file in the MusicStore1 student folder in This may be a good time to help
Visual Studio or a similar code editor. students with indenting code in such a
way as to make it readable.
2. On the line below the words, Script Test, add an opening and closing
script tag, indicating that JavaScript will be the script language.

3. In between the opening and closing script tag, add an alert indicating that the browser supports JavaScript.

4. Below the closing script tag, add an opening and closing noscript tag.

5. Inside of the noscript tags, add a message indicating the browser does not support JavaScript.

6. Save your changes.

7. Preview your webpage. You should see an alert message indicating that the browser supports JavaScript (so long
as you are using a browser that does support it).

8 | Domain 1: Script and Noscript Tags HTML and CSS Project Workbook, First Edition
Link and Meta Tags Project Details
Project file
Link tags are used to link HTML files to files such as style sheets (CSS files) and 11c-scripts.html
script files such as JavaScript files. The link tag is not used for hyperlinks. The
Estimated completion time
anchor tag (A tag) is used for hyperlinks.
10 minutes
Part of proper HTML markup in a document is using metadata, which is often Video reference
described as data defining data. Meta tags have four functions: define character Domain 1
types, define webpage content, define how the webpage is viewed, and indicate Topic: Markup with Metadata
if the language used for the page can be translated. Meta tags, as they do not Subtopic: Link Tag; Meta Tags
display on the webpage itself, are always listed in the head section of a Objectives covered
webpage. 1 HTML Fundamentals
1.1 Construct markup that uses
Purpose metadata elements
1.1.c Style
Upon completing this project, you will be able to add link tags and meta tags to 1.1.d Link
an HTML document.
1.1.e Meta tags, including encoding,
Steps for Completion keywords, viewport, description, and
translate
1. Open the 11c-scripts.html file in the MusicStore1 student folder in
Notes for the teacher
your code editor. The completed file, 11c-scripts-
completed, is inside the Finished folder.
2. On the line below the title tag, add a link tag that links to a stylesheet If time permits, have the students
named test.css explore further the use of meta tags.

3. On the line below the opening head tag, add a meta tag to define the
charset as utf-8

4. On the next line, define a meta tag that uses the keywords music, store, and instruments

5. On the next line, define a meta tag for the viewport with the width set to the device width and the initial scale set
to 1.0

6. On the next line, define a meta tag that will not allow translation through Google.

7. Save your changes.

8. Preview your webpage. You should see a light green background (due to the style sheet) and a message
indicating that either the browser supports JavaScript or it does not.

9. Close your browser.

10. Close your open files in your code editor, saving changes if prompted.

9 | Domain 1: Link and Meta Tags HTML and CSS Project Workbook, First Edition
HTML Fundamentals Project Details
Project file
HTML documents have four areas, the DOCTYPE, HTML, head, and body. The N/A
DOCTYPE indicates the type of document. The HTML area opens and closes the
Estimated completion time
document’s code. The head contains titles, links, and meta tags that do not
10-15 minutes
need to show on the webpage. The title is the name of your webpage and is
used by search engines. Video reference
Domain 1
The body contains the elements that will be visible on the webpage. All four Topic: Well-Formed Markup
areas of an HTML document have opening and closing syntax vital to the Subtopic: DOCTYPE Declaration
functionality of the document. and Html Tag; Head Tag; Body Tag;
Closing Tags; Entities; Comments
Regarding symbols and comments, symbols are HTML entities that start with an
Objectives covered
ampersand and end with a semicolon. For example, &copy; is an entity that 1 HTML Fundamentals
represents a copyright. Comments start with a <!-- and end with a -- 1.2 Construct well-formed page
>.Webpages ignore text inside comments. The comments often serve as markup
explanations of parts of a webpage, notes to a fellow developer, or perhaps 1.2.a DOCTYPE declaration
placeholders for future text. 1.2.b Html
1.2.c Head
Purpose 1.2.d Body
1.2.e Proper syntax
Upon completing this project, you will be able to create and use proper syntax 1.2.f Closing tags and commonly
used symbols
for all four areas of an HTML document. You will also be able to use entities and
comments within a webpage. Notes for the teacher
The completed file, index-completed.
Steps for Completion html, is in the Finished folder. If time
permits, have the students add
1. Create a new HTML document using your HTML editor. Name the file additional comments and/or entities,
index.html and save it to your MusicStore1 student folder. like a copyright symbol, to the
webpage.
2. Add the four areas of an HTML document.

3. In the head section, add a title to name the webpage. Use: THE Music
Store for the title. Close the title tag.

4. Add text to the body section of the webpage. Type: Welcome to THE Music Store

5. Below the welcome text, add a comment for text that will be added later. The comment should have the text,
Main text goes here

6. To the left of the word THE in THE Music Store in the body, add two entities to represent two less than symbols.

7. To the right of the word, Store, in THE Music Store in the body, add two entities to represent two greater than
symbols.

8. Save your changes.

9. Preview the webpage in a web browser. You should see a webpage with the following text: Welcome to <<THE
Music Store>>

10. Close your web browser.

11. Close all open files within your editor.

10 | Domain 1: HTML Fundamentals HTML and CSS Project Workbook, First Edition
Domain 2

11 | Domain 2: HTML Fundamentals HTML and CSS Project Workbook, First Edition
Fill-in-the-Blanks
Instructions: While watching Domain 2, fill in the missing words according to the information presented by the instructor.
[References are found in the brackets.]

Define Style Sheets

1. An sheet is created for and applied to a single webpage. [Inline, Internal, and External Styles]

2. The order of precedence in style sheets is that styles take precedence over
styles which take precedence over styles. [Style Sheet Precedence]

CSS Rule Sets

3. Style elements are placed inside of brackets. [Valid Syntax]

4. A class is a style that can be applied to any at any time. [Apply Classes]

5. An id is a selector comparable to a class but it should only be used once per . [Apply IDs]

6. A pseudo class is a class that is specific to a . [Apply Pseudo Classes]

12 | Domain 2: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

Creating Style Sheets Project Details
Project file
Style sheets, better known as Cascading Style Sheets (CSS), are used to control 21a-index.html
formatting within a webpage and, as is the case with external style sheets, part,
Estimated completion time
or all of a website. Style sheets consist of one or more combinations of an HTML
10 minutes
tag or class paired with one or more formatting properties. There are three
types of style sheets one can use in web design: Video reference
Domain 2
• External: a style sheet that is created as a separate file and then applied Topic: Define Style Sheets
to some or all pages in a website. Subtopic: Inline, Internal, and
External Styles
• Internal: a style sheet that is created and applied to a single webpage.
Objectives covered
• Inline: a style applied directly to an HTML tag on a webpage. 2 CSS Fundamentals
2.1 Analyze and implement inline
The cascading part of Cascading Style Sheets works in this manner: inline styles styles, internal (embedded) style
will take precedence over internal styles and internal styles will take precedence sheets, and external style sheets
over external styles. For example, an inline style for a single paragraph (p) tag 2.1.a When to use inline styles,
internal (embedded) style sheets,
could set the color to navy. An internal style sheet could set paragraphs to
or external style sheets
maroon. An external style sheet could set paragraphs to gray. In this instance, all
paragraphs except the navy one would be maroon. Notes for the teacher
The completed code for the style sheet
Purpose is in the 21a-main-completed file and
the completed HTML file is the 21a-
Upon completing this project, you will be able to create a style sheet and apply index- completed file. Both are in the
it to a webpage. Finished folder. Though many styles and
classes will be built later in this course,
Steps for Completion have the students further explore CSS
properties if time permits.
1. In your code editor, create a new style sheet file, naming the file
main.css

2. If necessary, add the body tag with a set of curly brackets to the style sheet.

3. Inside the curly brackets, add the font-family property and set the font families to Segoe UI, Tahoma, and sans-
serif.

4. Save your changes.

5. Open the 21a-index.html file in the MusicStore4 student folder.

6. In the head section, create a link to the stylesheet you have created (main.css).

7. Save your changes.

8. Preview the webpage in a browser. You should see the text in either Segoe UI or Tahoma for a font or a matching
sans-serif font.

13 | Domain 2: Creating Style Sheets HTML and CSS Project Workbook, First Edition
Style Sheet Precedence Project Details
Project file
As mentioned in the previous project, inline styles will take precedence over 21b-main.css
internal styles and internal styles will take precedence over external styles. For 21b-books.html
the exam, make sure you understand this cascading order of styles sheets and 21b-index.html
be able to identify what format will apply to HTML code depending upon the Estimated completion time
style sheet situation. 15 minutes

Purpose Video reference

Domain 2
Upon completing this project, you will better understand the cascading aspect Topic: Define Style Sheets
of Cascading Style Sheets. Subtopic: Style Sheet Precedence

Objectives covered
Steps for Completion 2 CSS Fundamentals
2.1 Analyze and implement inline
1. Open the 21b-main.css file in the MusicStore2 student folder.
styles, internal (embedded) style
2. Add the paragraph tag as a tag to be styled in the style sheet. sheets, and external style sheets
2.1.b Precedence when using a
3. For the paragraph tag, set the color to navy. combination of inline styles and
style sheets
4. Open the 21b-index.html and 21b-books.html files from the
Notes for the teacher
MusicStore4 student folder.
The completed files, 21b-main-
complete, 21b-books-complete, and
5. Preview both pages in a web browser. The paragraph text on both
21b-index- complete, are in the
pages should be navy blue. Finished folder. If time permits, have the
students run through cascading with
6. Return to the 21b-books.html file in the code editor.
another HTML tag.
7. Add an internal style sheet to the page.

8. In the internal style sheet, add a selector for the paragraph tag, setting
the color to maroon.

9. Save your changes.

10. Preview both the 21b-books.html and 21b-index.html pages in a web browser. The paragraph text should be
maroon in the 21b-books.html file and navy blue in the 21b-index.html file.

11. Return to the 21b-books.html file in the code editor.

12. Add an inline style to the paragraph, Look at all of these great books!

13. In the inline style, set the color to fuchsia.

14. Save your changes.

15. Preview the webpage in a web browser. The paragraph text color should be maroon, with the exception of the
text, Look at all of these great books!, which should be fuchsia.

14 | Domain 2: Style Sheet Precedence HTML and CSS Project Workbook, First Edition
Valid Syntax for Rule Sets Project Details
Project file
A rule set is a combination of a selector which can be a tag, class, or id, and a 22a-main.css
property and value pair set in a style sheet. For each rule set, the selector is 22a-index.html
listed first and the property and value pairs are all contained within a set of curly
Estimated completion time
brackets. The property is listed, a colon is added, the value is added, and then a 5 minutes
semicolon finishes the pair.
Video reference
Properties never contain spaces. Where one would think there is a space, a dash Domain 2
is used. For example, font family has a property name of font-family. Topic: CSS Rule Sets
Subtopic: Valid Syntax
Purpose
Objectives covered
Upon completing this project, you will better understand CSS rule sets and be 2 CSS Fundamentals
2.2 Construct and analyze rule sets
able to apply a rule set to a CSS style sheet.
2.2.a Valid syntax for the CSS rule
set
Steps for Completion
Notes for the teacher
1. Open the 22a-main.css file in the MusicStore2 student folder. The completed file, 22a-main-
completed, is in the Finished folder. If
2. Within the body rule set, add a background color property with the time permits, have the students add
value set to #fab66b another rule set or two to the CSS file.

3. Save your changes.

4. Open the 22a-index.html file in the MusicStore2 folder.

5. Preview the webpage in a browser. The webpage background should be a peach color.

15 | Domain 2: Valid Syntax for Rule Sets HTML and CSS Project Workbook, First Edition
Apply Classes Project Details
Project file
A CSS class is a style that can be applied to any tag at any time. A class is 22b-main.css
created in a CSS style sheet but applied to an HTML tag. Classes all start with a 22b-books.html
dot and can have any name, so long as the name is valid. For example, a class
Estimated completion time
name cannot have spaces. 10 minutes

Purpose Video reference

Domain 2
Upon completing this project, you will be able to create a CSS class in a CSS Topic: CSS Rule Sets
style sheet and apply the class to an HTML tag. Subtopic: Apply Classes

Steps for Completion Objectives covered

2 CSS Fundamentals
1. Open the 22b-main.css file in the MusicStore2 student folder. 2.2 Construct and analyze rule sets
2.2.b Selectors, including class, id,
2. Below the current rule sets, add a class named sale elements, and pseudo-class

3. Within the sale class, add a rule set to set the font weight to bold Notes for the teacher
The completed files, 22b-main-
4. Within the sale class, add a rule set to set the background color to aqua completed, and 22b-books-completed,
are in the Finished folder. If time
5. Save your changes. permits, have the students add
additional property/value pairs to the
6. Open the 22b-books.html file in the MusicStore2 student folder. existing rule sets.

7. Add an opening and closing span tag around the words, Special sale!,
near the end of the page.

8. Apply the sale class to the open span tag.

9. Save your changes.

10. Preview the webpage in a browser. You should see the words, Special sale!, highlighted in aqua at the bottom of
the webpage.

16 | Domain 2: Apply Classes HTML and CSS Project Workbook, First Edition
Apply IDs Project Details
Project file
In HTML, ids have multiple purposes. First, any scripts used to enhance an HTML 22b2-main.css
element will refer to the element by ID. Secondly, IDs can be added to CSS files 22b2-spotlight.html
and then used in a similar fashion as are classes. However, an ID can only be
Estimated completion time
used once per webpage in this scenario. Classes can be used an unlimited 10 minutes
number of times per webpage.
Video reference
Whereas classes start with a dot, IDs start with a pound symbol (#). Domain 2
Topic: CSS Rule Sets
Purpose Subtopic: Apply IDs

Upon completing this project, you will be able to create a CSS ID and apply the Objectives covered
ID to an HTML tag. 2 CSS Fundamentals
2.2 Construct and analyze rule sets
2.2.b Selectors, including class, id,
Steps for Completion
elements, and pseudo-class
1. Open the 22b2-main.css file in the MusicStore2 student folder. Notes for the teacher
The completed files, 22b2-main-
2. Below the current list of rule sets, add an id selector with the name,
completed, and 22b2-spotlight-
sidenote completed, are in the Finished folder. If
time permits, have the students add an
3. Within the selector, add a rule set that sets the background color to
additional id-based rule set and apply
#dbd9d9 that id to a tag in the spotlight page.

4. Save your changes.

5. Open the 22b2-spotlight.html file in the MusicStore2 student folder.

6. Locate the aside tag that starts with the text, Come in and sign up for a free kazoo demonstration.

7. Add the id attribute of sidenote to the aside tag.

8. Save your changes.

9. Preview the webpage in a browser. You should see a gray background on the aside text.

17 | Domain 2: Apply IDs HTML and CSS Project Workbook, First Edition
Apply Pseudo Classes Project Details
Project file
A CSS pseudo class applies specifically to an HTML tag. A tag can have multiple 22b3-main.css
pseudo classes that can be applied to that specific tag. For example, the anchor 22b3-books.html
tag (a) has multiple pseudo classes, with the link, visited, and hover pseudo
Estimated completion time
classes as some examples. A pseudo class is added, after a colon, to a tag in a 10 minutes
rule set.
Video reference
Purpose Domain 2
Topic: CSS Rule Sets
Upon completing this project, you will be able to create a CSS pseudo class and Subtopic: Apply Pseudo Classes
apply the pseudo class to a specific HTML tag.
Objectives covered
2 CSS Fundamentals
Steps for Completion 2.2 Construct and analyze rule sets
2.2.b Selectors, including class, id,
1. Open the 22b3-main.css file in the MusicStore2 student folder.
elements, and pseudo-class
2. Add a rule set for the a tag. Notes for the teacher
The completed file, 22b3-main-
3. Within the rule set, set the text decoration property to none
completed, is in the Finished folder. If
4. Add a rule set for the a tag with the hover pseudo-class. time permits, have the students add a
rule set for the visited pseudo-class of
5. Within the rule set, set the text decoration property to underline and the a tag and then test that setting via
the 22b3-books file.
the font weight to bold

6. Save your changes.

7. Open the 22b3-books.html file in the MusicStore4 student folder.

8. Preview the webpage in a browser. The hyperlink will not be underlined on the webpage.

9. Hover your mouse over the hyperlink. It should turn bold and become underlined while the mouse is over the
hyperlink and should return to not being bold and not underlined when the mouse moves away from the link.

18 | Domain 2: Apply Pseudo Classes HTML and CSS Project Workbook, First Edition
Domain 3

19 | Domain 3: Apply Pseudo Classes HTML and CSS Project Workbook, First Edition
Fill-in-the-Blanks
Instructions: While watching Domain 3, fill in the missing words according to the information presented by the instructor.
[References are found in the brackets.]

Structure Content Through Markup

1. offers more flexibility in laying out webpages than do tables. [Table Tags]

2. HTML has levels of heading tags. [Heading Tags]

3. The P tag is used to create . [P Tag]

4. A br tag is the equivalent of a return in Word or similar programs. [Br Tag]

5. The hr tag provides a used to help break up sections of a webpage. [Hr Tag]

6. To define and format block level elements, use a tag. Use the tag to define and
format inline elements. [Span Tag]

7. Unordered lists are lists with points. [Ul and Li Tags]

8. Ordered lists are lists with points. [Ol and Li Tags]

Semantic HTML Elements

9. Semantic tags are used to help webpages. [Header Tag]

10. The Nav tag is used to help spot navigation on webpages. [Nav Tag]

11. Section tags help organize webpages. [Section Tag]

12. An tag helps to specify a self-contained piece of content, while an tag

helps mark off a side story or related secondary content. [Article and Aside Tags]

13. A footer tag helps one be consistent with content at the area of a webpage. [Footer Tag]

14. A tag surrounds a tag, which contains content that can be hidden or shown at
will. [Detail and Summary Tags]

15. A figure tag is used in conjunction with a tag to line up a caption with an image. [Figure Tag]

16. A caption tag is usually used on rather than on images. [Caption Tag]

Navigation Elements
17. Images should have text to display in case an image does not render properly. [Image Links]

18. The A tag is primarily used for . [The A Tag]

19. By setting the target property of a hyperlink to , the browser is instructed to open
that link in a new tab or window. [Targets]

20. Bookmarks allow one to navigate to specific within a webpage, often a longer webpage.
[Bookmarks]

21. A link points to a file or page within a website, while an link points to a
page on a different website. [Relative vs. Absolute Links]

20 | Domain 3: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

 22. To indicate that a link is in a folder above the current folder in a hierarchical path, two are
needed in the code for the link. [Folder Hierarchy Navigation]

23. The map tag creates an image map that links to an image, while the tag defines the
different areas within the image map. [Map]

24. The attribute contains the hyperlink target for a selectable area. [Area]

Form Elements
25. A form element’s attribute directs a browser on how to send form data to a
server or retrieve data from a server, while its attribute indicates which URL form data is sent to
upon submission. [Action and Method Attributes]

26. A request takes submitted data and inserts it into a database, while a request
modifies data on a server through user input. [Submission Methods]

27. The attribute allows one to use a tab key to navigate through form fields. [Accessibility]

28. In a form, a element generates a drop-down list, while tags determine the
available items on that list. [Input Types and Restrictions]

29. The label tag also improves the experience for users utilizing screen . [The
Significance of Labels]

30. The select tag creates a drop-down full of options. [Select Tag]

31. The textarea tag allows one to add a field with multiple of text to a form. [Textarea Tag]

32. The input tag is generally used instead of a button tag when one is trying to use a button to or
reset a form. [Button Tag]

33. The output tag allows for displaying a calculation depending upon what one into a form.
[Output Tag]

34. tags help to group option tags and make them more readable. [Option Tag]

35. A datalist tag is used to a list of values into a form field. [Datalist Tag]

36. A fieldset tag is used to fields in a form. [Fieldset Tag]

21 | Domain 3: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

HTML Tables Project Details
Project file
Tables are used to organize information in rows and columns. Tables used to be 31a-hours.html
used to lay out entire pages (and they still do, sometimes), but with the 31a-hours2.html
advancements in Cascading Style Sheets (CSS) for layouts for overall pages,
Estimated completion time
tables are best served for grid-like information. 10 minutes

For creating tables, the table tag creates the table, the tr tag indicates a table Video reference
row, and the td tag indicates a table cell. Domain 3
Topic: Structure Content Through
Purpose Markup
Subtopic: Table Tags; Table
Upon completing this project, you will be able to create a table and use different Attributes
attributes to style the table.
Objectives covered
3 Document Structure using HTML
Steps for Completion
3.1 Construct and analyze markup to
1. Open the 31a-hours.html file from your MusicStore3 student folder. structure content and organize data
3.1.a Table tags (table, tr, th, td)
2. Add a table below the text, Hours of operation. The table should have
Notes for the teacher
five rows and two columns. The completed code for the table
structure is in the 31a-hours-completed
3. Save your changes.
file and the completed table is in the
31a-hours2-completed file. Both files
4. Open the 31a-hours2.html file from your MusicStore2 student folder.
are in the Finished folder. If time
5. Add a 1-point border to the table. permits, have the students experiment
further with tables and their attributes.
6. Change the first row from being a normal table row to that of a table
header.

7. Change the last row to the table to contain just one column instead of two.

8. Save your changes.

9. Preview the webpage in a browser. Your table should look like this:

22 | Domain 3: HTML Tables HTML and CSS Project Workbook, First Edition
HTML Headings, Paragraphs, Project Details
Project file
and Line Breaks 31b-headings.html
31b-index.html
webpagetext.txt
Three HTML tags that are used very heavily in the basic content formation of
webpages are headings, paragraph (P), and line break (BR) tags. Heading tags Estimated completion time
10 minutes
have six levels (H1 through H6) with H1 being the largest heading and H6 the
smallest. P tags are the equivalent of hard returns in a Word or similar Video reference
document. BR tags are the equivalent of soft returns in a Word or similar Domain 3
document. Topic: Structure Content Through
Markup
Most HTML tags have both an opening and a closing tag. However, if the Subtopic: Heading Tags; P Tag; Br
content within a tag has a defined ending, a closing tag is not needed. For Tag
example, paragraphs have a start and an end. But line breaks are just that, line Objectives covered
breaks. Once the line break is set, it is done. Thus, a BR tag does not need a 3 Document Structure using HTML
closing tag. A / after the BR indicates the closing portion of it. 3.1 Construct and analyze markup to
structure content and organize data
Purpose 3.1.b H1-h6
3.1.c P
Upon completing this project, you will be able to use heading, paragraph, and 3.1.d Br
line break tags within a webpage.
Notes for the teacher
The completed file, 31b-index-
Steps for Completion completed, is in the Finished folder. The
file should have four separate blocks of
1. Open the 31b-headings.html file from the MusicStore3 student folder.
text at this point.
2. With the six lines of text for heading examples, add an opening heading
tag (H1 through H6) to each line, matching the heading tag with the
text in the line.

3. Save your changes.

4. Preview your webpage in a web browser. Your webpage should look like this:

5. Open the webpagetext.txt file from the MusicStore2 student folder.

6. Copy the document content.

7. Open the 31b-index.html file from the MusicStore2 student folder.

8. Paste the copied text in between the two comments on the webpage.

9. Surround the first two blocks of text you pasted with an opening and closing
paragraph tag.

10. Add a line break before the text, We look forward to seeing you!

11. Save your changes.

12. Preview your webpage in a web browser.

23 | Domain 3: HTML Headings, Paragraphs, and Line Breaks HTML and CSS Project Workbook, First Edition
Hr, Div, and Span Tags Project Details
Project file
Once the basic structure of an HTML document is in place, you will want to 31e-index.html
organize and separate content further. One way to do this is to add horizontal
Estimated completion time
rules (Hr tags) in between sections of a webpage.
10 minutes
Two other options available are Div and Span tags. A Div tag isolates a block of Video reference
text and allows for formatting specifically on that block. A Span tag allows for Domain 3
inline formatting around text within a paragraph but does not isolate the text Topic: Structure Content Through
from a paragraph. Markup
Subtopic: Hr Tag; Div Tag; Span
Purpose Tag

Upon completing this project, you will be able to use the Hr, Div, and Span tags Objectives covered
3 Document Structure using HTML
in an HTML document.
3.1 Construct and analyze markup to
structure content and organize data
Steps for Completion 3.1.e Hr
3.1.f Div
1. Open the 31e-index.html file from the MusicStore3 student folder.
3.1.g Span
2. On the line after the text, We look forward to seeing you!, add a Notes for the teacher
horizontal rule. The completed file, 31e-index-
completed, is in the Finished folder. If
3. Surround the three lines of text after the horizontal rule with an opening time permits, have the students add an
and closing Div tag. additional horizontal rule below the
footer text and explore horizontal rule
4. Center align the text inside of the Div tag. attributes such as color and size.

5. Add a Span tag before the text, THE Music Store, below the navigation
area.

6. Close the Span tag after the store name.

7. Make the text color for the Span tag dark green.

8. Save your changes.

9. Preview the webpage in a web browser. There should be a line above the footer text and the words, THE Music
Store, should be dark green.

24 | Domain 3: Hr, Div, and Span Tags HTML and CSS Project Workbook, First Edition
HTML List Tags Project Details
Project file
An unordered list (Ul tag) is a bulleted list that does not require steps to be 31h-Index.html
done in any specific order, while an ordered list (Ol tag), in most cases, is a
Estimated completion time
numbered list with steps that must be done in a specific order.
15 minutes
Both unordered and ordered lists contain list item tags (Li tags), which serve as Video reference
bullet points for unordered lists and numbered items for ordered lists. Domain 3
Topic: Structure Content Through
Purpose Markup
Subtopic: Ul and Li Tags; Ol and Li
Upon completing this project, you will be able to create unordered and ordered Tags
lists.
Objectives covered
Steps for Completion 3 Document Structure using HTML
3.1 Construct and analyze markup to
1. Open the 31h-index.html file from the MusicStore3 student folder. structure content and organize data
3.1.h UI
2. Turn the items Guitar, Piano, and Drums into an unordered list. 3.1.i OI
3.1.j Li
3. Create a list item for each instrument in the list.
Notes for the teacher
4. Change the bullet created by the unordered list to a square style. The completed file, 31h-index-
completed, is in the Finished folder.
5. Preview the webpage in a browser. You should see a square bulleted list Have the students further explore Ul
of instruments. and Ol attributes if time permits.

6. Return to your code window.

7. Add an ordered list opening tag before the text, Join our music club, found below the list of instruments you just
created.

8. Close the ordered list after the text, Sign up for a course.

9. Make each listed step its own item within the ordered list.

10. Make the ordered list show the steps as capital letters.

11. Save your changes.

12. Preview the webpage in a web browser. Your page should resemble this:

13. Close all open files, both in your browser and your code editor.

25 | Domain 3: HTML List Tags HTML and CSS Project Workbook, First Edition
Semantic Tags Project Details
Project file
A semantic tag is used to organize a webpage. Semantic tags are a quick 32a-spotlight.html
reference to let both developers and search engines know where the header,
Estimated completion time
navigation, text sections, articles with self-containing text, aside story, and
15 minutes
footer areas are in an HTML document.
Video reference
Semantic tags do not format content directly. Any formatting on semantic tags Domain 3
is done through Cascading Style Sheets (CSS). Topic: Semantic HTML Elements
Subtopic: Header Tag: Nav Tag;
Purpose Section Tag; Article and Aside Tags,
Footer Tag
Upon completing this project, you will better understand what semantic tags are
used for and where to use them in an HTML document. Objectives covered
3 Document Structure using HTML
3.2 Construct and analyze markup
Steps for Completion
that uses HTML5 semantic elements
1. Open the 32a-spotlight.html file in the MusicStore3 student folder. 3.2.a Semantic tags (header, nav,
section, article, aside, footer,
2. Preview the webpage. Make a mental note of what you see. details, summary, figure, caption)

3. Return to your code editor. Notes for the teacher

The completed file, 32a-spotlight-
4. Add an opening header tag above the text, This month’s instrument: completed, is in the Finished folder. If
time permits, have the students identify
The Kazoo.
and add another aside, article, or
5. Close the header tag below the text, The instrument to where you make section tag.
the noise.

6. Surround the text, Home | Books | Contact Us, with an opening and closing nav tag.

7. Surround the text in between the header and nav areas you added with an opening and closing section tag.

8. Just after the opening section tag, add an opening article tag.

9. Close the article tag just before the paragraph, More on kazoos.

10. Add an opening and closing aside tag around the paragraph that starts with, Come in and sign up for a free kazoo
demonstration.

11. Surround the navigation area you semantically marked earlier plus the text with the copyright and the store
address with an opening and closing footer tag.

12. Save your changes.

13. Return to your browser.

14. Refresh the webpage. You should not see any changes as the tags you added in this project are all semantic tags.

26 | Domain 3: Semantic Tags HTML and CSS Project Workbook, First Edition
Details and Summary Tags Project Details
Project file
Two semantic tags that have some interaction of supported web browsers are 32g-books.html
the details and summary tags. A details tag, wrapped around an area of text,
Estimated completion time
makes the area expandable and collapsible. A summary tag, contained within a
5-10 minutes
details tag, should be wrapped around the text to show for the expandable and
collapsible area. Video reference
Domain 3
Purpose Topic: Semantic HTML Elements
Subtopic: Details and Summary
Upon completing this project, you will better understand how to use the details Tags
and summary tags in an HTML document.
Objectives covered
3 Document Structure using HTML
Steps for Completion 3.2 Construct and analyze markup
that uses HTML5 semantic elements
1. Open the 32g-books.html file in the MusicStore3 student folder.
3.2.a Semantic tags (header, nav,
2. Add an opening details tag above the paragraph with the text, Look at section, article, aside, footer,
details, summary, figure, caption)
all of these great books!
Notes for the teacher
3. Close the details tag after the image tag for the sheet music image. The completed file, 32g-books-
completed, is in the Finished folder. If
4. On the line after the opening details tag (and before the next paragraph
time permits, have the students look for
tag), add the text, Show or hide these books other opportunities to create
expandable and collapsible areas on a
5. Add an opening and closing summary tag around the text you just webpage through the details and
typed. summary tags.

6. Save your changes.

7. Preview the webpage in a web browser. You should be able to expand and contract the section for showing and
hiding books.

27 | Domain 3: Details and Summary Tags HTML and CSS Project Workbook, First Edition
Figure and Caption Tags Project Details
Project file
A figure tag is used in conjunction with the figcaption tag to mark up an image 32i-spotlight.html
on a webpage. The figcaption tag allows for adding a caption to an image and 32j-hours2.html
for lining up the caption with the image.
Estimated completion time
15 minutes
The caption tag is used on tables. This tag allows one to place description text
for a table in close proximity with a table. Video reference
Domain 3
Purpose Topic: Semantic HTML Elements
Subtopic: Figure Tag; Caption Tag
Upon completing this project, you will better understand how to use the figure,
figcaption, and caption tags in an HTML document. Objectives covered
3 Document Structure using HTML
Steps for Completion 3.2 Construct and analyze markup
that uses HTML5 semantic elements
1. Open the 32i-spotlight.html file in the MusicStore3 student folder. 3.2.a Semantic tags (header, nav,
section, article, aside, footer,
2. Add a figure tag above the image of the Kazoo. details, summary, figure, caption)

3. Close the figure tag after the image. Notes for the teacher
The completed files, 32i-spotlight-
4. On the line after the image, add an opening and closing figcaption tag. completed, and 32j-hours2-completed,
are in the Finished folder. If time
5. Within the figcaption tag, add the text, The Mighty Kazoos permits, have the students attempt an
inline style on either the figure or
6. Save your changes. caption text. Use that as a preview to
the later sessions on CSS.
7. Preview your webpage in a web browser. You should see a caption
below the image.

8. Return to your code editor.

9. Open the 32j-hours2.html file in the MusicStore2 student folder.

10. Add the text, Current Summer Hours in between the opening table tag and the first tr tag.

11. Surround the text you just added with an opening and closing caption tag.

12. Surround the text, Hours of operation, with an opening and closing H2 tag.

13. Save your changes.

14. Preview the webpage in a browser. You should see the following:

15. Close all open files in both your browser and your code editor.

28 | Domain 3: Figure and Caption Tags HTML and CSS Project Workbook, First Edition
Image Links Project Details
Project file
Elements, such as images, are not embedded within a webpage. They are linked 33a-books.html
from an external source to a webpage. With images, the img tag is used to
indicate an image on a webpage and the source (src) attribute is used to define Estimated completion time
5-10 minutes
the location of the image.
Video reference
If this image is in the same folder as the page itself, the file name is all that is Domain 3
needed. Otherwise, the path to the file needs to be defined. For example, if the Topic: Navigation Elements
image is on the same website but in an images folder adjacent to the file, the Subtopic: Image Links
path needs to have the folder name, a backslash, and then the file.
Objectives covered
3 Document Structure using HTML
Purpose 3.3 Construct and analyze markup
that implements navigation
Upon completing this project, you will be able to display an image within an
HTML document through linking to it. Notes for the teacher
The completed file, 33a-books-
Steps for Completion completed, is in the Finished folder. If
time permits, have the students add
1. Open the 33a-books.html file in the MusicStore3 student folder. another image to the page.

2. Add a link to the image musicbooks.jpg on the line below the text,
Look at all of these great books.

3. Add the alt text, Music books, to the image tag.

4. Set the image width to 920

5. Set the image height to 690

6. Save your changes.

7. Preview the webpage in a web browser. An image should display on the page.

29 | Domain 3: Image Links HTML and CSS Project Workbook, First Edition
Hyperlinks Project Details
Project file
A hyperlink will move the user to another webpage when it is clicked. A 33b-index.html
hyperlink can be internal or external to a website. A target can control how a 33b-spotlight.html
hyperlink opens, with the most common example being of a target set to _blank
Estimated completion time
so that the hyperlink can open in a blank browser tab. Hyperlinks are created 10 minutes
using the anchor (a) tag and the hyperlink reference (href) attribute.
Video reference
Purpose Domain 3
Topic: Navigation Elements
Upon completing this project, you will be able to add a hyperlink to an HTML Subtopic: The A Tag; Targets
document and set a target for a hyperlink.
Objectives covered
3 Document Structure using HTML
Steps for Completion 3.3 Construct and analyze markup
that implements navigation
1. Open the 33b-index.html file in the MusicStore3 student folder.
3.3.a Target
2. Using the text, Spotlight, in the navigation area at the bottom of the 3.3.b Anchor (a href)

page, add a hyperlink to the 33b-spotlight.html file. Notes for the teacher
The completed file, 33b-index-finished,
3. Save your changes. is in the Finished folder. If time permits,
have the students create a hyperlink on
4. Preview the webpage in a web browser.
the spotlight page back to the index
file, using the text, Home, for the link.
5. Click the Spotlight link. You should be taken to the 33b-spotlight page.

6. Return to your code editor.

7. Adjust the link target to have the spotlight page open in a new tab.

8. Save your changes.

9. Preview the webpage in a web browser.

10. Test the Spotlight hyperlink. It should open in a new tab.

30 | Domain 3: Hyperlinks HTML and CSS Project Workbook, First Edition

Bookmarks Project Details
Project file
A bookmark is a type of hyperlink that navigates to a specific location on a 33c-books.html
webpage. This can be a location on the same webpage as the hyperlink or to a
Estimated completion time
specific location on a different page. The location for the bookmark must be
5 minutes
defined. This is done using the anchor (a) tag and the name attribute. Then, the
hyperlink uses the # symbol in front of Video reference
Domain 3
Purpose Topic: Navigation Elements
Subtopic: Bookmarks
Upon completing this project, you will be able to add a bookmark to an HTML
Objectives covered
document. You will also be able to link to the bookmark.
3 Document Structure using HTML
3.3 Construct and analyze markup
Steps for Completion that implements navigation
3.3.c Bookmark
1. Open the 33c-books.html file in the MusicStore3 student folder.
Notes for the teacher
2. Create a bookmark with the name, sale, just above the paragraph The completed file, 33c-books-
starting with the words, Special sale, near the bottom of the page. completed, is in the Finished folder. If
time permits, have the students add a
3. Near the top of the page, add a hyperlink around the text, This month’s named bookmark near the top of the
sale, with the hyperlink linking to the bookmark you just created. page and then a hyperlink from the
bottom of the page to the bookmark at
4. Save your changes. the top of the page.

5. Preview the webpage in a web browser.

6. Select the link on the text, This month’s sale. You should be taken to the bottom of the page.

31 | Domain 3: Bookmarks HTML and CSS Project Workbook, First Edition

Relative and Absolute Links Project Details
Project file
Hyperlinks are relative or absolute depending on where the link is located. A 33d-spotlight.html
relative link is a hyperlink located within the same website from the HTML
Estimated completion time
document from where the link originates. An absolute link is a hyperlink in
5 minutes
which the destination is not in the same website of the webpage from which the
link originates. Because of this, to keep users on your webpage you will want to Video reference
add a target so that the new webpage will open in a new tab. Domain 3
Topic: Navigation Elements
As the hyperlink you created earlier in this domain was a relative link to a Subtopic: Relative vs. Absolute
webpage within the same website, this project will focus more on absolute links. Links

Objectives covered
Purpose 3 Document Structure using HTML
3.3 Construct and analyze markup
Upon completing this project, you will be able to determine if a link is relative or
that implements navigation
absolute and use both links in an HTML document. 3.3.d Relative vs. absolute links

Steps for Completion Notes for the teacher

The completed file, 33d-spotlight-
1. Open the 33d-spotlight.html file in the MusicStore3 student folder. completed, is in the Finished folder. If
time permits, have the students create
2. Add an absolute link to the text: More on kazoos. Use the website: an additional relative hyperlink using
https://en.wikipedia.org/wiki/kazoo for the complete absolute link the navigation area at the bottom of
address. the page.

3. Add a target to the open absolute link so the new webpage will open in
a new tab.

4. Save your changes.

5. Preview the webpage in a web browser.

6. Click the hyperlink on the text, More on Kazoos. You should see the Wikipedia article appear on its own tab.

32 | Domain 3: Relative and Absolute Links HTML and CSS Project Workbook, First Edition
Navigating Folder Hierarchies Project Details
Project file
Relative hyperlinks are often located within folders different from the pages in 33e-links.html
which they originate. For simple folder hierarchies, the folder name needs to
Estimated completion time
precede the webpage name in a hyperlink if the folder is below the webpage in
5 minutes
the hierarchy of the website. However, if the folder is above the webpage in the
hierarchy, two dots and a backslash need to be placed in front of the folder Video reference
name. Domain 3
Topic: Navigation Elements
Purpose Subtopic: Folder Hierarchy
Navigation
Upon completing this project, you will better understand the commands to
Objectives covered
move up and down a folder path and be able to use the up or down commands 3 Document Structure using HTML
on an HTML document. 3.3 Construct and analyze markup
that implements navigation
Steps for Completion 3.3.e Navigating simple folder
hierarchies
1. Open the 33e-links.html file in the TestPages folder within the
MusicStore3 student folder. Notes for the teacher
The completed file, 33f-links-
2. Add a hyperlink around the text, Link to the home page. The hyperlink completed, is in the Finished folder. If
reference should navigate up a folder path and then over to the time permits, have the students add a
link from the index page to the
index.html page.
links.html file.
3. Save your changes.

4. Preview the webpage in a web browser.

5. Click the link you created in this project. It should navigate you to the home page.

6. Close all open files in both your browser and your editor.

33 | Domain 3: Navigating Folder Hierarchies HTML and CSS Project Workbook, First Edition
Map and Area Tags Project Details
Project file
One may want to create select areas or hyperlinks within an image on a books2.html
webpage. One can do so by using the map tag in conjunction with the area tag. books3.html
The map tag creates an image map that links to an image, while the area tag
Estimated completion time
defines the different areas within the image map. A map tag requires that the 10 minutes
image on a webpage includes a selectable area, otherwise no change is applied
to the webpage. Video reference
Domain 3
Purpose Topic: Navigation Elements
Subtopic: Map; Area
Upon completing this project, you will better understand how to use map and
Objectives covered
area tags in conjunction with image maps. 3 Document Structure using HTML
3.3 Construct and analyze markup
Steps for Completion that implements navigation
3.3.f Map
1. Open the books2.html file in the MusicStore3 student folder. 3.3.g Area

2. There is an empty map tag after the image tag on line 20. What is the Notes for the teacher
name being used for the image's usemap attribute? If time permits, review shape,
coordinates, href, alt, and target
a. attributes with students.

3. Preview the webpage in a web browser.

4. Open the books3.html file in the MusicStore2 student folder.

5. There is an area tag on line 21, inside the map tag. This area tag currently has four attributes. What are the
attributes?

a.

6. Preview the webpage in a web browser.

7. Select the Electronic and Computer Music book spine to ensure the selectable area works.

8. Add a target attribute "_blank" within the area tag.

9. Save your changes.

10. Preview the webpage in a web browser.

11. Select the Electronic and Computer Music book spine to ensure that the selectable area opens the link in a new
tab.

34 | Domain 3: Map and Area Tags HTML and CSS Project Workbook, First Edition
Action and Method Attributes Project Details
Project file
This is the first of several projects in a row that will focus on form building. The 34a-contactus.html
first two concepts to cover are action attributes and method attributes. An
Estimated completion time
action attribute references webpages or scripts that process information to a
5-10 minutes
database. The method attribute will determine what type of action the form will
take when it is submitted. Video reference
Domain 3
There are four types of submission methods: Topic: Form Elements
Subtopic: Action and Method
• GET: A request to retrieve data Attributes; Submission Methods

• POST: A request to modify data on a server Objectives covered

3 Document Structure using HTML
• PUT: A request to add data to a database 3.4 Construct and analyze markup
that uses form elements
• DELETE: A request to remove information from a database 3.4.a Form attributes
3.4.b Action
These attributes are part of the main tag of a form, which is the form tag. 3.4.c Method
3.4.d Submission methods
Purpose
Notes for the teacher
Upon completing this project, you will be able to create a form and add an The completed file, 34a-contactus-
action attribute and a method attribute to the form. completed, is in the Finished folder. As
there is no information to display as of
Steps for Completion yet, there is no reason to preview this
webpage.
1. Open the 34a-contactus.html file in the MusicStore3 student folder.

2. Add an opening and closing form tag on the line below the text: insert
form here.

3. Add an action attribute in the open form tag to point the thankyou.html webpage.

4. Add a method attribute that will post information to a server.

5. Save your changes.

6. Which submission method is used to add information to a database?

a.

7. Which submission method adds the words used for submission to the end of a URL?

a.

35 | Domain 3: Action and Method Attributes HTML and CSS Project Workbook, First Edition
Accessibility Project Details
Project file
An input form creates a webpage that information can be added to. Input forms 34d-contactus.html
are used for questionnaires, surveys, or applications. The access keys and tab
Estimated completion time
index allow the user to move the cursor between input areas, on a form, using a
10 minutes
keyboard rather than a mouse. This can help websites become more accessible-
friendly for people who need assistance in navigating a website. Video reference
Domain 3
Purpose Topic: Form Elements
Subtopic: Accessibility
Upon completing this project, you will be able to create an input form using
Objectives covered
access keys and the tab index to make the HTML document more accessible.
3 Document Structure using HTML
3.4 Construct and analyze markup
Steps for Completion that uses form elements
3.4.d Submission methods
1. Open the 34d-contactus.html file in the MusicStore3 student folder.
Notes for the teacher
2. To the input tag for the first name, add an accesskey attribute with the The completed file, 34e-contactus-
letter, f, and a tab index with a setting of 1 completed, is in the Finished folder. If
time permits, have the students add
3. To the input tag for the last name, add an accesskey attribute with the additional access keys and tab indexes
letter, l, and a tab index with a setting of 2 to the form.

4. To the input tag for the email address, add an accesskey attribute with
the letter, e, and a tab index with a setting of 3

5. Save your changes.

6. Preview the webpage in a browser.

7. Use the Tab key on the keyboard to test navigating through the first three fields on the form.

8. Use the Alt key plus the letters you added as access keys for navigating to specific fields.

36 | Domain 3: Accessibility HTML and CSS Project Workbook, First Edition

Input Types and Labels Project Details
Project file
As most information on a form is input by a user, HTML supports several types 34e-contactus.html
of input tags, many of which we will see over the next few projects. Some
Estimated completion time
information is supported through an input tag with an attribute such as text,
15 minutes
email, check box or a button. Other form fields are created through separate
tags, such as the select tag for a drop-down list and button tags, which are used Video reference
for buttons. Domain 3
Topic: Form Elements
Labels often accompany input tags. Labels help to define text next to an input Subtopic: Input Types and
field. The other benefit of a label is that with a label tag, a user can click a label Restrictions; The Significance of
Labels
to activate in a matching input field. For this to work, the for attribute for a label
must have the same text as the input field’s name attribute. The label tag also Objectives covered
improves the experience for users utilizing screen readers, which improves 3 Document Structure using HTML
accessibility. 3.4 Construct and analyze markup
that uses form elements
Input fields should also have an id attribute set as those are needed in case any 3.4.e Input types and restrictions
scripts are written to perform dynamic processing on those fields. 3.4.j Label

Notes for the teacher

Purpose The completed file, 34e-contactus-
completed, is in the Finished folder.
Upon completing this project, you will be able to create input tags, input tag
Students can copy and paste some of
attributes, label tags, and label tag attributes. the code but encourage the students to
type all the code in this project, as
Steps for Completion repetition is the key to learning code.

1. Open the 34e-contactus.html file in the MusicStore3 student folder.

2. Within the opening and closing form tags, add an input tag with the type set to text and the name and id set to
firstname

3. Add a line break after the input tag.

4. Above the input tag, add an opening and closing label tag with the label’s for attribute set to firstname

5. In between the opening and closing label tag, add the text, First Name

6. Below the existing input tag, add a second opening and closing label tag with the for attribute set to lastname

7. In between the opening and closing label tags, add the text, Last Name

8. On the next line, add an input tag with the type set to text and the name and id set to lastname

9. Below the existing input tags, add a third opening and closing label tag with the for attribute set to email

10. In between the opening and closing label tags, add the text, Email Address

11. On the next line, add an input tag with the type set to email and the name and id set to email

12. Save your changes.

13. Preview your webpage in a web browser. You should have these fields and labels in your form:

37 | Domain 3: Input Types and Labels HTML and CSS Project Workbook, First Edition
The Select Tag Project Details
Project file
A select tag is used to create a drop-down list in a form. Whereas a select tag 34f-contactus.html
creates the list, option tags define the items within the drop-down list. With
Estimated completion time
select tags, a value is important to each option within the select tag. A script or
10 minutes
database will only recognize the value name. An automatic default can be
assigned to an option within the drop-down list to make the form user-friendly. Video reference
This is done through adding the selected attribute to the default option. Domain 3
Topic: Form Elements
Purpose Subtopic: Select Tag

Objectives covered
Upon completing this project, you will be able to create a select tag, add
3 Document Structure using HTML
options, add values to those options, and assign a default setting to an option. 3.4 Construct and analyze markup
that uses form elements
Steps for Completion 3.4.f Select

1. Open the 34f-contactus.html file in the MusicStore3 student folder. Notes for the teacher
The completed file, 34f-contactus-
2. Below the last input tag, add the text: How did you hear about us? in a completed, is in the Finished folder. If
new paragraph tag. time permits, have the students add
additional options to the select tag.
3. Add an opening and closing select tag below the new paragraph.

4. Within the new select tag, add a name attribute with the value of found
and an id attribute with the value of found

5. Between the opening and closing select tag, add three opening and closing option tags on different lines, using
the names TV, Web, and Other in between the opening and closing tags, respectively.

6. For each new option, set a value attribute that is equivalent to the text in between the opening and closing tag.

7. Make the Web option the default choice within the list of options.

8. Save your changes.

9. Preview the webpage in a browser. You should see the text question, How did you hear about us? with a drop-
down list that has Web as the default option.

38 | Domain 3: The Select Tag HTML and CSS Project Workbook, First Edition
Textarea Tag Project Details
Project file
The input tag, a tag we saw earlier in this domain, allows for a single line of text 34g-contactus.html
to be entered in a form. A textarea tag allows for multiple lines of text to be
Estimated completion time
typed into a text box. It is often used to allow people to fill out a comment form,
5 minutes
for example.
Video reference
Purpose Domain 3
Topic: Form Elements
Upon completing this project, you will be able to add a textarea tag to an HTML Subtopic: Textarea Tag
document.
Objectives covered
Steps for Completion 3 Document Structure using HTML
3.4 Construct and analyze markup
1. Open the 34g-contactus.html file in the MusicStore3 student folder. that uses form elements
3.4.g Textarea
2. Below the existing select tag, add a paragraph tag with the text, Add
Notes for the teacher
comments below The completed file, 34g-contactus.html,
is in the Finished folder. If time permits,
3. On the next line, add a textarea tag.
have students experiment further with
4. To the textarea tag, add attributes to make the text box 6 rows tall and the textarea tag.

50 columns wide, with a 255 character maximum input.

5. Save your changes.

6. Preview the webpage in a browser. You should see this text area within the webpage:

39 | Domain 3: Textarea Tag HTML and CSS Project Workbook, First Edition
Button Tags Project Details
Project file
There are two ways to add a button to an HTML document. An input tag with a 34h-contactus.html
button attribute allows one to create a button used to submit or reset a form.
Estimated completion time
Most other actions with buttons should be built using the button tag.
10 minutes

Purpose Video reference

Domain 3
Upon completing this project, you will be able to add a button tag and an input Topic: Form Elements
tag with a button attribute to an HTML document. Subtopic: Button Tag

Steps for Completion Objectives covered

3 Document Structure using HTML
1. Open the 34h-contactus.html file in the MusicStore3 student folder. 3.4 Construct and analyze markup
that uses form elements
2. Add an opening and closing button tag below the existing textarea tag. 3.4.h Button

3. Name the button tag, showimage Notes for the teacher

The completed file, 34h-contactus-
4. Add an empty onclick attribute to the button tag. completed, is in the Finished folder. If
time permits, have the students add a
5. Between the opening and closing button tag, add the text, Show image rest button (Hint: it is an input tag) to
the webpage.
6. Below the existing button tag, add an input tag with the type set to
submit, the name to submitform, and the value to Send it

7. Save your changes.

8. Preview the webpage in a web browser.You should see two buttons: a button with the text, Show image, and
another button with the text, Send it.

40 | Domain 3: Button Tags HTML and CSS Project Workbook, First Edition
Output Tags Project Details
Project file
An output tag will take information that is being put into the form and make 34i-contactus.html
calculations with the information. The output tag needs a name, which is then
Estimated completion time
referred to in an oninput attribute added to the form tag. This oninput attribute
5 minutes
will contain the calculation that is added to the output tag.
Video reference
Purpose Domain 3
Topic: Form Elements
Upon completing this project, you will be able to use an output tag in an HTML Subtopic: Output Tag
document.
Objectives covered
Steps for Completion 3 Document Structure using HTML
3.4 Construct and analyze markup
1. Open the 34i-contactus.html file in the MusicStore3 student folder. that uses form elements
3.4.i Option
2. Add an oninput attribute in the form tag, setting the attribute to use the
Notes for the teacher
following formula: fn.value = firstname.value + “ “ + lastname.value The completed file, 34i-contactus-
completed, is in the Finished folder.
3. Add an opening and closing output tag on the line below the button
Make sure students understand the
input tag, using the name fn for the tag. importance of naming the output tag
with the same name as the variable
4. Save your changes.
used in the oninput attribute of the
form tag.
5. Preview the webpage in a browser. As you type information into the
name fields, the information should show automatically next to the
Send it button.

41 | Domain 3: Output Tags HTML and CSS Project Workbook, First Edition
Option Tag Project Details
Project file
HTML documents have two ways to create option tags: they can be individual 34j-contactus.html
option tags or can be grouped into group option tags. In a previous lesson,
Estimated completion time
individual option tags were added to an input form to add functionality. Group
10 minutes
option (optgroup) tags take individual option tags and group them in similar
groups to make options easy to read. Video reference
Domain 3
Purpose Topic: Form Elements
Subtopic: Option Tag
Upon completing this project, you will be able to use options and option groups
Objectives covered
in an HTML document.
3 Document Structure using HTML
3.4 Construct and analyze markup
Steps for Completion that uses form elements
3.4.i Option
1. Open the 34i-contactus.html file in the MusicStore3 student folder.
Notes for the teacher
2. Insert a blank line above the option value for the TV. The completed file, 34i-contactus-
complete, is in the Finished folder. If
3. On the new blank line, add an opening optgroup tag with the label,
time permits, have the students add
Media another option group with options to
the drop- down list.
4. Close the optgroup tag after the option for Other.

5. Surround the options for Google and Bing with an optgroup tag with
the label, Web

6. Save your changes.

7. Preview your webpage in a web browser.

8. Click the drop-down arrow under the How did you hear about us? line. You should see the following:

42 | Domain 3: Option Tag HTML and CSS Project Workbook, First Edition
Datalist Project Details
Project file
A datalist tag creates a prepopulated list of possible answers in an input form. 34j-contactus.html
This can help users use values you want in a form field without having to display
a drop-down list right away, as is the case with a select tag. A datalist typically Estimated completion time
10 minutes
works in conjunction with an input tag with a list attribute.
Video reference
Purpose Domain 3
Topic: Form Elements
Upon completing this project, you will be able to add a datalist tag to an HTML Subtopic: Datalist Tag
document and populate it with values.
Objectives covered
Steps for Completion 3 Document Structure using HTML
3.4 Construct and analyze markup
1. Open the 34j-contactus.html file in the MusicStore3 student folder. that uses form elements
3.4.j Label
2. Add a paragraph tag on the line before Add comments below, with the
Notes for the teacher
text, What instrument are you most interested in learning?
The completed file, 34j-contactus-
3. Add an input tag on the line below the paragraph, with the list attribute complete, is in the Finished folder. If
time permits, have the students add
set to instruments and the name set to instrument
additional options to the datalist tag.
4. Add an opening and closing datalist tag on the line below the input tag,
with the id set to instruments

5. Add four option tags inside the open datalist tag.

6. Set the values of the four option tags to guitar, piano, drums, and bass

7. Set the text in between the each opening and closing option tag to guitar, piano, drums, and bass, respectively.

8. Save your changes.

9. Preview the webpage in a web browser.

10. Click in the What instrument are you most interested in learning? field.

11. Begin to type the word, piano. You should see the piano value appear as a choice.

43 | Domain 3: Datalist HTML and CSS Project Workbook, First Edition

Fieldset and Legend Tags Project Details
Project file
The fieldset tag allows a user to group fields on a form to make the form user- 34l-contactus.html
friendly. A fieldset defines a box around a set of fields. A fieldset tag also
Estimated completion time
requires a legend tag, which represents the name of the fieldset.
10 minutes

Purpose Video reference

Domain 3
Upon completing this project, you will be able to use a fieldset tag and legend Topic: Form Elements
tag in an HTML document. Subtopic: Fieldset Tag

Steps for Completion Objectives covered

3 Document Structure using HTML
1. Open the 34j-contactus.html file in the MusicStore3 student folder. 3.4 Construct and analyze markup
that uses form elements
2. Add an opening fieldset tag before the first label (the one with the 3.4.j Label
name of firstname).
Notes for the teacher
3. Close the fieldset tag after the third input tag (the one with the name of The completed file, 341-contactus-
completed, is in the Finished folder. If
email).
time permits, have the students add a
4. Just after the open fieldset tag, add an opening and closing legend tag fieldset tag with a legend set to
comments around the comments area.
with the text, Personal, in between.

5. Add another fieldset tag on the line before the question, How did you
hear about us? Close the fieldset tag on the line after the last closed datalist tag with the question, What
instrument are you most interested in learning?

6. Add a legend tag with the text, Questions, between the opening and closing tag.

7. Save your changes.

8. Preview the webpage in a web browser. Your completed form should look like this:

9. Save and close all your open files, both in the browser and your code editor.

44 | Domain 3: Fieldset and Legend Tags HTML and CSS Project Workbook, First Edition
Domain 4

45 | Domain 4: Fieldset and Legend Tags HTML and CSS Project Workbook, First Edition
Fill-in-the-Blanks
Instructions: While watching Domain 4, fill in the missing words according to the information presented by the instructor.
[References are found in the brackets.]

Image, SVG, and Canvas Elements

1. As users add images onto webpages, they should know the image’s so they can scale it
accordingly. [Add Images]

2. Use either a table or when lining up images in rows or columns. [Image Layouts]

3. When adding a hyperlink to an image, make sure the img tag is surrounded by the tag and not
the other way around. [Image Links]

Video and Audio Formats

4. In order to have a play button on a video in HTML5, the attribute and value needs
to be added to the video tag. [Video and Source Tags]

5. Audio tags should have the attribute added to allow a user to control when the audio plays.
[Audio and Source Tags]

6. When using .vtt files, the two most common formats are and subtitles. [Track Tag]

7. An iframe is essentially a frame inside of a webpage that holds content and allows you to put one
file inside of another. [iFrame Implementations]

46 | Domain 4: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

Add Images Project Details
Project file
When linking an image to a webpage, make sure the image dimensions fit the 41a-instruments.html
webpage. The quality of the image is affected by changing the dimensions of an mandolin.jpg
image, so choose images that will still maintain a high-quality image. trombone.jpg

Estimated completion time

Purpose 10 minutes
Upon completing this project, you will be able to link an image in an HTML Video reference
document and change the image dimensions to fit the webpage. Domain 4
Topic: Image, SVG, and Canvas
Steps for Completion Elements
Subtopic: Add Images
1. Open the 41a-instruments.html file in the MusicStore4 student folder.
Objectives covered
2. Add an image tag on the line above the text, Mandolin. 4 Multimedia Presentation using HTML
4.1 Construct and analyze markup
3. Set the image source to be the mandolin.jpg file from the images that displays images
folder. 4.1.a Img and picture elements
and their attributes
4. Set the width of the image to 460
Notes for the teacher
5. Set the height of the image to 345 The completed file, 41a-instrument-
completed, is in the Finished folder. If
6. Set the alternative text of the image to mandolin time permits, have the students add
another image to the webpage.
7. Above the paragraph with the word, Trombone, add an image tag with
the source set to the trombone.jpg file from the images folder, the
width set to 460, the height set to 345, and the alternative text set to
trombone

8. Save your changes.

9. Preview the webpage. You should see two pictures: one of a mandolin and one of a trombone.

47 | Domain 4: Add Images HTML and CSS Project Workbook, First Edition
Image Layouts and Links Project Details
Project file
For a consistent image layout in a webpage, there are two main ways to 41a-instruments2.html
accomplish this. Either the images should be placed in a table, or one can use
Estimated completion time
CSS styles to lay out the images. As CSS is covered later in this course, this
10 minutes
project will show how to use a table to align images to text.
Video reference
Hyperlinks can also be added to images. A common use for this is to link an Domain 4
image to a larger version of it, which technically is a different file. Topic: Image, SVG, and Canvas
Elements
Purpose Subtopic: Image Layouts; Image
Links
Upon completing this project, you will see how to use a table to align images
within a webpage. You will also be able to link an image to another image. Objectives covered
4 Multimedia Presentation using HTML
4.1 Construct and analyze markup
Steps for Completion
that displays images
1. Open the 41a-instruments2.html file from your MusicStore4 student 4.1.a Img and picture elements
and their attributes
folder.
Notes for the teacher
2. Look for the code containing the two images. The completed file, 41a-instruments2-
completed, is in the Finished folder. If
3. Above the images, but below the Featured Instruments heading, add a
time permits, have the students use
table with two rows and two cells in each row. tables to experiment further with the
placement of the images and their text.
4. Move the two image tags to the two table cells in the first row of the
table.

5. Move the two paragraphs, Mandolin and Trombone, to the two cells in the second row of the table without
including the paragraph tags.

6. Delete the two empty paragraph tags.

7. Add a hyperlink to the mandolin image tag that links to the image mandolincloseup.jpg in the images folder.

8. Save your changes.

9. Preview the webpage in a browser. You should see the mandolin on the left and the trombone on the right with
the picture titles below each.

10. Click the mandolin image. You should see a close-up image of the mandolin.

48 | Domain 4: Image Layouts and Links HTML and CSS Project Workbook, First Edition
Video and Source Tags Project Details
Project file
When linking a video to a webpage you will want to use multiple sources with 43a-media.html
multiple video formats as not all browsers support all video formats. When Happy.mp4
adding a video, it is good practice to add controls so a user can control the play Happy.mov
settings of the video. Estimated completion time
10 minutes
Purpose
Video reference
Upon completing this project, you will be able to add a video tag, video Domain 4
controls, and multiple play sources to an HTML document. Topic: Video and Audio Formats
Subtopic: Video and Source Tags
Steps for Completion
Objectives covered
1. Open the 43a-media.html file in the MusicStore4 student folder. 4 Multimedia Presentation using HTML
4.2 Construct and analyze markup
2. Add an opening and closing video tag below the paragraph, See this that plays video and audio
cool close-up of a piano player. Set the video height to 480 4.2.a Video
4.2.d Source
3. Add the controls attribute to the opening video tag.
Notes for the teacher
4. Inside the video tag, add a source tag for the video file, Happy.mp4, The completed file, 43a-media-
completed, is in the Finished folder. If
located in the Videos folder, with the type video/mp4
time permits, have the students add
another video source for an Ogg
5. On the next line, add a source for the video file, Happy.mov located in
format.
the Videos folder, with the type video/quicktime

6. Save your changes.

7. Preview the webpage in a web browser. You should see a video player with controls.

8. Play the video.

49 | Domain 4: Video and Source Tags HTML and CSS Project Workbook, First Edition
Audio and Track Tags Project Details
Project file
Audio tags are added to an HTML file in a very similar fashion as that of video 43b-media.html
tags. An audio tag can have multiple source tags and should have audio metronome_audio.mp3
controls for the user to control audio play settings. subtitles.vtt

The track tag works with VTT (web video techs track standard) files. Track tags Estimated completion time
10 minutes
and VTT files are not supported by all web browsers. The most common VTT
formats that are used are captions and subtitles. The language to use will need Video reference
to be specified in the track tag. The track tags can have multiple files with Domain 4
multiple languages if needed. Topic: Video and Audio Formats
Subtopic: Audio and Source Tags;
Track Tag
Purpose
Objectives covered
Upon completing this project, you will be able to add an audio tag with controls
4 Multimedia Presentation using HTML
to an HTML document. You will also be able to add a track tag using subtitles to 4.2 Construct and analyze markup
a video tag. that plays video and audio
4.2.b Audio
Steps for Completion 4.2.c Track

1. Open the 43b-media.html file in the MusicStore4 student folder. Notes for the teacher
The completed file, 43b-media-
2. Add an opening and closing audio tag below the paragraph that starts completed, is in the Finished folder. If
with, Don’t know what a metronome sounds like? time permits, have the students add
another audio source to the audio tag.
3. Add the controls attribute to the opening audio tag. You can also have students explore the
contents of the subtitles.vtt file.
4. Inside the audio tag, add a source attribute for the audio file,
metronome_audio. mp3, located in the Audio folder, with the type
audio/mp3

5. Below the two source tags within the video tag, add a track tag with the source set to subtitles.vtt from the
Videos folder, the kind to subtitles, the source language to en, and the label to English

6. Save your changes.

7. Preview the webpage in a web browser. You should see an audio control with controls.

8. Play the audio.

50 | Domain 4: Audio and Track Tags HTML and CSS Project Workbook, First Edition
Simple Iframe Implementations Project Details
Project file
An iframe is a frame that holds content inside a webpage. The iframe can hold a 43e-media.html
source from another webpage that can easily be changed with the click of a vtt.html
button or other user interaction. An iframe will let you put one HTML file within
Estimated completion time
another HTML file. 5 minutes

Purpose Video reference

Domain 4
Upon completing this project, you will better understand what an iframe does, Topic: Video and Audio Formats
as well as how to apply it to a webpage. Subtopic: iFrame Implementations

Steps for Completion Objectives covered

4 Multimedia Presentation using HTML
1. Open the 43e-media.html file in the MusicStore4 student folder. 4.2 Construct and analyze markup
that plays video and audio
2. Add an opening and closing iframe tag on the line below the paragraph, 4.2.e Iframe
Here is an example of an iframe. Notes for the teacher
The completed file, 43e-media-
3. Set the iframe width to 300, the height to 300, the id to vtt, and the
completed, is in the Finished folder. Use
source to vtt.html any remaining time to review the
content covered in this domain.
4. Save your changes.

5. Preview the webpage in a web browser. You should see the following at
the bottom of the page:

6. Save and close all open files, both in the browser and in your code editor.

51 | Domain 4: Simple Iframe Implementations HTML and CSS Project Workbook, First Edition
Domain 5

52 | Domain 5: Simple Iframe Implementations HTML and CSS Project Workbook, First Edition
Fill-in-the-Blanks
Instructions: While watching Domain 5, fill in the missing words according to the information presented by the instructor.
[References are found in the brackets.]

Position Text with CSS

1. The best way to take control over layouts on a webpage is through a combination of tags and
ids and then to use styles on those ids. [Height and Width]

2. In using CSS to control your overall page layouts, the max-width property takes precedence over the
property. [Max-Width Used with an Element]

3. , none, right, and left are valid values used in setting the float property. [Float Positioning]

4. Relative positioning can be used to shift elements in relation to their normal location. [Relative
Positioning]

5. Absolute positioning changes the of elements below the element being positioned. [Absolute
Positioning]

6. Users can access the tools to see the default position for elements on a webpage. [Static]

7. Fixed positioning is like positioning in that it removes an element from the natural flow of the
page. [Fixed]

8. Setting the overflow property helps control what happens when extra content breaks out of an
element’s area. [Overflow Settings]

9. The alignment for a block element’s inner content can be controlled with the property.
[Alignment]

10. elements render the full width of a page and will always render on their own lines. [Display]

11. Inline is the default setting of the property, which defines a given element’s rendering
box. [Inline vs. Block]

12. To make an object invisible, set its visibility property to . [Visibility]

13. Using shorthand to set margins sets them in the following order: , , bottom,
and . [Box Model Margins]

14. control gaps between objects while padding controls the gaps between the edges of an object
and text inside of it. [Box Model Padding]

Format Text with CSS

15. A font-family property should have at least one font. [Font-Family]

16. In HTML, colors are often assigned using values instead of names. [Color]

17. The font-style property can be used to italicize text, but the property will not make text .
[Font-Style]

18. The font-weight property controls the levelness of on text. [Font-Weight]

19. The default color for a hyperlink that has been visited is . [Link Colors]

20. The font-variant property can change text to be in the style, meaning lowercase
letters are in an uppercase style with a slightly reduced size. [Font Variant]

53 | Domain 5: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

 21. The property can move text to the bottom of an element. [Text-Alignment]

22. The text-decoration property determines whether an element is . [Text-Decoration]

23. The property controls the first line text indent in a paragraph. [Indentation]

24. The line-height property can be set using several different units including , centimeters,
percentages, and others. [Line Height]

25. Word-wrap is a CSS property that tells a browser how to display long words that over-extend their
element. [Word-wrap]

26. Letter spacing sets the space between in a word. [Letter-Spacing, Word-Spacing]

Backgrounds and Borders

27. For setting colors for borders, one can use a hexadecimal color or a color. [Border-Color]

28. A border style that is not supported in a browser will make a border . [Border-Style]

29. If a border width is not set, a will determine the border width. [Border-Width]

30. Backgrounds are typically set using either a color or an . [Backgrounds]

31. The more a layout, the less fluid the layout is across multiple devices. [Divs]

32. colors have better support across browsers than do named colors. [Working with Colors]

Responsive Layouts
33. The measurement is equivalent to the font size being used. [Units of Measure]

34. To optimize pages for a variety of devices, one can use a tag with a viewport setting to
instruct the browser on how to adjust the page’s scaling and dimensions. [Viewport]

35. A media query can change style sheets according to screen . [Media Query]

36. Using percentages for measurements helps one to avoid having to left to right to view a
webpage. [Percentages and Pixels]

37. A framework can be created or from a third party. [Frameworks and Templates]

38. The max-width property can help fix fluid measurements on screens with a very large . [Max-
Width Property]

39. With CSS Grids, developers can take far greater control over how their content displays across .
[Grids]

54 | Domain 5: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

Height and Max-Width Used Project Details
Project file
with an Element 51a-positioningexample.html

Estimated completion time

A div tag with an id that is styled will help you have more control of the 10 minutes
webpage layout you are creating. The max-width property helps the webpage Video reference
layout to stay the size of the average screen size of your users, regardless of the Domain 5
set screen width in the CSS style sheet. Topic: Position Text with CSS
Subtopic: Height and Width; Max-
Purpose Width Used with an Element

Upon completing this project, you will be able to use height and width in Objectives covered
webpage layouts and set a max-width property for a webpage. 5 Webpage Styling using CSS
5.1 Construct and analyze styles that
Steps for Completion position content
5.1.a Positioning, including float,
1. Open the 51a-positioningexample.html file in the MusicStore5 relative, absolute, static, fixed, max-
width, overflow, height, width,
student folder.
align
2. Add the width of 250px and a height of 250px to the blue, yellow, and Notes for the teacher
coral rules within the inline style sheet. The completed file,
51a-positioningexample-completed, is
3. Save your changes. in the Finished folder. If time permits,
have the students experiment with the
4. Preview the webpage in a browser. The three colored elements should
width settings of the blue and yellow
be stacked one on top of the other. elements.

5. Scroll down the page. Notice that the text for the coral element does
not fit inside the element.

6. Return to the code editor.

7. Adjust the coral rule to a width and max-width of 750px so that the text will be contained in the coral box.

8. Save your changes.

9. Preview the webpage in a browser. You should see all the text within blue, yellow, and coral boxes.

55 | Domain 5: Height and Max-Width Used with an Element HTML and CSS Project Workbook, First Edition
Float Positioning Project Details
Project file
When an element is floated, it is moved to a specific area on the screen so other 51af-positioningexample.html
elements below it can move up. Elements can be float positioned side by side if
Estimated completion time
the screen width will allow the change, or they can float with one side or both
10 minutes
sides of the element cleared out using the clear property within CSS.
Video reference
Purpose Domain 5
Topic: Position Text with CSS
Upon completing this project, you will be able to use the float property to style Subtopic: Float Positioning
a webpage with elements that are side by side or alone on the webpage.
Objectives covered
Steps for Completion 5 Webpage Styling using CSS
5.1 Construct and analyze styles that
1. Open the 51af-positioningexample.html file in the MusicStore5 position content
5.1.a Positioning, including float,
student folder.
relative, absolute, static, fixed, max-
2. In the style sheet, add a property/value pair to the blue rule set that sets width, overflow, height, width,
align
the float property to left
Notes for the teacher
3. In the yellow rule, add a property/value pair that sets the float property The completed file, 51af-
to left positioningexample-completed, is in the
Finished folder. If time permits, have the
4. Save your changes. students adjust the height of the coral
box to make the text fit within it. You
5. Preview the webpage in a web browser. Notice that the blue element could also have the students
now floats to the left of the yellow element and the yellow element experiment further with the float and
floats to the left of the coral element, but the text is spilling out of the clear properties.
coral element.

6. Return to the code editor.

7. In the yellow rule, add a property/value pair that sets the clear property to both

8. Save your changes.

9. Preview the webpage in a browser. You should see the blue and coral elements side by side at the top, with the
yellow element on the lower left part of the page, alone.

56 | Domain 5: Float Positioning HTML and CSS Project Workbook, First Edition
Relative and Absolute Project Details
Project file
Positioning 51ar-positioningexample.html

Estimated completion time

Relative and absolute positioning give more control over where elements are 15 minutes
placed on a webpage than the float property. Relative positioning of an element Video reference
positions it offset relative to where the normal position was and is not an exact Domain 5
set location. Relative positioning does not otherwise change the overall flow of Topic: Position Text with CSS
elements. Subtopic: Relative Positioning;
Absolute Positioning
Absolute positioning of an element will position it exactly in the location placed
in the code. Absolute positioning will change the flow of elements below it if Objectives covered
5 Webpage Styling using CSS
they are not also absolutely positioned. Absolute positioning will give you the
5.1 Construct and analyze styles that
most control of elements in position content
5.1.a Positioning, including float,
Purpose relative, absolute, static, fixed, max-
width, overflow, height, width,
Upon completing this project, you will be able to use relative and absolute align
positioning of elements in a webpage.
Notes for the teacher
Steps for Completion The competed file, 51ar-
positioningexample-completed, is in the
1. Open the 51ar-positioningexample.html file in the MusicStore5 Finished folder. If time permits, have the
student folder. students experiment further with
positioning among the three colored
2. In the internal style sheet, comment out the float property/value elements on the page.
combination in the blue rule set.

3. Comment out both the float and clear property/value combinations in

the yellow rule set.

4. In the yellow rule set, add the position property and set the value to relative

5. In the yellow rule set, set the top property to 100px and the left property to 100px

6. Comment out the max-width property/value combination in the coral rule set.

7. In the coral rule set, add the position property and set the value to relative

8. In the coral rule set, add the top property and set the value to 100px

9. Save your changes.

10. Preview the webpage in a web browser. The yellow element should start 100 pixels below and 100 pixels to the
right of the blue element and the coral element should start 100 pixels below the yellow element.

11. Return to your code editor.

12. In the internal style sheet, change the value of the position property in the yellow rule set to absolute

13. Save your changes.

14. Preview the webpage in a web browser. The yellow element should overlap part of the blue element.

57 | Domain 5: Relative and Absolute Positioning HTML and CSS Project Workbook, First Edition
Static and Fixed Project Details
Project file
The natural flow of a webpage is dependent upon the designated position of positioningelement1.html
the elements on the webpage. Users can accept the default positioning, which is
Estimated completion time
usually static, or change it, depending on how they want their elements laid out.
5-10 minutes
When an element is positioned as absolute, and does not specify top, right, Video reference
bottom, or left, it is positioned at the location it would have been had it been Domain 5
static. Fixed positioning is like absolute positioning in that it removes the Topic: Position Text with CSS
element from the natural flow of the page. The difference is that absolute Subtopic: Static; Fixed
positioning positions an element based on its parent element, whereas an Objectives covered
element that has a position of fixed is positioned absolutely in relation to the 5 Webpage Styling using CSS
browser window. 5.1 Construct and analyze styles that
position content
Purpose 5.1.a Positioning, including float,
relative, absolute, static, fixed, max-
Upon completing this project, you will better understand how to position width, overflow, height, width,
elements on a webpage using static, absolute, and fixed positioning. align

Steps for Completion Notes for the teacher

The completed file, 51a-positioning-
1. Open the positioningelement1.html file in the MusicStore5 student complete, is in the Finished folder. The
default position of a webpage is located
folder.
under the Computed tab in the
2. View the webpage in a browser. Developer Tools. If time permits, have
students practice positioning elements
3. Open the Developer Tools and view the default position for the around the page and around the
browser window.
webpage elements.

4. What is the default position of the webpage elements?

a.

5. Navigate back to the positioningelement1.html file.

6. Add a new attribute on line 24, setting the position to absolute

7. View the webpage in a browser.

8. Navigate back to the positioningelement1.html file.

9. Change the position from absolute to fixed

10. Add an html height of 2000px so that the code looks like this:

11. View the webpage in a browser.

58 | Domain 5: Static and Fixed HTML and CSS Project Workbook, First Edition
Overflow and Alignment Project Details
Project file
Settings 51ao-positioningexample.html

Estimated completion time

Overflow settings keep the text from overflowing an element. The main use of 5-10 minutes
the overflow property is to tell text to scroll if it otherwise does not fit within an Video reference
element. It is good practice to set overflow settings to maintain the control of Domain 5
element designs in different browsers. Topic: Position Text with CSS
Subtopic: Overflow Settings;
Another property worth setting for text in CSS is the text-align property. The Alignment
text-align property can be used in any tag or class that uses text. It is best
practice to use CSS for text alignment. Objectives covered
5 Webpage Styling using CSS
5.1 Construct and analyze styles that
Purpose
position content
Upon completing this project, you will be able to add alignment to an element, 5.1.a Positioning, including float,
relative, absolute, static, fixed, max-
and a scroll bar, using overflow settings, to a webpage element.
width, overflow, height, width,
align
Steps for Completion
Notes for the teacher
1. Open the 51ao-positioningexample.html file in the MusicStore5 The completed file, 51ao-
student folder. positioningexample-completed, is in the
Finished folder. If time permits, have
2. Change the coral element width to 250px students experiment further with
overflow and text-align values.
3. Add an overflow property to the coral element with the value set to
scroll

4. Save your changes.

5. Preview the webpage in a browser. You should see a scroll bar on the side of the coral element that allows you to
see all the text within the coral box.

6. Return to your code editor.

7. Add a text-align property to the blue rule set with the value set to left

8. Add a text-align property to the yellow rule set with the value set to center

9. Add a text-align property to the coral rule set with the value set to justify

10. Save your changes.

11. Preview the webpage in a browser. You should have left-aligned text in the blue box, center-aligned text in the
yellow box, and justified text in the coral box.

59 | Domain 5: Overflow and Alignment Settings HTML and CSS Project Workbook, First Edition
Display Project Details
Project file
The display property can take many different values, including the h2, span, and display.html
aside tags. Each tag includes its own properties and can change the positioning
Estimated completion time
of elements on a webpage.
5-10 minutes
When it comes to displays, users should also understand the difference between Video reference
block and inline elements. Block elements render the full width of a page and Domain 5
will always render on their own lines. Inline elements take up the necessary Topic: Position Text with CSS
space and can position themselves alongside other elements. Subtopic: Display

Objectives covered
Purpose
5 Webpage Styling using CSS
Upon completing this project, you will better understand display elements. 5.1 Construct and analyze styles that
position content
5.1.b Display
Steps for Completion
Notes for the teacher
1. Open the display.html file in the MusicStore5 student folder. Help students understand the different
uses for the display elements listed in
2. View the webpage in a browse
the example file.
3. Label the elements on the page as block or inline.

a. h2 tag

b. Span tag #1

c. Span tag #2

d. Span tag #3

e. Aside tag

60 | Domain 5: Display HTML and CSS Project Workbook, First Edition

Inline vs. Block Project Details
Project file
CSS style sheets will default elements to blocks, which places one element after 51b-main.css
another on a webpage. The display property can be set to move elements to be 51b-spotlight.html
in line with each other on a webpage.
Estimated completion time
5-10 minutes
Purpose
Video reference
Upon completing this project, you will better understand the difference between Domain 5
inline and block layouts and be able to use them in a CSS style sheet. Topic: Position Text with CSS
Subtopic: Inline vs. Block
Steps for Completion
Objectives covered
1. Open the 51b-main.css file in the MusicStore5 student folder. 5 Webpage Styling using CSS
5.1 Construct and analyze styles that
2. Remove the comment from the background-color property in the position content
figcaption rule set. 5.1.c Inline vs. block

3. Inside the figcaption rule set, add the display property and set the value Notes for the teacher
The completed file, 51b-main-
to inline
completed, is in the Finished folder. If
4. Inside the sidenote rule set, add the display property and set the value time permits, have students experiment
with display settings on other elements.
to inline
You can also have them remove the
comment above the figcaption rule set
5. Save your changes.
on the style sheet as the comment no
6. Open the 51b-spotlight.html file in the MusicStore5 student folder. longer applies.

7. Preview the webpage in a web browser. Notice that with the inline
display, the two highlighted pieces of text no longer take up the width of the page.

61 | Domain 5: Inline vs. Block HTML and CSS Project Workbook, First Edition
Visibility Project Details
Project file
Elements can be set not to be visible on a webpage and then dynamically set to 51c-positioningexample.html
display, usually on either a click or a mouse hover by a user over a visible
Estimated completion time
element along with the getElementById method on the object to set the
10 minutes
visibility property to visible. This is not the same as the details and summary
HTML tags, but the visible element can be Video reference
Domain 5
Purpose Topic: Position Text with CSS
Subtopic: Visibility
Upon completing this project, you will be able to start with an element not set
Objectives covered
to visible and then use an event to make an element visible.
5 Webpage Styling using CSS
5.1 Construct and analyze styles that
Steps for Completion position content
5.1.d Visibility
1. Open the 51c-positioningexample.html file in the MusicStore5
student folder. Notes for the teacher
The completed file, 51c-
2. In the internal style sheet, add the visibility property, with a value of positioningexample-complete, is in the
hidden, to the coral rule set. Finished folder. If time permits, have
students use the concepts covered in
3. Save your changes. this project to change visibility on either
the blue or the yellow element.
4. Preview the webpage in a web browser. The coral element should be
invisible.

5. Return to your code editor.

6. In the div tag with the id of yellow, found in the body of the HTML document, add a paragraph tag with the text,
Click to see the coral box

7. In the opening paragraph tag, make an onclick event using JavaScript that will set the visibility property of the div
tag with the coral id to visible

8. Save your changes.

9. Preview the webpage in a web browser.

10. Click the text, Click to see the coral box. The coral box should appear.

62 | Domain 5: Visibility HTML and CSS Project Workbook, First Edition

Box Model Margins and Project Details
Project file
Padding 51d-positioningexample.html

Estimated completion time

Margins control the distance between objects on a webpage, while padding 10 minutes
controls the distance between edges of an object and the text inside the object. Video reference
Margins and padding can be set for all sides in one property/value set or a Domain 5
separate property/value set can be used for each side. When setting the code Topic: Position Text with CSS
for all sides at once, the measurements will move in a clockwise position starting Subtopic: Box Model Margins; Box
with the top measurement. Model Padding

Objectives covered
Purpose 5 Webpage Styling using CSS
5.1 Construct and analyze styles that
Upon completing this project, you will better understand the difference between
position content
margins and padding, and you will be able to add margins and padding to 5.1.e Box model, margins, and
objects in a webpage. padding

Steps for Completion Notes for the teacher

The completed file, 51d-
1. Open the 51d-positioningexample.html file in the MusicStore5 positioningexample-complete, is in the
student folder. Finished folder. If time permits, have
students experiment further with
2. In the blue rule set, remove the comment around the float margins and padding, both with the
property/value combination. properties to set all sides and with
individual sides.
3. In the yellow rule set, adjust the comment block so that the float
property/value combination is not commented out and the clear,
position, top, and left property/ value combinations are commented out.

4. In the yellow rule set, add a margin property and set the values to 0px, 10px, 0px, and 5px for the top, right,
bottom, and left margins, respectively.

5. In the blue rule set, add a padding property with the value set to .5em

6. In the yellow rule set, add a property that will set the top side padding to .5em

7. Save your changes.

8. Preview the webpage in a browser. There should be space between the box edge and the text on all sides of the
blue box and between the top line and the text in the yellow box. There should also be a margin in between the
two boxes.

9. Close all your open files in the browser and the code editor, saving changes if prompted.

63 | Domain 5: Box Model Margins and Padding HTML and CSS Project Workbook, First Edition
Font Families in CSS Project Details
Project file
The font properties can have type, size, color, style, and weight all adjusted in a 52a-main.css
CSS style sheet. For font families, it is a best practice to use multiple fonts and 52a-books.html
then a font family default so that users who do not have the first font specified
Estimated completion time
can still see the text with a font you choose, not the default font on their 5-10 minutes
browsers.
Video reference
Purpose Domain 5
Topic: Format Text with CSS
Upon completing this project, you will be able to apply font families to a CSS Subtopic: Font-Family
style sheet.
Objectives covered
5 Webpage Styling using CSS
Steps for Completion 5.2 Construct and analyze styles that
format text
1. Open the 52a-main.css file in the MusicStore5 student folder.
5.2.a Font-family
2. On the line above the figcaption rule set, add a rule set for all six Notes for the teacher
headings (h1 through h6). The completed files, 52a-main-
complete, and 52a-books-complete, are
3. Within the new rule set, add a font family property and set the values to in the Finished folder. If time permits,
helvetica, arial, and sans-serif have the students add the font-family
property to other rule sets within the
4. Save your changes. style sheet.

5. Open the 52a-books.html file in the MusicStore5 student folder.

6. Surround the text, Welcome to THE Music Store, with an h1 tag.

7. Save your changes.

8. Preview the webpage in a web browser. You should see the heading with a font of helvetica, arial, or a similar
sans-serif font.

64 | Domain 5: Font Families in CSS HTML and CSS Project Workbook, First Edition
Font Colors in CSS Project Details
Project file
Font colors can and should be controlled through CSS. There are two basic ways 52b-main.css
to assign values to colors. First, color names can be used. Some browsers 52b-spotlight.html
support more color names than others, however, so hexadecimal values are a
Estimated completion time
better choice for color values, as hexadecimal values are supported in all 5 minutes
browsers.
Video reference
Purpose Domain 5
Topic: Format Text with CSS
Upon completing this project, you will be able to apply font colors within a CSS Subtopic: Color
style sheet.
Objectives covered
5 Webpage Styling using CSS
Steps for Completion 5.2 Construct and analyze styles that
format text
1. Open the 52b-main.css file in the MusicStore5 student folder.
5.2.b Color
2. Within the figcaption rule set, add a color property with a value of Notes for the teacher
#032f0d The completed file, 52b-main-complete,
is in the Finished folder. If time permits,
3. Save your changes. have the students experiment with color
names within rule sets in the main.css
4. Open the 52b-spotlight.html file in the MusicStore5 student folder.
style sheet and see how that affects
colors within the site’s webpages.
5. Preview the webpage in a web browser. You should see the text, The
Mighty Kazoos, in a dark green color.

65 | Domain 5: Font Colors in CSS HTML and CSS Project Workbook, First Edition
Font Styles and Weights in CSS Project Details
Project file
In CSS, font styles control the shape of a font from the standpoint of whether 52c-main.css
the font is italic. Font weight controls the boldness of a font, which can be 52c-books.html
indicated either with a value of bold or a value from 0 to 1000. A bold font will
Estimated completion time
be more consistent with the bold value than with numbers across different 10 minutes
browsers. Many browsers will
Video reference
only recognize 400 and 700 as measurements of boldness, so use other Domain 5
measurements sparingly. Topic: Format Text with CSS
Subtopic: Font-Style; Font-Weight
Purpose
Objectives covered
Upon completing this project, you will be able to apply font styles and font 5 Webpage Styling using CSS
5.2 Construct and analyze styles that
weights to a CSS style sheet.
format text
5.2.c Font-style
Steps for Completion 5.2.d Font-size
5.2.e Font-weight
1. Open the 52c-main.css file in the MusicStore5 student folder.
Notes for the teacher
2. In the sale rule set, add a font style property with the value set to italic The completed file, 52c-main-complete,
is in the Finished folder. If time permits,
3. In the sale rule set, add a font weight property with the value set to 700
have the students change the boldness
setting on the font weight property set
4. Save your changes.
in the project to a number under 400 or
5. Open the 52c-books.html file in the MusicStore5 student folder. a number between 701 and 1000 to see
if that makes a difference in the amount
6. Preview the webpage in a web browser. The text, Special Sale, should be of boldness on the Special Sale text
bold and italic. inside the 52c-books.html file.

7. Return to the 52c-main.css file in the code editor.

8. Change the value of the font weight property from 700 to bold

9. Save your changes.

10. Preview the 52c-books.html page in a web browser again. The text, Special Sale, should have the same or similar
boldness as before.

66 | Domain 5: Font Styles and Weights in CSS HTML and CSS Project Workbook, First Edition
Link Colors in CSS Project Details
Project file
The color property changes the font color of text within a CSS rule set. This 52e-main.css
property can also be used in pseudo classes. By default, unvisited links are blue, 52e-spotlight.html
visited links are purple, and active links are red. These colors can be changed,
Estimated completion time
but in doing so you will want to make sure that link colors are consistent 10 minutes
throughout your site.
Video reference
Purpose Domain 5
Topic: Format Text with CSS
Upon completing this project, you will be able to apply colors to link-based Subtopic: Link Colors
pseudo classes in a CSS style sheet.
Objectives covered
5 Webpage Styling using CSS
Steps for Completion 5.2 Construct and analyze styles that
format text
1. Open the 52e-main.css file in the MusicStore5 student folder.
5.2.g Link colors
2. In the existing rule set for the a tag, add a color property with the value Notes for the teacher
set to darkgreen The completed file, 52e-main-complete,
is in the Finished folder. If time permits,
3. Below the existing rule set, add a rule set for the a tag and the active have the students experiment further
pseudo class. with link colors on the a tag and its
accompanying pseudo classes.
4. Inside the new rule set, add a color property with the value set to
#63f60a

5. Below the existing rule set, add a rule set for the a tag and the visited pseudo class.

6. Inside the new rule set, add a color property with the value set to #808080

7. Save your changes.

8. Open the 52e-spotlight.html file in the MusicStore5 student folder.

9. Preview the webpage in a web browser. Any unvisited link should be dark green and any visited link should be
gray.

67 | Domain 5: Link Colors in CSS HTML and CSS Project Workbook, First Edition
Font Variant Project Details
Project file
The font-variant property can change text to be in the Small Caps style, meaning headings1.html
lowercase letters are in an uppercase style with a slightly reduced size. This style main.css
is most commonly used on headings, but it can be used anywhere.
Estimated completion time
5 minutes
Purpose
Video reference
Upon completing this project, you will be able to use the font-variant property. Domain 5
Topic: Format Text with CSS
Steps for Completion Subtopic: Font Variant

1. Open the headings1.html file in the MusicStore5 student folder. Objectives covered
5 Webpage Styling using CSS
2. View the webpage in a browser. 5.2 Construct and analyze styles that
format text
3. Navigate to the linked main.css style sheet. 5.2.f Font-variant

4. On line 10, add a font-variant property with a value of small-caps Notes for the teacher
The completed file, 52f-main-complete,
5. Save your changes. is in the Finished folder.

6. Refresh the webpage in the browser.

68 | Domain 5: Font Variant HTML and CSS Project Workbook, First Edition
Text Alignment and Decoration Project Details
Project file
Text alignment has been covered in previous lessons. In this project, we will be 52f-main.css
covering text alignment in tables. Aligning text in a table is important to the 52f-hours.html
presentation of the table as it can make a table stand out and make it easier to
Estimated completion time
read. Often, the vertical align property is used to position text vertically within a 10 minutes
cell.
Video reference
The text-decoration property will control if text is underlined or not underlined. Domain 5
There are several types of underline styles, but they may not be supported in Topic: Format Text with CSS
multiple browsers. When adding any type of styling it is good practice to check Subtopic: Text-Alignment; Text-
Decoration
if the style is supported in different browsers.
Objectives covered
Purpose 5 Webpage Styling using CSS
5.2 Construct and analyze styles that
Upon completing this project, you will be able to apply text alignment to a table format text
using CSS. You will also be able to apply the text decoration property within 5.2.h Text formatting, text
CSS. alignment, text decoration,
indentation
Steps for Completion
Notes for the teacher
1. Open the 52f-main.css file in the MusicStore5 student folder. The completed file, 52f-main-complete,
is in the Finished folder. If time permits,
2. At the bottom of the style sheet, add a class named vbot that only have the students experiment further
applies to table cells. with the text-align, vertical-align, and
text-decoration properties.
3. Within the new class, add a vertical align property with the value of
bottom

4. Within the new class, add a height property with a value of 30px

5. Within the a:hover class, change the value of the text decoration property to double

6. Save your changes.

7. Open the 52f-hours.html file in the MusicStore5 student folder.

8. Preview the webpage in a web browser. The text should be vertically aligned in the bottom of the last cell of the
table.

9. Hover your mouse over the Home link. If your browser supports double underlines, the link should show a double
underline.

69 | Domain 5: Text Alignment and Decoration HTML and CSS Project Workbook, First Edition
Indentation Project Details
Project file
The text indent property controls the first line text indent in a multi-lined 52fi-main.css
paragraph. To indent more than the first line in a paragraph, use the padding 52fi-index.html
property.
Estimated completion time
10-15 minutes
Purpose
Video reference
Upon completing this project, you will be able to use the text indent property to Domain 5
control the indentation of the first line in a paragraph. Topic: Format Text with CSS
Subtopic: Indentation
Steps for Completion
Objectives covered
1. Open the 52fi-main.css file in the MusicStore5 student folder. 5 Webpage Styling using CSS
5.2 Construct and analyze styles that
2. Below the sale class, add a class named indent format text
5.2.h Text formatting, text
3. Within the new class, add a text indent property with a value of 5em alignment, text decoration,
indentation
4. Open the 52fi-index.html file in the MusicStore5 student folder.
Notes for the teacher
5. Down the page, wrap an opening and closing paragraph tag around the The completed files, 52fi-main-
text: We are open seven days a week...We look forward to seeing complete, and 52fi-index-complete, are
you! in the Finished folder. For the exam,
make sure students understand when to
6. Add the indent class to the open paragraph tag. use the text-indent property (first line
indent) and when to use the padding
7. Save your changes. property (to indent the entire
paragraph).
8. Preview the webpage in a browser. The first sentence in the last
paragraph on the webpage will be indented.

9. Go back to the 52fi-main.css file in your code editor and change the property you set earlier from the left indent
property to the padding property.

10. Return to the 52fi-index.html webpage in the code editor.

11. Preview the webpage in a web browser. The entire paragraph to which you added the left indent class should be
indented.

12. Close all open files in your browser and code editor, saving changes if prompted.

70 | Domain 5: Indentation HTML and CSS Project Workbook, First Edition

Line Height and Word-Wrap Project Details
Project file
One can use the line-height property to add space between separate lines of positioningexample2.html
text within the same element. The line-height property sets the height of wordwrap.html
individual lines within an element. The line-height property can be set using
Estimated completion time
several different units, including pixels, centimeters, percentages, and more. 5-10 minutes

Word-wrap is a CSS property that tells the browser how to display long words Video reference
that overextend their parent element. Domain 5
Topic: Format Text with CSS
Purpose Subtopic: Line Height; Word-wrap

Upon completing this project, you will better understand the uses of the line- Objectives covered
height and word-wrap properties to display elements on a webpage. 5 Webpage Styling using CSS
5.2 Construct and analyze styles that
format text
Steps for Completion
5.2.i Line-height
1. Open the positioningexample2.html file in the MusicStore5 student 5.2.j Word-wrap

folder. Notes for the teacher

Discuss the differences between word-
2. View the webpage in a browser. wrap options with students.

3. On line 18, add the line-height property with the units set to 20px

4. View the webpage in the browser and refresh the page.

5. Open the wordwrap.html file.

6. View the webpage in a browser.

7. Describe the differences between the CSS word-wrap properties of normal and break-word.

a.

71 | Domain 5: Line Height and Word-Wrap HTML and CSS Project Workbook, First Edition
Letter-Spacing, Word-Spacing Project Details
Project file
Letter spacing sets to the space between characters in a word. Word spacing spacing.html
sets the space between words.
Estimated completion time
5-10 minutes
Purpose
Video reference
Upon completing this project, you will better understand how to alter letter and
Domain 5
word spacing on a webpage. Topic: Format Text with CSS
Subtopic: Letter-Spacing; Word-
Steps for Completion Spacing

1. Open the spacing.html file in the MusicStore5 student folder. Objectives covered
5 Webpage Styling using CSS
2. View the webpage in a browser. 5.2 Construct and analyze styles that
format text
3. In the HTML file, change the letter spacing on line 19. 5.2.k Letter-spacing

4. Change the word spacing on line 23. Notes for the teacher
Students’ files will vary as they can
5. Save your changes. experiment with the number of pixels
used for the webpage elements. Help
6. View the webpage in a browser. students understand the difference
between line-height, height, letter-
spacing, and word-spacing.

72 | Domain 5: Letter-Spacing, Word-Spacing HTML and CSS Project Workbook, First Edition
Border Color and Style Project Details
Project file
The border color property sets a color for a border. The border color only works 53a-main.css
if a border style is set, as a border style must be set for a border to be displayed. 53a-spotlight.html
The more complex the border style, the more important it is to test the style in
Estimated completion time
multiple browsers to make sure the border style is supported properly. 10-15 minutes

Purpose Video reference

Domain 5
Upon completing this project, you will be able to set border colors and styles in Topic: Backgrounds and Borders
a stylesheet. Subtopic: Border-Color; Border-
Style
Steps for Completion
Objectives covered
1. Open the 53a-main.css file in the MusicStore5 student folder. 5 Webpage Styling using CSS
5.3 Construct and analyze styles that
2. In the sidenote rule set, set a border color property with a value of navy format backgrounds and borders
5.3.a Border-color
3. In the sidenote rule set, set a border style property with a value of solid 5.3.b Border-style

4. Save your changes. Notes for the teacher

The completed file, 53a-main-complete,
5. Open the 53a-spotlight.html file in the MusicStore5 student folder. is in the Finished folder. If time permits,
have students experiment further with
6. Preview the webpage in a web browser. The sidenote text should show the border style property and have the
on the right side of the screen with a solid navy border around the text. students test these changes in multiple
browsers to see support for these styles
7. Return to your code editor. across browsers.

8. Return to the 53a-main.css file.

9. In the sidenote rule set, change the value of the border style property to dashed

10. Save your changes.

11. Return to the 53a-spotlight.html file.

12. Preview the webpage in a web browser. The border should now be dashed.

73 | Domain 5: Border Color and Style HTML and CSS Project Workbook, First Edition
Border Width Project Details
Project file
The border width property is typically set using pixels as a measurement. A 53c-main.css
border width can be set for all sides of an object, or individual widths can be set 53c-spotlight.html
for each side of an object. Furthermore, shorthand can be used as a border
Estimated completion time
property can have a width, style, and color all set at once. 15 minutes

Purpose Video reference

Domain 5
Upon completing this project, you will be able to set border widths for an entire Topic: Backgrounds and Borders
object and for individual sides of an object. Subtopic: Border-Width

Steps for Completion Objectives covered

5 Webpage Styling using CSS
1. Open the 53c-main.css file in the MusicStore5 student folder. 5.3 Construct and analyze styles that
format backgrounds and borders
2. In the sidenote rule set, add a border width property with a value of 1px 5.3.c Border-width

3. Save your changes. Notes for the teacher

The completed file, 53c-main-complete,
4. Open the 53c-spotlight.html file in the MusicStore5 student folder. is in the Finished folder. If time permits,
have students experiment further with
5. Preview the webpage in a web browser. You should see a one-pixel the border width and border properties.
border around the sidenote text.

6. Return to the 53c-main.css file in the code editor.

7. In the sidenote rule set, set the border width property value to 0px

8. In the sidenote rule set, add a property/value combination that will set the left border width to 2px

9. In the sidenote rule set, add a property/value combination that will set the right border width to 2px

10. Save your changes.

11. Preview the 53c-spotlight webpage in a web browser. You should see a two-pixel dashed border on the left and
right sides of the sidenote text.

12. Return to the 53-main.css file in the code editor.

13. Comment out the border color, border style, border width, border left width, and border right width properties in
the sidenote rule set.

14. In the sidenote rule set, add a border property to set the width to 2px, the style to solid, and the color to navy

15. Save your changes.

16. Preview the 53c-spotlight webpage in a web browser. You should see a two-pixel solid navy border around the
sidenote text.

74 | Domain 5: Border Width HTML and CSS Project Workbook, First Edition
Backgrounds Project Details
Project file
There are two main types of backgrounds that can be used with webpages: 53d-positioningexample.html
colors and images. In a previous lesson we applied the color property to the kazoo-transparent.jpg
body tag, which creates a background color. In this project, we will use an image
Estimated completion time
as a background. To use an image, a pointer to a URL is needed. 5-10 minutes

An additional property that is often used with an image is the background Video reference
repeat property. A background image can be set to not repeat (no-repeat), to Domain 5
repeat across the top of a page (repeat-x), or to repeat vertically (repeat-y). The Topic: Backgrounds and Borders
default repeat is to tile the background image through the page. Subtopic: Backgrounds

Objectives covered
Purpose 5 Webpage Styling using CSS
5.3 Construct and analyze styles that
Upon completing this project, you will be able to apply an image to the
format backgrounds and borders
webpage background and have the image repeat itself on the page. 5.3.d Background properties

Steps for Completion Notes for the teacher

The complete file, 53d-
1. Open the 53d-positioningexample.html file in the MusicStore5 positioningexample-complete, is in the
student folder. Finished folder. If time permits, have the
students experiment further with the
2. At the bottom of the internal style sheet, add a class named backimage background-repeat properties for the
image used in the project.
3. In the new backimage class, add a background image property with its
value set to the URL of the kazoo-transparent.jpg file in the images
folder.

4. In the backimage class, add a background repeat property and set its value to have the background image repeat
vertically on the page.

5. Apply the backimage class to the body tag.

6. Save your changes.

7. Preview the webpage in a web browser. You should see a background picture of a kazoo running down the left
side of the page.

75 | Domain 5: Backgrounds HTML and CSS Project Workbook, First Edition

Divs and Colors Project Details
Project file
A div tag can be used to control the entire width of a webpage. The more fixed 53e-main.css
your layout is, the less fluid your webpage will be across different devices. 53e-spotlight.html
However, this may be necessary if your website is viewed on a lot of smaller
Estimated completion time
devices. 10-15 minutes

Colors have been covered throughout this course. Remember that hexadecimal Video reference
colors are the safest colors to use as they have the largest browser support. Domain 5
Hexadecimal colors closer to #000000 are darker and hexadecimal colors closer Topic: Backgrounds and Borders
to #FFFFFF are lighter. The first pair of values indicate the amount of red in the Subtopic: Divs; Working with
Colors
color, the second pair, green, and the third pair, blue. Colors with matching red,
green, and blue pairs, such as #333333 and #0F0F0F are shades of gray. Objectives covered
5 Webpage Styling using CSS
Purpose 5.3 Construct and analyze styles that
format backgrounds and borders
Upon completing this project, you will be able to use a div tag to set the width 5.3.d Background properties
of a webpage. You will also have a further understanding of how colors are used 5.3.e Colors
on a webpage.
Notes for the teacher
The completed files, 53e-main-
Steps for Completion complete and 53e-spotlight-complete,
are in the Finished folder. For the text
1. Open the 53e-main.css file in the MusicStore5 student folder.
color change for the sidenote rule set,
2. Before the a tag rule set, add an id-based rule set named pagewidth students can copy and paste the
background color property of the body
3. In the new pagewidth rule set, add a width property with the value set rule set. Emphasize to students that the
best code to write is code that is
to 500px
reused.
4. In the sidenote rule set, change the background color property value to
#333333

5. In the sidenote rule set, add a color property with the value set to the same color as the body background color.

6. Save your changes.

7. Open the 53e-spotlight.html file in the MusicStore5 student folder.

8. Wrap a div tag around the entire body of the webpage (not the body tag itself, but everything inside the body
tag).

9. Set the id of the div tag to pagewidth

10. Save your changes.

11. Preview the webpage in a web browser. The contents of the page should have a width of 500 pixels, which will
bring the side note closer to the body of the text. In addition, the background color should appear to mask
through the sidenote text as the text color is now the same as the background.

12. Close all your open files in both the browser and the code editor, saving changes where prompted.

76 | Domain 5: Divs and Colors HTML and CSS Project Workbook, First Edition
Units of Measure Project Details
Project file
There are several different units of measure that can be used for sizing. Many of 54a-main.css
these have already been seen in this course. Here is a recap of units of measure 54a-index.html
and their uses:
Estimated completion time
5 minutes
• em: A relative measurement equivalent to the font size being used. For
example, 3em = 3 x the size of the current font. Video reference
Domain 5
• ex: A measurement relative to the height of the letter x Topic: Responsive Layouts
Subtopic: Units of Measure
• px: Technically, a measurement that is 1/96” of an inch but can vary
based on screen Objectives covered
5 Webpage Styling using CSS
• pt: A measurement that is 1/72 of an inch 5.4 Construct and analyze styles that
create a simple responsive layout
• cm: A centimeter 5.4.a Units of measurement
(percentages, pixels, em, vw, vh)
• in: An inch
Notes for the teacher
• mm: A millimeter The completed file, 54a-main-complete,
is in the Finished folder. If time permits,
Purpose have the students further explore using
measurements within rule sets.
Upon completing this project, you will better understand how to set
measurements for one or more elements on a webpage.

Steps for Completion

1. Open the 54a-main.css file in the MusicStore5 student folder.

2. Below the rule set for the six headings, add a rule set for the h1 heading.

3. In the h1 heading rule set, add a font size property with the value set to 18pt

4. Save your changes.

5. Open the 54-index.html file in the MusicStore5 student folder.

6. Preview the webpage in a web browser. The heading, Welcome to the Music Store, should have a size of 18
points.

77 | Domain 5: Units of Measure HTML and CSS Project Workbook, First Edition
Viewport and Media Query Project Details
Project file
Settings 54b-spotlight.html
54b-main.css

Responsive web design allows websites to respond to different devices. The Estimated completion time
viewport property allows a website to work with devices of different sizes. The 15 minutes
viewport property is not designed to be used on webpages with large images. Video reference
The image scale will be independent of the webpage scale, and this will make Domain 5
the webpage not scale correctly for a webpage with large images. Topic: Responsive Layouts
Subtopic: Viewport; Media Query
A media query will check for the device screen width and will change the styles
of the webpage to fit the device screen width. A style sheet can have multiple Objectives covered
5 Webpage Styling using CSS
style layouts with the media query determining which of the styles to use.
5.4 Construct and analyze styles that
create a simple responsive layout
Purpose 5.4.b Viewport and media query
5.4.d Working with breakpoints
Upon completing this project, you will better understand when to use a
viewport or media query and be able to use them to create a responsive web Notes for the teacher
design. The completed files, 54b-spotlight-
complete and 54b-main-complete, are
Steps for Completion in the Finished folder. If time permits,
have the students experiment further
1. Open the 54b-spotlight.html file in the MusicStore5 student folder. with media query settings, with the idea
of making the website fit a small screen
2. In the head tag, add a meta tag that will use the viewport setting. (like a mobile device).

3. In the meta tag with the viewport name, set the content to have the
width adjust to the device width and set the initial scale to 1.0

4. Save your changes.

5. Preview the webpage in a web browser. As the scale was set to 1.0, the page should have a normal look and feel
to it.

6. Open the 54b-main.css file in the MusicStore5 student folder.

7. Add a media query for screens with a max-width of 500px

8. Within the new media query, add a body rule set.

9. Within the body rule set, add a background color property with a value of white

10. Save your changes.

11. Return to the 54b-spotlight.html webpage.

12. Preview the webpage in a web browser.

13. Narrow the browser width to a setting under 500 pixels. At the 500 pixel mark, the background should turn white.

78 | Domain 5: Viewport and Media Query Settings HTML and CSS Project Workbook, First Edition
Percentages and Pixels Project Details
Project file
It is important that measurements of elements on a webpage do not exceed the 54c-hours.html
screen width of a device. Percentages are used to create fluidity with the
Estimated completion time
element and device screen size. A fixed pixel measurement is needed at times to
15 minutes
control the measurements of an element, like a fixed image. Small tables usually
work well with a fluid layout using percentages. Video reference
Domain 5
Purpose Topic: Responsive Layouts
Subtopic: Percentages and Pixels
Upon completing this project, you will better understand when to use
Objectives covered
percentages or pixels for units of measurement on a webpage and how to set a
5 Webpage Styling using CSS
max width for these measurements. 5.4 Construct and analyze styles that
create a simple responsive layout
Steps for Completion 5.4.a Units of measurement
(percentages, pixels, em, vw, vh)
1. Open the 54c-hours.html file in the MusicStore5 student folder.
Notes for the teacher
2. Add an internal style sheet to the head tag, on the line below the link The completed file, 54c-hours-
tag. complete, is in the Finished folder. For
the exam, make sure students
3. In the internal style sheet, add a rule set for the table tag. understand when to use pixels and
when to use percentages for
4. Within the table rule set, add a width property with the value set to measurements.
400px

5. Save your changes.

6. Preview the webpage in a web browser.

7. Adjust the size of the web browser. Notice that the table width stays the same despite the size of the page.

8. Return to your code editor.

9. Change the value of the width property from 400px to 50%

10. Save your changes.

11. Preview the webpage in a browser.

12. Adjust the size of the web browser. The table width will adjust in size to 50% of the browser size.

79 | Domain 5: Percentages and Pixels HTML and CSS Project Workbook, First Edition
Frameworks, Templates, and Project Details
Project file
Max Width 54e-hours.html

Estimated completion time

A CSS framework is a template that is created or purchased and simplifies 10 minutes
building a website. When purchasing a template from the web, be aware of any Video reference
licensing requirements or restrictions. Domain 5
Topic: Responsive Layouts
Not related to frameworks, but in the final two topics for this course (along with Subtopic: Frameworks and
frameworks and templates) is the max width property in CSS. This property can Templates; Max-Width Property
prevent a design from looking awkward, especially for a large screen.
Objectives covered
Purpose 5 Webpage Styling using CSS
5.4 Construct and analyze styles that
Upon completing this project, you will better understand how to explore CSS create a simple responsive layout
frameworks and set a max-width for an element. 5.4.c Frameworks and templates
5.4.e Grids
Steps for Completion Notes for the teacher
The completed file, 54e-hours-
1. In a web browser, spend a few minutes looking at CSS frameworks, such complete, is in the Finished folder. If
as the ones at csszengarden.com time permits, have the students explore
additional CSS frameworks online, and,
2. When you are done viewing frameworks, open the 54e-hours.html file if possible, look at the code of some
in the MusicStore5 student folder. frameworks.

3. In the table rule set within the internal style sheet, add a max width
property with a value of 400px

4. Save your changes.

5. Preview the webpage in a web browser.

6. Resize the browser back and forth. The table width should never exceed 400 pixels.

7. Close all open files in both your browser and your code editor, saving changes where prompted.

80 | Domain 5: Frameworks, Templates, and Max Width HTML and CSS Project Workbook, First Edition
Grids Project Details
Project file
When it comes to designing modern, responsive web pages, one of the most grids.html
powerful tools CSS has to offer is CSS Grids. In the past, developers relied
Estimated completion time
heavily on tables or floats for positioning, which were not the easiest tools to
5-10 minutes
use for the job. CSS Grids allows developers to take far greater control over how
their content displays across devices. The grid system is a series of columns and Video reference
rows organized within a parent container, or wrapper. Domain 5
Topic: Responsive Layouts
Purpose Subtopic: Grids

Objectives covered
Upon completing this project, you will better understand how to organize
5 Webpage Styling using CSS
webpage content using grids. 5.4 Construct and analyze styles that
create a simple responsive layout
Steps for Completion 5.4.e Grids

1. Open the grids.html file in the MusicStore5 student folder. Notes for the teacher
The completed file, 52e-main-complete,
2. View the webpage in a browser. is in the Finished folder.

3. In the HTML file, change the grid-template-columns property to 33%

33% 33%

4. View the webpage in a browser and refresh the page.

5. Save your changes.

81 | Domain 5: Grids HTML and CSS Project Workbook, First Edition

Domain 6

82 | Domain 6: Grids HTML and CSS Project Workbook, First Edition

Fill-in-the-Blanks
Instructions: While watching Domain 6, fill in the missing words according to the information presented by the
instructor. [References are found in the brackets.]

Construct HTML and CSS

1. Code that does not need to be typed from scratch can help prevent in code. [Reusing
Rules and Rule Sets]

2. CSS comments start with a and end with a . [CSS Comments]

3. In CSS, the more the style, the more likely you will have problems when testing across different
browsers. [Multiple Browser Tests]

4. Always take control of the fonts displayed on your website to prevent the users’ fonts from
being used. [Web Safe Fonts]

5. As grow in size and complexity, it becomes increasingly more important to test for cross-
platform usability. [Cross-Platform Usability]

6. A clear separation between structure and styling makes code easier to edit and . [Separation of
Structure (HTML) and Style (CSS)]

Accessibility Principles and Evaluate Content Accessibility

7. The Guidelines (WCAG) help define a baseline for accessible and
adaptable web design. [Text Alternatives]

8. Low color contrast can make text and images difficult to see while high contrast can cause
and readability issues. [Color Contrast and Usage]

9. Avoid using a font that is too busy as it can be difficult to read at regular and font-sizes.
[Legibility of Typography]

10. Proper use of the attribute and a logical tab order scheme is necessary for users who rely on
navigation through that means. [Tab Order]

11. With the feature, websites will not typically have text resizing issues because the
browser is zooming in on the browser window as a whole. [Text Resizing]

12. Text Hierarchy refers to the use of tags to help organize webpages in the most logical way. [Text
Hierarchy]

Structural Integrity of HTML and CSS Markup

13. A simple syntax error in will cause the remainder of the file to fail. [Syntax Errors]

14. One of the best ways to guard against tag mismatch is by using proper spacing and in your
HTML. [Tag Mismatch]

15. CSS Specificity is a that dictates the precedence of styles at a more granular level than just
stylesheet precedence. [Cascading Issues]

83 | Domain 6: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition

Reusing Rules and Rule Sets Project Details
Project file
Code that can be reused will save time and limit errors. To reuse code is simply 23a-main.css
just a matter of copying and pasting the code where it is needed. Of course, you 23a-spotlight.html
will want to make sure that if you intend to make slight adjustments to code
Estimated completion time
that you are reusing you do so in the correct spots. 5 minutes

Purpose Video reference

Domain 6
Upon completing this project, you will be able to reuse code from one CSS rule Topic: Construct HTML and CSS
set to another. Subtopic: Reusing Rules and Rule
Sets
Steps for Completion
Objectives covered
1. Open the 23a-main.css file in the Domain 6 Student folder. 6 Accessibility, Readability, and Testing
6.1 Construct well-formed HTML and
2. Create a rule set for the figcaption tag. CSS markup that conforms to
industry best practices
3. Fill the rule set for the figcaption tag with the color property and value 6.1.a Reusing rules and rule sets
from the paragraph tag and the font weight and background color from
Notes for the teacher
the sale class. The completed file, 23a-main-
completed, is in the Finished folder. If
4. Save your changes.
time permits, have the students reuse
another property/value combination
5. Open the 23a-spotlight.html file.
from a rule set inside of the figcaption
6. Preview the webpage in a browser. The caption below the image should rule set.
have a bold, navy font and have an Aqua line highlight.

84 | Domain 6: Reusing Rules and Rule Sets HTML and CSS Project Workbook, First Edition
CSS Comments Project Details
Project file
Comments are used to explain code and are best practice when multiple people 23b-main.css
are collaborating on a CSS style sheet. Code or text within a comment will not 23b-spotlight.html
show on a webpage. Whereas HTML comments start with a <!-- and end with a
Estimated completion time
-->, CSS comments start with a /* and end with a */. 5 minutes

Comments can also be used over existing code to force a style sheet to ignore Video reference
that code. This can be useful when testing rule sets and property/value Domain 6
combinations on webpages. Topic: Construct HTML and CSS
Subtopic: CSS Comments
Purpose
Objectives covered
Upon completing this project, you will be able to add comments to a CSS style 6 Accessibility, Readability, and Testing
6.1 Construct well-formed HTML and
sheet.
CSS markup that conforms to
industry best practices
Steps for Completion 6.1.b Commenting

1. Open the 23b-main.css file in the Domain 6 Student folder. Notes for the teacher
The completed file, 23b-main-
2. Add a comment above the figcaption that says, The background color completed, is in the Finished folder. If
extends across the page, so, we have commented it out for now time permits, have the students
comment out additional property/value
3. Within the figcaption rule set, comment the background color property/ pairs and see what effect that has on
value combination out so that it will be ignored in the code. the 23b-spotlight webpage.

4. Save your changes.

5. Open the 23b-spotlight.html file.

6. Preview the webpage in a browser. There should be no Aqua line highlighting on the caption below the image.

85 | Domain 6: CSS Comments HTML and CSS Project Workbook, First Edition
Multiple Browser Tests and Project Details
Project file
Web Safe Fonts 23c-spotlight.html
23c-main.css

A webpage style should work on multiple browsers and media types. It is Estimated completion time
important to use simple styles in CSS so that the styles used are viewable in 10 minutes
different browsers. It is good practice to test your webpages in multiple Video reference
browsers before publishing the webpages, a concept known as cross-platform Domain 6
usability. The more complex the styles, the more likely it is the styles will not Topic: Construct HTML and CSS
work fully. Subtopic: Multiple Browser Tests;
Web Safe Fonts; Cross-Platform
When working with the font-family property in style sheets, you will want to use Usability
multiple fonts as not every user has every font you may want to display. You will
Objectives covered
also want to indicate the font family being used so that a user’s default font for 6 Accessibility, Readability, and Testing
a specific family can be used if needed. This will at least ensure that the font 6.1 Construct well-formed HTML and
displayed is like the font you intended for that style. This is the concept of using CSS markup that conforms to
Web Safe fonts, fonts that will properly display in a web browser. industry best practices
6.1.c Web-safe fonts
Purpose 6.1.d Cross-platform usability

Notes for the teacher

Upon completing this project, you will be able to test webpage styles in multiple
Answers will vary on the browser test
browsers. You will also know how to set up a CSS rule set to use Web Safe fonts. results. The completed file, 23c-main.
completed, is in the Finished folder.
Steps for Completion Help students understand the
importance of cross-platform usability.
1. Open the 23c-spotlight.html file in the Domain 6 Student folder.

2. Test the webpage in as many web browsers as you have available.

3. Were there any browsers that the styles in the webpage varied?

a. .

4. Open the 23c-main.css file.

5. Add a font-family setting to the paragraph tag to set the font to Arial, then Segoe UI, and then the default sans-
serif font.

6. Save your changes.

7. Preview the 23c-spotlight.html page in a web browser. The paragraphs should display as Arial, Segoe UI, or a
similar sans-serif font.

8. Save and close all open files, both in your web browser and in your code editor.

86 | Domain 6: Multiple Browser Tests and Web Safe Fonts HTML and CSS Project Workbook, First Edition
Separation of Structure and Project Details
Project file
Style N/A

Estimated completion time

Another industry best practice is the separation of structure and style, 5 minutes
specifically the separation between HTML and CSS code. A clear separation Video reference
between structure and styling makes the code easier to edit and debug. Domain 6
Developers create that separation with the use of their styling. Topic: Construct HTML and CSS
Subtopic: Separation of Structure
Styling a webpage in the most efficient way can be a difficult task. Users should (HTML) and Style (CSS)
have a plan, considering exactly where they are adding each style and what
effect that will have on the separation of structure and style. Objectives covered
6 Accessibility, Readability, and Testing
6.1 Construct well-formed HTML and
Purpose
CSS markup that conforms to
Upon completing this project, you will better understand how to separate industry best practices
6.1.e Separation of structure
structure and style.
(HTML) and style (CSS)

Steps for Completion Notes for the teacher

If time permits, review the differences
1. Use as much as possible to keep between external and internal style
consistency within a website. sheets.

2. While styling an individual page, use

an .

3. should be used very sparingly. This method of styling is difficult

to reuse across elements and webpages.

87 | Domain 6: Separation of Structure and Style HTML and CSS Project Workbook, First Edition
Text Alternatives Project Details
Project file
Developers should design webpages with accessibility in mind. There are several N/A
factors to consider, and many can be found in the Web Content Accessibility
Estimated completion time
Guidelines (WCAG). These guidelines help define a baseline for accessible and
5 minutes
adaptable web design.
Video reference
Text alternatives are assigned as alternate text, an HTML element attribute. Domain 6
Developers should avoid inputting alt text that is too long or overly descriptive, Topic: Accessibility Principles and
as well as alt text that is too short and does not give a user enough context. Evaluate Content Accessibility
Subtopic: Text Alternatives
Purpose
Objectives covered
Upon completing this project, you will better understand text alternatives within 6 Accessibility, Readability, and Testing
6.2 Apply accessibility principles and
the scope of accessibility.
evaluate content accessibility
6.2.a Text alternatives
Steps for Completion
Notes for the teacher
1. Describe three main reasons for using the alt attribute. Encourage students to explore the
WCAG and gain a better understanding
a. of why this document is important as a
web developer.
.

b.

c.

88 | Domain 6: Text Alternatives HTML and CSS Project Workbook, First Edition
Color Contrast and Typography Project Details
Project file
When designing webpages, it is important to be aware of color usage and N/A
typography. Not only do these factors affect the aesthetics of a webpage, but
Estimated completion time
the accessibility as well.
5-10 minutes
Keep in mind that users access webpages with differing screen sizes, screen Video reference
resolutions, room lighting, and eyesight. For these reasons, it is important to Domain 6
have an established baseline for color contrast best practices. The Web Content Topic: Accessibility Principles and
Accessibility Guidelines (WCAG) lay out very specific criteria in sections 1.4.3 and Evaluate Content Accessibility
1.4.6 regarding color contrast. Subtopic: Color Contrast and
Usage; Legibility of Typography
When it comes to typography, there are many different fonts to use, ranging
Objectives covered
from Courier New/Terminal to Comic-Sans MS, and everything in-between. 6 Accessibility, Readability, and Testing
Some CSS properties to consider when styling text include default font size, font 6.2 Apply accessibility principles and
type, font-weight bold, font-style italic, letter-spacing and word-spacing, and evaluate content accessibility
line-height. 6.2.b Color contrast and usage
6.2.c Legibility of typography
Purpose
Notes for the teacher
Upon completing this project, you will better understand the importance of Remind students that the WCAG has
documentation that guides color
color contrast and font usage on webpages.
contrast and spacing best practices.

Steps for Completion

1. What negative effects could occur if color contrast is too high?

a.
.

2. What negative effects could occur if color contrast is too low?

a.
.

3. Avoid using a font that is too busy as it can be difficult to read at regular and reduced font .

4. To make websites and accessible, it is always better to rely on fewer fonts, with each
font having a specific purpose in the design.

5. Always rely on the property, and multiple values, to ensure that there are backup fonts
available to the browser.

89 | Domain 6: Color Contrast and Typography HTML and CSS Project Workbook, First Edition
Tab Order and Text Resizing Project Details
Project file
Developers can use the tabindex attribute to input tags in their HTML code. resizing.html
When creating a form, the tab order naturally flows from one input field to the
Estimated completion time
next. However, with other page styles such as landing pages, shopping cart
5 minutes
pages, or just longer pages in general, it is important to pay attention to the
tabindex attribute throughout the code, ensuring that users who rely on the Tab Video reference
Index to navigate the form can do so in a logical and simple way. Domain 6
Topic: Accessibility Principles and
Generally, users resize text in their browsers using one of two methods. The first, Evaluate Content Accessibility
is by adjusting the zoom setting in the browser and the second is by changing Subtopic: Tab Order; Text Resizing
the appearance settings. With the zoom feature, websites do not usually have Objectives covered
text resizing issues because the browser is zooming in on the browser window, 6 Accessibility, Readability, and Testing
not resizing elements in the HTML. The relationship between the elements 6.2 Apply accessibility principles and
should stay consistent. evaluate content accessibility
6.2.d Tab order
When creating a webpage, one should avoid horizontal scrolling. A webpage 6.2.e Text resizing
that tends to scroll vertically will lend itself better to responsive design and
Notes for the teacher
appearance on mobile devices. Discuss the reasons why, after step 6,
some text overflows the text box
Purpose elements while other text does not.

Upon completing this project, you will better understand tab order and you will
be able to resize text on a webpage.

Steps for Completion

1. Applying proper tab order will mean different things on different webpages, but the proper use of the tabindex
attribute and a logical tab order scheme is necessary for users who rely on through that
means.

2. Open the resizing.html file in the Domain 6 Student folder.

3. View the webpage in a browser.

4. Zoom into the page using the Zoom option in the browser’s settings. Enlarge to any preferred size.

5. Reset the size back to 100%.

6. Resize the webpage text to the largest font option using the Appearance options within the browser’s settings.

90 | Domain 6: Tab Order and Text Resizing HTML and CSS Project Workbook, First Edition
Text Hierarchy Project Details
Project file
Text hierarchy refers to the use of HTML tags, semantic or not, to help organize hierachy.html
webpages in the most logical way. One way to organize elements is with the
Estimated completion time
heading tag. When numbered, heading tags can be used to structure sections
5 minutes
on a webpage. Section tags and other semantic tags promote webpage
organization as well. Proper use of all organizational HTML tags will improve a Video reference
webpage's accessibility. Domain 6
Topic: Accessibility Principles and
Purpose Evaluate Content Accessibility
Subtopic: Text Hierarchy
Upon completing this project, you will better understand how text on a
Objectives covered
webpage can be structured hierarchically with heading tags. 6 Accessibility, Readability, and Testing
6.2 Apply accessibility principles and
Steps for Completion evaluate content accessibility
6.2.f Text hierarchy
1. Open the hierachy.html file in the Domain 6 Student folder.
Notes for the teacher
2. Which tag is used to distinguish the main title, LearnKey OnlineExpert? Assist students in understanding the
Why? important of text hierarchy in relation to
a website's accessibility.
a.

3. If you were to list another course adjacent to HTML & CSS, which tag would you use? Why?

a.
.

4. How many times is the h3 tag listed?

a. .

91 | Domain 6: Text Hierarchy HTML and CSS Project Workbook, First Edition
Syntax Errors Project Details
Project file
Even the most experienced programmers encounter syntax errors. No matter index.html
one’s experience level, syntax errors are part of anyone’s programming main.css
endeavors. Syntax errors can include missing punctuation, incorrect letter-
Estimated completion time
casing, invalid opening and closing tags or brackets, or incorrect spelling. 5-10 minutes

Syntax errors in HTML are very forgiving because of how browsers parse the Video reference
code. Browsers are prepared to run despite syntax errors. When you run HTML Domain 6
with errors, the page will run, though it might not appear as intended. A simple Topic: Structural Integrity of HTML
syntax error in CSS will cause the remainder of a file to fail. This is more and CSS Markup
Subtopic: Syntax Errors
consistent with how other programming languages react to syntax errors, so it is
vitally important to be clear and accurate with your CSS. Objectives covered
6 Accessibility, Readability, and Testing
Purpose 6.3 Evaluate the structural integrity of
HTML and CSS markup
Upon completing this project, you will better understand syntax errors in CSS 6.3.a Syntax errors
and HTML.
Notes for the teacher
Steps for Completion Help students recognize the typical
syntax errors they may encounter in
1. Open the main.css file in the Domain 6 Student folder. HTML and CSS code.

2. On line 3, set the background color property to background-colors: by

adding an s

a. A squiggly line should appear, indicating that the property is not a known CSS property name.

3. Open the index.html file.

4. View the page in a browser.

5. Navigate to the main.css file.

6. On line 1, delete the opening bracket.

7. Save the changes.

8. View the webpage in a browser and refresh the page.

a. The page should have lost its background color and should look significantly different from the original.

92 | Domain 6: Syntax Errors HTML and CSS Project Workbook, First Edition
Tag Mismatch Project Details
Project file
Once HTML becomes more complex, developers may encounter tag mismatch. hours-complete.html
Tag mismatch describes a situation where opening and closing tags do not hours-mismatch.html
match up properly. It can also refer to a tag that is not opened and closed
Estimated completion time
within another single tag. This can be difficult to troubleshoot because the 5 minutes
browser will sometimes just work around the error and render the webpage.
Video reference
Purpose Domain 6
Topic: Structural Integrity of HTML
Upon completing this project, you will be able to identify tag mismatch and and CSS Markup
identify ways to avoid it. Subtopic: Tag Mismatch

Objectives covered
Steps for Completion 6 Accessibility, Readability, and Testing
6.3 Evaluate the structural integrity of
1. Open the hours-complete.html file in the Domain 6 Student folder.
HTML and CSS markup
2. Scan the code for matching opening and closing tags. 6.3.b Tag mismatch

Notes for the teacher

3. Are there any mismatching tags in the file?
Remind students that the code in both
a. . files will be read the same way by the
computer, but the hours-mismatch file
4. Open the hours-mismatch.html file. is lacking spacing and indentation,
making it difficult for humans to read.
5. Scan the code for matching opening and closing tags.

6. One of the best ways to guard against tag mismatch is by using

proper and in your HTML code.

93 | Domain 6: Tag Mismatch HTML and CSS Project Workbook, First Edition
Cascading Issues Project Details
Project file
When there are multiple CSS rules for the same element, one can experience N/A
cascading issues. It is not uncommon to have the same property set in two
Estimated completion time
different places for the same element. While sometimes it can be convenient to
5 minutes
layer CSS rule sets in this way, it will eventually cause issues. The simplest way to
deal with these issues is to use the Developer Tools along with the knowledge Video reference
of stylesheet precedence. Domain 6
Topic: Structural Integrity of HTML
Purpose and CSS Markup
Subtopic: Cascading Issues
Upon completing this project, you will better understand cascading issues and
Objectives covered
how to avoid them. 6 Accessibility, Readability, and Testing
6.3 Evaluate the structural integrity of
Steps for Completion HTML and CSS markup
6.3.c Cascading issues
1. CSS specificity is a hierarchy that dictates the precedence of styles at an
even more granular level than precedence. Notes for the teacher
If time permits, have students use the
2. CSS has an important rule that can be added after a CSS property/value important keyword in an example of
declaration, like so: CSS code.

textbox1 { background-color: red !important; }

a. This keyword will cause the style to any styles declared before it.

3. The important keyword should be used with caution. What will happen if this keyword is overused?

a.
.

94 | Domain 6: Cascading Issues HTML and CSS Project Workbook, First Edition
Appendix

95 | Appendix: Cascading Issues HTML and CSS Project Workbook, First Edition
Glossary
Term Definition

A Tag An anchor (a) tag is used to implement a hyperlink for a user. This means that the user is anchoring
himself to another page.
Absolute Link A link which contains the complete address to another link.
Absolute A type of positioning in CSS which places items in an exact location on a webpage.
Positioning
Action Attribute An attribute used within a form tag to navigate users to the next page or script once the form is
submitted.
Article Tag A tag which is used to mark off self-containing text that can make up a story, blog entry, or an article.
Aside Tag A tag which is often used to mark off a side story.
Audio Tag A tag which can have multiple sources and should have the controls attribute added to allow a user to
control when the audio plays.
Background The color or image used as the backdrop of an entire webpage.
Body Tag A tag which contains everything that displays on the webpage. Most of the tags used in CSS are
placed inside of a body tag.
Border-Color A CSS property which is used to alter to color of a border either by name or using hexadecimal colors.
Property
Border-Style An element used in CSS to control the overall look of a border.
Property
Border-Width A property which is used in CSS to control the width of a border.
Property
Br Tag A tag which is used to create a line break.
Button Tag A tag which can be used on a form to add a button option.
Caption Tag A tag which is used on tables to allow a table description to be placed in close proximity to a table.
Comment A tool used to put placeholders in for text that will need to be added later to a webpage. It can also
be used to explain parts of a webpage that do not display in a browser but will appear in a text
editor. It will help any collaborative efforts to build a website.
CSS Cascading Style Sheets (CSS) is a type of style sheet language which is used in web design to describe
the presentation of a document that is written in a markup language, such as HTML5. It is the code
used to format the text in a webpage.
CSS Framework A template which is created by the web designer, downloaded for free, or purchased from a third-
party which has built in CSS the designer can use to ease in the development process of a
Datalist Tag website.
A tag which is used to create a pre-populated list within a form.
Delete A common submission method which requests to remove information from a database.
Details Tag The summary tag surrounds the line explaining what is in the details section in a details tag.
Div Tag A tag which is used in CSS to control alignment, backgrounds, margins, padding, and text flow for
webpage elements. It can also be used to control the width of an entire page.
Em A relative measurement which is equivalent to the font size being used. For example, 3em = 3 x the
size ofthe current font.
Ex A measurement type which is relative to the height of the letter x.
Fieldset Tag A tag which creates fieldsets that allow you to group fields on forms to make them easier to read.
Figure Tag A tag which is used to mark up an image in a webpage.
Float Element An element which is used to move one item next to another on a webpage.
Font-Family A property which is used in CSS to ensure there are backup fonts and web safe fonts available in the
Property event auser does not have access to the web designers designated fonts.

96 | Appendix: Glossary HTML and CSS Project Workbook, First Edition

 Term Definition

Font-Style A font property which is used in CSS to apply style to fonts, such as italics.
Property
Font-Weight A font property which controls the bold level of text on a webpage.
Property
Get A common submission method which requests to retrieve something, such as information from
another webpage, an image, or a search engine.
Head Tag A tag type which contains information that describes the webpage but does not show on the
webpage.
Heading Tags HTML has six levels of headings, with tags of h1 through h6. H1 is the largest heading while h6 is the
smallest.
Hexadecimal A color format which uses a pound symbol and six hexadecimal numbers, that is, six numbers 0
Colors through 9 or A through F. 0 represents black, while F represents white. The six colors are in three
pairs, which signify the amounts of red, green, and blue used in the color.
Hr Tag A horizontal rule (hr) tag is a tag that creates a paragraph-level break within text on a web document.
Html Tag A tag which contains data that makes up a webpage.
HTML5 Hypertext Markup Language 5 (HTML5) is a type of markup language used to build and present
content on the Internet.
iFrame A content-holding frame inside of a webpage. It can be altered using programming.
Img Tag An image (img) tag defines an image in an HTML document, which requires the src and alt attributes.
JavaScript The dynamic aspect of webpage building where scripts are used to manipulate objects based on an
event.
Li Tag A list item (li) tag goes around every item listed in either an ordered or unordered list.
Link Tag A tag which allows web designers to link to external files, such as style sheets and scripts.
Margins The space between the top, bottom, or side of a webpage’s content and its edge.
Max-Width A property which is used to control layouts on webpages using CSS. It can ensure that the total
Property width of a webpage does not exceed the screen size of the user.
Media Query A fairly granular method used to control how a webpage displays across different types of devices. It
checks for screen width and changes styles according to that screen width.
Meta Tag A type of tag used to embed metadata in CSS.
Metadata A tool used in CSS to describe items and elements and their usage.
Method An attribute which is used within a form tag to tell the form what type of action to take once it is
Attribute submitted.
MP3 A compressed sound file which allows for digital storage and transmission.
MP4 A digital multimedia container often used to store video and audio data.
MPEG Moving Picture Experts Group (MPEG), also known as the H.264 format, is the most common format
for output from video editing software.
Nav Tag The nav tag is used to help spot, in HTML code, the area on the page containing navigation links on
a webpage.
Noscript Tag A tag which notifies the user if their browser does not support the programming language that is
currently in use.
Ogg An open container format which is designed to provide for efficient streaming of digital multimedia. It
is a royalty-free video format.
Ol Tag An ordered list (ol) tag is a numbered list.
Output Tag A tag which allows you to take what is in a form and run an instant calculation depending upon what
is being input in a form.
Overflow A property which is used to ensure that text will fit on the screen regardless of the device.
Property
P Tag A tag used to create paragraphs.

97 | Appendix: Glossary HTML and CSS Project Workbook, First Edition

 Term Definition

Percentage A type of measurement used within CSS. It can be applied to elements on a webpage where it will
Measurement allow the element to fluctuate its size based on the screen size the user has.
Pixel A static form of measurement in CSS. It allows the web designer to assign a specific measurement to a
Measurement webpage element.
Post A common submission method which requests to take submitted data and modify data on the server
as a result of user input.
Pt A measurement which is 1/72 of an inch.
Put A common submission method which requests to take data submitted and insert it into a database.
Px A measurement which is normally 1/96 of an inch but can vary based on screen sizes.
Relative Link Hyperlinks used to link pages within a website.
Relative A type of positioning in CSS which places items relative to where they normally are in relation to how
Positioning things normally flow on a webpage.
Responsive Web A concept which refers to designing webpages which can be viewed on different devices, such as
Design desktops,laptops, tablets, and smartphones.
SVG Scalable Vector Graphics (SVG) is a vector image format for two-dimensional graphics with the ability
to support interactivity and animation.
Script Tag A tag which is used to hold programming scripts for programming languages.
Section Tag A tag which marks off sections on a webpage.
Select Tag A form-based tag which creates a drop-down list full of options.
Semantic Tag A tag which is used to help organize a webpage and can be used to determine how a webpage
should berendered.
Span Tag A tag which is used to format a word or phrase.
Summary Tag A semantic tag which can hide the text inside of a details tag. The summary tag surrounds the line
explaining what is in the details section.
Tag A command within an HTML document that specifies the formatting of the document or a portion of
that document.
Text-Align An alignment property which is used to align text on a webpage.
Property
Textarea Tag A tag used to create text boxes within a form so that users can type responses.
Text-Decoration An element which is used in CSS to apply underlines to text on a webpage.
Property
Text-Indent A text property which is used in CSS to indent the first line of text in a multi-line paragraph.
Property
Track Tag A tag which works in conjunction with vtt files as part of the Web Video Text Tracks (WebVTT) standard.
Ul Tag An unordered list (ul) tag adds a bulleted list with no specific hierarchy to a webpage.
Video Tag A tag which adds a video to a webpage.
Visibility A property which is used to make an object invisible using CSS.
Property
WebM A video file format which works well on low-power devices, such as netbooks and tablets.

98 | Appendix: Glossary HTML and CSS Project Workbook, First Edition

Objectives
HTML and CSS Objectives
Domain 1 Domain 2 Domain 3
HTML Fundamentals CSS Fundamentals Document Structure using HTML
1.1 Construct markup that uses 2.1 Analyze and implement inline styles, 3.1 Construct and analyze markup to
metadata elements internal (embedded) style sheets, and structure content and organize data
1.1.a Script external style sheets 3.1.a Table tags (table, tr, th, td)
1.1.b Noscript 2.1.a When to use inline styles, internal 3.1.b H1-h6
1.1.c Style (embedded) style sheets, or external style 3.1.c P
1.1.d Link sheets 3.1.d Br
1.1.e Meta tags, including encoding, 2.1.b Precedence when using a 3.1.e Hr
keywords, viewport, description, and combination of inline styles and style 3.1.f Div
translate sheets 3.1.g Span
3.1.h Ul
3.1.i Ol
3.1.j Li
1.2 Construct well-formed page 2.2 Construct and analyze rule sets 3.2 Construct and analyze markup that
markup 2.2.a Valid syntax for the CSS rule set uses HTML5 semantic elements
1.2.a DOCTYPE declaration 2.2.b Selectors, including class, id, 3.2.a Semantic tags (header, nav,
1.2.b Html elements, and pseudo-class section, article, aside, footer, details,
1.2.c Head summary, figure, caption)
1.2.d Body
1.2.e Proper syntax
1.2.f Closing tags and commonly
used symbols
3.3 Construct and analyze markup that
implements navigation
3.3.a Target
3.3.b Anchor (a href)
3.3.c Bookmark
3.3.d Relative vs. absolute links
3.3.e Navigating simple folder
hierarchies
3.3.f Map
3.3.g Area
3.4 Construct and analyze markup that
uses form elements
3.4.a Form attributes
3.4.b Action
3.4.c Method
3.4.d Submission methods
3.4.e Input types and restrictions
3.4.f Select
3.4.g Textarea
3.4.h Button
3.4.i Option
3.4.j Label

99 | Appendix: Objectives HTML and CSS Project Workbook, First Edition

HTML and CSS Objectives
Domain 4 Domain 6
Multimedia Presentation Domain 5 Accessibility, Readability, and
using HTML Webpage Styling using CSS Testing
4.1 Construct and analyze 5.1 Construct and analyze styles that position 6.1 Construct well-formed HTML and CSS
markup that displays images content markup that conforms to industry best
4.1.a Img and picture elements 5.1.a Positioning, including float, relative, practices
and their attributes absolute, static, fixed, max-width, overflow, 6.1.a Reusing rules and rule sets
height, width, align 6.1.b Commenting
5.1.b Display 6.1.c Web-safe fonts
5.1.c Inline vs. block 6.1.d Cross-platform usability
5.1.d Visibility 6.1.e Separation of structure (HTML) and
5.1.e Box model, margins and padding style (CSS)
4.2 Construct and analyze 5.2 Construct and analyze styles that format
markup that plays video and text
audio 5.2.a Font-family
4.2.a Video 5.2.b Color
4.2.b Audio 5.2.c Font-style
4.2.c Track 5.2.d Font-size
4.2.d Source 5.2.e Font-weight 6.2 Apply accessibility principles and
4.2.e Iframe 5.2.f Font-variant evaluate content accessibility
5.2.g Link colors 6.2.a Text alternatives
5.2.h Text formatting, text alignment, text 6.2.b Color contrast and usage
decoration, indentation 6.2.c Legibility of typography
5.2.i Line-height 6.2.d Tab order
5.2.j Word-wrap 6.2.e Text resizing
5.2.k Letter-spacing 6.2.f Text hierarchy
5.3 Construct and analyze styles that format
backgrounds and borders
5.3.a Border-color 6.3 Evaluate the structural integrity of
5.3.b Border-style HTML and CSS markup
5.3.c Border-width 6.3.a Syntax errors
5.3.d Background properties 6.3.b Tag mismatch
5.3.e Colors 6.3.c Cascading issues
5.4 Construct and analyze styles that create a
simple responsive layout
5.4.a Units of measurement (percentages,
pixels, em, vw, vh)
5.4.b Viewport and media query
5.4.c Frameworks and templates
5.4.d Working with breakpoints
5.4.e Grids

100 | Appendix: Objectives HTML and CSS Project Workbook, First Edition
HTML and CSS Lesson Plan
Approximately 32 hours of videos, labs, and projects.

Domain 1 Lesson Plan

Domain 1 - HTML Fundamentals [approximately 2.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Pre-Assessment HTML Fundamentals: Pre-
Assessment time - Assessment
00:10:00
Lesson 1 Markup with Metadata 1.1.a Script Tags Script and Noscript Tags – pg. 8
Video time - Part 1 1.1.b Noscript 11a-scripts.html
00:06:17 How to Study for This
Exercise Lab time - Exam
00:04:00 Script Tag
Workbook time - Noscript Tag
00:15:00
Lesson 2 Markup with Metadata 1.1.c Style Using Meta Link and Meta Tags – pg. 9
Video time - Part 2 1.1.d Link Tags 11c-scripts.html
00:05:49 Link Tag 1.1.e Meta tags, including
Exercise Lab time - Meta Tags encoding, keywords, viewport,
00:04:00 description, and translate
Workbook time -
00:15:00
Lesson 3 Well-Formed Markup 1.2.a DOCTYPE declaration Body Tag HTML Fundamentals – pg. 10
Video time - DOCTYPE Declaration and 1.2.b Html Usage N/A
00:11:05 Html Tag 1.2.c Head
Exercise Lab time - Head Tag 1.2.d Body
00:04:00 Body Tag 1.2.e Proper syntax
Workbook time - Closing Tags 1.2.f Closing tags and
00:20:00 Entities commonly used symbols
Comments
Domain 1 Exam Tips
Post-Assessment HTML Fundamentals:
Assessment time - Post-Assessment
00:40:00

101 | HTML and CSS Lesson Plan: Domain 1 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 2 Lesson Plan
Domain 2 - CSS Fundamentals [approximately 2.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Pre-Assessment CSS Fundamentals: Pre-
Assessment time - Assessment
00:10:00
Lesson 1 Define Style Sheets 2.1.a When to use inline styles, N/A Creating Style Sheets – pg. 13
Video time - Inline, Internal, and internal (embedded) style sheets, 21a-index.html
00:05:48 External Styles or external style sheets Style Sheet Precedence – pg. 14
Exercise Lab time - Style Sheet Precedence 2.1.b Precedence when using a 21b-main.css; 21b-books.html;
00:00:00 combination of inline styles and 21b-index.html
Workbook time - style sheets
00:30:00
Lesson 2 CSS Rule Sets 2.2.a Valid syntax for the CSS rule Class Selector Valid Syntax for Rule Sets – pg. 15
Video time - Valid Syntax set Pseudo Class 22a-main.css; 22a-index.html
00:09:00 Apply Classes 2.2.b Selectors, including class, id, Apply Classes – pg. 16
Exercise Lab time - Apply IDs elements, and pseudo-class 22b-main.css; 22b-books.html
00:08:00 Apply Pseudo Classes Apply IDs – pg. 17
Workbook time - Domain 2 Exam Tips 22b2-main.css; 22b2-
00:40:00 spotlight.html
Apply Pseudo Classes – pg. 18
22b3-main.css; 22b3-books.html
Post-Assessment CSS Fundamentals:
Assessment time - Post-Assessment
00:30:00

102 | HTML and CSS Lesson Plan: Domain 2 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 3 Lesson Plan
Domain 3 - Document Structure using HTML [approximately 10.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Pre-Assessment Document
Assessment time - Structure using
01:00:00 HTML: Pre-
Assessment
Lesson 1 Structure Content 3.1.a Table tags (table, tr, th, Table Rows HTML Tables – pg. 22
Video time - Through Markup td) Table Attributes 31a-hours.html; 31a-hours2.html
00:08:53 Part 1 3.1.b H1-h6 HTML Headings, Paragraphs, and Line
Exercise Lab time - Table Tags 3.1.c P Breaks – pg. 23
00:08:00 Table Attributes 3.1.d Br 31b-headings.html; 31b-index.html;
Workbook time - Heading Tags webpagetext.txt
00:30:00 P Tag
Br Tag
Lesson 2 Structure Content 3.1.e Hr Using the Div Tag Hr, Div, and Span Tags – pg. 24
Video time - Through Markup 3.1.f Div 31e-index.html
00:09:36 Part 2 3.1.g Span HTML List Tags – pg. 25
Exercise Lab time - Hr Tag 3.1.h Ul 31h-Index.html
00:04:00 Div Tag 3.1.i Ol
Workbook time - Span Tag 3.1.j Li
00:35:00 Ul and Li Tags
Ol and Li Tags
Lesson 3 Semantic HTML 3.2.a Semantic tags (header, Header Tag Semantic Tags – pg. 26
Video time - Elements nav, section, article, aside, Determining 32a-spotlight.html
00:10:03 Header Tag footer, details, summary, Asides Details and Summary Tags – pg. 27
Exercise Lab time - Nav Tag figure, caption) Determining 32g-books.html
00:12:00 Section Tag Footers Figure and Caption Tags – pg. 28
Workbook time - Article and Aside 32i-spotlight.html; 32j-hours2.html
00:50:00 Tags
Footer Tag
Details and
Summary Tags
Figure Tag
Caption Tag
Lesson 4 Navigation 3.3.a Target Missing Image Image Links – pg. 29
Video time - Elements Part 1 3.3.b Anchor (a href) 33a-books.html
00:08:09 Image Links 3.3.c Bookmark Hyperlinks – pg. 30
Exercise Lab time - The A Tag 33b-index.html; 33b-spotlight.html
00:04:00 Targets Bookmarks – pg. 31
Workbook time - Bookmarks 33d-books.html
00:35:00
Lesson 5 Navigation 3.3.d Relative vs. absolute Relative Link Relative and Absolute Links – pg. 32
Video time - Elements Part 1 links Navigating Folders 33e-spotlight.html
00:07:07 Relative vs. 3.3.e Navigating simple Name Attribute Navigating Folder Hierarchies – pg. 33
Exercise Lab time - Absolute Links folder hierarchies Image Map 33f-links.html
00:16:00 Folder Hierarchy 3.3.f Map Attributes Map and Area Tags – pg. 34
Workbook time - Navigation 3.3.g Area books2.html; books3.html
00:30:00 Map
Area

103 | HTML and CSS Lesson Plan: Domain 3 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 3 - Document Structure using HTML [approximately 10.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Lesson 6 Form Elements 3.4.a Form attributes N/A Action and Method Attributes – pg. 35
Video time - Part 1 3.4.b Action 34a-contactus.html
00:07:10 Action and Method 3.4.c Method Accessibility – pg. 36
Exercise Lab time - Attributes 3.4.d Submission methods 34d-contactus.html
00:00:00 Submission 3.4.e Input types and Input Types and Labels – pg. 37
Workbook time - Methods restrictions 34e-contactus.html
00:45:00 Accessibility
Input Types and
Restrictions
Lesson 7 Form Elements 3.4.f Select Select Tag The Select Tag – pg. 38
Video time - Part 2 3.4.g Textarea Elements 34f-contactus.html
00:09:14 The Significance of 3.4.h Button Textarea Tag Textarea Tag – pg. 39
Exercise Lab time - Labels 3.4.j Label 34g-contactus.html
00:08:00 Select Tag Button Tags – pg. 40
Workbook time - Textarea Tag 34h-contactus.html
00:45:00 Button Tag Output Tags – pg. 41
Output Tag 34i-contactus.html
Lesson 8 Form Elements 3.4.i Option N/A Option Tag – pg. 42
Video time - Part 3 34j-contactus.html
00:08:03 Option Tag Datalist – pg. 43
Exercise Lab time - Datalist Tag 34k-contactus.html
00:00:00 Fieldset Tag Fieldset and Legend Tags – pg. 44
Workbook time - Domain 3 Test Tips 34l-contactus.html
00:40:00
Post-Assessment Document
Assessment time - Structure using
02:00:00 HTML: Post-
Assessment

104 | HTML and CSS Lesson Plan: Domain 3 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 4 Lesson Plan
Domain 4 - Multimedia Presentation using HTML [approximately 2 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Pre-Assessment Multimedia Presentation
Assessment time using HTML: Pre-Assessment
- 00:10:00
Lesson 1 Image, SVG, and Canvas 4.1.a Img and picture Understanding Add Images – pg. 47
Video time - Elements elements and their Image Elements 41a-instruments.html; mandolin.jpg;
00:05:12 Add Images attributes trombone.jpg
Exercise Lab time Image Layouts Image Layouts and Links – pg. 48
- 00:04:00 Image Links 41a-instruments2.html
Workbook time -
00:25:00
Lesson 2 Video and Audio Formats 4.2.a Video N/A Video and Source Tags – pg. 49
Video time - Video and Source Tags 4.2.b Audio 43a-media.html; Happy.mp4;
00:08:33 Audio and Source Tags 4.2.c Track Happy.mov
Exercise Lab time Track Tag 4.2.d Source Audio and Track Tags – pg. 50
- 00:00:00 iFrame Implementations 4.2.e Iframe 43b-media.html;
Workbook time - Domain 4 Exam Tips metronome_audio.mp3; subtitles.vtt
30:00:00 Simple Iframe Implementations – pg.
51
43e-media.html; vtt.html
Post-Assessment Multimedia Presentation
Assessment time using HTML: Post-Assessment
- 00:40:00

105 | HTML and CSS Lesson Plan: Domain 4 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 5 Lesson Plan
Domain 5 - Webpage Styling using CSS [approximately 10.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Pre-Assessment Webpage Styling using
Assessment CSS: Pre-Assessment
time - 00:40:00
Lesson 1 Position Text with CSS 5.1.a Positioning, Positioning Height and Max-Width Used with an Element
Video time - Part 1 including float, relative, – pg. 55
00:09:58 Height and Width absolute, static, fixed, 51a-positioningexample.html
Exercise Lab Max-Width Used with max-width, overflow, Float Positioning – pg. 56
time - 00:04:00 an Element height, width, align 51af-positioningexample.html
Workbook time Float Positioning Relative and Absolute Positioning – pg. 57
- 00:40:00 Relative Positioning 51ar-positioningexample.html
Absolute Positioning
Lesson 2 Position Text with CSS 5.1.a Positioning, Element Static and Fixed – pg. 58
Video time - Part 2 including float, relative, Position positioningelement1.html
00:10:13 Static absolute, static, fixed, Overflow and Alignment Settings – pg. 59
Exercise Lab Fixed max-width, overflow, 51ao-positioningexample.html
time - 00:04:00 Overflow Settings height, width, align Display – pg. 60
Workbook time Alignment 5.1.b Display display.html
- 00:35:00 Display 5.1.c Inline vs. block Inline vs. Block – pg. 61
Inline vs. Block 51b-main.css; 51b-spotlight.html
Lesson 3 Position Text with CSS 5.1.d Visibility N/A Visibility – pg. 62
Video time - Part 3 5.1.e Box model, margins 51c-positioningexample.html
00:08:39 Visibility and padding Box Model Margins and Padding – pg. 63
Exercise Lab Box Model Margins 51d-positioningexample.html
time - 00:00:00 Box Model Padding
Workbook time
- 00:25:00
Lesson 4 Format Text with CSS 5.2.a Font-family Hexadecimal Font Families in CSS – pg. 64
Video time - Part 1 5.2.b Color Colors 52a-main.css; 52a-books.html
00:08:44 Font-Family 5.2.c Font-style Font Colors in CSS – pg. 65
Exercise Lab Color 5.2.d Font-size 52b-main.css; 52b-spotlight.html
time - 00:04:00 Font-Style 5.2.e Font-weight Font Styles and Weights in CSS – pg. 66
Workbook time Font-Weight 52c-main.css; 52c-books.html
- 00:30:00
Lesson 5 Format Text with CSS 5.2.f Font-variant Font Variants Link Colors in CSS – pg. 67
Video time - Part 2 5.2.g Link colors Hyperlink 52e-main.css; 52e-spotlight.html
00:11:10 Link Colors 5.2.h Text formatting, Underline Font Variant – pg. 68
Exercise Lab Font Variant text alignment, text headings1.html; main.css
time - 00:08:00 Text-Alignment decoration, indentation Text Alignment and Decoration – pg. 69
Workbook time Text-Decoration 52f-main.css; 52f-hours.html
- 00:40:00 Indentation Indentation – pg. 70
52fi-main.css; 52fi-index.html
Lesson 6 Format Text with CSS 5.2.i Line-height N/A Line Hight and Word-Wrap – pg. 71
Video time - Part 3 5.2.j Word-wrap positioningexample2.html; wordwrap.html
00:03:41 Line Height 5.2.k Letter-spacing Letter-Spacing, Word-Spacing – pg. 72
Exercise Lab Word-wrap spacing.html
time - 00:00:00 Letter-Spacing, Word-
Workbook time Spacing
- 00:25:00

106 | HTML and CSS Lesson Plan: Domain 5 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 5 - Webpage Styling using CSS [approximately 10.5 hours of videos, labs, and projects]
Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files
Subtopics
Lesson 7 Backgrounds and 5.3.a Border-color N/A Border Color and Style – pg. 73
Video time - Borders Part 1 5.3.b Border-style 53a-main.css; 53a-spotlight.html
00:06:54 Border-Color 5.3.c Border-width Border Width – pg. 74
Exercise Lab Border-Style 53c-main.css; 53c-spotlight.html
time - 00:00:00 Border-Width
Workbook time
- 00:35:00
Lesson 8 Backgrounds and 5.3.d Background Text Color Backgrounds – pg. 75
Video time - Borders Part 2 properties 53d-positioningexample.html; kazoo-
00:07:25 Backgrounds 5.3.e Colors transparent.jpg
Exercise Lab Divs Divs and Colors – pg. 76
time - 00:04:00 Working with Colors 53e-main.css; 53e-spotlight.html
Workbook time
- 00:25:00
Lesson 9 Responsive Layouts 5.4.a Units of Relative Units of Measure – pg. 77
Video time - Part 1 measurement Measurement 54a-main.css; 54a-index.html
00:07:07 Units of Measure (percentages, pixels, em, Viewport and Media Query Settings – pg. 78
Exercise Lab Viewport vw, vh) 54b-spotlight.html; 54b-main.css
time - 00:04:00 Media Query 5.4.b Viewport and Percentages and Pixels – pg. 79
Workbook time Percentages and Pixels media query 54c-hours.html
- 00:40:00 5.4.d Working with
breakpoints
Lesson 10 Responsive Layouts 5.4.c Frameworks and Grid Columns Frameworks, Templates, and Max Width –
Video time - Part 2 templates pg. 80
00:06:13 Frameworks and 5.4.e Grids 54e-hours.html
Exercise Lab Templates Grids – pg. 81
time - 00:04:00 Max-Width Property grids.html
Workbook time Grids
- 00:25:00 Domain 5 Exam Tips
Post- Webpage Styling using
Assessment CSS: Post-Assessment
Assessment
time - 02:00:00

107 | HTML and CSS Lesson Plan: Domain 5 Lesson Plan HTML and CSS Project Workbook, First Edition
Domain 6 Lesson Plan
Domain 6 - Accessibility, Readability, and Testing [approximately 4 hours of videos, labs, and projects]
Lesson Lesson Topic and Subtopics Objectives Exercise Workbook Projects and
Labs Files
Pre-Assessment Accessibility, Readability, and
Assessment time - Testing: Pre-Assessment
00:20:00
Lesson 1 Construct HTML and CSS 6.1.a Reusing rules and rule Comments Reusing Rules and Rule Sets –
Video time - Ensuring Accessibility sets Testing pg. 84
00:10:38 Reusing Rules and Rule Sets 6.1.b Commenting Browsers 23a-main.css; 23a-
Exercise Lab time - CSS Comments 6.1.c Web-safe fonts spotlight.html
00:08:00 Multiple Browser Tests 6.1.d Cross-platform CSS Comments – pg. 85
Workbook time - Web Safe Fonts usability 23b-main.css; 23b-
00:30:00 Cross-Platform Usability 6.1.e Separation of structure spotlight.html
Separation of Structure (HTML) (HTML) and style (CSS) Multiple Browser Tests and
and Style (CSS) Web Safe Fonts – pg. 86
23c-spotlight.html; 23c-
main.css
Separation of Structure and
Style – pg. 87
N/A
Lesson 2 Accessibility Principles and 6.2.a Text alternatives N/A Text Alternatives – pg. 88
Video time - Evaluate Content Accessibility 6.2.b Color contrast and N/A
00:06:02 Part 1 usage Color Contrast and
Exercise Lab time - Text Alternatives 6.2.c Legibility of typography Typography – pg. #89
00:00:00 Color Contrast and Usage N/A
Workbook time - Legibility of Typography
00:20:00
Lesson 3 Accessibility Principles and 6.2.d Tab order Change Font Tab Order and Text Resizing –
Video time - Evaluate Content Accessibility 6.2.e Text resizing Size pg. 90
00:06:16 Part 2 6.2.f Text hierarchy Text resizing.html
Exercise Lab time - Tab Order Hierarchy Text Hierarchy – pg. 91
00:08:00 Text Resizing hierachy.html
Workbook time - Text Hierarchy
00:15:00
Lesson 4 Structural Integrity of HTML and 6.3.a Syntax errors CSS Error Syntax Errors – pg. 92
Video time - CSS Markup 6.3.b Tag mismatch index.html; main.css
00:07:18 Syntax Errors 6.3.c Cascading issues Tag Mismatch – pg. 93
Exercise Lab time - Tag Mismatch hours-complete.html; hours-
00:04:00 Cascading Issues mismatch.html
Workbook time - Final Exam Tips Cascading Issues – pg. 94
00:25:00 Final Thoughts N/A
Post-Assessment Accessibility, Readability, and
Assessment time - Testing: Post-Assessment
01:00:00

108 | HTML and CSS Lesson Plan: Domain 6 Lesson Plan HTML and CSS Project Workbook, First Edition