Durée: 3 séances
Lancement: 09.10
Rendu: 23.10
Contexte
Les balises HTML permettent de hiérarchiser un contenu, c'est-à-dire de définir des niveaux de textes, grâce à une série de niveaux prédéfinis. Cette hiérarchie comporte deux buts :
1. Donner une information méta aux (ro)bots de l’internet sur le contenu de la page, par exemple, aux robots crawlers des moteurs de recherches. Dans leur grand index, les robots crawlers sont chargés de référencer l’URL (*Uniform Resource Locator*) de la page web, ainsi que d'autres données lui étant associé : des mots-clés, un titre ou une description par exemple. Ces données sont spécifiées par le créateur de la page web grâce à des balises, qui donnent une information quant au type de texte qu'elles contiennent. En effet, sans l'utilisation de balise, les robots ne pourrait distinguer un titre, d’un paragraphe ou d’un mot-clé.
2. Hiérarchiser visuellement les informations pour le lecteur de la page web. Par défaut, à chaque balise du corps de site correspond une mise en forme graphique élémentaire, légèrement différente selon les navigateurs et les systèmes d'exploitation. Les webs designers retirent ce style par défaut grâce à une série de commandes CSS rassemblées dans un fichier appelé reset. Mais pour commencer, nous allons les conserver, afin d'un côté, de vérifier la justesse de notre balisage, et de l'autre, de comparer les traitements par défaut de nos différents systèmes et logiciels. Cela permet une première prise de conscience de la variété des machines :)
Attention > Les balises HTML et leur style par défaut ne doivent jamais être utilisées pour obtenir des effets esthétiques !!! Elles servent à définir le type de contenu. En web, le contenu et le style sont à priori séparés. Même si l'organisation du code peut parallèlement servir un dessein esthétique, la justesse de la hiérarchie doit toujours primer, ne serait-ce que (parce-qu’elle sert la mise en page).
Introduction
Un fichier intitulé internet-des-hommes-aux-objets.md + une image vous sont transmis par l'intermédiaire du serveur local. Celui-ci contiens un extrait d'un chapitre du livre de l’informaticien français Gérard Berry, L’Hyperpuissance de l’informatique. Ce texte a été choisi non seulement pour son contenu (une très bonne introduction aux bases théoriques du web), mais également pour sa construction hiérarchique, qui inclut différent niveaux de texte et types de contenus.
Demande
Transformez ce texte brut en page HTML. Aucun style CSS ne devra être ajouté. L’exercice a pour but de vous entrainer au balisage, c’est-à-dire à l’attribution de la bonne balise au bon contenu.
Calendrier
Lun 09.10
- Lancement du sujet
- Présentation + démo de différents éditeurs de code
- Tour d'horizon des machines et systèmes d'exploitation de la classe
- Installation d'un éditeur de code sur les machines
Lun 16.10
- Création d’une première page HTML
- Les balises HTML (intro)
- Balisage d’un texte
Lun 23.10
- Rendu du site balisé
- Correction collective du balisage de la page
- Tour d'horizon des paramètres par défaut de la classe
Rendu
- 1 page HTML balisée
- 2 ou 3 captures d’écran de la page
Objectifs
- Installation + prise en main d'un éditeur de code
- Balises HTML
- Traitement sémantique / hiérarchique d'un contenu