How to code, test, and validate a web page · HTML, XHTML, and CSS, C2 © 2010, Mike Murach &...
Transcript of How to code, test, and validate a web page · HTML, XHTML, and CSS, C2 © 2010, Mike Murach &...
![Page 1: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/1.jpg)
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
![Page 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/2.jpg)
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.
![Page 3: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/3.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 3
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.
![Page 4: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/4.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 4
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>
![Page 5: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/5.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 5
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>
![Page 6: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/6.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 6
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.
![Page 7: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/7.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 7
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>
![Page 8: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/8.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 8
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.
![Page 9: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/9.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 9
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" />
![Page 10: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/10.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 10
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">
![Page 11: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/11.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 11
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.
![Page 12: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/12.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 12
XHTML document with comments and whitespace <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ... > <!-- This document displays the home page for the web site --> <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>
![Page 13: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/13.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 13
XHTML document (continued) <!--This comments out all of the HTML code in the unordered list <ul> <li>October 14, 2009: Dr. Alan J. Russell</li> <li>November 18, 2009: Dr. Edward Diener</li> <li>January 20, 2010: David Brancaccio</li> <li>February 17, 2010: Robert Fitzpatrick</li> <li>March 17, 2010: Juan Williams</li> <li>April 21, 2010: Steve Coll</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>
![Page 14: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/14.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 14
The parts of a CSS rule set
![Page 15: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/15.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 15
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; }
![Page 16: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/16.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 16
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>
![Page 17: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/17.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 17
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; }
![Page 18: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/18.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 18
The elements in a browser
![Page 19: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/19.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 19
Notepad++ as it’s about to open an HTML file
![Page 20: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/20.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 20
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.
![Page 21: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/21.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 21
Notepad++ after a new HTML file has been started from a template
![Page 22: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/22.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 22
The Save As dialog box
![Page 23: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/23.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 23
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.
![Page 24: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/24.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 24
Notepad++ with an auto-completion list
![Page 25: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/25.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 25
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.
![Page 26: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/26.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 26
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.
![Page 27: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/27.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 27
Notepad++ after a new CSS file has been started from a template
![Page 28: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/28.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 28
The Save As dialog box
![Page 29: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/29.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 29
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.
![Page 30: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/30.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 30
Notepad++ with an open CSS file
![Page 31: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/31.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 31
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.
![Page 32: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/32.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 32
The HTML file displayed in the Firefox browser
![Page 33: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/33.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 33
The Open File dialog box for Firefox
![Page 34: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/34.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 34
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.
![Page 35: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/35.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 35
How to retest a web page Click the Reload or Refresh button.
The URL for the W3C Markup Validation Service http://validator.w3.org/
![Page 36: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/36.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 36
The home page for the W3C validator
![Page 37: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/37.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 37
Error listing for HTML file with missing tag ending
![Page 38: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/38.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 38
The URL of the W3C CSS Validation Service http://jigsaw.w3.org/css-validator/
![Page 39: 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](https://reader036.fdocuments.us/reader036/viewer/2022071416/6112f4ab47ba7079af6e40e0/html5/thumbnails/39.jpg)
HTML, XHTML, and CSS, C2 © 2010, Mike Murach & Associates, Inc. Slide 39
The CSS Validation Service with errors displayed