Scribd
Upload
14 views42 pages

Chapter 2 Slides

Uploaded by

dopeyofficialyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
14 views42 pages

Chapter 2 Slides

Uploaded by

dopeyofficialyt
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 42

Chapter 2

How to code, test,


and validate a web page

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 1
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 website 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.
4. Describe the use of HTML comments and whitespace.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 2
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.
9. Describe two benefits of validating HTML files.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 3
The basic structure of an HTML5 document
<!DOCTYPE html> DOCTYPE declaration

<html>
<head>
.
head element
.
</head>
document tree

<body>
.
body element
.
</body>
</html>

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 4
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>

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 5
General coding recommendation for HTML5
 Although you can code the HTML using lowercase, uppercase, or
mixed case, we recommend that you do all coding in lowercase
because it’s easier to read.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 6
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
<p>Order your copy <i>today!</p></i>

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 7
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


<img src="logo.gif" alt="Murach Logo">

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 8
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">

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 9
Coding rules
 An attribute consists of the attribute name, an equal 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. They
don’t have to include the equal sign and a value that’s the same as
the attribute name.
 To code multiple attributes, separate each attribute with a space.

Our coding recommendation


 For consistency, enclose all attribute values in double quotes.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 10
A document with comments and whitespace
<!DOCTYPE html>
<!--
This document displays the home page
for the website.
-->

<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 HTML code in the unordered list
<ul>
<li>October 19, 2011: Jeffrey Toobin</li>
<li>November 16, 2011: Andrew Ross Sorkin</li>
<li>January 18, 2012: Amy Chua</li>
<li>February 15, 2012: Scott Sampson</li>
<li>March 21, 2012: Carlos Eire</li>
<li>April 18, 2012: Ronan Tynan</li>
</ul>
The code after the end of this comment is active -->
<p>Contact us by phone at (559) 444-2180 for ticket information.</p>
</body>
</html>

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 11
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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 12
The parts of a CSS rule set
selector
property
value
h1 {
color: navy; declaration
}

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 13
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; /* This is a shade of orange. */
}

/* Adjust the styles for the headings */


h1 {
color: #363636;
}
h2 {
font-style: italic;
border-bottom: 3px solid #EF9C00; /* Adds a line below h2 headings */
}

/* Adjust the styles for the unordered list */


ul {
list-style-type: square; /* Changes the bullets to squares */
}

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 14
Elements that can be selected by type, id, or class
<body>
<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>
</body>

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 15
CSS rule sets that select by type, id, and class
Type
body {
font-family: Arial, sans-serif;
font-size: 100%;
width: 300px;
padding: 1em;
}
h1 {
font-size: 180%;
}

ID
#copyright {
font-size: 75%;
text-align: right;
}

Class
.base_color {
color: blue;
}

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 16
The elements in a browser

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 17
The first dialog box for creating an Aptana project
for an existing website

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 18
The root folder for all of the book applications
C:\html5_css3_2\book_apps

How to create a project for a new website


 Use the FileNewWeb Project command to display the New
Web Project dialog box. Or, in the App Explorer window, click
the Create Project button, select Web Project in the dialog box
that’s displayed, and click the Next button to display the New
Web Project dialog box.
 In the New Web Project dialog box, choose a template, click the
Next button, enter a project name, and click the Finish button.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 19
How to create a project for an existing website
 Use the FileImport command or click the Import Project button
in the App Explorer window to display the Import dialog box
that’s shown above. Then, expand the General category, select
Existing Folder as New Project, and click the Next button to
display the Promote to Project dialog box.
 Browse to the folder for the project, enter a project name, and
click on the Finish button.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 20
Aptana with a project in the App Explorer
and an HTML file in the first tab

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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.

Two ways 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.
 Use the FileOpen File command.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 22
How to create a new HTML file from a template

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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 that the new file should be stored
in and enter a filename for the new file including its .html
extension.
 Still in the New File dialog box, click the Advanced button, check
the Link to File in the File System box, click the Browse button,
and select the template that you want to start the new file from.
Then, click the Finish button.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 25
Aptana with an HTML auto-completion list

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 26
Common 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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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.
 In this book, we use the Dreamweaver theme.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 28
How to create a new CSS file from a template

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 29
How to start a new CSS file for a project
from any template
 Select the FileNewFile command.
 In the New File dialog box that’s displayed, select the folder that
the new file should be stored in, and enter a filename for the new
file, including its .css extension.
 Still in the New File dialog box, click the Advanced button, check
the Link to File in the File System box, click the Browse button,
and select the template that you want to start the new file from.
 Then, 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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 30
Aptana with an auto-completion list for a CSS file

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 32
The Show Preview and Run buttons

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 33
The preview of the dreamweaver_book.html file

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 34
The HTML file displayed in the Chrome browser

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 35
Three ways to run a web page that’s
on an intranet or your own computer
 Start your browser, and use the FileOpen or Open File
command to open the file. Or, type the complete path and
filename into the address bar, and press Enter.
 Use the file explorer on your system to find the HTML file, and
double-click on it.
 If you’re using Aptana, select the HTML file in the App Explorer
and click the Run button to open the file in the most recently used
browser. If you’re using another text editor or IDE, look for a
similar button or command.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 36
How to rerun a web page from a browser
after you change its source code
 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.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 37
The home page for the W3C validator

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 38
How to use the W3C Markup Validation Service
 Go to the URL that follows, identify the file to be validated, and
click the Check button:
http://validator.w3.org/

How to validate an HTML file from Aptana


 Open the file and choose CommandsHTMLValidate Syntax
(W3C).
 At this writing, this command causes an error to occur due to a
known bug. This should be corrected in the near future.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 39
The errors and warning for an HTML file
with a missing > at the end of the img element

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 40
The CSS Validation Service with errors displayed

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 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


 Open the file. Then, issue the CommandsCSSValidate
Selected CSS (W3C) command.

Murach's HTML5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc. Slide 42

You might also like