Xhtml validation
Upcoming SlideShare
Loading in...5
×
 

Xhtml validation

on

  • 310 views

XHTML is more compatible with adaptive web software, like aural screen readers. ...

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/

Statistics

Views

Total Views
310
Views on SlideShare
310
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Xhtml validation Xhtml validation Presentation Transcript

  • 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. … 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
  • 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 View slide
  • 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 View slide
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • <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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • CONTACT US http://marketing.clicksbazaar.com/xhtml- validation http://clicksbazaar.com | Contact@clicksbazaar.com Design | Development | Marketing