Structuring Content in a Web Document Unit B Structuring Content in a Web Document
Two parts to this project. Project a – due at 11:59 pm Two parts to this project. Practice work from textbook – uploaded to the unit folder that is directly under the unita folder. Project work – projecta.html is uploaded to the project folder that is directly under the unita folder. In Canvas you submit the URL for the location in your eGCC account where these files are located i.e. http://web.gccaz.edu/~abc1234677/unita
If you have any errors in projecta If you have any errors in projecta.html you MUST correct them before going on to project B.
Evaluate Web Accessibility Standards Web pages should be accessible to provide access to the widest possible audience Web Content Accessibility Guidelines (WCAG): reference for implementing web accessibility Accessibility goals: perceivable, operable, understandable, and robust
Web page enhanced for accessibility.
Head Body Title h1, h2, h3, h4, h5, h6 Paragraph Break Header Footer HTML TAGS Head Body Title h1, h2, h3, h4, h5, h6 Paragraph Break Header Footer Div Nav Article Aside
Incorporate Attributes Attribute: additional code within an opening element tag that specifies information about that element, e.g. <html lang="en"> To use an attribute, use Attribute name Attribute value surrounded by quotes Separated by an equal sign, e.g. <meta charset="utf-8">
lang attribute The lang attribute is used to identify the language of the content on a web page. The lang attribute is helpful to users of assistive technology such as screen readers that can adjust the pronunciation depending on the language used.
Charset attribute Specifies the character encoding for the HTML document. Common values are: UTF-8 - Character encoding for Unicode ISO-8859-1 - Character encoding for the Latin alphabet Any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it.
Implement the div ElemenT Groups elements such as heading and its related paragraphs. Used as the parent element to the other nested elements. div element does not change the appearance of the web page.
SEMANTIC ELEMENTS GIVE MEANING
Add HTML5 Semantic Elements All HTML elements have semantic value because they indicate the meaning of their content, e.g. h1 indicates a heading one p indicates a paragraph div element has limited semantic meaning because it groups elements but adds no other meaning
Several of the most common HTML5 semantic elements Search engines use semantic elements to provide more accurate search results. Several of the most common HTML5 semantic elements
script element helps browsers interpret elements Code with semantic elements and script
WHAT IS THE CORRECT ORDER? <article> </article> <body> </body> <!DOCTYPE html> <footer>Contact us at 555-1234</footer> <h2>Acme Company</h2> <head> </head> <header> </header> <html lang=“en”> </html> <nav>Links to other pages go here</nav> <p>This is a sample web page for Acme Inc. More will be added later.</p> <p>Second paragraph about Acme</p> <title>Acme Inc</title> <!DOCTYPE html> <html lang=“en”> <head> <title>Acme Inc</title> </head> <body> <header> <h2>Acme Company</h2> </header> <nav>Links to other pages go here</nav> <article> <p>This is a sample web page for Acme Inc. More will be added later.</p> <p>Second paragraph about Acme</p> </article> <footer>Contact us at 555-1234</footer> </body> </html>
Use Special Characters Some characters cannot be entered directly into HTML text They may be misinterpreted as computer instructions Character reference: formatted code that represents characters in the HTML character set Have the format &code;
Two types of character references Numeric character reference, format &#code;, e.g. • for a bullet symbol Named character reference, only a few, format &code;, e.g. > for greater than symbol (>) Important character references
You want to have the following appear on your web page – where there are two spaces after a period and before the next sentence. If you put two spaces between the period and Well you get: Solution - a character reference for a non-breaking space -
Specify the Viewport Viewport: the imaginary window through which most mobile browsers display web pages viewport meta element: used to change a browser’s viewport settings name attribute set to the value of viewport content attribute specifying one or more pairs of properties and values
Listing of viewport attribute properties Most commonly used viewport content value: width=device-width” Listing of viewport attribute properties
Bug: a problem that results from incorrectly written code Debug your HTML code Bug: a problem that results from incorrectly written code Debug: the process of finding and removing bugs from code
Debug your HTML code Common bugs and causes
Useful for ensuring code works now and in the future. Web page validation. Useful for ensuring code works now and in the future. Can be used to detect errors in code. Errors should be corrected. Warnings and informational messages http://validator.w3.org/
Common validation errors and warnings
Find the 10 errors in this code. <DOCTYPE html> <html> <head> <meta charset="utf"> <title>Lakeland Reeds Bed and Breakfast</title> <div id="box"> <h1>Lakeland Reeds Bed and Breakfast</h1> <h2>About Us <p>Lakeland Reeds is an ideal place to unplug from your daily routine, whether on the shore of Twin Lakes watching the sundown over the cattails or just curled up in a hammock on our screened wraparound porch with a good book. We're here to help you get the most out of your time with us, from canoes and life vests for a day out on the lake, to DVDs and popcorn for a quiet evening in. We look forward to welcoming you!</p> <p id="contact">Philip Blaine, Proprietor 45 Marsh Grass Ln.<br />Marble, MN 55764<br />(218) 555-5253</p> <div> </body> <p>Alex b Cook HTML5 Unit z </p> Find the 10 errors in this code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lakeland Reeds Bed and Breakfast</title> </head> <body> <div id="box"> <h1>Lakeland Reeds Bed and Breakfast</h1> <h2>About Us</h2> <p>Lakeland Reeds is an ideal place to unplug from your daily routine, whether on the shore of Twin Lakes watching the sundown over the cattails or just curled up in a hammock on our screened wraparound porch with a good book. </p> <p> We're here to help you get the most out of your time with us, from canoes and life vests for a day out on the lake, to DVDs and popcorn for a quiet evening in. We look forward to welcoming you!</p> <p id="contact">Philip Blaine, Proprietor 45 Marsh Grass Ln.<br />Marble, MN 55764<br />(218) 555-5253</p> </div> <p>Alex b Cook HTML5 Unit z </p> </body></html>