Tu sais désormais différencier le HTML du CSS et quels éditeurs de texte utiliser pour commencer le HTML et/ou le CSS.
Aujourd’hui dans cette deuxième partie, nous allons voir la structure de base du HTML.
Au sommaire:
- Fonctionnement des balises
- Structure d’une page HTML
- Les Attributs HTML
Ces éléments du HTML sont des éléments que tu utiliseras au quotidien dans ta création de site web, donc ce sont des notions ultra-importante à comprendre et à mettre en pratique.
Version vidéo
Tu préfères la version vidéo? Je t’invite à regarder ce tutoriel version vidéo sur la chaîne YouTube Informerick.
Le fonctionnement des balises
Le HTML fonctionne avec des balises. Les balises sont des instructions prédéfinis que nous donnons pour mettre du contenu.
Nous déterminons les balises avec des « <> ». Par exemple pour mettre un paragraphe, il vous faudra mettre
<p> Mon paragraphe cool </p>Comme tu peux le voir, pour terminer l’introduction « paragraphe » nous avons mis la même mit la même balise avec un « / » avant. Cela permet de fermer l’instruction.
Certaines balises fonctionnent en paire pour ouvrir l’instruction et la fermer tandis que d’autres seront des balises seules ou « orphelines ».
Structure d’une page HTML
Note code HTML, à la longue, va venir à être long et même dire ultra long. Alors comprendre la structure et structurer notre HTML va être ultra-important pour optimiser et se repérer.
Voici la structure de base minimale pour une page HTML:
<!DOCTYPE html>
<html>
<head>
<title>Ma page</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>Voici ce qui faut comprendre de ce code:
<!DOCTYPE html>↑ Est une déclaration pour dire que notre fichier est un fichier en HTML.
<html>
</html>↑ Cela veux dire que tout ce qui se trouve entre ces balises est du code HTML.
<head>
</head>↑ Voici une partie importante, nous parlons de sections, il existe 3 types de sections, je vais y revenir à la fin de cette section du tutoriel. Mais cela veux dire que nous sommes dans l’entête.
<body>
</body>↑ Voici une autre section, la section corps du texte. Tout ce qui seras dans notre page se retrouvera ici.
Les sections HTML
Note contenu HTML est séparé en sections, il y a trois sections:
- Entête
- Corps
- Pieds de page
Ou dans la même ordre:
- <header> </head>
- <body> </body>
- <footer> </footer>
Chacune de ces sections ont une utilité:
Entête
Mettre les choses que nous voulons que notre page charge en premier, les polices, les formats pour afficher la page, etc. Aussi notre menu de navigation d’entête.
Corps
Le corps, c’est là que tout notre contenu seras pour être affiché dans notre page.
Pieds de page
C’est là que l’on veut charger les trucs les plus lourds à la fin, aussi que nous y mettons un pied de page à notre page.
Les Attributs
Maintenant que nous avons vu les balises, parlons des attributs.
Les attributs sont des instructions détaillés à une balise.
Les attributs vont souvent être référencé par = »INSTRUCTION » dans notre balise.
Par exemple pour une balise image:
<img alt="Image de chat" src="/public-html/chat.png">Ici, nous avons deux attributs:
– L’attribut alt= » » qui est une description de l’image pour les moteurs de recherche
– L’attribut src= » » qui est l’endroit qui permets d’aller chercher l’image.
Certaines balises auront besoin des attributs pour afficher plus précisément ce que nous lui demandons, vous n’avez que cela à retenir.
FAQ
Dans quelle section définir un menu de navigation en HTML?
Vous devez mettre votre menu de navigation dans la section entête ou plutôt <head> </head>.
Qu'est-ce qu'une balise HTML?
Une balise HTML permet de donner une instruction. L’instruction se met entre <>. Par exemple pour un paragraphe: <p> </p>.
Cet article se trouve dans la catégorie: Programmation
