now with added Masterweb and IB Geek Girl

spider web Ecanus•net :: Tutorials

Tutorials

These aren't really full blown tutorials – more quick 'n' dirty guides to doing stuff that might save you some time. Click the links below to see them.

Moving from HTML to XHTML

Why move from HTML to XHTML?
  • The web's moving towards XML and moving to writing well–formed, valid XHTML pages is the easiest way to begin the transition. If you know your way round HTML, XHTML's not that much different – all it takes is learning a few simple rules of XHTML .
  • Cleaner code. Presentation is separated from content. Using XHTML, HTML tags are once again used for their original purpose as the language of the structure of the web. Moving to external CSS stylsheets can have significant benefits for load times (less code cluttered up with style information), and for maintenance – want to change all the <h3> headings to cerise pink on an orange background? No problem (until the web style police catch up with you!) – change it once in the CSS and it changes all those tags on all your pages!
  • more logical markup
  • Increased interoperability – because the content and the styling is separated it's easy to transport XHTML documents to different devices including wireless and assistive devices, and format them in the most suitable way, and because XHTML makes you follow the rules it can help avoid some problems that break pages in traditional browsers too.
  • Accessibility – in playing by the rules and sticking to the standards, XHTML documents are more accessible in the widest sense of the word – improved accessibility for those with disabilities and towards internationalisation and interoperability – the ability to use the same markup for a range of web–enabled devices.
  • Future–proofing – when the new version of XHTML becomes a recommendation, XHTML 1.0 documents will be easily upgradeable.
  • New browsers support XHTML and it's features – but it's backwards compatible as well.

XHTML won't break sites – it's backwards compatible, and any browser that understands HTML 4.01 will understand XHTML 1.0 Transitional

I like the sound of this! How do I do it?

Basic rules of XHTML:

  • Use the appropriate <!DOCTYPE ...> – it ain't valid if you don't!
  • All tags and attributes must be lowercase, so <INPUT TYPE=...> becomes <input type=...> (including <html> and meta tags)
  • Properly nest tags by closing tags in order: e.g. <b><i>Bad Nesting</b></i> becomes <b><i>Good Nesting</i></b>
  • Don't nest block element tags within inline tags: <font size="2"><table><tr><td>table text</td></tr></table></font>
  • Close empty tags and put a space before the slash: <br> becomes <br /> and <hr> becomes <hr />
  • End all non–empty tags: <p>paragraph text = WRONG!...<p>paragraph text</p> = RIGHT!
  • Quote all tag attributes: <input type="hidden" name="set" value="go">
  • Don't put comments around style and script elements
  • Don't use < or & or ]]> or –– in style or script elements
  • Encode '&' in URLs or other attribute values
  • Make sure there are no line breaks or multiple space in attribute values of tags: <img src="image.gif" alt="this is an image."> WRONG! ...<img src="image.gif" alt="this is an image" /> RIGHT!
  • Use name and id together: <form name="form" id="form">
  • Use <q>, <dd> & <blockquote> correctly, not to indent.
  • Use <ol>, <ul> and <li> to mark up lists.
  • Use <h1> to <h7> to show document structure.

Empty Tags that require closing

  • img<img src="image" alt="0" />
  • <br> – <br />
  • input<input name="phone" size="25" />
  • meta<meta keywords="sdf" />
  • hr – <hr />

Next – tags, tags, and more tags!

Next page