ITI 133 HTML 5 Desktop and Mobile Level

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

Class Outline § How to code HTML § How to code CSS § W

Exercise 1 - How to code HTML 9/10/2020 Copyright © Carl M. Burnett 3

Basic Structure of an HTML 5 Document <!doctype html> DOCTYPE declaration <html> <head> head element <title>New Movie</title> title element </head> <body> document tree body element </body> </html> 9/10/2020 Copyright © Carl M. Burnett 4

A HTML 5 Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>San Joaquin Valley Town Hall</title> </head> <body> <h 1>San Joaquin Valley Town Hall</h 1> Welcome to San Joaquin Valley Town Hall. We have some amazing speakers in store for you this season! <a href="speakers. html">Speaker information</a> </body> </html> W 3 C Exercise 9/10/2020 Copyright © Carl M. Burnett 5

Most HTML Elements have Opening and Closing Tags <h 1>San Joaquin Valley Town Hall</h 1> Here is a list of links: Two HTML Elements with No Closing Tag <img src="logo. gif" alt="Murach Logo"> Correct Nesting of HTML Tags Incorrect nesting Order your copy today! Correct nesting Order your copy today! 9/10/2020 Copyright © Carl M. Burnett 6

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"> 9/10/2020 Copyright © Carl M. Burnett 7

Adding Attributes to HTML Tags How to code a Boolean attribute <input type="checkbox" name="mail. List" 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"> 9/10/2020 Copyright © Carl M. Burnett W 3 C Exercise 8

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> <h 1>San Joaquin Valley Town Hall</h 1> <h 2>Bringing cutting-edge speakers to the valley </h 2>  9/10/2020 Copyright © Carl M. Burnett W 3 C Exercise 9

Coding Recommendations for HTML 5 § § § § § 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. 9/10/2020 Copyright © Carl M. Burnett 10

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. 9/10/2020 Copyright © Carl M. Burnett 11

Exercise 2 – How to Code CSS 9/10/2020 Copyright © Carl M. Burnett 12

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: Selector h 1 Declaration {color: blue; font-size: 12 px; } Property Value W 3 C Exercise 9/10/2020 Copyright © Carl M. Burnett 13

CSS Comments § A CSS comment begins with "/*", and ends with "*/", 9/10/2020

CSS Document with Comments /***************************** * Description: Primary style sheet for valleytownhall. com * Author: Anne Boehm *****************************/ /* Adjust the styles for the body */ body { background-color: #FACD 8 A; /* a shade of orange */ } /* Adjust the styles for the headings */ h 1 { color: #363636; } h 2 { font-style: italic; border-bottom: 3 px solid #EF 9 C 00; /* bottom border */ } /* Adjust the styles for the unordered list */ ul { list-style-type: square; /* Change the bullets */ } 9/10/2020 Copyright © Carl M. Burnett W 3 C Exercise 15

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

Elements can be selected by type, id, or class <body> <div id="main“> <h 1 class="base_color">Student materials</h 1> Here are the links for the downloads: <ul id="links“> <li><a href= "exercises. html">Exercises</a></li> <li><a href= "solutions. html">Solutions</a></li> </ul> Copyright 2012 </div> </body> 9/10/2020 Copyright © Carl M. Burnett 17

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. 9/10/2020 Copyright © Carl M. Burnett 18

Exercise 3 – W 3 C Markup Validator 9/10/2020 Copyright © Carl M. Burnett

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. 9/10/2020 Copyright © Carl M. Burnett 20

How to Refresh a Web Page in a Browser § Click the Reload or

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 9/10/2020 Copyright © Carl M. Burnett 22