The web, HTML and all that stuff Jan Henning Thorsen - YAPC::Europe::2008 - Copenhagen

Introduction - The web, HTML and all that stuff

  1. About me
  2. The web is messy
  3. Specification, specification, specification

Markup - HTML, XHTML, ...

  1. DOCTYPE
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    • IMPORTANT! At char 1, line 1
  2. Charset
    • Unicode is your friend
    • HTTP-header: Content-type: text/html; charset=utf-8
    • HTML: <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  3. Entities
    • &amp; = &
    • &lt; = <
  4. Inline garbage
    • <a href="foo" onclick="bah(.....)">link</a>
    • <h2 style="font-size: 12pt; color: red; line-height: ....">heading</h2>
  5. Bad tag! Bad!
    • Use standard tags - not browser specific, nor "old tags"
    • <font>, <blink> and <marquee> are evil
  6. Frames?
    • "Frames? They don't exist, forget you ever heard of them!"
  7. Validation

Cascading stylesheets

  1. How to include you styles
    • <link rel="stylesheet" type="text/css" href="path/to/file.css">
  2. Pixels (px) are not your friend: px doesn't scale!
  3. Box model

JavaScript, jscript, js...

  1. How to include your scripts
    • <script type="text/javascript" src="path/to/file.js"></script>
    • At the end of the document, if possible
  2. JS-lib / frameworks
    • jquery
    • mochikit
    • prototype
    • Yahoo User Interface
    • Dojo
    • extjs

Availability

  1. Test your site!
    • IE
    • Firefix
    • Opera
    • Safari
    • Cellphones..?
    • ...and lynx - or any other text based web browser
  2. Adobe flash
  3. CSS and Javascript
  4. Content is pri - not cool features

Tools

  1. Firefox
    • Firebug
    • Web developer toolbar
  2. IE
    • IE developer toolbar
    • Visual studio js-debugger
  3. Opera
    • Dragonfly