![[Fléche]](../images/defaut/icones/puce_navig.gif)
Cours de XHTML : Les titres
En XHTML des balises spécifiques permettent d'indiquer les titres.
Nous allons voir ici comment les utiliser.
1. Déclaration des titres
En XHTML, chaque balise permet de définir la nature de son contenu.
Ainsi dans ce chapitre nous allons nous intéresser aux titres.
Vous verrez cette partie est vraiment très courte et très simple mais n'hésitez pas à essayer de votre côté pour vous entrainer et retenir plus facilement la syntaxe.
Entrons maintenant dans le vif du sujet !!
Le XHTML nous propose 6 niveaux de titres grâce à la balise "heading".
Cette balise se note comme ceci :
Ils vous permettent de construire la hiérarchie de votre document en donnant une importance mesurée pour chaque titre.
Dans cette logique un titre <h1> est plus important qu'un titre <h2> qui est lui-même plus important qu'un titre <h3>, etc...
Vous devez donc veillez à donner à votre document une hiérarchie claire et structurée suivant ce type de schéma :
Bien sur vous n'êtes pas obligé d'utiliser l'ensemble de ces balises de titres (de 1 à 6) dans chacune de vos pages !!
Vous ne devez utiliser que celles dont vous avez vraiment besoin.
Dans la majorité des cas vous utiliserez les balises <h1>, <h2> et <h3>... Les autres sont plus rarement employées.
Ainsi dans ce chapitre nous allons nous intéresser aux titres.
Vous verrez cette partie est vraiment très courte et très simple mais n'hésitez pas à essayer de votre côté pour vous entrainer et retenir plus facilement la syntaxe.
Entrons maintenant dans le vif du sujet !!
Le XHTML nous propose 6 niveaux de titres grâce à la balise "heading".
Cette balise se note comme ceci :
Code-source : XHTML
<h1>Titre 1</h1>
<h2>Titre 2</h2>
<h3>Titre 3</h3>
<h4>Titre 4</h4>
<h5>Titre 5</h5>
<h6>Titre 6</h6>
Citation
Super !! Et à quoi ça sert autant de types de titres ??
Ils vous permettent de construire la hiérarchie de votre document en donnant une importance mesurée pour chaque titre.
Dans cette logique un titre <h1> est plus important qu'un titre <h2> qui est lui-même plus important qu'un titre <h3>, etc...
Vous devez donc veillez à donner à votre document une hiérarchie claire et structurée suivant ce type de schéma :
* Titre principal
o Titre 1
+ sous-titre 1
+ sous-titre 2
+ sous-titre 3
o Titre 2
+ sous-titre 1
+ sous-titre 2
o Titre 3
+ sous-titre 1
Bien sur vous n'êtes pas obligé d'utiliser l'ensemble de ces balises de titres (de 1 à 6) dans chacune de vos pages !!
Vous ne devez utiliser que celles dont vous avez vraiment besoin.
Dans la majorité des cas vous utiliserez les balises <h1>, <h2> et <h3>... Les autres sont plus rarement employées.
2. Des titres avec un peu de style
Comme indiqué dans le chapitre précédent (cf. Introduction au XHTML) le CSS nous permet de formater notre texte.
Nous allons donc dès maintenant utiliser un peu de CSS afin d'embellir ces titres.
Cela-dit nous utiliseront ici l'attribut "style" (commun à de nombreuses balises) afin de placer notre code CSS.
Je tiens également à préciser que ce chapitre n'est pas consacré au CSS vous trouverez donc plus d'informations sur les feuilles de style en consultant le dossier qui leur est consacré.
Les quelques exemples qui suivent sont destinés à vous donner une première approche (basique) de l'utilisation du CSS.
Commençons donc par centrer notre titre :
Nous pouvons également le souligner :
Mais aussi en changer la couleur :
Ou encore la taille :
Bon je vous laisse tester tout ça
Nous allons donc dès maintenant utiliser un peu de CSS afin d'embellir ces titres.
Cela-dit nous utiliseront ici l'attribut "style" (commun à de nombreuses balises) afin de placer notre code CSS.
Je tiens également à préciser que ce chapitre n'est pas consacré au CSS vous trouverez donc plus d'informations sur les feuilles de style en consultant le dossier qui leur est consacré.
Les quelques exemples qui suivent sont destinés à vous donner une première approche (basique) de l'utilisation du CSS.
Commençons donc par centrer notre titre :
Code-source : XHTML-CSS
<h1 style='text-align:center;'>Titre 1</h1>
Nous pouvons également le souligner :
Code-source : XHTML-CSS
<h1 style='text-align:center; text-decoration:underline;'>Titre 1</h1>
Mais aussi en changer la couleur :
Code-source : XHTML-CSS
<h1 style='text-align:center; text-decoration:underline; color:blue;'>Titre 1</h1>
Ou encore la taille :
Code-source : XHTML-CSS
<h1 style='text-align:center; text-decoration:underline; color:blue; font-size:16px;'>Titre 1</h1>
Bon je vous laisse tester tout ça
3. Redéfinir le style d'un titre
Citation
La petite intro sur le CSS de la partie précédente est vraiment sympa mais c'est pas un peu lourd à écrire tout ça ??
Et puis je pensais que les données devaient-être séparés de la mise en page ??
Et puis je pensais que les données devaient-être séparés de la mise en page ??
Oui c'est vrai il faut bien avouer que cette façon de procéder est assez lourde mais heureusement ce n'est pas la seule.
De plus il est vrai que la déclaration des styles ne devrait pas se faire dans la partie XHTML
Je vais donc vous présenter une autre façon de procéder bien plus pratique afin de conclure cet aperçu du CSS.
Cette méthode consiste à redéfinir le style par défaut de la balise de titre.
Pour cela nous allons reprendre exactement le même style que pour l'exemple de la partie précédente, c'est-à-dire un titre bleu de 16px, centré et souligné.
Et afin de séparer la déclaration du style de la balise <h1> nous allons placer celle-ci dans la partie <head>... </head> de notre page :
Code-source : XHTML-CSS
<style type="text/css">
h1
{
text-align:center;
text-decoration:underline;
color:blue;
font-size:16px;
}
</style>
Déclarez ensuite votre titre de la façon la plus simple qui soit et celui-ci prendra automatiquement le style par défaut que nous venons de définir :
Code-source : XHTML
<h1>Titre 1</h1>
Encore une fois je vous laisse tester tout ça
