Download From HTML to XHTML and Beyond

From HTML to XHTML and
Beyond:
XHTML Coding for
e-Commerce I Teachers
Daniel B. Smith
[email protected]
http://dsmith77.wordpress.com/
Who am I?
• I graduated in 1999 from Gardner-Webb
University with a Bachelor's Degree in Computer
Science.
• I have been teaching Computer Programming,
Computer Applications, and e-Commerce at
McDowell High School since January of 2000.
• In January 2004, I took over responsibility for
maintaining my school’s web site.
• In 2005, I started a my own business in creating
web sites for small businesses called
DanielSmithDesigns.com.
2
The Main Thing
I once heard Dr. David Jeremiah repeat a
quote he had heard from someone else.
He said, “The main thing is to keep the
main thing the main thing.”
So, are you ready for XHTML - the next
generation of the web? Let’s get started.
3
Got HTML?
• The new 2006 North Carolina e-Commerce I
curriculum will use XHTML in place of HTML.
• How can you understand XHTML? The key is in
understanding HTML! So here’s the milliondollar question:
“How well do you
know HTML?”
4
HTML Vocabulary Check
• Different people and textbooks use different terms to
refer to the various parts of a typical HTML code. The
following is a correctly coded HTML tag (flag).
Remember, this is still HTML not XHTML.
<hr width=“60%” color=“red”>
• hr is the tag name.
• width=“60%” and color=“red” are the tag’s attributes.
• width and color are attribute names while 60% and red
are attribute values. The quotes are for clarity since they
are not required.
• Most attributes come in name=“value” pairs.
5
15 HTML Questions
• I’m going to assess your mastery of HTML with a
few quick questions using the ExamView Player.
After each question, we will discuss the answer.
• Keep track of your correct responses on your
handouts and score yourself honestly. When
we’re done, we’ll see how everyone did.
• Remember, these questions are asking about
HTML not XHTML. We’ll get to that a little later.
6
Onward to XHTML
• How did you do?
• XHTML is essentially
HTML with a few
modifications.
• Remember, you can do
this. Trust in yourself.
• Now, a little history…
7
The Early Years
• In the early days, there was only HTML. HTML
stands for HyperText Markup Language.
Nothing else had been invented yet.
• Web Sites were all about Structure - how the
information in a page was organized.
• Web sites were dull affairs suitable for scientists
and politicians. Yet, the web was growing…
8
Childhood
• The web became more popular as new features were
added to HTML. For example, tables were introduced
and quickly proved popular as a method for layout even
though they were never intended for this purpose.
• The new focus settled on Presentation - how the
information in a page appears onscreen. Cascading
Style Sheets (CSS) were created and integrated with
HTML to provide better control over the visual aspects of
web design. Designers now routinely separate content
from presentation using the inherent strengths of CSS.
• This is where we are now and most people don’t want to
let go and move on. But the next stage is coming…
9
Coming of Age
• The current focus is on Description – describing or
tagging the information in a page to help a computer
understand what kind of information it is. This won’t
appear useful on the surface, but think about it.
• Describing data better means more can be done with the
data. Can you sort songs in Windows Media Player
easier if the artists, titles, and album information are all
entered? Ever used tags to find a photo on Flickr?
• It’s all about making the data more accessible. When
you use the Clip Art Gallery in Microsoft Office you can
find what you want because the clips are conveniently
organized into categories.
10
Computers are Deaf and Blind
• You see, the problem is that a
computer doesn’t know the
difference between a rock
concert and mozart. It only
knows it as a music file. The
computer can’t “listen” to it.
• Likewise, a computer can’t
understand the difference
between a cartoon and a
Thomas Kinkade painting. It
can’t “see” either.
• Describing the data solves this
problem and makes searching
and sorting far more effective
and efficient.
11
XHTML is Born
• This new focus required the creation of a
new markup language - XML which stands
for EXtensible Markup Language.
• HTML 4.01, the newest version of HTML, was
reformulated in terms of XML. The result is
XHTML 1.0 with all of the power of the XML
language at describing data. As a bonus, a lot of
long-standing problems with HTML were fixed
too. Which brings us to…
12
Problems with HTML
• Current practice in coding HTML is, at best, sloppy.
Internet Explorer is quite happy displaying broken code
as if nothing is wrong. And nothing appears wrong
unless you look underneath at the code.
• The problem is, this simply won’t work forever.
Eventually, coding will be so broken and customizations
so numerous, that it will be impossible to create a single
browser that can view every page on the Internet.
• Worse, a lot of good information that is found on old
pages with faulty code may be lost and discarded.
13
The Solution
• The solution is enforcing the web standards for coding
as described by the World Wide Web Consortium (W3C).
The W3C is the authorizing agency and maintains the
web standards including HTML, CSS, XML, and now
XHTML.
• Implementation of this solution means requiring
browsers to require web pages to follow these
standards.
• The ultimate goal is a single language that can
implement all three emphases while separating content
from presentation (for easier management) and be
further extended and refined in the future.
14
And Now…
The moment you have
all been waiting for!
It’s time for
XHTML!
15
What is XHTML?
• XHTML consists of all the elements in HTML 4.01
combined with the syntax of XML and is almost
identical to HTML 4.01.
• XHTML is a stricter and cleaner version of HTML.
• XHTML is HTML defined as an XML application.
Specifically, XHTML 1.0 is a reformulation of HTML 4.01
in XML, and combines the strength of HTML 4 with the
power of XML.
• XHTML is a W3C Recommendation as of January 26,
2000. A W3C Recommendation means that the
specification is stable, that it has been reviewed by the
W3C membership, and that the specification is now a
Web standard.
16
The HTML Family Tree
• XHTML was created to replace HTML.
This is just the natural progression of the
language. Future browsers will support
XHTML and future versions of it. We are
still in the early days of this change. Only
time will tell what may come.
• SGML >> HTML >> HTML 2.0 >> HTML
3.2 >> HTML 4.01 >> XHTML 1.0
17
7 Rules of XHTML
1.
2.
3.
4.
5.
6.
7.
XHTML has a few mandatory elements.
XHTML tags must be closed.
XHTML tags must be properly nested.
XHTML elements must be in lowercase.
XHTML attribute values must be quoted.
Boolean Attributes are forbidden.
Use the id attribute in place of the name
attribute.
•
Now we’ll discuss these rules in detail.
18
1. XHTML has a few mandatory elements.
•
A DOCTYPE declaration is now required for all XHTML documents.
<html></html>, <head></head>, and <body></body> tags are also required
as is the <title></title> tag inside the head element.
<!DOCTYPE Doctype goes here>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title goes here</title>
</head>
<body>
Body text goes here
</body>
</html>
•
The DOCTYPE declaration itself is not part of the XHTML document and
should not have a closing tag.
19
Document Type Definitions (DTDs)
• There are currently 3 XHTML document types:
• XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
• This DTD will work in most circumstances. Use this DTD to support
legacy browsers and help bridge the gap from HTML to XHTML.
• XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">
20
2. XHTML tags must be closed.
•
Tags with optional closing parts (non-empty tags) are now required. This
affects <p></p>, <li></li>, and <option></option>.
•
Incorrect:
<p>My first paragraph.<p>My second paragraph.
Correct:
<p>My first paragraph.</p><p>My second paragraph.</p>
•
•
Tags without closing parts (empty tags) must end with a space followed by a
forward slash just before the greater than symbol that closes the tag. This
affects <base />, <br />, <frame />, <hr />, <img />, and others.
•
Incorrect:
<img src=“toystory.gif“ alt=“Toy Story”>
Correct:
<img src="toystory.gif" alt=“Toy Story” />
•
21
3. XHTML tags must be properly nested.
• All XHTML tags must be nested inside
<html></html>. All elements must be in
pairs and correctly nested within their
parent element.
• Incorrect:
<p><b>This text is bold.</p></b>
• Correct:
<p><b>This text is bold.</b></p>
22
Common Nesting Mistake!
•
Incorrect:
<ul>
<li>Woody
<ul>
<li>Mr. Potato Head
</ul>
<li>Slinky Dog
•
</ul>
Correct:
<ul>
<li>Woody
<ul>
<li>Mr. Potato Head</li>
</ul>
</li>
<li>Slinky Dog</li>
</ul>
23
4. XHTML elements must be in lowercase.
• Although HTML was case-insensitive, XML is case-sensitive.
XHTML inherits this. Thus, tags like <b></b> and <B></B> are
considered different tags.
• Incorrect:
<HEAD><TiTlE>This is the title.</title></hEAd>
• Correct:
<head><title>This is the title.</title></head>
• All attributes and style information must also be in lowercase.
• Incorrect:
<form METHOD=“POST">
• Correct:
<form method=“post">
24
5. XHTML attribute values must be quoted.
• Always use quotes
around attribute values.
• Incorrect:
<table width=400>
• Correct:
<table width=“400”>
25
6. Boolean Attributes are forbidden.
• All attributes must have a value. Attributes
without value parts now require a value equal to
the attribute name. This affects checked,
compact, declare, defer, disabled, ismap,
multiple, nohref, noresize, noshade, nowrap,
readonly, and selected.
• Incorrect:
<input checked>
• Correct:
<input checked="checked" />
26
7. Use the id attribute in place of the name attribute.
• In XHTML the name attribute is no longer in use
(deprecated) so use the id attribute instead. This affects
a, applet, frame, iframe, img, and map.
• Incorrect:
<frame src=“home.html" name=“home" />
• Correct:
<frame src=“home.html" id=“home" />
• Use both name and id attributes with identical attribute
values to ensure compatibility with older browsers.
• Example:
<a name=“top" id=“top“></a>
27
Hooray!
• You have completed
the 7 rules of XHTML!
• Following these 7
rules will allow you to
write correct XHTML
code.
28
Lunch!
29
20 XHTML Questions
• Remember the HTML Questions from
before? This time you get to take the quiz
yourself.
• Do your best!
• W3Schools XHTML Quiz
http://www.w3schools.com/quiztest/quiztest.asp
?qtest=XHTML
30
Any Questions?
31
Cascading Style Sheets (CSS)
• W3Schools CSS Tutorials
http://www.w3schools.com/css/default.asp
• W3Schools’ CSS Tryit Editor
http://www.w3schools.com/css/css_examples.asp
32
Accessibility
• A List Apart: Topics: User Science: Accessibility
http://alistapart.com/topics/userscience/accessibility/
• Usability.gov
http://www.usability.gov/
• Web Accessibility Initiative (WAI)
http://www.w3.org/WAI/
• Web Content Accessibility Guidelines (WCAG) 1.0
http://www.w3.org/TR/WAI-WEBCONTENT/
• WebXACT (formerly Bobby) - Online Accessibility
Checker
http://webxact.watchfire.com/
33
The Future
“In spite of all I’ve said, I am not pessimistic about the future. Exciting developments on
the horizon will make all this confusion and difficulty a distant memory. Today’s problems
are the necessary precursor to future clarity. It’s all part of the development from a crude
and immature way of exchanging information to a simpler, cleaner model.
‘We’ can win (and I mean everybody), but not in the short term – not until we get the point
where the idea of writing HTML is a thing of the past. In my ideal future, nobody will write
HTML documents; they will just write documents. These documents will be multi-purpose.
If you want it in audio, you will get it in audio; if you want the PDF version, you get the
PDF version; and if you want the web version, you’ll get the web version – though, come
to think of it, all these versions will be web versions.
The notion that I am marginalising a certain group of people by providing a text
alternative rather than going out of my way to make sure the main web page is
accessible to everyone will be meaningless. There will be no main version, just the
version that suits you.”
Byrne, Jim. "This HTML Kills: Thoughts on Web Accessibility." A List Apart #98 Published
October 20, 2003 Accessed 13 July 2006 <http://alistapart.com/articles/htmlkills/>.
34
Recommended Reading
• A List Apart (ALA)
http://www.alistapart.com/
• HTML and XHTML Pocket Reference, Third Edition (O’Reilly,
$12.99)
http://www.oreilly.com/catalog/htmlpr3/
• Macromedia Dreamweaver MX 2004 (Lawrenceville Press, $44.95)
http://www.lvp.com/dmx04.htm
• Research-Based Web Design and Usability Guidelines (Free, 39MB
Download)
http://usability.gov/pdfs/guidelines_book.pdf
• W3Schools XHTML Tutorials
http://www.w3schools.com/xhtml/default.asp
35
Useful Software
• Macromedia Dreamweaver ($399.00)
http://www.adobe.com/products/dreamweaver/
• Mozilla Firefox (Free)
http://www.mozilla.com/
• TextPad ($30.00)
http://www.textpad.com/
• DOM Inspector Extension for Mozilla Firefox (built-in)
• HTMLValidator Extension for Mozilla Firefox
https://addons.mozilla.org/firefox/249/
• Web Developer Extension for Mozilla Firefox
https://addons.mozilla.org/firefox/60/
36
Online Tools
• Tidy - HTML to XHTML converter
http://tidy.sourceforge.net/
• The W3C Markup Validation Service
http://validator.w3.org/
• W3Schools’ CSS Tryit Editor
http://www.w3schools.com/css/css_examples.asp
• WebXACT (formerly Bobby) - Online Accessibility
Checker
http://webxact.watchfire.com/
37
Any Questions?
38
Hands-On Training
• For the remainder of our time, I want to look at
common scenarios you will encounter when
coding XHTML.
• You will have up to 10 minutes to complete each
activity on your own using the text editor of your
choice.
• We will discuss solutions once time has expired
for each activity.
• You will leave here with working examples to go
by when you teach XHTML in your classes.
39
Reference Links
• Color Codes
http://www.mhs.mcdowell.k12.nc.us/staff/dsmith/topics/web_
site_design/color_codes.html
• Escape Characters
http://www.mhs.mcdowell.k12.nc.us/staff/dsmith/topics/web_
site_design/escape_characters.html
• HTML Reference
http://www.mhs.mcdowell.k12.nc.us/staff/dsmith/vocabulary/p
ending/html_vocabulary.html
• Links will be moving soon! When the links no longer work
visit http://www.mhs.mcdowell.k12.nc.us/ and find my page in
the directory listing.
40
Scenario 1: Mandatory Tags
• Create an empty starting page with all of the
required tags in place. This will become your
template for use in completing all future
scenarios.
• Save as “template.html”.
• Hint: Yes, you can look back in your notes – it’s
listed there. However, I want you to try and
create it from memory. Try your best and then
look back in the notes to double-check yourself.
41
Scenario 2: Horizontal Rule
• Create a horizontally-centered, horizontal
rule that is 200 pixels wide, 10 pixels thick,
and has no shadow.
• Start with “template.html”. Save as
“hr.html”.
42
Scenario 3: Reports
• Recreate the following in correct XHTML code. Use
heading 3 and paragraph tags.
• Start with “template.html”. Save as “reports.html”.
Toy Story 3
Plot Outline: Buzz Lightyear is recalled to a factory in
Taiwan, and the rest of his toy pals go to rescue him.
Status: Pre-Production
43
Scenario 4: Lists
• Recreate the following in correct XHTML code.
• Start with “template.html”. Save as “lists.html”.
•Good Guys
•Woody the Cowboy
•Jessie the Yodeling Cowgirl
•Bullseye the Horse
•Bad Guys
•Stinky Pete the Prospector
•Al the Toy Collector
44
Scenario 5: Tables
• Recreate the following in correct XHTML code.
• Start with “template.html”. Save as “tables.html”.
My Class Schedule
First Period
Second Period
Third Period
Fourth Period
Computer Applications I
Planning
Computer Applications II
e-Commerce I
45
Scenario 6: Forms
• Create a backwards-compatible, working
XHTML form with an empty action
attribute. Include widgets for a username,
password, radio button list (with a default
selection), submit button, and reset button.
• Start with “template.html”. Save as
“forms.html”.
46
Any Questions?
47
Works Consulted
• The Free Dictionary
http://www.thefreedictionary.com/
• HTML and XHTML Frequently Answered
Questions
http://www.w3.org/MarkUp/2004/xhtml-faq
• HyperText Markup Language (HTML) Home
Page
http://www.w3.org/MarkUp/
• W3Schools XHTML Tutorial
http://www.w3schools.com/xhtml/default.asp
48