How to code, test, and validate a web page

(1)

Chapter 2

How to code, test,

(2)

Objectives

Applied

1. Use a text editor like Aptana Studio 3 to create and edit HTML 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 HTML document using a web site like W3C Markup

Validation Service or Aptana’s validation feature.

Knowledge

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

document.

2. Describe these types of HTML tags: opening, closing, and empty.

3. Describe the use of attributes within HTML tags.

(3)

Objectives (cont.)

5. Describe the components of a CSS rule set.

6. Describe the use of these types of CSS selectors: type, id, and class.

7. Explain how and why you would start a new HTML or CSS file

from a template.

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.

(4)

The basic structure of an HTML5 document

<!DOCTYPE html>

<html>

<head>

.

</head>

<body>

.

</body>

</html>

DOCTYPE declaration

head element

body element

document tree

(5)

A simple 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>

(6)

Our coding recommendation for HTML5

(7)

Two elements with opening and closing tags

<h1>San Joaquin Valley Town Hall</h1>

<p>Here is a list of links:</p>

Two empty 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

(8)

How to code an opening tag with 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">

How to code an empty tag with attributes

(9)

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=

(10)

Coding rules



An attribute consists of the attribute name, an equals sign (=), and

the value for the attribute.



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. To

code multiple attributes, separate each attribute with a space.

Our coding recommendation

(11)

A document with comments and whitespace

<!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>

(12)

Our coding recommendations



Use whitespace to indent lines of code and make them easier to

read.



Don’t overdo your use of whitespace, because it does add to the

size of the file.

(13)

The parts of a CSS rule set

h1 {

color: navy;

}

selector

value

property

(14)

A simple 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 */**

}

(15)

Elements that 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>

<li><a href=

"solutions.html">Solutions</a></li>

</ul>

<p id="copyright" class=

"base_color">Copyright 2012</p>

</div>

</body>

(16)

CSS rule sets that select by type, id, and class

Type

body {

font-family: Arial, sans-serif;

}

ID

#main {

width: 300px;

padding: 1em;

}

#copyright {

font-size: 75%;

text-align: right;

}

Class

.base_color {

color: blue;

}

(17)

(18)

(19)

The root folder for all of the book applications

C:\html5_css3\book_apps

How to create a project



Use the FileNewWeb Project command to display the New

Web Project dialog box.



Or, in the App Explorer window, click on the Create Project

button, select Web Project, and click the Next button to display

the New Web Project dialog box.



In the New Web Project dialog box, enter a name for the project.

Next, uncheck the Use Default Location box, click on the Browse

button, and select the top-level folder for the project.



If a warning message appears, read it so you realize that deleting

the project in Aptana may also delete the project on the disk drive.

Then, click the Finish button.

(20)

(21)

How to open an HTML file within a project



Use the drop-down list in Aptana’s App Explorer to select the

project. Then, locate the file and double-click on it.

How to open an HTML file that isn’t in a project



Use Aptana’s Project Explorer to locate the file. Then,

double-click on it.

(22)

(23)

How to start a new HTML file from any template



Select the FileNewFile command.



In the New File dialog box that’s displayed, select the folder for

the new file and enter a filename including its .html extension.



Still in the New File dialog box, click on the Advanced button,

check the Link to File in the File System box, click on the Browse

button, and select the template for the new file.

(24)

How to start a new HTML file from another file



Open the file that you want to base the new file on. Then, use the

FileSave As command to save the file with a new name.

(25)

(26)

Common coding errors



An opening tag without a closing tag.



Misspelled tag or attribute names.



Quotation marks that aren’t paired.

(27)

How to set the syntax colors



Use the WindowPreferences command to open the Preferences

dialog box.\



Click on Aptana Studio, click on Themes, and choose a theme

from the drop-down list.

(28)

(29)

How to start a new CSS file from any template



Select the FileNewFile command.



In the New File dialog box, select the folder for the new file, and

enter a filename for the new file, including its .css extension.



Still in the New File dialog box, click on the Advanced button,

check the Link to File in the File System box, click on the Browse

button, and select the template for the new file.



Click the Finish button.

How to start a new CSS file from another CSS file



Open the file that you want to base the new file on. Then, use the

FileSave As command to save the file with a new name.

(30)

(31)

Common coding errors



Braces that aren’t paired correctly.



Missing semicolons.



Misspelled property names.



Id or class names that don’t match the names used in the HTML.

Notes



Aptana’s color coding indicates that a measurement like .5em is

incorrect.



However, the digit before the decimal point isn’t required, so an

entry like .5em will be rendered correctly.

(32)

The Show Preview and Run buttons

Show

Preview

button

Run

button

(33)

(34)

(35)

How to run a web page that’s on an intranet or

your own 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.



If you’re using Aptana, select the HTML file and click the Run

button to open the file in the default browser.



If you’re using another text editor or IDE, look for a similar

button or command.

(36)

How to rerun a web page from a browser



Click the Reload or Refresh button in the browser.

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.

How to debug a web page



Find the causes of the errors in the HTML or CSS code, make the

corrections, and test again.

(37)

(38)

How to use the W3C Markup Validation Service



Go to this URL:

http://validator.w3.org/



Identify the file to be validated, and click the Check button.

How to validate an HTML file from Aptana



Select the file.



Issue the CommandsHTMLValidate Syntax (W3C)

(39)

(40)

(41)

How to use the W3C CSS Validation Service



Go to the URL that follows, identify the file to be validated, and

click the Check button:

http://jigsaw.w3.org/css-validator/

How to validate a CSS file from Aptana



Select the file.



Issue the CommandsCSSValidate Selected CSS (W3C)