Un menu horizontal réactif
Les balises en ligne « génériques » <span>
Dans le texte de la fable de La Fontaine "Le Corbeau et le Renard", on nous demande de mettre en évidence:
- les expressions qui désignent le corbeau en couleur jaune sur fond noir
- les expressions qui désignent "Renard" en couleur rouge sur fond vert
- les rimes paires
- en caractères gras de couleur rouge ou
- en caractères italiques de couleur bleue
Bon, je subodore qu'il sera question d'utiliser des balises "en ligne". Mais lesquelles? Il existerait des balises <renard> ou <corbeau> en HTML? A partir de là, ce serait facile.
Votre remarque laisse déjà penser que vous avez compris que cela ne fonctionnera pas comme cela.
Retour vers le passé: la balise <div>
Pour réaliser la mise en page globale d'un document HTML, nous avons utilisé des balises qui n'ont aucune signification au niveau de la structure d'un document: les balises <div>.
Une balise <h1> indique que l'on a affaire à un niveau de titre principal; une balise <cite> indique que l'on a affaire à une citation.
Une balise <div> ne signifie rien. Mais on peut lui donner du sens si on lui adjoint, par exemple, un identificateur.
Le fragment de code
<div
id="piedDePage">
<ul>
<li>Item
1</li>
<li>item
2</li>
</ul>
</div>
contient un bloc <div> dont nous lisons aisément qu'il contient un "pied de page".
Un autre produit générique: la balise <span>
De la même manière qu'il existe une balise générique pour les éléments de type "bloc", il existe une balise générique pour les éléments de type "en ligne": la balise <span>.
- Ouvre un nouveau document dans KompoZer
- Enregistre ce document sous le nom test.html ; le titre du document sera TEST.
- Dans
ce document, recopie la phrase suivante:
"Dans le cadre de ce cours, nous avons utilisé des balises structurantes comme <h1> ou <p> ou <cite> ou encore <body> et la balise générique <div>".
Nous allons mettre en évidence les différentes balises HTML dans ce fragment; en lettres blanches sur fond rouge.
Ouvre
l'éditeur de styles CasCadeS.
afin d'y définir la mise en forme des éléments qui seront marqués- Dans la ligne de saisie du nom du sélecteur, écris le nom .balise.
Pour un rappel de la différence entre un #balise et .balise, voir la leçon précédente.
- Définis les caractéristiques attendues pour la "classe" .balise: fond rouge, écriture blanche.
A l'aide de la liste déroulante des "classes", attribue la classe "balise"
à la sélection.- Fais ensuite de même pour l'ensemble des balises HTML figurant dans le fragment de texte.
- Dans l'onglet Source, vérifie que des balises <span> ont bien été intégrées automatiquement dans ton texte. Tu dois trouver quelque chose comme ci-dessous.
Aaah! C'est quoi, ces pattes de mouches? Je vois bien <span> et la "class" balise comme prévu; mais le reste???
La notation < est, en fait, un code pour représenter le signe "<" en HTML. On ne peut pas laisser simplement le symbole "<" qui sert à annoncer le début d'une balise HTML. Même chose pour le signe ">" qui est représenté par >
Ah oui, mais pourquoi > ? Ça me paraît bien ésotérique.
GT et LT proviennent de l'anglais: GT = greater than ; LT = less than. Comme "<" et ">" en mathématiques.
- Réalise le travail demandé sur la fable de La Fontaine. Tu peux copier/coller le texte que tu retrouveras aisément sur le web.
- Tu y définiras les classes "renard", "corbeau", "rime1" et "rime2".
- Enregistre régulièrement la page produite sous le nom fable.html avec le titre FABLE. La feuille de style sera interne.
- Quand ton travail est terminé, montre-le au professeur.
Quand le document demandé aura été accepté, passe à
la page
suivante.
Dernière modification 12/05/2008
