Webelix.net :: HTML - Attributs de page

Vous êtes ici : Home Page

Cours

HTML

Attribut de page

Imprimer

Informations Membres

	[197] Posts sur le forum
	[181] Membres inscrits

Il y a en ligne :

0 Membre

1 Invité

Membre en ligne:
Aucun

Partenariat

Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers. Rendez-vous dans « Partenariat » pour en savoir plus.

Nom de domaine

Partenaires

Attributs de page

Thème

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"
"#000000" = black, "#FF0000" = red, "#FFFF00" = yellow, "#FFFFFF" = white ...

[Voir notre Palette de couleurs]
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 = #FF00FF	aqua = #00FFFF
black = #000000	white = #FFFFFF

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

Les 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é...">
```

Indique le ou les noms des auteurs :

<meta name="Author" content="Nom de l'auteur{, autres auteurs, ...}">

Indique la ou les catégories dans la quelle ce site se situe :

<meta name="Category" content="Internet, Webmastering{, autres catégories, ...}">

Demande d'indexation de la page {et des pages pointées} par les moteurs de recherche :
```
<meta name="robots" content="index{, follow}">
```
Valeurs possibles :
- index = (cette page sera indexée)
- follow = (les liens seront indexés)
- noindex = (cette page ne sera pas indexée)
- nofollow = (les liens ne seront pas indexés)
all = "index, follow" et none = "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">
```
Indique que la page doit être mise dans le cache du browser :
```
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
```
- no-store = (cette page ne sera pas enregistrer dans l'ordinateur)
- no-cache = (cette page ne sera pas mise en cache dans le browser)
- must-revalidate = (cette page sera revalidée)
Indique que la page ne doit pas être sauvegarder sur les serveurs Proxy :
```
<meta http-equiv="Pragma" content="no-cache">
```
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"

Les 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.favicon",true);
```

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.

Exercice

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

Corrigé :

<html>
<head>
 <title>Corrigé Exercice Attributs de page</title>
</head>

<body background="images/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>
 <li>Pour ménager de la place à gauche pour la spirale...</li>
 <li>La couleur par défaut du texte est le "navy"...</li>
 <li>Les liens...</li>
</ul>
	
<table width="300" bgcolor="silver" border="1">
<tr>
 <th colspan="2">Couleur de fond "silver"</th>
</tr>
<tr>
 <th width="50%" bgcolor="yellow">Fond "yellow"</th>
 <th width="50%" bgcolor="lime">Fond "lime"</th>
</tr>
</table>
	
</blockquote>
</body>
</html>

Les 6 dernières pages de Cours et Dossiers ajoutées

Informations Générales