Un menu horizontal réactif

Les balises en ligne « génériques » <span>

Le Corbeau et le Renard

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".

À retenir Une balise <div> est une balise "générique" qui prendra le sens que nous lui donnerons.
Il s'agit d'une balise de type bloc.

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.

  • .balisesOuvre 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.
  • Liste des classes 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.
<span class="balise">&lt;cite&gt;</span>

Aaah! C'est quoi, ces pattes de mouches? Je vois bien <span> et la "class" balise comme prévu; mais le reste???

La notation &lt; 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 &gt;

Ah oui, mais pourquoi &gt; ? Ç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.

À retenir Une balise <span> est une balise "générique" qui prendra le sens que nous lui donnerons.
Il s'agit d'une balise de type en ligne.
  • 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. Vers la page suivante Page suivante


Dernière modification 01/09/2016 Test dans /info ...