KEMBAR78
Web topic 13 html validation tools | PPTX
Web Authoring

    Topic 13 –
HTML Validation Tools
HTML Validation
There are several methods to test or
validate HTML/XHTML pages:
   - Validate by URL
   - Valid by file upload
   - Valid by direct input
The results will be the same regardless
of which method you choose
HTML Validation
The official W3C validation service can be
found at http://www.validator.w3.org/
HTML Validation
The official W3C validation service can be
found at http://www.validator.w3.org/
Validation Process
HTML validation process:
 1. What to validate your web pages for
 2. The validation process
 3. Validation Tools
 4. Common validation errors
Validation Process
1. What to validate your web pages for:
  a) Doctype
  b) HTML or XHTML document (or other
  coding languages you have used)
  c) CSS style sheet
  d) Links
  e) Browsers
  f) Screen Resolution
  g) Connectivity
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/
Validation Process
2. The validation process:
   DOCTYPE                  DOCUMENT TYPE DECLARATION                    COMMENTS
   XHTML 1.0 Transitional   <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML      Widely used by web-authoring tools. Allows
                            1.0 Transitional//EN"                        some flexibility in coding
                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
                            transitional.dtd">
   XHTML 1.0 Strict         <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML
                            1.0 Strict//EN"
                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-     Ensures strict adherence to the XHTML 1.0
                            strict.dtd">                                 standard
   XHTML 1.1                <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML
                            1.1//EN"
                            "http://www.w3.org/TR/xhtml11/DTD/xhtml11.   Ensures strict adherence to the XHTML 1.1
                            dtd">                                        standard
   XHTML 1.0 Frameset       <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML      Used for web pages laid out in different areas
                            1.0 Frameset//EN"                            (frames) rather than a single area
                            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
                            frameset.dtd">
   XHTML 2.0                <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML      This is a draft DOCTYPE and is best avoided as
                            2.0//EN"                                     of this writing
                            "http://www.w3.org/TR/xhtml11/DTD/xhtml2.
                            dtd">
   HTML 5                   <!DOCTYPE html>                              Used for the HTML variant of the HTML 5
                                                                         specification
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.
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.
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.
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).
Validation Process
2. The validation process:
Validation Process
2. The validation process:
Test for different screen resolutions
The 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%
Validation Process
2. The validation process:
Check connectivity speeds
Web 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.
Validation Process
3. Validation Tools:
 HTML/XHTML validation
 http://www.validator.w3.org/
 CSS validation
 http://jigsaw.w3.org/css-validator/
 Link checker
 http://validator.w3.org/checklink
 Browser Compatibility
 http://www.anybrowser.com
Validation Process
4. Common HTML/XHTML validation errors:
 - Improper Nesting of Tags
 - Missing alt tags
 - Margin height and width
 - Horizontal Line Color
 - Border Color
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.

Web topic 13 html validation tools

  • 1.
    Web Authoring Topic 13 – HTML Validation Tools
  • 2.
    HTML Validation There areseveral methods to test or validate HTML/XHTML pages: - Validate by URL - Valid by file upload - Valid by direct input The results will be the same regardless of which method you choose
  • 3.
    HTML Validation The officialW3C validation service can be found at http://www.validator.w3.org/
  • 4.
    HTML Validation The officialW3C validation service can be found at http://www.validator.w3.org/
  • 5.
    Validation Process HTML validationprocess: 1. What to validate your web pages for 2. The validation process 3. Validation Tools 4. Common validation errors
  • 6.
    Validation Process 1. Whatto validate your web pages for: a) Doctype b) HTML or XHTML document (or other coding languages you have used) c) CSS style sheet d) Links e) Browsers f) Screen Resolution g) Connectivity
  • 7.
    Validation Process 2. Thevalidation 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/
  • 8.
    Validation Process 2. Thevalidation process: DOCTYPE DOCUMENT TYPE DECLARATION COMMENTS XHTML 1.0 Transitional <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Widely used by web-authoring tools. Allows 1.0 Transitional//EN" some flexibility in coding "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> XHTML 1.0 Strict <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- Ensures strict adherence to the XHTML 1.0 strict.dtd"> standard XHTML 1.1 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11. Ensures strict adherence to the XHTML 1.1 dtd"> standard XHTML 1.0 Frameset <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML Used for web pages laid out in different areas 1.0 Frameset//EN" (frames) rather than a single area "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> XHTML 2.0 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML This is a draft DOCTYPE and is best avoided as 2.0//EN" of this writing "http://www.w3.org/TR/xhtml11/DTD/xhtml2. dtd"> HTML 5 <!DOCTYPE html> Used for the HTML variant of the HTML 5 specification
  • 9.
    Validation Process 2. Thevalidation 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.
  • 10.
    Validation Process 2. Thevalidation 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.
  • 11.
    Validation Process 2. Thevalidation 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.
  • 12.
    Validation Process 2. Thevalidation 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).
  • 13.
    Validation Process 2. Thevalidation process:
  • 14.
    Validation Process 2. Thevalidation process: Test for different screen resolutions The 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%
  • 15.
    Validation Process 2. Thevalidation process: Check connectivity speeds Web 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.
  • 16.
    Validation Process 3. ValidationTools: HTML/XHTML validation http://www.validator.w3.org/ CSS validation http://jigsaw.w3.org/css-validator/ Link checker http://validator.w3.org/checklink Browser Compatibility http://www.anybrowser.com
  • 17.
    Validation Process 4. CommonHTML/XHTML validation errors: - Improper Nesting of Tags - Missing alt tags - Margin height and width - Horizontal Line Color - Border Color
  • 18.
    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.