Apprendre à Structurer une Page Web

Utiliser les balises pour écrire des titres et des paragraphes
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

À l'issue de cette vidéo, vous serez capable de :
- Utiliser correctement les balises de titre de H1 à H6.
- Structurer une page web avec des titres et des paragraphes.
- Insérer des lignes horizontales pour séparer le contenu.
- Éviter les erreurs de structure courantes.

Dans cette leçon, nous allons découvrir comment structurer une page HTML avec des titres, des paragraphes, et des lignes horizontales. Vous apprendrez les différents niveaux de titres et l'utilisation des balises appropriées.

Cette leçon vous guidera à travers la structuration d'une page HTML en utilisant des titres (H1 à H6) et des paragraphes pour une mise en page bien organisée. Vous découvrirez comment chaque balise de titre représente un niveau hiérarchique différent, facilitant la lecture et l'accessibilité de votre contenu. Nous aborderons également l'utilisation de la balise HR pour insérer des lignes horizontales dans votre page. Vous apprendrez à éviter les erreurs courantes, comme placer des paragraphes à l'intérieur des balises de titre. À la fin de cette leçon, vous serez capable de structurer vos pages de manière claire et efficace, rendant votre contenu plus attrayant pour les visiteurs et les moteurs de recherche.

Voir plus
Questions réponses
Quelle balise est utilisée pour créer un titre principal dans une page HTML ?
La balise utilisée pour créer un titre principal est la balise H1.
Comment insère-t-on un paragraphe en HTML ?
Pour insérer un paragraphe en HTML, on utilise la balise P.
Quelle est la fonction de la balise HR en HTML ?
La balise HR est utilisée pour dessiner une ligne horizontale qui sépare le contenu sur une page web.
Dans cette leçon, nous allons apprendre à structurer notre page avec des titres et des paragraphes. Nous allons réaliser la page ci-dessous, qui est une page très simple, qui comporte des titres, des paragraphes, un petit filet que l'on va écrire avec la balise HR, d'autres titres et des sous-titres, différents niveaux de titres, etc., ainsi que des paragraphes. Cette page est relativement longue, c'est pourquoi nous avons ouvert cette page en tant que texte. Pour l'instant, il n'y a pas de balise à l'intérieur, et je vais simplement copier-coller l'ensemble dans notre page de base et ajouter les balises. Depuis la page index que j'ai préparée ici dans notre dossier titres et pages, je vais la faire glisser sur le logiciel Sublime Text. J'ai donc ma page de base. Je vais aller chercher tous mes textes et je vais les copier-coller à l'intérieur de la zone Body. Si je les laisse simplement comme ça, si je regarde un navigateur, il va se passer ce qui nous a apparu tout à l'heure avec nos différentes entités, c'est-à-dire que nous aurons tous les textes sur une seule ligne. Il n'y aura pas de mise en page. A présent, je vais structurer. Le premier titre, donc ce grand titre de ma page, je vais le mettre dans une balise H1. En fait, les balises H1, il y a six niveaux de balises. Il y a H1, H2, H3, H4, H5 et H6 qui vont vous permettre de donner les différents niveaux de titres. Premier titre H1. Ensuite, sous ce titre, il y a simplement un paragraphe. Le paragraphe est représenté par la balise P. Nous avons écrit la ligne D, etc. Et puis, second titre. Ensuite vient ce fameux petit filet qui est situé là. Ce fameux petit filet, il est en fait écrit avec une balise qui s'appelle HR qui permet de dessiner, de réaliser un trait tout au long de la page, sur l'ensemble de la page horizontale. Ça peut être utile, on l'utilise, on ne l'utilise pas. Ça peut être utile pour séparer des contenus. Nous allons à présent écrire le second titre. Le second titre, on va considérer que c'est un titre de niveau 2, puisque nous avons notre titre de niveau 1, H1, qui signifie que c'est l'ensemble de la page, la ligne D du RER d'Île-de-France. Et maintenant, nous allons faire un petit chapitre, on va dire, sur l'infrastructure. Donc, on va utiliser la balise H2 et puis fin de H2. Nous pourrions écrire des petites choses à l'intérieur de cela. Et puis, à l'intérieur de l'infrastructure, ce chapitre est également séparé en plusieurs sous-catégories. Il y a sous-catégorie H3, puisque c'est un titre de niveau 3. Nous sommes maintenant arrivés au niveau 3. Et là, ce qui concerne au nord de la ligne, etc., que l'on peut voir sur l'exemple, là c'est un paragraphe. Voici. De même, la tension d'alimentation, qui est au même niveau que l'élément qui se nomme ligne, je vais l'écrire en H3. Donc, vous allez pouvoir avoir plusieurs balises de niveau H2, plusieurs balises de niveau H3, à l'intérieur du même page. Et en HTML5, il est même possible d'avoir plusieurs balises de niveau H1, nous le verrons ultérieurement. Donc là, de nouveau, j'ai un paragraphe. À présent, tracée centrale, nous avons encore un H3. Et puis, à venir, c'est du paragraphe. Alors, je vais simplement copier celle-ci, ce qui ira plus vite par la suite, en tout cas pour les paragraphes. Vitesse limite, nous en sommes là. Toujours H3. Et voici, et enfin, notre petit paragraphe. Si j'arrive à écrire le 3. Liste des gares, ici, il est dans un niveau supérieur. Donc, nous retrouvons notre niveau H2. Toujours avec la fin de H2. Notre petit paragraphe. Sans oublier le slash. L'exploitation, pareil, même niveau que le précédent, H2. Et notre paragraphe. J'enregistre cette page avant de la perdre complètement. Ensuite, nous avons un sous-catégorie de l'exploitation, interconnection, nous sommes redevenus dans un niveau H3. Voilà, je vais m'arrêter là pour cette structure, je pense que vous avez compris. Voilà, donc il est important de correctement structurer la page avec les différents niveaux de titres et puis mettre un paragraphe lorsque cela est nécessaire. Je vous rappelle, un paragraphe, normalement, présente, décrit une idée principale par rapport au titre. Une erreur que je peux constater parfois, lorsque j'ai des élèves en cours, c'est qu'ils placent le paragraphe à l'intérieur de la balise H, de cette manière. Ça, c'est totalement faux, il ne faut surtout pas écrire ce type de choses, car le navigateur pourrait finir par se tromper. Il est important de bien séparer le titre et le paragraphe à chaque fois. J'enregistre et nous allons regarder ce début de page dans un navigateur. Donc j'ai à présent la page que j'ai réalisée, alors qu'elle ne comporte pas tout. Je me suis arrêté ici, donc je n'ai pas les différentes balises de la partie inférieure et la page que nous étions en train de viser. Elles sont rigoureusement identiques, étant donné qu'elle est très simple et qu'il n'y a pas de mise en forme particulière. A retenir les différents niveaux de balises H1, H2, H3, H4, H5, H6, le paragraphe et cette petite balise HR qui permet de réaliser une ligne.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5