How to Debug an HTML Presentation

The goal of this lab is to learn a few debugging techniques you can use to fix problems in your Web presentation.
View HTML code using Mozilla Firefox
Viewing the HTML source code for web pages helps you improve your HTML coding skills because you can learn from other people. This also helps you debug your own HTML page because syntax highlighting helps you spot errors easier. To view the source code for a page loaded in Mozilla Firefox, right-click on the page and then choose View Page Source. Note that we use Mozilla Firefox not Internet Explorer to browse the Web. This is because Mozilla Firefox shows you HTML source code with tags, attributes and attribute values all displayed in a different color (syntax highligting). This helps you better see HTML structure and spot errors easier. Certain errors are directly detected by Firefox and are displayed in bright red.
Use an HTML syntax checker
We are going to use WDG HTML Validator. This service displays a form which allows you to enter the URL of the document you want to check. After you press Validate it! button the service will display the errors found or that the document is valid. You should fix any errors found and then revalidate the document. You can validate your entire web presentation by checking Validate entire site and Hide valid results.

To fix missing document type declaration error you will have to add the following code at the very beginning of your document before <html> tag. This code specifies the version of HTML you are using in your page. 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	  "http://www.w3.org/TR/html4/loose.dtd">
For a document that contains frames you should use 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
   "http://www.w3.org/TR/html4/frameset.dtd">

A common error is an inline element that encloses a block level element. Please review the description about block level and inline HTML elements.

Use an HTML link checker
We are going to use the Link Checker provided by W3C. In the form provided you will enter the URL of the main page of your presentation and you will set Check linked documents recursively checkbox. After you press Check button, the service starts at the web page provided and navigates through all the documents it can reach from that page, checking the links in each document. This service produces a page showing all broken links found in your presentation.