XHTML et CSS2

1. Démonstration avec le site css Zen Garden et avec un site de la formatrice
2. Comparaison entre le code source d'une page en vieux HTML et du XHTML

1. Emplacement de la feuille de styles et emplacement du contenu.

1. Stylisation des liens A d'une page (color, background-color et text-decoration)

1. Exercices en stylisant les fontes de toute la page HTML : Styliser le texte du BODY, celui des paragraphes P, des liens A, des titres H1, H2 à partir de la feuille de style en haut de la page.

1. (font-family, font-style, font-weight et font-size) : démonstrations et exercices.

1. (text-align, text-indent, etc.) : démonstrations et exercices

1. Insister sur le fait qu'on utilisera plus jamais ces balises <font><b><i><u>
2. Appliquer localement à un mot, un fragment de texte, un style différent du style de la page (avec <SPAN> et l'attribut style). Première approche de la cascade.

1. Documentation en ligne (www.w3schools.com)
2. Les feuilles de propriétés CSS (distribuées en début de classe)

1. Les bordures seront utilisées comme marqueur pour les exercices subséquents
2. Les étudiants plus avancés pourront appliquer des styles plus spécifiques à chaque bordure et tester l'importance de l'ordre des déclarations.

1. Utilisation de texte Lorem Ipsum pour tester le remplissage.

1. Aujourd'hui on utilise { position :relative; }

1. Période de Questions.
2. Choix d'un exercice de leur choix personnel, tenter de reproduire une boite div parmi celles illustrées.
3. Récapitulatif de ce qu'on a vu dans la journée.
4. Retour des participants.

1. Métaphore : Site de nouvelles, éléments du menu,
2. Règles à suivre pour inventer nos étiquettes :
   • Pas d'espace dans le nom, étiquette commence par une lettre, etc.
   • Choisir une étiquette SIGNIFICATIVE.

Récupérer notre exercice précédent (style dans la balise) et attribuer une étiquette ID à la balise puis déplacer le style dans l'entête de la page.

1. Syntaxe pour poser l'étiquette ID dans la balise
2. Syntaxe pour référer à cet ID dans la feuille de style et attribuer des styles à cet élément particulier.

Inscrire une série de liens dans la page, attribuer une classe à la moitié d'entre eux.

1. Syntaxe pour poser les étiquettes sur les balises
2. Syntaxe pour référer à cette classe dans la feuille de style

Faire une page avec plusieurs DIV : une pour l'entête, d'autres pour une série de nouvelles (site éditorial).

1. Appliquer les styles directement dans les balises.
2. Observer la redondance des styles pour les différentes nouvelles.
3. Factoriser avec une ou des classe(s)

• ID = élément unique : une seule en-tete, un seul pied de page, une seule annonce spéciale, un seul cadre 'pensée du jour', etc. Idées des participants.
• Classe = série d'éléments similaires : liste de nouvelles, liste de menus, liste de fiches-pédagogiques, liste de fiches signalétiques, etc. Idées des participants.

1. Règle sémantique : élément unique ou plusieurs de ce type dans le contexte
2. Règle informatique : attributs de styles spécifiques ou identique à d'autres éléments
3. Corriger l'exercice sur les nouvelles en fonction de ces nouvelles connaissances (l'en-tete est étiquetée par un ID).

1. Toujours utiliser la coloration des bordures ou du fond de la div pour les localiser
2. Ne pas utiliser top et left dans un premier temps afin d'observer le résultat

1. Normalement {position :absolute;} s'utilise avec positionnement alors que {position :relative;} s'utilise sans positionnement explicite.
2. Attention : ne JAMAIS utiliser top pour créer un espacement entre les éléments relatifs ! Respecter la sémantique : utiliser margin. Illustration.

1. Illustration avec une page simple. Dessin de l'arbre hiérarchique.
2. Illustration avec le tableau et les listes. Dessin de l'arbre hiérarchique.
3. Illustration avec des liens A dans une DIV. Dessin de l'arbre hiérarchique.

1. Inclure le bon DOCTYPE dans le haut de la page. Désormais on travaille avec le DOCTYPE, sinon le navigateur fonctionne en mode dégénéré (il est perdu, il ne sait pas en quelle langue est écrit le document !).

1. Ce qu'est le XML
2. Ce qu'est une DTD.

1. Les liens dans tous les paragraphes
2. Les cellules des tableaux

1. Série de DIV positionnées relativement les unes aux autres dans une DIV contenant qui elle est positionnée de façon absolue.
   • Utiliser une classe pour la série de DIV relatives (classe nouvelle).
   • Utiliser un ID pour le cadre.

Exercice progressif à partir de l'exercice précédent: faire apparaitre la barre de navigation 'ascenseur' en stylisant le contenant : limiter sa hauteur, faire déborder le contenu (lipsum.org) et spécifier le { overflow :auto; }

Créer une liste de fiches signalétiques, avec la photo et les roles positionnés en absolus dans une div 'fiche' qui est elle relative aux autres fiches, le tout dans un contenant dont l'overflow est contrôlé.

1. Exercice avec des styles spécifiés par la feuille externe, la feuille embarquée et directement dans la balise.
2. Explication de la priorité par l'ordre d'application (petite histoire d'une balise illustrée... qui raconte l'application des styles par le navigateur dans l'ordre des sources)

1. Exercice: différencier le style en fonction de l'impression désirée. Terminer en devoir à la maison.
2. Question: doit-on imprimer le contenu avec ou sans sa décoration ?

   Réponses des participants.

1. Ceci ne se restreint normalement pas aux liens, les effets hover devraient être utilisables sur n'importe quel éléments.
2. Limitations actuelles de support navigateur.

1. Structure sémantique d'un menu : une liste de listes.
2. Cacher les sous-listes lorsque ce n'est pas hover. Montrer les sous-listes lorsque la souris survole l'élément de la liste parente.
3. Utiliser classes et id de manière appropriée
4. AVANCÉ : Inclure le script IE7 pour que ca fonctionne aussi dans IE. Attention au chemin.
5. AVANCÉ : Distinction entre { display :none; } et { visibility : hidden; }

1. AVANCÉ : notion d'attribut CSS propriétaire qui devrait toujours être précédée par un préfixe (et qui devrait également être toléré par les navigateurs concurrents).

1. Créer un formulaire FORM avec des INPUT de différents types (TEXT et SUBMIT au minimum), ainsi que des TEXTAREA, des SELECT.
   • Obligatoire : Attention à regrouper les inputs dans le même formulaire (tous les input doivent être enfants du même FORM). Attention aux wysiwyg !
   • Conseil : regrouper un input et son 'énoncé visible' avec une div d'une classe particulière
2. Différencier l'apparence de l'input TEXT, de l'input SUBMIT et de l'input checkbox avec le pseudo-sélecteur.
3. AVANCÉ : Contrôler la disposition des éléments du formulaire en les incluant dans une liste.

   Regrouper les RADIO et les CHECKBOX d'une même question dans une sous-liste. Tenter de contrôler le flux des éléments avec {display:block; } ou {display:inline; } et avec {float; left; } et {clear:both; } Styles de liste.

1. Règle d'or : ne jamais compter sur les défauts du navigateur.
2. Truc pour éliminer les marges automatiques de la page et des éléments comme les listes. Utiliser le sélecteur universel * {margin: 0; padding: 0;}
   • Avancé : Pourquoi le sélecteur universel et pas le BODY contenant tout ?
3. Introduction de float : pour intégrer une image dans un texte. Dangers du float. Comment arrêter la 'flottaison'.
4. AVANCÉ : Capsule théorique sur les techniques pour centrer un élément dans une page dont la largeur est inconnue.

1. On télécharge le HTML de la page et les images utilisées.
2. On tente de reconstituer le visuel en recréant la feuille de style.
3. On fait attention à respecter la séparation sémantique/décoration. Par exemple : une image doit-elle être insérée avec le HTML <IMG> ou avec une DIV qui a une background-image ? Selon si l'image est une décoration ou fait partie du contenu affiché.
   • Parfois, l'image doit se changer par un effet hover (image de menu). Pour que cela soit possible en CSS, elle doit être en background.
   • Pourquoi le HTML de la page inclut le texte des titres et la feuille de style cache ce texte et le remplace par une image de fond ? Réponses : le référencement. La séparation contenu-décoration. La multiplicité des stylisations de ce HTML : certains styles utilisent le texte directement, sans le remplacer par une image. Utiliser la descendance pour spécifier comment cacher le texte. (Un SPAN est dans le H1)

1. Démonstration d'un conflit possible dans la stylisation des menus du site css Zen Garden.
2. Comment éviter un tel conflit.
3. AVANCÉ : Règles de résolution des conflits ou comment le navigateur choisit entre deux déclarations conflictuelles.

1. Exercice : Faire apparaître en texte le nom d'une région géographique dans une boîte DIV cible tout en promenant la souris sur la carte (une image avec des régions délimitées avec MAP et AREA)
2. Exercice: faire apparaître la description texte d'un personnage (des <IMG>)

1. Exercice : correction du bug CSS pour la {position:fixed; } avec IE

1. Exercice : Faire apparaître une image selon l'élément du menu survolé.

   Reproduire l'effet splash démontré (feedback visuel délocalisé). Utiliser une fonction qui reçoit l'ID de l'image à changer et le nom de la nouvelle image. Réfléchir à une technique pure CSS pour accomplir le même exploit.

1. Exercice : Petites boites que l'on déplace à la souris.