() translation by (you can also view the original English article)
Nous apprendrons comment écrire la structure de notre site avec HTML. Cette structure va nous permettre d'accueillir le contenu du site, que nous ajouterons dans une prochaine leçon.
Si nous devions comparer le processus du web design à un bâtiment (comme un bâtiment de la ville Tuts+) le HTML serait quelque chose comme les fondations et l'encadrement de notre bâtiment; c'est la base à partir de laquelle tout le reste est construit.
Important! Les fichiers que nous allons créer dans cette leçon peuvent être téléchargés ici.
Qu'est-ce que le HTML exactement ?
Nous avons déjà beaucoup mentionné le mot HTML dans cette série, mais nous n'avons pas encore parlé de ce que c'est exactement, à part un "langage secret super cool". Le web est fait uniquement de langages et de communication, et le HTML est une part importante de tout cela.
HyperText Markup Language, HTML, est un langage qui marque le contenu d'un site afin que le navigateur le comprenne et l'affiche. Cela donne une structure aux bons vieux fichiers texte qu'un navigateur ne serait autrement pas capable d'interpréter.
Par exemple, nous ne pouvons pas taper un paragraphe dans notre éditeur de texte et s'attendre simplement à ce que le navigateur sache qu'il s'agit d'un paragraphe. Le texte du paragraphe doit se trouver à l'intérieur du bon marqueur HTML, un paragraphe, autrement dit un élément <p> (si d'autres textes ont un drôle de look comme ce <p> ici c'est juste parce que ces textes sont également du code).
Eléments
Le HTML est constitué d'élements qui ont une importante signification, comme l'élément paragraphe que nous avons mentionné plus haut. Chaque élément a une balise d'ouverture (le début) et une balise de fermeture (la fin), avec le contenu du site écrit entre ces deux balises.
Ces balises d'ouverture et de fermeture pour chaque élément sont écrites avec des crochets (comme ceci: < >), bien qu'une balise d'ouverture a aussi un slash (comme ceci: < / >).
Planifier une structure
Dans le cours précédent nous avons dessiné le design de notre site et maintenant il est temps de préparer la structure, ou l'encadrement, de ce design.
Nous commencerons par ajouter quelques notes générales à l'aperçu de notre site afin d'avoir une meilleur idée de la meilleure façon de planifier tout cela.
Dans le corps ( body ) de notre fichier html nous aurons plusieurs éléments principaux : une en-tête ( header ), une partie principale ( main) et un pied de page ( footer ).
Préparer nos documents
Nous avons également parlé de la façon d'installer des fichiers dans la précédente leçon, donc maintenant nous allons mettre ce savoir en pratique !
- Premièrement, crée un dossier sur ton ordinateur appelé "tutsfolder".
- Maintenant il est temps d'ouvrir cet éditeur de texte qui est prêt et attend que quelque chose d'extraordinaire se passe.
- Ensuite, crée un nouveau document avec cet éditeur (habituellement en sélectionnant Fichier > Nouveau Fichier) et enregistre-le sous le avec le nom "index.html" dans le dossier "tutsfolder".
Souviens-toi: "index" est le nom du fichier et ".html" le nom de l'extension, qui nous dit de quel type de fichier il s'agit.
Les sites web peuvent contenir beaucoup, beaucoup de pages, donc la page principale est toujours appelée "index.html" histoire de dire "Hé, c'est ici que tout commence!"
Maintenant, écrivons finalement un peu de HTML.
Construire une structure
Maintenant nous pouvons ajouter notre structure. A nouveau, pense à ceci comme à l'assemblement d'un bâtiment, nous avons de mettre les encadrements en place.
La toute première pièce d'HTML que nous allons écrire est le <!DOCTYPE html> qui dit au navigateur "Hé, c'est un document HTML!"
1 |
<!DOCTYPE html>
|
Ensuite, en-dessous de ça, nous avons besoin d'un élément <html> :
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
|
4 |
</html>
|
Tout le reste sera inclus dans cet élément.
Attends. Inclus ? (nest, en anglais)
En anglais, nest, veut également dire "nid", comme le nid d'un oiseau. Donc, ici, ce sera plutôt inclus comme dans des poupées russes, ou pour rester avec notre élégant concept de ville, des bâtiments russes. L'inclusion c'est ce qui se passe quand on place un élément à l'intérieur d'un autre.
Le bout de code en-dessous montre un élément paragraphe inclus dans un élément body, parce qu'il vit entre les balises d'ouverture et de fermeture du body.
1 |
<body>
|
2 |
<p>This paragraph element is nested inside the body element.</p> |
3 |
</body>
|
Nous rendons notre code dans le fichier HTML plus facile à lire en poussant les éléments inclus plus loin sur la droite. Comme ceci:
OK, retournons au travail...
La tête (Head)
Maintenant, inclus dans cet élément html on voudrait ajouter un élément head.
Le head contiendra le titre ( title ) de notre page, qui s'affichera dans l'onglet du navigateur. Beaucoup d'inclusions!
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
</html>
|
Beaucoup de ce qui est contenu dans le head d'un document HTML n'est pas vu par le site lui-même, mais à la place ça aide à dire aux moteurs de recherche, comme Google, de quoi parle notre site web.
Aussi, plus tard quand nous créerons un nouveau fichier pour ajouter des styles à celui-ci, nous connecterons ces deux documents ensemble à travers un lien ajouté dans le head. Donc, c'est un peu comme un centre de contrôle depuis les coulisses de notre site web que la plupart des visiteurs ne vont pas voir.
Le Corps (Body)
Tout ce que nous verrons de notre site dans le navigateur sera inclus dans le body, et c'est là qu'on va vraiment commencer à s'amuser!
L'en-tête (Header)
L'élément header n'est pas le même que l'élément head dont nous avons déjà parlé. Le header vit à l'intérieur du body et contient généralement tout ce qui se trouve tout en-haut d'un site.
La première chose que nous avons en-haut de notre site est une en-tête contenant du texte et une image de la ville Tuts+.
1 |
<html>
|
2 |
<head>
|
3 |
<title>Tuts Town</title> |
4 |
</head>
|
5 |
<body>
|
6 |
<header></header>
|
7 |
</body>
|
8 |
</html>
|
Nous allons seulement ajouter le header maintenant pour préparer le contenu à mettre à l'intérieur.
La Partie Principale (Main)
La partie principale du site de la ville Tuts+ contient l'information la plus importante. Notre site fait la liste des magasins de la ville, donc tout ce contenu vivra à l'intérieur d'un élément appelé main (principal).
Nous parlerons des plus petits conteneurs (comme les trois différents groupes: Dormir, Manger, et Acheter) dans ce grand conteneur main dans la prochaine leçon quand on ajoutera du contenu.
Le Pied de page (Footer)
Le footer est la partie qui vient tout à la fin d'un site. On verra habituellement quelques liens ici, comme pour Facebook ou Twitter, ou un peu de petit texte juste pour faire savoir aux gens qui a créé le site.
On va ajouter une phrase qui dira fièrement que nous avons réalisé le site à l'intérieur de l'élément footer.
1 |
<footer> </footer> |
Souviens-toi: à ce point nous ajoutons encore des éléments qui sont inclus dans le body.
Dernier récapitulatif
Maintenant, faisons un dernier récapitulatif de notre structure HTML jusqu'à présent.
Il est facile d'oublier les balises de fermeture, ce qui pourrait causer des erreurs sur notre site web. On veut s'assurer que chaque balise qui a été ouverte a bien une balise de fermeture.
On dirait que tout est fermé! Il est temps de commencer à ajouter du contenu à cette structure super solide que nous avons créée.
Note rapide sur les notes.
HTML nous laisse écrire des notes utiles dans notre travail. Ces notes n'apparaîtront pas sur notre site web, mais sont incroyables pour ajouter des morceaux d'information utiles pour les autres designers qui regardent notre code.
1 |
<!-- Anything in between these set of symbols is a comment that our browser cannot read, sort of like a little secret for designers only. -->
|
Le fichier HTML pour cette leçon (que tu peux télécharger) a plusieurs notes pour t'aider à mieux comprendre.
Bien joué !
Dans cette leçon nous avons appris ce qu'est le HTML, ce que sont les éléments, comment inclure ces éléments, et comment installer une structure HTML basique avec quelques conteneurs d'éléments très communs.
Dans la prochaine leçon, nous ajouterons les textes et les images de notre site dans cette structure fraîchement construite.
On se voit dans la ville!
