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.
Que sont le XHTML et le CSS ?Structure d'une page HTMLLes balises d?entête, head, title, meta...Les balises de corps de page, entre les balises bodyAjouter une image dans la page : balise img (type inline ou block) Insérer des liens : balise a (type inline)Afficher une listeConstruire des tableaux - balise tableCréer des formulaires Les balises universelles : div et spanOù placer le code CSS ?Comment modifier une balise en particulier ?Modifier l'aspect du texteGestion de l'arrière-plan (coloré ou avec des images)Mise en forme du texte : word-spacing , letter-spacing, vertical-align, text-alignMise en forme des balises de type blockLes borduresMise en forme des listesPositionner des blocs HTML à l'écranDébordement d'un bloc HTML : overflowChanger l'aspect de la souris : cursorCas pratique : mise en page à 2 ou 3 colonnesLargeur de site fixe ou variable ?Insertion d'une animation flashInsertion d'une vidéoInsérer un fichier audio
Pour plus d'informations, vous pouvez nous contacter par mail.
Tutos et cours en ligne
