Les bases du HTML


précédentsommairesuivant

III. L'entête du document - head

La balise <head> contient de nombreux renseignements sur la page, sur l'auteur, ainsi que la plupart des scripts (JavaScript, VBscript,...) et styles CSS.

III-A. Le titre

Le titre de votre page, qui se trouve entre les balises <title> et </title>, est sans doute l'une des balises les plus importantes du document.

En effet, c'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche, donc il faut essayer au maximum d'y mettre les mots-clefs importants.
Il est très conseillé, voire fortement recommandé de mettre un titre unique pour chaque page de votre site, toujours en rapport avec le contenu de la page en question.

Ce titre est également ce qui apparaît dans la barre de titre du navigateur ainsi que dans les signets lorsque vous mettez le site en favoris.

Exemple de titre
Sélectionnez
<title>Tutoriel HTML - Apprenez les bases du HTML</title>




Commentez l'article : 27 commentaires

III-B. Les scripts

Les scripts sont de petits programmes en JavaScript ou en VBScript exécutés côté client qui augmentent l'ergonomie de vos pages lorsqu'ils sont utilisés à bon escient.

On distingue deux moyens d'inclure des scripts :

  • Les scripts externes.
  • Les scripts internes.

III-B-1. Les scripts externes

Les scripts externes sont des fichiers externes à la page, avec l'extension .js par exemple pour les scripts JavaScript.

On les inclut grâce à l'attribut src de la balise <script> :

Balise script
Sélectionnez
<script type="text/javascript" src="chemin/du/fichier/javascript.js"></script>

Dans le cas d'inclusion d'un script externe, tout le code inséré entre les balises <script> sera ignoré !

III-B-2. Les scripts internes

Les scripts internes sont des morceaux de code directement écrits entre les balises <script> et </script>. Ils sont donc insérés directement dans la page comme suit :

Balise script
Sélectionnez
<script type="text/javascript">
    function maFonction()
    {
        /* du code ici */
    }
</script>

Lors de la création d'une fonction, celle-ci est unique à la page, donc pour pouvoir la réutiliser il faut la réécrire dans une autre page : duplication inutile de code.




Commentez l'article : 27 commentaires

III-C. Les styles

Les feuilles de style en cascade ou CSS (Cascading Style Sheets) s'utilisent pour mettre en page notre code HTML.

Aller plus loin avec le CSS

III-C-1. Les styles externes

Il y a deux manières d'importer un fichier CSS externe, soit avec une balise HTML, soit avec du code CSS.

Import avec une balise HTML
Sélectionnez
<link rel="stylesheet" type="text/css" href="chemin/du/fichier.css">
Import avec du code CSS
Sélectionnez
<style type="text/css">
    @import url("chemin/du/fichier.css");
</style>

Quelle méthode doit alors être préférée ?

Au niveau "performance", aucune. Mais on va préférer la seconde méthode pour la simple et bonne raison que cette syntaxe n'est pas reconnue par les anciens navigateurs (comme Netscape 4.x) et donc ceux-ci interprétant très mal les propriétés CSS ne risqueront pas de rendre le site illisible pour le visiteur.

III-C-2. Les styles internes

Les styles internes à la page sont à écrire entre les balises <style> et </style> :

CSS interne
Sélectionnez
<style type="text/css">
    body
    {
        background-color : #fff;
    }
</style>

Les styles internes sont uniques à la page, donc pour pouvoir les réutiliser il faut les réécrire dans une autre page : duplication inutile de code.




Commentez l'article : 27 commentaires

III-D. Les meta

III-D-1. À quoi servent-elles ?

Les balises meta, obligatoirement placées dans la balise <head>, permettent de renseigner diverses informations sur la page en cours, comme son auteur, une courte description du document, des mots-clefs, la date de création, son jeu de caractère (ou encodage), etc.

On peut différencier deux grandes familles de balises meta :

  • Les meta name : Touchent toutes les informations concernant le document, l'auteur, le site, les outils utilisés, etc.
  • Les meta http-equiv : Concernent les meta qui communiquent avec le navigateur.

S'il existe de nombreuses balises meta différentes, la plupart sont inutiles, et de ce fait totalement facultatives.
Pour garder la validité W3C de votre page, seule la balise concernant son encodage est nécessaire.

Il y a quelques années, certaines balises étaient indispensables pour le référencement de son site Web, comme la description et les mots-clefs, cependant, les techniques de référencement étant en perpétuelle évolution, aujourd'hui leur intérêt est minime.

III-D-2. La balise meta content-type

Cette meta est la plus importante et la seule obligatoire pour passer la validation W3C.

  • meta content-type — Précise le type MIME de la page ainsi que le jeu de caractères utilisé (encodage).
Exemple
Sélectionnez
<meta http-equiv="content-type" content="text/html; charset=utf-8">

III-D-3. Ajoutez des infos sur vous

  • meta author — Renseigne le prénom et nom de l'auteur de la page courante. S'il y a plusieurs auteurs, les séparer d'une virgule.
Exemple
Sélectionnez
<meta name="author" content="Josselin WILLETTE">
  • meta publisher — Renseigne le prénom et nom de l'éditeur du site. S'il y a plusieurs éditeurs, les séparer d'une virgule. Dans le cas d'une société, il faut renseigner son nom.
Exemple
Sélectionnez
<meta name="publisher" content="Josselin WILLETTE">
  • meta reply-to — Définit l'adresse e-mail de l'auteur de la page. Attention, cette balise est scannée par les robots spammeurs !
Exemple
Sélectionnez
<meta name="reply-to" content="jwillette at monsite dot com">
  • meta contact — Définit l'adresse e-mail de la personne ou service à contacter. Attention, cette balise est scannée par les robots spammeurs !
Exemple
Sélectionnez
<meta name="contact" content="contact at masociete dot com">
  • meta contactname — Spécifie le nom de la personne à contacter.
Exemple
Sélectionnez
<meta name="contactname" content="Josselin WILLETTE">
  • meta contactorganization — Indique le nom de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactorganization" content="MaSociété SARL">
  • meta contactstreetaddress1 — Indique la première ligne de l'adresse de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstreetaddress1" content="15 rue de la poupée qui tousse">
  • meta contactstreetaddress2 — Indique la deuxième ligne de l'adresse de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstreetaddress2" content="Bâtiment A, Etage 3">
  • meta contactzip — Indique le code postal de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactzip" content="75000">
  • meta contactcity — Indique la ville de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactcity" content="MAVILLE">
  • meta contactstate — Indique le pays de l'auteur ou de la société détentrice du site.
Exemple
Sélectionnez
<meta name="contactstate" content="FRANCE">

III-D-4. Ajoutez des infos sur votre site

  • meta description — Courte description du site qui sera affichée dans les résultats de la plupart des moteurs de recherche. Ne pas dépasser les 200 caractères sous peine de voir la description tronquée.
Exemple
Sélectionnez
<meta name="description" content="Tutoriel HTML sur les éléments fondamentaux à savoir pour bien débuter la programmation Web">
  • meta keywords — Contient une liste de mots-clefs sur lesquels les moteurs de recherche vont se référer. Les mots-clefs sont séparés par une virgule. Avoir trop de mots-clefs peut être considéré par les moteurs comme du spam, donc ne pas dépasser les 500 caractères.
Exemple
Sélectionnez
<meta name="keywords" content="tutoriel html, cours html, balise meta, formulaires, listes, tableaux, cadres">
  • meta identifier-url — Renseigne l'URL d'entrée du site.
Exemple
Sélectionnez
<meta name="identifier-url" content="http://j-willette.developpez.com/">
  • meta subject — Expose le sujet de votre site en quelques mots.
Exemple
Sélectionnez
<meta name="subject" content="Site d'apprentissage du HTML">
  • meta distribution — Définit le type de réseau de publication du site.
Valeurs Description
global Visible sut l'Internet.
local Visible uniquement sur un poste local.
iu Visible sur un intranet.
Exemple
Sélectionnez
<meta name="distribution" content="global">
  • meta rating — Définit le type de public visé par le site.
Valeurs Description
general Tout public.
mature Réservé aux adultes.
restricted Accès restreint.
14years Accès interdit en-dessous de 14 ans.
Exemple
Sélectionnez
<meta name="rating" content="general">
  • meta language — Renseigne la langue utilisée sur le site.
Exemple
Sélectionnez
<meta name="language" content="fr">

III-D-5. Ajoutez des infos sur la création

  • meta copyright — Indique le ou les copyrights auxquels la page est soumise.
Exemple
Sélectionnez
<meta name="copyright" content="© 2007 Josselin WILLETTE">
  • meta generator — Déclare quels sont les logiciels utilisés pour faire le site. Les différents logiciels sont séparés d'une virgule.
Exemple
Sélectionnez
<meta name="generator" content="Notepad++, Gimp">
  • meta date-creation-ddmmyyyy — Indique la date de création de la page sous la forme JJMMAAAA.
Exemple
Sélectionnez
<meta name="date-creation-ddmmyyyy" content="01122007">
  • meta date-revision-ddmmyyyy — Indique la date de dernière modification de la page sous la forme JJMMAAAA.
Exemple
Sélectionnez
<meta name="date-revision-ddmmyyyy" content="01122007">
  • meta content-script-type — Précise le langage de scripts utilisé dans la page par son type MIME.
Exemple
Sélectionnez
<meta http-equiv="content-script-type" content="text/javascript">
  • meta content-style-type — Indique l'utilisation d'une feuille de style dans la page et renseigne son type MIME.
Exemple
Sélectionnez
<meta http-equiv="content-style-type" content="text/css">

III-D-6. Orientez les robots

  • meta robots — Indique aux robots indexeurs si la page doit être indexée ou non. Plusieurs valeurs sont possibles, séparées par une virgule. Par défaut, la valeur est all.
Valeurs Description
index Autorise les robots à indexer la page.
noindex Interdit aux robots d'indexer la page.
follow Autorise les robots à suivre les liens de la page.
nofollow Interdit aux robots de suivre les liens de la page.
all Correspond à "index, follow".
none Correspond à "noindex, nofollow".
noarchive Interdit aux moteurs de recherche de proposer une version de cache de la page.
Exemple
Sélectionnez
<meta name="robots" content="index, nofollow, noarchive">
  • meta revisit-after — Précise aux robots le nombre de jours d'intervalle à respecter avant leur prochaine visite sur le site. Attention, beaucoup de robots à l'heure actuelle ne se réfèrent plus à cette balise.
Exemple
Sélectionnez
<meta name="revisit-after" content="3 days">

III-D-7. Orientez les visiteurs

  • meta refresh — Permet de rafraichir la page toutes les x secondes où x est la valeur de content. Si une URL est renseignée, alors la navigateur redirigera le visiteur au bout de x secondes vers la page indiquée.
Exemple
Sélectionnez
<meta http-equiv="refresh" content="60">
<meta http-equiv="refresh" content="0; url=http://j-willette.developpez.com/">

III-D-8. Plus encore...

  • meta window-target — Indique le cadre de destination pour l'ensemble des liens du site dans le cas d'utilisation de frames. Permet d'éviter de renseigner l'attribut target sur chacun des liens.
Exemple
Sélectionnez
<meta http-equiv="window-target" content="corps">
  • meta pragma — Interdit la mise en cache des pages avec son unique valeur : no-cache. Balise très peu fiable, à coupler avec une solution côté serveur.
Exemple
Sélectionnez
<meta http-equiv="pragma" content="no-cache">
  • meta expires — Renseigne la date d'expiration de la page, au format "JJ Mois (en anglais) AAAA". Au-delà de cette date, la page précédente est rechargée par le navigateur. La page peut ne jamais expirer en indiquant la valeur never.
Exemple
Sélectionnez
<meta http-equiv="expires" content="never">
<meta http-equiv="expires" content="21 December 2007">
  • meta set-cookie — Crée un cookie sur l'ordinateur du visiteur.
Exemple
Sélectionnez
<meta http-equiv="set-cookie" content="dejavenu=oui; path=/; expires=Thursday, 14-April-08 00:00:00 GMT">
  • meta imagetoolbar — Supprime la barre d'outils qui s'affiche sur les images lorsque la souris pointe dessus sur Internet Explorer. Sa seule valeur est no.
Exemple
Sélectionnez
<meta http-equiv="imagetoolbar" content="no">
  • meta site-enter — Crée une transition à l'entrée du site. Ne fonctionne qu'avec Internet Explorer.
  • meta site-exit — Crée une transition à la sortie du site. Ne fonctionne qu'avec Internet Explorer.
  • meta page-enter — Crée une transition à l'entrée de la page. Ne fonctionne qu'avec Internet Explorer.
  • meta page-exit — Crée une transition à la sortie de la page. Ne fonctionne qu'avec Internet Explorer.
Valeurs Description
blendTrans(duration=4) Crée un fade in en entrée et un fade out en sortie.
revealTrans(duration=4,transition=0) Crée une transition carrée entrante.
revealTrans(duration=4,transition=1) Crée une transition carrée sortante.
revealTrans(duration=4,transition=2) Crée une transition ronde entrante.
revealTrans(duration=4,transition=3) Crée une transition ronde sortane.
revealTrans(duration=4,transition=4) Créé une transition rideau vers le haut.
revealTrans(duration=4,transition=5) Créé une transition rideau vers le bas.
revealTrans(duration=4,transition=6) Créé une transition rideau vers la droite.
revealTrans(duration=4,transition=7) Créé une transition rideau vers la gauche.
revealTrans(duration=4,transition=8) Créé une transition rideau multiple vers la droite.
revealTrans(duration=4,transition=9) Créé une transition rideau multiple vers le bas.
revealTrans(duration=4,transition=10) Créé une transition damier vers la droite.
revealTrans(duration=4,transition=11) Créé une transition damier vers le bas.
revealTrans(duration=4,transition=12) Créé une transition brush.
revealTrans(duration=4,transition=13) Créé une transition de porte qui se ferme verticalement.
revealTrans(duration=4,transition=14) Créé une transition de porte qui s'ouvre verticalement.
revealTrans(duration=4,transition=15) Créé une transition de porte qui se ferme horizontalement.
revealTrans(duration=4,transition=16) Créé une transition de porte qui s'ouvre horizontalement.
revealTrans(duration=4,transition=17) Créé une transition diagonale NE-SO.
revealTrans(duration=4,transition=18) Créé une transition diagonale SE-NO.
revealTrans(duration=4,transition=19) Créé une transition diagonale NO-SE.
revealTrans(duration=4,transition=20) Créé une transition diagonale SO-NE.
revealTrans(duration=4,transition=21) Créé une transition par lignes horizontales.
revealTrans(duration=4,transition=22) Créé une transition par lignes verticales.
revealTrans(duration=4,transition=23) Créé une transition aléatoire.
Exemple
Sélectionnez
<meta http-equiv="page-enter" content="blendTrans(duration=2)">

Vous pouvez modifier la valeur duration comme bon vous semble, elle renseigne le temps de transition.

Et encore plus...

Vous avez peut-être déjà remarqué dans le code source de certains sites des balises meta qui commencent par "DC.", comme par exemple :

Exemple
Sélectionnez
<meta name="dc.keywords" content="liste, de, mots, clefs">

Ces balises font partie de ce que l'on appelle le Dublin Core.
Pour plus d'informations, vous pouvez lire la traduction officielle du Guide d'utilisation du Dublin Core ainsi que la liste de ces meta (en).

L'idée de créer une cohérence dans la création de métadonnées partait d'une bonne intention, seulement elle n'a pas su s'imposer dans les moeurs à cause sans doute d'une trop grande timidité sur la propagation de cette idée.
De ce fait, elles ne sont pas très utilisées.



Commentez l'article : 27 commentaires


précédentsommairesuivant

  

Copyright © 2009 Josselin Willette. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.