Partie W2 · exercices 6 à 13
Titres, listes, tableaux, liens et images : écrire sa première page
Une page web est un fichier texte dont le nom se termine par .html. Le texte est accompagné de balises qui disent au navigateur ce que représente chaque morceau : un titre, un paragraphe, une liste, une image… Tout au long de cette partie, tu construis la page d'un chat nommé Tigrou.
Deux façons de travailler
Dans le navigateur : l'Atelier HTML et CSS affiche le résultat dès que tu écris, sans enregistrer de fichier.
Avec un éditeur de texte (Notepad++, VS Code…) : tu enregistres un fichier .html, tu l'ouvres avec le navigateur, puis tu actualises la page (F5) après chaque modification. C'est ainsi que tu travailleras pour le mini-site.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tigrou le chat</title>
</head>
<body>
<h1>Tigrou le chat</h1>
<p>Tigrou est un chat roux qui adore dormir au soleil.</p>
</body>
</html><!DOCTYPE html> : indique que c'est une page HTML5.<html lang="fr"> : la racine de la page. lang="fr" annonce que le texte est en français (utile aux lecteurs d'écran et aux traducteurs).<head> : informations non affichées sur la page : <meta charset="UTF-8"> (le codage, pour que les accents s'affichent) et <title> (le titre de l'onglet).<body> : tout ce qui est visible sur la page.Les balises
La plupart des balises vont par deux : une balise ouvrante <p> et une balise fermante </p>. Le texte concerné est placé entre les deux. Certaines balises ont des attributs : <html lang="fr">, où lang est le nom de l'attribut et "fr" sa valeur.
Les erreurs classiques
mon chat.jpg).page.html, pas page ni page.txt.<h1> : le titre principal (un seul par page). <h2>, <h3> : titres de plus en plus secondaires, jusqu'à <h6>.<p> : un paragraphe. Le navigateur ignore les retours à la ligne du fichier : pour séparer deux paragraphes, on ouvre un nouveau <p>.Dans l'atelier (ou dans ton éditeur), écris le squelette ci-dessus, en remplaçant le titre et le texte par ton sujet.
<meta charset="UTF-8"> ? (Pense aux accents.)Enregistre le fichier sous le nom index.html, dans un dossier nommé minisite.
💾 dans ton dossier minisite (fichier .html)
Écris une page avec un titre <h1>, puis trois parties : chacune a un titre <h2> et au moins un paragraphe <p>.
<h1> et de <h2>.<h3> sous un <h2>. Que constates-tu ?Les titres <h1> à <h6> indiquent la place d'une partie dans le plan, pas seulement la taille du texte.
💾 dans ton dossier minisite (fichier .html)
Sans l'ordinateur, décris ce qu'affichera le navigateur pour ce code. Vérifie ensuite dans l'atelier.
<body>
<h1>Mon jeu préféré</h1>
<h2>Pourquoi je l'aime</h2>
<p>On joue à plusieurs.</p>
<ul>
<li>Les parties sont courtes</li>
<li>Il y a des défis</li>
</ul>
<h2>Mes niveaux</h2>
<ol>
<li>Facile</li>
<li>Difficile</li>
</ol>
</body><ul> signifie unordered list (liste non ordonnée) et <ol> signifie ordered list (liste ordonnée).
📝 réponses dans ton compte rendu, exercice 8
<ul> crée une liste à puces et <ol> une liste numérotée. Chaque élément est écrit dans une balise <li>.<table> crée un tableau. Chaque ligne est dans <tr> ; chaque case est dans <td> (ou <th> pour une case d'en-tête).<a href="adresse">texte du lien</a> crée un lien hypertexte.<img src="fichier.jpg" alt="description" width="300"> insère une image.<ul>
<li>Dormir</li>
<li>Manger</li>
</ul>
<table>
<tr><th>Prénom</th><th>Espèce</th></tr>
<tr><td>Tigrou</td><td>chat</td></tr>
</table>
<a href="https://fr.wikipedia.org/wiki/Chat">En savoir plus sur les chats</a>
<img src="eiffel.jpg" alt="La tour Eiffel au bout d'une rue de Paris" width="300">Accessibilité
alt décrit l'image avec des mots. Il est lu par les lecteurs d'écran (pour une personne qui ne voit pas l'image) et s'affiche si l'image ne se charge pas.Dans ta page, ajoute :
Une liste à puces : <ul>. Une liste numérotée : <ol>. Dans les deux cas, chaque élément est dans un <li>.
💾 dans ton dossier minisite (fichier .html)
Ajoute un tableau de trois colonnes (Prénom, Espèce, Caractère) et trois lignes de personnages d'un animal ou d'un jeu de ton choix.
<th> pour la ligne d'en-tête. Quelle différence avec <td> ?Compte les cases : chaque ligne <tr> doit contenir le même nombre de cases (trois ici).
💾 dans ton dossier minisite (fichier .html)
Dans le dossier minisite, crée une deuxième page chat.html. Puis :
index.html, écris un lien vers chat.html.chat.html, écris un lien pour revenir à index.html.Pour une page du même dossier, il suffit d'écrire son nom : href="chat.html".
Pour un autre site, on écrit l'adresse complète, avec https://.
💾 dans ton dossier minisite (fichier .html)
Les photos eiffel.jpg, ardeche.jpg et gargouille.jpg sont dans Web.zip. Copie-en une dans ton dossier minisite, puis :
alt) et une largeur de 300.alt ? Écris une bonne description pour la photo gargouille.jpg.L'image doit être dans le même dossier que la page, ou son chemin doit être indiqué dans src.
Dans l'atelier, les trois images sont déjà disponibles sous leur nom.
💾 dans ton dossier minisite (fichier .html)
Cette page contient au moins six erreurs. Recopie-la dans l'atelier (ou charge le modèle « Page à corriger ») et corrige-la.
<!DOCTYPE html>
<html>
<head>
<title>Tigrou le chat</title>
</head>
<body>
<h1>Tigrou le chat<h1>
<p>Tigrou aime :
<li>dormir</li>
<li>manger</li>
<img src="mon chat.jpg" width="200">
<a href="https://fr.wikipedia.org/wiki/Chat>En savoir plus</a>
</body>
</html>Compare chaque balise ouvrante avec sa balise fermante.
Regarde le nom du fichier image, ses attributs, les guillemets, puis ce qui manque dans <head>.
💾 dans ton dossier minisite (fichier .html)