Les titres
Lorsque le contenu de votre page va s'étoffer avec de nombreux paragraphes, il va devenir difficile pour vos visiteurs de se repérer. C'est là que les titres deviennent utiles.
En HTML, on est verni, on a le droit d'utiliser six niveaux de titres différents. Je veux dire par là qu'on peut dire « Ceci est un titre très important », « Ceci est un titre un peu moins important », « Ceci est un titre encore moins important », etc. On a donc six balises de titres différentes :
Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page dans la barre de titre du navigateur comme nous l'avons vu. Les titres <h1> et compagnie, eux, servent à créer des titres qui seront affichés dans la page web.
Ne vous laissez pas impressionner par toutes ces balises. En fait, six niveaux de titres, c'est beaucoup. Dans la pratique, personnellement, je n'utilise que les balises <h1>, <h2> et <h3>, et très rarement les autres (je n'ai pas souvent besoin de six niveaux de titres différents). Votre navigateur affiche le titre très important en très gros, le titre un peu moins important en un peu moins gros, etc.
Ne choisissez pas votre balise de titre en fonction de la taille qu'elle applique au texte ! Il faut impérativement bien structurer sa page en commençant par un titre de niveau 1 (<h1>), puis un titre de niveau 2 (<h2>), etc. Il ne devrait pas y avoir de sous-titre sans titre principal !
Si vous voulez modifier la taille du texte, sachez que nous apprendrons à faire cela en CSS un peu plus tard.
Essayez de créer une page web avec des titres pour voir ce que cela donne :
Code : HTML
<html> <head> <meta charset="utf-8" /> <title>Niveaux de titres</title> </head>
<body> <h1>Titre super important</h1> <h2>Titre important</h2> <h3>Titre un peu moins important (sous-titre)</h3> <h4>Titre pas trop important</h4> <h5>Titre pas important</h5> <h6>Titre vraiment pas important du tout</h6> </body> </html> |
Allez, je vous donne un exemple d'utilisation des titres dans une page web (vous allez voir que je ne me sers pas de toutes les balises) :
Code : HTML
<html> <head> <meta charset="utf-8" /> <title>Présentation du Site du Zéro</title> </head> <body> <h1>Bienvenue sur le Site du Zéro !</h1> <p>Bonjour et bienvenue sur mon site : le Site du Zéro.<br /> Le Site du Zéro, qu'est-ce que c'est ?</p> <h2>Des cours pour débutants</h2> <p>Le Site du Zéro vous propose des cours (tutoriels) destinés aux débutants : aucune connaissance n'est requise pour lire ces cours !</p>
<p>Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un site web, à programmer, à construire des mondes en 3D !</p>
<h2>Une communauté active</h2>
<p>Vous avez un problème, un élément du cours que vous ne comprenez pas ? Vous avez besoin d'aide pour créer votre site ?<br /> Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul dans ce cas et vous trouverez très certainement quelqu'un qui vous aidera aimablement à résoudre votre problème.</p> </body> </html> |
Voilà une page web qui prend forme !
Oui, mais moi je veux centrer mon titre, l'écrire en rouge et le souligner !
Nous ferons tout cela lorsque nous apprendrons le CSS (dès la deuxième partie du cours). Il faut savoir que <h1> ne signifie pas « Times New Roman, taille 16 pt », mais « Titre important ».
Grâce au langage CSS, vous pourrez dire « Je veux que mes titres importants soient centrés, rouges et soulignés ». Pour le moment, en HTML, nous ne faisons que structurer notre page. Nous rédigeons le contenu avant de nous amuser à le mettre en forme.
Créé avec HelpNDoc Personal Edition: Créer de la documentation iPhone facilement