Presentation is loading. Please wait.

Presentation is loading. Please wait.

How to code, test, and validate a web page

Published byあけなお つちかね Modified over 5 years ago

Similar presentations

Presentation on theme: "How to code, test, and validate a web page"— Presentation transcript:

1 How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

2 Murach's HTML and CSS, 4th Edition
Objectives Applied Use a text editor like Brackets to create and edit HTML and CSS files. Test an HTML document that’s stored on your computer or a local server by loading it into a browser. Validate an HTML document using a website like W3C Markup Validation Service. Knowledge Describe the use of the head and body elements in an HTML document. Describe these types of HTML tags: opening, closing, and empty. Describe the use of attributes within HTML tags. Describe the use of HTML comments and whitespace. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

3 Objectives (continued)
Describe the components of a CSS style rule. Describe the use of these types of CSS selectors: type, id, and class. Explain how and why you would start a new HTML or CSS file from a template. 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. Describe two benefits of validating HTML files. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

4 The basic structure of an HTML5 document
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

5 Murach's HTML and CSS, 4th Edition
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> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

6 Murach's HTML and CSS, 4th Edition
Working with tags 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"> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

7 Correct and incorrect nesting of tags
<p>Order your copy <i>today!</i></p> Incorrect nesting <p>Order your copy <i>today!</p></i> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

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"> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

9 How to code an empty tag with attributes
<img src="logo.gif" alt="Murach Logo"> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

10 How to code a Boolean attribute
<input type="checkbox" name="mailList" checked> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

11 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"> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

12 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 great speakers to the valley</h2> <!-- This comments out the HTML code in the list <ul> <li>October: Jeffrey Toobin</li> ... </ul> The code after the end of this comment is active --> <p>Contact us by phone for tickets</p> </body> </html> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

13 The parts of a CSS style rule
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

14 A simple CSS document with comments
/********************************************************* * Description: Primary style sheet for valleytownhall.com * Author: Anne Boehm *********************************************************/ body { background-color: #FACD8A; /* This is a shade of orange. */ } h1 { color: #363636; h2 { font-style: italic; border-bottom: 3px solid #EF9C00; /* Add a line below h2s */ ul { list-style-type: square; /* Changes the bullets to squares */ © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

15 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 2018</p> </body> © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

16 CSS style rules that select by type, id, and class
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; © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

17 The elements in a browser
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

18 The Brackets dialog box for choosing a folder
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

19 Brackets with an open file and a file displayed
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

20 Brackets Extension Manager
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

21 Brackets with HTML code hints
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

22 Brackets with CSS code hints
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

23 Common HTML and CSS errors
Common HTML 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. Common CSS 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. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

24 Brackets with a vertical split screen
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

25 Murach's HTML and CSS, 4th Edition
The Live Preview icon © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

26 The Chrome browser in Live Preview
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

27 Murach's HTML and CSS, 4th Edition
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. Use the file explorer on your system to find the HTML file, and double-click on it. If you’re using Brackets, select the HTML file in the file tree and click the Live Preview icon to open the file in Chrome. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

28 Murach's HTML and CSS, 4th Edition
How to rerun a web page from a browser after you change its source code Click the Reload or Refresh button in the browser. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

29 How to test and debug a web page
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. © 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

30 The home page for the W3C validator
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

31 The CSS Validation Service with errors displayed
© 2018, Mike Murach & Associates, Inc. Murach's HTML and CSS, 4th Edition

Download ppt "How to code, test, and validate a web page"

Similar presentations

HTML Basics Customizing your site using the basics of HTML.

HTML Basics Customizing your site using the basics of HTML.
Cascading Style Sheets

Cascading Style Sheets
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.

CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.

Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.
Murach's PHP and MySQL, C1© 2010, Mike Murach & Associates, Inc.Slide 1.

Murach's PHP and MySQL, C1© 2010, Mike Murach & Associates, Inc.Slide 1.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.

CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.

Cascading Style Sheets Based on Castro, HTML for the WWW, 6 th edition Ron Gerton, Fall 2007.
Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.

Recognizing the Benefits of Using CSS 1. The Evolution of CSS CSS was developed to standardize display information CSS was slow to be supported by browsers.
Chapter 8 Creating Style Sheets.

Chapter 8 Creating Style Sheets.
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.

Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
4.01 Cascading Style Sheets

4.01 Cascading Style Sheets
Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.

Creating Tables in a Web Site Using an External Style Sheet HTML5 & CSS 7 th Edition.
CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.

CSS (Cascading Style Sheets): How the web is styled Create Rules that specify how the content of an HTML Element should appear. CSS controls how your web.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.

4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.

Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.

 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.

Similar presentations

Ads by Google