From HTML to XHTML and Beyond XHTML Coding

From HTML to XHTML and Beyond: XHTML Coding for e-Commerce I Teachers Daniel B. Smith dsmith 77@gmail. com http: //dsmith 77. 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 Mc. Dowell 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 Daniel. Smith. Designs. 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. ” 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 Exam. View 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 stands for Hyper. Text 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 (W 3 C). The W 3 C 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 W 3 C Recommendation as of January 26, 2000. A W 3 C Recommendation means that the specification is stable, that it has been reviewed by the W 3 C 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 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. w 3. 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 "-//W 3 C//DTD XHTML 1. 0 Strict//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 -strict. dtd"> • XHTML 1. 0 Transitional <!DOCTYPE html PUBLIC "-//W 3 C//DTD XHTML 1. 0 Transitional//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 transitional. 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 "-//W 3 C//DTD XHTML 1. 0 Frameset//EN" "http: //www. w 3. org/TR/xhtml 1/DTD/xhtml 1 frameset. 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 />, , <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><Ti. Tl. E>This is the title. </title></h. EAd> • 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, 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! • W 3 Schools XHTML Quiz http: //www. w 3 schools. com/quiztest. asp ? qtest=XHTML 30

Any Questions? 31

Cascading Style Sheets (CSS) • W 3 Schools CSS Tutorials http: //www. w 3 schools. com/css/default. asp • W 3 Schools’ CSS Tryit Editor http: //www. w 3 schools. com/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. w 3. org/WAI/ • Web Content Accessibility Guidelines (WCAG) 1. 0 http: //www. w 3. org/TR/WAI-WEBCONTENT/ • Web. XACT (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/htmlpr 3/ • Macromedia Dreamweaver MX 2004 (Lawrenceville Press, $44. 95) http: //www. lvp. com/dmx 04. htm • Research-Based Web Design and Usability Guidelines (Free, 39 MB Download) http: //usability. gov/pdfs/guidelines_book. pdf • W 3 Schools XHTML Tutorials http: //www. w 3 schools. com/xhtml/default. asp 35

Useful Software • Macromedia Dreamweaver ($399. 00) http: //www. adobe. com/products/dreamweaver/ • Mozilla Firefox (Free) http: //www. mozilla. com/ • Text. Pad ($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 W 3 C Markup Validation Service http: //validator. w 3. org/ • W 3 Schools’ CSS Tryit Editor http: //www. w 3 schools. com/css_examples. asp • Web. XACT (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. k 12. nc. us/staff/dsmith/topics/web_ site_design/color_codes. html • Escape Characters http: //www. mhs. mcdowell. k 12. nc. us/staff/dsmith/topics/web_ site_design/escape_characters. html • HTML Reference http: //www. mhs. mcdowell. k 12. 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. k 12. 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. Toy Story 3“reports. html”. • Start with “template. html”. Save as 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. • Good Guys • Start with “template. html”. Save as “lists. html”. • 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. My Class Schedule • Start with “template. html”. Save as “tables. html”. First Period Computer Applications I Second Period Planning Third Period Computer Applications II Fourth Period 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. w 3. org/Mark. Up/2004/xhtml-faq • Hyper. Text Markup Language (HTML) Home Page http: //www. w 3. org/Mark. Up/ • W 3 Schools XHTML Tutorial http: //www. w 3 schools. com/xhtml/default. asp 48