Apprendre la Programmation HTML et CSS #2 – Structure HTML

html-css2
Tu veux apprendre a structurer une page html ? Et quelle est la structure html et html 5 pour la structure page code html 5

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.

Cours HTML/CSS Débutant #2 - Structure HTML (2022)Cours HTML/CSS Débutant #2 – Structure HTML (2022)

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.

Publicité

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

Publicité

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

Partager ceci

Facebook
Twitter
LinkedIn
Reddit
Pinterest
WhatsApp
Telegram

À voir également

html-css-13
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #13 Site Web CSS Responsive
octobre 6, 2022
html-css-12
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #12 Formulaires HTML
octobre 6, 2022
html-css-11
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #11 Figures, videos et audios
octobre 6, 2022
html-css-10
Programmer en HTML et CSS
Apprendre la programmation HTML et CSS #10 Tableaux HTML
octobre 6, 2022

À voir également sur le forum

Besoin d'aide ?

Malgré que tu as lu ce tutoriel, tu te poses toujours des questions à ce sujet? Le problème ne s’est pas réglé ? Vous êtes bloqué à un endroit ?

Viens poser ta question et sois répondu par la communauté Informerick rapidement!