Créée le, 19/06/2015

 Mise à jour le, 29/06/2020

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 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 23 MAI 2019

compteur de visite

    




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

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 29 JUIN 2020.   

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