Éducation, société et technologie

Les entêtes (HEAD) des pages Web

vendredi 30 novembre 2007 par André Vincent

Tout ce qui est inséré dans l’entête <HEAD> d’une page Web ne s’affiche généralement pas à l’écran. Mais cette partie peut néanmoins contenir des informations très précieuses ainsi que des instructions pour les moteurs de recherche et les logiciels de navigations. Ces informations ou instructions sont insérées à l’aide des éléments TITLE, META, LINK, STYLE, SCRIPT et BASE.

  Sommaire  

Pour plus de détails, consulter :

 META

Attribut : http-equiv="Content-Type"
Utilisation : Indique le jeu de caractères utilisé dans la page et le type d’encodage.
Exemple : <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Voir aussi : Jeux de caractères, encodages et entités

Attribut : http-equiv="Content-Language"
Utilisation : Indique la ou les langues du site*.
Exemple : <meta http-equiv="Content-Language" content="fr" />
Attribut : name="Description"
Utilisation : Indique la description du site* (maximum 200 caractères).
Exemple : <meta name="Description" content="information, nouvelles, actualit&eacute;, m&eacute;dia" />
Attribut : name="Keywords"
Utilisation : Informe les moteurs de recherche du contenu du site avec des mots-clés* (maximum 1000 caractères).
Exemple : <meta name="Keywords" content="web, conception sites, html, css, internet, webdesigner, infographiste, graphisme" />
Attribut : name="Generator"
Utilisation : Indique l’éditeur html avec lequel le site a été construit.
Exemple : <meta name="Generator" content="Arachnophilia" />
Attribut : name="author"
Utilisation : Indique le nom de l’auteur
Exemple : <meta name="author" content="Sarah CANKAYA" />
Attribut : name="Copyright"
Utilisation : Permet de poser un copyright.
Exemple : <meta name="Copyright" content="Jolies pages web" />
Attribut : name="Distribution"
Utilisation : Indique la spécification de distribution du site :

Global = Diffusion large,

Local = Diffusion restreinte

Exemple : <meta name="Distribution" content="Global" />
Attribut : name="Robots"
Utilisation : Indique aux moteurs d’indexer ou non votre site web

All (par défaut) permet aux robots d’indexer et de suivre les liens hypertextes d’une page à l’autre,

None = de ne pas indexer et de ne pas suivre les liens,

Index = permet d’être indexé par les robots,

NoIndex = indique aux robots de ne pas indexer,

Follow= indique aux robots de suivre les liens hypertextes des pages,

NoFollow= indique aux robots de ne pas suivre les liens hypertextes des pages.

Exemple : <meta name="Robots" CONTENT="All,Index,Follow" />
Attribut : name="revisit-after"
Utilisation : Indique aux robots la prochaine date de visite de reindexation (ne peut être inférieur à 14 jours).
Exemple : <meta name="revisit-after" content="25 days" />
Attribut : name="reply-to"
Utilisation : Indique le courriel de l’auteur du site
Exemple : <meta name="reply-to" content="webmaster@joliespages.com" />
Attribut : name="owner"
Utilisation : Indique le nom du propriétaire du site
Exemple : <meta name="owner" content="Joe Blo" />
Attribut : name="Rating"
Utilisation : Spécifie le public cible du site :

General = Tout public,

Mature = Public averti,

Restricted = Accès privé

Exemple : <meta name="Rating" content="General" />
Attribut : http-equiv="expires"
Utilisation : Indique la fin de la date de validité de la page, et oriente le navigateur à revisiter la page sur le serveur sans le cache.
Exemple : <meta http-equiv="expires" content="2003-01-30" />
Attribut : http-equiv="refresh"
Utilisation : Indique au navigateur de charger une nouvelle page après un temps donné (redirection sur une autre page, un autre site, ou page avec une webcam).
Exemple : <meta http-equiv="refresh" content="10; URL=http://www.joliespages.com/pages/reference1" />
Attribut : http-equiv="Window-target"
Utilisation : Force à afficher le contenu de la page dans une fenêtre a part (évite les liens dans les frames).
Exemple : <meta http-equiv="Window-target" content="_top" />

 LINK

rel="stylesheet" : feuille de style

Attributs : href="css/styles.css"
type="text/css"
media="projection, screen, tv"
Utilisation : Établie le lien vers une feuille de styles externe. Les attributs href et type sont obligatoires. L’attribut optionnel media indique le ou les media auxquels la feuille de style s’applique ; les valeurs possibles sont : screen, tty, tv, projection, handheld, print, braille, aural, all.
Exemple : <link rel="stylesheet" href="css/styles.css" type="text/css" media="projection, screen, tv"  />

rel="shortcut icon" - ou favicon : l’icône d’identification d’un site web

Ce sont ces petits icônes qui apparaissent devant l’adresse d’une page web dans la barre d’adresse des logiciels de navigation. Voici un exemple :

  • Les dimensions de ces icônes sont de 16 x 16 pixels ou 32 x 32 pixels.
  • Le format d’enregistrement est :
    • Windows Icon (.ico)
  • On l’insère dans la partie HEAD de la page Web à l’aide la balise LINK, comme ceci :
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

Certains logiciels de navigation, à l’exception d’Internet Explorer, préféreront plutôt le format PNG (.png). Dans ce cas, on doit l’écrire sous cette forme.

<link rel="icon" type="image/png" href="/favicon.png" />

Pour plus de compatibilité, on peut très bien utiliser les deux formes.

La plupart des logiciels de traitement d’images (dont Photoshop) peuvent générer des images au format PNG. Pour le format ICO, c’est plus rare. Voici un fomulaire de vous permettra de convertir facilement toute image du format :

Vous trouverez plus de détails en consultant les sites suivants :

Note : à compléter...


Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 12525 / 1819965

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Généralités   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 2