HTML: Formats de paragraphes
Texte préformaté
Vous avez déjà constaté que le client Web effectuait lui même la mise en page et déterminait les retours à la ligne dans vos paragraphes en fonction de la largeur de sa fenêtre d'affichage. Lorsque ceci présente un risque de confusion (cas de l'affichage d'un code source) ou que vous désirez écrire dans une fonte à espacement fixe (cas de colonnes de chiffres), vous pouvez utiliser le style <PRE>.
Ceci est un texte ... préformaté Il est reproduit tel qu'il apparaît dans le source de la page HTML. ...sauf les marqueurs qui sont toujours interpétés: Gras
<PRE> Ceci est un texte ... préformaté Il est reproduit tel qu'il apparaît dans le source de la page HTML. ...sauf les marqueurs qui sont toujours interpétés: <STRONG>Gras</STRONG> </PRE>
Citation
Le style <BLOCKQUOTE> pour afficher une citation en retrait par rapport au texte normal:
Ceci est une citation. Elle apparaît en retrait par rapport au texte normal.
<BLOCKQUOTE> Ceci est une citation. Elle apparaît en retrait par rapport au texte normal. </BLOCKQUOTE>
Sous HTML 3, vous pouvez remplacer <BLOCKQUOTE> par <BQ> ce qui est plus rapide à taper. Vous pouvez également faire suivre la citation de sa source en utilisant les marqueurs <CREDIT> et </CREDIT>. Ex:
<BQ> Working is an unnatural act! <CREDIT>Kevin D. Love</CREDIT> </BQ>
Adresse
Le style <ADDRESS> vous permet de préciser vos coordonées en bas de la page (ce qui permet à quelqu'un qui se trouve parachuté sur votre page depuis ailleurs de s'y retrouver), mais dans un style différent (généralement traduit par une mise en italique).
Ceci est une adresse.<planque@worldnet.net>
<ADDRESS> Ceci est une adresse.<BR> <planque@worldnet.net> </ADDRESS>
HTML: Comment créer des listes
HTML vous offre la possibilité de créer des listes dans lesquelles chaque élément se trouve sur une ligne différente.
Il existe différents types de listes:
Listes non numérotées
- Lait
- Chocolat
Café
- Noir
Au lait
Avec du sucre
- Blanc
- Roux
- Sans sucre
Ce type de liste est réalisé grâce aux marqueurs <UL> et </UL> (Unordered List). Chaque entrée de liste est signalée avec le marqueur <LI> (LIst entry):
<UL> <LI>Café <LI>Chocolat <LI>Lait </UL>
Liste numérotée
- Ouvrez
- Entrez
- Fermez
- La porte
- La fenêtre
- La bouteille
- De lait
- D'eau
- De pinard
<OL> <LI>Ouvrez <LI>Entrez <LI>Fermez </OL>
Liste de définitions
- HTML
- HyperText Markup Language
- WWW
- World Wide Web
<DL> <DT>HTML <DD>HyperText Markup Language <DT>WWW <DD>World Wide Web </DL>
HTML: Liens hypermédia
Le principal atout de HTML réside dans ses possibilités hypermédia. En effet, vous avez la possibilité (grâce au marqueur <A>
) de transformer certains mots, icônes ou images d'une page en sortes deboutons qui, lorsqu'ils sont sélectionnés, renvoient vers un autre paragraphe, une autre page, une image, un son, un clip vidéo, etc...
Il existe plusieurs types de liens différents...
Liens vers un autre document
Ceci est un lien vers une autre page Web nommée gato.html dans le même répertoire que la page courante. Voici comment il a été réalisé:
Ceci est un <A HREF="gato.html">lien vers une autre page Web nommée gato.html</A> dans le même répertoire que la page courante.
Ceci est un lien vers une autre page Web dont le chemin d'accès est indiqué relativement à la page courante:
Ceci est un <A HREF="../Publier/copyright.html"> lien</A> vers une autre page Web dont le chemin d'accès est indiqué relativement à la page courante.
Notez:
- Pour séparer les noms de dossiers, vous devez utiliser des slash
/
, même si vous travaillez sous MS-DOS où vous avez coutume d'utiliser des backslash\
. - Pour remonter au dossier supérieur, il faut utiliser le nom
..
(point-point)
Liens vers un autre serveur
Ceci est un lien vers un autre serveur - celui de l'UTC. Pour réaliser un tel lien, vous devez indiquer dans HREF une URL complète:
Ceci est un <A HREF="http://www.utc.fr/">lien vers un autre serveur</A> - celui de l'UTC.
Liens à l'intérieur d'un document
Ceci sont des liens vers le début et la fin de page. On les réalise en indiquant dans HREF le nom d'une étiquette précédé d'un dièse #
:
Ceci sont des liens vers le <A HREF="#etiquette_debut"> début</A> et la <A HREF="#etiquette_fin">fin</A> de la page.
Mais bien sur, il faut pour celà avoir défini de telles étiquettes dans la page HTML. C'est ce que nous avons fait au début et à la fin de la présente page de la manière suivante:
<A NAME="etiquette_debut"><EM>Début de la page</EM></A> <A NAME="etiquette_fin"><EM>Fin de la page</EM></A>
HTML : Titres
Vous pouvez structurer vos pages à l'aide de titres de différentes importances grâce aux marqueurs <H1> à <H6>:
<H1>Titre de niveau 1</H1> <H2>Titre de niveau 2</H2> <H3>Titre de niveau 3</H3> <H4>Titre de niveau 4</H4> <H5>Titre de niveau 5</H5> <H6>Titre de niveau 6</H6>
Ce qui donne le résultat suivant à l'affichage:
Titre de niveau 1
Titre de niveau 2
Titre de niveau 3
Titre de niveau 4
Titre de niveau 5
Titre de niveau 6
HTML: Retours à la ligne et paragraphes
Vous pouvez revenir à la ligne quand bon vous semble lorsque vous tapez du texte, cela n'aura aucune influence sur la manière dont le browser affichera le texte en question. En effet, HTML considère tout espace, suite d'espaces, tabulation(s) ou retour(s) à la ligne comme une simple séparation entre deux mots. Ainsi lorsque vous tapez ceci:
Oh qu'il est beau! Oui qu'il est beau! Il est beau mon paragraphe! Car il contient des jolis sauts de lignes! Mais qu'il est beau :-)
... vous obtenez ceci:
Oh qu'il est beau! Oui qu'il est beau! Il est beau mon paragraphe! Car il contient des jolis sauts de lignes! Mais qu'il est beau :-)
Vous constaterez que votre browser n'a pas tenu compte des retours à la ligne ni des espaces multiples se trouvant entre les mots.
Retour à la ligne forcé
Si vous voulez revenir à la ligne dans un paragraphe, vous devez le spécifier explicitement avec <BR>
. Par exemple:
Oh qu'il est beau! <BR> Oui qu'il est beau!
donnera l'affichage suivant:
Oh qu'il est beau!
Oui qu'il est beau!
Changement de paragraphe
Maintenant, si vous voulez changer de paragraphe, en sautant une ligne comme il se doit, vous pouvez le faire avec<P>
. Par exemple:
Il est beau mon paragraphe! <P> Celui-ci aussi, il est beau, non?
donnera l'affichage suivant:
Il est beau mon paragraphe!
Celui-ci aussi, il est beau, non?
[Note: il serait en fait plus correct d'écrire ceci:]
<p>Il est beau mon paragraphe!</p> <p>Celui-ci aussi, il est beau, non?</p>
[Le résultat à l'affichage serait rigoureusement identique.]
Séparation horizontale
Finalement, si vous voulez marquer une séparation très nette entre différentes sections d'une page, vous pouvez utiliser le marqueur <HR>
qui tracera un trait horizontal en travers de votre page. Cette page en comporte plusieurs.
Récapitulatif:
<BR>
- Retour à la ligne forcé (sans sauter de ligne, même deux <BR> successifs ne vous feront pas sauter de ligne!)
<P>
- Changement de paragraphe (avec saut de ligne). Il n'y a pas d'autre solution pour sauter de ligne.
<HR>
- Traçage un trait de séparation horizontal.