Exercice HTML : Attributs de page

Thème

Définition des couleurs en HTML.

Attributs de base d'une page HTML : couleurs du texte et des liens, couleur du fond, image de fond, balises META...

Balises

Spécification des couleurs en HTML
(au niveau des attributs COLOR ou BGCOLOR des tags <BODY>, <FONT>, <TABLE>, <TR>, <TH>, <TD>...)

soit par ses composantes RGB (0 à 255) exprimées sous forme hexadéc. (00 à FF) par triplet : "#RRGGBB"
exemples : "#000000" = black, "#FF0000" = red, "#FFFF00" = yellow, "#FFFFFF" = white ...
soit par son nom : 16 noms standards définis dans la spécification HTML 4.0 :
aqua black blue fuschia gray green lime maroon navy olive purple
red silver teal white yellow

red = #FF0000	lime = #00FF00	blue = #0000FF
yellow = #FFFF00	fuchsia (magenta) = #FF00FF	aqua (cyan) = #00FFFF
black = #000000	white = #FFFFFF

gray = #808080 green = #008000 maroon = #800000

navy = #000080 olive = #808000 purple = #800080

silver = #C0C0C0 teal = #008080

gray = #808080	green = #008000	maroon = #800000
navy = #000080	olive = #808000	purple = #800080
silver = #C0C0C0	teal = #008080

ou encore d'autres noms de couleur standards utilisés moins couramment

Attributs de base d'une page HTML (balise BODY)

Spécification de la couleur du texte, des liens non visités et des liens visités :
<BODY TEXT="couleur" LINK="couleur" VLINK="couleur"> corps de la page... </BODY>
Spécification de la couleur du fond de page :
<BODY BGCOLOR="couleur"> corps de la page... </BODY>
Définition d'une image en fond de page (répliquée en tuile horizontalement et verticalement) :
<BODY BACKGROUND="URL de l'image"> corps de la page... </BODY>
Couleur de fond de page et image de fond peuvent être combinés, pour autant que l'image possède une transparence (en format GIF89a)
Définition des marges :
     <BODY MARGINWIDTH="taille" LEFTMARGIN="taille"> corps de la page... </BODY>
          défini la marge gauche et droite ;
     <BODY MARGINHEIGHT="taille" TOPMARGIN="taille"> corps de la page... </BODY>
          défini la marge supérieure ;
comme Netscape ne reconnaît que les attributs MARGINWIDTH et MARGINHEIGHT, et que Internet Explorer ne reconnaît que les attributs LEFTMARGIN et TOPMARGIN, il est nécessaire d'utiliser ces 2 attributs pour être certain de l'effet sur les 2 navigateurs !

Rappel : voir aussi la balise <BASEFONT...> et les feuilles de style CSS1 pour changer la couleur du texte globalement pour toute une page.

Balises META
(à placer dans le bloc <HEAD>...</HEAD>)

Spécification du type de document (ici HTML) et du jeu de caractères utilisé (ici iso-latin-1) :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
Spécification de mot-clés pour la page, à l'usage des moteurs de recherche :
<META NAME="KEYWORDS" CONTENT="mot-clé, mot-clé, mot-clé...">
Spécification d'un résumé de la page, à l'usage des moteurs de recherche :
<META NAME="DESCRIPTION" CONTENT="petit résumé...">
Demande d'exclusion d'indexation de la page {et des pages pointées} par les moteurs de recherche :
<META NAME="ROBOTS" CONTENT="noindex {,nofollow}">
Demande aux moteurs de recherche de revisiter la page après x jours (pour pages changeant souvent, à utiliser conjointement avec balise <META HTTP-EQUIV="EXPIRES" ...> décrite plus bas) :
<META NAME="REVISIT-AFTER" CONTENT="x Days">
Page Web chargeant automatiquement une autre page après un laps de temps donné
(technique typiquement utilisée par les sites de WebCam, ou pour indiquer le changement d'adresse d'un site) :
<META HTTP-EQUIV="REFRESH" CONTENT="secondes; URL=URL">
Indication de la durée de validité (expiration) d'une page dans le cache d'un navigateur ou dans l'index d'un moteur de recherche :
<META HTTP-EQUIV="EXPIRES" CONTENT="Tue, 01 Jun 1999 19:58:02 GMT">
Cette balise indique qu'au-delà de la date/heure spécifiée :
- le browser, lorsque l'on se rend à cette URL, doit télécharger une nouvelle fois la page (et ne pas afficher celle qu'il possède dans son cache)
- le moteur de recherche doit détruire la référence à cette page dans son index
Pour spécifier qu'une page "expire toujours" (c'est-à-dire qu'elle doit systématiquement être réenvoyée par le serveur au navigateur chaque fois que l'utilisateur se rend à cette URL) utiliser simplement la valeur d'attribut CONTENT="0"

Balises LINK
(à placer dans le bloc <HEAD>...</HEAD>)

Spécification d'un fichier "favicon" (icône miniature 16x16 pixels, au format des icônes Windows, utilisée dans l'affichage des URLs et des bookmarks à partir des versions de navigateurs IE 5 et Mozilla 1) :
     <LINK REL="SHORTCUT ICON" HREF="URL_fichier.ico">
En l'absence de cette balise, avec IE ≥ 5.0 et Mozilla ≤ 0.9.6 c'est le fichier favicon.ico se trouvant à la racine de l'arborescence du site qui sera automatiquement utilisé. Donc avec Mozilla ≥ 1.0 il faut que la page contienne explicitement la balise ci-dessus, mais celle-ci peut prendre aussi d'autres formes (non supportées par IE) telles que :
     <LINK REL="ICON" HREF="URL_fichier.ico" TYPE="image/x-icon">, ou
     <LINK REL="ICON" HREF="URL_fichier.png" TYPE="image/png">, ou
     <LINK REL="ICON" HREF="URL_logo_animé.gif" TYPE="image/gif">
On pourrait cependant obtenir un comportement similaire à IE avec Mozilla ≥ 1.0 (chargement automatique du fichier favicon.ico se trouvant à la racine de l'arborescence) en introduisant manuellement la définition suivante dans le fichier de préférences Mozilla :
     user_pref("browser.chrome.favison",true);

Références

NCSA "Beginner's Guide to HTML"
Uni. Kansas "ACS HTML Quick reference"
Sur site ENAC-IT1 : sélecteur de couleurs

Exercice

Réalisez la page Web représentée par l'image ci-dessous. Cliquez ici pour la faire apparaître dans votre browser.

Vous trouvez l'image "fond_spirale.gif" à placer en arrière-plan sous R:\Enac-It1\Internet.
Essayez aussi de placer l'image "dgr_gris.gif" en arrière-plan.

Corrigé

	<HTML>
	<HEAD>
	  <TITLE>Corrigé Exercice Attributs de page</TITLE>
	</HEAD>
	<BODY BACKGROUND="fond_spirale.gif" TEXT="navy" LINK="red" VLINK="maroon">
	<BLOCKQUOTE>
	
	<H1>Exercice Attributs de page</H1>
	
	<UL>
	<LI>Cette page contient l'image "fond_spirale.gif"...
	<LI>Pour ménager de la place à gauche pour la spirale...
	<LI>La couleur par défaut du texte est le "navy"...
	<LI>Les liens...
	</UL>
	
	<TABLE ALIGN="center" WIDTH="60%" BGCOLOR="silver" BORDER="1">
	<TR>
	<TH COLSPAN="2">Couleur de fond "silver"</TH>
	</TR>
	<TR>
	<TH BGCOLOR="yellow">Fond "yellow"</TH>
	<TH BGCOLOR="lime">Fond "lime"</TH>
	</TR>
	</TABLE>
	
	</BLOCKQUOTE>
	</BODY>
	</HTML>