How to code, test, and validate a web page · HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 2 Objectives Applied 1. Using a text editor like Notepad++ or

HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 1© 2010, Mike Murach & Associates, Inc. Slide 1

Chapter 2

How to code, test, and validate a web page

HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 2

Objectives

Applied 1. Using a text editor like Notepad++ or TextWrangler, create and edit

HTML, XHTML, and CSS files. 2. Test an HTML document that’s stored on your computer or a local

server by loading it into a browser. 3. Validate an XHTML document using a web site like W3C Markup

Validation Service.


Objectives (continued)

Knowledge 1. Describe the use of the root, head, and body elements in an HTML

document. 2. Describe these types of HTML tags: opening, closing, and self-closing. 3. Describe the use of attributes within HTML tags. 4. Describe the use of HTML comments and whitespace. 5. Describe the components of a CSS rule set. 6. Describe the use of these types of CSS selectors: element, id, and class. 7. Explain how to start a new HTML or CSS file from a template and what

the benefit of doing that is. 8. Describe three ways to run a web page and one way to retest a page after

you’ve changed the source code for the page.


The basic structure of an XHTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ... > <html xmlns="http://www.w3.org/1999/xhtml"> <head> . . </head> <body> . . </body> </html>


A simple XHTML document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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>


Differences between XHTML and HTML In XHTML, the <!DOCTYPE> declaration and the html, head, and

body elements are required. In HTML, these elements can be omitted, although that will make validation more difficult.

In XHTML, the html element requires an xmlns attribute. In HTML, this attribute isn’t allowed.


Two elements with opening and closing tags <h1>San Joaquin Valley Town Hall</h1> <p>Here is a list of links:</p>

Two self-closing tags <br /> <img src="logo.gif" alt="Murach Logo" />

Correct and incorrect nesting of tags Correct nesting <p>Order your copy <i>today!</i></p>

Incorrect nesting <p>Order your copy <i>today!</p></i>


Differences between XHTML and HTML tags In HTML, tag names can be coded in lowercase, uppercase, or mixed

case. In XHTML, tag names must be coded in lowercase. In HTML, the closing tags for some elements can be omitted. In

XHTML, a closing tag is always required. In HTML, a self-closing tag can be coded without the slash (i.e. <br>

instead of <br />). In XHTML, the slash is required. In addition, a space is typically coded before the slash.

In HTML, you can nest tags incorrectly. In XHTML, you can’t.


How to code attributes An opening tag with one attribute <a href="contact.html">

An opening tag with three attributes <a href="contact.html" title="Click to Contact Us" class="nav_link">

A self-closing tag with two attributes <img src="logo.gif" alt="Murach Logo" />

A self-closing tag with a Boolean attribute <input type="checkbox" name="mailList" checked="checked" />


Two common attributes 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">


Differences between XHTML and HTML attributes In HTML, attribute names can be coded in lowercase, uppercase, or

mixed case. In XHTML, attribute names must be coded in lowercase. In XHTML, attribute values must be enclosed in single or double

quotes. In HTML, they don’t have to be. In HTML, the name of a Boolean attribute and the equals sign can be

omitted when you want to represent an on value. In XHTML, you must code both a name and a value.


XHTML document with comments and whitespace <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ... >  <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>San Joaquin Valley Town Hall</title> </head> <body> <h1>San Joaquin Valley Town Hall</h1> <h3>Bringing cutting-edge speakers to the valley</h3> <h2>2009-2010 guest speakers</h2>


XHTML document (continued)  <p>Contact us by phone at (559) 444-2180 for ticket information.</p> </body> </html>


The parts of a CSS rule set


A simple CSS document with comments /******************************************************** * Description: Primary style sheet for valleytownhall.com * Author: Anne Boehm ********************************************************/ /* Set the styles for the body */ body { background-color: #FACD8A; } /* Set the styles for the headings */ h1 { color: #363636; } h3 { font-style: italic; border-bottom: 3px solid #EF9C00; } /* Set the styles for the unordered list */ ul { list-style-type: square; }


HTML elements with id and class attributes <body> <div> <h1 class="base_color">Student materials</h1> <p>Here are the links for the downloads:</p> <ul id="nav"> <li><a href="exercises.html">Exercises</a></li> <li><a href="solutions.html">Solutions</a></li> </ul> <p id="footer" class="base_color">Copyright 2009/p> </div> </body>


CSS rule sets that select by element, id, and class HTML element body { font-family: Arial, sans-serif; }

ID #main { width: 300px; border: 2px solid black; padding: 1em; } #footer { font-size: 75%; text-align: right; }

Class .base_color { color: blue; }


The elements in a browser


Notepad++ as it’s about to open an HTML file


The directory for the files in this chapter C:\murach\html_css\book_apps\ch02

Two ways to open an HTML file Start Notepad++, select the FileOpen command, and use the Open

dialog box to open the HTML file. Start Windows Explorer, navigate to the HTML file, right-click on the

file, and select the Edit with Notepad++ command.


Notepad++ after a new HTML file has been started from a template


The Save As dialog box


How to start a new file from scratch Select the FileNew command. This starts an empty file in a new tab. Use the FileSave As command to display the Save As dialog box.

Then, select the directory for the file, enter a file name, select the file type (html is the default), and click the Save button.

How to start a new file from a template Open the file that contains the template that you want to use. Then,

before you change anything, use the FileSave As command to save the file with a new name.


Notepad++ with an auto-completion list


Common coding errors An opening tag with no closing tag. Attribute values that aren’t enclosed in quotation marks. Quotation marks that aren’t paired. Misspelled tag or attribute names. Incorrect file references in link, img, or a elements.


How to enable auto-completion Use the SettingsPreferences command, click the Backup/Auto-

completion tab, and check the “Enable Auto-completion on each input” box.


Notepad++ after a new CSS file has been started from a template


The Save As dialog box


How to open CSS files or start new CSS files from scratch Use the same methods that you use for HTML files, but use css

extensions.

How to start a new CSS file from a template Open the file that contains the template that you want to use. Then,

before you change anything, use the FileSave As command to save the file with a new name and the css extension.


Notepad++ with an open CSS file


Common coding errors Braces that aren’t paired correctly. Missing semicolons. Equal signs instead of colons. Id or class names that don’t match the names used in the HTML.


The HTML file displayed in the Firefox browser


The Open File dialog box for Firefox


Four ways to test a web page that’s on an intranet or your own computer Start your browser, and use the FileOpen or Open File command to

open the file. Start your browser and type the complete path and filename into the

address bar. If you’re using Windows, use Windows Explorer to find the file, and

double-click on it. If you’re using Notepad++, use the RunLaunch commands to open

the file in Firefox or Internet Explorer. If you’re using another text editor, look for similar commands.


How to retest a web page Click the Reload or Refresh button.

The URL for the W3C Markup Validation Service http://validator.w3.org/


The home page for the W3C validator


Error listing for HTML file with missing tag ending


The URL of the W3C CSS Validation Service http://jigsaw.w3.org/css-validator/


The CSS Validation Service with errors displayed

Documents

How to code, test, and validate a web page · HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 2 Objectives Applied 1. Using a text editor like Notepad++ or