HTML and CSS Project Workbook PDF

 HTML and CSS Project Workbook First Edition LearnKey creates signature multimedia courseware. LearnKey provides expert instruction for popular computer software, technical certifications, and ap...

 HTML and CSS Project Workbook First Edition LearnKey creates signature multimedia courseware. LearnKey provides expert instruction for popular computer software, technical certifications, and application development with dynamic video-based courseware and effective learning management systems. For a complete list of courses, visit https://www.learnkey.com. All rights reserved. Unauthorized reproduction or distribution is prohibited. © 2021 LearnKey www.learnkey.com Table of Contents Introduction 1 Best Practices Using LearnKey’s Online Training 2 Using This Workbook 3 Skills Assessment 4 HTML and CSS Video Times 5 Domain 1 6 Fill-in-the-Blanks 7 Script and Noscript Tags 8 Link and Meta Tags 9 HTML Fundamentals 10 Domain 2 11 Fill-in-the-Blanks 12 Creating Style Sheets 13 Style Sheet Precedence 14 Valid Syntax for Rule Sets 15 Apply Classes 16 Apply IDs 17 Apply Pseudo Classes 18 Domain 3 19 Fill-in-the-Blanks 20 HTML Tables 22 HTML Headings, Paragraphs, and Line Breaks 23 Hr, Div, and Span Tags 24 HTML List Tags 25 Semantic Tags 26 Details and Summary Tags 27 Figure and Caption Tags 28 Image Links 29 Hyperlinks 30 Bookmarks 31 Relative and Absolute Links 32 Navigating Folder Hierarchies 33  Map and Area Tags 34 Action and Method Attributes 35 Accessibility 36 Input Types and Labels 37 The Select Tag 38 Textarea Tag 39 Button Tags 40 Output Tags 41 Option Tag 42 Datalist 43 Fieldset and Legend Tags 44 Domain 4 45 Fill-in-the-Blanks 46 Add Images 47 Image Layouts and Links 48 Video and Source Tags 49 Audio and Track Tags 50 Simple Iframe Implementations 51 Domain 5 52 Fill-in-the-Blanks 53 Height and Max-Width Used with an Element 55 Float Positioning 56 Relative and Absolute Positioning 57 Static and Fixed 58 Overflow and Alignment Settings 59 Display 60 Inline vs. Block 61 Visibility 62 Box Model Margins and Padding 63 Font Families in CSS 64 Font Colors in CSS 65 Font Styles and Weights in CSS 66 Link Colors in CSS 67 Font Variant 68  Text Alignment and Decoration 69 Indentation 70 Line Height and Word-Wrap 71 Letter-Spacing, Word-Spacing 72 Border Color and Style 73 Border Width 74 Backgrounds 75 Divs and Colors 76 Units of Measure 77 Viewport and Media Query Settings 78 Percentages and Pixels 79 Frameworks, Templates, and Max Width 80 Grids 81 Domain 6 82 Fill-in-the-Blanks 83 Reusing Rules and Rule Sets 84 CSS Comments 85 Multiple Browser Tests and Web Safe Fonts 86 Separation of Structure and Style 87 Text Alternatives 88 Color Contrast and Typography 89 Tab Order and Text Resizing 90 Text Hierarchy 91 Syntax Errors 92 Tag Mismatch 93 Cascading Issues 94 Appendix 95 Glossary 96 Objectives 99 HTML and CSS Lesson Plan 101 Domain 1 Lesson Plan 101 Domain 2 Lesson Plan 102 Domain 3 Lesson Plan 103 Domain 4 Lesson Plan 105 Domain 5 Lesson Plan 106 Domain 6 Lesson Plan 108 Introduction 1 | Introduction: Best Practices Using LearnKey’s Online Training HTML and CSS Project Workbook, First Edition Best Practices Using LearnKey’s Online Training LearnKey offers video-based training solutions that are flexible enough to accommodate private students and educational facilities and organizations. Our course content is presented by top experts in their respective fields and provides clear and comprehensive information. The full line of LearnKey products has been extensively reviewed to meet superior standards of quality. Our course content has also been endorsed by organizations such as Certiport, CompTIA®, Cisco, and Microsoft. However, it is the testimonials given by countless satisfied customers that truly set us apart as leaders in the information training world. LearnKey experts are highly qualified professionals who offer years of job and project experience in their subjects. Each expert has been certified at the highest level available for their field of expertise. This expertise provides the student with the knowledge necessary to obtain top-level certifications in their chosen field. Our accomplished instructors have a rich understanding of the content they present. Effective teaching encompasses presenting the basic principles of a subject and understanding and appreciating organization, real-world application, and links to other related disciplines. Each instructor represents the collective wisdom of their field and within our industry. Our Instructional Technology Each course is independently created based on the manufacturer’s standard objectives for which the course was developed. We ensure that the subject matter is up-to-date and relevant. We examine the needs of each student and create training that is both interesting and effective. LearnKey training provides auditory, visual, and kinesthetic learning materials to fit diverse learning styles. Course Training Model The course training model allows students to undergo basic training, building upon primary knowledge and concepts to more advanced application and implementation. In this method, students will use the following toolset: Pre-assessment: The pre-assessment is used to determine the student’s prior knowledge of the subject matter. It will also identify a student’s strengths and weaknesses, allowing the student to focus on the specific subject matter he/she needs to improve the most. Students should not necessarily expect a passing score on the pre-assessment as it is a test of prior knowledge. Video training sessions: Each training course is divided into sessions or domains and lessons with topics and subtopics. LearnKey recommends incorporating all available external resources into your training, such as student workbooks, glossaries, course support files, and additional customized instructional material. These resources are located in the folder icon at the top of the page. Exercise labs: Labs are interactive activities that simulate situations presented in the training videos. Step-by-step instructions and live demonstrations are provided. Post-assessment: The post-assessment is used to determine the student’s knowledge gained from interacting with the training. In taking the post-assessment, students should not consult the training or any other materials. A passing score is 80 percent or higher. If the individual does not pass the post-assessment the first time, LearnKey recommends incorporating external resources, such as the workbook and additional customized instructional material. Workbook: The workbook has various activities, such as fill-in-the-blank worksheets, short answer questions, practice exam questions, and group and individual projects that allow the student to study and apply concepts presented in the training videos. 2 | Introduction: Best Practices Using LearnKey’s Online Training HTML and CSS Project Workbook, First Edition Using This Workbook This project workbook contains practice projects and exercises to reinforce the knowledge you have gained through the video portion of the HTML and CSS course. The purpose of this workbook is twofold. First, get you further prepared to pass the HTML and CSS exam, and second, to get you job-ready skills and increase your employability in the area of HTML5 and CSS. The projects within this workbook follow the order of the video portion of this course. To save your answers in this workbook, you must first download a copy to your computer. You will not be able to save your answers in the web version. You can complete the workbook exercises as you go through each section of the course, complete several of these at the end of each domain, or complete them after viewing the entire course. The key is to go through these projects to strengthen your knowledge of this course. Each project is based upon a specific video (or videos) in the course and specific test objectives. The materials you will need for this course include: LearnKey’s HTML and CSS courseware. The course project files. All applicable project files are located in the support area where you downloaded this workbook. We value your feedback about our courses. If you have any questions, comments, or concerns, please let us know by visiting https://about.learnkey.com. 3 | Introduction: Using This Workbook HTML and CSS Project Workbook, First Edition Skills Assessment Instructions: Rate your skills on the following tasks from 1-5 (1 being needs improvement, 5 being excellent). Skills 1 2 3 4 5 Construct markup that uses metadata elements. Construct well-formed page markup. Analyze and implement inline styles, internal (embedded) style sheets, and external style sheets. Construct and analyze rule sets. Construct and analyze markup to structure content and organize data. Construct and analyze markup that uses HTML5 semantic elements. Construct and analyze markup that implements navigation. Construct and analyze markup that uses form elements. Construct and analyze markup that displays images. Construct and analyze markup that plays video and audio. Construct and analyze styles that position content. Construct and analyze styles that format text. Construct and analyze styles that format backgrounds and borders. Construct and analyze styles that create a simple responsive layout. Construct well-formed HTML and CSS markup that conforms to industry best practices. Apply accessibility principles and evaluate content accessibility. Evaluate the structural integrity of HTML and CSS markup. 4 | Introduction: Skills Assessment HTML and CSS Project Workbook, First Edition HTML and CSS Video Times Domain 1 Video Time Introduction 00:02:03 Markup with Metadata 00:08:13 Well-Formed Markup 00:11:23 Total Time 00:21:39 Domain 2 Video Time Define Style Sheets 00:06:08 CSS Rule Sets 00:09:13 Total Time 00:15:21 Domain 3 Video Time Structure Content Through Markup 00:17:10 Semantic HTML Elements 00:10:01 Navigation Elements 00:15:15 Form Elements 00:24:37 Total Time 01:07:03 Domain 4 Video Time Image, SVG, and Canvas Elements 00:05:10 Video and Audio Formats 00:08:34 Total Time 00:13:44 Domain 5 Video Time Position Text with CSS 00:28:43 Format Text with CSS 00:23:37 Backgrounds and Borders 00:14:18 Responsive Layouts 00:13:01 Total Time 01:19:39 Domain 6 Video Time Construct HTML and CSS 00:10:56 Accessibility Principles and Evaluate Content 00:12:15 Accessibility Structural Integrity of HTML and CSS Markup 00:04:43 Course Conclusion 00:01:33 Total Time 00:29:27 5 | Introduction: HTML and CSS Video Times HTML and CSS Project Workbook, First Edition Domain 1 6 | Domain 1: HTML and CSS Video Times HTML and CSS Project Workbook, First Edition Fill-in-the-Blanks Instructions: While watching Domain 1, fill in the missing words according to the information presented by the instructor. [References are found in the brackets.] Markup with Metadata 1. Out of the four main parts of an HTML document, the tag contains information that describes a webpage but does not necessarily show on a webpage. [Script Tag] 2. The noscript tag lets a user know that the browser used does not support the in the script tag code. [Noscript Tag] 3. Finish this code: symbol at the end of a tag indicates a tag to where the closing portion does not need to be. [Closing Tags] 9. Entities are pieces of HTML code which display and characters. [Entities] 10. The opening and closing tags for an HTML comment are and. [Comments] 7 | Domain 1: Fill-in-the-Blanks HTML and CSS Project Workbook, First Edition Script and Noscript Tags Project Details Project file Script tags are tags which hold programming code in a language other than 11a-scripts.html HTML, usually JavaScript. These are often found in the body of an HTML Estimated completion time document but can be in the head section if the script is meant to run on a 10 minutes webpage but not display the information contained in the script. Video reference The noscript tag is used to display text that will show if the browser being used Domain 1 to display a webpage does not support the scripting language used within a Topic: Markup with Metadata script tag. Subtopic: Script Tag; Noscript Tag Objectives covered Purpose 1 HTML Fundamentals Upon completing this project, you will be able to use script and noscript tags 1.1 Construct markup that uses metadata elements within an HTML document. Note that when you are called upon to open a file 1.1.a Script throughout this workbook, you will want to open it in your code editor and not 1.1.b Noscript a browser unless specifically told to do so. Notes for the teacher Steps for Completion The completed file, 11a-scripts- completed, is inside the Finished folder. 1. Open the 11a-scripts.html file in the MusicStore1 student folder in This may be a good time to help Visual Studio or a similar code editor. students with indenting code in such a way as to make it readable. 2. On the line below the words, Script Test, add an opening and closing script tag, indicating that JavaScript will be the script language. 3. In between the opening and closing script tag, add an alert indicating that the browser supports JavaScript. 4. Below the closing script tag, add an opening and closing noscript tag. 5. Inside of the noscript tags, add a message indicating the browser does not support JavaScript. 6. Save your changes. 7. Preview your webpage. You should see an alert message indicating that the browser supports JavaScript (so long as you are using a browser that does support it). 8 | Domain 1: Script and Noscript Tags HTML and CSS Project Workbook, First Edition Link and Meta Tags Project Details Project file Link tags are used to link HTML files to files such as style sheets (CSS files) and 11c-scripts.html script files such as JavaScript files. The link tag is not used for hyperlinks. The Estimated completion time anchor tag (A tag) is used for hyperlinks. 10 minutes Part of proper HTML markup in a document is using metadata, which is often Video reference described as data defining data. Meta tags have four functions: define character Domain 1 types, define webpage content, define how the webpage is viewed, and indicate Topic: Markup with Metadata if the language used for the page can be translated. Meta tags, as they do not Subtopic: Link Tag; Meta Tags display on the webpage itself, are always listed in the head section of a Objectives covered webpage. 1 HTML Fundamentals 1.1 Construct markup that uses Purpose metadata elements 1.1.c Style Upon completing this project, you will be able to add link tags and meta tags to 1.1.d Link an HTML document. 1.1.e Meta tags, including encoding, Steps for Completion keywords, viewport, description, and translate 1. Open the 11c-scripts.html file in the MusicStore1 student folder in Notes for the teacher your code editor. The completed file, 11c-scripts- completed, is inside the Finished folder. 2. On the line below the title tag, add a link tag that links to a stylesheet If time permits, have the students named test.css explore further the use of meta tags. 3. On the line below the opening head tag, add a meta tag to define the charset as utf-8 4. On the next line, define a meta tag that uses the keywords music, store, and instruments 5. On the next line, define a meta tag for the viewport with the width set to the device width and the initial scale set to 1.0 6. On the next line, define a meta tag that will not allow translation through Google. 7. Save your changes. 8. Preview your webpage. You should see a light green background (due to the style sheet) and a message indicating that either the browser supports JavaScript or it does not. 9. Close your browser. 10. Close your open files in your code editor, saving changes if prompted. 9 | Domain 1: Link and Meta Tags HTML and CSS Project Workbook, First Edition HTML Fundamentals Project Details Project file HTML documents have four areas, the DOCTYPE, HTML, head, and body. The N/A DOCTYPE indicates the type of document. The HTML area opens and closes the Estimated completion time document’s code. The head contains titles, links, and meta tags that do not 10-15 minutes need to show on the webpage. The title is the name of your webpage and is used by search engines. Video reference Domain 1 The body contains the elements that will be visible on the webpage. All four Topic: Well-Formed Markup areas of an HTML document have opening and closing syntax vital to the Subtopic: DOCTYPE Declaration functionality of the document. and Html Tag; Head Tag; Body Tag; Closing Tags; Entities; Comments Regarding symbols and comments, symbols are HTML entities that start with an Objectives covered ampersand and end with a semicolon. For example, © is an entity that 1 HTML Fundamentals represents a copyright. Comments start with a , CSS comments start with a. 5 minutes Comments can also be used over existing code to force a style sheet to ignore Video reference that code. This can be useful when testing rule sets and property/value Domain 6 combinations on webpages. Topic: Construct HTML and CSS Subtopic: CSS Comments Purpose Objectives covered Upon completing this project, you will be able to add comments to a CSS style 6 Accessibility, Readability, and Testing 6.1 Construct well-formed HTML and sheet. CSS markup that conforms to industry best practices Steps for Completion 6.1.b Commenting 1. Open the 23b-main.css file in the Domain 6 Student folder. Notes for the teacher The completed file, 23b-main- 2. Add a comment above the figcaption that says, The background color completed, is in the Finished folder. If extends across the page, so, we have commented it out for now time permits, have the students comment out additional property/value 3. Within the figcaption rule set, comment the background color property/ pairs and see what effect that has on value combination out so that it will be ignored in the code. the 23b-spotlight webpage. 4. Save your changes. 5. Open the 23b-spotlight.html file. 6. Preview the webpage in a browser. There should be no Aqua line highlighting on the caption below the image. 85 | Domain 6: CSS Comments HTML and CSS Project Workbook, First Edition Multiple Browser Tests and Project Details Project file Web Safe Fonts 23c-spotlight.html 23c-main.css A webpage style should work on multiple browsers and media types. It is Estimated completion time important to use simple styles in CSS so that the styles used are viewable in 10 minutes different browsers. It is good practice to test your webpages in multiple Video reference browsers before publishing the webpages, a concept known as cross-platform Domain 6 usability. The more complex the styles, the more likely it is the styles will not Topic: Construct HTML and CSS work fully. Subtopic: Multiple Browser Tests; Web Safe Fonts; Cross-Platform When working with the font-family property in style sheets, you will want to use Usability multiple fonts as not every user has every font you may want to display. You will Objectives covered also want to indicate the font family being used so that a user’s default font for 6 Accessibility, Readability, and Testing a specific family can be used if needed. This will at least ensure that the font 6.1 Construct well-formed HTML and displayed is like the font you intended for that style. This is the concept of using CSS markup that conforms to Web Safe fonts, fonts that will properly display in a web browser. industry best practices 6.1.c Web-safe fonts Purpose 6.1.d Cross-platform usability Notes for the teacher Upon completing this project, you will be able to test webpage styles in multiple Answers will vary on the browser test browsers. You will also know how to set up a CSS rule set to use Web Safe fonts. results. The completed file, 23c-main. completed, is in the Finished folder. Steps for Completion Help students understand the importance of cross-platform usability. 1. Open the 23c-spotlight.html file in the Domain 6 Student folder. 2. Test the webpage in as many web browsers as you have available. 3. Were there any browsers that the styles in the webpage varied? a.. 4. Open the 23c-main.css file. 5. Add a font-family setting to the paragraph tag to set the font to Arial, then Segoe UI, and then the default sans- serif font. 6. Save your changes. 7. Preview the 23c-spotlight.html page in a web browser. The paragraphs should display as Arial, Segoe UI, or a similar sans-serif font. 8. Save and close all open files, both in your web browser and in your code editor. 86 | Domain 6: Multiple Browser Tests and Web Safe Fonts HTML and CSS Project Workbook, First Edition Separation of Structure and Project Details Project file Style N/A Estimated completion time Another industry best practice is the separation of structure and style, 5 minutes specifically the separation between HTML and CSS code. A clear separation Video reference between structure and styling makes the code easier to edit and debug. Domain 6 Developers create that separation with the use of their styling. Topic: Construct HTML and CSS Subtopic: Separation of Structure Styling a webpage in the most efficient way can be a difficult task. Users should (HTML) and Style (CSS) have a plan, considering exactly where they are adding each style and what effect that will have on the separation of structure and style. Objectives covered 6 Accessibility, Readability, and Testing 6.1 Construct well-formed HTML and Purpose CSS markup that conforms to Upon completing this project, you will better understand how to separate industry best practices 6.1.e Separation of structure structure and style. (HTML) and style (CSS) Steps for Completion Notes for the teacher If time permits, review the differences 1. Use as much as possible to keep between external and internal style consistency within a website. sheets. 2. While styling an individual page, use an. 3. should be used very sparingly. This method of styling is difficult to reuse across elements and webpages. 87 | Domain 6: Separation of Structure and Style HTML and CSS Project Workbook, First Edition Text Alternatives Project Details Project file Developers should design webpages with accessibility in mind. There are several N/A factors to consider, and many can be found in the Web Content Accessibility Estimated completion time Guidelines (WCAG). These guidelines help define a baseline for accessible and 5 minutes adaptable web design. Video reference Text alternatives are assigned as alternate text, an HTML element attribute. Domain 6 Developers should avoid inputting alt text that is too long or overly descriptive, Topic: Accessibility Principles and as well as alt text that is too short and does not give a user enough context. Evaluate Content Accessibility Subtopic: Text Alternatives Purpose Objectives covered Upon completing this project, you will better understand text alternatives within 6 Accessibility, Readability, and Testing 6.2 Apply accessibility principles and the scope of accessibility. evaluate content accessibility 6.2.a Text alternatives Steps for Completion Notes for the teacher 1. Describe three main reasons for using the alt attribute. Encourage students to explore the WCAG and gain a better understanding a. of why this document is important as a web developer.. b.. c.. 88 | Domain 6: Text Alternatives HTML and CSS Project Workbook, First Edition Color Contrast and Typography Project Details Project file When designing webpages, it is important to be aware of color usage and N/A typography. Not only do these factors affect the aesthetics of a webpage, but Estimated completion time the accessibility as well. 5-10 minutes Keep in mind that users access webpages with differing screen sizes, screen Video reference resolutions, room lighting, and eyesight. For these reasons, it is important to Domain 6 have an established baseline for color contrast best practices. The Web Content Topic: Accessibility Principles and Accessibility Guidelines (WCAG) lay out very specific criteria in sections 1.4.3 and Evaluate Content Accessibility 1.4.6 regarding color contrast. Subtopic: Color Contrast and Usage; Legibility of Typography When it comes to typography, there are many different fonts to use, ranging Objectives covered from Courier New/Terminal to Comic-Sans MS, and everything in-between. 6 Accessibility, Readability, and Testing Some CSS properties to consider when styling text include default font size, font 6.2 Apply accessibility principles and type, font-weight bold, font-style italic, letter-spacing and word-spacing, and evaluate content accessibility line-height. 6.2.b Color contrast and usage 6.2.c Legibility of typography Purpose Notes for the teacher Upon completing this project, you will better understand the importance of Remind students that the WCAG has documentation that guides color color contrast and font usage on webpages. contrast and spacing best practices. Steps for Completion 1. What negative effects could occur if color contrast is too high? a.. 2. What negative effects could occur if color contrast is too low? a.. 3. Avoid using a font that is too busy as it can be difficult to read at regular and reduced font. 4. To make websites and accessible, it is always better to rely on fewer fonts, with each font having a specific purpose in the design. 5. Always rely on the property, and multiple values, to ensure that there are backup fonts available to the browser. 89 | Domain 6: Color Contrast and Typography HTML and CSS Project Workbook, First Edition Tab Order and Text Resizing Project Details Project file Developers can use the tabindex attribute to input tags in their HTML code. resizing.html When creating a form, the tab order naturally flows from one input field to the Estimated completion time next. However, with other page styles such as landing pages, shopping cart 5 minutes pages, or just longer pages in general, it is important to pay attention to the tabindex attribute throughout the code, ensuring that users who rely on the Tab Video reference Index to navigate the form can do so in a logical and simple way. Domain 6 Topic: Accessibility Principles and Generally, users resize text in their browsers using one of two methods. The first, Evaluate Content Accessibility is by adjusting the zoom setting in the browser and the second is by changing Subtopic: Tab Order; Text Resizing the appearance settings. With the zoom feature, websites do not usually have Objectives covered text resizing issues because the browser is zooming in on the browser window, 6 Accessibility, Readability, and Testing not resizing elements in the HTML. The relationship between the elements 6.2 Apply accessibility principles and should stay consistent. evaluate content accessibility 6.2.d Tab order When creating a webpage, one should avoid horizontal scrolling. A webpage 6.2.e Text resizing that tends to scroll vertically will lend itself better to responsive design and Notes for the teacher appearance on mobile devices. Discuss the reasons why, after step 6, some text overflows the text box Purpose elements while other text does not. Upon completing this project, you will better understand tab order and you will be able to resize text on a webpage. Steps for Completion 1. Applying proper tab order will mean different things on different webpages, but the proper use of the tabindex attribute and a logical tab order scheme is necessary for users who rely on through that means. 2. Open the resizing.html file in the Domain 6 Student folder. 3. View the webpage in a browser. 4. Zoom into the page using the Zoom option in the browser’s settings. Enlarge to any preferred size. 5. Reset the size back to 100%. 6. Resize the webpage text to the largest font option using the Appearance options within the browser’s settings. 90 | Domain 6: Tab Order and Text Resizing HTML and CSS Project Workbook, First Edition Text Hierarchy Project Details Project file Text hierarchy refers to the use of HTML tags, semantic or not, to help organize hierachy.html webpages in the most logical way. One way to organize elements is with the Estimated completion time heading tag. When numbered, heading tags can be used to structure sections 5 minutes on a webpage. Section tags and other semantic tags promote webpage organization as well. Proper use of all organizational HTML tags will improve a Video reference webpage's accessibility. Domain 6 Topic: Accessibility Principles and Purpose Evaluate Content Accessibility Subtopic: Text Hierarchy Upon completing this project, you will better understand how text on a Objectives covered webpage can be structured hierarchically with heading tags. 6 Accessibility, Readability, and Testing 6.2 Apply accessibility principles and Steps for Completion evaluate content accessibility 6.2.f Text hierarchy 1. Open the hierachy.html file in the Domain 6 Student folder. Notes for the teacher 2. Which tag is used to distinguish the main title, LearnKey OnlineExpert? Assist students in understanding the Why? important of text hierarchy in relation to a website's accessibility. a.. 3. If you were to list another course adjacent to HTML & CSS, which tag would you use? Why? a.. 4. How many times is the h3 tag listed? a.. 91 | Domain 6: Text Hierarchy HTML and CSS Project Workbook, First Edition Syntax Errors Project Details Project file Even the most experienced programmers encounter syntax errors. No matter index.html one’s experience level, syntax errors are part of anyone’s programming main.css endeavors. Syntax errors can include missing punctuation, incorrect letter- Estimated completion time casing, invalid opening and closing tags or brackets, or incorrect spelling. 5-10 minutes Syntax errors in HTML are very forgiving because of how browsers parse the Video reference code. Browsers are prepared to run despite syntax errors. When you run HTML Domain 6 with errors, the page will run, though it might not appear as intended. A simple Topic: Structural Integrity of HTML syntax error in CSS will cause the remainder of a file to fail. This is more and CSS Markup Subtopic: Syntax Errors consistent with how other programming languages react to syntax errors, so it is vitally important to be clear and accurate with your CSS. Objectives covered 6 Accessibility, Readability, and Testing Purpose 6.3 Evaluate the structural integrity of HTML and CSS markup Upon completing this project, you will better understand syntax errors in CSS 6.3.a Syntax errors and HTML. Notes for the teacher Steps for Completion Help students recognize the typical syntax errors they may encounter in 1. Open the main.css file in the Domain 6 Student folder. HTML and CSS code. 2. On line 3, set the background color property to background-colors: by adding an s a. A squiggly line should appear, indicating that the property is not a known CSS property name. 3. Open the index.html file. 4. View the page in a browser. 5. Navigate to the main.css file. 6. On line 1, delete the opening bracket. 7. Save the changes. 8. View the webpage in a browser and refresh the page. a. The page should have lost its background color and should look significantly different from the original. 92 | Domain 6: Syntax Errors HTML and CSS Project Workbook, First Edition Tag Mismatch Project Details Project file Once HTML becomes more complex, developers may encounter tag mismatch. hours-complete.html Tag mismatch describes a situation where opening and closing tags do not hours-mismatch.html match up properly. It can also refer to a tag that is not opened and closed Estimated completion time within another single tag. This can be difficult to troubleshoot because the 5 minutes browser will sometimes just work around the error and render the webpage. Video reference Purpose Domain 6 Topic: Structural Integrity of HTML Upon completing this project, you will be able to identify tag mismatch and and CSS Markup identify ways to avoid it. Subtopic: Tag Mismatch Objectives covered Steps for Completion 6 Accessibility, Readability, and Testing 6.3 Evaluate the structural integrity of 1. Open the hours-complete.html file in the Domain 6 Student folder. HTML and CSS markup 2. Scan the code for matching opening and closing tags. 6.3.b Tag mismatch Notes for the teacher 3. Are there any mismatching tags in the file? Remind students that the code in both a.. files will be read the same way by the computer, but the hours-mismatch file 4. Open the hours-mismatch.html file. is lacking spacing and indentation, making it difficult for humans to read. 5. Scan the code for matching opening and closing tags. 6. One of the best ways to guard against tag mismatch is by using proper and in your HTML code. 93 | Domain 6: Tag Mismatch HTML and CSS Project Workbook, First Edition Cascading Issues Project Details Project file When there are multiple CSS rules for the same element, one can experience N/A cascading issues. It is not uncommon to have the same property set in two Estimated completion time different places for the same element. While sometimes it can be convenient to 5 minutes layer CSS rule sets in this way, it will eventually cause issues. The simplest way to deal with these issues is to use the Developer Tools along with the knowledge Video reference of stylesheet precedence. Domain 6 Topic: Structural Integrity of HTML Purpose and CSS Markup Subtopic: Cascading Issues Upon completing this project, you will better understand cascading issues and Objectives covered how to avoid them. 6 Accessibility, Readability, and Testing 6.3 Evaluate the structural integrity of Steps for Completion HTML and CSS markup 6.3.c Cascading issues 1. CSS specificity is a hierarchy that dictates the precedence of styles at an even more granular level than precedence. Notes for the teacher If time permits, have students use the 2. CSS has an important rule that can be added after a CSS property/value important keyword in an example of declaration, like so: CSS code. textbox1 { background-color: red !important; } a. This keyword will cause the style to any styles declared before it. 3. The important keyword should be used with caution. What will happen if this keyword is overused? a.. 94 | Domain 6: Cascading Issues HTML and CSS Project Workbook, First Edition Appendix 95 | Appendix: Cascading Issues HTML and CSS Project Workbook, First Edition Glossary Term Definition A Tag An anchor (a) tag is used to implement a hyperlink for a user. This means that the user is anchoring himself to another page. Absolute Link A link which contains the complete address to another link. Absolute A type of positioning in CSS which places items in an exact location on a webpage. Positioning Action Attribute An attribute used within a form tag to navigate users to the next page or script once the form is submitted. Article Tag A tag which is used to mark off self-containing text that can make up a story, blog entry, or an article. Aside Tag A tag which is often used to mark off a side story. Audio Tag A tag which can have multiple sources and should have the controls attribute added to allow a user to control when the audio plays. Background The color or image used as the backdrop of an entire webpage. Body Tag A tag which contains everything that displays on the webpage. Most of the tags used in CSS are placed inside of a body tag. Border-Color A CSS property which is used to alter to color of a border either by name or using hexadecimal colors. Property Border-Style An element used in CSS to control the overall look of a border. Property Border-Width A property which is used in CSS to control the width of a border. Property Br Tag A tag which is used to create a line break. Button Tag A tag which can be used on a form to add a button option. Caption Tag A tag which is used on tables to allow a table description to be placed in close proximity to a table. Comment A tool used to put placeholders in for text that will need to be added later to a webpage. It can also be used to explain parts of a webpage that do not display in a browser but will appear in a text editor. It will help any collaborative efforts to build a website. CSS Cascading Style Sheets (CSS) is a type of style sheet language which is used in web design to describe the presentation of a document that is written in a markup language, such as HTML5. It is the code used to format the text in a webpage. CSS Framework A template which is created by the web designer, downloaded for free, or purchased from a third- party which has built in CSS the designer can use to ease in the development process of a Datalist Tag website. A tag which is used to create a pre-populated list within a form. Delete A common submission method which requests to remove information from a database. Details Tag The summary tag surrounds the line explaining what is in the details section in a details tag. Div Tag A tag which is used in CSS to control alignment, backgrounds, margins, padding, and text flow for webpage elements. It can also be used to control the width of an entire page. Em A relative measurement which is equivalent to the font size being used. For example, 3em = 3 x the size ofthe current font. Ex A measurement type which is relative to the height of the letter x. Fieldset Tag A tag which creates fieldsets that allow you to group fields on forms to make them easier to read. Figure Tag A tag which is used to mark up an image in a webpage. Float Element An element which is used to move one item next to another on a webpage. Font-Family A property which is used in CSS to ensure there are backup fonts and web safe fonts available in the Property event auser does not have access to the web designers designated fonts. 96 | Appendix: Glossary HTML and CSS Project Workbook, First Edition  Term Definition Font-Style A font property which is used in CSS to apply style to fonts, such as italics. Property Font-Weight A font property which controls the bold level of text on a webpage. Property Get A common submission method which requests to retrieve something, such as information from another webpage, an image, or a search engine. Head Tag A tag type which contains information that describes the webpage but does not show on the webpage. Heading Tags HTML has six levels of headings, with tags of h1 through h6. H1 is the largest heading while h6 is the smallest. Hexadecimal A color format which uses a pound symbol and six hexadecimal numbers, that is, six numbers 0 Colors through 9 or A through F. 0 represents black, while F represents white. The six colors are in three pairs, which signify the amounts of red, green, and blue used in the color. Hr Tag A horizontal rule (hr) tag is a tag that creates a paragraph-level break within text on a web document. Html Tag A tag which contains data that makes up a webpage. HTML5 Hypertext Markup Language 5 (HTML5) is a type of markup language used to build and present content on the Internet. iFrame A content-holding frame inside of a webpage. It can be altered using programming. Img Tag An image (img) tag defines an image in an HTML document, which requires the src and alt attributes. JavaScript The dynamic aspect of webpage building where scripts are used to manipulate objects based on an event. Li Tag A list item (li) tag goes around every item listed in either an ordered or unordered list. Link Tag A tag which allows web designers to link to external files, such as style sheets and scripts. Margins The space between the top, bottom, or side of a webpage’s content and its edge. Max-Width A property which is used to control layouts on webpages using CSS. It can ensure that the total Property width of a webpage does not exceed the screen size of the user. Media Query A fairly granular method used to control how a webpage displays across different types of devices. It checks for screen width and changes styles according to that screen width. Meta Tag A type of tag used to embed metadata in CSS. Metadata A tool used in CSS to describe items and elements and their usage. Method An attribute which is used within a form tag to tell the form what type of action to take once it is Attribute submitted. MP3 A compressed sound file which allows for digital storage and transmission. MP4 A digital multimedia container often used to store video and audio data. MPEG Moving Picture Experts Group (MPEG), also known as the H.264 format, is the most common format for output from video editing software. Nav Tag The nav tag is used to help spot, in HTML code, the area on the page containing navigation links on a webpage. Noscript Tag A tag which notifies the user if their browser does not support the programming language that is currently in use. Ogg An open container format which is designed to provide for efficient streaming of digital multimedia. It is a royalty-free video format. Ol Tag An ordered list (ol) tag is a numbered list. Output Tag A tag which allows you to take what is in a form and run an instant calculation depending upon what is being input in a form. Overflow A property which is used to ensure that text will fit on the screen regardless of the device. Property P Tag A tag used to create paragraphs. 97 | Appendix: Glossary HTML and CSS Project Workbook, First Edition  Term Definition Percentage A type of measurement used within CSS. It can be applied to elements on a webpage where it will Measurement allow the element to fluctuate its size based on the screen size the user has. Pixel A static form of measurement in CSS. It allows the web designer to assign a specific measurement to a Measurement webpage element. Post A common submission method which requests to take submitted data and modify data on the server as a result of user input. Pt A measurement which is 1/72 of an inch. Put A common submission method which requests to take data submitted and insert it into a database. Px A measurement which is normally 1/96 of an inch but can vary based on screen sizes. Relative Link Hyperlinks used to link pages within a website. Relative A type of positioning in CSS which places items relative to where they normally are in relation to how Positioning things normally flow on a webpage. Responsive Web A concept which refers to designing webpages which can be viewed on different devices, such as Design desktops,laptops, tablets, and smartphones. SVG Scalable Vector Graphics (SVG) is a vector image format for two-dimensional graphics with the ability to support interactivity and animation. Script Tag A tag which is used to hold programming scripts for programming languages. Section Tag A tag which marks off sections on a webpage. Select Tag A form-based tag which creates a drop-down list full of options. Semantic Tag A tag which is used to help organize a webpage and can be used to determine how a webpage should berendered. Span Tag A tag which is used to format a word or phrase. Summary Tag A semantic tag which can hide the text inside of a details tag. The summary tag surrounds the line explaining what is in the details section. Tag A command within an HTML document that specifies the formatting of the document or a portion of that document. Text-Align An alignment property which is used to align text on a webpage. Property Textarea Tag A tag used to create text boxes within a form so that users can type responses. Text-Decoration An element which is used in CSS to apply underlines to text on a webpage. Property Text-Indent A text property which is used in CSS to indent the first line of text in a multi-line paragraph. Property Track Tag A tag which works in conjunction with vtt files as part of the Web Video Text Tracks (WebVTT) standard. Ul Tag An unordered list (ul) tag adds a bulleted list with no specific hierarchy to a webpage. Video Tag A tag which adds a video to a webpage. Visibility A property which is used to make an object invisible using CSS. Property WebM A video file format which works well on low-power devices, such as netbooks and tablets. 98 | Appendix: Glossary HTML and CSS Project Workbook, First Edition Objectives HTML and CSS Objectives Domain 1 Domain 2 Domain 3 HTML Fundamentals CSS Fundamentals Document Structure using HTML 1.1 Construct markup that uses 2.1 Analyze and implement inline styles, 3.1 Construct and analyze markup to metadata elements internal (embedded) style sheets, and structure content and organize data 1.1.a Script external style sheets 3.1.a Table tags (table, tr, th, td) 1.1.b Noscript 2.1.a When to use inline styles, internal 3.1.b H1-h6 1.1.c Style (embedded) style sheets, or external style 3.1.c P 1.1.d Link sheets 3.1.d Br 1.1.e Meta tags, including encoding, 2.1.b Precedence when using a 3.1.e Hr keywords, viewport, description, and combination of inline styles and style 3.1.f Div translate sheets 3.1.g Span 3.1.h Ul 3.1.i Ol 3.1.j Li 1.2 Construct well-formed page 2.2 Construct and analyze rule sets 3.2 Construct and analyze markup that markup 2.2.a Valid syntax for the CSS rule set uses HTML5 semantic elements 1.2.a DOCTYPE declaration 2.2.b Selectors, including class, id, 3.2.a Semantic tags (header, nav, 1.2.b Html elements, and pseudo-class section, article, aside, footer, details, 1.2.c Head summary, figure, caption) 1.2.d Body 1.2.e Proper syntax 1.2.f Closing tags and commonly used symbols 3.3 Construct and analyze markup that implements navigation 3.3.a Target 3.3.b Anchor (a href) 3.3.c Bookmark 3.3.d Relative vs. absolute links 3.3.e Navigating simple folder hierarchies 3.3.f Map 3.3.g Area 3.4 Construct and analyze markup that uses form elements 3.4.a Form attributes 3.4.b Action 3.4.c Method 3.4.d Submission methods 3.4.e Input types and restrictions 3.4.f Select 3.4.g Textarea 3.4.h Button 3.4.i Option 3.4.j Label 99 | Appendix: Objectives HTML and CSS Project Workbook, First Edition HTML and CSS Objectives Domain 4 Domain 6 Multimedia Presentation Domain 5 Accessibility, Readability, and using HTML Webpage Styling using CSS Testing 4.1 Construct and analyze 5.1 Construct and analyze styles that position 6.1 Construct well-formed HTML and CSS markup that displays images content markup that conforms to industry best 4.1.a Img and picture elements 5.1.a Positioning, including float, relative, practices and their attributes absolute, static, fixed, max-width, overflow, 6.1.a Reusing rules and rule sets height, width, align 6.1.b Commenting 5.1.b Display 6.1.c Web-safe fonts 5.1.c Inline vs. block 6.1.d Cross-platform usability 5.1.d Visibility 6.1.e Separation of structure (HTML) and 5.1.e Box model, margins and padding style (CSS) 4.2 Construct and analyze 5.2 Construct and analyze styles that format markup that plays video and text audio 5.2.a Font-family 4.2.a Video 5.2.b Color 4.2.b Audio 5.2.c Font-style 4.2.c Track 5.2.d Font-size 4.2.d Source 5.2.e Font-weight 6.2 Apply accessibility principles and 4.2.e Iframe 5.2.f Font-variant evaluate content accessibility 5.2.g Link colors 6.2.a Text alternatives 5.2.h Text formatting, text alignment, text 6.2.b Color contrast and usage decoration, indentation 6.2.c Legibility of typography 5.2.i Line-height 6.2.d Tab order 5.2.j Word-wrap 6.2.e Text resizing 5.2.k Letter-spacing 6.2.f Text hierarchy 5.3 Construct and analyze styles that format backgrounds and borders 5.3.a Border-color 6.3 Evaluate the structural integrity of 5.3.b Border-style HTML and CSS markup 5.3.c Border-width 6.3.a Syntax errors 5.3.d Background properties 6.3.b Tag mismatch 5.3.e Colors 6.3.c Cascading issues 5.4 Construct and analyze styles that create a simple responsive layout 5.4.a Units of measurement (percentages, pixels, em, vw, vh) 5.4.b Viewport and media query 5.4.c Frameworks and templates 5.4.d Working with breakpoints 5.4.e Grids 100 | Appendix: Objectives HTML and CSS Project Workbook, First Edition HTML and CSS Lesson Plan Approximately 32 hours of videos, labs, and projects. Domain 1 Lesson Plan Domain 1 - HTML Fundamentals [approximately 2.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Pre-Assessment HTML Fundamentals: Pre- Assessment time - Assessment 00:10:00 Lesson 1 Markup with Metadata 1.1.a Script Tags Script and Noscript Tags – pg. 8 Video time - Part 1 1.1.b Noscript 11a-scripts.html 00:06:17 How to Study for This Exercise Lab time - Exam 00:04:00 Script Tag Workbook time - Noscript Tag 00:15:00 Lesson 2 Markup with Metadata 1.1.c Style Using Meta Link and Meta Tags – pg. 9 Video time - Part 2 1.1.d Link Tags 11c-scripts.html 00:05:49 Link Tag 1.1.e Meta tags, including Exercise Lab time - Meta Tags encoding, keywords, viewport, 00:04:00 description, and translate Workbook time - 00:15:00 Lesson 3 Well-Formed Markup 1.2.a DOCTYPE declaration Body Tag HTML Fundamentals – pg. 10 Video time - DOCTYPE Declaration and 1.2.b Html Usage N/A 00:11:05 Html Tag 1.2.c Head Exercise Lab time - Head Tag 1.2.d Body 00:04:00 Body Tag 1.2.e Proper syntax Workbook time - Closing Tags 1.2.f Closing tags and 00:20:00 Entities commonly used symbols Comments Domain 1 Exam Tips Post-Assessment HTML Fundamentals: Assessment time - Post-Assessment 00:40:00 101 | HTML and CSS Lesson Plan: Domain 1 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 2 Lesson Plan Domain 2 - CSS Fundamentals [approximately 2.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Pre-Assessment CSS Fundamentals: Pre- Assessment time - Assessment 00:10:00 Lesson 1 Define Style Sheets 2.1.a When to use inline styles, N/A Creating Style Sheets – pg. 13 Video time - Inline, Internal, and internal (embedded) style sheets, 21a-index.html 00:05:48 External Styles or external style sheets Style Sheet Precedence – pg. 14 Exercise Lab time - Style Sheet Precedence 2.1.b Precedence when using a 21b-main.css; 21b-books.html; 00:00:00 combination of inline styles and 21b-index.html Workbook time - style sheets 00:30:00 Lesson 2 CSS Rule Sets 2.2.a Valid syntax for the CSS rule Class Selector Valid Syntax for Rule Sets – pg. 15 Video time - Valid Syntax set Pseudo Class 22a-main.css; 22a-index.html 00:09:00 Apply Classes 2.2.b Selectors, including class, id, Apply Classes – pg. 16 Exercise Lab time - Apply IDs elements, and pseudo-class 22b-main.css; 22b-books.html 00:08:00 Apply Pseudo Classes Apply IDs – pg. 17 Workbook time - Domain 2 Exam Tips 22b2-main.css; 22b2- 00:40:00 spotlight.html Apply Pseudo Classes – pg. 18 22b3-main.css; 22b3-books.html Post-Assessment CSS Fundamentals: Assessment time - Post-Assessment 00:30:00 102 | HTML and CSS Lesson Plan: Domain 2 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 3 Lesson Plan Domain 3 - Document Structure using HTML [approximately 10.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Pre-Assessment Document Assessment time - Structure using 01:00:00 HTML: Pre- Assessment Lesson 1 Structure Content 3.1.a Table tags (table, tr, th, Table Rows HTML Tables – pg. 22 Video time - Through Markup td) Table Attributes 31a-hours.html; 31a-hours2.html 00:08:53 Part 1 3.1.b H1-h6 HTML Headings, Paragraphs, and Line Exercise Lab time - Table Tags 3.1.c P Breaks – pg. 23 00:08:00 Table Attributes 3.1.d Br 31b-headings.html; 31b-index.html; Workbook time - Heading Tags webpagetext.txt 00:30:00 P Tag Br Tag Lesson 2 Structure Content 3.1.e Hr Using the Div Tag Hr, Div, and Span Tags – pg. 24 Video time - Through Markup 3.1.f Div 31e-index.html 00:09:36 Part 2 3.1.g Span HTML List Tags – pg. 25 Exercise Lab time - Hr Tag 3.1.h Ul 31h-Index.html 00:04:00 Div Tag 3.1.i Ol Workbook time - Span Tag 3.1.j Li 00:35:00 Ul and Li Tags Ol and Li Tags Lesson 3 Semantic HTML 3.2.a Semantic tags (header, Header Tag Semantic Tags – pg. 26 Video time - Elements nav, section, article, aside, Determining 32a-spotlight.html 00:10:03 Header Tag footer, details, summary, Asides Details and Summary Tags – pg. 27 Exercise Lab time - Nav Tag figure, caption) Determining 32g-books.html 00:12:00 Section Tag Footers Figure and Caption Tags – pg. 28 Workbook time - Article and Aside 32i-spotlight.html; 32j-hours2.html 00:50:00 Tags Footer Tag Details and Summary Tags Figure Tag Caption Tag Lesson 4 Navigation 3.3.a Target Missing Image Image Links – pg. 29 Video time - Elements Part 1 3.3.b Anchor (a href) 33a-books.html 00:08:09 Image Links 3.3.c Bookmark Hyperlinks – pg. 30 Exercise Lab time - The A Tag 33b-index.html; 33b-spotlight.html 00:04:00 Targets Bookmarks – pg. 31 Workbook time - Bookmarks 33d-books.html 00:35:00 Lesson 5 Navigation 3.3.d Relative vs. absolute Relative Link Relative and Absolute Links – pg. 32 Video time - Elements Part 1 links Navigating Folders 33e-spotlight.html 00:07:07 Relative vs. 3.3.e Navigating simple Name Attribute Navigating Folder Hierarchies – pg. 33 Exercise Lab time - Absolute Links folder hierarchies Image Map 33f-links.html 00:16:00 Folder Hierarchy 3.3.f Map Attributes Map and Area Tags – pg. 34 Workbook time - Navigation 3.3.g Area books2.html; books3.html 00:30:00 Map Area 103 | HTML and CSS Lesson Plan: Domain 3 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 3 - Document Structure using HTML [approximately 10.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Lesson 6 Form Elements 3.4.a Form attributes N/A Action and Method Attributes – pg. 35 Video time - Part 1 3.4.b Action 34a-contactus.html 00:07:10 Action and Method 3.4.c Method Accessibility – pg. 36 Exercise Lab time - Attributes 3.4.d Submission methods 34d-contactus.html 00:00:00 Submission 3.4.e Input types and Input Types and Labels – pg. 37 Workbook time - Methods restrictions 34e-contactus.html 00:45:00 Accessibility Input Types and Restrictions Lesson 7 Form Elements 3.4.f Select Select Tag The Select Tag – pg. 38 Video time - Part 2 3.4.g Textarea Elements 34f-contactus.html 00:09:14 The Significance of 3.4.h Button Textarea Tag Textarea Tag – pg. 39 Exercise Lab time - Labels 3.4.j Label 34g-contactus.html 00:08:00 Select Tag Button Tags – pg. 40 Workbook time - Textarea Tag 34h-contactus.html 00:45:00 Button Tag Output Tags – pg. 41 Output Tag 34i-contactus.html Lesson 8 Form Elements 3.4.i Option N/A Option Tag – pg. 42 Video time - Part 3 34j-contactus.html 00:08:03 Option Tag Datalist – pg. 43 Exercise Lab time - Datalist Tag 34k-contactus.html 00:00:00 Fieldset Tag Fieldset and Legend Tags – pg. 44 Workbook time - Domain 3 Test Tips 34l-contactus.html 00:40:00 Post-Assessment Document Assessment time - Structure using 02:00:00 HTML: Post- Assessment 104 | HTML and CSS Lesson Plan: Domain 3 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 4 Lesson Plan Domain 4 - Multimedia Presentation using HTML [approximately 2 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Pre-Assessment Multimedia Presentation Assessment time using HTML: Pre-Assessment - 00:10:00 Lesson 1 Image, SVG, and Canvas 4.1.a Img and picture Understanding Add Images – pg. 47 Video time - Elements elements and their Image Elements 41a-instruments.html; mandolin.jpg; 00:05:12 Add Images attributes trombone.jpg Exercise Lab time Image Layouts Image Layouts and Links – pg. 48 - 00:04:00 Image Links 41a-instruments2.html Workbook time - 00:25:00 Lesson 2 Video and Audio Formats 4.2.a Video N/A Video and Source Tags – pg. 49 Video time - Video and Source Tags 4.2.b Audio 43a-media.html; Happy.mp4; 00:08:33 Audio and Source Tags 4.2.c Track Happy.mov Exercise Lab time Track Tag 4.2.d Source Audio and Track Tags – pg. 50 - 00:00:00 iFrame Implementations 4.2.e Iframe 43b-media.html; Workbook time - Domain 4 Exam Tips metronome_audio.mp3; subtitles.vtt 30:00:00 Simple Iframe Implementations – pg. 51 43e-media.html; vtt.html Post-Assessment Multimedia Presentation Assessment time using HTML: Post-Assessment - 00:40:00 105 | HTML and CSS Lesson Plan: Domain 4 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 5 Lesson Plan Domain 5 - Webpage Styling using CSS [approximately 10.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Pre-Assessment Webpage Styling using Assessment CSS: Pre-Assessment time - 00:40:00 Lesson 1 Position Text with CSS 5.1.a Positioning, Positioning Height and Max-Width Used with an Element Video time - Part 1 including float, relative, – pg. 55 00:09:58 Height and Width absolute, static, fixed, 51a-positioningexample.html Exercise Lab Max-Width Used with max-width, overflow, Float Positioning – pg. 56 time - 00:04:00 an Element height, width, align 51af-positioningexample.html Workbook time Float Positioning Relative and Absolute Positioning – pg. 57 - 00:40:00 Relative Positioning 51ar-positioningexample.html Absolute Positioning Lesson 2 Position Text with CSS 5.1.a Positioning, Element Static and Fixed – pg. 58 Video time - Part 2 including float, relative, Position positioningelement1.html 00:10:13 Static absolute, static, fixed, Overflow and Alignment Settings – pg. 59 Exercise Lab Fixed max-width, overflow, 51ao-positioningexample.html time - 00:04:00 Overflow Settings height, width, align Display – pg. 60 Workbook time Alignment 5.1.b Display display.html - 00:35:00 Display 5.1.c Inline vs. block Inline vs. Block – pg. 61 Inline vs. Block 51b-main.css; 51b-spotlight.html Lesson 3 Position Text with CSS 5.1.d Visibility N/A Visibility – pg. 62 Video time - Part 3 5.1.e Box model, margins 51c-positioningexample.html 00:08:39 Visibility and padding Box Model Margins and Padding – pg. 63 Exercise Lab Box Model Margins 51d-positioningexample.html time - 00:00:00 Box Model Padding Workbook time - 00:25:00 Lesson 4 Format Text with CSS 5.2.a Font-family Hexadecimal Font Families in CSS – pg. 64 Video time - Part 1 5.2.b Color Colors 52a-main.css; 52a-books.html 00:08:44 Font-Family 5.2.c Font-style Font Colors in CSS – pg. 65 Exercise Lab Color 5.2.d Font-size 52b-main.css; 52b-spotlight.html time - 00:04:00 Font-Style 5.2.e Font-weight Font Styles and Weights in CSS – pg. 66 Workbook time Font-Weight 52c-main.css; 52c-books.html - 00:30:00 Lesson 5 Format Text with CSS 5.2.f Font-variant Font Variants Link Colors in CSS – pg. 67 Video time - Part 2 5.2.g Link colors Hyperlink 52e-main.css; 52e-spotlight.html 00:11:10 Link Colors 5.2.h Text formatting, Underline Font Variant – pg. 68 Exercise Lab Font Variant text alignment, text headings1.html; main.css time - 00:08:00 Text-Alignment decoration, indentation Text Alignment and Decoration – pg. 69 Workbook time Text-Decoration 52f-main.css; 52f-hours.html - 00:40:00 Indentation Indentation – pg. 70 52fi-main.css; 52fi-index.html Lesson 6 Format Text with CSS 5.2.i Line-height N/A Line Hight and Word-Wrap – pg. 71 Video time - Part 3 5.2.j Word-wrap positioningexample2.html; wordwrap.html 00:03:41 Line Height 5.2.k Letter-spacing Letter-Spacing, Word-Spacing – pg. 72 Exercise Lab Word-wrap spacing.html time - 00:00:00 Letter-Spacing, Word- Workbook time Spacing - 00:25:00 106 | HTML and CSS Lesson Plan: Domain 5 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 5 - Webpage Styling using CSS [approximately 10.5 hours of videos, labs, and projects] Lesson Lesson Topic and Objectives Exercise Labs Workbook Projects and Files Subtopics Lesson 7 Backgrounds and 5.3.a Border-color N/A Border Color and Style – pg. 73 Video time - Borders Part 1 5.3.b Border-style 53a-main.css; 53a-spotlight.html 00:06:54 Border-Color 5.3.c Border-width Border Width – pg. 74 Exercise Lab Border-Style 53c-main.css; 53c-spotlight.html time - 00:00:00 Border-Width Workbook time - 00:35:00 Lesson 8 Backgrounds and 5.3.d Background Text Color Backgrounds – pg. 75 Video time - Borders Part 2 properties 53d-positioningexample.html; kazoo- 00:07:25 Backgrounds 5.3.e Colors transparent.jpg Exercise Lab Divs Divs and Colors – pg. 76 time - 00:04:00 Working with Colors 53e-main.css; 53e-spotlight.html Workbook time - 00:25:00 Lesson 9 Responsive Layouts 5.4.a Units of Relative Units of Measure – pg. 77 Video time - Part 1 measurement Measurement 54a-main.css; 54a-index.html 00:07:07 Units of Measure (percentages, pixels, em, Viewport and Media Query Settings – pg. 78 Exercise Lab Viewport vw, vh) 54b-spotlight.html; 54b-main.css time - 00:04:00 Media Query 5.4.b Viewport and Percentages and Pixels – pg. 79 Workbook time Percentages and Pixels media query 54c-hours.html - 00:40:00 5.4.d Working with breakpoints Lesson 10 Responsive Layouts 5.4.c Frameworks and Grid Columns Frameworks, Templates, and Max Width – Video time - Part 2 templates pg. 80 00:06:13 Frameworks and 5.4.e Grids 54e-hours.html Exercise Lab Templates Grids – pg. 81 time - 00:04:00 Max-Width Property grids.html Workbook time Grids - 00:25:00 Domain 5 Exam Tips Post- Webpage Styling using Assessment CSS: Post-Assessment Assessment time - 02:00:00 107 | HTML and CSS Lesson Plan: Domain 5 Lesson Plan HTML and CSS Project Workbook, First Edition Domain 6 Lesson Plan Domain 6 - Accessibility, Readability, and Testing [approximately 4 hours of videos, labs, and projects] Lesson Lesson Topic and Subtopics