From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers - PowerPoint PPT Presentation

About This Presentation
Title:

From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers

Description:

I graduated in 1999 from Gardner-Webb University with a Bachelor's ... Jessie the Yodeling Cowgirl. Bullseye the Horse. Bad Guys. Stinky Pete the Prospector ... – PowerPoint PPT presentation

Number of Views:561
Avg rating:3.0/5.0
Slides: 49
Provided by: rebecca84
Category:

less

Transcript and Presenter's Notes

Title: From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers


1
From HTML to XHTML and BeyondXHTML Coding
fore-Commerce I Teachers
  • Daniel B. Smith
  • dsmith77_at_gmail.com
  • http//dsmith77.wordpress.com/

2
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 schools web site.
  • In 2005, I started a my own business in creating
    web sites for small businesses called
    DanielSmithDesigns.com.

3
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? Lets get started.

4
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 heres the million-dollar
    question
  • How well do you
  • know HTML?

5
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.
  • 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.

6
15 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.

7
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

8
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

9
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 dont
    want to let go and move on. But the next stage
    is coming

10
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 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.

11
Computers 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.

12
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

13
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 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.

14
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.

15
And Now
  • The moment you have all been waiting for!
  • Its time for XHTML!

16
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.

17
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 gtgt HTML gtgt HTML 2.0 gtgt HTML 3.2 gtgt HTML 4.01
    gtgt XHTML 1.0

18
7 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.

19
1. 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.

20
Document 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

21
2. 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

22
3. 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

23
Common 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

24
4. 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

25
5. XHTML attribute values must be quoted.
  • Always use quotes around attribute values.
  • Incorrect
  • lttable width400gt
  • Correct
  • lttable width400gt

26
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
  • ltinput checkedgt
  • Correct
  • ltinput checked"checked" /gt

27
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
  • 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

28
Hooray!
  • You have completed the 7 rules of XHTML!
  • Following these 7 rules will allow you to write
    correct XHTML code.

29
Lunch!
30
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?qte
    stXHTML

31
Any Questions?
32
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

33
Accessibility
  • 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/

34
The 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.

35
Recommended 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

36
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/

37
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/

38
Any Questions?
39
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.

40
Reference 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.

41
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 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.

42
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.

43
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
44
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
45
Scenario 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
46
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.

47
Any Questions?
48
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
Write a Comment
User Comments (0)
About PowerShow.com