Prendre la première page du journal de la journée (Presse, JDM, Devoir) et en faire une page Web Le fait que la sémantique (titre, paragraphes, images, liste) s’applique bien à journal pourrait faciliter la compréhension des exemples.

Chapitre 1 : Introduction et Préparation

Retour sur l’évolution des standards Web

• Le début du Web, HTML et HTML+
• Netscape et javascript
• La guerre Netscape vs Microsoft
• Création du W3C
• HTML 3.2
• Problématique de maitenance : séparation présentation /structure / comportement
• CSS 1
• Le web sémantique
• XML
• HTML 4.01, XHTML 1.0, CSS 2.1
• La suite : XHTML 1.1, XHTML2.0, SVG, CSS 3, etc

Les standards W3C et le développeur Web

• Avantage : présentation /structure / comportement
• Avantage : code plus lisible
• Avantage : intégration avec systèmes XML, IDE Java, etc
• Désavantage : Réapprentissage
• Désavantage : Manque de support outils / architecture technique (CMS, générateurs)

Choisir son standard et normes de développement

• Qu’est-ce que le DOCTYPE ?
• L’idéal : présentation /structure / comportement
• La réalité et le pragmatisme : compromis ou dialectique ?
• HTML ou XHTML
• Strict, Transitionnel ou Frameset ?
• Quand utiliser le transitionnel

Un mot sur l’architecture d’information

Chapitre 2 : Le (X)HTML

Structure d’un fichier (X)HTML

• La déclaration XML
• Le DOCTYPE
• Les balises et leur syntaxe
• Le
• Le , l’entête HTML
• Le métadata
• L’encodage de caractères (ISO-8859-1)
• Les fichiers « aide » js et css
• Le
• Le contenu : les entêtes
• Le contenu : paragraphes, images, sections, formulaires, tableaux, listes, etc
• Les entités :  
• Les liens
• Syntaxe et utilisation des liens
• Les différences entre HTML et XHTML, syntaxe et déclaration XML

Liens

Les types d’élements (X)HTML

• Note : (on le revoi dans le css, mais ici on en parle pour la structure, on ne note pas l’affichage visuel, visuel block ou inline))
• (texte, span)
• blocs (div, p, h*)
• listes (li)
• tableaux

Les spécificités du (X)HTML Strict

• Syntaxe des balises
• Syntaxe des attribut
• Structure (éléments inline doivent être encapsulé d’éléments block)
• Certains éléments de présentation dépréciés (comportement : target, présentation : font)

Structure et sémantique

• Qu’est-ce que la sémantique ?
• Construire ses pages selon l’architecture de l’information
• Identifier les titres (devient les h*)
• Identifier les sections (devient les div)
• Identifier les paragraphes de texte (p)
• Identifier les liste (menus, faq, etc)
• Identifier les tableaux
• Identifier les objets (images, applets, flash, activex)
• Autres éléments identifiables
• Attention: un tableau doit être un tableau, une liste une liste, etc
• Les attributs id et class

Pour aller un peu plus loin

• HTTP
• Mime Type
• L’encodage de caractères et Unicode
• Réflexion sur le comportement et à la présentation

Chapitre 3 : CSS

Création de la feuille de style

• Qu’est-ce que la cascade et comment en tirer profit.
• Styles inline, interne et externe
• link et @import
• Les media-types
• Différences entre DIV et SPAN (éléments blocs et éléments en ligne)
• Modes quirk et standard (Voir aussi doctypes)

Éléments, pseudo-éléments et sélecteurs

• Types, classes et identifiants
• Universels
• Descendants, enfants, siblings, adjacents
• Sélection par attribut
• Pseudo-éléments et pseudo-classes
  •  :link, :visited, :hover, :active
  •  :first-child, :first-letter, :first-line

Polices et Couleurs

• Tailles :
  • Absolues (points, pixels)
  • Relatives (%, em, mots clés)
• Couleurs :
• text-decoration
• font-variant
• text-transform
• font-weight

Mise en page avec des feuilles de style

• Modèle de boîte
• Positionnement
  • static, absolute, relative, fixed
  • float et clear
  • TRouBLe (Top, Right, Bottom, Left)
    • 1 = TRBL, 2 = TR-BL, 3 = T-RL-B, 4 = T-R-B-L
• margin et padding (différences)
• Utilisation des bordures
• Fonds et positionnement des fonds
• Display et visibility

Exemple: comment appliquer des styles à une liste

• Utiliser une liste comme menu de navigation

Pour aller un peu plus loin

• Trucs (hacks)
  • Bidouillage de boîtes
  • Bordures pour débugger
• Feuilles de styles orales
• Ressources
  • Eric Meyer
  • CSS Zen Garden
  • Tantek
  • Pompage et A List Apart
  • Alsaforums, webmaster-hub

Chapitre 4 : Les outils du développeur

Les validatrices

• W3C HTML Validator
• W3C CSS Validator
• HTML Tidy

Les extension Firefox

• WebDevelopper
• HTML Validator (avec Tidy)

Un exemple d’outil libre : nVU

Un exemple d’outil propriétaire : Dreamweaver

Chapitre 5 : Le mot de la fin

• Quelques exemples de site en ligne utilisant les standards
• Ressources générales développement standards (Alsaforum, etc)
• La suite : Applications Web
• La suite : XUL et XAML, WHATWG
• Le mot de la fin