Nous avons vu mardi soir comment était composée une page WEB et découvert les langages HTML et CSS, chacun ayant un rôle bien distinct. Plus qu’une plongée dans le détail de ces langages, nous avons choisi d’aborder les principes, les briques utilisées pour bâtir sa page WEB.
Méthodologie
HTMLisation d’un texte
L’idée est de partir d’un simple texte structuré, en l’occurrence les premiers articles de la Déclaration Universelle de Droits de l’Homme (DUDH pour les intimes) et d’en faire une « jolie » page WEB. Pour ce faire nous avons ouvert ce même fichier texte dans un éditeur, et dans le navigateur.
Au départ, cela se passe très mal, le navigateur affiche un gros paquet qui a perdu toute structure, les caractères sont bizarres…
Le but sera alors d’ajouter un par un tous les éléments nécessaires pour faire la mise en page HTML. A chaque modification dans l’éditeur, on enregistre le fichier puis on le recharge dans le navigateur pour voir les effets. On aborde ainsi en douceur le rôle des balises, de leurs attributs, et des styles.
Au final on arrive à une page WEB valide et « joliment » mise en page 🙂
Analyse d’une page et de son style
Nous avons ensuite examiné un autre exemple d’une simple page « invitation.html » présentant l’atelier en question. Pour cette page, j’ai un fichier de style associé dans lequel j’ai tout mis en commentaire, puis on a rétabli les styles un par un et discuté des effets sur les éléments de la page, et de la façon dont les éléments sont affectés, « ciblés ».
Nous avons insisté sur une notion essentielle :
- le HTML décrit le contenu et sa structure ( titres, paragraphes, listes à puces, liens, images, … )
- le CSS vient mettre en forme ces éléments ( couleur, fond, marges, taille …) grâce à un ciblage précis ( balises, identifiants, classes )
Je ne vais pas résumer tout ce qu’on a vu, ce serait trop long, par contre je mets à disposition de qui pourrait être intéressé les fichiers que j’ai préparés pour asseoir ma présentation :
- les fichiers étapes de la mise en HTML de la DUDH. Le fichier dudh.html contient le texte brut de départ.
- le code de la page WEB « invitation.html »
- la méthode suivie
Tout cela est disponible sur framagit sous forme de dépôt Git.