ILLUSTRATED SERIES” HTML5 and CSS3 Complete Second Edition ATURES: Create a website with forms, video, JavaScript, cutting-edge CSS, and more New! Covers responsive design New! Integrates mobile design and testing Sasha Vodnik Gp PaHTML5 & CSS3 Unit Structuring Content in a Web Document You are building a web page for Lakeland Reeds Bed and Breakfast that contain basic information about the business. In this unit, you will use HTML elements and attributes to structure the page contents, incorporate information for browsers, and validate and debug your work. Unit Objectives After completing this unit, you will be able to: . Evaluate web accessibility standards * Specify the viewport Incorporate attributes ¢ Debug your HTML code © Implement the div element ¢ Validate your HTML code * Add HTMLS semantic elements * Create an XHTML document « Use special characters Files You Will Need GD sis | Gh sfies GD stiles Ge} 2ties Gem ties GM 2fies ied Biles For specific filenames, see Filenames_B.paf in the Unit B Data Files folder.HTMLS & CSS3 LO) Ca As you learn t0| create web page elements for spectic types of content, be sure to study the best practices or accesibity related those elements You can read about the WCAG at w3.orq/WAVintro! cag. Evaluate Web Accessibility ‘Once you make a web page publicly available on the internet, users can access it using a wide variety of user agents, which are programs and devices that interpret web documents. Many web users view pages with the default settings in modem desktop and mobile browsers such as Google Chrome, Apple Safari, Mozilla Firefox, and Microsoft Internet Explorer (IE). Some users with disabilities may use custom browser settings, or even specialized software or hardware, to access the web. While laws in many countries spell out mandatory accessibility standards for government websites, building a high level of accessibility into any web pages you create widens the potential audience for your work, as illustrated in FIGURE 8-1. Thus, as a web developer, its important that you understand and implement web accessibility standards as you create your web pages in ‘order to make them adaptable to the needs of different users and the capabilities of different user agents. A ‘widely used reference for implementing web accessibility is the Web Content Accessibility Guidelines (WCAG) maintained by the World Wide Web Consortium (W3C). (EXSE> To help ensure that the Lakeland Reeds website is widely accessible, you review the main tenets of web accessibility standards. The WCAG describes techniques for helping your web content meet the following goals, as broadly as possible: ' * Perceivable Al your web page content needs to be accessible in whatever format a given user needs to access it. This includes ensuring that any information that you convey visually i also available by non-visual means, such as text descriptions for images and videos. Many people with visual impairments access the web using devices called screen readers that read aloud web page content, such as text and descriptions that a user selects. In addition, any audio content should be accompanied by transcripts or written descriptions, which can substitute for many users with auditory impairments. © Operable Users interface with computers in different ways, While many users scroll web pages and click links using a mouse, ensuring that no elements of your web pages rly on the use of a mouse makes your web pages more accessible to people with some physical impairments. Web pages need to allow users to explore and read the ‘web page content at the users’ pace. Web pages should allow scrolling or sel-updating features to be paused, stopped, or hidden. Designs should not include elements known to cause seizures, such as certain frequencies of flashing, Finally, navigation within the site and to external pages should be clearly indicated, easy to understand, and, ideally, redundant, * Understandable ‘The language that a web page is written in should be indicated, and ways for users to understand any specialized vocabulary used in the web page should be included. Links should not make unexpected or drastic changes to the way a web page is displayed; some warning should be given if clicking a link will result in a non-standard change. When possible, fonms that accept user input should include means for identifying common errors and allowing users to correct them. * Robust ‘Web pages should be coded according to web standards, ensuring that they can be accessed by the widest possible varity of programs and devices, Be sure you understand and use these techniques when designing web pages in order to maximize accessibility Structuring Content in a Web DocumentFIGURE B-1: A web page before and after an accessibility redesign Revisions Bookstore and Cafe | Custom brewed coffee and hand-selected books. Special orders are our specialty. Learn about our store history, look at our upcoming events, and see where we're located. Background darkened for improved text contrast ese Li ele User) Pacer ai} Navigation bar added women, — PROC COOIRB II CL ae TCR OF Cg around site and to make site organization Viewable ata glance -Home | Store History | Upcoming Events | Location Custom brewed coffee and hand-selected books. Special orders are our specialty. Prva ern Tenant meres: ry ae! In addition toa web developer's work creating ast, other factors proces, andthe accessibility choices ofthe mars ofthese pack- significantly influence web accessibility. The developer of user ages affects the accessibility ofthe content produced using ther. agents make decisions that affect how their software and devices Thus, wile web developers have a crucial ret ply in building interact with web content, which impacts whether users can access and maintaining a web page that’ available to everyone, ican be content in specific ways. In addition, some web content i Useful to see your roe as part ofa larger team and to recognize produced using software that automates the web development when you un against a imitation that can’t easly be fixe. Structuring ContentinaWeb Document QETerr) as Incorporate Attributes Many, but not all, HTML elements allow you to set attributes. An attribute is additional code within an opening element tag that specifies information about that element. To use an attribute, you provide two pieces of information: an attribute name and the value you are assigning to the attribute. Within an element's opening tag and following the tag name, you insert a space, followed by the attribute name, an ‘equal sign (=), and the attribute value enclosed in quotes. (ESE You add attributes to two elements in your document to give browsers information about the document's content. ‘or mosteitrs, you ress (Ctel[Shift5] in) or [command 1. Inyour editor, open the HTM_B-1.html file from the Lessons folder where you store your Data Files for this unit 2. Below the title element, insert the comment shown in FicuRe 82, substituting your ‘name and today’s date where indicated ‘nitS] Mee) 98€ p> 3, Save a copy of the file to the Lessons folder with the name aboutus html renew filename, hheml> tag and not tthe end ofthe DOCTYPE statement. in cause some code sdtors indent auto- natal you may ‘As shown in FIGURE B-2, the body section of the document contains an bi element, an h2 element, and two p elements, 4, Open aboutus.html in a browser ‘The document is displayed with a large heading, a smaller heading, and two paragraphs of text, 5, Return to your editor, then clck just to the left ofthe closing > in the opening tag 6. Press [Spacebar], then type lang="en" ‘The Lang attribute specifies the language in which a document's content is written, The value en specifies English as the language. TABLE B-1 lists the Lang values for several other languages. FIGURE 8-3 shows the ‘ang attribute and value inserted in the opening tag. wineed top pe 7, Click after the closing comment tag ( ~-> ), press [Enter], then press [Spacebar] six Spacebar to indent. se the figures to peck for and match ndenting times or as needed to create the indent Because you want the new element nested within two other elements (html and head), you indent six spaces—three for each level of indentation, Crs > 8. Type Thecreta> gis 2 FIGURE 8-4 shows the meta element and the charset attribute and value in the head section of the one-sided tag soit does not equirea dosing tag document. The neta element enables you to pass information about a web page to user agents that open i ‘The charset attribute specifies the character encoding, which is the system user agents should employ to translate the electronic information representing the page into human-recognizable symbols, such as letters and numbers. 9. Save your document, return to your browser, then click the Refresh or Reload button to view the changes to your web document ‘The appearance of the page inthe browser does not change. In genera, meta elements and attributes of the htm element do not change how a document is rendered. PRED Svucturing Contentin a Web DocumentFIGURE B-2: Starting code for About Us page cae cee criteotakeland Reeds Bed and Breakfast ~ About Uac/title> latin anlartlil mcuibaet CB) actors your fieat and Last name ere HINES and 6583" rSlestfated Unit B, Lessons ed _— 1 ele fumes ae ose chibtataland Woods Bhd and Breaktest — about Us

45 Marsh Grass Ln. - Marble, MN 55766 - (218) $$8-3252

4 2 Giz nn FIGURE ‘Lang attribute inserted in opening tag Atte name ‘cheag> Lakeland Reeds Sed and Sreakfast Filename: aboutus.htal Faduna Sgal 10/23/18 HIWLS and CSS3 Tliusteated Unit 3, Lessons Daas.) aaa [> t Atribute va “ for >. D ee asain na sa aa esecanci> eatin Se Tess TABLE Bt: Basic Lang attribute values de German he Hebrew 1 usian el Greek hi Hindi sa Sanskrit E en English it ttalan ur Urdu I es Spanish je Japanese zh Chinese 5 Structuring Content in a Web DocumentITMILS & CSS3 Ud exiting elements your code editor ‘dents new elements tomatic, you ‘ay not need to «ess [Spacebay] at [L Remember to compare your code othe figures to Confirm indents he h2 element ars a heading hat’ atthe second lighest heading level ‘the document. Implement the div Element To create the basic structure of a web page, you use the html, head, and body elements. In addition, you can add content to the body section with elements such as h1 and p. It can be useful to group content within the body section to help keep the code organized, especially in larger web documents, The div element is used as a parent element for other elements on your page that function together. For instance, you could use a div element to mark a heading element and its related paragraph elements as a group. QEEEB> The code for the Lakeland Reeds About Us page includes content specific to this page. You organize the code by adding a div element enclosing the content specific to this page, which includes the h2 heading and the fist p element. 1. Return to aboutus.html in your editor, click after the closing tag, then press [Enter] to add a new line 2. Press [Spacebar] six times or as needed to create an indent that matches the indent for the preceding tag, then type

‘The

tag is the opening tag for the div element and should be indented 3 spaces more than the opening tag. 3. Click after the first closing

tag, then press [Enter] 4, Press [Spacebar] six times or as needed to create an indent that matches the indent for the opening

tag, then type

‘The div element contains both the h2 element and the first p element between its opening and closing tags. 5. Click before the opening

tag, press [Spacebar] three times or as needed to create an indent, click before the first opening

tag, then press [Spacebar] three times or as needed to create an indent Becauise you are adding a parent element, you increase the indentation of tags for child elements to keep your code readable. Compare your code to FIGURE, which shows the code containing the new div element. 6. Save your document, return to your browser, then refresh or reload aboutus.html in your browser ‘As shown in FIGURE B-6, the appearance ofthe page in the browser does not change. Because the div ‘element is used for structuring code, adding the div element to the document does not change the way the document is rendered. The document looks the same after the div element is added as it did before. Many users want a proces of finding and consuming web content with the goal of removing hal the words. This helps focus your that is dynamic and fast-paced. When you write content forthe \witng and reduces the content of your web page tothe essential, web, you should keep ths in mind, Web content should generallybe which makes it easier fr web users to scan and rad. brief and scannable. A user should be able to get the gist of what ‘ter you publish content onlin, it's crucial to keep it up to your page contains with a quick glance. his allows ser to quickly _date—outof date information makes your website's content sem decide to tay on the page ifthe page contains the information Unreliable. You can minimize the amount of regular updating you they/'e looking for, orto navigate elsewhere and keep looking, You need to do by reducing or eliminating relative references to dates, ‘an make content scannable by incuding a shor, descriptive head- (such as “5 years ago” or “in 18 months") or labeling specific ing at the top, and by breaking the content itsef into sections with _ dates as being inthe future (such as “The building will be headings. After writing the actual content, itcan be useful toreviseit completed in 2013.") HED St cturing Content in a Web Document(Code containing new civ element 1 2 3 _ Lakeland Reeds Bed and Breakfast Filename: aboutue.heml Author: your first and last name Date: today’s date | HIMLS and CSS3 Illustrated Unit 8, Leseons | > _ fs [ch2>About Us |

iakeiand Reeds is an ideal place to unplug from your daily routine. We're Inexe to help you get the most out of your time with us, from cances and life lvests for a day out on the lake, to DVDs and popcorn for a quiet evening in. We Look forward to welcoming you!

z

45 Marsh Grass Ln. - Marble, MN 55764 - (218) 26 FIGURE 8-6: About Us page in a browser > © O filey//C:pUsers/sasha_000/Documents/394049_HTML_UB_Data_Files/Lessons/aboutushiml Lakeland Reeds i df'Geal place to unplog fee your dad routine. We're ere to help you get the most et of your tne with ws, fom canoes and fe ‘ssi for» day out onthe lake to DVDs ad popcorn for quet even m_ We look forward to elcoming Yow! 45 Marsh Grass La. - Marble, MBN 55764 - 218) 555-5253 Structuring Content in a Web DocumentHTMLS & CSS: 2 one * Use the HTMLS header, article, and Footer elements + Make semantic elements work for EB users. Itsoften possible to mark up web page contents semantically inmore than one way The choice of which elements to use can vary depend- ing onthe developer andthe st ‘A warning about blocked content might open, depend: ing on your browser seitngs. 0, allow blocked content Add HTML5 Semantic Elements All HTML elements have semantic value—that is, they indicate the meaning of their content. For instance, the hi element marks text as a top-level heading, and the p element marks a paragraph of text. The div clement has limited semantic meaning—it groups elements but adds no information about what type of information it contains, However, the most recent version of HTML, known as HTMILS, includes a number of grouping elements, known as semantic elements that indicate the role of their content. Search engines can use this semantic information to provide more accurate search results. This means that using semantic elements can make it easier for people using a search engine to find information about your business or organization. TABLE 8-2 lists several semantic elements. Because older versions of Internet Explorer can’t interpret semantic elements, you also include a script element in the head section, which instructs older browsers how to interpret the semantic elements. The script element references code in an external file that browsers can use to help them interpret the elements. (EHP You add the header and footer elements to indicate the content at the start and end of the page, and you add a script element referencing file that makes it possible fr users of older versions of Internet Explorer to view the document. FIGURE B-7 shows a wireframe of the About Us page with each section marked. 1. Return to aboutus.html in your editor 2. Click after the opening tag, press [Enter], press [Spacebar] six times or as needed to create the indent, then type

The header element marks content that occurs at the start of a document. 3, Click after the closing tag, press [Enter], press [Spacebar] six times or as needed to create the indent, then type

Aheader element is added as the parent element of the h1 element. 4. Click just before the opening

tag, then press [Spacebar] three times or as needed to create the indent 5. Click after the closing

tag, press [Enter], press [Spacebar] six times or as needed to create the indent, then type A footer clement is added as the parent element of the second p element, 7. Click just before the second opening

tag, then press [Spacebar] three times or as needed to create the indent 8. In the head section, click after the tag, press [Enter], press [Spacebar] six times or as needed to create the indent, then type A script element references an external script file whose name is specified as the sre attribute value. FIGURE B-8 shows the completed code. 9. Save your document, return to your browser, then refresh or reload aboutus.html Like the div element, semantic elements do not change the page's display in a browser. 10. If you have access to Internet Explorer 8 or an earlier version of Internet Explorer, use it to open aboutus.html Because of the script element you added to the document's head section, the document is displayed correctly in older versions of Internet Explorer Structuring Contentin a Web DocumentFIGURE 8-7; Wireframe for Lakeland eds Aout Us page Pageheader —-—>| Lakeland Reeds Bed & Breakfast description of amenities “content | Page footer —1—>] contact information SRetemnene FIGURE B-8: Code with semantic elements and script element Date: today’s date —————— BIMES and CSS3 Tilustreted Cait 3, Attribute value se enclosed in neta charset="utf-8"> Sieglot sfotodesnixs canton 6204.30" nript>-t $$ pleas | Atribute name feheadex> ‘hi>Lakeland Reeds Bed and Breakfast | kneader> ‘ “ as parent of h1 element “p>iakeland Reeds is an ideal place to unplug from your daily routine. We're se dlement added 9g #27 Yo" get the most out of your time with us, fron canoes and Life footer element added as ° TPs oc on the lake, to DVDs and popcorn for a quiet evening in. We parent of second p element >, sd to welcoming you!

‘ I