Title: From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers
1From HTML to XHTML and BeyondXHTML Coding
fore-Commerce I Teachers
- Daniel B. Smith
- dsmith77_at_gmail.com
- http//dsmith77.wordpress.com/
2Who 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 schools web site. - In 2005, I started a my own business in creating
web sites for small businesses called
DanielSmithDesigns.com.
3The 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? Lets get started.
4Got 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 heres the million-dollar
question - How well do you
- know HTML?
5HTML 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. - lthr width60 colorredgt
- hr is the tag name.
- width60 and colorred are the tags
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 namevalue pairs.
615 HTML Questions
- Im 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 were
done, well see how everyone did. - Remember, these questions are asking about HTML
not XHTML. Well get to that a little later.
7Onward 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
8The 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
9Childhood
- 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 dont
want to let go and move on. But the next stage
is coming
10Coming 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 wont 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? - Its 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.
11Computers are Deaf and Blind
- You see, the problem is that a computer doesnt
know the difference between a rock concert and
mozart. It only knows it as a music file. The
computer cant listen to it. - Likewise, a computer cant understand the
difference between a cartoon and a Thomas Kinkade
painting. It cant see either. - Describing the data solves this problem and makes
searching and sorting far more effective and
efficient.
12XHTML 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
13Problems 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 wont 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.
14The 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.
15And Now
- The moment you have all been waiting for!
- Its time for XHTML!
16What 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.
17The 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 gtgt HTML gtgt HTML 2.0 gtgt HTML 3.2 gtgt HTML 4.01
gtgt XHTML 1.0
187 Rules of XHTML
- 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 well discuss these rules in detail.
191. XHTML has a few mandatory elements.
- A DOCTYPE declaration is now required for all
XHTML documents. lthtmlgtlt/htmlgt, ltheadgtlt/headgt,
and ltbodygtlt/bodygt tags are also required as is
the lttitlegtlt/titlegt tag inside the head element. - lt!DOCTYPE Doctype goes heregt
- lthtml xmlns"http//www.w3.org/1999/xhtml"gt
- ltheadgt
- lttitlegtTitle goes herelt/titlegt
- lt/headgt
- ltbodygt
- Body text goes here
- lt/bodygt
- lt/htmlgt
- The DOCTYPE declaration itself is not part of the
XHTML document and should not have a closing tag.
20Document Type Definitions (DTDs)
- There are currently 3 XHTML document types
- XHTML 1.0 Strict
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
1-strict.dtd"gt - XHTML 1.0 Transitional
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
/xhtml1-transitional.dtd"gt - 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
- lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
ml1-frameset.dtd"gt
212. XHTML tags must be closed.
- Tags with optional closing parts (non-empty tags)
are now required. This affects ltpgtlt/pgt,
ltligtlt/ligt, and ltoptiongtlt/optiongt. - Incorrect
- ltpgtMy first paragraph.ltpgtMy second paragraph.
- Correct
- ltpgtMy first paragraph.lt/pgtltpgtMy second
paragraph.lt/pgt - 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 ltbase /gt, ltbr /gt, ltframe /gt,
lthr /gt, ltimg /gt, and others. - Incorrect
- ltimg srctoystory.gif altToy Storygt
- Correct
- ltimg src"toystory.gif" altToy Story /gt
223. XHTML tags must be properly nested.
- All XHTML tags must be nested inside
lthtmlgtlt/htmlgt. All elements must be in pairs and
correctly nested within their parent element. - Incorrect
- ltpgtltbgtThis text is bold.lt/pgtlt/bgt
- Correct
- ltpgtltbgtThis text is bold.lt/bgtlt/pgt
23Common Nesting Mistake!
- Incorrect
- ltulgt
- ltligtWoody
- ltulgt
- ltligtMr. Potato Head
- lt/ulgt
- ltligtSlinky Dog
- lt/ulgt
- Correct
- ltulgt
- ltligtWoody
- ltulgt
- ltligtMr. Potato Headlt/ligt
- lt/ulgt
- lt/ligt
- ltligtSlinky Doglt/ligt
- lt/ulgt
244. XHTML elements must be in lowercase.
- Although HTML was case-insensitive, XML is
case-sensitive. XHTML inherits this. Thus, tags
like ltbgtlt/bgt and ltBgtlt/Bgt are considered different
tags. - Incorrect
- ltHEADgtltTiTlEgtThis is the title.lt/titlegtlt/hEAdgt
- Correct
- ltheadgtlttitlegtThis is the title.lt/titlegtlt/headgt
- All attributes and style information must also be
in lowercase. - Incorrect
- ltform METHODPOST"gt
- Correct
- ltform methodpost"gt
255. XHTML attribute values must be quoted.
- Always use quotes around attribute values.
- Incorrect
- lttable width400gt
- Correct
- lttable width400gt
266. 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
- ltinput checkedgt
- Correct
- ltinput checked"checked" /gt
277. 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
- ltframe srchome.html" namehome" /gt
- Correct
- ltframe srchome.html" idhome" /gt
- Use both name and id attributes with identical
attribute values to ensure compatibility with
older browsers. - Example
- lta nametop" idtopgtlt/agt
28Hooray!
- You have completed the 7 rules of XHTML!
- Following these 7 rules will allow you to write
correct XHTML code.
29Lunch!
3020 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?qte
stXHTML
31Any Questions?
32Cascading 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
33Accessibility
- A List Apart Topics User Science Accessibility
- http//alistapart.com/topics/userscience/accessibi
lity/ - 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/
34The Future
- In spite of all Ive said, I am not pessimistic
about the future. Exciting developments on the
horizon will make all this confusion and
difficulty a distant memory. Todays problems are
the necessary precursor to future clarity. Its
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, youll 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
lthttp//alistapart.com/articles/htmlkills/gt.
35Recommended Reading
- A List Apart (ALA)
- http//www.alistapart.com/
- HTML and XHTML Pocket Reference, Third Edition
(OReilly, 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
36Useful 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/
37Online 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/
38Any Questions?
39Hands-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.
40Reference Links
- Color Codes
- http//www.mhs.mcdowell.k12.nc.us/staff/dsmith/top
ics/web_site_design/color_codes.html - Escape Characters
- http//www.mhs.mcdowell.k12.nc.us/staff/dsmith/top
ics/web_site_design/escape_characters.html - HTML Reference
- http//www.mhs.mcdowell.k12.nc.us/staff/dsmith/voc
abulary/pending/html_vocabulary.html - Links will be moving soon! When the links no
longer work visit http//www.mhs.mcdowell.k12.nc.u
s/ and find my page in the directory listing.
41Scenario 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 its
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.
42Scenario 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.
43Scenario 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
44Scenario 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
45Scenario 5 Tables
- Recreate the following in correct XHTML code.
- Start with template.html. Save as tables.html.
My Class Schedule
First Period Computer Applications I
Second Period Planning
Third Period Computer Applications II
Fourth Period e-Commerce I
46Scenario 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.
47Any Questions?
48Works 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