Le texte

  • Introduction
  • Informations

Une page Web est essentiellement composée de texte (enfin dans la grande majorité des cas).
Il est donc très important de connaitre les balises qui permettent de le manipuler.

 
Netger
  • Auteur : Netger
  • Publication : 5 juil. 2007 09:12
  • Consultations : 2088
 

1. Quelques mots sur les textes...

Comme je l'ai déjà cité dans les précédents chapitres il est important en Xhtml de respecter une mise en forme rigoureuse.
Nous allons donc maintenant nous intéresser aux différentes balises qui permettent de structurer le texte d'une page Web.
Vous trouverez sans doute ce chapitre un peu plus lourd que les précédents car nous verrons ici un plus grand nombre de balises mais rassurez-vous tout cela reste relativement simple à comprendre.

Dans un premier temps nous allons nous intéresser aux balises de contenu :
  • La balise de bloc
  • La balise d'élément en ligne
  • La balise de bloc de citation
  • La balise de paragraphe
  • La balise de texte préformaté
  • La balise de passage à la ligne

Les balises de titres (de <h1> à <h6>) que nous avons vu au chapitre précédent font partie de cette catégorie

Nous verrons ensuite les balises de marquage logique :
  • La balise d'accentuation
  • La balise de texte en italique
  • La balise d'abréviation
  • La balise d'acronymes
  • La balise d'url
  • La balise de citation d'un écrit
  • La balise de code source
  • La balise de saisie clavier
  • La balise de référence
  • La balise d'exemple
  • La balise d'indication de variable

Je sais je me répète mais n'hésitez pas à tester tout cela de votre côté

2. Les balises de contenu

Les balises de contenu permettent de définir la structure des données de votre page.
Elles n'agissent en rien sur le rendu (la présentation)...

La balise de bloc
Cette balise permet de définir un élément commun de type bloc.
Sa vocation principale est de bien délimiter les différentes parties d'un document.
Prenez garde à ne pas abuser de cette balise !!
Dans la majorité des cas elle peut se substituer en faveur d'une balise plus précise.
Code-source xhtml
  1. <div> Bloc de texte </div>
 
La balise d'élément en ligne
Elle permet de cerner un élément précis (d'une lettre jusqu'à plusieurs mots) dans un bloc de texte.
Celle-ci est également à utiliser avec parcimonie car l'on peu souvent s'en passer au profit d'un autre balisage plus précis.
Code-source xhtml
  1. texte 1 <span> texte du span </span> texte 2
 
La balise de bloc de citation
Cette balise permet d'indiquer l'insertion d'une citation.
Elle possède un attribut "cite" qui prend en valeur l'url de la source de la citation.
Attention !! Cette balise ne peut contenir que des éléments de type bloc.
Code-source xhtml
  1. <blockquote>Graphisme et webmastering</blockquote>
 
La balise de paragraphe
Celle-ci permet d'introduire un paragraphe.
Code-source xhtml
  1. <p> Paragraphe </p>
 
La balise de texte préformaté
Elle permet d'introduire un texte préformaté,c'est-à-dire un texte dont les espaces et les tabulations seront renduà l'identique à la source.
Code-source xhtml
  1. <pre> texte préformaté </pre>
 
La balise de passage à la ligne
Cette balise permet de placer un retour chariot.
Cela étant ponctuel celle-ci ne possède pas de balise de fermeture donc le slash se place avant le chevron fermant.
Bien souvent cette balise peut-être substituée à un balisage plus sémantique.
Code-source xhtml
  1. Bloc de texte 1 <br/> Bloc de texte 2
 
N'oubliez pas de tester tout ça avant de passer à l'étape suivante

3. Les balises de marquage logique

Les balises de marquage logique vous permettent d'apporter plusd'information encore sur le type de votre contenu et donc du même coupune meilleure accessibilité.
Ces balises étant plus précise elles doivent être introduite dans un élément de type bloc pour être valides.

La balise d'accentuation
Si vous avez déjà fait du HTML et que vous connaissez la balise <b> ... </b> vous pouvez l'oublier définitivement.
Utilisez plutôt <strong> ... </strong>

Dans le cadre de l'utilisation de CSS on préférera même employer l'attribut "style" et la propriété "font-weight" avec pour valeur "bold".
Code-source xhtml
  1. texte 1 <strong> Gras </strong> texte 2
 
La balise de texte en italique
Il en va de même pour la mise en italique d'un texte : il est préférable d'utiliser <em> ... </em> à la balise <i> ... </i>

Toujours avec CSS on préférera utiliser l'attribut "style" et la propriété "font-style" ayant pour valeur "italic".
Code-source xhtml
  1. <em> Italiques </em>
 
La balise d'abréviation
Cette balise permet d'indiquer une abréviation.
Code-source xhtml
  1. <abbr title="Netger Design">N.D.</abbr>
 
La balise d'acronymes
Identique à la balise précédente mais cette fois pour une abréviation prononçable.
Par exemple LAMP pour Linux, Apache, MySQL, PHP
Ou encore LIFO pour Last In First Out...
Code-source xhtml
  1. <acronym title="definition"> acronyme 1 </acronym>
 
La balise d'url
Cette balise permet d'indiquer une adresse internet.
Code-source xhtml
  1. <address>URL principale : http://www.netgerdesign.com</address>
 
La balise de citation d'un écrit
Cette balise permet d'indiquer la référence à un ouvrage ou autres citations d'écrits.
Code-source xhtml
  1. <cite> Citation </cite>
 
La balise de code source
Celle-ci permet d'indiquer l'affichage d'un code source.
Code-source xhtml
  1. <code> function codeSource(param) { ... } </code>
 
La balise de saisie clavier
Cette balise permet d'indiquer une saisie clavier.
Code-source xhtml
  1. Saisissez ceci : <kbd> azerty </kbd>
 
La balise de référence
Cette balise, très proche de la balise ... , permet d'introduire une citation.
Elle s'emploie souvent dans le cas d'une citation orale et affiche son contenu entre guillemets.
Code-source xhtml
  1. <q> Bloc de texte 1 </q>
 
La balise d'exemple
Elle permet d'indiquer l'affichage d'un exemple.
Code-source xhtml
  1. Exemple : <samp> ... </samp>
 
La balise d'indication de variable
Cette balise permet d'indiquer l'affichage d'un nom de variable.
Code-source xhtml
  1. var <var> msg </var> = "Mon texte"
 
Voilà je vous ai tout dit, à vous de jouer maintenant  
  • Rédiger un commentaire
  • Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire