L’emploi du temps du lycée
Ton emploi du temps est un tableau. Chaque ligne est une heure. Chaque colonne est un jour.
Dans une page web, on peut faire pareil. Et on peut aussi ajouter des images. Mais une personne aveugle ne voit pas l’image : il faut donc la décrire.
Mots-clés
| Mot | Ce que ça veut dire | Exemple |
|---|---|---|
| Tableau | Des données rangées en lignes et en colonnes. | <table> |
| Ligne | Une rangée horizontale du tableau. | <tr> |
| Cellule | Une case du tableau. | <td>14 h</td> |
| En-tête | Une cellule qui donne le nom d’une colonne. Elle est en gras. | <th>Jour</th> |
| Image | Un dessin ou une photo dans la page. | <img src="..."> |
| Texte alternatif | Une phrase qui décrit l’image. Un lecteur d’écran la lit à voix haute. | alt="Un ballon orange" |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Construire un tableau
La balise table contient tout le tableau. Chaque ligne est une balise tr.
Dans une ligne, chaque case est un td. Pour une case d’en-tête, on écrit th.
On remplit le tableau ligne par ligne, comme on lit.
À toi : un tableau d’entraînement
<table border="1">
<tr>
<th>Jour</th>
<th>Entraînement</th>
</tr>
<tr>
<td>Mercredi</td>
<td>14 h</td>
</tr>
<tr>
<td>Samedi</td>
<td>10 h</td>
</tr>
</table>
<!-- Ajoute une ligne pour le vendredi, à 18 h. -->
Exemple travaillé : qui fait quoi
| Balise | Rôle | Dans le tableau ci-dessus |
|---|---|---|
| table | Entoure tout le tableau | 1 tableau |
| tr | Une ligne | 3 lignes : l’en-tête et deux jours |
| th | Une case d’en-tête | 2 cases : Jour et Entraînement |
| td | Une case de données | 4 cases : 2 par jour |
Les cellules que les étudiants remplissent restent vides dans cet aperçu.
Contrôle rapide : le tableau
À toi de jouer
Contrôle rapide : le tableau
3 questionsTes réponses sont corrigées ici et ne sont pas conservées. Un compte garde tes résultats.
Ajouter une image
La balise img n’a pas de balise fermante. Elle a deux attributs importants.
src dit où se trouve l’image. alt donne une phrase qui la décrit.
Le texte alt sert aux personnes aveugles et s’affiche si l’image ne charge pas.
À toi : une image avec son texte
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Ccircle cx='40' cy='40' r='36' fill='orange'/%3E%3C/svg%3E" alt="Un ballon orange" width="80">
<p>Si l’image ne s’affiche pas, le texte alternatif prend sa place.</p>
<!-- Change le texte de alt. Change width en 160. -->
Un bon texte alternatif
Astuce
Dis ce que l’image montre, en peu de mots : « Équipe des moins de 17 ans avant le match ». N’écris pas « image de ». Une image qui ne sert qu’à décorer peut avoir un alt vide.