ITI 133: HTML5 Desktop and Mobile Level I

ITI 133: HTML5 Desktop and Mobile Level I
Session 2 Chapter 2 - How to Code, Test and Validate a Web Page Before Class Activities Set Up Dreamweaver Development Environment Download Student Exercise file to the Desktop Unzip Exercise files to Developmental Folder Download and Print Class Presentations for Notes (Optional)

Exercise 1 - How to code HTML
2/22/2019 Copyright © Carl M. Burnett

Basic Structure of an HTML5 Document
<!doctype html> 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] - 2/22/2019 Copyright © Carl M. Burnett

A HTML5 Document <!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 2/22/2019 Copyright © Carl M. Burnett

<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> 2/22/2019 Copyright © 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"> 2/22/2019 Copyright © 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"> W3C Exercise 2/22/2019 Copyright © Carl M. Burnett

Add Comments to HTML Code
<!DOCTYPE html>  <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>  W3C Exercise 2/22/2019 Copyright © 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. 2/22/2019 Copyright © 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. 2/22/2019 Copyright © Carl M. Burnett

Exercise 2 – How to Code CSS

{color:blue; font-size:12px;}
CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: h1 Selector {color:blue; font-size:12px;} Declaration Property Value W3C Exercise 2/22/2019 Copyright © Carl M. Burnett

CSS Document with Comments
/********************************************************* * Description: Primary style sheet for valleytownhall.com * Author: Anne Boehm *********************************************************/ /* Adjust the styles for the body */ body { background-color: #FACD8A; /* a shade of orange */ } /* Adjust the styles for the headings */ h1 { color: #363636; h2 { font-style: italic; border-bottom: 3px solid #EF9C00; /* bottom border */ /* Adjust the styles for the unordered list */ ul { list-style-type: square; /* Change the bullets */ W3C Exercise 2/22/2019 Copyright © Carl M. Burnett

CSS rule by type, id, and class
body { font-family: Arial, sans-serif; } Class .base_color { color: blue; } ID #main { width: 300px; padding: 1em; } #copyright { font-size: 75%; text-align: right; 2/22/2019 Copyright © Carl M. Burnett

Elements can be selected by type, id, or class
<body> <div id="main“> <h1 class="base_color">Student materials</h1> <p>Here are the links for the downloads:</p> <ul id="links“> <li><a href= "exercises.html">Exercises</a></li> "solutions.html">Solutions</a></li> </ul> <p id="copyright" class="base_color">Copyright 2012</p> </div> </body> 2/22/2019 Copyright © Carl M. Burnett

Common CSS Coding Errors
Braces that aren’t paired correctly. Missing semicolons. Misspelled property names. # or . incorrectly used. Id or class names that don’t match the names used in the HTML. 2/22/2019 Copyright © Carl M. Burnett

Exercise 3 – W3C Markup Validator

How to Display web page on your Computer
Use your browser’s FileOpen or Open File command. Type the complete path and filename into your browser’s address bar, and press Enter. On a Windows system, use Windows Explorer to find the HTML file, and double-click on it. 2/22/2019 Copyright © Carl M. Burnett

How to Test a Web Page Run the page in all of the browsers that are likely to access your site. Check the contents and appearance of the page to make sure it’s correct in all browsers. Click on all of the links to make sure they work properly. Exercise 2/22/2019 Copyright © Carl M. Burnett

W3C HTML Markup Validation Service

ITI 133: HTML5 Desktop and Mobile Level I

Similar presentations

Presentation on theme: "ITI 133: HTML5 Desktop and Mobile Level I"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

ITI 133: HTML5 Desktop and Mobile Level I

Similar presentations

Presentation on theme: "ITI 133: HTML5 Desktop and Mobile Level I"— Presentation transcript:

Similar presentations

About project

Feedback