Pas encore membre ? Enregistrez-vous ! | Identifiants égarés ?
Fermer

Les titres

  • Introduction
  • Informations

En XHTML des balises spécifiques permettent d'indiquer les titres.
Nous allons voir ici comment les utiliser.

 
Netger
  • Auteur : Netger
  • Publication : 4 juil. 2007 05:11
  • Consultations : 2004
 

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 :
Code-source xhtml
  1. <h1>Titre 1</h1><h2>Titre 2</h2><h3>Titre 3</h3><h4>Titre 4</h4><h5>Titre 5</h5><h6>Titre 6</h6>
 
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>...</h1> est plus important qu'un titre <h2>...</h2> qui est lui-même plus important qu'un titre <h3>...</h3>, etc...
Vous devez donc veillez à donner à votre document une hiérarchie claire et structurée suivant ce type de schéma :
  • Titre principal
    • Titre 1
      • sous-titre 1
      • sous-titre 2
      • sous-titre 3
    • Titre 2
      • sous-titre 1
      • sous-titre 2
    • 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 :
Code-source xhtml
  1. <h1 style="text-align: center;">Titre 1</h1>
 
Nous pouvons également le souligner :
Code-source xhtml
  1. <h1 style="text-align: center; text-decoration: underline;">Titre 1</h1>
 
Mais aussi en changer la couleur :
Code-source xhtml
  1. <h1 style="text-align: center; text-decoration: underline; color: blue;">Titre 1</h1>
 
Ou encore la taille :
Code-source xhtml
  1. <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

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 css
  1. <style>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 css
  1. <h1>Titre 1</h1>
 
Encore une fois je vous laisse tester tout ça  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire