Essential Guide to Coding, Testing, and Validating Webpages

1 / 14

Embed Share

Discover how to effectively code, test, and validate your webpages using HTML and CSS. Learn about basic HTML document structure, working with tags, correct tag nesting, using attributes, and more to create well-structured web content.

emmerich_n Follow

Uploaded on Mar 19, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

E N D

Presentation Transcript

Chapter 2 How to Code, Test, & Validate Webpages C2, Slide 1

Objectives Applied 1. Use a text editor to create, edit, and test 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. Use the W3C HTML and CSS Validation to validate HTML and CSS files. 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. C2, Slide 2

Basic structure of an HTML document <!DOCTYPE html> <html> <head> . . </head> <body> . . </body> </html> DOCTYPE declaration head element document tree body element C2, Slide 3

A Simple HTML Document <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Type your title</title> </head> <body> </body> </html> C2, Slide 4

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"> Chapter 2 C2, Slide 5

Correct nesting of tags Correct nesting <p>Order your copy <i>today!</i></p> Incorrect nesting <p>Order your copy <i>today!</p></i> C2, Slide 6

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"> C2, Slide 7

Coding tags with attributes How to code an empty tag with attributes <img src="logo.gif" alt="Murach Logo"> How to code a Boolean attribute <input type="checkbox" name="mailList" checked> C2, Slide 8

Attributes for identifying 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"> C2, Slide 9

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. C2, Slide 10

Opening a webpage on your local computer Use the features of your text editor or IDE, like Live Server with VS Code. (We ll discuss next week) Find the file in your file explorer. Then, double-click on it to open it in your default browser. Or, right-click on it and use the Open With command to select the browser. Chapter 2 C2, Slide 11

How to test and debug a web page How to test a web page Check the contents and appearance of each page. Click on all of the links on each page to make sure they work properly. After you ve tested your web pages on one browser, test them on the other browsers that your users may be using. How to debug a web page To find the causes of your errors, you can use Chrome s Developer Tools. This tool shows you how the CSS relates to the HTML. (We ll discuss next week) After you find the cause of an error and fix it, you test the page again. To do that, you can switch to the browser from your text editor or IDE and then click the Refresh or Reload icon. C2, Slide 12