web topic 13 html validation tools

18
Web Authoring Topic 13 – HTML Validation Tools

Upload: ck-yang

Post on 22-May-2015

147 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: Web topic 13  html validation tools

Web Authoring

Topic 13 –HTML Validation Tools

Page 2: Web topic 13  html validation tools

HTML Validation

- Validate by URL

- Valid by file upload

- Valid by direct input

There are several methods to test or validate HTML/XHTML pages:

The results will be the same regardlessof which method you choose

Page 3: Web topic 13  html validation tools

HTML Validation

The official W3C validation service can be found at http://www.validator.w3.org/

Page 4: Web topic 13  html validation tools

HTML Validation

The official W3C validation service can be found at http://www.validator.w3.org/

Page 5: Web topic 13  html validation tools

Validation Process

HTML validation process:

1. What to validate your web pages for

2. The validation process

3. Validation Tools

4. Common validation errors

Page 6: Web topic 13  html validation tools

Validation Process

1. What to validate your web pages for:a) Doctypeb) HTML or XHTML document (or other coding languages you have used)c) CSS style sheetd) Linkse) Browsersf) Screen Resolutiong) Connectivity

Page 7: Web topic 13  html validation tools

Validation Process

2. The validation process:Doctype - Use the correct DOCTYPE ( Document Type Definition, or DTD)

DOCTYPE tag should be placed at the top of each web page.

It is needed by browsers or other tools to process the document correctly.

http://www.discount-real-estate-listings-md.com/

Page 8: Web topic 13  html validation tools

Validation Process

2. The validation process:DOCTYPE DOCUMENT TYPE DECLARATION COMMENTSXHTML 1.0 Transitional <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML

1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Widely used by web-authoring tools. Allows some flexibility in coding

XHTML 1.0 Strict <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Ensures strict adherence to the XHTML 1.0 standard

XHTML 1.1 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Ensures strict adherence to the XHTML 1.1 standard

XHTML 1.0 Frameset <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Used for web pages laid out in different areas (frames) rather than a single area

XHTML 2.0 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml2.dtd">

This is a draft DOCTYPE and is best avoided as of this writing

HTML 5 <!DOCTYPE html> Used for the HTML variant of the HTML 5 specification

Page 9: Web topic 13  html validation tools

Validation Process

2. The validation process:Validate your HTML or XHTML document If you validate your code it will make it easier for:- search engines to index your web pages- pages to load faster- make your pages accessible for other devices that surf the Web.- checking coding errors by running your pages through a validator.

Page 10: Web topic 13  html validation tools

Validation Process

2. The validation process:Validate your Cascading Style Sheets (CSS)

If there are errors in your CSS:- the layout of your web pages will be

affected - the web site will not appear correctly when

viewed in any of the main browsers.

Page 11: Web topic 13  html validation tools

Validation Process

2. The validation process:Validate your links

Broken links in your web pages will:- frustrate your visitors when searching for relevant information from your site.- affect search engine rankings. When spiders cannot index the links on your site they will not find your keyword rich web pages.

Page 12: Web topic 13  html validation tools

Validation Process

2. The validation process:Check browser compatibility

The main browsers you should design your web site for include: Internet Explorer (IE6 and above), Firefox, Opera, and Netscape (Mozilla).

Page 13: Web topic 13  html validation tools

Validation Process

2. The validation process:

Page 14: Web topic 13  html validation tools

Validation Process

2. The validation process:Test for different screen resolutionsThe current trend is that more and more computers are using a screen size of 1024×768 pixels:

1024×768…………………………56% 800×600………………………….28% Higher than 1024×768…………11%

Page 15: Web topic 13  html validation tools

Validation Process

2. The validation process:Check connectivity speedsWeb pages that contain a large number of graphics or tables, use flash or video, will load slowly or sometimes not at all with a dial up connection but will be fine with a cable or dsl connection.

Page 16: Web topic 13  html validation tools

Validation Process

3. Validation Tools:

HTML/XHTML validationhttp://www.validator.w3.org/CSS validationhttp://jigsaw.w3.org/css-validator/Link checkerhttp://validator.w3.org/checklinkBrowser Compatibilityhttp://www.anybrowser.com

Page 17: Web topic 13  html validation tools

Validation Process

4. Common HTML/XHTML validation errors:

- Improper Nesting of Tags

- Missing alt tags- Margin height and width- Horizontal Line Color- Border Color

Page 18: Web topic 13  html validation tools

Validation Process

Summary

If you always validate your web pages, your web site will be loading faster, more search engine friendly, accessible to a greater number of devices and therefore appeal to a larger number of visitors.