LearnKey provides on-demand training courses and online learning solutions to education, government, business, and individuals

world-wide. With dynamic video-based courseware and effective learning management systems, LearnKey provides expert
instruction for popular computer software, technical certifications, and application development. LearnKey delivers interactive
courses online. For a complete list of courses visit:

http://www.learnkey.com/

All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means now known or to
be invented, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system
without written permission from the author or publisher, except for the brief inclusion of quotations in a review.

© 2018 LearnKey
www.learnkey.com

374331
Table of Contents
Using This Workbook_____________________________________________________________________5
Best Practices Using LearnKey’s Online Training__________________________________________________6
Skills Assessment________________________________________________________________________7
MTA Introduction to Programming Using HTML and CSS (98-383) Time Tables___________________________8
Session 1
Fill-in-the-Blanks Session 1________________________________________________________________10
Script and Noscript Tags__________________________________________________________________11
Link and Meta Tags______________________________________________________________________12
HTML Fundamentals ____________________________________________________________________13
Session 2
Fill-in-the-Blanks Session 2________________________________________________________________15
HTML Tables__________________________________________________________________________17
HTML Headings, Paragraphs, and Line Breaks___________________________________________________ 18
Hr, Div, and Span Tags____________________________________________________________________19
HTML List Tags________________________________________________________________________20
Semantic Tags _________________________________________________________________________21
Details and Summary Tags_________________________________________________________________22
Figure and Caption Tags__________________________________________________________________23
Image Links___________________________________________________________________________24
Hyperlinks____________________________________________________________________________25
Bookmarks___________________________________________________________________________26
Relative and Absolute Links_______________________________________________________________27
Navigating Folder Hierarchies______________________________________________________________28
Action and Method Attributes_____________________________________________________________29
Accessibility___________________________________________________________________________30
Input Types and Labels___________________________________________________________________31
The Select Tag_________________________________________________________________________32
Textarea Tag___________________________________________________________________________33
Button Tags___________________________________________________________________________34
Output Tags___________________________________________________________________________35
Option Tag____________________________________________________________________________36
Datalist______________________________________________________________________________37
Fieldset and Legend Tags__________________________________________________________________38
Session 3
Fill-in-the-Blanks Session 3________________________________________________________________40
Add Images___________________________________________________________________________41
Image Layouts and Links__________________________________________________________________42
SVG and Canvas Tags____________________________________________________________________43
Video and Source Tags___________________________________________________________________44
Audio and Track Tags____________________________________________________________________45
Simple Iframe Implementations_____________________________________________________________46
Session 4
Fill-in-the-Blanks Session 4____________________________________________________________________48
Creating Style Sheets________________________________________________________________________49
Style Sheet Precedence______________________________________________________________________50
Valid Syntax for Rule Sets_____________________________________________________________________51
Apply Classes_____________________________________________________________________________52
Apply ids_________________________________________________________________________________53
Apply Pseudo Classes________________________________________________________________________54
Reusing Rules and Rule Sets___________________________________________________________________55
CSS Comments____________________________________________________________________________56
Multiple Browser Tests and Web Safe Fonts________________________________________________________57
Session 5
Fill-in-the-Blanks Session 5____________________________________________________________________59
Height and Max-Width Used with an Element______________________________________________________61
Float Positioning___________________________________________________________________________62
Relative and Absolute Positioning_______________________________________________________________63
Overflow and Alignment Settings_______________________________________________________________64
Inline vs. Block ____________________________________________________________________________65
Visibility_________________________________________________________________________________66
Box Model Margins and Padding________________________________________________________________67
Font Families in CSS_________________________________________________________________________68
Font Colors in CSS_________________________________________________________________________69
Font Styles and Weights in CSS_________________________________________________________________70
Link Colors in CSS__________________________________________________________________________71
Text Alignment and Decoration________________________________________________________________72
Indentation _______________________________________________________________________________73
Border Color and Style______________________________________________________________________74
Border Width_____________________________________________________________________________75
Backgrounds______________________________________________________________________________76
Divs and Colors____________________________________________________________________________77
Units of Measure___________________________________________________________________________78
Viewport and Media Query Settings_____________________________________________________________79
Percentages and Pixels_______________________________________________________________________80
Frameworks, Templates, and Max Width___________________________________________________________81
Appendix
Introduction to Programming Using HTML and CSS (98-383) Suggested Study Plan ��������������������������83
Introduction to Programming Using HTML and CSS (98-383) Session 1 Outline ����������������������������93
Introduction to Programming Using HTML and CSS (98-383) Session 2 Outline ����������������������������94
Introduction to Programming Using HTML and CSS (98-383) Session 3 Outline ����������������������������95
Introduction to Programming Using HTML and CSS (98-383) Session 4 Outline ����������������������������96
Introduction to Programming Using HTML and CSS (98-383) Session 5 Outline ����������������������������97
 Using This Workbook
This project workbook contains practice projects and exercises to reinforce the knowledge you have gained through the
video portion of the MTA Introduction to Programming Using HTML and CSS course. The purpose of this workbook is
twofold. First, to get you further prepared to pass the MTA 98-383 exam. Secondly, to get you job-ready skills and increase
your employability in the area of web application development in HTML5 and CSS.

This project workbook is versatile in that the projects follow the order of the video portion of this course.You can
complete the workbook exercises as you go through each section of the course, complete several of these at the end of
each session, or complete them after viewing the entire course. The key is to go through these projects as they will help
strengthen and solidify your knowledge of this course.

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

• A web design tool. This course uses Visual Studio Community, a free design tool available at
https://www.visualstudio.com. However, any web design/HTML Editor tool will work. In order to preview certain
functionality properly, the web editor needs to be able to preview webpages in a mock web server.Visual Studio
does this. Notepad does not.
• The practice files for these projects, which are available at https://media-onlineexpert.akamaized.net/files/MTA_
Introduction_to_Programming_Using_HTML_and_CSS_(98-383)_Support_Files.zip
• One or more web browsers to use to test your webpages. The course uses Microsoft Edge, but you should use at
least two browers (Google Chrome, Firefox, Safari, Internet Explorer) for best testing results.

Benefits:
• Learning HTML and CSS, with an emphasis on new tags for HTML5.
• View your online courseware anytime and anywhere.
• Put your skills to the test with dozens of Pre/Post test questions and practice labs.

5| MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 Best Practices Using LearnKey’s Online Training
LearnKey offers video-based training solutions which are flexible enough to accommodate the private student, as well as
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. The content in our
courses 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 in the highest level available for their field of expertise. This provides the student with the
knowledge necessary to also obtain top-level certifications in the field of their choice.

Our accomplished instructors have a rich understanding of the content they present. Effective teaching encompasses not
only presenting the basic principles of a subject, but 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 standard objectives provided by the manufacturer 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. The following are three levels of implementation:

Course Training Model

The course training model allows students to proceed through basic training, building upon primary knowledge and
concepts to more advanced application and implementation. In this method, students have these course portions to use:

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 most. Students should not necessarily expect a passing score on the pre-assessment as it is
a test of prior knowledge.

Video training session: Each course of training is divided into sessions that are approximately two hours in
length. Each session is divided into topics and Subtopic. As this is a test prep course, there is only one session in this course.

Practice Labs: In addition to the video training, there are practice labs available for students to use to reinforce the skills
learned in the video training portion of the course.

Post test: The post test is used to determine the student’s knowledge gained from interacting with the training. In
taking the post test, 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 test the first time it is taken, LearnKey would recommend the
incorporation of external resources, such as the workbook and additional customized instructional material.

6| MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
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 markup that conform to industry best practices.

Analyze the impact of using inline styles, internal style sheets, and
external style sheets.
Construct and analyze rule sets.
Construct well-formed style sheets that conform to industry best
practices.
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.

Describe the appropriate use of the img, svg, and canvas elements.

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.

Analyze styles that implement a simple responsive layout.

7| MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
MTA Introduction to Programming Using HTML
and CSS (98-383) Time Tables
Session 1 Actual Time Session 2 Actual Time
Introduction 00:03:00 Structure Content Through Markup 00:17:21
Markup with Metadata 00:09:18 Semantic HTML Elements 00:10:01
Well-Formed Markup 00:11:38 Navigation Elements 00:12:10
Total Time 00:23:56 Form Elements 00:24:05
Total Time 01:03:37

Session 3 Actual Time Session 4 Actual Time

Image, SVG, and Canvas Elements 00:09:24 Define Style Sheets 00:06:38
Video and Audio Formats 00:08:49 CSS Rule Sets 00:07:56
Total Time 00:18:13 CSS Best Practices 00:09:16
Total Time 00:23:50

Session 5 Actual Time

Position Text with CSS 00:24:45
Format Text with CSS 00:19:19
Backgrounds and Borders 00:14:18
Responsive Layouts 00:11:42
Course Conclusion 00:01:52
Total Time 01:11:56

8| MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 1
Fill-in-the-Blanks Session 1
Instructions: While watching Session 1, fill in the missing words according to the information presented by the instructor.
[References where answers are found are in 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]

10 | Session 1 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Script and Noscript Tags Project Details
Script tags are tags which hold programming code in a language other than HTML,
usually JavaScript. These are often found in the body of an HTML document but can be Project Files:
in the head section if the script is meant to take action on a webpage but not display the 11a-scripts.html
information contained in the script.
Estimated Completion
The noscript tag is used to display text that will show if the browser being used to Time:
display a webpage does not support the scripting language used within a script tag. 10 Minutes

Purpose: Video Reference:

Session 1
Upon completing this project, you will be able to use script and noscript tags within
Topic: Markup with Metadata
an HTML document. Note that when you are called upon to open a file throughout
Subtopic: Script Tag; Noscript Tag
this workbook, you will want to open it in your code editor and not a browser unless
specifically told to do so.
Objectives Covered:
1 Understand HTML Fundamentals
Steps for Completion:
1.1 Construct markup that uses
1. Open the 11a-scripts.html file in the MusicStore1 student folder in Visual Studio metadata elements
or a similar code editor. 1.1.a Script
2. On the line below the words, Script Test, add an opening and closing script tag, 1.1.b Noscript
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 brower
supports JavaScript (so long as you are using a browser that does support it).

11 | Session 1 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Link and Meta Tags Project Details
Link tags are used to link HTML files to files such as style sheets (CSS files) and script
files such as JavaScript files. The link tag is not used for hyperlinks. The anchor tag (A tag) Project Files:
11c-scripts.html
is used for hyperlinks.

Estimated Completion
Part of proper HTML markup in a document is using metadata, which is often described
as data defining data. Meta tags have four functions: define character types, define Time:
webpage content, define how the webpage is viewed, and indicate if the language used 10 Minutes
for the page can be translated. Meta tags, as they do not display on the webpage itself,
are always listed in the head section of a webpage. Video Reference:
Session 1
Purpose: Topic: Markup with Metadata
Subtopic: Link Tag; Meta Tags
Upon completing this project, you will be able to add link tags and meta tags to an
HTML document.
Objectives Covered:
1 Understand HTML Fundamentals
Steps for Completion:
1.1 Construct markup that uses
1. Open the 11c-scripts.html file in the MusicStore1 student folder in your code metadata elements
editor. 1.1.c Link
2. On the line below the title tag, add a link tag that links to a stylesheet named 1.1.d Meta tags (encoding,
test.css keywords, viewport, translate)
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.

12 | Session 1 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
HTML Fundamentals Project Details
HTML documents have four areas, the DOCTYPE, HTML, head, and body. The
DOCTYPE indicates the type of document. The HTML area opens and closes the
Project Files:
N/A
document’s code. The head contains titles, links, and meta tags that do not need to show
on the webpage. The title is the name of your webpage and is used by search engines.
The body contains the elements that will be visible on the webpage. All four areas of Estimated Completion
an HTML document have opening and closing syntax vital to the functionality of the Time:
document. 10-15 Minutes

Regarding symbols and comments, symbols are HTML entities that start with an Video Reference:
ampersand and end with a semicolon. For example, &copy; is an entity that represents a Session 1
copyright. Comments start with a <!-- and end with a -->. Webpages ignore text inside Topic: Well-Formed Markup
comments. The comments often serve as explanations of parts of a webpage, notes to a Subtopic: DOCTYPE Declaration
and Html Tag; Head Tag; Body Tag;
fellow developer, or perhaps placeholders for future text.
Closing Tags; Entities; Comments

Purpose: Objectives Covered:

Upon completing this project, you will be able to create and use proper syntax for all 1 Understand HTML Fundamentals
four areas of an HTML document.You will also be able to use entities and comments 1.2 Construct well-formed markup
within a webpage. that conforms to industry best
practices
Steps for Completion: 1.2.a DOCTYPE declaration
1.2.b HTML
1. Create a new HTML document using your HTML editor. Name the file index.html
1.2.c Head tag
and save it to your MusicStore1 student folder.
1.2.d Body tag
2. Add the four areas of an HTML document. 1.2.e Proper syntax (closing tags and
3. In the head section, add a title to name the webpage. Use: THE Music Store for commonly used symbols)
the title. Close the title tag. 1.2.f Comments
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.

13 | Session 1 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 Session 2

14 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Fill-in-the-Blanks Session 2
Instructions: While watching Session 2, fill in the missing words according to the information presented by the instructor.
[References where answers are found are in 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]

15 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 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]

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]

Form Elements
23. 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]

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

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

26. In a form, a element generates a drop-down list, while tags

determine the available items on that list. [Input Types and Restrictions]

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

28. 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]

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

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

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

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

16 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
HTML Tables Project Details
Tables are used to organize information in rows and columns. Tables used to be used
to lay out entire pages (and they still do, sometimes), but with the advancements in
Project Files:
31a-hours.html
Cascading Style Sheets (CSS) for layouts for overall pages, tables are best served for
31a-hours2.html
grid-like information.

Estimated Completion
For the purpose of creating tables, the table tag creates the table, the tr tag indicates a
table row, and the td tag indicates a table cell.
Time:
10 Minutes

Purpose:
Video Reference:
Upon completing this project, you will be able to create a table and use different Session 2
attributes to style the table. Topic: Structure Content Through
Markup
Steps for Completion: Subtopic: Table Tags;Table Attributes
1. Open the 31a-hours.html file from your MusicStore2 student folder.
2. Add a table below the text, Hours of operation. The table should have five rows and Objectives Covered:
two columns. 3. Structure Documents Using HTML
3. Save your changes. 3.1 Construct and analyze markup to
structure content and organize data
4. Open the 31a-hours2.html file from your MusicStore2 student folder. 3.1.a Table tags
5. Add a 1-point border to the table.
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:

17 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
HTML Headings, Paragraphs, and Project Details

Line Breaks Project Files:

31b-headings.html
Three HTML tags that are used very heavily in the basic content formation of webpages
31b-index.html
are headings, paragraph (P), and line break (BR) tags. Heading tags have six levels (H1
webpagetext.txt
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 document. BR tags are the equivalent of
soft returns in a Word or similar document. Estimated Completion
Time:
10 Minutes
Most HTML tags have both an opening and a closing tag. However, if the content within a
tag has a defined ending, a closing tag is not needed. For example, paragraphs have a start
and an end. But line breaks are just that, line breaks. Once the line break is set, it is done. Video Reference:
Thus, a BR tag does not need a closing tag. A / after the BR indicates the closing portion Session 2
of it. Topic: Structure Content Through
Markup
Subtopic: Heading Tags; P Tag; Br Tag
Purpose:
Upon completing this project, you will be use heading, paragraph, and line break tags
Objectives Covered:
within a webpage.
3. Structure Documents Using HTML
3.1 Construct and analyze markup to
Steps for Completion: structure content and organize data
1. Open the 31b-headings.html file from the MusicStore2 student folder. 3.1.b Heading tags
2. With the six lines of text for heading examples, add an opening heading tag (H1 3.1.c P tag
through H6) to each line, matching the heading tag with the text in the line. 3.1.d Br tag
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.

18 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Hr, Div, and Span Tags Project Details
Once the basic strucutre of an HTML document is in place, you will want to organize
and separate content further. One way to do this is to add horizontal rules (Hr tags) in Project Files:
31e-index.html
between sections of a webpage.

Estimated Completion
Two other options available are Div and Span tags. A Div tag isolates a block of text and
allows for formatting specifically on that block. A Span tag allows for inline formatting Time:
around text within a paragraph, but does not isolate the text from a paragraph. 10 Minutes

Purpose: Video Reference:

Session 2
Upon completing this project, you will be able to use the Hr, Div, and Span tags in an
Topic: Structure Content Through
HTML document. Markup
Subtopic: Hr Tag; Div Tag; Span Tag
Steps for Completion:
1. Open the 31e-index.html file from the MusicStore2 student folder. Objectives Covered:
2. On the line after the text, We look forward to seeing you!, add a horizontal rule. 3 Structure Documents Using HTML
3. Surround the three lines of text after the horizontal rule with an opening and 3.1 Construct and analyze markup to
closing Div tag. structure content and organize data
3.1.e Hr tag
4. Center align the text inside of the Div tag.
3.1.f Div tag
5. Add a Span tag before the text, THE Music Store, below the navigation area. 3.1.g Span tag
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.

19 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
HTML List Tags Project Details
An unordered list (Ul tag) is a bulleted list that does not require steps to be done in any
specific order, while an ordered list (Ol tag), in most cases, is a numbered list with steps
Project Files:
31h-Index.html
that must be done in a specific order.

Estimated Completion
Both unordered and ordered lists contain list item tags (Li tags), which serve as bullet
points for unordered lists and numbered items for ordered lists.
Time:
15 Minutes

Purpose:
Video Reference:
Upon completing this project, you will be able to create unordered and ordered lists. Session 2
Topic: Structure Content Through
Steps for Completion: Markup
1. Open the 31h-index.html file from the MusicStore2 student folder. Subtopic: Ul and Li Tags; Ol and Li
Tags
2. Turn the items Guitar, Piano, and Drums into an unordered list.
3. Create a list item for each instrument in the list.
Objectives Covered:
4. Change the bullet created by the unordered list to a square style. 3 Structure Documents Using HTML
5. Preview the webpage in a browser.You should see a square bulleted list of 3.1 Construct and analyze markup to
instruments. structure content and organize data
6. Return to your code window. 3.1.h UI tag
7. Add an ordered list opening tag before the text, Join our music club, found below 3.1.i Ol tag
the list of instruments you just created. 3.1.j Li tag

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.

20 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Semantic Tags Project Details
A semantic tag is used to organize a webpage. Semantic tags are a quick reference to let
both developers and search engines know where the header, navigation, text sections,
Project Files:
32a-spotlight.html
articles with self-containing text, aside story, and footer areas are in an HTML document.

Estimated Completion
Semantic tags do not format content directly. Any formatting on semantic tags is done
through Cascading Style Sheets (CSS).
Time:
15 Minutes

Purpose:
Video Reference:
Upon completing this project, you will know what semantic tags are used for and where Session2
to use them in an HTML document. Topic: Semantic HTML Elements
Subtopic: Header Tag: Nav Tag;
Steps for Completion: Section Tag; Article and Aside Tags,
1. Open the 32a-spotlight.html file in the MusicStore2 student folder. Footer Tag

2. Preview the webpage. Make a mental note of what you see.

3. Return to your code editor.
Objectives Covered:
3 Structure Documents Using HTML
4. Add an opening header tag above the text, This month’s instrument: The Kazoo. 3.2 Construct and analyze markup that
5. Close the header tag below the text, The instrument to where you make the noise. uses HTML5 semantic elements
6. Surround the text, Home | Books | Contact Us, with an opening and closing nav tag. 3.2.a Header tag
7. Surround the text in between the header and nav areas you added with an opening 3.2.b Nav tag
and closing section tag. 3.2.c Section tag
3.2.d Article tag
8. Just after the opening section tag, add an opening article tag.
3.2.e Aside tag
9. Close the article tag just before the paragraph, More on kazoos. 3.2.f Footer tag
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.

21 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Details and Summary Tags Project Details
Two semantic tags that actually have some interaction of supported web browsers are
the details and summary tags. A details tag, wrapped around an area of text, makes the Project Files:
32g-books.html
area expandable and collapsible. A summary tag, contained within a details tag, should be
wrapped around the text to show for the expandable and collapsible area.
Estimated Completion
Purpose: Time:
Upon completing this project, you will know how to use the details and summary tags in 5-10 Minutes
an HTML document.
Video Reference:
Steps for Completion: Session 2
Topic: Semantic HTML Elements
1. Open the 32g-books.html file in the MusicStore2 student folder.
Subtopic: Details and Summary Tags
2. Add an opening details tag above the paragraph with the text, Look at all of these
great books!
Objectives Covered:
3. Close the details tag after the image tag for the sheet music image. 3 Structure Documents Using HTML
4. On the line after the opening details tag (and before the next paragraph tag), add 3.2 Construct and analyze markup that
the text, Show or hide these books uses HTML5 semantic elements
5. Add an opening and closing summary tag around the text you just typed. 3.2.g Details tag
6. Save your changes. 3.2.h Summary tag

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

22 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Figure and Caption Tags Project Details
A figure tag is used in conjunction with the figcaption tag to mark up an image on a
webpage. The figcaption tag allows for adding a caption to an image and for lining up the Project Files:
32i-spotlight.html
caption with the image.
32j-hours2.html

The caption tag is used on tables. This allows one to place description text for a table in
Estimated Completion
close proximity with a table.
Time:
15 Minutes
Purpose:
Upon completing this project, you will know how to use the figure, figcaption, and
caption tags in an HTML document.
Video Reference:
Session 2
Topic: Semantic HTML Elements
Steps for Completion: Subtopic: Figure Tag; Caption Tag
1. Open the 32i-spotlight.html file in the MusicStore2 student folder.
2. Add a figure tag above the image of the Kazoo. Objectives Covered:
3. Close the figure tag after the image. 3. Structure Documents Using HTML
4. On the line after the image, add an opening and closing figcaption tag. 3.2 Construct and analyze markup that
uses HTML5 semantic elements
5. Within the figcaption tag, add the text, The Mighty Kazoos
3.2.i Figure tag
6. Save your changes. 3.2.j Caption tag
7. Preview your webpage in a web broswer.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.

23 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Image Links Project Details
Elements, such as images, are not embedded within a webpage. They are linked from an
external source to a webpage. With images, the img tag is used to indicate an image on Project Files:
33a-books.html
a webpage and the source (src) attribute is used to define the location of the image.
If this image is in the same folder as the page itself, the file name is all that is needed.
Otherwise, the path to the file needs to be defined. For example, if the image is on the Estimated Completion
same website but in an images folder adjacent to the file, the path needs to have the Time:
folder name, a backslash, and then the file. 5-10 Minutes

Purpose: Video Reference:

Upon completing this project, you will be able to display an image within an HTML Session 2
document through linking to it. Topic: Navigation Elements
Subtopic: Image Links
Steps for Completion:
1. Open the 33a-books.html file in the MusicStore2 student folder. Objectives Covered:
3 Structure Documents Using HTML
2. Add a link to the image musicbooks.jpg on the line below the text, Look at all of
3.3 Construct and analyze markup
these great books. that implements navigation
3. Add the alt text, Music books, to the image tag. 3.3.a Image links
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.

24 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Hyperlinks Project Details
A hyperlink will move the user to another webpage when it is clicked. A hyperlink can be
internal or external to a website. A target can control how a hyperlink opens, with the
Project Files:
33b-index.html
most common example being of a target set to _blank so that the hyperlink can open in
33b-spotlight.html
a blank browser tab. Hyperlinks are created using the anchor (a) tag and the hyperlink
reference (href) attribute.
Estimated Completion
Purpose: Time:
10 Minutes
Upon completing this project, you will be able to add a hyperlink to an HTML document
and set a target for a hyperlink.
Video Reference:
Session 2
Steps for Completion:
Topic: Navigation Elements
1. Open the 33b-index.html file in the MusicStore2 student folder. Subtopic: The A Tag: Targets
2. Using the text, Spotlight, in the navigation area at the bottom of the page, add a
hyperlink to the 33b-spotlight.html file. Objectives Covered:
3. Save your changes. 3 Structure Documents Using HTML
4. Preview the webpage in a web browser. 3.3 Construct and analyze markup that
5. Click the Spotlight link.You should be taken to the 33b-spotlight page. implements navigation
3.3.b The a tag
6. Return to your code editor.
3.3.c Targets
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.

25 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Bookmarks Project Details
A bookmark is a type of hyperlink that navigates to a specific location on a webpage.
This can be a location on the same webpage as the hyperlink or to a specific location on
Project Files:
33d-books.html
a different page. The location for the bookmark must be defined. This is done using the
anchor (a) tag and the name attribute. Then, the hyperlink uses the # symbol in front of
the bookmark name. Estimated Completion
Time:
Purpose: 5 Minutes

Upon completing this project, you will be able to add a bookmark to an HTML
document.You will also be able to link to the bookmark. Video Reference:
Session 2
Topic: Navigation Elements
Steps for Completion:
Subtopic: Bookmarks
1. Open the 33d-books.html file in the MusicStore2 student folder.
2. Create a bookmark with the name, sale, just above the paragraph starting with the Objectives Covered:
words, Special sale, near the bottom of the page. 3 Structure Documents Using HTML
3. Near the top of the page, add a hyperlink around the text, This month’s sale, with 3.3 Construct and analyze markup that
the hyperlink linking to the bookmark you just created. implements navigation
4. Save your changes. 3.3.d Bookmarks
5. Preview the webpage in a web browser.
6. Click the link on the text, This month’s sale.You should be taken to the bottom of
the page.

26 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Relative and Absolute Links Project Details
Hyperlinks are relative or absolute depending on where the link is located. A relative link Project Files:
is a hyperlink located within the same website from the HTML document from where 33e-spotlight.html
the link originates. An absolute link is a hyperlink in 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 add a target so that the new webpage will open
Estimated Completion
in a new tab. Time:
5 minutes

As the hyperlink you created earlier in this domain was a relative link to a webpage
within the same website, this project will focus more on absolute links. Video Reference:
Session 2
Topic: Navigation Elements
Purpose: Subtopic: Relative vs. Absolute
Upon completing this project, you will be able to determine if a link is relative or Links
absolute and use both links in an HTML document.
Objectives Covered:
Steps for Completion: 3 Structure Documents Using HTML
1. Open the 33e-spotlight.html file in the MusicStore2 student folder. 3.3 Construct and analyze markup that
implements navigation
2. Add an absolute link to the text: More on kazoos. Use the website: https://
3.3.e Relative vs. absolute links
en.wikipedia.org/wiki/kazoo for the complete absolute link address.
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.

27 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Navigating Folder Hierarchies Project Details
Relative hyperlinks are often located within folders different from the pages in which
they originate. For simple folder hierarchies, the folder name needs to precede the Project Files:
33f-links.html
webpage name in a hyperlink if the folder is below the webpage in 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 name. Estimated Completion
Time:
Purpose: 5 Minutes
Upon completing this project, you will know the commands to move up and down a
folder path and be able to use the up or down commands on an HTML document. Video Reference:
Session 2
Steps for Completion: Topic: Navigation Elements
Subtopic: Folder Hierarchy
1. Open the 33f-links.html file in the TestPages folder within the MusicStore2 Navigation
student folder.
2. Add a hyperlink around the text, Link to the home page. The hyperlink reference Objectives Covered:
should navigate up a folder path and then over to the index.html page. 3 Structure Documents Using HTML
3. Save your changes. 3.3 Construct and analyze markup
4. Preview the webpage in a web browser. that implements navigation
5. Click the link you created in this project. It should navigate you to the home page. 3.3.f Navigating simple folder
hierarchies
6. Close all open files in both your browser and your editor.

28 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Action and Method Attributes Project Details
This is the first of several projects in a row that will focus on form building. The first
two concepts to cover are action attributes and method attributes. An action attribute
Project Files:
34a-contactus.html
references webpages or scripts that process information to a database. The method
attribute will determine what type of action the form will take when it is submitted.
There are four types of submission methods: Estimated Completion
GET: A request to retrieve data Time:
5-10 Minutes
POST: A request to modify data on a server
PUT: A request to add data to a database
Video Reference:
DELETE: A request to remove information from a database
Session 2
Topic: Form Elements
These attributes are part of the main tag of a form which is the form tag. Subtopic: Action and Method
Attributes; Submission Methods
Purpose:
Upon completing this project, you will be able to create a form and add an action Objectives Covered:
attribute and a method attribute to the form. 3 Structure Documents Using HTML
3.4 Construct and analyze markup that
uses form elements
Steps for Completion: 3.4.a Action attribute
1. Open the 34a-contactus.html file in the MusicStore2 student folder. 3.4.b Method attribute
2. Add an opening and closing form tag on the line below the text: insert form here. 3.4.c Submission methods
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?

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

29 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Accessibility Project Details
An input form creates a webpage that information can be added to. Input forms are
used for questionnaires, surveys, or applications. The access keys and tab index allow the Project Files:
34d-contactus.html
user to move the cursor between input areas, on a form, using a keyboard rather than
a mouse. This can help websites become more accessible-friendly for people who need
assistance in navigating a website. Estimated Completion
Time:
Purpose: 10 Minutes
Upon completing this project, you will be able to create an input form using access keys
and the tab index to make the HTML document more accessible. Video Reference:
Session 2
Steps for Completion: Topic: Form Elements
Subtopic: Accessibility
1. Open the 34d-contactus.html file in the MusicStore2 student folder.
2. To the input tag for the first name, add an accesskey attribute with the letter, f, and a
tab index with a setting of 1
Objectives Covered:
3 Structure Documents Using HTML
3. To the input tag for the last name, add an accesskey attribute with the letter, l, and a 3.4 Construct and analyze markup
tab index with a setting of 2 that uses form elements
4. To the input tag for the email address, add an accesskey attribute with the letter, e, 3.4.d Accessibility
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.

30 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Input Types and Labels Project Details
As most information on a form is input by a user, HTML supports several types of
input tags, many of which we will see over the next few projects. Some information is Project Files:
34e-contactus.html
supported through an input tag with an attribute such as text, 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 for buttons. Estimated Completion
Time:
Labels often accompany input tags. Labels help to define text next to an input field. 15 Minutes
The other benefit of a label is that with a label tag, a user can click a label and have the
cursor be placed in the matching input field. For this to work, the for attribute for a Video Reference:
label must have the same text as the input field’s name attribute. Session 2
Topic: Form Elements
Subtopic: Input Types and
Input fields should also have an id attribute set as those are needed in case any scripts Restrictions
are written to perform dynamic processing on those fields.
Objectives Covered:
Purpose: 3 Structure Documents Using HTML
Upon completing this project, you will be able to create input tags, input tag attributes, 3.4 Construct and analyze markup
label tags, and label tag attributes. that uses form elements
3.4.e Input types and restrictions
Steps for Completion:
1. Open the 34e-contactus.html file in the MusicStore2 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:

31 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
The Select Tag Project Details
A select tag is used to create a drop-down list in a form. Whereas a select tag creates
the list, option tags define the items within the drop-down list. With select tags, a value Project Files:
34f-contactus.html
is important to each option within the select tag. A script or 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. This is done through adding the selected attribute to Estimated Completion
the default option. Time:
10 Minutes
Purpose:
Upon completing this project, you will be able to create a select tag, add options, add Video Reference:
values to those options, and assign a default setting to an option. Session 2
Topic: Form Elements
Steps for Completion: Subtopic: Select Tag

1. Open the 34f-contactus.html file in the MusicStore2 student folder.

2. Below the last input tag, add the text: How did you hear about us? in a new
Objectives Covered:
3 Structure Documents Using HTML
paragraph tag.
3.4 Construct and analyze markup that
3. Add an opening and closing select tag below the new paragraph. uses form elements
4. Within the new select tag, add a name attribute with the value of found and an id 3.4.f Select tag
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.

32 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Textarea Tag Project Details
The input tag, a tag we saw earlier in this domain, allows for a single line of text to be
entered in a form. A textarea tag allows for multiple lines of text to be typed into a text Project Files:
34g-contactus.html
box. It is often used to allow people to fill out a comment form, for example.

Purpose: Estimated Completion

Upon completing this project, you will be able to add a textarea tag to an HTML Time:
document. 5 Minutes

Steps for Completion: Video Reference:

Session 2
1. Open the 34g-contactus.html file in the MusicStore2 student folder.
Topic: Form Elements
2. Below the existing select tag, add a paragraph tag with the text, Add comments Subtopic: Textarea Tag
below
3. On the next line, add a textarea tag. Objectives Covered:
4. To the textarea tag, add attributes to make the text box 6 rows tall and 50 columns 3 Structure Documents Using HTML
wide, with a 255 character maximum input. 3.4 Construct and analyze markup
5. Save your changes. that uses form elements
6. Preview the webpage in a browser.You should see this text area within the webpage: 3.4.g Textarea tag

33 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Button Tags Project Details
There are two ways to add a button to an HTML document. An input tag with a button
attribute allows one to create a button used to submit or reset a form. Most other Project Files:
34h-contactus.html
actions with buttons should be built using the button tag.

Purpose: Estimated Completion

Upon completing this project, you will be able to add a button tag and an input tag with Time:
a button attribute to an HTML document. 10 Minutes

Steps for Completion: Video Reference:

Session 2
1. Open the 34h-contactus.html file in the MusicStore2 student folder.
Topic: Form Elements
2. Add an opening and closing button tag below the existing textarea tag. Subtopic: Button Tag
3. Name the button tag, showimage
4. Add an empty onclick attribute to the button tag. Objectives Covered:
5. Between the opening and closing button tag, add the text, Show image 3 Structure Documents Using HTML
6. Below the existing button tag, add an input tag with the type set to submit, the 3.4 Construct and analyze markup
name to submitform, and the value to Send it that uses form elements
3.4.h Button tag
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.

34 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Output Tags Project Details
An output tag will take information that is being put into the form and make calculations
with the information. The output tag needs a name, which is then referred to in an Project Files:
34i-contactus.html
oninput attribute added to the form tag. This oninput attribute will actually contain the
calculation that is added to the output tag.
Estimated Completion
Purpose: Time:
Upon completing this project, you will be able to use an output tag in an HTML 5 Minutes
document.
Video Reference:
Steps for Completion: Session 2
Topic: Form Elements
1. Open the 34i-contactus.html file in the MusicStore2 student folder.
Subtopic: Output Tag
2. Add an oninput attribute in the form tag, setting the attribute to use the following
formula: fn.value = firstname.value + “ “ + lastname.value
Objectives Covered:
3. Add an opening and closing output tag on the line below the button input tag, using 3 Structure Documents Using HTML
the name fn for the tag. 3.4 Construct and analyze markup
4. Save your changes. that uses form elements
5. Preview the webpage in a browser. As you type information into the name fields, the 3.4.i Output tag
information should show automatically next to the Send it button.

35 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Option Tag Project Details
HTML documents have two ways to create option tags: they can be individual option
tags or can be grouped into group option tags. In a previous lesson, individual option tags
Project Files:
34j-contactus.html
were added to an input form to add functionality. Group option (optgroup) tags take
individual option tags and group them in similar groups to make options easy to read.
Estimated Completion
Purpose: Time:
10 Minutes
Upon completing this project, you will be able to use options and option groups in an
HTML document.
Video Reference:
Session 2
Steps for Completion:
Topic: Form Elements
1. Open the 34j-contactus.html file in the MusicStore2 student folder. Subtopic: Option Tag
2. Insert a blank line above the option value for the TV.
3. On the new blank line, add an opening optgroup tag with the label, Media Objectives Covered:
4. Close the optgroup tag after the option for Other. 3 Structure Documents Using HTML
5. Surround the options for Google and Bing with an optgroup tag with the label, 3.4 Construct and analyze markup
Web that uses form elements
3.4.j Option tag
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:

36 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Datalist Project Details
A datalist tag creates a prepopulated list of possible answers in an input form. This can
help users use values you want in a form field without having to display a drop-down list
Project Files:
34k-contactus.html
right away, as is the case with a select tag. A datalist typically works in conjunction with
an input tag with a list attribute.
Estimated Completion
Purpose: Time:
10 Minutes
Upon completing this project, you will be able to add a datalist tag to an HTML
document and populate it with values.
Video Reference:
Session 2
Steps for Completion:
Topic: Form Elements
1. Open the 34k-contactus.html file in the MusicStore2 student folder. Subtopic: Datalist Tag
2. Add a paragraph tag on the line before Add comments below, with the text, What
instrument are you most interested in learning? Objectives Covered:
3. Add an input tag on the line below the paragraph, with the list attribute set to 3 Structure Documents Using HTML
instruments and the name set to instrument 3.4 Construct and analyze markup
4. Add an opening and closing datalist tag on the line below the input tag, with the id that uses form elements
set to instruments 3.4.k Datalist tag
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.

37 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Fieldset and Legend Tags Project Details
The fieldset tag allows a user to group fields on a form to make the form user-friendly.
A fieldset defines a box around a set of fields. A fieldset tag also requires a legend tag,
Project Files:
34l-contactus.html
which represents the name of the fieldset.

Purpose: Estimated Completion

Upon completing this project, you will be able to use a fieldset tag and legend tag in an
Time:
10 Minutes
HTML document.

Steps for Completion: Video Reference:

Session 2
1. Open the 34l-contactus.html file in the MusicStore2 student folder. Topic: Form Elements
2. Add an opening fieldset tag before the first label (the one with the name of Subtopic: Fieldset Tag
firstname).
3. Close the fieldset tag after the third input tag (the one with the name of email). Objectives Covered:
4. Just after the open fieldset tag, add an opening and closing legend tag with the text, 3 Structure Documents Using HTML
Personal, in between. 3.4 Construct and analyze markup
5. Add another fieldset tag on the line before the question, How did you hear about that uses form elements
us? Close the fieldset tag on the line after the last closed datalist tag with the 3.4.l Fieldset tag
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 of your open files, both in the browser and your code editor.

38 | Session 2 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 3
Fill-in-the-Blanks Session 3
Instructions: While watching Session 3, fill in the missing words according to the information presented by the instructor.
[References where answers are found are in brackets.]

Image, SVG, and Canvas Elements

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

2. 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]

3. SVG stands for Vector Graphics. [SVG Tag]

4. Vector graphics are rendered using , which means that when they are resized the graphics will
not become pixelated. [SVG Tag]

5. To get a canvas to run when a page loads, the canvas tag must be inside a JavaScript function that is added to the
method of the tag of the webpage. [Canvas Tag]

Video and Audio Formats

6. 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]

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

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

9. 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]

40 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Add Images Project Details
When linking an image to a webpage, make sure the image dimensions fit the
webpage. The quality of the image is affected by changing the dimensions of an
Project Files:
41a-instruments.html
image, so choose images that will still maintain a high-quality image.
mandolin.jpg
trombone.jpg
Purpose:
Upon completing this project, you will be able to link an image in an HTML document Estimated Completion
and change the image dimensions to fit the webpage.
Time:
10 Minutes
Steps for Completion:
1. Open the 41a-instruments.html file in the MusicStore3 student folder. Video Reference:
2. Add an image tag on the line above the text, Mandolin. Session 3
3. Set the image source to be the mandolin.jpg file from the images folder. Topic: Image, SVG, and Canvas
4. Set the width of the image to 460 Elements
Subtopic: Add images
5. Set the height of the image to 345
6. Set the alternative text of the image to mandolin
Objectives Covered:
7. Above the paragraph with the word, Trombone, add an image tag with the source 4 Present Multimedia Using HTML
set to the trombone.jpg file from the images folder, the width set to 460, the 4.1 Construct and analyze markup
height set to 345, and the alternative text set to trombone that displays images
8. Save your changes. 4.1.a Img and picture elements and
9. Preview the webpage.You should see two pictures: one of a mandolin and one of a their attributes
trombone.

41 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Image Layouts and Links Project Details
For a consistent image layout in a webpage, there are two main ways to accomplish this.
Either the images should be placed in a table, or one can use CSS styles to lay out the Project Files:
41a-instruments2.html
images. As CSS is covered later in this course, this project will show how to use a table
to align images to text.
Estimated Completion
Hyperlinks can also be added to images. A common use for this is to link an image to a Time:
larger version of it, which technically is a different file. 10 minutes

Purpose: Video Reference:

Session 3
After completing this project, you will see how to use a table to align images within a
Topic: Images, SVG, and Canvas
webpage.You will also be able to link an image to another image. Elements
Subtopic: Image Layouts; Image
Steps for Completion: Links
1. Open the 41a-instruments2.html file from your MusicStore3 student folder.
2. Look for the code containing the two images. Objectives Covered:
3. Above the images, but below the Featured Instruments heading, add a table with 4 Present Multimedia Using HTML
two rows and two cells in each row. 4.1 Construct and analyze markup that
displays images
4. Move the two image tags to the two table cells in the first row of the table. 4.1.a Img and picture elements and
5. Move the two paragraphs, Mandolin and Trombone, to the two cells in the second their attributes
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.

42 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
SVG and Canvas Tags Project Details
SVGs (Scalable Vector Graphics) are created using math instead of pixels and can change
scale easily without becoming pixelated. A canvas is a defined area of a webpage that
Project Files:
42-svg.html
contains text and defined shapes. The canvas tag is similar to SVG but has different
42-canvas.html
syntax that allows JavaScript to add detailed design to the canvas. SVGs are strictly
graphic elements. The canvas tag is used when both text and graphics need to be applied
to a specific area of the webpage. Estimated Completion
Time:
5-10 Minutes
Note that an SVG can contain text but the text will be in a graphics format and thus
cannot be adjusted within a webpage.
Video Reference:
Session 3
Purpose:
Topic: Image, SVG, and Canvas
Upon completing this project, you will know the difference between an SVG and canvas Elements
tag and be able to apply them to a webpage. Subtopic: SVG Tag: Canvas Tag

Steps for Completion: Objectives Covered:

1. Open the 42-svg.html file in the MusicStore3 student folder. 4 Present Multimedia Using HTML
2. Surround the circle and rectangle tags with an opening and closing svg tag with an id 4.2 Describe the appropriate use of
of shapes and a height set to 300 the img, svg and canvas elements

3. Save your changes.

4. Preview the webpage in a browser. The webpage should look like this:

5. Open the 42-canvas.html file in the MusicStore3 student folder.

6. Inside the body tag, add code to make the canvas tag load when the webpage is
opened.
7. Preview the webpage in a browser. The webpage should look like this:

43 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Video and Source Tags Project Details
When linking a video to a webpage you will want to use multiple sources with multiple
video formats as not all browsers support all video formats. When adding a video, it is
Project Files:
43a-media.html
good practice to add controls so a user can control the play settings of the video.
Happy.mp4
Happy.mov
Purpose:
Upon completing this project, you will be able to add a video tag, video controls, and Estimated Completion
multiple play sources to an HTML document.
Time:
10 Minutes
Steps for Completion:
1. Open the 43a-media.html file in the MusicStore3 student folder. Video Reference:
2. Add an opening and closing video tag below the paragraph, See this cool close-up of Session 3
a piano player. Set the video height to 480 Topic: Video and Audio Formats
3. Add the controls attribute to the opening video tag. Subtopic: Video and Source Tags
4. Inside the video tag, add a source tag for the video file, Happy.mp4, located in the
Videos folder, with the type video/mp4 Objectives Covered:
5. On the next line, add a source for the video file, Happy.mov located in the Videos 4 Present Multimedia Using HTML
folder, with the type video/quicktime 4.3 Construct and analyze markup
that plays video and audio
6. Save your changes.
4.3.a Video tag
7. Preview the webpage in a web browser.You should see a video player with controls. 4.3.d Source tag
8. Play the video.

44 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Audio and Track Tags Project Details
Audio tags are added to an HTML file in a very similar fashion as that of video tags. An
audio tag can have multiple source tags and should have audio controls for the user to Project Files:
43b-media.html
control audio play settings.
metronome_audio.mp3
subtitles.vtt
The track tag works with VTT (web video techs track standard) files. Track tags and VTT
files are not supported by all web browsers. The most common VTT formats that are
Estimated Completion
used are captions and subtitles. The language to use will need to be specified in the track
tag. The track tags can have multiple files with multiple languages if needed. Time:
10 Minutes

Purpose:
Upon completing this project, you will be able to add an audio tag with controls to an
Video Reference:
Session 3
HTML document.You will also be able to add a track tag using subtitles to a video tag.
Topic: Video and Audto Formats
Subtopic: Audio and Source Tags;
Steps for Completion: Track Tag
1. Open the 43b-media.html file in the MusicStore3 student folder.
2. Add an opening and closing audio tag below the paragraph that starts with, Don’t Objectives Covered:
know what a metronome sounds like? 4 Present Multimedia Using HTML
3. Add the controls attribute to the opening audio tag. 4.3 Construct and analyze markup that
plays video and audio
4. Inside the audio tag, add a source attribute for the audio file, metronome_audio.
4.3.b. Audio tag
mp3, located in the Audio folder, with the type audio/mp3
4.3.c Track tag
5. Below the two source tags within the video tag, add a track tag with the source set 4.3.d Source tag
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.

45 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Simple Iframe Implementations Project Details
An iframe is a frame that holds content inside a webpage. The iframe can hold a source
from another webpage that can easily be changed with the click of a button or other
Project Files:
43e-media.html
user interaction. An iframe will let you put one HTML file within another HTML file.
vtt.html

Purpose:
Estimated Completion
Upon completing this project, you will know what an iframe does, as well as how to
apply it to a webpage.
Time:
5 Minutes

Steps for Completion:

Video Reference:
1. Open the 43e-media.html file in the MusicStore3 student folder. Session 3
2. Add an opening and closing iframe tag on the line below the paragraph, Here is an Topic: Video and Audio Formats
example of an iframe. Subtopic: iFrame Implementations
3. Set the iframe width to 300, the height to 300, the id to vtt, and the source to
vtt.html Objectives Covered:
4. Save your changes. 4 Present Multimedia Using HTML
5. Preview the webpage in a web browser.You should see the following at the bottom 4.3 Construct and analyze markup
of the page: that plays video and audio
4.3.e Simple iframe implementations

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

46 | Session 3 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 4
Fill-in-the-Blanks Session 4
Instructions: While watching Session 4, fill in the missing words according to the information presented by the instructor.
[References where answers are found are in brackets.]

Define Style Sheets

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

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]

CSS Best Practices

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

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

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

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

48 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Creating Style Sheets Project Details
Style sheets, better known as Cascading Style Sheets (CSS), are used to control
formatting within a webpage and, as is the case with external style sheets, part or all of Project Files:
21a-index.html
a website. Style sheets consist of one or more combinations of an HTML tag or class
paired with one or more formatting properties. There are three types of style sheets
one can use in web design: Estimated Completion
External: a style sheet that is created as a separate file and then applied to some Time:
or all pages in a website. 10 Minutes
Internal: a style sheet that is created and applied to a single webpage.
Inline: a style applied directly to an HTML tag on a webpage. Video Reference:
Session 4
Topic: Define Style Sheets
The cascading part of Cascading Style Sheets works in this manner: inline styles will take Subtopic: Inline, Internal, and
precedence over internal styles and internal styles will take precedence over external External Styles
styles. For example, an inline style for a single paragraph (p) tag could set the color to
navy. An internal style sheet could set paragraphs to maroon. An external style sheet
Objectives Covered:
could set paragraphs to gray. In this instance, all paragraphs except the navy one would
2 Understand CSS Fundamentals
be maroon.
2.1 Analyze the impact of using inline
styles, internal style sheets, and
Purpose: external style sheets
Upon completing this project, you will be able to create a style sheet and apply it to a 2.1.a When to use each style sheet
webpage.

Steps for Completion:

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.

49 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Style Sheet Precedence Project Details
As mentioned in the previous project, inline styles will take precedence over internal
styles and internal styles will take precedence over external styles. For the exam, make Project Files:
21b-main.css
sure you understand this cascading order of styles sheets and be able to identify what
21b-books.html
format will apply to HTML code depending upon the style sheet situation.
21b-index.html

Purpose:
Estimated Completion
Upon completing this project, you will further understand the cascading aspect of
Cascading Style Sheets. Time:
15 Minutes

Steps for Completion:

Video Reference:
1. Open the 21b-main.css file in the MusicStore4 student folder.
Session 4
2. Add the pargraph tag as a tag to be styled in the style sheet. Topic: Define Style Sheets
3. For the paragraph tag, set the color to navy. Subtopic: Style Sheet Precedence
4. Open the 21b-index.html and 21b-books.html files from the MusicStore4
student folder. Objectives Covered:
5. Preview both pages in a web browser. The paragraph text on both pages should be 2 Understand CSS Fundamentals
navy blue. 2.1 Analyze the impact of using inline
6. Return to the 21b-books.html file in the code editor. styles, internal style sheets, and
external style sheets
7. Add an internal style sheet to the page. 2.1.b Precedence when using a
8. In the internal style sheet, add a selector for the paragraph tag, setting the color to combination of inline styles and style
maroon. sheets
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 all all of these great books!, which should be
fuchsia.

50 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Valid Syntax for Rule Sets Project Details
A rule set is a combination of a selector which can be a tag, class, or id, and a property
and value pair set in a style sheet. For each rule set, the selector is listed first and the Project Files:
22a-main.css
property and value pairs are all contained within a set of curly brackets. The property
22a-index.html
is listed, a colon is added, the value is added, and then a semicolon finishes the pair.
Properties never contain spaces. Where one would think there is a space, a dash is used.
For example, font family has a property name of font-family. Estimated Completion
Time:
Purpose: 5 Minutes
Upon completing this project, you will understand CSS rule sets and be able to apply a
rule set to a CSS style sheet. Video Reference:
Session 4
Steps for Completion: Topic: CSS Rule Sets
Subtopic: Valid Syntax
1. Open the 22a-main.css file in the MusicStore4 student folder.
2. Within the body rule set, add a background color property with the value set to
#fab66b
Objectives Covered:
2 Understand CSS Fundamentals
3. Save your changes. 2.2 Construct and analyze rule sets
4. Open the 22a-index.html file in the MusicStore 4 folder. 2.2.a Valid syntax for the CSS rule set
5. Preview the webpage in a browser. The webpage background should be a peach
color.

51 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Apply Classes Project Details
A CSS class is a style that can be applied to any tag at any time. A class is created in a
CSS style sheet but applied to an HTML tag. Classes all start with a dot and can have any
Project Files:
22b-main.css
name, so long as the name is valid. For example, a class name cannot have spaces.
22b-books.html

Purpose:
Estimated Completion
Upon completing this project, you will be able to create a CSS class in a CSS style sheet
and apply the class to an HTML tag.
Time:
10 Minutes

Steps for Completion:

Video Reference:
1. Open the 22b-main.css file in the MusicStore4 student folder. Session 4
2. Below the current rule sets, add a class named sale Topic: CSS Rule Sets
3. Within the sale class, add a rule set to set the font weight to bold Subtopic: Apply Classes
4. Within the sale class, add a rule set to set the background color to aqua
5. Save your changes. Objectives Covered:
6. Open the 22b-books.html file in the MusicStore4 student folder. 2 Understand CSS Fundamentals
2.2 Construct and analyze rule sets
7. Add an opening and closing span tag around the words, Special sale!, near the end of
2.2.b Selectors (class, id, elements,
the page. pseudo-class)
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.

52 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Apply ids Project Details
In HTML, ids have multiple purposes. First, any scripts used to enhance an HTML
element will refer to the element by id. Secondly, ids can be added to CSS files and Project Files:
22b2-main.css
then used in a similar fashion as are classes. However, an id can only be used once
22b2-spotlight.html
per webpage in this scenario. Classes can be used an unlimited number of times per
webpage.
Estimated Completion
Whereas classes start with a dot, ids, start with a pound symbol (#). Time:
10 Minutes

Purpose:
Upon completing this project, you will be able to create a CSS id and apply the id to an
Video Reference:
Session 4
HTML tag.
Topic: CSS Rule Sets
Subtopic: Apply IDs
Steps for Completion:
1. Open the 22b2-main.css file in the MusicStore4 student folder. Objectives Covered:
2. Below the current list of rule sets, add an id selector with the name, sidenote 2 Understand CSS Fundamentals
3. Within the selector, add a rule set that sets the background color to #dbd9d9 2.2 Construct and analyze rule sets
4. Save your changes. 2.2.b Selectors (class, id, elements,
pseudo-class)
5. Open the 22b2-spotlight.html file in the MusicStore4 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.

53 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Apply Pseudo Classes Project Details
A CSS pseudo class applies specifically to an HTML tag. A tag can have multiple
pseudo classes that can be applied to that specific tag. For example, the anchor tag (a) Project Files:
22b3-main.css
has multiple pseudo classes, with the link, visited, and hover pseudo classes as some
22b3-books.html
examples. A psuedo class is added, after a colon, to a tag in a rule set.

Purpose: Estimated Completion

Upon completing this project, you will be able to create a CSS pseudo class and apply Time:
the pseudo class to a specific HTML tag. 10 Minutes

Steps for Completion: Video Reference:

Session 4
1. Open the 22b3-main.css file in the MusicStore4 student folder.
Topic: CSS Rule Sets
2. Add a rule set for the a tag. Subtopic: Apply Pseudo Classes
3. Within the rule set, set the text decoration property to none
4. Add a rule set for the a tag with the hover pseudo-class. Objectives Covered:
5. Within the rule set, set the text decoration property to underline and the font 2 Understand CSS Fundamentals
weight to bold 2.2 Construct and analyze rule sets
6. Save your changes. 2.2.b Selectors (class, id, elements,
pseudo-class)
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.

54 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Reusing Rules and Rule Sets Project Details
Code that can be reused will save time and limit errors. To reuse code is simply just a
matter of copying and pasting the code where it is needed. Of course, you will want to
Project Files:
23a-main.css
make sure that if you intend to make slight adjustments to code that you are reusing you
23a-spotlight.html
do so in the correct spots.

Purpose: Estimated Completion

Upon completing this project, you will be able to reuse code from one CSS rule set to
Time:
5 Minutes
another.

Steps for Completion: Video Reference:

Session 4
1. Open the 23a-main.css file in the MusicStore4 student folder. Topic: CSS Best Practices
2. Create a rule set for the figcaption tag. Subtopic: Reusing Rules and Rule
3. Fill the rule set for the figcaption tag with the color property and value from the Sets
paragraph tag and the font weight and background color from the sale class.
4. Save your changes. Objectives Covered:
5. Open the 23a-spotlight.html file in the MusicStore4 student folder. 2 Understand CSS Fundamentals
2.3 Construct well-formed style
6. Preview the webpage in a browser. The caption below the image should have a bold, sheets that conform to industry best
navy font and have an Aqua line highlight. practices
2.3.a Reusing rules and rule sets

55 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
CSS Comments Project Details
Comments are used to explain code and are best practice when multiple people are
collaborating on a CSS style sheet. Code or text within a comment will not show on a
Project Files:
23b-main.css
webpage. Whereas HTML comments start with a <!-- and end with a -->, CSS comments
23b-spotlight.html
start with a /* and end with a */.

Estimated Completion
Comments can also be used over existing code to force a style sheet to ignore that
code. This can be useful when testing rule sets and property/value combinations on
Time:
5 Minutes
webpages.

Purpose: Video Reference:

Session 4
Upon completing this project, you will be able to add comments to a CSS style sheet. Topic: CSS Best Practices
Subtopic: CSS Comments
Steps for Completion:
1. Open the 23b-main.css file in the MusicStore4 student folder. Objectives Covered:
2. Add a comment above the figcaption that says, The background color extends 2 Understand CSS Fundamentals
across the page, so, we have commented it out for now 2.3 Construct well-formed style
3. Within the figcaption rule set, comment the background color property/value sheets that conform to industry best
practices
combination out so that it will be ignored in the code.
2.3.b Commenting
4. Save your changes.
5. Open the 23b-spotlight.html file in the MusicStore4 student folder.
6. Preview the webpage in a browser. There should be no Aqua line highlighting on the
caption below the image.

56 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Multiple Browser Tests and Web Project Details

Safe Fonts Project Files:

23c-spotlight.html
A webpage style should work on multiple browsers and media types. It is important
23c-main.css
to use simple styles in CSS so that the styles used are viewable in different browsers.
It is good practice to test your webpages in multiple browsers before publishing the
webpages. The more complex the styles, the more likely it is the styles will not work Estimated Completion
fully. Time:
10 Minutes

When working with the font-family property in style sheets, you will want to use
multiple fonts as not every user has every font you may want to display.You will also Video Reference:
want to indicate the font family being used so that a user’s default font for a specific Session 4
family can be used if needed. This will at least ensure that the font displayed is similar Topic: CSS Best Practices
to the font you intended for that particular style. This is the concept of using Web Safe Subtopic: Multiple Browser Tests;
Web Safe Fonts
fonts, fonts that will properly display in a web browser.

Purpose: Objectives Covered:

2 Understand CSS Fundamentals
Upon completing this project, you will be able to test webpage styles in multiple 2.3 Construct well-formed style
browsers.You will also know how to set up a CSS rule set to use Web Safe fonts. sheets that conform to industry best
practices
Steps for Completion: 2.3.c Testing on multiple browsers
1. Open the 23c-spotlight.html file in the MusicStore4 student folder. 2.3.d Web safe fonts

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?

4. Open the 23c-main.css file in the MusicStore4 student folder.

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.

57 | Session 4 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 Session 5

58 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Fill-in-the-Blanks Session 5
Instructions: While watching Session 5, fill in the missing words according to the information presented by the instructor.
[References where answers are found are in 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. Setting the overflow property helps control what happens when extra content breaks out of an element’s
area. [Overflow Settings]

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

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

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

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

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

Format Text with CSS

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

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

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

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

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

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

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

59 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 19. The property controls the first line text indent in a paragraph. [Indentation]

Backgrounds and Borders

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

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

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

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

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

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

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

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

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

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

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

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

60 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Height and Max-Width Used with Project Details

an Element Project Files:

51a-positioningexample.html
A div tag with an id that is styled will help you have more control of the webpage layout
you are creating. The max-width property helps the webpage layout to stay the size of
the average screen size of your users, regardless of the set screen width in the CSS style Estimated Completion
sheet. Time:
10 Minutes
Purpose:
Upon completing this project, you will be able to use height and width in webpage Video Reference:
layouts and set a max-width property for a webpage. Session 5
Topic: Position Text with CSS
Subtopic: Height and Width; Max-
Steps for Completion: Width Used with an Element
1. Open the 51a-positioningexample.html file in the MusicStore5 student folder.
2. Add the width of 250px and a height of 250px to the blue, yellow, and coral rules Objectives Covered:
within the inline style sheet. 5 Style Webpages Using CSS
3. Save your changes. 5.1 Construct and analyze styles that
4. Preview the webpage in a browser. The three colored elements should be stacked position content
one on top of the other. 5.1.a Positioning (float, relative,
absolute, max-width, overflow, height,
5. Scroll down the page. Notice that the text for the coral element does not fit inside width, align)
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.

61 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Float Positioning Project Details
When an element is floated, it is moved to a specific area on the screen so other
elements below it can move up. Elements can be float positioned side by side if the
Project Files:
51af-positioningexample.html
screen width will allow the change, or they can float with one side or both sides of the
element cleared out using the clear property within CSS.
Estimated Completion
Purpose: Time:
10 Minutes
Upon completing this project, you will be able to use the float property to style a
webpage with elements that are side by side or alone on the webpage.
Video Reference:
Session 5
Steps for Completion:
Topic: Position Text with CSS
1. Open the 51af-positioningexample.html file in the MusicStore5 student folder. Subtopic: Float Positioning
2. In the style sheet, add a property/value pair to the blue rule set that sets the float
property to left Objectives Covered:
3. In the yellow rule, add a property/value pair that sets the float property to left 5 Style Webpages Using CSS
4. Save your changes. 5.1 Construct and analyze styles that
5. Preview the webpage in a web browser. Notice that the blue element now floats to position content
the left of the yellow element and the yellow element floats to the left of the coral 5.1.a Positioning (float, relative,
absolute, max-width, overflow, height,
element, but the text is spilling out of the coral element. width, align)
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.

62 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Relative and Absolute Positioning Project Details
Relative and absolute positioning give more control over where elements are placed on Project Files:
a webpage than the float property. Relative positioning of an element positions it offset 51ar-positioningexample.html
relative to where the normal position was and is not an exact set location. Relative
positioning does not otherwise change the overall flow of elements.
Estimated Completion
Time:
Absolute positioning of an element will position it exactly in the location placed in the 15 Minutes
code. Absolute positioning will change the flow of elements below it if they are not also
absolutely positioned. Absolute positioning will give you the most control of elements in
a webpage. Video Reference:
Session 5
Topic: Position Text with CSS
Purpose: Subtopic: Relative Positioning:
Upon completing this project, you will be able to use relative and absolute positioning of Absolute Positioning
elements in a webpage.
Objectives Covered:
Steps for Completion: 5 Style Webpages Using CSS
1. Open the 51ar-positioningexample.html file in the MusicStore5 student folder. 5.1 Construct and analyze styles that
position content
2. In the internal style sheet, comment out the float property/value combination in the
5.1.a Positioning (float, relative,
blue rule set. absolute, max-width, overflow, height,
3. Comment out both the float and clear property/value combinations in the yellow width, align)
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.

63 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Overflow and Alignment Settings Project Details
Overflow settings keep the text from overflowing an element. The main use of the
overflow property is to tell text to scroll if it otherwise does not fit within an element.
Project Files:
51ao-positioningexample.html
It is good practice to set overflow settings to maintain the control of element designs in
different browsers.
Estimated Completion
Another property worth setting for text in CSS is the text-align property. The text-align
Time:
5 Minutes
property can be used in any tag or class that uses text. It is best practice to use CSS for
text alignment.
Video Reference:
Session 5
Purpose:
Topic: Position Text with CSS
Upon completing this project, you will be able to add alignment to an element, and a Subtopic: Overflow Settings;
scroll bar, using overflow settings, to a webpage element. Alignment

Steps for Completion: Objectives Covered:

1. Open the 51ao-positioningexample.html file in the MusicStore5 student folder. 5 Style Webpages Using CSS
2. Change the coral element width to 250px 5.1 Construct and analyze styles that
position content
3. Add an overflow property to the coral element with the value set to scroll
5.1.a Positioning (float, relative,
4. Save your changes. absolute, max-width, overflow, height,
5. Preview the webpage in a browser.You should see a scroll bar on the side of the width, align)
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.

64 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Inline vs. Block Project Details
CSS style sheets will default elements to blocks, which places one element after another
on a webpage. The display property can be set to move elements to be in line with each Project Files:
51b-main.css
other on a webpage.
51b-spotlight.html

Purpose:
Estimated Completion
Upon completing this project, you will understand the difference between inline and
block layouts and be able to use them in a CSS style sheet. Time:
5-10 Minutes

Steps for Completion:

Video Reference:
1. Open the 51b-main.css file in the MusicStore5 student folder.
Session 5
2. Remove the comment from the background-color property in the figcaption rule Topic: Position Text with CSS
set. Subtopic: Inline vs. Block
3. Inside the figcaption rule set, add the display property and set the value to inline
4. Inside the sidenote rule set, add the display property and set the value to inline Objectives Covered:
5. Save your changes. 5 Style Webpages Using CSS
6. Open the 51b-spotlight.html file in the MusicStore5 student folder. 5.1 Construct and analyze styles that
position content
7. Preview the webpage in a web browser. Notice that with the inline display, the two
5.1.b Inline vs. block
highlighted pieces of text no longer take up the width of the page.

65 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Visibility Project Details
Elements can be set not to be visible on a webpage and then dynamically set to display,
Project Files:
usually on either a click or a mouse hover by a user over a visible element along with
51c-positioningexample.html
the getElementById method on the object to set the visibility property to visible. This
is not the same as the details and summary HTML tags, but the visible element can be
used in a similar fashion. Estimated Completion
Time:
Purpose: 10 Minutes
Upon completing this project, you will be able to start with an element not set to visible
and then use an event to make an element visible.
Video Reference:
Session 5
Steps for Completion: Topic: Position Text with CSS
1. Open the 51c-positioningexample.html file in the MusicStore5 student folder. Subtopic: Visibility
2. In the internal style sheet, add the visibility property, with a value of hidden, to the
coral rule set. Objectives Covered:
3. Save your changes. 5 Style Webpages Using CSS
4. Preview the webpage in a web broswer. The coral element should be invisible. 5.1 Construct and analyze styles that
position content
5. Return to your code editor.
5.1.c Visibility
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.

66 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Box Model Margins and Padding Project Details
Margins control the distance between objects on a webpage, while padding controls the
distance between edges of an object and the text inside the object. Margins and padding
Project Files:
51d-positioningexample.html
can be set for all sides in one property/value set or a separate property/value set can be
used for each side. When setting the code for all sides at once, the measurements will
move in a clockwise position starting with the top measurement. Estimated Completion
Time:
Purpose: 10 Minutes

Upon completing this project, you will know the difference between margins and
padding and be able to add margins and padding to objects in a webpage. Video Reference:
Session 5
Topic: Position Text with CSS
Steps for Completion:
Subtopic: Box Model Margins; Box
1. Open the 51d-positioningexample.html file in the MusicStore5 student folder. Model Padding
2. In the blue rule set, remove the comment around the float property/value
combination. Objectives Covered:
3. In the yellow rule set, adjust the comment block so that the float property/value 5 Style Webpages Using CSS
combination is not commented out and the clear, position, top, and left property/ 5.1 Construct and analyze styles that
value combinations are commented out. position content
4. In the yellow rule set, add a margin property and set the values to 0px, 10px, 0px, 5.1.d Box model (margins and
padding)
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 of your open files in the browser and the code editor, saving changes if
prompted.

67 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Font Families in CSS Project Details
The font properties can have type, size, color, style, and weight all adjusted in a CSS style
sheet. For font families, it is a best practice to use multiple fonts and then a font family Project Files:
52a-main.css
default so that users who do not have the first font specified can still see the text with a
52a-books.html
font you choose, not the default font on their browsers.

Purpose: Estimated Completion

Upon completing this project, you will be able to apply font families to a CSS style sheet. Time:
5-10 Minutes

Steps for Completion:

Video Reference:
1. Open the 52a-main.css file in the MusicStore5 student folder.
Session 5
2. On the line above the figcaption rule set, add a rule set for all six headings (h1 Topic: Format Text with CSS
through h6). Subtopic: Font-Family
3. Within the new rule set, add a font family property and set the values to helvetica,
arial, and sans-serif Objectives Covered:
4. Save your changes. 5 Style Webpages Using CSS
5. Open the 52a-books.html file in the MusicStore5 student folder. 5.2 Construct and analyze styles that
6. Surround the text, Welcome to THE Music Store, with an h1 tag. format text
5.2.a Font-family
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.

68 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Font Colors in CSS Project Details
Font colors can and should be controlled through CSS. There are two basic ways to
assign values to colors. First, color names can be used. Some browsers support more Project Files:
52b-main.css
color names than others, however, so hexadecimal values are a better choice for color
52b-spotlight.html
values, as hexadecimal values are supported in all browsers.

Purpose: Estimated Completion

Upon completing this project, you will be able to apply font colors within a CSS style Time:
sheet. 5 Minutes

Steps for Completion: Video Reference:

Session 5
1. Open the 52b-main.css file in the MusicStore5 student folder.
Topic: Format Text with CSS
2. Within the figcaption rule set, add a color property with a value of #032f0d Subtopic: Color
3. Save your changes.
4. Open the 52b-spotlight.html file in the MusicStore5 student folder. Objectives Covered:
5. Preview the webpage in a web browser.You should see the text, The Mighty Kazoos, 5 Style Webpages Using CSS
in a dark green color. 5.2 Construct and analyze styles that
format text
5.2.b Color

69 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Font Styles and Weights in CSS Project Details
In CSS, font styles control the shape of a font from the standpoint of whether the
font is italic. Font weight controls the boldness of a font, which can be indicated either Project Files:
52c-main.css
with a value of bold or a value from 0 to 1000. A bold font will be more consistent
52c-books.html
with the bold value than with numbers across different browsers. Many browsers will
only recognize 400 and 700 as measurements of boldness, so use other measurements
sparingly. Estimated Completion
Time:
Purpose: 10 Minutes
Upon completing this project, you will be able to apply font styles and font weights to a
CSS style sheet. Video Reference:
Session 5
Steps for Completion: Topic: Format Text with CSS
Subtopic: Font-Style; Font-Weight
1. Open the 52c-main.css file in the MusicStore5 student folder.
2. In the sale rule set, add a font style property with the value set to italic
Objectives Covered:
3. In the sale rule set, add a font weight property with the value set to 700 5 Style Webpages Using CSS
4. Save your changes. 5.2 Construct and analyze styles that
5. Open the 52c-books.html file in the MusicStore5 student folder. format text
6. Preview the webpage in a web browser. The text, Special Sale, should be bold and 5.2.c Font-style
italic. 5.2.d Font-weight

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.

70 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Link Colors in CSS Project Details
The color property changes the font color of text within a CSS rule set. This property
can also be used in pseudo classes. By default, unvisited links are blue, visited links are Project Files:
52e-main.css
purple, and active links are red. These colors can be changed, but in doing so you will
52e-spotlight.html
want to make sure that link colors are consistent throughout your site.

Purpose: Estimated Completion

Upon completing this project, you will be able to apply colors to link-based pseudo Time:
classes in a CSS style sheet. 10 Minutes

Steps for Completion: Video Reference:

Session 5
1. Open the 52e-main.css file in the MusicStore5 student folder.
Topic: Format Text with CSS
2. In the existing rule set for the a tag, add a color property with the value set to Subtopic: Link Colors
darkgreen
3. Below the existing rule set, add a rule set for the a tag and the active pseudo class. Objectives Covered:
4. Inside the new rule set, add a color property with the value set to #63f60a 5 Style Webpages Using CSS
5. Below the existing rule set, add a rule set for the a tag and the visited pseudo class. 5.2 Construct and analyze styles that
6. Inside the new rule set, add a color property with the value set to #808080 format text
5.2.e Link colors
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.

71 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Text Alignment and Decoration Project Details
Text alignment has been covered in previous lessons. In this project, we will be covering
text alignment in tables. Aligning text in a table is important to the presentation of the Project Files:
52f-main.css
table as it can make a table stand out and make it easier to read. Often, the vertical align
52f-hours.html
property is used to position text vertically within a cell.

Estimated Completion
The text-decoration property will control if text is underlined or not underlined.
There are several types of underline styles, but they may not be supported in multiple Time:
browsers. When adding any type of styling it is good practice to check if the style is 10 Minutes
supported in different browsers.
Video Reference:
Purpose: Session 5
Topic: Format Text with CSS
Upon completing this project, you will be able to apply text alignment to a table using
Subtopic: Text-Alignment; Text-
CSS.You will also be able to apply the text decoration property within CSS. Decoration

Steps for Completion: Objectives Covered:

1. Open the 52f-main.css file in the MusicStore5 student folder. 5 Style Webpages Using CSS
2. At the bottom of the style sheet, add a class named vbot that only applies to table 5.2 Construct and analyze styles that
cells. format text
3. Within the new class, add a vertical align property with the value of bottom 5.2.f Text formatting (text alignment,
text decoration, indentation)
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.

72 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Indentation Project Details
The text indent property controls the first line text indent in a multi-lined paragraph. To
indent more than the first line in a paragraph, use the padding property.
Project Files:
52fi-main.css
52fi-index.html
Purpose:
Upon completing this project, you will be able to use the text indent property to Estimated Completion
control the indentation of the first line in a paragraph.
Time:
10-15 Minutes
Steps for Completion:
1. Open the 52fi-main.css file in the MusicStore5 student folder. Video Reference:
2. Below the sale class, add a class named indent Session 5
3. Within the new class, add a text indent property with a value of 5em Topic: Format Text with CSS
4. Open the 52fi-index.html file in the MusicStore5 student folder. Subtopic: Indentation
5. Down the page, wrap an opening and closing paragraph tag around the text: We
are open seven days a week...We look forward to seeing you! Objectives Covered:
6. Add the indent class to the open paragraph tag. 5 Style Webpages Using CSS
5.2 Construct and analyze styles that
7. Save your changes. format text
8. Preview the webpage in a browser. The first sentence in the last paragraph on the 5.2.f Text formatting (text alignment,
webpage will be indented. text decoration, indentation)
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 leftindent class should be indented.
12. Close all open files in your browser and code editor, saving changes if prompted.

73 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Border Color and Style Project Details
The border color property sets a color for a border. The border color only works if a
border style is set, as a border style must be set in order for a border to be displayed. Project Files:
53a-main.css
The more complex the border style, the more important it is to test the style in
53a-spotlight.html
multiple browsers to make sure the border style is supported properly.

Purpose: Estimated Completion

Upon completing this project, you will be able to set border colors and styles in a style Time:
sheet. 10-15 Minutes

Steps for Completion: Video Reference:

Session 5
1. Open the 53a-main.css file in the MusicStore5 student folder.
Topic: Backgrounds and Borders
2. In the sidenote rule set, set a border color property with a value of navy Subtopic: Border-Color; Border-
3. In the sidenote rule set, set a border style property with a value of solid Style
4. Save your changes
5. Open the 53a-spotlight.html file in the MusicStore5 student folder. Objectives Covered:
6. Preview the webpage in a web browser. The sidenote text should show on the right 5 Style Webpages Using CSS
side of the screen with a solid navy border around the text. 5.3 Construct and analyze styles that
format backgrounds and borders
7. Return to your code editor. 5.3.a Border-color
8. Return to the 53a-main.css file. 5.3.b Border-style
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.

74 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Border Width Project Details
The border width property is typically set using pixels as a measurement. A border
width can be set for all sides of an object, or individual widths can be set for each side Project Files:
53c-main.css
of an object. Futhermore, shorthand can be used as a border property can have a width,
53c-spotlight.html
style, and color all set at once.

Purpose: Estimated Completion

Upon completing this project, you will be able to set border widths for an entire object Time:
and for individual sides of an object. 15 Minutes

Steps for Completion: Video Reference:

Session 5
1. Open the 53c-main.css file in the MusicStore5 student folder.
Topic: Backgrounds and Borders
2. In the sidenote rule set, add a border width property with a value of 1px Subtopic: Border-Width
3. Save your changes.
4. Open the 53c-spotlight.html file in the MusicStore5 student folder. Objectives Covered:
5. Preview the webpage in a web browser.You should see a one-pixel border around 5 Style Webpages Using CSS
the sidenote text. 5.3 Construct and analyze styles that
6. Return to the 53c-main.css file in the code editor. format backgrounds and borders
5.3.a Border-color
7. In the sidenote rule set, set the border width property value to 0px
5.3.b Border-style
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.

75 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Backgrounds Project Details
There are two main types of backgrounds that can be used with webpages: colors
and images. In a previous lesson we applied the color property to the body tag, which
Project File:
53d-positioningexample.html
creates a background color. In this project, we will use an image as a background. To use
an image, a pointer to a URL is needed.
Estimated Completion
An additional property that is often used with an image is the background repeat
Time:
5 Minutes
property. A background image can be set to not repeat (no-repeat), to repeat across
the top of a page (repeat-x), or to repeat vertically (repeat-y). The default repeat is to
tile the background image through the page. Video Reference:
Session 5
Topic: Backgrounds and Borders
Purpose:
Subtopic: Backgrounds
Upon completing this project, you will be able to apply an image to the webpage
background and have the image repeat itself on the page.
Objectives Covered:
5 Style Webpages Using CSS
Steps for Completion: 5.3 Construct and analyze styles that
1. Open the 53d-positioningexample.html file in the MusicStore5 student folder. format backgrounds and borders
2. At the bottom of the internal style sheet, add a class named backimage 5.3.d Backgrounds
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 backrgound 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.

76 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Divs and Colors Project Details
A div tag can be used to control the entire width of a webpage. The more fixed your
layout is, the less fluid your webpage will be across different devices. However, this may Project File:
53e-main.css
be necessary if your website is viewed on a lot of smaller devices.
53e-spotlight.html

Colors have been covered throughout this course. Remember that hexadecimal colors
Estimated Completion
are the safest colors to use as they have the largest browser support. Hexadecimal
colors closer to #000000 are darker and hexadecimal colors closer to #FFFFFF are Time:
lighter. The first pair of values indicate the amount of red in the color, the second pair, 10-15 Minutes
green, and the third pair, blue. Colors with matching red, green, and blue pairs, such as
#333333 and #0F0F0F are shades of gray. Video Reference:
Session 5
Purpose: Topic: Backgrounds and Borders
Subtopic: Divs; Working with
Upon completing this project, you will be able to use a div tag to set the width of Colors
a webpage.You will also have a further understanding of how colors are used on a
webpage.
Objectives Covered:
5 Style Webpages Using CSS
Steps for Completion: 5.3 Construct and analyze styles that
1. Open the 53e-main.css file in the MusicStore5 student folder. format backgrounds and borders
2. Before the a tag rule set, add an id-based rule set named pagewidth 5.3.e Divs
3. In the new pagewidth rule set, add a width property with the value set to 500px 5.3.f Colors

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 of your open files in both the browser and the code editor, saving changes
where prompted.

77 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Units of Measure Project Details
There are several different units of measure that can be used for sizing. Many of these
have already been seen in this course. Here is a recap of units of measure and their uses: Project File:
54a-main.css
em: A relative measurement equivalent to the font size being used. For example,
54a-index.html
3em = 3 x the size of the current font.
ex: A measurement relative to the height of the letter x
Estimated Completion
px: Technically, a measurement that is 1/96” of an inch but can vary based on screen
sizes
Time:
5 Minutes
pt: A measurement that is 1/72 of an inch
cm: A centimeter Video Reference:
in: An inch Session 5
mm: A millimeter Topic: Responsive Layouts
Subtopic: Units of Measure
Purpose:
Upon completing this project, you will know how to set measurements for one or more Objectives Covered:
elements on a webpage. 5 Style Webpages Using CSS
5.4 Analyze styles that implement a
simple responsive layout
Steps for Completion:
5.4.a Units of measure
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.

78 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Viewport and Media Query Project Details

Settings Project File:

54b-spotlight.html
Responsive web design allows websites to respond to different devices. The viewport
54b-main.css
property allows a website to work with devices of different sizes. The viewport property
is not designed to be used on webpages with large images. The image scale will be
independent of the webpage scale, and this will make the webpage not scale correctly for Estimated Completion
a webpage with large images. Time:
15 Minutes
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 style layouts with Video Reference:
the media query determining which of the styles to use. Session 5
Topic: Responsive Layouts
Subtopic: Viewport; Media Query
Purpose:
Upon completing this project, you will know when to use a viewport or media query
and be able to use them to create a responsive web design. Objectives Covered:
5 Style Webpages Using CSS
5.4 Analyze styles that implement a
Steps for Completion: simple responsive layout
1. Open the 54b-spotlight.html file in the MusicStore5 student folder. 5.4.b Responsive effects with CSS
2. In the head tag, add a meta tag that will use the viewport setting. (viewport and media query)
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.

79 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Percentages and Pixels Project Details
It is important that measurements of elements on a webpage do not exceed the screen
width of a device. Percentages are used to create fluidity with the element and device Project File:
screen size. A fixed pixel measurement is needed at times to control the measurements 54c-hours.html
of an element, like a fixed image. Small tables usually work well with a fluid layout using
percentages. Estimated Completion
Time:
Purpose: 15 Minutes
Upon completing this project, you will know when to use percentages or pixels for units
of measurement on a webpage and how to set a max width for these measurements. Video Reference:
Session 5
Steps for Completion: Topic: Responsive Layouts
Subtopic: Percentages and Pixels
1. Open the 54c-hours.html file in the MusicStore5 student folder.
2. Add an internal style sheet to the head tag, on the line below the link tag.
Objectives Covered:
3. In the internal style sheet, add a rule set for the table tag. 5 Style Webpages Using CSS
4. Within the table rule set, add a width property with the value set to 400px 5.4 Analyze styles that implement a
5. Save your changes. simple responsive layout
6. Preview the webpage in a web browser. 5.4.c Percentages vs. pixels

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.

80 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Frameworks, Templates, and Max Project Details

Width Project File:

54e-hours.html
A CSS framework is a template that is created or purchased and simplifies building
a website. When purchasing a template from the web, be aware of any licensing
requirements or restrictions. Estimated Completion
Time:
10 Minutes
Not related to frameworks, but in the final two topics for this course (along with
frameworks and templates) is the max width property in CSS. This property can prevent
a design from looking awkward, especially for a large screen. Video Reference:
Session 5
Topic: Responsive Layouts
Purpose:
Subtopic: Frameworks and
Upon completing this project, you will know how to explore CSS frameworks and set a Templates; Max-Width Property
max-width for an element.
Objectives Covered:
Steps for Completion: 5 Style Webpages Using CSS
1. In a web browser, spend a few minutes looking at CSS frameworks, such as the 5.4 Analyze styles that implement a
ones at csszengarden.com simple responsive layout
2. When you are done viewing frameworks, open the 54e-hours.html file in the 5.4.d Frameworks and templates
MusicStore5 student folder. 5.4.e Max-width
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.

81 | Session 5 MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
 Appendix

82 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS
(98-383) Suggested Study Plan
Each portion of this study plan is approximately 30-35 minutes and includes video training, fill-in-the-blanks, labs, projects, tests,
as well as the course support files. There is also a notes section for extra notes. By adhering to the lesson plan, it will take
approximately 25.5 hours to complete the course. For workbook projects, we recommend students do the fill-in-the-blank sections
as one watches the course.

Session 1: 4 lessons for approximately 2.5 hours

Day Tasks Files What is Covered Notes
1 Pre-Assessment 11a-scripts.html 1 Understand HTML Fundamentals
Videos: 1.1 Construct markup that uses metadata
elements
Introduction
1.1.a Script
Course Welcome
1.1.b Noscript
How to Study for This Exam
Markup with Metadata
Script Tag
Noscript Tag
Practice Lab:
Noscript
Workbook projects:
Fill-in-the-Blanks Session 1 Items 1-2
Script and Noscript Tags
2 Videos: 11c-scripts.html 1 Understand HTML Fundamentals
Markup with Metadata 1.1 Construct markup that uses metadata
Link Tag elements
Meta Tags 1.1.c Link
Well-Formed Markup 1.1.d Meta tags (encoding, keywords,
viewport, translate)
DOCTYPE Declaration and Html Tag
1.2 Construct well-formed markup that
Practice Labs: conform to industry best practices
Link Syntax 1.2.a DOCTYPE declaration
Add an HTML File
Workbook projects:
Fill-in-the-Blanks Session 1 Items 3-5
Link and Meta Tags
3 Videos: None to start 1 Understand HTML Fundamentals
Well-Formed Markup as they will be 1.2 Construct well-formed markup that
Head Tag built during the conform to industry best practices
Body Tag project 1.2.b HTML
Closing Tags 1.2.c Head tag
Entities 1.2.d Body tag
Comments 1.2.e Proper syntax (closing tags and
commonly used symbols)
Session 1 - Domain 1 Exam Tips
1.2.f Comments
Practice Lab:
Entities and Symbols
Workbook projects:
Fill-in-the-Blanks Session 1 Items 6-10
HTML Fundamentals
4 Post-Assessment

83 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 2: 13 lessons for approximately 7.5 hours

Day Tasks Files What is Covered Notes

1 Pre-Assessment 31a-hours.html 3 Structure Documents Using HTML
Videos: 31a-hours2.html 3.1 Construct and analyze markup to
structure content and organize data
Structure Content Through Markup
3.1.a Table tags
Table Tags
Table Attributes
Workbook projects:
Fill-in-the-Blanks Session 1 Item 1
HTML Tables
2 Videos: 31b-headings. 3 Structure Documents Using HTML
Structure Content Through Markup html 3.1 Construct and analyze markup to
Heading Tags 31b-index.html structure content and organize data
P Tag webpagetext.txt 3.1.b Heading tags (h1-h6)
Br Tag 3.1.c P tag
Hr Tag 3.1.d Br tag
Div Tag 3.1.e Hr tag
3.1.f Div tag
Practice Lab:
Using the DIV Tag
Workbook projects:
Fill-in-the-Blanks Session 2 Items 2-5
HTML Headings, Paragraphs, and Line
Breaks
3 Videos: 31e-index.html 3 Structure Documents Using HTML
Structure Content Through Markup 31h-index.html 3.1 Construct and analyze markup to
Span Tag structure content and organize data
Ul and Li Tags 3.1.e Hr tag
Ol and Li Tags 3.1.f Div tag
3.1.g Span tag
Workbook projects:
3.1.h Ul tag
Fill-in-the-Blanks Session 2 Items 6-8
3.1.i OL tag
Hr, Div, and Span Tags
3.1.j LI tag
HTML List Tags
4 Videos: 32a-spotlight.html 3 Structure Documents Using HTML
Semantic HTML Elements 3.2 Construct and analyze markup that
Header Tag uses HTML5 semantic elements
Nav Tag 3.2.a Header tag
Section Tag 3.2.b Nav tag
Article and Aside Tags 3.2.c Section tag
Footer Tag 3.2.d Article tag
3.2.e Aside tag
Practice Lab:
3.2.f Footer tag
Nav Tag
Workbook projects:
Fill-in-the-Blanks Session 2 Items 9-13
Semantic Tags, Part 1
5 Videos: 32g-books.html 3 Structure Documents Using HTML
Semantic HTML Elements 32i-spotlight.html 3.2 Construct and analyze markup that
Details and Summary Tags uses HTML5 semantic elements
32j-hours2.html
Figure Tag 3.2.g Details tag
Caption Tag 3.2.h Summary tag
3.2.i Figure tag
Workbook projects:
3.2.j Caption tag
Fill-in-the-Blanks Session 2 Items 14-16
Details and Summary Tags
Figure and Caption Tags

84 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Day Tasks Files What is Covered Notes
6 Videos: 33a-books.html 3 Structure Documents Using HTML
Navigation Elements 33b-index.html 3.3 Construct and analyze markup that
Image Links implements navigation
33b-spotlight.
The A Tag 3.3.a Image links
html
Targets 3.3.b The a tag
3.3.c Targets
Worbook projects:
Fill-in-the-Blanks Session 2 Items 17-19
Image Links
Hyperlinks
7 Videos: 33d-books.html 3 Structure Documents Using HTML
Navigation Elements 33e-spotlight. 3.3 Construct and analyze markup that
Bookmarks implements navigation
html
Relative vs. Absolute Links 3.3.d Bookmarks
33f-links.html 3.3.e Relative vs. absolute links
Folder Hierarchy Navigation
3.3.f Navigating simple folder
Workbook projects: hierarchies
Fill-in-the-Blanks Session 2 Items 20-22
Bookmarks
Relative and Absolute Links
Navigating Folder Hierarchies
8 Videos: 34a-contactus. 3 Structure Documents Using HTML
Form Elements html 3.4 Construct and analyze markup that
Action and Method Attributes uses form elements
34d-contactus.
Submission Methods 3.4.a Action attribute
html
Accessibility 3.4.b Method attribute
3.4.c Submission methods
Practice lab:
3.4.d Accessibility
Submission Methods
Workbook projects:
Fill-in-the-Blanks Session 2 Items 23-25
Action and Method Attributes
Accessibility
9 Videos: 34e-contactus. 3 Structure Documents Using HTML
Form Elements html 3.4 Construct and analyze markup that
Input Types and Restrictions uses form elements
34f-contactus.
Select Tag 3.4.e Input types and restrictions
html
3.4.f Select tag
Workbook projects:
Fill-in-the-Blanks Session 2 Item 26
Input Types and Labels
The Select Tag
10 Videos: 34g-contactus. 3 Structure Documents Using HTML
Form Elements html 3.4 Construct and analyze markup that
Textarea Tag uses form elements
34h-contactus.
Button Tag 3.4.g Textarea tag
html
Output Tag 3.4.h Button tag
34i-contactus. 3.4.i Output tag
Workbook projects: html
Fill-in-the-Blanks Session 2 Items 27-29
Textarea Tag
Button Tags
Output Tags
11 Videos: 34j-contactus. 3 Structure Documents Using HTML
Form Elements html 3.4 Construct and analyze markup that
Option Tag uses form elements
34k-contactus.
Datalist Tag 3.4.j Option tag
html
3.4.k Datalist tag
Workbook projects:
Fill-in-the-Blanks Session 2 Items 30-31
Option Tag
Datalist
85 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Day Tasks Files What is Covered Notes
12 Videos: 34l-contactus. 3 Structure Documents Using HTML
Form Elements html 3.4 Construct and analyze markup that
Fieldset Tag uses form elements
Session 2 - Domain 3 Exam Tips
Workbook projects:
Fill-in-the-Blank Session 2 Item 32
Fieldset and Legend Tags
Start Post-Assessment
13 Complete Post-Assessment

86 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 3: 4 lessons for approximately 2.5 hours

Day Tasks Files What is Covered Notes

1 Pre-Assessment 41a-instruments. 4 Present Multimedia Using HTML
Videos: html 4.1 Construct and analyze markup that
mandolin.jpg displays images
Image, SVG, and Canvas Elements
trombone.jpg 4.1.a Img and picture elements and their
Add Images
attributes
Image Layouts
Workbook projects:
Fill-in-the-Blanks Session 3 Item 1
Add Images
2 Videos: 41a-instruments2. 4 Present Multimedia Using HTML
Image, SVG, and Canvas Elements html 4.1 Construct and analyze markup that
Image Links displays images
42-svg.html
Svg Tag 4.1.a Img and picture elements and their
42-canvas.html attributes
Canvas Tag
4.2 Describe the appropriate use of the
Practice lab: img, svg, and canvas elements
Adding an Image Link
Workbook projects:
Fill-in-the-Blanks Session 3 Items 2-5
Image Layouts and Links
SVG and Canvas Tags
3 Videos: 43a-media.html 4 Present Multimedia Using HTML
Video and Audio Formats Happy.mp4 4.3 Construct and analyze markup that
Video and Source Tags Happy.mov plays video and audio
Audio and Source Tags 4.3.a Video tag
43b-media.html
Track Tag 4.3.b Audio tag
metronome_
4.3.c Track tag
Practice lab: audio.mp3
4.3.d Source tag
Video Formats subtitles.vtt
Workbook projects:
Fill-in-the-Blanks Session 3 Items 6-8
Video and Source Tags
Audio and Track Tags
4 Videos: 43e-media.html 4 Present Multimedia Using HTML
Video and Audio Formats vtt.html 4.3 Construct and analyze markup that
iFrame Implementations plays video and audio
Session 3 - Domain 4 Exam Tips 4.3.e Simple iframe implementations

Workbook projects:
Fill-in-the-Blanks Session 3 Item 9
Simple Iframe Implementations
Post-Assessment

87 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 4: 6 lessons for approximately 3.5 hours

Day Tasks Files What is Covered Notes

1 Pre-Assessment 21a-index.html 2 Understand CSS Fundamentals
Videos: 2.1 Analyze the impact of using inline
styles, internal style sheets, and external
Define Style Sheets
style sheets
Inline, Internal, and External Styles
2.1.a When to use each style sheet
Practice lab:
Style Purpose
Workbook projects:
Fill-in-the-Blanks Session 4 Item 1
Creating Style Sheets
2 Videos: 21b-main.css 2 Understand CSS Fundamentals
Define Style Sheets 21b-books.html 2.1 Analyze the impact of using inline
Style Sheet Precedence 21b-index.html styles, internal style sheets, and external
style sheets
Practice lab: 2.1.b Precedence when using a
Style Precedence combination of inline styles and style
Workbook projects: sheets
Fill-in-the-Blanks Session 4 Item 2
Style Sheet Precedence
3 Videos: 22a-main.css 2 Understand CSS Fundamentals
CSS Rule Sets 22a-index.html 2.2 Construct and analyze rule sets
Valid Syntax 22b-main.css 2.2.a Valid syntax for the CSS rule set
Apply Classes 22b-books.html 2.2.b Selectors (class, id, elements,
pseudo-class)
Practice lab:
CSS Rule Set Syntax
Workbook projects:
Fill-in-the-Blanks Session 4 Items 3-4
Valid Syntax for Rule Sets
Apply Classes
4 Videos: 22b2-main.css 2 Understand CSS Fundamentals
CSS Rule Sets 22b2-spotlight. 2.2 Construct and analyze rule sets
Apply IDs html 2.2.b Selectors (class, id, elements,
Apply Pseudo Classes pseudo-class)
22b3-main.css
CSS Best Practices 2.3 Construct well-formed style sheets
22b3-books.html that conform to industry best practices
Reusing Rules and Rule Sets 23a-main.css 2.3.a Reusing rules and rule sets
Practice lab: 23a-spotlight.
id Selector html
Workbook projects:
Fill-in-the-Blanks Session 4 Items 5-7
Apply ids
Apply Pseudo Classes
Reusing Rules and Rule Sets

88 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Day Tasks Files What is Covered Notes
5 Videos: 23b-main.css 2 Understand CSS Fundamentals
CSS Best Practices 23b-spotlight. 2.3 Construct well-formed style sheets
CSS Comments html that conform to industry best practices
Multiple Browser Tests 2.3.b Commenting
23c-spotlight.
Web Safe Fonts 2.3.c Testing on multiple browsers
html
Session 4 - Domain 2 Exam Tips 2.3.d Web safe fonts
23c-main.css
Practice lab:
Testing Browsers
Workbook projects:
Fill-in-the-Blanks Session 4 Items 8-10
CSS Comments
Multiple Browser Tests and Web Safe
Fonts
6 Post-Assessment

89 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Session 5: 16 lessons for approximately 9.5 hours

Day Tasks Files What is Covered Notes

1 Pre-Assessment 51a-positioningexample. 5 Style Webpages Using CSS
Videos: html 5.1 Construct and analyze styles that
position content
Position Text with CSS
5.1.a Positioning (float, relative,
Height and Width
absolute, max-width, overflow,
Max-Width Used with an Element height, width, align)
Workbook projects:
Fill-in-the-Blanks Session 5 Items 1-2
Height and Max-Width Used with an
Element
2 Videos: 51af-positioningexample. 5 Style Webpages Using CSS
Position Text with CSS html 5.1 Construct and analyze styles that
Float Positioning position content
Relative Positioning 5.1.a Positioning (float, relative,
absolute, max-width, overflow,
Practice labs: height, width, align)
Float
Relative
Workbook projects:
Fill-in-the-Blanks Session 5 Items 3-4
Float Positioning
3 Videos: 51ar- 5 Style Webpages Using CSS
Position Text with CSS positioningexample.html 5.1 Construct and analyze styles that
Absolute Positioning position content
Overflow Settings 5.1.a Positioning (float, relative,
absolute, max-width, overflow,
Practice lab: height, width, align)
Overflow Element
Workbook projects:
Fill-in-the-Blanks Session 5 Items 5-6
Relative and Absolute Positioning
4 Videos: 51ao- 5 Style Webpages Using CSS
Postition Text with CSS positioningexample.html 5.1 Construct and analyze styles that
Alignment position content
51b-main.css
Inline vs. Block 5.1.a Positioning (float, relative,
51b-spotlight.html absolute, max-width, overflow,
Practice labs: height, width, align)
Alignment Property 5.1.b Inline vs. block
Inline
Workbook projects:
Fill-in-the-Blanks Session 5 Items 7-8
Overflow and Alignment Settings
Inline vs. Block
5 Videos: 51c-positioningexample. 5 Style Webpages Using CSS
Postition Text with CSS html 5.1 Construct and analyze styles that
Visibility position content
Box Model Margins 5.1.c Visibility
5.1.d Box model (margins and
Practice labs: padding)
Visibility Property
Margins
Workbook projects:
Fill-in-the-Blanks Session 5 Items 9-10
Visibility

90 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Day Tasks Files What is Covered Notes
6 Videos: 51d-positioningexample. 5 Style Webpages Using CSS
Postition Text with CSS html 5.1 Construct and analyze styles that
Box Model Padding position content
52a-main.css
Format Text with CSS 5.1.d Box model (margins and
52a-cooks-complete. padding)
Font-Family html 5.2 Construct and analyze styles that
Practice labs: format text
Padding 5.2.a Font-family
Font-Family Property
Workbook projects:
Fill-in-the-Blanks Session 5 Items 11-12
Box Model Margins and Padding
Font Families in CSS
7 Videos: 52a-main.css 5 Style Webpages Using CSS
Format Text with CSS 52a-cooks-complete. 5.2 Construct and analyze styles that
Color html format text
Font-Style 5.2.a Font-family
52c-main.css
Font-Weight 5.2.b Color
52c-books.html
5.2.c Font-style
Practice labs:
5.2.d Font-weight
Font-Style Property
Font-Weight Property
Workbook projects:
Fill-in-the-Blanks Session 5 Items 13-15
Font Colors in CSS
Font Styles and Weights in CSS
8 Videos: 52e-main.css 5 Style Webpages Using CSS
Format Text with CSS 52e-spotllight.html 5.2 Construct and analyze styles that
Link Colors format text
Text-Alignment 5.2.e Link colors
5.2.f Text formatting (text alignment,
Practice labs: text decoration, indentation)
Color Knowledge
Vertical Alignment
Workbook projects:
Fill-in-the-Blanks Session 5 Items 16-17
Link Colors in CSS
9 Videos: 52f-main.css 5 Style Webpages Using CSS
Format Text with CSS 52f-hours.html 5.2 Construct and analyze styles that
Text-Decoration format text
52fi-main.css
Indentation 5.2.f Text formatting (text alignment,
52fi-index.html text decoration, indentation)
Workbook projects:
Fill-in-the-Blanks Session 5 Items 18-19
Text Alignment and Decoration
Indentation
10 Videos: 53a-main.css 5 Style Webpages Using CSS
Backgrounds and Borders 53a-spotlight.html 5.3 Construct and analyze styles that
Border-Color format backgrounds and borders
Border-Style 5.3.a Border-color
5.3.b Border-style
Workbook projects:
Fill-in-the-Blanks Session 5 Items 20-21
Border Color and Style

91 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Day Tasks Files What is Covered Notes
11 Videos: 53c-main.css 5 Style Webpages Using CSS
Backgrounds and Borders 53c-spotlight.html 5.3 Construct and analyze styles that
Border-Width format backgrounds and borders
5.3.c Border-width
Practice lab:
Border Setup
Workbook projects:
Fill-in-the-Blanks Session 5 Item 22
Border Width
12 Videos: 53d-positioningexample. 5 Style Webpages Using CSS
Backgrounds and Borders html 5.3 Construct and analyze styles that
Backgrounds format backgrounds and borders
53e-main.css
Divs 5.3.d Backgrounds
53e-spotlight.html
Working with Colors 5.3.e Divs
5.3.f Colors
Practice lab:
Add a Background Image
Workbook projects:
Fill-in-the-Blanks Session 5 Item 23-25
Backgrounds
Divs and Colors
13 Videos: 54a-main.css 5 Style Webpages Using CSS
Responsive Layouts 54a-index.html 5.4 Analyze styles that implement a
Units of Measure simple responsive layout
54b-spotlight.html
Viewport 5.4.a Units of measure
54b-main.css
Media Query 5.4.b Responsive effects with CSS
(viewport and media query)
Practice lab:
Media Query Syntax
Workbook projects:
Fill-in-the-Blanks Session 5 Item 26-28
Units of Measure
Viewport and Media Query Settings
14 Videos: 54c-hours.html 5 Style Webpages Using CSS
Responsive Layouts 54e-hours.html 5.4 Analyze styles that implement a
Percentages and Pixels simple responsive layout
Frameworks and Templates 5.4.c Percentages vs. pixels
Max-Width Property 5.4.d Frameworks and templates
Session 5 - Domain 5 Exam Tips 5.4.e Max width
Course Conclusion
Final Exam Tips
Final Thoughts
Workbook projects:
Fill-in-the-Blanks Session 5 Item 29-31
Percentages and Pixels
Frameworks, Templates and Max Width
15 Start Post-Assessment
16 Complete Post-Assessment

92 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS (98-383)
Session 1 Outline
Introduction
Course Welcome
How to Study for This Exam

Markup with Metadata

Script Tag
Noscript Tag
Link Tag
Meta Tags

Well-Formed Markup
DOCTYPE Declaration and Html Tag
Head Tag
Body Tag
Closing Tags
Entities
Comments
Session 1 - Domain 1 Exam Tips

93 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS (98-383)
Session 2 Outline
Structure Content Through Markup
Table Tags
Table Attributes
Heading Tags
P Tag
Br Tag
Hr Tag
Div Tag
Span Tag
Ul and Li Tags
Ol and Li Tags

Semantic HTML Elements

Header Tag
Nav Tag
Section Tag
Article and Aside Tags
Footer Tag
Details and Summary Tags
Figure Tag
Caption Tag

Navigation Elements
Image Links
The A Tag
Targets
Bookmarks
Relative vs. Absolute Links
Folder Hierarchy Navigation

Form Elements
Action and Method Attributes
Submission Methods
Accessibility
Input Types and Restrictions
Select Tag
Textarea Tag
Button Tag
Output Tag
Option Tag
Datalist Tag
Fieldset Tag
Session 2 - Domain 3 Exam Tips

94 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS (98-383)
Session 3 Outline
Image, SVG, and Canvas Elements
Add Images
Image Layouts
Image Links
Svg Tag
Canvas Tag

Video and Audio Formats

Video and Source Tags
Audio and Source Tags
Track TagiF
iFrame Implementations
Session 3 - Domain 4 Exam Tips

95 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS (98-383)
Session 4 Outline
Define Style Sheets
Inline, Internal, and External Styles
Style Sheet Precedence

CSS Rule Sets

Valid Syntax
Apply Classes
Apply IDs
Apply Pseudo Classes

CSS Best Practices

Reusing Rules and Rule Sets
CSS Comments
Multiple Browser Tests
Web Safe Fonts
Session 4 - Domain 2 Exam Tips

96 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook
Introduction to Programming Using HTML and CSS (98-383)
Session 5 Outline

Position Text with CSS

Height and Width
Max-Width Used with an Element
Float Positioning
Relative Positioning
Absolute Positioning
Overflow Settings
Alignment
Inline vs. Block
Visibility
Box Model Margins
Box Model Padding

Format Text with CSS

Font-Family
Color
Font-Style
Font-Weight
Link Colors
Text-Alignment
Text-Decoration
Indentation

Backgrounds and Borders

Border-Color
Border-Style
Border-Width
Backgrounds
Divs
Working with Colors

Responsive Layouts
Units of Measure
Viewport
Media Query
Percentages and Pixels
Frameworks and Templates
Max-Width Property
Session 5 - Domain 5 Exam Tips

Course Conclusion
Final Exam Tips
Final Thoughts

97 | Appendix MTA Introduction to Programming Using HTML and CSS (98-383) Project Workbook