Catégorie: "HTML & CSS"

1. Janvier 1996

HTML: Motif de fond et couleurs

Motif de fond

HTML 3.0 permet de définir un motif de fond pour vos pages. Cette fonction est également supportée par Netscape Navigator depuis la version 1.1, en tant qu'extension de la norme HTML 2.0.

Ceci est obtenu par l'adjonction de l'attribut BACKGROUND au marqueur BODY de votre document, comme ceci:

<BODY BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

Note: Cette méthode est aujourd'hui totalement obsolète. Tournez vous plutôt vers CSS.

Couleurs

L'inconvénient avec certains motifs de fond, c'est que bien souvent, ils rendent impossible la lecture du texte qui s'affiche, par défaut, en noir. Pour remédier a ce probleme, Netscape a integré des attributs supplémentaires au marqueur BODY. Ces attributs ne font pas partie de la norme HTML.

  • TEXT permet de fixer la couleur du texte du document. Par défaut, le texte est généralement noir, sur cette page il est blanc.
  • LINK permet de fixer la couleur des liens du document. Par défaut, les liens sont généralement bleu, sur cette page ils sont vert clair.
  • VLINK permet de fixer la couleur des liens une fois qu'ils ont ete visites. Par défaut, ils sont généralement violets, sur cette page ils sonts vert foncé.
  • ALINK permet de fixer la couleur des liens actifs, c'est a dire la couleur qu'ont les liens au moment ou vous cliquez dessus. Par défaut, ils sont alors généralement rouges, sur cette page, ils sont jaunes.
  • BGCOLOR permet de fixer la couleur du fond du document. Cette couleur sera utilisée a la place du gris ou du blanc habituel si vous n'avez pas indiqué d'image de fond avec l'attribut BACKGROUNDou si cette image n'a pas pu etre chargée pour une raison quelconque.

Pour cette page, nous avons utilisé la définition suivante:

<BODY BGCOLOR="#000000" 
         TEXT="#FFFFFF"
         LINK="#00FF00"
         VLINK="#00A000" 
         ALINK="#FFFF00"
         BACKGROUND="image_de_fond.gif">
  Votre document...
</BODY>

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.

1. Janvier 1996

HTML: Comment intégrer une image

Vous avez sans doute remarqué que beaucoup de pages HTML sur le Web intègrent des images dans le texte. C'est plus agréable à l'oeil, mais plus long à charger. Quoi qu'il en soit, vous pouvez faire de même en sauvegardant vos images à intégrer au format GIF et en les référençant dans le marqueur <IMG>. (Certains clients accepteront également le JPEG, mais pas tous!)

Une image intégrée peut être alignée de différentes façons avec le texte:

Top: WWW 

Middle: WWW 

Bottom: WWW

Voici comment on été intégrées les images ci-dessus:

Top: <IMG SRC="image.gif" ALIGN=TOP ALT="WWW">
Middle: <IMG SRC="image.gif" ALIGN=MIDDLE ALT="WWW">
Bottom: <IMG SRC="image.gif" ALIGN=BOTTOM ALT="WWW">

L'alignement par défaut est BOTTOM.

 

WWWWWWLes browsers plus récents permettent également d'aligner une image à gauche ou à droite du texte. Vous pouvez vous en rendre compte ici si votre browser supporte cette fonction. 
Pour ce faire, il suffit d'utiliser l'attribut ALIGN=LEFT ou ALIGN=RIGHT.

Ensuite, si vous voulez continuer à écrire en dessous de l'image insérée et non plus à côté, vous devez insérer un marqueur <BR> comme ceci:

<BR CLEAR=ALL>

Vous pouvez également utiliser CLEAR=LEFT si vous souhaitez écrire en dessous de l'image de gauche mais pas forcément en dessous de l'image de droite. De même pour CLEAR=RIGHT.

 

Gardez toujours à l'esprit que certains clients seront totalement incapables d'afficher des images. Dans ce cas, ils pourront cependant afficher un texte de remplacement, pour peu que vous l'ayez spécifié dans le marqueur à l'aide du paramètre ALT="...".

 

 

1. Janvier 1996

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:

&lt;
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 ñ
1. Janvier 1996

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 Rouge, Orange, Vert, Bleu, 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é.

1. Janvier 1996

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>