Créée le, 19/06/2015

 Mise à jour le, 29/12/2019

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

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&eacute;finissant les param&egrave;tres de fonctionnement des &eacute;l&eacute;ments du PC, notamment ceux de la carte m&egrave;re. Int&eacute;gr&eacute; dans une m&eacute;moire sp&eacute;cifique de la carte m&egrave;re, il peut &ecirc;tre actualis&eacute; pour b&eacute;n&eacute;ficier des changements de version.</P> <P> Vous voyez sur l'&eacute;cran la page <TT> telle qu'elle sera <u> imprim&eacute;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 &lt; CITE &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; CITE &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;dent la balise : </H3>

                                       <CITE>

<P> <font face="Arial" size="3" color="#000000"> <b> BUFFERIS&Eacute; : </b> Indique qu'un circuit num&eacute;rique est muni d'un BUFFER ce qui augmente sa sortance ou facteur pyramidal. Peut indiquer &eacute;galement qu'un circuit comporte une m&eacute;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 &lt; CODE &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; CODE &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;dent la balise : </H3>

                                       <CODE>

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

                                       </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 &lt; DFN &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; DFN &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; EM &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; EM &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; KBD &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; KBD &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; SAMP &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; SAMP &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; STRONG &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; STRONG &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; VAR &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; VAR &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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 &lt; BLOCKQUOTE &gt; </TITLE>

     </HEAD>

          <BODY>

                             <H2> Exemple de la balise &lt; BLOCKQUOTE &gt; </H2>

               <H3> Texte pr&eacute;c&eacute;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.









Nombre de pages vues, à partir de cette date : le 15 JUILLET 2019

compteur gratuit

    




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

Version du site : 10. 4. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 02 Septembre 2016.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en Septembre 2016.