Les Styles HTML

**Signets :**
Leçons suivantes	Leçons précédentes	Bas de page

Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet

Les Styles HTML :

Les Styles HTML :

Nous allons maintenant étudier les balises correspondantes aux balises de base du langage permettant d'intervenir sur la présentation des pages concernant le langage HTML. Il ne faut pas oublier, cependant, que les Internautes a toute latitude pour modifier cette présentation en intervenant sur le paramétrage de leurs browsers ; ils peuvent déjà agir sur la taille, la couleur et le choix des polices. Ils pourront bientôt créer localement sur leurs machines ces propres styles de présentation. Ces balises pourront notamment être utilisées dans les définitions de feuilles de styles que nous verrons au cours de nos études.

HTML définit deux méthodes pour la présentation des caractères : le Style physique et le Style logique.

Style physique ou Style des caractères :

Les balises suivantes vont explicitement indiquer le type de caractères à utiliser.

<B> :

Cette balise commence un texte, en caractères gras et doit se terminer par la balise de fin </B>, comme nous l'avions expliqué dès le début de notre première leçon.

<I> :

Cette balise commence un texte, en caractères italiques et doit se terminer par la balise de fin </I>.

<U> :

Cette balise commence un texte, en caractères soulignés (elle n'est pas reconnue par tous les browsers), et elle doit se terminer par une balise de fin </U>.

<TT> :

Cette balise permet de formater le texte, en caractères de type machine à écrire (télétype), et elle doit se terminer par une balise de fin </TT>. La police utilisée est de type non proportionnelle.

N.B. : Avec une police non proportionnelle, l'espace occupé par chaque caractère est constant. Ainsi la lettre I occupe la même largeur que la lettre M. cela permet notamment de réaliser des alignements pour les tableaux.

Exemple :

<HTML>

<HEAD>

<TITLE> LE BIOS </TITLE>

</HEAD>

<BODY>

<P><font face="Arial" size="3" color="#000000"> <b> LE BIOS : </b> <i> (<b>B</b>asic <b>I</b>nput <b>O</b>utput <b>S</b>ystem)</i>. Programme de base d'un ordinateur qui renferme toutes les informations définissant les paramètres de fonctionnement des éléments du PC, notamment ceux de la carte mère. Intégré dans une mémoire spécifique de la carte mère, il peut être actualisé pour bénéficier des changements de version.</P> <P> Vous voyez sur l'écran la page <TT> telle qu'elle sera <u> imprimée</u>.</TT></font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

A noter : Vous vous apercevez que certaines phrases ci-dessus sont encodées, il n'en est rien ! Il suffit de bien connaître les mots clés ainsi que les encodages, qui se trouve au début de nos leçons : Voir les encodage, en bas de page.

Style logique, Style de paragraphe :

Comme précédemment, l'interprétation par le browser des consignes concernant le style des paragraphes est tout à fait libre, et les huit styles logiques définis dans HTML pour caractériser des portions de texte ne produiront pas forcément autant de représentations différentes. Il est néanmoins préférable d'utiliser ce balisage, en choisissant le mode le mieux adapté au genre du texte : balise de citation pour une citation, balise de code pour un exemple de programme informatique, etc. Se conformer à cette règle est une garantie de bonne exploitation des fichiers HTML pour les futurs browsers.

<CITE> :

Cette balise est souvent utilisée pour citer un ouvrage ou une référence plutôt qu'une citation, pour laquelle on préférera la balise <BLOCKQUOTE> ; des caractères italiques sont le plus souvent choisis par le browser.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < CITE > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < CITE > </H2>

<H3> Texte précédent la balise : </H3>

<CITE>

<P> <font face="Arial" size="3" color="#000000"> <b> BUFFERISÉ : </b> Indique qu'un circuit numérique est muni d'un BUFFER ce qui augmente sa sortance ou facteur pyramidal. Peut indiquer également qu'un circuit comporte une mémoire tampon. </font></P>

</CITE>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<CODE> :

La balise <code> est utilisée pour un exemple de programme informatique ; des caractères de type machine à écrire avec police non proportionnelle (fonte Courier) seront adoptés.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < CODE > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < CODE > </H2>

<H3> Texte précédent la balise : </H3>

<CODE>

</CODE>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<DFN> :

On utilise <DFN> pour la définition d'un terme. Selon le browser, des caractères standard, gras ou gras italiques seront utilisés.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < DFN > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < DFN > </H2>

<H3> Texte précédent la balise : </H3>

<DFN>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</DFN>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<EM> :

La balise <EM> permet de mettre en valeur un texte ; des caractères italiques seront le plus souvent utilisés.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < EM > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < EM > </H2>

<H3> Texte précédent la balise : </H3>

<EM>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</EM>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<KBD> :

La balise <KBD> permet d'illustrer une saisie au clavier ; des caractères de type machine à écrire avec police non proportionnelle (une fonte Courier) seront sélectionnés.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < KBD > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < KBD > </H2>

<H3> Texte précédent la balise : </H3>

<KBD>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</KBD>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<SAMP> :

Pour un exemple de texte, on utilise la balise <SAMP>; des caractères type machine à écrire avec police non proportionnelle (une fonte Courier) seront généralement utilisés.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < SAMP > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < SAMP > </H2>

<H3> Texte précédent la balise : </H3>

<SAMP>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</SAMP>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<STRONG> :

Pour mettre un texte très fortement en valeur, on utilise la balise <STRONG> ; utilisation de caractères gras.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < STRONG > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < STRONG > </H2>

<H3> Texte précédent la balise : </H3>

<STRONG>

<P> <font face="Arial" size="3" color="#000000"> AMPLIFICATEUR : Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</STRONG>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<VAR> :

Cette balise <VAR> est utilisée pour représenter une variable dans un contexte informatique par exemple, utilisation de caractères italiques.

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < VAR > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < VAR > </H2>

<H3> Texte précédent la balise : </H3>

<VAR>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</VAR>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

<BLOCKQUOTE> :

Cet élément, si l'on respecte la sémantique du langage HTML, serait plutôt à classer avec les balises <PRE> de texte préformaté et <ADDRESS> spécifiant un bloc d'adresse ou de signature. Ce sont véritablement les trois balises de formatage de paragraphe.

<BLOCKQUOTE> peut être utilisé dans le même esprit que la balise <CITE>, mais des caractères standard seront utilisés, le bloc de texte sera entièrement décalé vers la droite et des espaces de type paragraphe seront générés de part et d'autre du bloc

Exemple :

<HTML>

<HEAD>

<TITLE> La balise < BLOCKQUOTE > </TITLE>

</HEAD>

<BODY>

<H2> Exemple de la balise < BLOCKQUOTE > </H2>

<H3> Texte précédent la balise : </H3>

<BLOCKQUOTE>

<P> <font face="Arial" size="3" color="#000000"> <b> AMPLIFICATEUR : </b> Circuit permettant d'augmenter l'amplitude d'une grandeur physique. </font></p>

</BLOCKQUOTE>

<P> <font face="Arial" size="3" color="#000000"> Texte suivant la balise. </font></P>

</BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici.

Nous résumons cette cinquième leçon ci-après :

Le style physique :

<B> pour des caractères gras ;

<I> pour des caractères italiques ;

<U> pour des caractères soulignés ;

<TT> pour des caractères machine à écrire.

Ces styles ci-dessus sont combinatoires entre eux.

Le style logique :

<CITE> pour citer un ouvrage par exemple : CITATION ;

<CODE> pour un exemple de programme informatique : Programme informatique ;

<DFN> pour une définition : Amplificateur par exemple ;

<EM> pour un mot étranger : BIOS par exemple ;

<KBD> pour simuler la saisie d'un texte au clavier : Jean peut partir en vacances, il a bien travaillé ! ;

<SAMP> pour citer un texte par exemple : Jean peut partir en vacances, il a bien travaillé ! ;

<STRONG> pour mettre en valeur par exemple : Jean peut partir en vacances, il a bien travaillé ! ;

<VAR> pour représenter une variable par exemple : $A, $B, $C, $D, ainsi de suite ... .

Le style des paragraphes :

<BLOCKQUOTE> pour une citation par exemple :
Jean peut partir en vacances, il a bien travaillé !

<ADDRESS> pour une adresse, une signature :
Jean-Paul, Daniel, Pierre, etc. ...

<PRE>
pour respecter le texte tel qu'il a été saisi, par exemple :
```
 Jean peut partir en vacances, il a bien travaillé !
```

Fin de cette cinquième leçon, la prochaine sera consacrée aux liens hypertextuels concernant le langage HTML.

Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet.	Haut de page
Page précédente	Page suivante

Nombre de pages vues, à partir de cette date : le 27 Décembre 2019

Mon audience Xiti

Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web.

Version du site : 11. 5. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 02 JANVIER 2020.

Ce site Web a été Créé le, 12 JUIN 2019 et ayant Rénové, en JANVIER 2020.