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.
<title>Tutoriel HTML - Apprenez les bases du HTML</title>
Commentez l'article : 30 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> :
<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 :
<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 : 30 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.
<link rel="stylesheet" type="text/css" href="chemin/du/fichier.css"><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> :
<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 : 30 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).
<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.
<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.
<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 !
<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 !
<meta name="contact" content="contact at masociete dot com">- meta contactname Spécifie le nom de la personne à contacter.
<meta name="contactname" content="Josselin WILLETTE">- meta contactorganization Indique le nom de la société détentrice du site.
<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.
<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.
<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.
<meta name="contactzip" content="75000">- meta contactcity Indique la ville de l'auteur ou de la société détentrice du site.
<meta name="contactcity" content="MAVILLE">- meta contactstate Indique le pays de l'auteur ou de la société détentrice du site.
<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.
<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.
<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.
<meta name="identifier-url" content="http://j-willette.developpez.com/">- meta subject Expose le sujet de votre site en quelques mots.
<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. |
<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. |
<meta name="rating" content="general">- meta language Renseigne la langue utilisée sur le site.
<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.
<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.
<meta name="generator" content="Notepad++, Gimp">- meta date-creation-ddmmyyyy Indique la date de création de la page sous la forme JJMMAAAA.
<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.
<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.
<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.
<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. |
<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.
<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.
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.
<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.
<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.
<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.
<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.
<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. |
<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 :
<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 : 30 commentaires