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