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.
- Auteur : Netger
- Publication : 5 juil. 2007 09:12
- Consultations : 2087
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
<div> Bloc de texte </div>
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
texte 1 <span> texte du span </span> texte 2
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
<blockquote>Graphisme et webmastering</blockquote>
Celle-ci permet d'introduire un paragraphe.
Code-source xhtml
<p> Paragraphe </p>
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
<pre> texte préformaté </pre>
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
Bloc de texte 1 <br/> Bloc de texte 2
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
texte 1 <strong> Gras </strong> texte 2
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
<em> Italiques </em>
Cette balise permet d'indiquer une abréviation.
Code-source xhtml
<abbr title="Netger Design">N.D.</abbr>
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
<acronym title="definition"> acronyme 1 </acronym>
Cette balise permet d'indiquer une adresse internet.
Code-source xhtml
<address>URL principale : http://www.netgerdesign.com</address>
Cette balise permet d'indiquer la référence à un ouvrage ou autres citations d'écrits.
Code-source xhtml
<cite> Citation </cite>
Celle-ci permet d'indiquer l'affichage d'un code source.
Code-source xhtml
<code> function codeSource(param) { ... } </code>
Cette balise permet d'indiquer une saisie clavier.
Code-source xhtml
Saisissez ceci : <kbd> azerty </kbd>
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
<q> Bloc de texte 1 </q>
Elle permet d'indiquer l'affichage d'un exemple.
Code-source xhtml
Exemple : <samp> ... </samp>
Cette balise permet d'indiquer l'affichage d'un nom de variable.
Code-source xhtml
var <var> msg </var> = "Mon texte"
- Rédiger un commentaire
- Afficher les commentaires (0)
Vous devez être identifié pour poster un commentaire
Aucun commentaire
