Catégories: "Développement Web"

HTML: Caractères spéciaux et accentués

Certains caractères sont interprétés par HTML et ne peuvent être insérés tels quels dans le texte d'une page. Il faut alors utiliser des séquences d'échappement:

<
permet d'obtenir un <
&gt;
permet d'obtenir un >
&amp;
permet d'obtenir un &
&quot;
permet d'obtenir un "

De même, si vous ne pouvez pas générer des fichiers codés avec le jeu de caractères ISO-Latin-1, vous pouvez utiliser des séquences d'échappement pour produire des caractères accentués. Voici quelques exemples:

&eacute;
permet d'obtenir un é
&Egrave;
permet d'obtenir un È
&ecirc;
permet d'obtenir un ê
&euml;
permet d'obtenir un ë
&iuml;
permet d'obtenir un ï
&ocirc;
permet d'obtenir un ô
&ccedil;
permet d'obtenir un ç
&ntilde;
permet d'obtenir un ñ

Mise en forme HTML

Les styles précédents s'appliquent à des paragraphes entiers. Lorsque vous ne voulez affecter que le style d'un mot ou d'une phrase à l'intérieur d'un paragraphe, vous disposez de marqueurs spéciaux, par exemple <STRONG> pour mettre fortement en valeur - ce qui sera généralement traduit par un affichage en gras.

Notez qu'il existe les marqueurs comme <DFN>précisant le type d'information et d'autres comme <B> précisant le type de police à employer.

 


Type d'information:

Les éléments suivants peuvent être utilisés pour spécifier le type d'information d'un mot ou d'un groupe de mots:

DFN
Instance définissant un mot.
EM
Mise en valeur. Typiquement rendu en italiques.
CITE
Indique une citation ou un titre. Typiquement rendu en italiques.
CODE
Exemples de code source.
KBD
Exemples de saisie clavier.
SAMP
Exemples de messages informatiques.
STRONG
Forte mise en valeur.
VAR
Variables que l'utilisateur doit remplacer avec ses propres donnéees.

Nouveaux éléments définis dans HTML 3: Q, LANG, AU, PERSON, ACRONYM, ABBREV, INS, DEL.

 


Type de fonte:

L'utilisation de ces marqueurs fortement déconseillée au profit des styles logiques ci-dessus. En effet, imaginez que votre page doive être affichée sur un système ne supportant pas l'italique. Dans ce cas, si vous avez par exemple utilisé <EM> au lieu de <I>, le client pourra néanmoins afficher le texte à mettre en valeur sous forme soulignée ou dans une autre couleur, selon ses possibilités...

Les éléments suivants peuvent être utilisés pour spécifier le type de fonte à utiliser pour l'affichage d'un mot ou d'un groupe de mots:

B (Boldface)
Permet d'afficher en gras.
I (Italic)
Permet d'afficher en italique.
TT (TeleType)
Permet d'afficher en style machine à écrire.
U (Underline)
Permet d'afficher en soulignéTrès peu supporté.

Nouveaux éléments définis dans HTML 3: S, BIG, SMALL, SUB, SUP.

Il est possible de combiner différents styles, par exemple <B> et <I> mais il n'est pas garanti que le browser sache afficher du gras+italique, même s'il sait afficher du gras et de l'italique séparément.

 


Couleur des caractères

En utilisant le marqueur FONT et son attribut COLOR vous pouvez forcer la couleur du texte. Voici un exemple:

Ce texte est RougeOrangeVertBleu, etc.

Les codes de couleur doivent être interprétés de la manière suivante: derrière le dièse, on trouve six caractères qu'il convient de grouper deux par deux. Ces groupes de deux caractères représentent l'intensité des couleurs de base rouge, vert et bleu (dans l'ordre) sous forne d'un nombre hexadécimal compris entre 00 et FF.

Quelques exemples de couleurs.

 


Taille des caractères

Texte en taille normale+2=6. 
Texte en taille normale-2=2. 
Texte en taille 1.

 


Police de caractères

Internet Explorer choisira la première police de caractères disponible sur le système parmi la liste de préférences fournie...

Texte en Impact ou Arial selon disponibilite.

Texte en Freehand471 BT ou Brush Script MT selon disponibilité.

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>
&lt;planque@worldnet.net&gt;
</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

  1. Ouvrez
  2. Entrez
  3. Fermez
    1. La porte
    2. La fenêtre
    3. La bouteille
      1. De lait
      2. D'eau
      3. 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

Début de la page


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>

Fin de la page