HTML5 www.profburnett.com Session II Chapter 2 - How to Code, Test and Validate a Web Page Chapter 3 - How to Use HTML to Structure a Web Page www.profburnett.com Master a Skill / Learn for Life
Class Outline How to Code, Test and Validate a Web Page How to Use HTML to Structure a Web Page How to use CSS to Format the Elements of a Web Page 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
How to Code, Test and Validate a Web Page Outline HTML Syntax Debug a Webpage 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
HTML Syntax 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Basic Structure of an HTML5 Document <!doctype html> HTML5 DOCTYPE declaration <html> </html> document tree <head> </head> head element title element <title>New Movie</title> <body> </body> body element The basic structure of an HTML document starts off with a document declaration. The document declaration lets the browser know what type of documents is being sent to the browser. The type of document depends on the version of HTML used to create the HTML markup. Browsers, depending on their version are able to interpret what the different HTML document versions can be. Some older browsers might not be able interpret the newer version of HTML markup codes. An older browser cannot interpret the newer HTML5 elements. As a result, additional code must be used to enable older browsers to interpret the newer HTML codes. [Transition 1] – The first tag to be placed in the document is the document type declaration. This defines and alerts the browser of the version of HTML document. In this example the html doctype indicates a HTML5 document type. [Transition 2] – The next tags to be declared in the document is the HTML opening and closing tags. These tags identify the document tree. In this case it identifies a HTML document tree. [Transition 2] – The next tags to be declared are the head tags. These tags identify the head section of the HTML document. The head tags include information that will not be displayed on the web page. This include the page title, css codes anjavescript codes and any other additional information you do not want to be displayed when the web page is rendered by the browser. [Transition 1] – [Transition 1] - 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
A HTML5 Document W3C Exercise <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>San Joaquin Valley Town Hall</title> </head> <body> <h1>San Joaquin Valley Town Hall</h1> <p>Welcome to San Joaquin Valley Town Hall.</p> <p>We have some amazing speakers in store for you this season!</p> <p><a href="speakers.html">Speaker information</a></p> </body> </html> W3C Exercise 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Most HTML Elements have Opening and Closing Tags <h1>San Joaquin Valley Town Hall</h1> <p>Here is a list of links:</p> Most HTML Elements have Opening and Closing Tags Two HTML Elements with No Closing Tag <br> <img src="logo.gif" alt="Murach Logo"> Correct Nesting of HTML Tags Incorrect nesting <p>Order your copy <i>today!</p></i> Correct nesting <p>Order your copy <i>today!</i></p> 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Adding Attributes to HTML Tags Opening tag with attributes - one attribute <a href="contact.html"> Opening tag with three attributes <a href="contact.html" title="Click to Contact Us" class="nav_link"> Empty tag with Attributes <img src="logo.gif" alt="Murach Logo"> 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Adding Attributes to HTML Tags How to code a Boolean attribute <input type="checkbox" name="mailList" checked> Attributes for identifying HTML elements An opening tag with an id attribute <div id="page"> An opening tag with a class attribute <a href="contact.html" title="Click to Contact Us" class="nav_link"> 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Add Comments to HTML Code <!DOCTYPE html> <!-- This document displays the home page for the web site. --> <html> <head> <title>San Joaquin Valley Town Hall</title> </head> <body> <h1>San Joaquin Valley Town Hall</h1> <h2>Bringing cutting-edge speakers to the valley </h2> <!-- This comments out all of the unordered list <ul> <li>October 19, 2011: Jeffrey Toobin</li> <li>November 16, 2011: Andrew Ross Sorkin</li> ... </ul> The code after the end of this comment is active --> 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Coding Recommendations for HTML5 Use lowercase HTML attribute consists name, an equals sign (=), and value. Attribute values don’t have to be enclosed in quotes if they don’t contain spaces. Attribute values must be enclosed in single ‘ ’ or double quotes “ ” if they contain one or more spaces, but you can’t mix the type of quotation mark used for a single value. Boolean attributes can be coded as just the attribute name. Code multiple attributes, separate each attribute with a space. For consistency, enclose all attribute values in double quotes. Use whitespace to indent lines of code Overuse of whitespace increases file size. 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Common HTML Coding Errors An opening tag without a closing tag. Misspelled tag or attribute names. Quotation marks that aren’t paired. Incorrect file references in link, img, or <a> elements. 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Debug a Webpage 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Methods to Debug a Webpage W3C Developer Tools Firefox Firebug Chrome Dev Tools IE Developer Tools MS Edge Developer Tools 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Next – How to Use HTML to Structure a Web Page Break Next – How to Use HTML to Structure a Web Page 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
How to Use HTML to Structure a Web Page Outline Code the Head Section Code the Text Elements Structure the Content Code Links, List and Images Structure the Web Page Student Exercise 1 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Code the Head Section Title Favicon Metadata – charset, name, content External CSS JavaScript Global 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Code the Text Elements Heading and Paragraphs Special Blocks of Text h1, h2, h3, h4, h5, h6, p Special Blocks of Text pre, blockquote, address Inline Elements – page 95 Character Entities – page 97 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Core HTML Attributes id – Unique identifier for element for CSS. class – class name for use by CSS. title – additional info for tooltip. lang – language of the content of the element. 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Structure the Content HTML Block Elements HTML5 Semantic Elements <div> Element <span> Element HTML5 Semantic Elements Other HTML5 Elements 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Code Links, List and Images Coding for: Links List Images 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Structure the Web Page Page Layout HTML File 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Student Exercise 1 Complete Exercise 3-1, page 120 using Dreamweaver. Download Chapter 3 exercise zip file to desktop. Unzip files and folders and place in Session 2 local development folder. Students will upload local development site to testing development site. Students will preview in browser development files. Students will upload files to live site. Students will preview in browser live files. 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett
Class Review How to Code, Test and Validate a Web Page How to Use HTML to Structure a Web Page 4/6/2019 Copyright © 2007 - 2019 Carl M. Burnett