Scribd
Upload
58 views

How To Code, Test, and Validate A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc

Uploaded by

Jp Peralta
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
58 views

How To Code, Test, and Validate A Web Page: Murach's Html5 and CSS3 (3rd Ed.), C2 © 2015, Mike Murach & Associates, Inc

Uploaded by

Jp Peralta
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 1
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 2
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 3
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 4
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 5
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 6
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 7
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 8
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3
(3rd Ed.), Slide 9
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 10
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 11
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 12
C2
The parts of a CSS rule set
selector
property
value
h1 {
color: navy; declaration
}

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 13
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 14
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 15
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 16
C2
The elements in a browser

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

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 18
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 19
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 20
C2
Aptana with a project in the App Explorer
and an HTML file in the first tab

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 21
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 22
C2
How to create a new HTML file from a template

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 23
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 24
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 25
C2
Aptana with an HTML auto-completion list

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 26
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 27
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 28
C2
How to create a new CSS file from a template

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

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

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

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

Murach's
HTML5
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 35
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 36
C2
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
© 2015, Mike Murach & Associates, Inc. and CSS3 Slide
(3rd Ed.), 37
C2
The home page for the W3C validator

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

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

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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy