n241IntroducingXHTMLAndValidation
Download
Report
Transcript n241IntroducingXHTMLAndValidation
Introducing XHTML &
Validation
CSCI N241: Fundamentals of Web Design
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
DOCTYPE Syntax
A
B
C
D
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
E
A
B
C
The ! specifies a Document Type
Definition. This is NOT an HTML
Element!
D
Specifies html as the root (first)
element in the page.
Declares that the standard
(HTML 4.01 here) is publicly
available.
E
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!
Points to the URL for the standard.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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/
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
The <img> Element’s
alt Attribute
• The 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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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>.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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”>
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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">
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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!
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
<recipe xmlns=“http://www.foodnetwerk.com/recipe”
lang=“en” xml:lang=“en”>
<name>Head First Lounge Iced Tea</name>
<description>
A brisk iced tea with a bit of a kick ...
</description>
<ingredients>
<ingredient measurement=“6 cups”>
Water
</ingredient>
...
</ingredients>
<preparation>
<time duration=“10 minutes” />
<step>
Boil one cup of water in a pan, remove pan ...
</step>
...
</preparation>
</recipe>
Sample XML Script
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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">
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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">
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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 …
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
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, revalidate.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
Questions?
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science
References
• Freeman, Elisabeth and Eric Freeman.
Head First HTML with CSS & XHTML.
Sebastopol, CA: 2006.
N241: Fundamentals of Web Development
Copyright ©2006 Department of Computer & Information Science