Web design with HTML5 CSS3 ComprehensivehCD ROM 2

7 Improving Web Design with New Page Layouts • • • • • • • • • • • • Objectives HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02 200 203 Introduction Web design involves a daily pursuit of perfection in layout, function, and ef�ciency Every site you create expresses your personal creativity while balancing your customers’ demands with content and design that captures and holds the attention of your dynamic audience To.

HTML Improving Web Design with New Page Layouts Objectives • • • • • • • • • • • • Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Improving Web Design with New Page Layouts Introduction Web design involves a daily pursuit of perfection in layout, function, and efficiency Every site you create expresses your personal creativity while balancing your customers’ demands with content and design that captures and holds the attention of your dynamic audience To meet these requirements, you must constantly reevaluate your content and design and apply new technologies and innovations to keep your audience engaged and your customers elated As you have learned, HTML5 provides new tools for improving webpage design, including semantic elements for specific types of content You have already integrated four semantic elements in a website: header, nav, main, and footer In this chapter, you will discover other HTML5 semantic elements and learn how to integrate them into webpages You will also learn how to improve your current design for mobile, tablet, and desktop viewports Project — Use HTML5 Structural Elements to Redesign a Website In Chapters and 6, you discovered how to create a responsive-design website In Chapter 7, you continue to improve the website design by modifying page layout and learning how to use additional HTML5 semantic elements The owners of the Forward Fitness Club are rebranding their image and plan to launch a strategic marketing campaign to gain new clients As part of the rebranding process, they updated their logo and created a new look They ask you to apply the new look to the website Because the website is not yet complete, this is a good time to improve and redesign the site to fit the updated brand The project in this chapter enhances a website with HTML5 semantic elements to structure added content To complete this task, you create a new wireframe for the home and About Us pages Next, you integrate additional HTML5 semantic elements within the home, About Us, and Contact Us pages You also update and create style rules for the new and existing elements Next, you create a wireframe for the Nutrition page, a new webpage in the site After creating the Nutrition page using HTML5 semantic elements, add style rules for these elements to the style sheet You apply styles to the HTML5 elements on each page to give the site an enhanced look and feel. As you add styles to the style sheet, they immediately format the attached webpages when you open or refresh the pages in a browser Figure 7–1 shows the home page, Figure 7–2 shows the About Us page, and Figure 7–3 shows the Nutrition page, each for the mobile, tablet, and desktop viewports after the improvements are applied Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Microsoft HTML5 & CSS3 2015 (b) Home page in tablet viewport (a) Home page in mobile viewport (c) Home page in desktop viewport Figure 7–1 (b) About Us page in tablet viewport (a) About Us page in mobile viewport (c) About Us page in desktop viewport Figure 7–2 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML HTML HTML Chapter (b) Nutrition page in tablet viewport (a) Nutrition page in mobile viewport (c) Nutrition page in desktop viewport Figure 7–3 Roadmap In this chapter, you will learn how to create the webpage shown in Figure 7–1 The following roadmap identifies general activities you will perform as you progress through this chapter: the Home page modify style modify style modify and style create and style the Home page elements the aBout us page the aBout us page elements the contact us page elements the nurtition page elements At the beginning of step instructions throughout the chapter, you will see an abbreviated form of this roadmap The abbreviated roadmap uses colors to indicate chapter progress: gray means the chapter is beyond that activity; blue means the task being shown is covered in that activity, and black means that activity is yet to be covered For example, the following abbreviated roadmap indicates the chapter would be showing a task in the MODIFY & STYLE CONTACT US PAGE activity MODIFY HOME PAGE | STYLE HOME PAGE MODIFY & STYLE CONTACT US PAGE | | MODIFY ABOUT US PAGE | STYLE ABOUT US PAGE CREATE & STYLE NUTRITION PAGE Use the abbreviated roadmap as a progress guide while you read or step through the instructions in this chapter Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Using HTML5 Semantic Elements Recall from Chapter that HTML5 semantic elements are sets of starting and ending HTML tags that provide meaning about the content of the tags For example, the navigation system is contained within the and tags; likewise, footer content is contained within the and tags Use HTML5 semantic elements for specific types of content within a webpage The name of the tag reflects its purpose Using semantic HTML5 elements provides a standard naming convention for webpage content, making webpages more universal, accessible, and meaningful to search engines The Forward Fitness Club website contains the header, nav, main, and footer semantic elements HTML5 includes several other semantic elements, some of which you will learn about and use to complete this project Table 7–1 lists other HTML5 semantic elements Table 7–1 HTML5 Semantic Elements Element Description … Indicates the start and end of an article area of a webpage Contains content such as forum or blog posts … Indicates the start and end of an aside area of a webpage Contains information about nearby content and is typically displayed as a sidebar … Indicates the start and end of a details area of a webpage Contains additional information that the user can display or hide Note that this element is not supported by all major browsers at the time of this publication … Indicates the start and end of a figure area of a webpage Contains pictures and images … Indicates the start and end of a figure caption area of a webpage Defines a caption for a figure element … Indicates the start and end of a section area of a webpage Contains a specific grouping of content on a webpage … Indicates the start and end of a summary area of a webpage Contains a visible heading for the details element on a webpage Note that this element is not supported by all major browsers at the time of this publication … Indicates the start and end of a time area of a webpage Contains a date/time on a webpage Article Element The article element, as described by the W3C, is “a complete, self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g in syndication This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.” The article element starts with an tag and ends with an tag Content placed between these tags will appear on a webpage as part of the article element Articles may be nested within other HTML elements, such as the main element, the section element, or other article elements Articles are commonly used to contain news articles, blog and forum posts, or comments The article element Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter HTML Chapter HTML HTML HTML Chapter is supported by the major modern browsers The following is an example of three article elements nested within a main element Article Title

Information about article 1

Article Title

Information about article 2

Article Title

Information about article 3

An example wireframe that uses the article element is shown in Figure 7–4 An example of a webpage that uses an article element is shown in Figure 7–5 Header Navigation Main Article Article Article Footer Figure 7–4 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Figure 7–5 Aside Element The aside element, as described by the W3C, is an element that “represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.” The aside element is used as a sidebar and contains additional information about a particular item mentioned within another element, such as an article or section element For example, if an article on a webpage contains a recipe and a list of ingredients, you could include an aside element with more information about one of the key ingredients, such as its origin or where to purchase it Aside elements can be nested within article elements or within main or section elements Aside elements are commonly used for pull-out quotes, glossary terms, or related links The following is an example of an aside element nested within an article element Recipe

Recipe ingredients and instructions

More information about a specific ingredient

An example wireframe that uses the aside element is shown in Figure 7–6. An example of a webpage that uses an aside element is shown in Figure 7–7 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter HTML Chapter HTML HTML HTML Chapter Header Navigation Main Article Aside Article Aside Footer Figure 7–6 Figure 7–7 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Section Element The section element, as described by the W3C, is an element that “represents a generic section of a document or application A section, in this context, is a thematic grouping of content The theme of each section should be identified, typically by including a heading (h1-h6 element) as a child of the section element.” The section element defines different parts of a webpage document, such as chapters For example, in a webpage that contains a list of tutorials, Tutorials 1-3, each tutorial can be placed within a section and include a heading element with an appropriate title, Tutorial 1, Tutorial 2, Tutorial 3, followed by the tutorial content Be sure to include a heading element within a section element or the page will receive a warning from the W3C HTML validator Use a section element for content that naturally contains a heading The W3C encourages designers to use article elements for other types of subdivided content The W3C also states that the section element “is not a generic container element When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.” The following is an example of a several section elements nested within an article element Tutorials: Cooking Basics

Watch our tutorials to learn the basics of good cooking.

Tutorial 1

Assembling basic kitchen tools.

Tutorial 2

Cooking with essential spices.

Tutorial 3

Following food prep basics.

An example wireframe that uses the section element is shown in Figure 7–8 An example of a webpage that uses a section element is shown in Figure 7–9 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Chapter HTML Chapter HTML HTML HTML Chapter Header Navigation Article Section Section Section Footer Figure 7–8 Figure 7–9 Figure and Figure Caption Elements The figure element is used to group content, such as illustrations, diagrams, and photos According to the W3C, the figure element “represents some flow content, optionally with a caption, that is self-contained (like a complete sentence) and is typically referenced as a single unit from the main flow of the document.” Though the figure element is commonly used to contain images, it can also display a chart, graph, or table Do not confuse the figure element with the img element Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 APP 38 HTML Appendix E Symbols and Characters Quick Reference Table E–2 Mathematical and Technical Characters Symbol Character Reference Description ` ∧ Logical and / ∠ Angle ≈ ≈ Almost equal to d ∩ Intersection c ∪ Union ° ° Degree sign ÷ ÷ Division sign ; ≡ Identical to " ∃ There exists ƒ ƒ Function ∀ For all ẵ ½ Fraction one half ẳ ¼ Fraction one quarter ¾ ¾ Fraction three quarters ≥ ≥ Greater-than or equal to ∞ ∞ Infinity ∫ ∫ Integral H ∈ Element of ≤ ≤ Less-than or equal to µ µ Micro sign = ∇ Backward difference ≠ ≠ Not equal to I ∋ Contains as a member ∂ ∂ Partial differential ' ⊥ Perpendicular ; ± Plus-minus sign ∏ ∏ n-ary product P ∝ Proportional to √ √ Square root ~ ∼ Tilde ∑ ∑ n-ary summation [ ∴ Therefore Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Table E–3 Arrow Characters Symbol Character Reference Description T ↓ Downward arrow ↔ Left right arrow d ← Leftward arrow S → Rightward arrow c ↑ Upward arrow Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Appendix E Using Symbols and Special Characters APP 39 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 APP HTML HTML Note: • HTML HTML HTML HTML HTML • • • APP APP APP APP HTML See Symbols HTML HTML HTML HTML HTML HTML HTML HTML A APP APP HTML HTML HTML APP APP APP HTML 486 HTML APP HTML 315 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP HTML 317 HTML HTML HTML HTML HTML HTML HTML HTML 446 HTML HTML HTML HTML APP HTML HTML HTML 287 B HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 14 APP APP HTML HTML HTML HTML 27 HTML HTML HTML 287 HTML 488 HTML 287 HTML HTML 287 APP APP HTML HTML HTML HTML 24 HTML HTML HTML HTML APP APP HTML HTML HTML 323 HTML HTML HTML APP APP APP HTML HTML 149 HTML APP HTML 476 HTML APP HTML HTML 150 HTML APP HTML HTML HTML HTML HTML IND Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Index Index Index IND Index HTML APP HTML 258 HTML HTML HTML HTML HTML HTML APP APP HTML HTML HTML HTML HTML HTML APP HTML HTML HTML HTML HTML C HTML APP HTML HTML 378 APP HTML 148 APP HTML HTML 399 HTML HTML HTML HTML HTML HTML HTML 484 HTML 538 HTML HTML 488 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 545 HTML APP APP HTML 444 HTML HTML HTML HTML HTML APP APP HTML APP HTML HTML HTML HTML 166 HTML HTML HTML HTML HTML 140 HTML HTML HTML HTML HTML HTML HTML HTML see APP HTML HTML HTML 402 APP HTML HTML HTML APP APP HTML 10 HTML HTML APP APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP APP HTML 398 HTML 378 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML HTML 544 HTML APP APP HTML 446 HTML HTML See HTML HTML HTML HTML HTML HTML HTML HTML HTML APP HTML HTML 379 HTML 396 HTML APP APP HTML 398 HTML 398 APP APP HTML 145 HTML 143BTW HTML HTML HTML See HTML HTML HTML HTML 10 549 HTML HTML 209 HTML 10 549 HTML HTML 209 APP APP HTML 398 HTML HTML HTML HTML HTML HTML APP APP HTML 23 APP APP APP APP APP HTML 159 HTML HTML HTML HTML HTML HTML HTML HTML APP APP APP APP E HTML HTML HTML HTML HTML HTML D HTML HTML HTML 513 HTML HTML HTML HTML HTML HTML HTML 146BTW HTML HTML HTML HTML HTML 545 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 144 HTML HTML APP HTML HTML HTML HTML HTML APP APP APP APP HTML HTML 143 HTML 398 HTML APP APP HTML vs HTML HTML 64 HTML 64 HTML HTML HTML HTML 486 See See Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 See Index Index Index IND IND Index APP HTML APP HTML HTML HTML HTML HTML 144 HTML HTML 10 HTML HTML HTML HTML 545 HTML APP APP APP APP HTML HTML HTML HTML APP APP HTML HTML HTML HTML See HTML HTML HTML HTML HTML 208 HTML APP HTML 205 214 HTML HTML HTML 166 HTML HTML 205 208 HTML HTML HTML HTML HTML 402 HTML HTML APP HTML 472 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML See also HTML HTML 291 HTML HTML HTML HTML 291 HTML 292 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML G HTML HTML 376 HTML HTML HTML HTML HTML 486 HTML HTML HTML HTML 516 HTML HTML 321 HTML 320 HTML HTML HTML APP APP HTML HTML HTML HTML HTML HTML HTML 57 HTML APP APP HTML APP HTML APP F HTML 469 HTML HTML HTML HTML HTML 544 HTML H HTML HTML APP APP HTML HTML APP APP HTML 379 HTML HTML HTML HTML HTML HTML HTML APP APP APP APP HTML 148 HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML HTML HTML APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML Forbes, HTML HTML HTML HTML HTML HTML HTML HTML HTML APP HTML HTML HTML HTML 21 HTML HTML APP HTML HTML APP HTML 23 APP HTML HTML 21 See also specific tag attributes APP HTML HTML HTML HTML HTML HTML APP APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML See HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 209 See HTML HTML 145 HTML 149 HTML 143 vs HTML HTML 396 HTML HTML HTML HTML HTML APP APP APP APP HTML 474 HTML 143 HTML 3–4 HTML HTML HTML See See also HTML See HTML HTML HTML I APP APP HTML HTML APP APP HTML 509 HTML HTML HTML HTML APP HTML 22 HTML 22 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 397 APP HTML APP APP HTML See Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML 208 HTML HTML HTML Index Index Index IND IND Index APP J HTML 441 HTML 23 HTML HTML 484 HTML APP HTML HTML HTML HTML APP APP APP APP HTML See A List Apart, HTML HTML APP HTML HTML See also HTML 209 HTML HTML 208 See HTML 209 HTML HTML 10 APP APP APP APP 398 HTML HTML HTML 167 HTML HTML HTML APP HTML 440 HTML HTML 205 257 HTML HTML HTML HTML HTML HTML HTML 261BTW HTML HTML APP HTML HTML M HTML HTML APP HTML 544 HTML 536 HTML 539 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 150 HTML HTML APP APP HTML HTML L HTML APP APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML K HTML APP APP HTML HTML HTML 24 HTML 206 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP APP APP HTML HTML HTML HTML 396 HTML HTML 15 HTML 144 HTML HTML HTML HTML HTML HTML HTML HTML 291 HTML HTML HTML HTML 259 HTML HTML 509 APP APP HTML HTML 486 HTML 28 Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 436 HTML vs HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP APP HTML O HTML HTML HTML HTML HTML HTML HTML HTML HTML 206 HTML 205 HTML HTML HTML HTML HTML HTML HTML 206 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 397 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML N HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML See also HTML HTML HTML 544 HTML HTML 10 HTML HTML 261BTW HTML 323 HTML HTML HTML HTML HTML HTML HTML HTML HTML 514 HTML HTML HTML 485 HTML APP APP APP APP HTML HTML HTML HTML HTML APP HTML APP APP APP APP APP HTML APP APP HTML 349 HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Index Index Index IND IND Index P 544 APP APP HTML 150 HTML HTML HTML HTML 24 HTML APP See HTML HTML 475 HTML 99 209t HTML 440 HTML HTML HTML HTML HTML HTML 437 HTML HTML HTML HTML HTML HTML HTML HTML APP HTML 402 APP APP HTML HTML 209t HTML HTML 25 APP APP HTML 399 HTML 144 HTML 13 202 HTML HTML HTML HTML HTML HTML HTML 544 HTML 488 HTML 145 APP APP APP APP APP APP APP APP APP APP APP APP APP HTML APP HTML APP APP APP HTML HTML 287 HTML HTML HTML HTML APP HTML HTML HTML HTML APP APP HTML HTML 14 HTML 398 HTML 398 HTML HTML HTML 515 HTML HTML HTML HTML HTML HTML HTML HTML HTML 508 398 HTML HTML 148 APP HTML HTML 378 HTML APP APP APP APP APP APP S APP APP APP APP See Q APP APP HTML HTML HTML HTML R HTML 292 HTML 399 HTML 399 HTML 509 APP See also HTML HTML HTML HTML HTML HTML 400 HTML HTML HTML 396BTW HTML APP APP HTML See also HTML 508 HTML HTML HTML HTML 509 HTML HTML APP APP HTML 319 HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 APP APP HTML HTML HTML APP APP HTML HTML HTML 399 HTML APP APP HTML 14 HTML 145 APP HTML HTML HTML HTML HTML HTML HTML HTML 54 HTML 24 APP HTML HTML HTML 398 APP APP HTML HTML HTML HTML 469 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 538 APP APP APP HTML 142 HTML 143 APP HTML HTML HTML HTML HTML HTML HTML HTML 145BTW HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 469 HTML HTML APP APP HTML 236 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 142 HTML HTML APP APP APP APP HTML HTML HTML 26 HTML 399 HTML HTML 399 APP APP HTML APP APP HTML APP HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML Index Index Index IND IND 10 Index HTML 323 HTML 26 APP APP HTML APP HTML APP HTML APP APP HTML APP APP APP APP APP HTML HTML HTML T APP HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 376 APP APP APP HTML HTML HTML 380 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML See HTML HTML HTML HTML HTML APP APP HTML 398 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML APP HTML HTML HTML 398 HTML 398 HTML HTML HTML 396 HTML HTML HTML HTML APP HTML HTML 398 HTML APP APP HTML HTML HTML HTML 398 HTML 50 HTML HTML HTML APP HTML HTML 470 HTML APP APP HTML HTML HTML HTML HTML HTML HTML APP HTML APP HTML APP APP HTML HTML HTML HTML HTML HTML HTML 380 HTML 380 HTML HTML HTML HTML HTML HTML HTML U APP HTML APP APP APP HTML 29 HTML HTML HTML APP HTML 112 HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 HTML HTML HTML HTML HTML HTML HTML 536 HTML 536 HTML APP 32 HTML HTML HTML HTML HTML HTML HTML 145 HTML 397 APP APP HTML 486 HTML HTML HTML APP APP HTML HTML HTML HTML HTML HTML HTML HTML 205 HTML HTML See also specific viewports HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 544 HTML HTML HTML APP APP HTML HTML HTML APP HTML HTML HTML HTML HTML vs HTML HTML HTML W HTML HTML HTML HTML HTML HTML HTML HTML 548 HTML HTML HTML HTML HTML 533 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 29 V HTML HTML HTML APP APP HTML APP HTML 208BTW See HTML HTML HTML HTML HTML HTML 544 HTML HTML HTML HTML HTML HTML 544 HTML HTML HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 Index Index Index IND 11 IND 12 Index HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 27 X HTML HTML 23 HTML 14 HTML HTML HTML HTML HTML HTML See See HTML HTML HTML 14 HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML HTML 14 HTML HTML HTML HTML HTML HTML 23 APP Y HTML HTML HTML HTML 472 HTML HTML HTML HTML HTML HTML Copyright 2017 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02-200-203 ... further explore the website Figures 7– 12 and 7–13 show two websites that have been recognized by the web design community for their modern designs Figure 7– 12 Figure 7–13 Copyright 20 17 Cengage Learning... WCN 02- 200 -20 3 HTML Chapter HTML Chapter HTML HTML HTML Chapter • 2em 2em • • opacity: 0.85; Q&A Figure 7? ?24 • enter • color: #FFFFFF; • Figure 7? ?25 Figure 7? ?26 ... improvements are applied Copyright 20 17 Cengage Learning All Rights Reserved May not be copied, scanned, or duplicated, in whole or in part WCN 02- 200 -20 3 Microsoft HTML5 & CSS3 20 15 (b) Home page in tablet