() translation by (you can also view the original English article)
Bienvenue dans la quatrième leçon de notre série Web Design pour les enfants, Contenu HTML.
Dans la leçon juste avant celle-ci, on a enfin plongé dans le code en construisant la structure de notre fichier HTML avec quelques éléments HTML. Maintenant nous allons ajouter le contenu du site dans cette structure.
Souviens-toi: Les fichiers terminés de cette leçon peuvent être téléchargés ici. Et si tu es coincé avec quelque chose, pose des questions dans la zone des commentaires tout en bas de cette page!
Conteneurs, Conteneurs, Conteneurs
On va beaucoup parler de conteneurs quand on construit un site web, donc c'est important de comprendre ce qu'ils font.
Tout notre contenu aura besoin d'être placé à l'intérieur de la bonne sorte de conteneurs HTML. Les conteneurs sont organisés avec des éléments HTML. Chaque élément a une signification spéciale pour le navigateur, ça l'aide à comprendre tout ce qu'il y a sur la page.
Pour voir ça autrement, dans l'illustration ci-dessus le bâtiment contient tout : des fenêtres, une porte, et une horloge. Une des fenêtres est animée par un autre conteneur avec un designer de Tuts+ Town (la ville Tuts+) à l'intérieur.
Ajouter le Contenu
Maintenant que notre structure est en place on peut remplir ces conteneurs avec du contenu. Tous les éléments qu'on a ajouté dans notre fichier lors de la précédente leçon nous ont aidé à nous organiser–ils nous ont donné une place pour insérer nos textes et images.
Commençons depuis le haut!
Header (en-tête)
Comme on en a parlé, l'en-tête (header) est la partie la plus haute d'un site web et a son propre élément, <header>, qui est le premier imbriqué dans notre body.
1 |
<body>
|
2 |
<header> </header> |
3 |
</body>
|
Le header contient généralement une introduction et une navigation (une façon de trouver d'autres places dans le site) d'un certain type. Notre site a une rubrique de bienvenue et une plaisante image, donc ajoutons-les!
Titrage
On doit avoir "Welcome to Tuts+ Town" (Bienvenue dans la ville de Tuts+) sur la page, ce qui est le titre principal de notre site.
Il y a six niveaux différents de titrages pour un site; h1 est le plus important, h6 le moins important. En HTML le texte pour les titrages et écrit avec des éléments de titrages: <h1>, <h2>, <h3>, <h4>, <h5>, ou <h6>.
"Welcome to Tuts+ Town" est notre titrage principal (c'est très important), on va donc l'écrire entre des balises d'ouverture et de fermeture d'un élément <h1>.
1 |
<header>
|
2 |
<h1>Welcome To Tuts+ Town</h1> |
3 |
</header>
|
Le navigateur va maintenant reconnaître ce morceau de texte comme notre titrage d'introduction.
L'Image de la Ville
Dans le header nous avons aussi une jolie image de notre ville.
Dans notre dossier principal "tutstown" on a besoin de créer un autre dossier, "images", et sauvegarder toutes les images à l'intérieur.
Les images sont ajoutées avec un élément <img>. A l'intérieur de cette balise on a besoin de donner l'endroit de l'image, ou la source, comme ceci:
1 |
<img src="images/townheader.svg" |
Tu vois ce / après src="images? Là on a dit "regarde dans le dossier images / pour un fichier appelé townheader.svg".
Ensuite, avant de terminer la balise <img> on va inclure une description avec un attribut alt.
1 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
Les attributs sont des choses qu'on peut ajouter à des éléments pour les aider à mieux s'expliquer, ou leur dire comment fonctionner. Seulement certains attributs fonctionnent avec certains éléments. Un élément <img> aura toujours un attribut src et alt.
Important! Un élément <img> se ferme tout seul. Ça veut juste dire que la balise d'ouverture est aussi la balise de fermeture:
Jetons un coup d'oeil!
A ce stade on peut ouvrir notre site dans le navigateur pour voir ce qu'on a fait jusqu'ici! Trouve le dossier "tutstown" et double-clique sur "index.html". Ça devrait ouvrir la page dans ton navigateur.
Voilà notre site web! Il n'y a pas encore grand chose pour l'instant, mais on va changer ça. A partir de maintenant, quand tu veux voir les changements dans le navigateur, tu peux enregistrer ton fichier HTML et après rafraîchir la fenêtre du navigateur (en utilisant en haut l'icône du petit cercle avec une flèche arrondie)
Aussi, tu remarqueras qu'on ne peut pas encore voir nos nuages, parce qu'on n'a pas encore ajouté le fond de page (background) jaune. On verra des choses comme les couleurs de fond de page, le positionnement et les tailles dans notre prochaine leçon quand on plongera dans les CSS.
Section Principale
La section principale de notre site inclus l'essentiel de l'information. On va contenir tout le contenu super utile à propos de notre cille dans l'élément <main>.
1 |
<body>
|
2 |
<header>
|
3 |
<h1>Welcome To Tuts+ Town</h1> |
4 |
<img src="images/townheader.svg" alt="An illustration of Tuts Town tower." /> |
5 |
</header>
|
6 |
<main>
|
7 |
</main>
|
8 |
</body>
|
Sections
On a trois groupes connexes dans notre site qu'on va organiser en trois sections. Une section est un morceau autonome du site qui contient des informations et qui a aussi son propre élément : <section>.
1 |
<main>
|
2 |
<section> </section> |
3 |
<section> </section> |
4 |
<section> </section> |
5 |
</main>
|
Plus de structure !
Dans nos sections on a de plus petits cadres à construire, comme des conteneurs pour de petits morceaux de texte à côté des images.
Faisons une section à la fois. Chaque section a une image insérée et un élément qui contient du texte.
Jetons un oeil à cette structure avant d'ajouter le contenu:
1 |
<section>
|
2 |
<img /> |
3 |
<div>
|
4 |
</div>
|
5 |
</section>
|
Maintenant, on a parlé d'ajouter les images avant. Cette image sera ajoutée de la même façon que notre image d'en-tête, mais le nom du fichier et sa description seront différents.
1 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
Div
Un élément <div> est un élément conteneur plus général. Il nous permet de grouper des parties de page quand aucun autre élément ne semble bon pour ça.
1 |
<div>
|
2 |
<img /> |
3 |
<div>
|
4 |
<!-- A heading and shop list will be added here -->
|
5 |
</div>
|
6 |
</div>
|
Le titrage et la liste des magasins seront contenus dans cette <div>.
Titrage
On peut voir que chaque section a un petit titrage: Dormir (Sleep), Manger (Food), et Magasins (Shop). Cela nous indique les plus petites listes en-dessous de chaque titre. On a déjà utilisé un <h1> pour notre introduction en haut de page, donc ici nous allons utiliser un <h2>, comme ceci:
1 |
<section>
|
2 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
3 |
<div>
|
4 |
<h2>Sleep</h2> |
5 |
</div>
|
6 |
</section>
|
Listes
Il y a deux types de listes HTML, les ordonnées (avec des nombres) et les non ordonnées (avec des puces à la place des nombres). Ce sont deux façons vraiment pratiques pour lister les informations et chaque section de notre site contient une courte liste non ordonnée (<ul>) avec deux éléments.
Nichés à l'intérieur de chaque liste il y a les articles de listes. Ce sont ces articles qui font notre liste et ils sont écrits dans des balises <li>.
1 |
<ul>
|
2 |
<li></li>
|
3 |
<li></li>
|
4 |
</ul>
|
Liens
Les listes que nous venons de créer ensemble sont juste sensées être des liens vers les différents sites des magasins, donc nos visiteurs peuvent cliquer dessus pour obtenir plus d'informations. Pour transformer un mot (ou plusieurs mots) en lien cliquable on a besoin d'intégrer ce mot dans des balises ancre (anchor). Un élément ancre ressemble à ceci: <a>.
Tout comme notre élément <img> qui a plusieurs attributs, la balise d'ouverture <a> a besoin de contenir un attribut qui inclut l'adresse web du site où nous voulons envoyer l'utilisateur, l'attribut href.
Le morceau de code suivant devrait nous donner un lien connecté au mot "here" (ici) qui emmènera l'utilisateur vers https://tutsplus.com/
1 |
For more tutorials click <a href="https://tutsplus.com/">here</a>. |
C'est exactement comme ça que nous allons ajouter des liens à notre liste, en enrobant chaque nom de magasin dans une ancre. Les balises d'ouverture et de fermeture seront toutes les deux dans l'article de liste, le <li>. La seule différence c'est que comme il ne s'agit pas de vrais magasins, avec de vrais sites web, on va mettre un # pour la valeur href et en cliquant dessus ça ne nous emmènera pas vers un autre site.
Voici un aperçu du premier magasin listé:
1 |
<ul>
|
2 |
<li><a href="#">The Snooze Inn</a></li> |
3 |
</ul>
|
On a créé une liste non ordonnée, on a mis un article de liste à l'intérieur, et ensuite on a enrobé le nom du magasin dans une balise d'ancrage. Cependant garde à l'esprit qu'on a encore ajouté aucun style donc pour le moment notre aperçu va montrer des liens bleu par défaut à la place d'orange.
On termine les sections
Une fois qu'on a une section complète on va devoir répéter exactement les mêmes étapes pour les deux dernières sections. Chaque fois on a besoin de s'assurer que le contenu change; la structure HTML sera la même pour les trois sections, mais le texte et les images seront différents.
Maintenant, passons en revue le code pour les trois sections–ça fait beaucoup!
1 |
<main>
|
2 |
<section>
|
3 |
<img src="images/townsleep.svg" alt="Illustration of a Tuts Town hotel." /> |
4 |
<div>
|
5 |
<h2>Sleep</h2> |
6 |
<ul>
|
7 |
<li>
|
8 |
<a href="#">The Snooze Inn</a> |
9 |
</li>
|
10 |
<li>
|
11 |
<a href="#">Zzz Hotel</a> |
12 |
</li>
|
13 |
</ul>
|
14 |
</div>
|
15 |
</section>
|
16 |
|
17 |
<section>
|
18 |
<img src="images/townfood.svg" alt="Illustration of a Tuts Town restaurant." /> |
19 |
<div>
|
20 |
<h2>Food</h2> |
21 |
<ul>
|
22 |
<li>
|
23 |
<a href="#">Just Cookies</a> |
24 |
</li>
|
25 |
<li>
|
26 |
<a href="#">Cake Too</a> |
27 |
</li>
|
28 |
</ul>
|
29 |
</div>
|
30 |
</section>
|
31 |
|
32 |
<section>
|
33 |
<img src="images/townshop.svg" alt="Illustration of a Tuts Town store." /> |
34 |
<div>
|
35 |
<h2>Shop</h2> |
36 |
<ul>
|
37 |
<li>
|
38 |
<a href="#">Puppy Parade</a> |
39 |
</li>
|
40 |
<li>
|
41 |
<a href="#">Cool Kittens</a> |
42 |
</li>
|
43 |
</ul>
|
44 |
</div>
|
45 |
</section>
|
46 |
</main>
|
Pied-de-page (Footer)
Un <footer> sera le premier élément après la balise de fermeture de l'élément <main>; il ne sera pas inclus à l'intérieur de celui-ci.
On peut maintenant ajouter notre élément de pied-de-page (footer) à la page, qui se trouve au même niveau que l'élément principal (main) puisqu'ils sont tous les deux inclus dans le body.
Le seul contenu qu'on va mettre dans notre footer est une phrase disant qui a fait notre site (c'est nous!). Ce contenu sera emballé dans un élément <p> (paragraphe) qui est contenu dans le footer.
1 |
<footer>
|
2 |
<p>Created with enthusiasm by caring residents.</p> |
3 |
</footer>
|
Aperçu complet
Est-ce que tu étais impatient de sauvegarder le document HTML et de rafraîchir le navigateur pendant qu'on travaillait ? Moi aussi! Jetons un dernier coup d'oeil avant de conclure:
Un récapitulatif des éléments utilisés
Nous avons beaucoup parlé de différents éléments ici donc on va vite revoir ceux qu'on a utilisés dans notre fichier HTML:
<html> | Contient tout notre HTML |
<head> | Là où on met les informations à propos du site |
<title> | Le titre du site web |
<body> | Contient tout le contenu de la page |
<header> | Contient notre message de bienvenue |
<h1> et <h2> | Nos titrages |
<img> | Amène une image sur la page |
<main> | Pour le contenu principal |
<section> | Divise la page en sections |
<div> | Un conteneur général |
<ul> | Une liste de choses non ordonnée |
<li> | Un article de liste dans une liste |
<a> | Utilisé pour lier quelque part |
<footer> | Le contenu du dessous |
Conclusion
Dans ce cours on a tout appris sur la façon de mettre du contenu dans la structure HTML super solide qu'on a construite à mains nues (bon, et avec un ordinateur).
La prochaine fois on apprendra comment styliser cette page pour la rendre aussi jolie et attractive que possible, mais aussi plus facile à lire et à utiliser.
On se voit en ville!
