cClaude.rocks ☕ Le blog

[Nouvelles technologies, sciences et coups de gueule…]

Menu

Ce billet fait partie d’une sĂ©rie d’une dizaine billets : #atelier-web.

Cet atelier n’est pas prĂ©vu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de maniĂšre inattendue sur ces appareils.

Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.

Poursuivons l'atelier Web avec l’introduction de nouvelles balises et des entitĂ©s HTML.

Le langage HTML permet de structurer votre texte.

Le langage HTML permet de hiĂ©rarchiser et typer votre contenu. Ceci vous aidera dans la mise ne place de l’aspect final, mais cela servira Ă©galement moteurs de recherches Ă  « comprendre » votre contenu (au sens, oĂč le moteur de recherche sera capable d’en afficher un extrait correspondant Ă  un thĂšme par exemple).

La structuration de votre contenu sera aussi trĂšs utile si vous souhaitez mettre en place votre propre programme pour modifier l’affichage de maniĂšre dynamique (interaction avec le « visiteur » de la page) et ce dernier point nous correspond au besoin de notre atelier Web.

La norme HTML-5 embarque de nouvelle balises destinĂ©es uniquement Ă  la structuration sĂ©mantique des documents. Ce n’est pas le sujet de cet atelier, mais je vous laisse le lien vers une documentation (en anglais) qui prĂ©cise la norme sur ce point.


ඏ

La balise â‰șp≻ – paragraphe

Nous avons vu la balise p qui permet de définir un paragraphe, regardons un peu comment elle fonctionne.

  • Exemple

    Supposons le code suivant :

    <p>Ceci est un paragraphe court</p><p>Ceci est un autre paragraphe court</p>
    <p>Ceci est un dernier paragraphe court</p>
    

    Voici ce que ça donne à l’affichage :

    Ceci est un paragraphe court

    Ceci est un autre paragraphe court

    Ceci est un dernier paragraphe court

On notera que la prĂ©sentation du code source n’a pas d’importance sur l’affichage (on parle de rendu). Autant en profiter donc pour Ă©crire de maniĂšre lisible son code.

La balise p ajoute de la sĂ©mantique Ă  votre code, tout ce qui est entre <p> et </p> appartient au mĂȘme paragraphe.


ඏ

Les retours à la ligne et les espaces présents dans le code ne sont pas rendus

Les plus curieux d’entre vous auront qu’il est possible d’ajouter autant de saut de ligne ou d’espaces que vous le voulez au sein d’un paragraphe ou d’un titre et qu’ils ne seront jamais affichĂ©s dans le navigateur.

Les retours Ă  la ligne en HTML — Balise â‰șbr≻

Pour effectuer un retour Ă  la ligne en HTML nous allons devoir utiliser l’élĂ©ment br qui est reprĂ©sentĂ© par une balise orpheline. Une balise orpheline est une balise qu’il n’est pas nĂ©cessaire de refermĂ©e.

On pourra Ă©crire.

<p>Ligne 1<br />Ligne 2</p>

<p>ou encore</p>

<p>
  Ligne 1<br />
  Ligne 2
</p>

On obtiendra :

Ligne 1
Ligne 2

ou encore

Ligne 1
Ligne 2

Le nom de l’élĂ©ment br est l’abrĂ©viation de « break », dans le sens de « casser une ligne ». En français on utilise plutĂŽt la notion de « saut de ligne » ou de « retour Ă  la ligne ».

Les espaces en HTML


Pour des raisons de sémantique, on essaiera tant que possible de se passer de cet élément HTML qui ne possÚde pas de sens en soi mais qui sert justement à conserver des mises en forme


On prĂ©fĂ©rera tant que possible utiliser le CSS pour ce genre d’opĂ©rations de mise en forme.

Il existe plusieurs solutions permettant d’ajouter des espaces en HTML, ici nous n’évoqueront qu’une partie d’entre-eux : le cas des espaces insĂ©cables qui ont un sens (sĂ©mantique) en fonction de la langue.

Ce point permet d’introduire les entitĂ©s du langage HTML.

Une entité HTML est une suite de caractÚre qui est utilisée pour afficher un caractÚre réservé en HTML.

Qu’est-ce qu’un caractĂšre rĂ©servé ? C’est un caractĂšre qui possĂšde dĂ©jĂ  une signification particuliĂšre en HTML. Par exemple, imaginons que l’on souhaite afficher le caractĂšre < dans un texte.

On ne va pas pouvoir mentionner ce caractĂšre tel quel dans notre Ă©diteur, car le navigateur va interprĂ©ter cela comme l’ouverture d’une balise d’un Ă©lĂ©ment. Il va donc falloir indiquer au navigateur qu’on souhaite afficher le caractĂšre < en tant que tel et non pas ouvrir une balise.

Pour cela, il va falloir Ă©chapper le sens de ce caractĂšre, et c’est ce Ă  quoi vont nous servir les entitĂ©s HTML.

Ici nous dĂ©tailleront que les entitĂ©s liĂ©es Ă  la notion d’espace


  • L’entitĂ© HTML &nbsp; (« non breaking space ») va nous permettre d’ajouter une espace simple dit espace « insĂ©cable » ;
  • L’entitĂ© HTML &ensp; (« en space ») va nous permettre de crĂ©er une espace double ;
  • L’entitĂ© HTML &emsp; (« em space ») va nous permettre de crĂ©er une espace quadruple ;
  • L’entitĂ© HTML &thinsp; (« thin space ») va nous permettre de crĂ©er un espace trĂšs fin (demi-espace).

đŸ„‡ Exercice 🧠⇝🎓

EntraĂźnez-vous Ă  Ă©crire un texte dans un paragraphe qui contient des sauts de lignes et des espaces. Par exemple en français pour Ă©crire le nombre 1 000 000, les sĂ©quences de 3 chiffres doivent ĂȘtre sĂ©parĂ©es par un espace « insĂ©cable ». Mais c’est aussi le cas des nombres et leur unité : 10 °C.


ඏ

Les balises â‰șh1, h2, h3, h4, h5, h6≻

Les balises Hₙ servent Ă  encadrer les titres, axes
 des contenus. En effet, afin d’augmenter la clartĂ© et la **comprĂ©hension **d’un document, il est prĂ©fĂ©rable de prĂ©senter votre texte maniĂšre aĂ©rer (Ă©viter les “pavĂ©s”), hiĂ©rarchiser les arguments ou les points abordĂ©s.

  • Exemple

    Supposons le code suivant :

    <h1>Titre H1 trĂšs important</h1>
    <h2>Titre H2 moins important que H1</h2>
    <h3>Titre H3 moins important que H2</h3>
    <h4>Titre H4 moins important que H3</h4>
    <h5>Titre H5 moins important que H4</h5>
    <h6>Titre H6 moins important que H5</h6>
    

    Voici ce que ça donne à l’affichage :

    Titre H1 trĂšs important

    Titre H2 moins important que H1

    Titre H3 moins important que H2

    Titre H4 moins important que H3

    Titre H5 moins important que H4
    Titre H6 moins important que H5

Les balises Hₙ dĂ©roge Ă  la rĂšgle d’encapsulation, on pourrait s’attendre Ă  ce que les balises H2 se trouvent Ă  l’intĂ©rieur d’une balise H1 (et ainsi de suite). Ce n’est pas le cas, pour des raisons historiques. Dans les premiĂšres versions de HTML, les balises avec un sens plus prononcĂ© en termes de prĂ©sentation (aspect), alors qu’aujourd’hui le code HTML a pour but de structurer la page, la prĂ©sentation Ă©tant prise en charge par un autre langage : le CSS.

đŸ„‡ Exercice 🧠⇝🎓

Pour bien comprendre le fonctionnement des balises h1, h2, h3, h4, h5, h6, p et br Ă©crivez un texte utilisant certaine de ces balises.

  • Exemple de texte

    Je vous propose les derniĂšres phrases de l’Ɠuvre de Victor HUGO: Les MisĂ©rables.

    Victor HUGO

    1802 – 1885

    Épitaphe de Jean Valjean

    Il dort. Quoique le sort fût pour lui bien étrange,
    Il vivait. Il mourut quand il n’eut plus son ange ;
    La chose simplement d’elle-mĂȘme arriva,
    Comme la nuit se fait lorsque le jour s’en va.


ඏ

Les balises gĂ©nĂ©riques â‰șdiv≻ et â‰șspan≻

Ces deux balises sont des conteneurs sont destinĂ©s Ă  structurer le contenu, mais elles ont un rĂŽle complĂ©mentaire et des rĂšgles de rendu diffĂ©rentes. La balise span permet surtout d’associer un style Ă  une partie d’un texte tandis que div sert Ă  agencer le contenu de la page.

Les deux balises doivent avoir une balise de dĂ©but et de fin, la forme rĂ©duite n’est pas reconnue.

La forme rĂ©duite d’une balise c’est lorsque <balise></balise> s’écrit <balise /> mais il y a quelques exceptions.

N’est pas valide par exemple ceci :

<div class="xxx" /><!-- non valide -->

Le format seul valide est celui-ci :

<div class="xxx"></div><!-- valide -->

La balise peut ĂȘtre vide, mais l’utilisation de la forme rĂ©duite n’est pas valide.

Regardons ce que ça donne :

Le code :

<div>ceci est dans une balise div</div><div>ceci est dans une autre balise div</div>
<span>ceci est dans une balise span</span><span>ceci est dans une autre balise span</span>

Produira le rendu (affichage) suivant :

ceci est dans une balise div
ceci est dans une autre balise div
ceci est dans une balise spanceci est dans une autre balise span

La balise div (on peut Ă©galement parler d’élĂ©ment div) sert de conteneur pour d’autres Ă©lĂ©ments et permet ensuite d’appliquer facilement les mĂȘmes styles CSS Ă  tous les Ă©lĂ©ments contenus dans notre div par hĂ©ritage ou pour les mettre en forme en appliquant un style spĂ©cifique au div.

Les termes balise, Ă©lĂ©ment et conteneur peuvent ĂȘtre considĂ©rĂ©s comme des synonymes ; vous trouverez ces termes dans la documentation en fonction de ce que l’on souhaite mettre en avant.

  • Balise (en anglais « markup ») Ă©tant plutĂŽt le terme formel dans le cadre de la description du langage HTML.
  • ÉlĂ©ment est le terme qui sera consacrĂ© dans une vue globale de la page, et est plutĂŽt liĂ© au langage JavaScript.
  • Conteneur sert quant Ă  lui Ă  traiter la notion d’imbrication, et d’hĂ©ritage du comportement. Par exemple, si on change la couleur de fond d’un Ă©lĂ©ment cela s’applique Ă©galement aux Ă©lĂ©ments qu’il contient. Ce terme Ă©tant plutĂŽt liĂ© aux langages CSS et JavaScript.

Comme div et span sont des conteneurs plutĂŽt neutre en termes d’affichage, pour mettre en Ă©vidence leur fonctionnement nous allons, maintenant, devoir nous intĂ©resser au langage CSS qui permet de modifier le comportement d’un Ă©lĂ©ment.


ඏ

Références

L’atelier complet

኿


â„č 2006 - 2021 | 🏠 Retour Ă  l'accueil du domaine | 🏡 Retour Ă  l'accueil du blog