Formation 36

Les balises d?entête, head, title, meta...

A l'exception du titre de la page , toutes les informations comprises entre les balises <head> et </head> ne sont pas affichées à l'écran. Elles servent essentiellement à décrire le contenu de la page (son thème) et donnent des précisions sur son auteur, ou encore les caractères à utiliser (européens, chinois, cyrilliques...) pour que le navigateur affiche le texte dans les meilleurs conditions.

Le titre de la page : balise <title>

Il s’agit du titre qui apparaît dans la barre en haut du navigateur internet. Essayez de trouver un titre assez court, mais qui caractérise bien le contenu de la page.

<title>Le titre de la page</title>

Dans l'idéal, toutes les pages d'un site internet devraient porter un titre différent. Essayez de placer des mots clés pour améliorer votre référencement, tout en restant concis.

Les balises d’informations : balises <meta />

Les balises <meta> donnent des informations supplémentaires sur le contenu de la page : l’auteur, un résumé de la page, les mots clés, l’adresse mail de l’auteur... Il s’agit de balises simples, qui se terminent par “ /> ”. Elles ne possèdent donc pas de balises de fermeture.

<!-- nom de l’auteur - d’autres informations peuvent être ajoutées -->
<meta name= ”author ” content= ”Prénom Nom ” />

<!-- description de la page -->
<meta name= ”description ” content= ”Ici se trouve une decription de la page rédigée en clair. ” />

<!-- mots clés et expressions, séparés par des virgules -->
<meta name= ”keywords ” content= ”mot, expression, expression 2 ” />

<!-- mail de contact -->
<meta name= ”reply-to ” content= ”adresse@mail.com ” />

<!-- pour empécher la mise en cache par le navigateur -->
<meta http-equiv= ”pragma ” content= ”no-cache ” />

<!-- jeu de caractères utilisés (chinois ? cyrilliques ? européens ?) -->
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1” />

<!-- rafraichissement automatique de la page après 5 secondes -->
<meta http-equiv=”refresh” content=”5; URL=http://www.url-de-la-page.com” />

Généralement, seules les balises meta de description, de mots-clés et du jeu de caractères utilisés sont renseignées.

Le code CSS inclus dans la page : balise <style>

Cette balise vous permet d’incorporer des règles CSS dans le code source de la page, sans avoir besoin d’utiliser un fichier CSS externe. Nous y reviendrons plus en détails dans le chapitre consacré au CSS.

<style type="text/css">
... on place le code CSS ici ...
</style>

Insertion d’un code Javascript : balise <script>

Il est possible d’insérer du code Javascript dans une page HTML, ou bien de lier cette page à un fichier Javascript externe (d’extension .js).

<!-- insertion d’un script Javascript -->
<script type= ”text/javascript ”>
/* le code javascript sera placé ici */
</script>

<!-- appel d’un script javascript externe -->
<script type="text/javascript" src="fichier.js"></script>

Ajout d'un favicon : balise <stortcut icon>

Le favicon est le petit logo qui apparaît dans la barre d'adresse du navigateur, juste avant l'adresse de la page consultée. C'est également le logo qui sera associé à votre site si les internautes enregistrent l'une de vos pages dans leurs favoris.

<!-- insertion d’un favicon -->
<link rel="shortcut icon" type="image/gif" href="favicon.gif" />

 

Le favicon est en général une petite image de 16x16px, ou 32x32, au format .gif ou .ico, nommée favicon. Le fichier image doit bien évidemment se trouver dans le répertoire indiqué dans le paramètre href.


Le favicon ne s'affiche pas toujours dans Internet Explorer.


 

 

D’autres balises existent, mais elles sont très peu utilisées et ne seront donc pas abordées ici.

 

 



Pour plus d'informations, vous pouvez nous contacter par mail ou aux coordonnées suivantes :


Contacter CS Formation

 

Tutos et cours en ligne

HTML / CSS