Les Séparateurs Et Les Paragraphes En HTML

Home » Code Source Paragraphe » Les Séparateurs Et Les Paragraphes En HTML

Maybe your like

Le marqueur <p>: Ce marqueur permet de faire appara�tre un double retour de ligne sur le document brows� apr�s l'endroit o� il a �t� ins�r�. Dans la version 2.0 du language HTML, il correspondait � un marqueur vide, alors que dans la version HTML 3.0 il est un marqueur conteneur et il poss�de un param�tre. Voici un exemple comme marqueur vide
code de l'exempleexemple vu à travers un browser
et il s'en alla. <p> Le lendemain matin alors que... et il s'en alla.

Le lendemain matin alors que...

Dans la version 3.0, le marqueur devient conteneur et a comme paramètre align= qui permet de définir l'alignement du titre. Les trois valeurs qu'il peut prendre sont: left, right, center, correspondant respectivement à un alignement à gauche, à droite, et centré. Voici un exemple du marqueur conteneur.

code de l'exempleexemple vu à travers un browser
et il s'en alla. <p align=right> Le lendemain matin alors <p> que... et il s'en alla.

Le lendemain matin

alors que...
On peut voir sur cet exemple que le marqueur insére un double retour à la ligne, de plus il permet de mettre en retrait à droite la partie marquée.

  • Le marqueur <br>: Ce marqueur permet de faire un retour à la ligne. C'est un marqueur vide. Il ne possède qu'un seul paramètre définit par Netscape, il s'agit de "clear=", il permet de forcer l'alignement du texte. Lors d'insertion d'image dans un texte, ce paramètre peut s'avérer utile. Les différentes valeures que peut prendre ce paramètre sont: left, right, all. Voici un exemple:
    code de l'exempleexemple vu à travers un browser
    et il s'en alla. <br> Le lendemain matin alors que... et il s'en alla. Le lendemain matin alors que...

  • Le marqueur <hr>: Ce marqueur permet de créer une ligne horizontale ce qui permet de faire des séparations claires dans un document. Ce marqueur est vide. Netscape a introduit différents paramètres permettant de varier la longueur, la largeur, l'alignement de cette ligne. Voici un exemple du marqueur sans paramètre le code est : <hr> Voici ce que cela donne une fois browsé: Passons en revue les paramètres
    • Le paramètre "size=" permet de déterminer la largeur de la ligne en pixels. Sans ce paramètre la valeur de la ligne est par défaut de 1.
    • Le paramètre "width=" permet de déterminer la longueur de la ligne. Elle peut être exprimée soit en pixels, soit en pourcentage par rapport à la largeur de la fenêtre.
    • Le paramètre "align=" permet de forcer l'alignement de la ligne. Les valeurs possibles sont: left, right, center. L'utilisation de ce paramètre n'a de sens que dans la mesure oú la longueur de la ligne est inférieur à celle de la page.
    • Le paramètre "noshade" permet de faire apparaître la ligne sans ombre, elle ne prend donc aucune valeur.

    Voici quelques exemples

    • le code est: <hr size=4 width=30% align=center > voici ce que cela donne une fois "browsé":
    • le code est:<hr noshade > voici ce que cela donne une fois "browsé":

    Les Paragraphes

    Dans la mise en page d'un texte, il est préférable de ne pas mettre tout le texte en un seul bloc, mais plutôt de le séparer en plusieurs parties, en paragraphe. Un espace blanc sépare les paragraphes entre eux, de même que le début d'un paragraphe commence légèrement décalé, en retrait sur la droite.

    Définition

    Les paragraphes dans le language HTML regroupent trois marqueurs qui permettent de faire des paragraphes soit des parties de texte en retrait par rapport au reste du texte, d'afficher du texte en format pré-formatté, et d'afficher des indications sur l'auteur et la création du document, etc.

    Principe:

    Les trois marqueurs sont : <blockquote>, <:pre>, <address> . Ils sont tous les trois des marqueurs conteneurs. Nous allons voir le principe de chaque marqueur:

    • Le marqueur <blockquote> Ce marqueur permet de décaler un paragraphe à droite. C'est un marqueur conteneur. Il est aussi possible d'imbriquer plusieurs de ces marqueurs les uns dans les autres de manière à les mettre en retrait les uns par rapport aux autres. Voici un exemple:
      Le code sourceune fois browsé
      bla bla bla bla bla bla bla bla bla <blockquote> paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe </blockquote> bla bla bla bla bla bla bla bla bla
      paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe paragraphe

    • Le marqueur <:pre> Ce marqueur permet d'afficher du texte en format pré-formatté, soit en caractères non-proportionnel, ce qui veut dire que ce qui sera affiché le sera tel quel et non en fonction de la taille de la fenêtre du browser. Ainsi si l'on diminue la taille de la fenêtre du browser une partie du texte va disparaître au lieu de se réajuster comme avec des caractères proportionnels. Ce tag est utile si l'on veut faire une certaine mise en page requérant un certain nombre d'espaces.Ceci veut dire par exemple que vous pourrez afficher autant d'espace que vous voudrez, ce qui n'est pas le cas sans ce marqueur. Ce marqueur est un marqueur conteneur. Voici un exemple:
      Le code source une fois browsé
      il était un < pre > petit navire qui n'avait ja ja jamais navigué </pre> il était un petit navire qui n'avait ja ja jamais navigué

      Voici ce que donnerait ce meme exemple sans le marqueur:

      Le code source une fois browsé
      il était un petit navire qui n'avait ja ja jamais navigué il était un petit navire qui n'avait ja ja jamais navigué
      Notez la différence de font dans la partie préformattée. En effet au lieu d'afficher le font par défaut du browser, il affiche le font utilisé lors de l'écriture du code source. Essayer de diminuer la taille de la fenêtre pour voir comment varie l'affichage d'un texte préformaté et normal.

    • Le marqueur <address> Ce marqueur permet de donner des indications sur l'auteur, la date de création, la version du document, etc. On peut y insérer des liens sur par exemple la home page du créateur, toutefois les marqueurs de paragraphe (titre, blockquote, etc) sont à éviter. Ce marqueur est un marqueur conteneur. Habituellement on le place à la fin du document. Le browser Netscape affiche la partie marquée en italique. Voici un exemple:
      Le code source une fois browsé
      <address> Ce document a été créé par [email protected]<br> Dernière modification 3/4/1799<br> <a href="http://www.earth.wind.fire./dupond/youhou.html"> Moa </a><br> </address> Ce document a été créé par [email protected] Dernière modification 3/4/1799 Moa

    Exercice:

    L'exercice que nous vous proposons consiste à créer un fichier nommé sépexercice.html. Essayez de faire en sorte que le contenu de ce fichier une fois browsé soit identique à celui proposé ci-dessous.

    capture d'un fichier html

    Erreurs fréquentes:

    Il n'y a pas d'erreurs fréquentes typiquement lié aux marqueurs cités précédemment. Nous rappellerons donc ici quelques erreurs générales.
    • Si le marqueur utilisé ne marche pas commencez par vérifier son orthographe. Par exemple n'écrivez pas le marqueur de paragraphe <address> comme en français soit <adresse>. Si vous l'avez écrit dans une orthographe française, il ne marchera pas.

    • Si le marqueur utilisé est un marqueur conteneur et qu'il ne marche pas, vérifiez que vous avez bien mis le marqueur de fin et qu'il contient bien un slash, "/".

    • Si votre marqueur ne donne pas l'affichage souhaité, vérifiez que vous l'avez mis au bon endroit.

    • Si le paramètre "align=" du marqueur <hr> ne marche pas, vérifiez que sa longueur n'est pas celle de la longueur de la fenêtre du browser. Si c'est le cas changer la valeur de sa longueur au moyen du paramètre "width="

    Corrigé

    Voici le corrigé de l'exercice:
    Code source: fichier sépexercice.html
    <html> <head> </head> <body> Il lui semblait qu’il pourrait aller plus loin, qu’il percerait de nombreux secrets, et les couleurs offertes à lui, en regardant à travers son objectif. <p> <hr noshade size=2 width=30 align=left> Ce qu’il aimait avant tout c’était la photographie. <blockquote>L’idée de capturer des instants volés au temps <blockquote>était pour lui autant de pouvoirs, </blockquote> une sorte de revanche sur la nature, </blockquote>sur la vie décidément trop courte. <p><p> <pre> Chaque photo représentait une nouvelle liberté, un autre monde que lui seul pouvait contempler. </pre> Cependant son bonheur n’était de loin pas total, il s’était récemment fixé un nouveau but, celui de la photo parfaite, <hr size=3 align=center width=25%> <address>Extrait d'une nouvelle de P. Kumquatte <br> <a href="http://www.planet.des.fleurs/or_ki_dé/Litteul_ap.html">Zi Creatrice</a> </addres> </body> </html>

    3. Conclusion

    En conclusion voici ce que vous devez retenir. Les marqueurs Séparateurs sont :
    • le marqueur vide <p> qui permet d'insérer un double retour à la ligne dans le fichier, il peut devenir marqueur conteneur et a alors comme paramètre align= .
    • le marqueur vide <br> qui permet d'insérer un retour à la ligne, son paramète est clear= .
    • le marqueur vide <hr> qui permet d'insérer une ligne pleine, ses paramètres sont align= , size= , width= , noshade.
    Les marqueurs Paragraphes sont:
    • le marqueur conteneur <blockquote> qui permet de faire commencer un paragraphe en retrait par rapport au reste du texte.
    • le marqueur conteneur <pre> qui permet d'afficher du texte en format pré-formatté
    • le marqueur conteneur <address> qui permet d'afficher des informations relatives au créateur du fichier

    4. Les références

    Il existe différents manuels HTML on-line sur le Web traitant du même sujet:
    • Beginner's guide:les séparateurs
    • Beginner's guide: les paragraphes
    • Un autre guide: paragraphe
    • paragraphes et séparateurs

    Y.P.S

    • Tag » Code Source Paragraphe