Your SlideShare is downloading. ×
0
XHTML VALIDATION
Design | Development | Marketing
GOALS
By the end of this unit, you should
understand …
… the reasons for moving to XHTML.
… how to use a DOCTYPE statement...
WHY BOTHER WITH XHTML?
HTML was working great … Why bother with XHTML?
 We can create pages that work uniformly across br...
LOOKS ARE DECEIVING …
Most browsers are very forgiving
when it comes to display error-
ridden HTML.
The problem is that, a...
SOME HISTORY
Prior to HTML v4.0, what we called
"HTML" was actually a mishmash of
rules and design standards – each
browse...
WHICH VERSION?
Today, unless told otherwise, web browsers
display pages as if those pages used old-
style HTML.
This is a ...
THE DOCTYPE STATEMENT
To help the browser understand the
language in which we write a
document, we can add a DOCTYPE
state...
DOCTYPE SYNTAX
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
A B ...
LET’S TRY ONE!
Download the file
n241IntroducingXHTMLAnd
Validation_examples.zip
to your storage device.
Decompress that f...
VALIDATING WEB PAGES
Sometimes, it’s a difficult process to detect the minor mistakes that
can make your page non-complian...
LET’S TRY ONE!
Open the W3C
Validator:
http://validator.w3.org
Use the “Validate
by File Upload”
option to
validate the
fo...
THE <IMG> ELEMENT’S
ALT ATTRIBUTEThe rules of HTML 4.01 state that every <img> element must have an
alt attribute. Why?
Ad...
CHARACTER ENCODING
In the previous validation, the
Validator indicated that our page
had no character encoding.
What is ch...
THE <META> ELEMENT
A <meta> element tells a browser
information about the page. Here are
some things a <meta> element can ...
SPECIFYING CHARACTER ENCODING
Add the following line above the
<title> element in lounge.html.
Then, run your page through...
MOVING TO A STRICT DTD …
Did you notice the word “Transitional”
in DOCTYPE statement? It means that
we are using a transit...
LET’S TRY ONE!
Change the DOCTYPE declaration in
lounge.html to the declaration
below. Then, run your page through
the val...
NESTING ELEMENTS
According to the guidelines for
HTML 4.01, Strict, you MUST nest
inline elements, like the <img>
element,...
CONGRATULATIONS!
Now you can celebrate and say that you’ve joined the ranks of true Web
Geeks by creating an HTML 4.01 Str...
RULES FOR HTML 4.01 STRICT
The first line in an HTML 4.01 Strict
document must be a DOCTYPE
declaration.
The <html> elemen...
RULES FOR HTML 4.01 STRICT
Nest ONLY block elements inside a
<body> element; all inline elements
need to be nested inside ...
RULES FOR HTML 4.01 STRICT
You may nest text, inline or block-level
elements inside the <li> element.
The <blockquote> ele...
MOVING TO XHTML …
XHTML – eXtensible HTML – is the
“next evolution” of HTML.
XHTML is actually a form of
eXtensible Markup...
<recipe xmlns=“http://www.foodnetwerk.com/recipe”<recipe xmlns=“http://www.foodnetwerk.com/recipe”
lang=“en” xml:lang=“en”...
WHY MOVE TO XHTML?
XHTML is more compatible with adaptive
web software, like aural screen
readers.
The syntax is almost ex...
WHY MOVE TO XHTML?
Because XHTML is XML, you write new
markup for it; there are already extensions
to XHTML for vector gra...
LET’S TRY ONE!
Change the DOCTYPE declaration in
lounge.html to the declaration
below. DON’T run your page through
the val...
ALMOST THERE …
Change the <html> element in
lounge.html to add the attributes
below. Then, run your page through
the valid...
CLOSING EMPTY TAGS
We already know that any paired element
contains two tags – an opening tag and
a closing tag.
XHTML, ho...
RULES FOR XHTML
The <html> element must include
xmlns, lang and xml:lang attributes.
The <html> element must be the first
...
RULES FOR XHTML
Enclose attribute values in double
quotes, like this:
<tag attribute = "value">
Attribute values must not ...
TIPS FOR DEBUGGING
Pay close attention to the line
number the validator returns;
don't stress over the exact error
message...
CONTACT US
http://marketing.clicksbazaar.com/xhtml-
validation
http://clicksbazaar.com |
Contact@clicksbazaar.com
Design |...
Upcoming SlideShare
Loading in...5
×

Xhtml validation

220

Published on

XHTML is more compatible with adaptive web software, like aural screen readers.
The syntax is almost exactly like HTML; if you know how to write in HTML 4.01 Strict, the transition is almost seamless. In fact, XHTML is backwards compatible. For More Visit - http://marketing.clicksbazaar.com/xhtml-validation/

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
220
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Xhtml validation"

  1. 1. XHTML VALIDATION Design | Development | Marketing
  2. 2. GOALS By the end of this unit, you should understand … … the reasons for moving to XHTML. … how to use a DOCTYPE statement. … how to use the World Wide Web Consortium's Validator. … how to specify character encoding for a page. … the rules for HTML 4.01 Strict & XHTML 1.0. Design | Development | Marketing
  3. 3. WHY BOTHER WITH XHTML? HTML was working great … Why bother with XHTML?  We can create pages that work uniformly across browsers ("graceful decomposition").  We can create pages that work on mobile devices.  We can create pages that work with adaptive technology.  XHTML pages "play well" with CSS. Design | Development | Marketing
  4. 4. LOOKS ARE DECEIVING … Most browsers are very forgiving when it comes to display error- ridden HTML. The problem is that, although browsers might display that contains errors, they display the errors differently. Writing standards-compliant pages is the only way to guarantee some semblance of consistency. Design | Development | Marketing
  5. 5. SOME HISTORY Prior to HTML v4.0, what we called "HTML" was actually a mishmash of rules and design standards – each browser manufacturer had their own "version" of HTML. HTML 4.0/4.01 changed that – for the first time, industry leaders agreed on a standard model for HTML (structure) and CSS (style). XHTML blends the browser compatibility and popularity of HTML with extensibility of XML. Design | Development | Marketing
  6. 6. WHICH VERSION? Today, unless told otherwise, web browsers display pages as if those pages used old- style HTML. This is a problem, because there is little consistency among the browsers in how to display old-style HTML that contains errors. However, armed with standards-compliant XHTML, we can really unlock the power of web development. We just need to let the browser know we are using it … Design | Development | Marketing
  7. 7. THE DOCTYPE STATEMENT To help the browser understand the language in which we write a document, we can add a DOCTYPE statement at the top of our script (even before <html>). The DOCTYPE statement, technically called a Document Type Definition (DTD), instructs the browser to use a standards- compliant model for displaying your page. Design | Development | Marketing
  8. 8. DOCTYPE SYNTAX <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> A B C E A The ! specifies a Document Type Definition. This is NOT an HTML Element! B Specifies html as the root (first) element in the page. D C Declares that the standard (HTML 4.01 here) is publicly available. D Tells the browser which standard we’re using (HTML 4.01 here) and the human language we use in the page (EN – English). Everything in the quotes needs to be on the same line! E Points to the URL for the standard. Design | Development | Marketing
  9. 9. LET’S TRY ONE! Download the file n241IntroducingXHTMLAnd Validation_examples.zip to your storage device. Decompress that file and then edit the file called lounge.html. Add the DOCTYPE (you copy the DOCTYPE from the file called doctype.txt. Open the file in a browser. Any difference? Design | Development | Marketing
  10. 10. VALIDATING WEB PAGES Sometimes, it’s a difficult process to detect the minor mistakes that can make your page non-compliant. Fortunately, the W3C has a tool that can help – the W3C Markup Validation Service: http://validator.w3.org/ Design | Development | Marketing
  11. 11. LET’S TRY ONE! Open the W3C Validator: http://validator.w3.org Use the “Validate by File Upload” option to validate the following file: lounge.html. Design | Development | Marketing
  12. 12. THE <IMG> ELEMENT’S ALT ATTRIBUTEThe rules of HTML 4.01 state that every <img> element must have an alt attribute. Why? Add an alt attribute to the drinks.gif image and validate your page again … Design | Development | Marketing
  13. 13. CHARACTER ENCODING In the previous validation, the Validator indicated that our page had no character encoding. What is character encoding? It “tells” the browser which character set to use in order to display the page – English, Chinese, Arabic, etc. To include a character encoding scheme, we will use a <meta> element … Design | Development | Marketing
  14. 14. THE <META> ELEMENT A <meta> element tells a browser information about the page. Here are some things a <meta> element can do:  It can set a character encoding scheme.  It can configure a browser re-direct to another page.  It can attract search engines. You can have multiple <meta> elements in a single HTML file. We nest the <meta> element inside the <head> element, before the <title>. Design | Development | Marketing
  15. 15. SPECIFYING CHARACTER ENCODING Add the following line above the <title> element in lounge.html. Then, run your page through the validator: <meta http-equiv = “Content-Type” content = “text/html; charset=ISO-8859-1”> Design | Development | Marketing
  16. 16. MOVING TO A STRICT DTD … Did you notice the word “Transitional” in DOCTYPE statement? It means that we are using a transitional DTD. The Transitional DTD allows for some legacy HTML code, but enforces basic rules of structure. The W3C created it to help those with huge websites that they needed to update. Those creating new websites should use a strict DTD. Design | Development | Marketing
  17. 17. LET’S TRY ONE! Change the DOCTYPE declaration in lounge.html to the declaration below. Then, run your page through the validator: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> Design | Development | Marketing
  18. 18. NESTING ELEMENTS According to the guidelines for HTML 4.01, Strict, you MUST nest inline elements, like the <img> element, inside a block level element. Nest the <img> element in lounge.html inside a <p> and then run your page through the validator … Design | Development | Marketing
  19. 19. CONGRATULATIONS! Now you can celebrate and say that you’ve joined the ranks of true Web Geeks by creating an HTML 4.01 Strict page! Now for some HTML 4.01 Strict rules … Design | Development | Marketing
  20. 20. RULES FOR HTML 4.01 STRICT The first line in an HTML 4.01 Strict document must be a DOCTYPE declaration. The <html> element must be the first line after the DOCTYPE declaration. A compliant page includes both <head> and <body> elements. A compliant page includes a <title> element, nested in the <head>. continued … Design | Development | Marketing
  21. 21. RULES FOR HTML 4.01 STRICT Nest ONLY block elements inside a <body> element; all inline elements need to be nested inside other block- level elements. Do NOT nest block-level elements inside inline elements. Do NOT nest block-level elements inside the <p> element. Only nest <li> elements inside the <ol> & the <ul> elements. continued … Design | Development | Marketing
  22. 22. RULES FOR HTML 4.01 STRICT You may nest text, inline or block-level elements inside the <li> element. The <blockquote> elements requires one or more block-level elements nested inside of it. Take care when nesting inline elements inside other inline elements:  NEVER nest an <a> element inside another <a> element.  NEVER nest any other element inside an empty element, like the <img> element.  Remember to close nested elements in the opposite way that you opened them! Design | Development | Marketing
  23. 23. MOVING TO XHTML … XHTML – eXtensible HTML – is the “next evolution” of HTML. XHTML is actually a form of eXtensible Markup Language (XML), which allows developers to extend existing scripting languages and create new languages to fit their business needs. Let’s consider a sample XML document … Design | Development | Marketing
  24. 24. <recipe xmlns=“http://www.foodnetwerk.com/recipe”<recipe xmlns=“http://www.foodnetwerk.com/recipe” lang=“en” xml:lang=“en”>lang=“en” xml:lang=“en”> <name>Head First Lounge Iced Tea</name><name>Head First Lounge Iced Tea</name> <description><description> A brisk iced tea with a bit of a kick ...A brisk iced tea with a bit of a kick ... </description></description> <ingredients><ingredients> <ingredient measurement=“6 cups”><ingredient measurement=“6 cups”> WaterWater </ingredient></ingredient> ...... </ingredients></ingredients> <preparation><preparation> <time duration=“10 minutes” /><time duration=“10 minutes” /> <step><step> Boil one cup of water in a pan, remove pan ...Boil one cup of water in a pan, remove pan ... </step></step> ...... </preparation></preparation> </recipe></recipe> Sample XML ScriptSample XML Script Design | Development | Marketing
  25. 25. WHY MOVE TO XHTML? XHTML is more compatible with adaptive web software, like aural screen readers. The syntax is almost exactly like HTML; if you know how to write in HTML 4.01 Strict, the transition is almost seamless. In fact, XHTML is backwards compatible. XHTML is more compatible with mobile web agents like cell phones and PDAs. continued … Design | Development | Marketing
  26. 26. WHY MOVE TO XHTML? Because XHTML is XML, you write new markup for it; there are already extensions to XHTML for vector graphics and mathematics. Any software that can read XML can read XHTML. Many large databases store data using XML; transitioning to XHTML will be easier than HTML. Since XHTML is XML, we reap the benefits of XML, including the ability to store large, structured documents. Design | Development | Marketing
  27. 27. LET’S TRY ONE! Change the DOCTYPE declaration in lounge.html to the declaration below. DON’T run your page through the validator, just yet! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> Design | Development | Marketing
  28. 28. ALMOST THERE … Change the <html> element in lounge.html to add the attributes below. Then, run your page through the validator. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Design | Development | Marketing
  29. 29. CLOSING EMPTY TAGS We already know that any paired element contains two tags – an opening tag and a closing tag. XHTML, however, requires that you also close empty elements. To close an empty element (like <img> or <meta> use " />" at the end of the tag name, like this: <meta /> Update lounge.html and then validate … Design | Development | Marketing
  30. 30. RULES FOR XHTML The <html> element must include xmlns, lang and xml:lang attributes. The <html> element must be the first tag after the DOCTYPE declaration. Write element names in lowercase. Close empty elements with a space and then a /, like this <tag />. continued … Design | Development | Marketing
  31. 31. RULES FOR XHTML Enclose attribute values in double quotes, like this: <tag attribute = "value"> Attribute values must not be empty. Use entities in the place of the & character and other special characters. See the following URL for entity codes: http://www.w3schools.com/tags/ref_entities.asp Design | Development | Marketing
  32. 32. TIPS FOR DEBUGGING Pay close attention to the line number the validator returns; don't stress over the exact error message. When the validator returns multiple errors, correct one error at a time, starting with the top error. Then, re-validate. Design | Development | Marketing
  33. 33. CONTACT US http://marketing.clicksbazaar.com/xhtml- validation http://clicksbazaar.com | Contact@clicksbazaar.com Design | Development | Marketing
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×