FRANCAIS francophone2.gif ANGLAIS

 

 

Created the, 12/06/2019

 Updated the, 02/01/2020

Visiteurs N°  


Home
Back to Main Sites New Blog Novelty Search engine Your Shopping Cart For Shopping Your Member Area Bookmarks, Your Favorite Games Static Welcome Page Site in French Web Site in English
Summaries
Basic Electronics Fundamental Technology Test your Knowledge Digital Theoretical Electronics Digital Practical Electronics Digital Electronic Lexicon Data book TTL Data book CMOS TVC Troubleshooting Mathematical
Microcomputers
Theoretical of Microcomputers Test your Knowledge Practical Microcomputers Computer Glossaries
Physical
The light Field of Action Electromagnetic Radiation
Technologies
Classification of Resistances Identification of Resistances Classification of Capacitors Identification of Capacitors
Mathematical Forms
Geometry Physical 1. - Electronic 1. 2. - Electronic 1. 3. - Electrical 1. 4. - Electromagnetism
Access to all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages N. B. M. - Volume I - 201 Pages E. T. M. - Volume I - 554 Pages Business at Home Books 34 free pages Our E-books Geometry Software Electronic Components Software
Overview of all our Products
E. T. F. - Volume I - 257 Pages E. T. F. - Volume II - 451 Pages E. T. F. - Volume III - 611 Pages E. T. D. - Volume I - 610 Pages E. T. M. - Volume I - 554 Pages Geometry Software Electronic Components Software
Our Lessons in PDF Formats
Basic Electronics Fundamental Technology Digital Theoretical Electronics Digital Practical Electronics Theoretical of Microcomputers Mathematics
Data Processing
Troubleshooting Win98 and WinXP PC Troubleshooting Glossary HTML and Programs PHP and Programs JavaScript (in progress) Creation of several Sites
Forums
Electronic Forum and Infos Electronic Forum and Poetry
Miscellaneous and others
Form of the personal pages News XML Statistics CountUs JavaScript Editor Our Partners and Useful Links Partnership Manager Our MyCircle Partners Surveys 1st Guestbook 2nd Guestbook Site Directories




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 Divisions HTML :


Les Divisions HTML :


Tout texte technique ou scientifique est habituellement divisé selon des paragraphes subissant une numérotation hiérarchique du type ci-après : 1. 1. 1, 1. 1. 2, 1. 1. 3, 1. 2. 1, etc. La plupart des traitements de texte gèrent ces formats de numérotations automatiques, en affectant la taille des caractères d'un titre, en fonction de son niveau dans la hiérarchie.

Dans le langage HTML, encore une fois, tout est à la charge de l'auteur. Celui-ci dispose de six grosseurs de titre vont lui permettre de diviser son document ou ses pages HTML et d'un système de liste que nous verrons par la suite dans nos études.

<Hn> :

C'est la balise affectant la taille des caractères dans laquelle n varie de 1 à 6. Les plus gros ont la valeur 1 et les plus petits la valeur 6. Le texte entre ces balises est traité en caractère gras.

La balise de début et la balise de fin génèrent automatiquement un espace de type nouveau paragraphe, (passage à la ligne avec espace correspondant environ au saut d'une ligne).

Exemple :

<h1> Po&egrave;mes de Jean-Claude </h1>

<h2> Les Tulipes </h2>

Quand je vais chez le fleuriste <br>

Je n'ach&egrave;te que des Tulipes <br>

. . . .

<h4> Auteur : Jean-Claude </h4>

Pour visualiser l'aperçu, en cliquant ici. (N'oubliez pas de cliquer sur le bouton droit de votre souris afin d'ouvrir le menu contextuel, puis de pointer sur affichage "code source").

Poemes_JC.PNG

Image correspondante au code source :

Poemes_Code_Source.PNG

Jusqu'à présent, rien de compliqué concernant le code source HTML. Il suffit de bien retenir les mots clés.

<BR> :

Lorsqu'on exécute du code HTML, les browsers traitent le texte au kilomètre dans la largeur de leur fenêtre et ignorent le découpage en ligne tel qu'il existe dans le fichier source. La longueur des lignes sera donc fonction de la taille que fixe le lecteur en dimensionnant la fenêtre de son browser. Il appartient à l'auteur du document de provoquer, lorsqu'il le souhaite, un passage à la ligne. La balise <BR> qui génère ce passage est une balise vide, c'est-à-dire qu'il n'y a pas de balise de fin (</BR> ne s'utilise pas).

Exemple :

Quand je vais chez le fleuriste, <br> je m'ach&egrave;te que des Tulipes que j'adore ! <br>

Si ma chanson

chante triste. <br> C'est que l'amour n'est plus l&agrave; !!!

Auteur : <h4> Pierrot la Tulipe </h4>

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

Le retour à la ligne derrière la phrase « Si ma chanson », sera ignoré par le browser. En revanche, l'absence de balise <BR> derrière la phrase « C'est que l'amour n'est plus là. » n'est pas gênante car la balise <H4> va provoquer un retour à la ligne et un espacement inter-paragraphe.

Poemes_Auteur_Pierrot_la_Tulipe.PNG


<P> :

La balise <P> provoque le passage au paragraphe suivant. Nous verrons par la suite que cette balise peut être comptée ou complétée par de nombreux attribus. Tout comme <BR>, cette balise est généralement considérée comme une balise vide, bien qu'il soit tout à fait valide de terminer un paragraphe par </P>.

<P> est différent de <BR> : elle provoque un passage à la ligne et décale la ligne suivante d'un espace d'environ une ligne (espacement inter-paragraphe).

N.B. : C'est préférable de mettre une balise de fin </P> afin de rendre le code plus agréable et plus compréhensible de façon, en cas de maintenance, cela rendra plus facile de mettre de l'ordre dans son code source.

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

Exemple :

<h3> Le grand homme </h3>

Chez un tailleur de pierre <br> o&ugrave; je l'ai rencontr&eacute; <br>

il faisait prendre ses mesures <br> pour la post&eacute;rit&eacute;.

<p> Auteur : Jean-Pierre </p>

Poemes_Auteur_Jean_Pierre.PNG

<HR> :

C'est une balise de division graphique qui provoque un trait horizontal sur toute ou partie de la largeur de la fenêtre du browser.

Exemple :

<h3> Le grand homme </h3>

Chez un tailleur de pierre <br> o&ugrave; je l'ai rencontr&eacute; <br>

il faisait prendre ses mesures <br> pour la post&eacute;rit&eacute;. <hr>

<p> Auteur : Jean-Pierre </p>

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

Ce qui donne ceci :

Poemes_avec_Trait_HR_Jean_Pierre.PNG

D'autres attributs permettent de régler certains paramètres de cette balise <HR> :

L'attribut SIZE :

Il définit en pixels l'épaisseur du trait <HR SIZE=valeur>.

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

L'attribut WIDTH :

Définit soit en pourcentage de la largeur de la fenêtre, soit en valeur absolue (pixels), la longeur du trait horizontal <HR WIDTH=valeur>.

Exemple :

<HR WIDTH=50%>    <HR WIDTH=100>

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

L'attribut ALIGN :

Dans le cas où l'on spécifie une longueur du trait inférieure à 100%, cela permet de positionner le trait horizontalement dans la fenêtre du browser <HR ALIGN=valeur>. Les valeurs possibles sont LEFT (positionnement à gauche), RIGHT (positionnement à droite), CENTER (positionnement au centre, valeur prise par défaut).

Exemple :

<HR WIDTH=50% ALIGN=LEFT>

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

L'attribut NOSHADE :

Permet de supprimer l'effet de relief du trait horizontal.

Exemple :

<HR WIDTH=75% SIZE="8" NOSHADE>

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

<PRE> :

Cette balise <PRE> permet de respecter la mise en page précise d'un texte ou d'une portion de texte, de la façon dont elle a été définie dans le fichier HTML.

Le browser interprète ce texte préformaté à l'aide d'une police de caractères non proportionnelle, ce qui autorise des alignements de type tableau.

Exemple :

<HTML>

       <HEAD>

               <TITLE> Tableau pr&eacute;format&eacute; </TITLE>

       </HEAD>

                   <BODY>

                             <H2> Exemple de tableau en texte pr&eacute;format&eacute; (&lt; pre&gt;) </H2>

                                   <PRE>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

|         LUNDI      |       MARDI            |          MERCREDI         |         JEUDI          |       VENDREDI          |         SAMEDI          |           DIMANCHE         |

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

                                   </PRE>

                   </BODY>

</HTML>

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

Ce qui nous donne ceci :

Texte_Preformate.PNG

Les espaces consécutifs sont préservés à l'inverse du texte situé en dehors de ces balises où plusieurs espaces sont compactés en un seul.

On utilisera pas de balise de mise en page dans un bloc préformaté (<BR>, <P> <H>, etc.) et on évitera le caractère de tabulation. En revanche, il est tout à fait permis d'inscrire des liens vers d'autres documents ou pages HTML. (Concernant les liens, on verra cela par la suite de nos études).

La balise <PRE> admet l'attribut WIDTH qui permet de fixer le nombre de colonnes dans lesquelles se situe le texte non formaté (<PRE WIDTH=40> par exemple). Si cet attribut est absent, la valeur prise par défaut est 80 colonnes. Cet attribut n'est pas interprété par tous les browsers.

RÉSUMÉ DE CETTE TROISIÈME LEÇON :

Les balises suivantes permettent de structurer le document par l'adjonction de titres de diverses tailles et le réglage de la longueur des lignes et des paragraphes :

  • <Hn> Avec n = 1 à 6 où 1 est la taille maximale des caractères. Un espacement vertical de type paragraphe est généré par ces balises.

  • <BR> Force un retour à la ligne.

  • <P> Déclenche le passage au paragraphe suivant.

  • <HR> Permet de tracer un trait horizontal en travers de la page, avec différents réglages rendus possibles par les attributs :

  • <SIZE> Règle l'épaisseur du trait (en pixels).

  • <WIDTH> Règle la longueur du trait horizontal soit relativement à la largeur de la page (%), soit en valeur absolue (pixels).

  • <ALIGN> Positionne le trait à droite, à gauche ou au centre (RIGHT, LEFT, CENTER) dans le cas où il est inférieur à la largeur de la page.

  • <NOSHADE> Supprime l'effet 3D du trait.

  • <PRE> Permet de conserver le formatage du texte délimité par cette balise tel qu'il a été saisi dans le fichier source HTML.

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









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

compteur visite blog gratuit


Mon audience Xiti



Send an email to Corporate Webmaster for any questions or comments about this Web Site.

Web Site Version : 11. 5. 12 - Web Site optimization 1280 x 1024 pixels - Faculty of Nanterre - Last modification : JANUARY 02, 2020.

This Web Site was Created on, 12 JUNE 2019 and has Remodeled, in JANUARY 2020.