Une affiche pour le club
Tu dois faire l’affiche du club de foot. Tu écris le titre en gros. Tu écris les horaires en petit. Tu ajoutes une liste des joueurs.
Sur le web, on fait pareil. Mais on dit à l’ordinateur le rôle de chaque morceau de texte. Pour cela, on utilise le HTML.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| HTML | Le langage qui décrit le contenu d’une page web. | <p>Bonjour</p> |
| Balise | Un mot entre < et >. Il dit le rôle du texte. | <h1> |
| Élément | Une balise ouvrante, le contenu et la balise fermante. | <p>Salut</p> |
| Attribut | Une information ajoutée dans une balise ouvrante. | href="..." |
| Titre | Un texte en gros. h1 est le plus grand, h2 est plus petit. | <h2>Mes loisirs</h2> |
| Lien | Un texte sur lequel on clique pour aller sur une autre page. | <a href="..."> |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Ouvrir et fermer
Une balise s’écrit entre < et >. La plupart vont par deux : une balise ouvrante et une balise fermante.
La fermante a une barre oblique /. Le texte se met entre les deux : <p>Bonjour</p>.
Le navigateur lit la page et dessine chaque élément selon sa balise.
À toi : ta première page
<h1>Lina, 16 ans</h1>
<p>Je suis en seconde. J’aime le foot et la musique.</p>
<!-- Change le nom et la phrase. Ajoute un deuxième paragraphe. -->
Les balises de base
| Balise | Rôle | Exemple |
|---|---|---|
| h1 | Le titre principal | <h1>Mon club</h1> |
| h2 | Un sous-titre | <h2>Les horaires</h2> |
| p | Un paragraphe | <p>Match samedi.</p> |
| strong | Un mot important, en gras | <strong>samedi</strong> |
| a | Un lien | <a href="page.html">Voir</a> |
| ul et li | Une liste à puces et ses lignes | <ul><li>Lina</li></ul> |
| ol et li | Une liste numérotée | <ol><li>Étape 1</li></ol> |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
À toi : deux sortes de listes
<h2>Mes loisirs</h2>
<ul>
<li>Le foot le mercredi</li>
<li>La guitare</li>
<li>Les séries</li>
</ul>
<h2>Mon trajet</h2>
<ol>
<li>Je prends le bus 12</li>
<li>Je descends à la mairie</li>
<li>Je marche cinq minutes</li>
</ol>
<!-- Ajoute un loisir à la première liste. -->
Contrôle rapide : les balises
À toi de jouer
Contrôle rapide : les balises
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Les liens
Un lien utilise la balise a. L’attribut href dit où mène le lien. Le texte entre les balises est ce qu’on lit.
Dans <a href="https://www.lyon.fr">La mairie</a>, on lit « La mairie ». On arrive sur le site de Lyon.
À toi : un lien
<p>Voici le site de ma ville :</p>
<a href="https://www.lyon.fr">La mairie de Lyon</a>
<p>Un mot <strong>important</strong> et un mot <em>légèrement</em> souligné.</p>
<!-- Change le texte du lien. Change aussi l’adresse après href. -->