HTML Book Students

7/27/2019 HTML Book Students

1/305


2/305


3/305


4/305


5/305


6/305


7/305


8/305


9/305


10/305


11/305


12/305


13/305


14/305


15/305


16/305


17/305


18/305


19/305


20/305


21/305


22/305


23/305


24/305


25/305


26/305


27/305


28/305


29/305


30/305


31/305


32/305


33/305


34/305


35/305


36/305


37/305


38/305


39/305


40/305


41/305


42/305


43/305


44/305


45/305


46/305


47/305


48/305


49/305


50/305


51/305


52/305


53/305


54/305


55/305


56/305


57/305


58/305


59/305


60/305


61/305


62/305


63/305


64/305


65/305


66/305


67/305


68/305


69/305


70/305


71/305


72/305


73/305


74/305


75/305


76/305


77/305


78/305


79/305


80/305


81/305


82/305


83/305


84/305


85/305


86/305


87/305


88/305


89/305


90/305


91/305


92/305


93/305


94/305


95/305


96/305


97/305


98/305


99/305


100/305


101/305


102/305


103/305


104/305


105/305


106/305


107/305


108/305


109/305


110/305


111/305


112/305


113/305


114/305


115/305


116/305


117/305


118/305


119/305


120/305


121/305


122/305


123/305


124/305


125/305


126/305


127/305


128/305


129/305


130/305


131/305


132/305


133/305


134/305


135/305


136/305


137/305


138/305


139/305


140/305


141/305


142/305


143/305


144/305


145/305


146/305


147/305


148/305


149/305


150/305


151/305


152/305


153/305


154/305


155/305


156/305


157/305


158/305


159/305


160/305


161/305


162/305


163/305


164/305


165/305


166/305


167/305


168/305


169/305


170/305


171/305


172/305


173/305


174/305


175/305


176/305


177/305


178/305


179/305


180/305


181/305


182/305


183/305


184/305


185/305


186/305


187/305


188/305


189/305

189

correct use of CSS and unobtrusive JavaScript that you are taught at HTML Source will meanthat visitors to your sites that are unlucky enough to have to use these browsers for whatever reason will be served a page that is still usable without the bells and whistles.

Degrading Gracefully

Graceful degradation is a term you will hear a lot about when you start designing using CSS,and writing modern JavaScript. It breaks down like this:most users will arrive at your site witha browser that supports style sheets and JavaScript; and some users wont. Most, in thiscase, can probably be taken to mean over 90%.So, because the vast majority of your users will benefit from prettier pages or more usefulinteractions, we should all use them. However, we should do so in a way that doesnt require that the user supports them.This is possible, and various technologies have been designed with this specifically in mind CSS being the textbook example. You can apply a style sheet to a page, and it will make thepage look nice in those browsers that support it. But it doesnt affect users with unsupported

browsers, who are still able to access and read the (albeit a little more plain) page.This is what we should always aim for. The 5% or so of visitors with very old or exoticbrowsers are still worth supporting, and if you write your sites well, it shouldnt take muchextra work to make your site accessible to as wide an audience as possible.

Making the Call

So, is there an easy way to choose which versions of what you should try to support? My ownadvice would be to aim high. That means:

All sites should use CSS for formatting and layout. JavaScript can be useful, so use it when its appropriate. Make it unobtrusive so that it

improves most users experience of your site, but is not required to read your pages.When used in limited amounts and for logical things likeform validation(and codedwith no errors), JavaScript can be a tasteful addition to any page.

Its OK to use Flash if you have a definite reason to use it. Flash should be limited tothings like interactive presentations and animations that are impossible with CSS/JSalone. Things like your sites basic navigation should not be made in Flash.

If you already have a site online, you can monitor your server logs to see what browsers your visitors are using. Every time anybody views a file on your site, a record of this download issaved in your servers access log. Many web hosts will perform some analysis of these logsand make available reports to you, from which you can check, for example, that only 0.5% of

your audience use versions of Internet Explorer older than version 5.5. These are good numbers to know!Once youve made a decision on which browsers to support, test your site so youre sureeverything works.

Non-dithering Colours
http://www.yourhtmlsource.com/javascript/eventhandlers.htmlhttp://www.yourhtmlsource.com/javascript/formvalidation.htmlhttp://www.yourhtmlsource.com/hosting/http://www.yourhtmlsource.com/accessibility/testing.htmlhttp://www.yourhtmlsource.com/javascript/eventhandlers.htmlhttp://www.yourhtmlsource.com/javascript/formvalidation.htmlhttp://www.yourhtmlsource.com/hosting/http://www.yourhtmlsource.com/accessibility/testing.html


190/305

190

Using the special non-dithering range of colours on your webpage ensures that the colour willlook the same in all browsers on all platforms, instead of resembling a pixellated mess

Dithering Explained

If you havent noticed, images and webpages can look very different when viewed on different

computers through different monitors. This is because there may be colours needed, whichyou do not have available, because your colour depth (the amount of colours your monitor can display at a time) is too low.If you are at 256 colours (sometimes called 8-bit colour), then you will know what Im talkingabout. Since it doesnt have the millions of colours available like in higher depths, your browser will try tosimulate the colour by mixing two or more colours from its usablepalette together to give the impression of the desired colour.

As an example of dithering, say you wanted orange and it wasnt part of your system palette.The browser would mix red and yellow like this:

Windows users can check their colour depth by going to Control Panel > Display > Settings. All systems have whats called a system palette the basic set of colours that the systemcan use at the 256-colour level. Sadly, Windows and Mac systems dont use the same 256colours, but there is a cross-over of 216 colours which are in both system palettes. So, when Isay the following 216 colours arenon-dithering or web-safe , it means they will look theexact same on any computer . Thats what makes them so useful. You can use them and beguaranteed that a user wont get a horrible looking mess when they load your page. Itll all besmooth colour.Note: When you use these colours, remember HEX code syntax: you put a # in front of thenumbers. Like so:

p {color: #ff6600; }

Background Colours Chart

#000000 #003300 #006600 #009900 #00CC00 #00FF00#000033 #003333 #006633 #009933 #00CC33 #00FF33#000066 #003366 #006666 #009966 #00CC66 #00FF66#000099 #003399 #006699 #009999 #00CC99 #00FF99

#0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC#0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF#330000 #333300 #336600 #339900 #33CC00 #33FF00#330033 #333333 #336633 #339933 #33CC33 #33FF33#330066 #333366 #336666 #339966 #33CC66 #33FF66#330099 #333399 #336699 #339999 #33CC99 #33FF99#3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC#3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF
http://www.yourhtmlsource.com/starthere/glossary.html#hexhttp://www.yourhtmlsource.com/starthere/glossary.html#hex


191/305

191

#660000 #663300 #666600 #669900 #66CC00 #66FF00#660033 #663333 #666633 #669933 #66CC33 #66FF33#660066 #663366 #666666 #669966 #66CC66 #66FF66#660099 #663399 #666699 #669999 #66CC99 #66FF99#6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC#6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF#990000 #993300 #996600 #999900 #99CC00 #99FF00#990033 #993333 #996633 #999933 #99CC33 #99FF33#990066 #993366 #996666 #999966 #99CC66 #99FF66#990099 #993399 #996699 #999999 #99CC99 #99FF99#9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC#9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF#CC0000 #CC3300 #CC6600 #CC9900 #CCCC00 #CCFF00#CC0033 #CC3333 #CC6633 #CC9933 #CCCC33 #CCFF33

#CC0066 #CC3366 #CC6666 #CC9966 #CCCC66 #CCFF66#CC0099 #CC3399 #CC6699 #CC9999 #CCCC99 #CCFF99#CC00C

C#CC33C

C#CC66C

C#CC99C

C#CCCCC

C #CCFFCC

#CC00FF #CC33FF #CC66FF #CC99FF #CCCCFF #CCFFFF#FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00#FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33#FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66#FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99

#FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC#FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

Text Colours Chart

#000000 #000033 #000066 #000099 #0000CC #0000FF#003300 #003333 #003366 #003399 #0033CC #0033FF#006600 #006633 #006666 #006699 #0066CC #0066FF#009900 #009933 #009966 #009999 #0099CC #0099FF#00CC00 #00CC33#00CC66 #00CC99 #00CCCC #00CCFF#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF#330000 #330033 #330066 #330099 #3300CC #3300FF#333300 #333333 #333366 #333399 #3333CC #3333FF#336600 #336633 #336666 #336699 #3366CC #3366FF#339900 #339933 #339966 #339999 #3399CC #3399FF#33CC00 #33CC33#33CC66 #33CC99 #33CCCC #33CCFF#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF#660000 #660033 #660066 #660099 #6600CC #6600FF#663300 #663333 #663366 #663399 #6633CC #6633FF


192/305

192

#666600 #666633 #666666 #666699 #6666CC #6666FF#669900 #669933 #669966 #669999 #6699CC #6699FF#66CC00 #66CC33#66CC66 #66CC99 #66CCCC #66CCFF#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF#990000 #990033 #990066 #990099 #9900CC #9900FF#993300 #993333 #993366 #993399 #9933CC #9933FF#996600 #996633 #996666 #996699 #9966CC #9966FF#999900 #999933 #999966 #999999 #9999CC #9999FF#99CC00 #99CC33#99CC66 #99CC99 #99CCCC #99CCFF#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF#CC0000 #CC0033#CC0066 #CC0099 #CC00CC #CC00FF#CC3300 #CC3333#CC3366 #CC3399 #CC33CC #CC33FF#CC6600 #CC6633#CC6666 #CC6699 #CC66CC #CC66FF#CC9900 #CC9933#CC9966 #CC9999 #CC99CC #CC99FF#CCCC0

0#CCCC3

3#CCCC6

6#CCCC9

9#CCCCC

C#CCCCF

F#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

HTML 4 Explained

Every once in a while, a new version of the HTML standard is released. In 1998, it was timeonce again to embrace a new generation of HTML elements and attributes, and say goodbyeto a few old friends. HTML 4.01 was a grand step towards an accessible, international web.Webmasters were granted many new opportunities with this round of HTML specifications, solets dive in and see what we can do with them.

What is HTML 4.01?

HTML 4.01 was a large shake-up to the HTML standards that arrived in April 1998. The HTMLlanguage you have learnt is constantly evolvingto meet the needs of a growing Internet.Things get added, some things get taken away and still more elements are asked to fade outgracefully. These changes ensure that designers have the freedom and power available tocreate increasingly complex websites and are able to achieve this efficiently.It only happens every few years, and the changes are made by the World Wide WebConsortium (W3C), who are HTMLs governing body, as it were. They convene and designthe specifications that we all work with when creating websites (CSS was designed by theW3C too). They look for weaknesses in HTML that are holding the web back, and sort themout, which makes creating compelling websites easier for everybody.The standard we were all working with before this wasHTML 3.2 . That was used for a whilebefore the W3C decided to step it up another notch a few years ago. They released HTML 4.
http://www.yourhtmlsource.com/starthere/historyofhtml.htmlhttp://www.w3.org/http://www.w3.org/http://www.yourhtmlsource.com/stylesheets/introduction.htmlhttp://www.yourhtmlsource.com/starthere/historyofhtml.htmlhttp://www.w3.org/http://www.w3.org/http://www.yourhtmlsource.com/stylesheets/introduction.html


193/305

193

Some time later, when some minor errors in the specification were uncovered, they fixedthese and called the final specification HTML 4.01. As of now,HTML 4.01 is the acceptedstandard , and the majority of web users do have browsers that support it fully . Some of the more peripheral new elements have yet to gain full support in the latest round of browsers, but theyre on the way. Modern browsers will generally have no problem withanything in these specs.

Versions

If you have used any software you will have undoubtedly noticed how every few months itadvances its number. I used to use Firefox 2, until they improved it and it became Firefox 2.1.

Adding a decimal to the version number signifies aminor change to the original. When major changes are made to a software project, they will move up a whole number to version 3. Thisis the same way most dynamic things work. As you can see, the original HTML 3.0 spec wasrevised to version 3.2 before the big change to 4, and a minor change to 4.01.There was some confusion when HTML 4 started being discussed, as at the time version 4browsers like Internet Explorer 4 were making their appearance and people thought there wassome connection. In reality, the two separate things had just reached those versionssimultaneously, not because of each other. As you know, browser technology has advancedto version 7 stages and beyond by now, and HTML is still at level 4. So theres no realconnection; though, that said, it was in the version 4 browsers that HTML 4 started beingincorporated properly. Glad thats cleared up.

A few months after HTML 4.0 was released, its documentation was updated to correct someminor problems, and its version number was bumped up slightly. So the finalfinal version of this standard is HTML 4.01 .

DOCTYPEs Ahoy

Nowadays the Document Type Declaration (DTD) at the top of your document is veryimportant if you want the browsers to render your page correctly. Without it, browsers mightinterpret your code more loosely, and you may have display errors. The HTML 4.01 DTDs arebelow. Take your pick.Use the strict DTD if youre using pure,structural code with no hacks:The transitional DOCTYPE, below, is the most commonly used, and still permits you to usecertain old elements that we will eventually stop using altogether. It is probably the bestchoice until youve gotten to know HTML really well. Once youre ready, you can start usingthe stricter DOCTYPE above.Finally, for frameset pages, use the frameset DTD:Simply add this line of code to the very top of your HTML pages (before the opening
http://www.yourhtmlsource.com/starthere/browserreview.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/frames/basicframes.htmlhttp://www.yourhtmlsource.com/frames/basicframes.htmlhttp://www.yourhtmlsource.com/starthere/browserreview.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/frames/basicframes.html


194/305

194

tag), and youre away. You will also need tospecify the character encoding of your page. Thebest encoding to use is called Unicode, and allows you to type almost any character you want(like punctuation, letters with accents etc.) directly into your content. Add this element inbetween your pages and :Once you have added your DOCTYPE and encoding, run your page through the HTMLvalidator to see if youre obeying the rules.

The New Elements in HTML 4

There are 22 elements new to HTML in the 4 specifications, and they cover all the areas,from text-formatting to tables to frames and the rest. Most of these elements have beencovered in tutorials elsewhere here in HTML Source, and so where appropriate there are linksto these in-depth pages. Most of the text formatting elements will make the text they mark uplook a little different. You can see the effects of these elements in the text formatting list.

This is used to show an ABBReviated version of a word, and to offer the full version. When areader leaves their mouse on the word, the full version pops up.The code would be abbr.

Similar to the one above, this is used for special abbreviations called acronyms (initialledabbreviations that can be spoken as a word themselves). It works the same way.NATO

Most text is read from left to right, but some languages are the opposite, like Hebrew for example. This new tag allows the browser to display your page correctly if you use one of these languages, and allows you to pull off cool effects like this: cool effects. Thats typed innormally in the source code, but the tag changes its direction. RTL means Right To Left.Code: crazy text

This is a simple way of addingform buttons to your pages. Whats more, you can now formatthe text and put images and other elements on the button.click meclick me for nothing !

A table tag that allows you to affect the attributes of an entire column with one line of code.More info inTables Accessibility.
http://www.yourhtmlsource.com/text/specialcharacters.html#charactersetshttp://validator.w3.org/http://validator.w3.org/http://www.yourhtmlsource.com/text/textformattinglist.htmlhttp://www.yourhtmlsource.com/forms/basicforms.htmlhttp://www.yourhtmlsource.com/forms/basicforms.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.htmlhttp://www.yourhtmlsource.com/text/specialcharacters.html#charactersetshttp://validator.w3.org/http://validator.w3.org/http://www.yourhtmlsource.com/text/textformattinglist.htmlhttp://www.yourhtmlsource.com/forms/basicforms.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.html


195/305

195

Wrapping this around some text creates a strike-through effect to signify DELeted text, so youcan show readers what once existed without cutting it out altogether.waffle

This allows you to group buttons and things together, giving you a framed container to holdthem in. It works together with the tag below.

Strangely, this has only been made part of the official specifications now, despite it havingbeen in use for years. It has been given new style attributes but overall its the same as theframe tag before. Read our tutorials.

This tag is in the same boat as its friend above. Nothings really new.

Once a proprietary Internet Explorer tag, this was such a smart idea that it has beenassimilated into HTML proper. I have an tutorialfor you, too.

This stands for INSerted text. It works in conjunction with thedel tag, and the inserted textappears with an underline.wafflequality literature

This allows you to give form elements a label. Clicking the label functions like clicking theelement (a radio button, for example) itself. This improvesForms Accessibility.Choice 1

When using a fieldset element, this element must come first before any other contentinside the fieldset . It gives the title of the group. See it in action in anadvanced formstutorial.Contact InfoEmail:Address:

Another part of the frames umbrella that is being formally added to HTML 4. You can learn
http://www.yourhtmlsource.com/frames/http://www.yourhtmlsource.com/frames/inlineframes.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.htmlhttp://www.yourhtmlsource.com/frames/http://www.yourhtmlsource.com/frames/inlineframes.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.htmlhttp://www.yourhtmlsource.com/forms/formsaccessibility.html


196/305

196

more about it at the basic frames page.

The same as above, this is for people who cant do JavaScript.

This is set to become the do-it-all tag for inserting multimedia into your page, and is supposedto take over from img , ismap , applet , script and any others.

With this tag you can group together many option elements which are part of a select field, and give the groups titles.

This tag is used to set PARAMeters for ActiveX, Applets andobjects . It existed beforeHTML 4.01, but now is official code.

This tag was brought in specifically to work with stylesheets in applyingclasses and ids . Itdoes nothing on its own, but it is great for applying your styles to text.

A new table tag that allows you to give attributes to a block of cells with this one tag. Readmore in Tables Accessibility.

Allows you to add a footer to thetbody part of your tables.

This allows you to add a header to the tbody part of a table. It comes before tbody , whiletfoot comes after in the code. Both of these elements are also found in HTML4 Tables.

If youve ever used the blockquote tag, youll know its a big tag. How many letters are inthat, ten?! This is much more like it, and is suitable for shorter quotations. Plus, it adds in thequotation marks for you. It will not add in the line breaks you get withblockquote .

The new Attributes

These new attributes are here to allow stylesheet implementation, with two more reflecting the
http://www.yourhtmlsource.com/frames/basicframes.htmlhttp://www.yourhtmlsource.com/javascript/http://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.htmlhttp://www.yourhtmlsource.com/frames/basicframes.htmlhttp://www.yourhtmlsource.com/javascript/http://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.htmlhttp://www.yourhtmlsource.com/tables/tablesaccessibility.html


197/305

197

new international concerns that the W3C have taken onboard in this new draught. They canall be applied to any element .

class

This is how you give your page elements and text their class es from your stylesheet. Read

all about it inadvanced CSS .

dir

This is the attribute that is used mostly with the new tag above. Your possible valuesare rtl (right-to-left) or the defaultltr (left-to-right).

id

ids are just like classes, but can be used with JavaScript and DHTML. More info.

langThis attribute sets off a block of text as text typed in a foreign LANGuage, so that searchengines and browsers know, and dont just take it as badly spelled English. It will not translateanything for you, its just some behind-the-scenes help for things other than readers.You can denote the text using the span tag, likeBonjour!.If youre going to use it, have a look at the the commonlanguage codes .

title

This is one of my favourite things that came with HTML 4.01. It allows you to add in tooltiptext, like the alt attribute; but now you can add it to absolutely anything. You can give tablecells titles, add in extra information to your links, and even hide jokes in your code that willonly appear when a reader is on a specific word or sentence in your text.

Deprecated Elements

A deprecated element is one that is on the way out, but one which has been given a fewmore months to live before its life fully ends. There are much better elements than theseavailable now, so your usage of them should be downscaled as much as possible.

Used to add Java applets. Use the new element instead.

Used to affect text on the whole page. Use stylesheets instead.

Used to center elements. Use or stylesheets.

Used to make lists. Use ul s instead. Lists tutorial.
http://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/javascript/basicjavascript.htmlhttp://www.yourhtmlsource.com/javascript/dhtmlexplained.htmlhttp://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/accessibility/contentaccessibility.html#specifylanguagehttp://www.yourhtmlsource.com/stylesheets/http://www.yourhtmlsource.com/text/lists.htmlhttp://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/javascript/basicjavascript.htmlhttp://www.yourhtmlsource.com/javascript/dhtmlexplained.htmlhttp://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.yourhtmlsource.com/accessibility/contentaccessibility.html#specifylanguagehttp://www.yourhtmlsource.com/stylesheets/http://www.yourhtmlsource.com/text/lists.html


198/305

198

Ah, the classic font element. Still good for small things, butstylesheets have taken over.This is one element you should really try to avoid using.

Just use the input tag.

Another type of list that is redundant thanks to the ul element.

Creates strike-through effects. Use the stylesheets again, or the new del element.

Same as above, use style.

The underlining element, use stylesheets or ins instead.

Dead Elements

These are the elements that were so useless that theyre out on their asses for good. Never

use these, you cant guarantee the browsers will continue to support them. All three of theseelements have been replaced by one new element so you can see how they were useless. , , and .Use pre instead. This creates PREformatted text (text which follows its layout in your code).

And thats the lot. By this stage, you are encouraged to use all of these elements. Mostpeople have either upgraded their browsers or bought computers with the newest software onit, so the majority of the web audience are on the same level. That said, there are someelements here that still arent supported in even the newest browsers, so test your pages out

before you go using any of these elements.XHTML Explained

Argh! Just when we were all getting comfortable with the HTML 4.01 stuff they go and changethe standards again. Now we have to learn all-new tags and stress even more about browser compatibility... Except not really. This isn't a big shake-up like HTML 4.01 was. See what it'sall about below.

Why the Change?Right, before we get into all this, you should have a good grasp of the ancient and morerecent past of HTML. You can get the full low-down inThe History of HTML, but I'llsummarise:HTML began as a simple way to transfer data between any computer across the Internet;designed for scientists and researchers with no publishing experience. Over time the webbecame mainstream entertainment and new tags were brought in by the browser companiesthat didn't go along with this original aim presentation became hugely important and
http://www.yourhtmlsource.com/text/font.htmlhttp://www.yourhtmlsource.com/stylesheets/csstext.htmlhttp://www.yourhtmlsource.com/text/lists.htmlhttp://www.yourhtmlsource.com/browserupgrades.htmlhttp://www.yourhtmlsource.com/accessibility/testing.htmlhttp://www.yourhtmlsource.com/starthere/historyofhtml.htmlhttp://www.yourhtmlsource.com/text/font.htmlhttp://www.yourhtmlsource.com/stylesheets/csstext.htmlhttp://www.yourhtmlsource.com/text/lists.htmlhttp://www.yourhtmlsource.com/browserupgrades.htmlhttp://www.yourhtmlsource.com/accessibility/testing.htmlhttp://www.yourhtmlsource.com/starthere/historyofhtml.html


199/305

199

structure and compatibility started to take a back seat. This meant that some pages werenot accessible for people with the 'wrong' browser or computer setup.Thankfully, the use of much of the extraneous presentational tags has receded in use inrecent times, mainly due to the innovation of CSS code . Ideal HTML would be purelystructural , with every element concerning how a page is displayed being controlled by astylesheet. The W3C (HTML's overseers, whom you should know something about by now)have spearheaded this desire with XHTML.Further to all that, in recent times the Internet has begun to be accessed through newdevices other than the classic computer and web browser arrangement. Things like PDAs,phones and, er, fridges with Internet access are going to become common in the near future.There's an estimate going around that sometime in the near future, 75% of Internet viewingwill be carried out on one of these many new platforms . The custom-made browsers usedin these systems need to be small for cost-effectiveness. For every markup error that abrowser has to deal with, more code has to be added to the program. XHTML is a very, verystrict way of coding , which means the system makers don't have to accommodate for badmarkup.

XHTML Basic As I have already mentioned, the memory and power that would be required to implement thefullHTML specification would be too high for some smaller devices. So, rather than create awhole newlanguage for these devices from scratch, XHTML Basic was designed to be a host languagedocument typethat supports content authoring for small devices such as mobile phones, PDAs, and set topboxes.What Is XHTML Basic? The idea with XHTML Basic being a host language for small devices is that, if you are goingto create anew document type for a small device, it should be based on XHTML Basic and support all of its features.Then, where necessary, it can build upon these features. For example, some devices mayrequire extraevents that trigger when a phone call or SMS message is received.XHTML Basic is made up of the core modules of XHTML (structure, text, hypertext, and list)and thebasic forms, basic tables, image, object, metainformation, link, and base modules. Anylanguage that usesXHTML Basic as a host language will support all of the features of these modules.The advantages of this approach are as follows:Document authors know that there is a set of features that they can expect all smalldevices thatuse XHTML Basic as a host language to support. This makes authoring pages for thesedevices easier. The same content will be available to more devices and more content will be available to alldevices. It is easier to learn new languages for devices because the core set of modules remainsthe same.
http://www.yourhtmlsource.com/stylesheets/introduction.htmlhttp://w3.org/http://www.yourhtmlsource.com/accessibility/mobile.htmlhttp://www.yourhtmlsource.com/stylesheets/introduction.htmlhttp://w3.org/http://www.yourhtmlsource.com/accessibility/mobile.html


200/305

200

When a host language such as XHTML Basic is extended, if the features are available inanother of XHTMLs abstract modules, that module should be added. For example if you wanted to addscripting or CSS support then the scripting and CSS modules should be used (rather than re-creatingthem).The following table provides a quick summary of the modules and elements available inXHTML Basic.

What is XHTML?

Before I describe XHTML, it is probably best to understand where it has come from. All webMarkup languages are based on SGML, a horrendously complicated language that is notdesigned for humans to write. SGML is what is called ametalanguage ; that is, a languagethat is used to define other languages. To make its power available to web developers, SGMLwas used to create XML (eXtensible Markup Language) , a simplified version, and also ametalanguage.XML is a powerful format you create your own tags and attributes to suit the type of document you're writing. By using a set group of tags and attributes and following the rules of XML, you've created a new Markup language.This is what has been done to create XHTML (eXtensible HyperText Markup Language ) which is why you'll see XHTML being called asubset or application of XML. The pre-existingHTML 4.01 tags and attributeswere used as the vocabulary of this new Markup language,withXML providing the rules of how they are put together .So, using XHTML, you are really writing XML code, but restricting yourself to a predeterminedset of elements. This gives you all the benefits of XML (see below), while avoiding thecomplications of true XML; bridging the gap for developers who might not fancy taking onsomething as tricky as full-on XML. As you're coding under the guise of XHTML, all of the tagsavailable to you should be familiar.Writing XHTML requires that you follow the rules of conformant XML, such as correct syntax and structure . As XHTML looks so much likeclassic HTML, it faces no compatibility problems as long as some simple coding guidelines

are followed.If all of this sounds a bit heavy, don't worry. Transitioning to XHTML is quite a simple process,with only a few rules to remember.

Benefits of XHTML

The benefits of adopting XHTML now or migrating your existing site to the new standards aremany. First of all, they ensure excellent forward-compatibility for your creations. XHTML is thenew set of standards that the web will be built on in the years to come, so future-proofing
http://www.yourhtmlsource.com/accessibility/html4explained.htmlhttp://www.yourhtmlsource.com/accessibility/html4explained.html


201/305

201

your work early will save you much trouble later on. Future browser versions might stopsupporting deprecated elements from old HTML drafts, and so many old basic-HTML sitesmay start displaying incorrectly and unpredictably.Once you have used XHTML for a short time, it is no more difficult to use than HTML ever was, and in ways is easier since it is built on a more simplified set of standards. Writing codeis a more streamlined experience , as gone are the days of browser hacks and displaytricks. Editing your existing code is also a nicer experience as it is infinitely cleaner and moreself-explanatory. Browsers can also interpret and display a clean XHTML page quicker thanone with errors that the browser may have to handle.

A well-written XHTML page ismore accessible than an old style HTML page, and isguaranteed to work in any standards-compliant browser (which the latest round have finallybecome) due to the insistence on rules and sticking to accepted W3C specifications. Asmentioned above, XHTML allows greater access to configurations other than a computer andbrowser. This interoperability is another aspect of XHTML's greater accessibility.Module MarkupStructure* body, head, html, titleText* abbr, acronym, address, blockquote, br, cite,code, dfn, div, em, h1, h2, h3, h4, h5, h6, kbd, p,pre, q, samp, span, strong, var Hypertext* aList* dl, dt, dd, ol, ul, liBasic forms form, input, label, select, option, textareaBasic tables table, tr, td, th, captionImage imgObject object, paramMetainformation metaLink linkBase base* = core module.Later in the chapter you will see an example of a language for mobile phones that wasdeveloped usingXHTML Basic as a host language. It is this kind of subsetting and extending of XHTML thatmakes it astrong foundation for all document types required by new devices of the future.What XHTML Basic Includes and Leaves Out You have already seen that HTML 4 contained features that not every device could supportand that

several competing markup languages for mobile devices re-created common functionality.You also knowit will be a base for further extensions. So, here are some of the things that were left behindand why: The element was left out because you can use the link element to link to externalstylesheets to style a document for different types of client. Therefore, browsers that support stylesheets can download them, but they are not required to display information. The and elements are not supported because small devices might not
http://www.yourhtmlsource.com/browserupgrades.htmlhttp://www.yourhtmlsource.com/browserupgrades.html


202/305

202

have the memory and CPU power to handle execution of scripts or programs. Indeed, asscripting languages have developed they have become very powerful in themselves, but thepower has come at the cost of the size of, and memory required by, scripting engines. It wasdeemed that documents for these devices should be readable without requiring scripts. Event handler attributes, which are used to invoke scripts, are not supported becauseevents tendto be device-dependent. For example, a TV might have an onChannelChange event, whereasaphone might have an incomingCall event, neither of which applies to the other device. Ideally,it would be better to use a generic event handling mechanism than hardwiring event namesintothe DTD.While basic XHTML forms are supported, more complex form functions are not applicable toallsmall devices. For example, if a device does not have a local file system it will not be able touse thefile and image input types in forms. This is why only the basic XHTML forms module isincluded.As with forms, only basic tables are supported. Tables can be difficult to display on smalldevices,so features of the tables module will not apply to all small devices; for example, the nesting of tables is left out. Furthermore, tables should be created only for representing tabular data, notfor layout purposes.So, while XHTML Basic can be used as is, the intention is that it be used as a host language.Extra featurescould be added in a particular implementation that would support the requirements of thetarget device.

Adding markup from other languages results in a new document type that is an extensionofXHTMLBasic.Understanding XML NamespacesWhen you create any new language in XML (such as an extension of XHTML) it will have itsownnamespace. You might remember the term namespace from earlier chapters, but it is time tohave acloser look at namespaces.

As you already know, XHTML is written in XML. The idea behind XML is that it is a languagein which

you create different markup languages. So, XHTML is an example of a language written inXML. Alllanguages written in XML look very similar; they all have elements (words contained betweenanglebrackets) and these elements can carry attributes. What really changes between eachlanguage written inXML are things such as the words between the brackets, what attributes those elements cancarry, and theorder in which elements are allowed to appear in documents written in that language.


203/305

203

XML is used for all kinds of markup languages with different purposesfrom languages for displayinginformation such as XHTML, SVG (Scalable Vector Graphics, a graphics format), and MathML(for writing complex mathematical formulas) to languages that convey program data or set up filesor thatform electronic receipts or purchase orders between businesses.One of the key points about a language written in XML is that the element names shoulddescribe their content; for example, a element contains table data. But with so many differentlanguages beingwritten in XML, it is likely that more than one language will make use of an element called. For example, a group of furniture manufacturers might use an element called to indicate akitchenor dining table. A language written for sports might use a element to indicate theposition of teams in a league table.If documents contained markup from only one language and programs were written tounderstand onlythat one language, this probably would not be a problem. However, it is possible for an XMLdocument tocontain markup from more than one language, and many programs have to work with manydifferentlanguages. For example, an XHTML document could contain a graph or animation in SVG. Inthis case itis important for the browser to know which language each element belongs to.Indeed, it is not only individual documents that can contain markup from two languages, butwhole newdocument types can be created by combining parts of two different languages. These areknown as hybrid document types .So that processing applications (such as browsers) know to which language an elementbelongs, everytime a language is created it is given a namespace. The namespace is a URI that just acts asa uniqueidentifier for the language; you do not need to find a DTD or schema at that URI (the set of rules for what

elements and attributes the document can contain); it just has to be reserved for thenamespace (sonothing else should be found at that URIsuch as an XHTML page).The namespace that you have seen throughout this book for XHTML has been given on theroot element, as you can see in the highlighted line of the following example:


204/305

204

A simple pageWelcome to a Test page

This is just a test page to illustrate a namespace.
The namespace for XHTML is http://www.w3.org/1999/xhtml, but if you tried to go there youwould not actually find anything because it is a conceptual unique identifier that allows theprogram totell that the elements and attributes in this document belong to that namespaceso theseelements willnot be mistaken for elements from a different language with the same name.When a namespace is declared on the root element of a document, it indicates that it is thedefaultnamespace for the document and that all of the elements in that document belong to thespecifiednamespace. However, if there is another namespace declared on one of the child elements, it(and anyelements it contains) belong to that namespace.Namespaces are inherited by child elements just as CSS styles are inherited. They apply toall child elements unless there is a more specific rule or namespace.In the following snippet of a document, the default namespace is the XHTML namespaceitis on theroot element. However, there is also an element that contains a element.The element has the SVG namespace and contains a rectangle with rounded cornerswritten inScalable Vector Graphics (you learn about this language in the next section). The namespaceon this element means that it and the element belong to the SVG namespace, althoughthe rest of the document belongs to the XHTML namespace (ch13_eg02.html).A Page with Two Namespaces
Here is a rectangle in SVG.
You can see this page working in a browser in Figure 13-1. Unfortunately, neither of the maintwo


205/305

205

browsers support SVG at the time of this writing so you need to view this in an XHTML- andSVG-compliant browser, such as the W3Cs Amaya, which can be downloaded fromhttp://www.w3.org/.

Figure 13-1With the exception of this example, all of the other examples that you have seen in the bookcontainmarkup from the XHTML namespace so that when the namespace has been declared on theroot elementof the document it has applied to all elements. However, in the next section youll see adocument thatcontains markup from not just two but three namespaces.Hybrid Document TypesBecause XHTML was modularized, it is possible to create whole new document types that

mix parts of XHTML with other languages written in XML. For example, its possible to extend XHTMLBasic withparts of the SVG language to create a special language for financial reports, with text andbasic tables of data in XHTML and graphs and charts in SVG.The result is known as a hybrid document type . Indeed, when new versions of XHTML comeout,extensions to the language can take the form of new modules.The XHTML plus MathML plus SVG profile developed by the W3C integrates XHTML 1.1,MathML 2.0,

and SVG 1.1 using the XHTML Modularization framework to create such a hybrid documenttype.Unfortunately, the support for MathML and SVG is poor in mainstream browsers.However, the W3C has developed its own browser called Amaya that supportsboth of these languages; you can download Amaya for free from the W3C site(http://www.w3c.org ). While you cannot expect many people to use Amaya, itsa great tool for testing standards conformance.

Obviously you already know what XHTML is, but you may not know what the other two arefor:
http://www.w3.org/http://www.w3.org/


206/305

206

SVG (or Scalable Vector Graphics) is a language written in XML that allows you to createvector graphics. Vector graphics were discussed in Chapter 4; they are similar to those generated byMacromedia Flash. As the name suggests, one of the great advantages with SVG is that thegraphics do scale and can therefore stretch and shrink with the device they are used upon.Fromlogos and diagrams to graphs and illustrations, SVG has a very bright futurealthough it islikely that a tool will generate the SVG code for you rather than you having to manually writethecode (as you will see in the next section).MathML is another XML language used for displaying complex mathematical equations thatarent supported by normal character sets and layout methods. Previously such equationshad tobe included in documents as graphics; this method has major disadvantages because itcannot beread by a screen reader or indeed an automated program for analyzing or collectingequations,and it cannot be reused in other documents as readily.The combination of XHTML for hypertext documents (consisting of text, images, links, tables,and forms)enhanced with graphics from SVG and mathematical and scientific equations in MathMLhelps create adocument type that can cope with the requirements of most documents.You can read more about this hybrid document type at http://www.w3.org/TR/XHTMLplusMathMLplusSVG/. It does assume you know the three constituent languages, butonce youdo, it is very simple to put them together into a hybrid document type.You could therefore have a document containing a description of a complex equation, withdiagrams anda logo in SVG. The following example uses this hybrid document type to create a documentcontainingparts of the MathML and SVG languages. Unfortunately they are both large topics in their ownright, so Iwill only highlight where the markup from each of these languages is (rather than trying toexplain eachlanguage).This document uses XHTML 1.1 as the host language and then extends it with MathML and SVG,although it is possible to use either MathML or SVG as the host language. For example, youmight makeSVG the host language of your new document type if your documents mainly consist of SVGgraphics but you want to include just a few modules from XHTML markup.First take a look at the document in full; then I will point out the different parts of the document(ch13_eg03.html).


207/305

207

"http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">An XHTML Document Containing MathML plus SVGA Hybrid Document Type

This document will contain a mix of XHTML, MathML and SVG. Unfortunatelyit will not work in many browsers, but you can try it out in theW3C's Amaya.
x+13
This is a very simple equation, but if you look at the source of thecode, you will see that it is written in MathML.

Finally, here is a rectangle in SVG.
You can see what this page looks like in Figure 13-2 (which shows the W3Cs Amayabrowser).


208/305

208

Figure 13-2The first point to note about this example is that it uses the XHTML plus MathML plus SVGDTD in theDOCTYPE declaration:On the root element, however, it indicates the XHTML namespace. Remember that this is thedefaultnamespace, and unless another element declares itself to be from another namespace thenthe elementsbelong to the XHTML namespace.

After the , and a title and paragraph, you see the element. This part of thedocument contains MathMLand the element (just like the element) indicatesthatits content is written in MathML. The MathML namespace on this element also applies to thechildrenof this element. So, you can see the , , , , and elementsbelong to thisnamespace.x


209/305

209

+13

As you can see from Figure 13-2, this inserts a mathematical equation.Soon after this in the document is the element with the SVG namespace, whichcontains a element that is part of the SVG namespace and draws the simple rectangle with roundedcorners.This kind of hybrid document and the ability to extend a technology using modules of alanguage makesit much easier to create languages that will fulfill the needs of future clients using existingtechnologiesand therefore will make it easier to develop for these devices.

XHTML Coding

The first thing you need to know about changing over to XHTML as the new standard is thatthere really isn't much new to learn. No new tags or attributes have been added into your repertoire, likeHTML 4(although a few have been deprecated); this is just a move towardsgood, valid and efficient coding . XHTML documents stresslogical structureand simplicity,

and use CSS for nearly all presentational concerns. It just means you have to change the wayyou write code. Even if you always wrote great code before, there're a few new practices youneed to add in.What's even more quality about it though, is that a page written entirely in XHTML will stillwork fine in the current generation of browsers, so you shouldn't have any problems migratingyour site across.

XML Declaration

An XML declaration at the very top of your document defines both the version of XML you'reusing as well as the character encoding. It is recommended but not required; as a few old

browsers will choke on a page that begins this way. For this reason, I advise against using thecorrect line:and instead using a meta tag in the head of your document. If you're using Unicode,

And if you're using the more common ISO-8859-1 encoding, use
http://www.yourhtmlsource.com/accessibility/html4explained.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/stylesheets/http://www.webstandards.org/learn/reference/prolog_problems.htmlhttp://www.webstandards.org/learn/reference/prolog_problems.htmlhttp://www.yourhtmlsource.com/promotion/metatags.htmlhttp://www.unicode.org/http://www.yourhtmlsource.com/accessibility/html4explained.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://www.yourhtmlsource.com/stylesheets/http://www.webstandards.org/learn/reference/prolog_problems.htmlhttp://www.webstandards.org/learn/reference/prolog_problems.htmlhttp://www.yourhtmlsource.com/promotion/metatags.htmlhttp://www.unicode.org/


210/305

210

XHTML DTDs

Whether you use the XML declaration or not, every XHTML documentmust be defined assuch by a line of code at the start of the page, and some attributes in the main tag,which tell the browser what language the text is in. The opening line is theDTD (DocumentType Declaration) . This tells your browser and validators the nature of your page.

A DTD is the file your browser reads with the names and attributes of all of the possible tagsthat you can use in your markup defined in it. Newer browsers will usually have the latestspecs written into their DTDs. The official XHTML Strict DTDis available for you to attemptto read. Declare it by putting this at the very top of your code:

That DTD is the one you use if you're committed to writing entirely correct XHTML code.Strict XHTML dispenses with a whole lot of presentational tags and attributes , and isindeed very strict.If you choose to use it, you're going to have to become close friends with the W3C validator .You won't be permitted to use the font tag at all, nor will attributes like width and height beallowed in your tables. You won't be able to use the border attribute on images, and will haveto use the alt attribute on all images if you want to validate. You get the idea almost allpresentational attributes are restricted in favour of wider CSS utilisation, so unless you knowyour stuff in this regard, it'd be best to use XHTML Transitional below.If you're going to hover between HTML and XHTML use the next DTD, which is a bit looser,and if you're putting together a frameset page, use the last one.

Most people will opt for XHTML Transitional, as changing straight to Strict can be a dauntingprospect. If you feel you're able to work within Strict's constraints, by all means go for it.A correct DTD allows the browser to go into standards mode , which will render your pagecorrectly, and similarly across browsers. Without a full DTD your browser enterscompatibility, or quirks mode, behaving like a version 4 browser, including all of their associated quirks and inconsistencies. Also, these declarations are all case-sensitive , sodon't change them in any way.Finally, you need to define the XML Namespace your document uses. Don't stress about this

it's simply a definition of which set of tags you're going to be using, and concerns themodular properties of XHTML. It's set by adding an attribute into the tag. While we'reat it, we specify the language of our pages too. Modify your tags to this:
http://www.yourhtmlsource.com/directory/validators.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://validator.w3.org/http://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/http://www.yourhtmlsource.com/directory/validators.htmlhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdhttp://validator.w3.org/http://www.yourhtmlsource.com/stylesheets/advancedcss.htmlhttp://www.w3.org/TR/xhtml11/http://www.w3.org/TR/xhtml11/


211/305

211

XHTML Coding Practices

And now the moment you've been waiting for the different styles of coding used by anXHTML author compared to the old HTML methods. You shouldn't have many problemsadopting these new techniques, so long as you work carefully. It should be noted, even if it isan obvious point, that you really must hand code to be able to write valid XHTML. No currentvisual editor comes close to the compliance required.sourcetip: Even though your code is changing, your filenames won't have to you end your files with .html as always.1. Tags and attributes have to be lowercaseWhereas before it used to come down to preference whether you used or , now all of your tags and attributes have to be in lowercase. This is because XML is case-sensitive i.e.a tag in capitals is a different tag to one in small letters.2. All tags must be closedNow all of those once-optional
and tags are essential for your XHTMLdocuments to validate. Even empty elements like img , hr , and br must now be closed. You
can use a standard forward-slashed end tag, or just add in a forward slash to the end of thetag.
or
It's recommended that you use the former method here, and leave a space before the slashso older browsers aren't confused. They'll just ignore the trailing slash as an unrecognisedattribute.3. Documents must be well-formed'Well-formedness' is a dream that you were meant to try and make real from the start, butmany coders write badly-syntaxed code. You have to open and close tags correctly inXHTML, and nest them properly.Bad:

My coding is bad
Good:
But my coding is good
Remember the simple rule you should have been taught at the very start: The first tag youopen is the last tag you close.4. Attribute values must be quotedBack in HTML you could leave out the quotes on a number value, likeHEIGHT=3 , but now allvalues have to have quotation marks around them, so that would become height="3" .5. Attribute MinimisationSome HTML tags had one-word attributes, likeHR's NOSHADE. You can't use these anymore,and must add the attribute in as its own value, like so:
Any browser compatible with HTML 4.01 shouldn't have a problem with markup like this.6. Internal LinksInternal linksin HTML were made using a combination of the tag and the name attribute.In XHTML, to go along with XML, you use theid attribute to make these links instead of thename attribute. For a while you should probably include both so that your links still work on
http://www.yourhtmlsource.com/text/internallinks.htmlhttp://www.yourhtmlsource.com/text/internallinks.html


212/305

212

older browsers, but this will be the method used in future. Thename attribute has beendeprecated.link
Since all tags can take the id attribute, you can now make links to any element on your page.Most helpful if you add the link to a heading or specific paragraph.7. Alternative text in imagesWhile it has always been good practice to add the alt="..." attribute to your images, nowyou must add some alternate text to every image on your page. If your image is purelydecorative you can give it a nullalt attribute with a space:You could also try adding thetitle="..." attribute to as many elements as possible. It's agood accessibilityaid, especially on links.8. Ampersands in URLs
Ampersand characters are frequently used in page addresses to carry variables, like in PHP.When coding these addresses into your XHTML, you must escape them using the entity value & . They'll be displayed as ampersand characters (&) on screen, of course.linkbecomeslink 9. Content must be wrapped in a block-level elementIn XHTML Strict, when you add text to your page, you cant add it directly into thebody element. All text needs to be within a suitable containingblock-levelelement, such as a p , aul or a div .

As you should always have done before, be sure to validate your document to certify thatthere are no errors. There is absolutely no point in writing XHTML if you don't make sure it isfree of mistakes. The online W3C validator will check your code for mistakes and give you afull report back. Once you can understand its occasionally unhelpful error messages, it is anexcellent utility. Make use of it.Why Use XHTML if Content or Sections of Sites Are Different? Why then, you may well ask, has there been so much talk of writing pages so that they can beaccessed byall kinds of different devices if you are likely to want different content? It is not only the serviceand textthat may differ from device to device; obviously, a small device will not handle logos that are500 pixelswide or tables used to lay out pages designed for a computer screen, so the pages will bevery differentfor different devices. So, why even bother developing content that can be used on differentdevices and
http://www.yourhtmlsource.com/images/furtherattributes.htmlhttp://www.yourhtmlsource.com/accessibility/contentaccessibility.htmlhttp://www.yourhtmlsource.com/text/specialcharacters.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://validator.w3.org/http://www.blackwidows.org.uk/resources/tutorials/xhtml/common-errors.htmlhttp://www.yourhtmlsource.com/images/furtherattributes.htmlhttp://www.yourhtmlsource.com/accessibility/contentaccessibility.htmlhttp://www.yourhtmlsource.com/text/specialcharacters.htmlhttp://www.yourhtmlsource.com/accessibility/logicalstyle.htmlhttp://validator.w3.org/http://www.blackwidows.org.uk/resources/tutorials/xhtml/common-errors.html


213/305

213

why bother separating style from content? The answer to this is that a lot of larger sites do nothand-codepages in the way you have been doing in this book.

Also, as has already been mentioned (more than once), its far easier to learn a new languageif it is basedon the same elements as one you already know. If you want developers to adopt a newdocument typequicker, then knowing parts of the language already will make it easier to learn. It can alsohelpmanufacturers of new devices because they will automatically have a base of developers whocan supplycontent for their platform; and this is important because one of the reasons whyWAP did notachievebetter success in Europe was the lack of good mobile content that was helpful to users.Database-Driven Web SitesWhen you start to look at developing larger sites where the content changes regularly, suchas with newssites, you do not want to hand code every XHTML page. Rather, you will put your content in adatabaseand then files on the Web server will create pages for you; this is known as a database-drivenWeb site .Database-drivenWeb sites became very popular in the late 1990s with the advent of what areknown asserver-side scripting languages such as ASP (Active Server Pages), PHP (Personal HomePages), and JSP(JavaServer pages).The ability to store the content ofWeb pages in a database and to then access thisinformation using

scripting languages on the server meant the following: It was far easier and quicker to create and maintain content for the Web. If you werepublishingarticles every day, you would not have to manually code an HTML page each day. So,database-driven sites allowed you to enter the text (and markup) into an HTML form and thenadd that content to the database. When visitors wanted to access the story, a template pagewouldbe used to display it in the correct way for that device and the content would fit inside thepage.Different people could add information to the database using the same forms, without all of them

having to learn how to code the pages in the same way. It was possible to create pages that specifically answered users queries, such as whattime trainsgo from London to Edinburgh on Sundays around 12:00. Users enter details of theinformationthat they want to know into a form and this information is turned into something known as adatabase query. The database then returns information relevant to that query and it isformatted in


214/305

214

a template page and returned to the user. After all, when you are creating a Web site to showatrain timetable you would not want to create a page for every possible journey from and toeverystop on the line.

To get a better sense of what I mean, take a look at Figure 13-3. In this diagram you can seefive steps:

Figure 13-3A visitor to the site enters the URL http://www.example.org/news/news.asp.An ASP file on the server asks the database for the headline and summary of the last tenitems of news along with a unique number for that article (each article in the database would have aseparate article). The database returns these items to the ASP file. The ASP file puts the information from the database into an XHTML template that is servedbackto the user.When the user wants to see one of the articles from the news, he or she clicks the link to thatarticle andthis will request the ASP page that is the template for all articles; here is what happens whenthe user clicks the link requesting the article page (see Figure 13-4):User requests http://www.example.org/news/article.asp?Article_ID=1234 . This isasking for the article.asp page, and is saying that the user wants to view article number 1234. The article.asp page on the server asks the database for the content of article 1234.

The database returns the information for article 1234. The article.asp page formats the page in XHTML using a template.


215/305

215

Figure 13-4To understand this a little better, have a look at the following table, which shows how thearticles mightbe stored in a database. Relational databases store information in tables, which are just likespreadsheetsor the tables created in Chapter 5. For example, a news site may use a table like this one for its articles(you have to imagine that this table has lots more articles and that the full title, summary, andtext of thearticle is in the table cell).ID Title Summary Text Author Date Img Section57549 Soap Star GuiltyIn a longrunningSince June2001TonyB.R.Tardy 1/5/04:08 TDraper.jpg Ents57550 Cure For Hayfever Dr.Clarence

A team of scientistsat T.G.Summers 1/5/04:08 Field12.jpg ScienceEach time a new article is added to the database it is automatically given a new ID, which is auniqueidentifier for that article. You can see from this table that this number increments by 1 for eachnew article.It is very important to note here how the content in the database can contain simple XHTMLmarkup. You


216/305

216

can see the element used and the start of an element. You will see more about thisshortly.So, when the user visits the news page for the site, the ASP file on the server would ask thedatabase totell it the ID, title, and summary of the latest ten articles and the database would return thesedetails. The

ASP page would then take the database results and format them as an XHTML page to thebrowser,which would allow it to be displayed as shown in Figure 13-5.

The page on the server has not only formatted the titles and summaries of the articles, but ithas alsogenerated links to the full story using the ID, which is a number that uniquely identifies thatarticle. So,each time a new article is added to theWeb site, rather than manually writing a new frontpage, the server asks the database for the ten most recent articles, which are then returned to the user.

As I will discuss in Chapter 16, learning a language such as ASP, PHP, or JSP is somethingyou might liketo consider when you are comfortable writing XHTML pages, but the concept here is veryhelpful tounderstand even if you cannot write your own database-driven site yet. Also, you can see howyou needto know XHTML before you can start developing a database-driven site because that is stillwhat isgetting sent to the browser.


217/305

217

Here is an idea of the XHTML code that the news.asp file might be generating(ch13_eg04.html):Channel 7 NewsChannel 7 NewsHome | News | Science |Politics | Entertainment | SportWeatherHeadlinesLorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc eleifend,erat id commodo placerat, nulla purus bibendum justo, in dictum orcimi vitae nulla. Nullam semper viverra nulla. Sed lacinia feugiat eros.
Maecenas ullamcorper ligula quis odio
Maecenas ullamcorper ligula quis odio. Donec pede massa, pharetrasit amet, accumsan a, iaculis egestas, lectus. Etiam ullamcorper elementum wisi.
Etiam et felis aliquet dui tempus sagittis
Etiam et felis aliquet dui tempus sagittis. Donec dapibus ipsum id leo.Integer est ante, imperdiet non, suscipit sit amet, varius a, sem. Integer lobortis wisi id erat.

All ten articles on this page would follow this same template: the headline is contained in alink to thearticle. This is then followed by the summary of the article.Similarly, rather than creating a page for each story individually, the article.asp page acts as atemplate for all articles and this page just requests the one article it has been asked to displayusing the IDto identify it. The actual story might therefore look like the page in Figure 13-6.


218/305

218

Figure 13--6

So, youve seen how the one page on the server can be used to generate different content onthe frontpage every time a new article is added without having to constantly rewrite the front page.

Also you haveseen how one template page can be used to control the layout of each article.Therefore, it should not be too hard for you to make the leap to the idea that the samedatabase can beused to serve content to a mobile phone. When users visit the mobile page for a site theymight just getthe headlines of the ten latest stories, and if they want to find out any more another page willdeliver them to the summary rather than the full article.The beauty of this approach is that you need to develop only template pages that generatethe content for each type of device from the same set of data in the database. These templates will governhow much of the content is shown to the user, how it is displayed, and even which style sheet should beused with thatpage. But the key to this approach is that the content, which is stored in the database, isXHTML. And if you want to serve content to a mobile device, it should only XHTML Basic for links andessentialformatting.


219/305

219

Figure 13-7 shows you a screenshot of a mobile phone simulator that is displaying theheadlines from thisnews site.

Figure 13-7This mobile phone simulator was created by Nokia. You can download it fromhttp://www.nokia.com (ch13_eg05.html):Channel 7 News7 HeadlinesLorem Ipsum Dolor


220/305

220

Mauris quis urna.Donec nisl elit, viverra in.

Again, all ten titles follow the same structure, with the title of the article being a link to thesynopsis andeach title being a separate bullet point.Note how XHTML MP uses the same XHTML namespace, but has a different public identifier and DTDspecified in the DOCTYPE declaration. The rest of the page just uses simple XHTML markup.Obviously, if the information in the database contained styling or formatting it would notnecessarily beavailable to all devices. By using only simple XHTML in the content that is in the database,and not usingfeatures such as tables to control layout, it really is possible to use the same content for several differentdevices. Furthermore, it means that the people writing the content need to learn only a fewvery basicmarkup elements in order to add formatting such as headings, bold text, and links to the site.So, the separation of the style from content and the use of common building blocks indifferent document

types make the content you write work on many more devices. And if someone comes up witha newdevice that accesses the Web tomorrow, you need only write a new set of templates to offer the whole of the site to that device. And knowing that the device uses a language based on XHTMLmodules your content, theres far less to learn in order to write the template.Transforming Pages Using XSLT I should briefly mention another technology that is being used to transform documents fromone XMLlanguage to another. This technology is Extensible Stylesheet Languagebut do not be

deceived by theuse of the word stylesheet in the name; it is not like CSS.Some people use this technology to create different versions of a page from the one sourcepage. The partof this language that is used to help serve content to different devices is XSLT, ExtensibleStylesheetLanguage Transformations. This allows you to take each element from the source documentand indicate


221/305


222/305

222

probably contain many, many rules, so you can see that XSLT can get quite complicated. If you want tolearn more about XSLT, you should pick up a copy of Beginning XSLT 2.0 by Jeni Tennison.You should also note how this example demonstrates the importance of closing each elementand nestingit correctly; if the elements in the document you are going to transform are not closed then theXSLTprocessor will not be able to tell where a corresponding closing element is for any givenopening elementand will not be able to transform the page.Complementary Services for Different DevicesThe mobile phone is the other extreme from the desktop PC in terms of capabilities. Abrowser in a fridgeor microwave would not have restrictions of power because they both run from the mains.They can alsohave larger screens than a mobile phone, but a user might want them to be able to read textand respondto voice commands. After all, if youre in the kitchen you might not be able to look at thescreen if you areconcentrating on your own ingredients and your hands might be covered in food that youwould notwant to get on your browser or a pointing device.Similarly, a voice browser or book reader can handle long pages much better than a mobilephone andwould be capable of reading large amounts of text to a user. While it does not require anyvisualformatting, it could make use of the various aural properties that are in CSS2 (which I did notcover

because they are not supported by any major browser yet), allowing you to control the type of voice andits position between stereo speakers (to the left or right).So, while there are likely to be a huge range of devices that will be able to access theInternet, not everydevice will be used to access all sites and not all sites will suit all devices. (How many peoplewouldwatch a movie on a microwave or mobile phone?) You certainly wont want to access all thefeatures of every site on every device.Some of the best sites that cater to different devices at the moment focus on different aspects

of the site for different platformsand these tend to complement each other. For example, a news site mayoffer youheadlines to your mobile phone, and maybe a synopsis of the story if it was requested, but if you want toread the full article you have to go to the site. A classified ads site may send a message toyour phonewhen a new ad is placed that contains a keyword you asked it to watch for, but if you want tobrowse ads


223/305

223

you are expected to use a desktop PC. Alternatively, a music site may just feature a smallsection of thesite for access by mobile phones that allows users to download ringtones whereas a desktopversionmight allow you to download whole songs, create your own compilations, and so on.More to Come. . .

In the future, you are likely to see different applications and complementary uses of technologies; acookery site may make ingredients for recipes available to smaller devices (so you can getthe rightingredients) but then show the recipe only on a larger screen. A browser in a fridge mightrequire a newvariation on XHTML that supports SVG so that you can see a graphical representation of howlong foodwill last or a chart of nutritional content of a meal.The content that is served is not a one size fits all. When you are developing for differentdevices youneed to bear in mind what your audience will be doing and what users will want to find outusing eachtype of device. Different media and the aspects of varying devices can complement eachother. Here youcan see how the use of a database to contain the content is very powerful. In order for this towork,however, any markup that you have in the database or that you want to be transformed usingXSLT, thoseemphasized words and links, must be written in XHTML and should not contain any styling.SummaryIn this chapter you have seen a glimpse of the future of XHTMLhow it has been

modularized (or splitup into sections) for development of other languages. This is vital because, as the examplewith mobilephones demonstrated, if HTML had not become more flexible it would no longer have beensuitable for the different types of devices that access theWeb.We might have been faced with thenecessity of learninga new language for each type of device. Not only would this have been more work for developers, but itwould also mean that less content was available for the devices because it would be harder todeploy.

494TEAM FLYModularized XHTML and Serving Multiple DevicesThe use of the different abstract modules of XHTML as building blocks for other languagesalso meansthat documents can easily integrate features of XHTML with other languages such as SVGand MathMLto create documents that are very sophisticated. Rather than relying on images to carryequations or logos


224/305

224

it is possible to use codewhich can therefore be read and processed by other applications.The lessons of the mobile phone industry are valuable ones as we look to the future. Thosedevelopingsites for mobile devices today are still dealing with the legacy of solutions that came alongbefore XHTMLMP, and while XTHML looks set to replace languages such as WML, these languages serveas a reminder to us of the benefits of following standards set by organizations such as the W3C.Toward the end of the chapter you also had a brief overview of two ways in which content canbe servedto different devices. While you would need to learn another language to collect your contentfrom adatabase, or to perform transformations on your documents, you can see why it is importantto learn tocode correctly from the start and how your content can be re-purposed for different devices.Before youstart learning these languages, however, you are about to learn about JavaScript in the nextchapter.ExercisesThe answers to all of the exercises are in Appendix A.1. Take a look at the XHTML page for a cookery site shown in Figure 13-8.Figure 13-8

Figure 13-8The following is the code for this page. Create a cut-down version that shows only the nameand


225/305

225

ingredients in XHTML MP that a shopper can see on his or her phone in the supermarket. Youmight want to leave on the preparation time and cooking time, and as a hint, all of the elementnames are still available in XHTML MP.Roving Recipes - Summer ChickenSummer Chicken

This recipe is for a light summer meal with strips of friedchicken breast on a base of saffron cous cous with steamedvegetables and pine nuts.
Preparation time10 minutesCooking time15 minutesServes2
Ingredients200g chicken breast200g cous cous2 stems saffron50g raisins50g pine nuts50g sweet corn1 zucchini

1 green pepper1 lemon2 teaspoons olive oilFresh coriander496Modularized XHTML and Serving Multiple Devices


226/305

226

CookingPrepare the dressingJuice the lemonAdd in the olive oilAdd in finely chopped corianderAdd raisins to the cous cous and place in a heatproof bowlthat you have a lid forBoil 300ml of water and add to the bowl of cous cous and cover;then let it stand for 15 minutesSteam pepper and zucchiniAdd chicken to frying pan or wok on high heat for 5 minutes,turning regularly so all sides are brownPut pine nuts and sweet corn in the pan with the chicken, turndown heat, and leave for a further 2 minutes, stirringoccasionallyRemove chicken from pan and place to one sideAdd zucchini and pepper to the panLoosen the cous cous with a fork and add to pan and stir for 1 minuteServe cous cous on plate, place chicken on top, and pour over dressing

Mobile

Now that smart phones are becoming common, more and more visitors are going to come toyour site using their phones, viewing pages on displays with different dimensions than thetraditional desktop or laptop monitor, and interacting with your site using touchscreens andon-screen keys and buttons rather than mice and keyboards. Making sure your site works for these users is not difficult if you know the issues involved.

Early Mobile Browsers

Back before mobile browsers were good, many phones came with web browsers with verylimited capabilities. There have been a number of sea changes over the years as wirelessweb access has evolved. Firstly, back in the late 1990s we had a technology called WAP(Wireless Application Protocol), which was used to send specially-constructed webpages to aphones browser. Those pages had to be written in a new language separate to HTML calledWML (Wireless Markup Language). This meant that all pages had to be coded a second timeby the author to make them available to phones, and in a language much more limited thanHTML. This, frankly, was rubbish.


227/305

227

Phone technology and mobile browsers made prog