Menu verticale simple Menu verticale avec calque Menu vertical trois niveaux Le corps Le pied de page Les titres.
Les titres.
Si vous trouvez une article intéressante, vous pouvez participer à sa diffusion en utilisant les boutons de partage situés ci-dessous.
| Résumé de la matière | Description |
|---|---|
| Les titres. | Un document HTML doit être structuré correctement... |
| Mise en page. | Grâce au CSS vous pouvez modifier ses la mise en page des titres... |
Les titres.
Un document HTML doit être structuré correctement afin d'être bien compris par les lecteurs ainsi que les robots d'indexation des moteurs de recherche. Bien structurer sa page a donc son importance. Le titre principal, les sous-titres et les paragraphes devraient suivre une certaine logique.
Par exemple <h1>Titre principal.</h1> donnera :
Titre principal.
Si vous avez besoin d'un sous-titre, utilisez <h2>Sous-titre.</h2> pour :
Sous-titre.
Il peut y avoir plusieurs sous-titres dans une page et ceux si peuvent contenir d'autres sous-titre. Dans ce cas utilisez <h3>Sous-titre secondaire.</h3> pour :
Sous titre secondaire.
Il y a encore <h4>, <h5> et <h6>, mais ces valeurs ne sont que très rarement utilisées comme sous-titre puisque la taille de la police correspond au texte ou est plus petite ce qui n'est pas le but rechercher d'un sous-titre. Bref, oubliez ces dernières.
Mise en page.
La balise h (heading ang.) est de type bloc et est affichée avec les valeurs par défaut du navigateur. Mais grâce au CSS vous pouvez modifier ses paramètres.
Il peut avoir des titres dans le corps, les menus ou dans d'autre conteneur. Pour indiquer à quel conteneur s'applique les propriétés CSS pour les titres, indiquez d’abord le conteneur puis les valeurs. Par exemple si les titres sont dans le conteneur corps.
Tout se joue dans le CSS (ne tenez pas compte des numéros de ligne).
1
2
3
4
5
6
7
|
#corps h1{
font-size:1.75em;
color:#000;
font-family:"Times New Roman", Times, Serif;
margin:5px 0;
padding:0
}
|
Les propriétés indiquées ici ne seront appliqués que pour le corps. Changer #corps pour #menu et ses attributs ne seront appliqués que pour le menu.
Vous pouvez combiner <h2> et <h3> s'ils ont les mêmes valeurs en séparant les balises par une virgule.
1
2
3
4
5
|
#corps h2,h3 {
color:#000;
font-family:"Times New Roman", Times, Serif;
margin:10px 0
}
|
Les balise h2 et h3 auront la même couleur, la même police et les mêmes marges.
Si vous désirez que les valeurs de la balise <h> soient appliquées à toute la page, écrivez :
1
2
3
4
5
|
h1,h2,h3 {
color:#000;
font-family:"Times New Roman", Times, Serif
margin:0 10px
}
|
Elles auront toutes la même couleur et la même police quel que soit le conteneur. Évidemment la grandeur de la police n'ait pas indiqué puisque les trois titres doivent avoir trois grandeurs différentes.
Voici comment pourrait-être indiquer la mise en page pour les titres dans le corps de la page.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
#corps h1,h2,h3 {
color:#036;
font-family:"Times New Roman", Times, Serif;
font-weight:600;
line-height:1.2
}
#corps h1 {
font-size:1.75em;
font-style:italic;
margin:0 0 .5em 0
}
#corps h2 {
font-size:1.5em;
margin:2em 0 .5em 0
}
#corps h3 {
font-size:1.25em;
margin:1em 0 .5em 0;
}
|
Ajouter ce site à vos favoris
