Bases du HTML (2ième partie)

7. - Les listes

Des balises spécifiques permettent de structurer des listes d'items comme le sommaire ci-dessus. On distingue plusieurs types de listes qui peuvent s'imbriquer sans distinction :

• les listes non ordonnées (à puces)
• les listes ordonnées

Les listes non ordonnées, appelées aussi listes à puces, font appel à 2 balises doubles : <ul> pour spécifier le début et la fin de la liste auquel on ajoute l'attribut type="..." pour agir sur la forme de la puce avec les valeurs disc, circle et square (respectivement disque, cercle et carré) ; <li> pour spécifier les différents items de la liste, soit par exemple :

ce qui donne :

1ier item 2ième item 3ième item

Si on ne précise pas l'attribut "type" les puces seront appliquées par défaut dans l'ordre disc, circle et square en cas d'imbrication, soit par exemple :

ce qui donne :

1ier item 2ième item 1ier item du 2 2ième item du 2 1ier item du 2 du 2 2ième item du 2 du 2 3ième item du 2 du 2 3ième item du 2 3ième item

Il est possible de remplacer les puces basiques par une image plus personnelle. Dans ce cas il faut faire appel à une propriété de feuille de style CSS (voir tutoriel CSS) : list-style-image à laquelle on va associer le fichier de l'image à utiliser à la place d'une puce standard, ce qui donne dans le fichier CSS :


Dès lors toute utilisation de la balise <li> fera appel à cette image.



Pour structurer les listes ordonnées on utilise la balise <ol> à la place de <ul> ce qui a pour effet de remplacer les puces par une numérotation hiérarchique ; là encore l'attribut type="..." permet de choisir quelle genre de numérotation utiliser parmi cinq : 1, I, i, A et a ; soit par exemple :


ce qui donne :

1ier item 2ième item 1ier item du 2 2ième item du 2 1ier item du 2 du 2 2ième item du 2 du 2 3ième item du 2 du 2 3ième item du 2 3ième item

Il est possible de modifier le début de la numérotation en ajoutant l'attribut start="..." dans la balise <ol>, par exemple <ol type="1" start="3"> fera débuter la liste à l'item 3.

En plus des listes à puces et des listes ordonnées il existe 3 autres types de liste :

• Les listes de répertoires en encadrant les balises <li> par la balise double <dir>
  
• Les listes de menus en encadrant les balises <li> par la balise double <menu>
• Les listes de définitions qui font appel à la balise double <dl> pour encadrer des balises <dt> contenant un terme à définir et auxquelles seront associées une ou plusieurs balises <dd> contenant une ou plusieurs définitions
  

Voici un exemple de liste de définitions :


ce qui donne :

Insérer Introduire un élément nouveau dans un ensemble Enserrer Enclore, contenir dans des limites étroites Entourer en serrant

8. - Les cadres (frames et iframes)

Remarque liminaire : Nous n'allons pas nous étendre trop en détail sur cette partie du code HTML car L'UTILISATION DES CADRES (FRAMES) EST DECONSEILLEE sur le plan pratique pour plusieurs raisons (référencement problématique par les moteurs de recherche, problèmes d'impression dans les navigateurs, création de plusieurs adresses URL pour une même page, ...), de plus elle est appelée à devenir obsolète car elle sera abandonnée dans les prochaines évolutions du langage. Cependant vous pouvez être amené à en rencontrer sur des pages anciennes, il est donc utile de savoir interpréter les cadres existants, ne serait-ce que pour les supprimer et restructurer correctement des pages HTML.

Les cadres sont des conteneurs de parties de fenêtre de navigation, ils permettent de constituer une page web avec plusieurs autres et de leur permettre de communiquer entre elles. Par exemple en découpant la page en trois cadres :

• un pour un bandeau en haut de page,
• un pour un menu vertical à gauche
• et un dernier pour la partie centrale de contenu.

Pour mettre ces différents cadres en place dans une page web il faut créer en amont une page exclusivement dédiée à ça qui va définir le jeu de cadres à afficher et leurs tailles respectives par l'utilisation de la balise double <frameset> et </frameset> à la place des balises <body> et </body> et se voir attribuer un "DOCTYPE" spécifique aux frames.

La balise double <frameset> recevra les attributs cols="..." et/ou rows="..." avec des valeurs exprimées en pixels ou en pourcentages (une * représentant tout l'espace disponible) pour définir la taille du jeu de cadres qu'elle accueille et va encadrer des balises simples <frame> qui contiendront les attributs name="..." et src="..." avec pour valeurs respectives le nom du cadre et l'adresse de la page HTML à y charger, comme ceci :



ce qui donne :

Quelques précisions :

• l'adressage des liens dans les pages du frameset devra contenir en target le nom du cadre de destination ;
• l'attribut frameborder affiche ou non une bordure avec les valeurs respectives 1 et 0 ;
• les marges intérieures des cadres se règlent avec les attributs marginwidth et marginheight, 0 les supprimant ;
• l'attribut scrolling permet de régler les ascenseurs avec les valeurs "no", "yes" ou "auto" ;
  
• pour figer la taille des cadres et interdire leur redimensionnement on ajoute l'attribut noresize="noresize".

Enfin : il n'est pas inutile d'ajouter dans le frameset, à la suite des balises <frame>, la balise double <noframe> et </noframe> à l'intérieur de laquelle on insère un texte à destination des navigateurs qui n'affichent pas les cadres.


LES CADRES INTERIEURS (iFrames)

Les cadres intérieurs, ou iFrames, sont d'une utilisation plus simple car ils s'insèrent dans le contenu de la page HTML sans faire appel à une page externe pour en fixer les paramètres. La balise d'insertion est la balise double <iframe> qui reçoit les mêmes attributs que la balise <frame> vue ci-dessus.

La page insérée dans ce cadre sera adressée par l'attribut src="..." qui pourra contenir une URL relative pour l'insertion d'une page interne au site, ou une URL absolue pour une page externe.

L'affichage d'un message alternatif pour le cas où le navigateur n'afficherai pas les iframes est à insérer entre les balises <iframe> et </iframe>.

9. - Les tableaux

Les tableaux sont destinés à la présentation des données tabulaires sous forme de lignes et colonnes ; la case formée par l'intersection d'une ligne et d'une colonne se nomme une cellule. Cela ressemble tout simplement à un tableur.

Bien souvent les tableaux sont utilisés à tort pour structurer des pages web, c'est une utilisation anormale qui va à l'encontre de la bonne pratique. Voir à ce sujet le tutoriel Style CSS et DIV.

Pour définir un tableau très simple en HTML on utilise au minimum 3 balises doubles :

• <table> et </table> pour délimiter le début et la fin du tableau
• <tr> et </tr> pour délimiter le début et la fin d'une ligne dans le tableau
  
• <td> et </td> pour délimiter une cellule dans la ligne
  

Il faut retenir que :

1. Un tableau se construit ligne par ligne (et non pas colonne par colonne) ;
   
2. Les contenus ne peuvent être insérés qu'entre les balises <td> et </td>, jamais en dehors.
   

Pour entourer le tableau et ses cellules d'une bordure il suffit d'ajouter l'attribut "border" à la balise <table> avec pour valeur l'épaisseur de la bordure exprimée en pixels. La valeur "0" supprime la bordure.

Il est souvent nécessaire d'appliquer un alignement horizontal au tableau dans la page, on le fait avec l'attribut align="..." ajouté à la balise <table> ; align peut prendre les valeurs "center", "left" ou "right" (aligné respectivement au centre, à gauche ou à droite). L'alignement vertical se fait, quant à lui, par l'utilisation de valign="..." avec les valeurs "top", "middle" ou "bottom" (aligné en haut, au milieu ou en bas). Ces attributs, comme tout autre attribut de style, peuvent aussi, et c'est mieux, être gérés par la feuille de style CSS dans laquelle on définira des propriétés générales pour table, tr et td ; pour simplifier ce tutoriel on va néanmoins ignorer ici cette étape.

Faisons notre premier tableau centré horizontalement dans la page avec 3 lignes et 3 colonnes :


ce qui donne :
Modifions notre premier code en y ajoutant ces améliorations et une ligne de totaux :

<table border="1" cellpadding="5" cellspacing="5" summary="Résumé du tableau exemple" align="center">

ce qui donne :

Maintenant il faut prendre en considération qu'un tableau ne se présente pas toujours de façon uniforme et qu'il est parfois nécessaire de fusionner des cellules. Pour ce faire on va ajouter à la balise <td> l'attribut colspan="..." pour fusionner des cellules sur plusieurs colonnes (fusion horizontale) et l'attribut "rowspan="..." pour fusionner des cellules sur plusieurs lignes (fusion verticale). Ces attributs reçoivent pour valeur le nombre de cellules à fusionner. A noter que la somme des cellules à fusionner ne doit jamais excéder le nombre total des cellules comprises dans leurs lignes et colonnes respectives.

Pour appliquer ces attributs nous allons agrandir notre précédent tableau et fusionner 3 cellules horizontalement et verticalement :

<table border="1" cellpadding="5" cellspacing="5" summary="Résumé du tableau exemple" align="center">
</table>

ce qui donne :
A noter que la fusion horizontale ne pose pas vraiment de problème pour la maintenance du code car les cellules concernées restent adjacentes et dans le même <tr>, mais il en va tout autrement pour la fusion verticale qui peut vite devenir un casse-tête en cas de modification des cellules, surtout dans un tableau complexe. Prenez donc soin de bien commenter votre code pour vous y retrouver...

10. - Les formulaires

Nous arrivons là à une partie du HTML qui est un peu moins statique. En effet, jusqu'ici le code HTML étudié se contentait d'afficher des contenus que le visiteur ne pouvait que consulter. En revanche les formulaires permettent à l'internaute d'interagir avec la page web qu'il consulte en envoyant des données au serveur. Lequel va pouvoir en retour lui proposer des contenus différents, c'est en ce sens qu'une dynamique va pouvoir se créer entre le lecteur et la page web. Les formulaires peuvent servir par exemple à déclencher l'affichage de certains contenus, à l'inscription à une newsletter, ou encore à permettre un contact entre le visiteur et le site internet par le biais d'un formulaire de contact.

Le code d'un formulaire est basé en premier lieu sur la balise double <form> et </form> qui encadre tout son contenu. Il est impossible d'imbriquer les formulaires, un seul peut être traité à la fois, en revanche plusieurs formulaires peuvent cohabiter dans la même page web. Cette balise doit recevoir obligatoirement les attributs :

• action="..." : avec pour valeur l'url absolue ou relative de la page de destination du formulaire ou une adresse email pour l'envoi d'un message
• method="..." : qui contient en valeur la méthode d'envoi des données parmi les deux possibles qui sont :
  
  • GET : les données passent par l'url et sont donc visibles
  • POST : les données sont envoyées de façon invisible, c'est le mode à privilégier pour des raisons de sécurité
    

Un troisième attribut peut être ajouté à la balise <form> avec l'utilisation de la méthode POST c'est enctype="..." qui précise le type de données envoyées au serveur. Par exemple "multipart/form-data" dans le cas de l'envoi d'un fichier (image ou pièce jointe de mail).

Le code d'un formulaire va donc démarrer généralement comme ceci :


Ensuite les données que doit transmettre le formulaire doivent être entrées dans des champs que l'on fait en général précéder d'une définition afin que le visiteur sache quoi renseigner. Ces champs sont très variés, nous allons les étudier un à un ci-dessous.

LES CHAMPS TEXTE

Ils utilisent la balise simple <input> complétée de l'attribut type="..." qui peut prendre les valeurs :

• text : pour saisir du texte court sur une ligne
• password : pour saisir un mot de passe dont les caractères seront remplacés par des points

Les attributs suivants peuvent compléter la balise <input> :

• name="..." : pour nommer le champ de données, obligatoire pour retraiter le contenu du champ côté serveur, le nom attribué à ce champ ne doit pas comporter d'espace
• value="..." : pour attribuer une valeur par défaut pré-remplie dans le champ
• size="..." : pour préciser la taille du champ en nombre de caractères
  
• maxlenght="..." : pour limiter le nombre de caractères possibles de ce champ
• readonly="readonly" : pour rendre non-modifiable le champ (une seule valeur possible)
• disabled="disabled" : pour désactiver le champ et ne pas envoyer son contenu au serveur (une seule valeur possible)

Important : pour la sécurité de vos formulaires et de votre site internet vous avez tout intérêt à utiliser au maximum les attributs de contrôle de champ, en particulier maxlenght. Cela ne dispense pas d'effectuer des contrôles de sécurité côté serveur à la réception des formulaires, mais tout ce qui peut gêner en amont les personnes malveillantes est bon à prendre... Ne perdez jamais de vue que les formulaires sont la porte d'entrée préférée des pirates du web et qu'un formulaire non sécurisé est un vrai boulevard pour qui veut nuire en piratant des données dans un serveur ou en le saturant.

Pour saisir un texte long sur plusieurs lignes la balise <input> ne peut pas être utilisée car elle est limitée à une seule ligne, il faut faire appel à la balise double <textarea> qui a besoin d'au moins deux attributs (qui remplacent size="..." de <input>) :

• rows="..." avec pour valeur le nombre de lignes
• cols="..." avec pour valeur le nombre de colonnes
  

Les attributs name="...", readonly="readonly" et disabled="disabled" peuvent compléter la balise <textarea>, mais pas maxlenght="..." (qui pourra être remplacé par du JavaScript par exemple).

LE BOUTON D'ENVOI est l'élément qu'il nous manque encore pour réaliser notre premier formulaire. Celui-ci permet d'envoyer les données du formulaire au serveur et se génère soit dans une balise simple <input>, soit dans la balise double <button>, avec les attributs :

• type="submit" pour générer l'affichage du bouton de soumission (ou de validation)
  
• name="..." pour générer le nom de la donnée d'envoi
• value="..." pour donner une valeur à la donnée d'envoi qui sera affichée sur le bouton

Ceci à une nuance près : avec <button> la valeur est insérée entre les balises au lieu d'être un attribut et il est possible d'y ajouter des attributs de mise en forme.

Enfin, si le look du bouton d'envoi créé par les navigateurs ne vous plait pas, il existe une troisième possibilité de bouton d'envoi : l'image. Pour utiliser votre propre image de bouton il faut renseigner la valeur "image" dans l'attribut type="..." de la balise <input> puis y ajouter l'attribut src="..." avec l'url de votre fichier image (ceci n'est pas possible avec la balise <button>).

A ce stade nous pouvons réaliser notre premier formulaire :

<p><b>Inscription Newsletter :</b></p>
<p>
<form action="UrlDePageWeb" method="post">
</form>
</p>

ce qui donne :



LE BOUTON SIMPLE est une variante du bouton d'envoi avec l'attribut type="button" ajouté aux balises <input> ou <button> qui permet d'appeler une fonction JavaScript au moment du clic en y ajoutant l'attribut onclick="..." avec pour valeur le nom de la fonction JavaScript appelée (laquelle aura préalablement été ajoutée dans le "Header").


LE BOUTON RESET est encore une variante du bouton d'envoi avec l'attribut type="reset" ajouté aux balises <input> ou <button> qui permet d'effacer toutes les valeurs du formulaire.



Pour améliorer l'ergonomie des formulaires plusieurs variantes de saisie des données sont à notre disposition :

LES BOUTONS RADIO
Très utiles pour forcer le visiteur à ne choisir qu'une seule option parmi plusieurs propositions. Un grand classique est le choix de la civilité dans un formulaire où on propose Madame, Mademoiselle, Monsieur au visiteur qui ne doit en choisir qu'une.

Le bouton radio se génère avec la valeur "radio" attribuée à l'attribut type="..." de la balise <input>, il est indispensable de donner la même valeur à l'attribut name="..." des différentes réponses possibles, comme ceci :


ce qui donne (cliquez les boutons) :

C'est la valeur du bouton sélectionné par le visiteur qui sera envoyée au serveur pour la donnée "civil" dans notre exemple.

Il est possible de pré-sélectionner une réponse en ajoutant l'attribut checked="checked" à la balise <input>.

Pour améliorer l'ergonomie du formulaire il est également possible d'étendre la zone cliquable au libellé du bouton en incluant celui-ci dans une balise double <label> qui aura pour attribut for="..." et en ajoutant l'attribut id="..." à la balise <input>. L'association entre le libellé et la réponse correspondante se crée en attribuant une valeur identique aux attributs "for" et "id", comme ceci :


ce qui donne (cliquez les libellés) :





LES CASES A COCHER

Semblables aux boutons radio à la différence que le visiteur peut effectuer un choix multiple parmi plusieurs propositions.

La case à cocher se génère avec la valeur "checkbox" attribuée à l'attribut type="..." de la balise <input>, il est indispensable de donner la même valeur à l'attribut name="..." des différentes réponses possibles, mais en y accolant un crochet ouvrant et un crochet fermant, comme ceci [], afin d'indiquer au serveur qu'il s'agit de réceptionner un tableau de données et non pas d'une seule donnée. En revanche s'il n'y a qu'une seule case à cocher du même nom dans le formulaire les crochets sont inutiles.

Là encore il est possible de pré-sélectionner une ou plusieurs réponses en ajoutant l'attribut checked="checked" à la balise <input>. Voici un exemple :


ce qui donne :

HTML CSS JAVA PHP SQL

LES LISTES DE CHOIX

Quand les choix à proposer au visiteur sont nombreux les boutons radio ou les cases à cocher ne suffisent plus, il faut alors utiliser des listes de choix. Les listes de choix fonctionnent avec 2 balises doubles :

• <select> et </select> qui encadrent la liste et la nomme avec l'attribut name="..."
• <option> et </option> qui encadrent chaque choix possible avec l'attribut value="..."
  

Par défaut une liste de choix sera déroulante avec un seul choix possible et on peut pré-sélectionner une réponse avec l'attribut selected="selected" dans une balise <option>.

Il est possible de rendre la liste non-déroulante en ajoutant l'attribut size="..." à la balise <select>, la valeur de size étant le nombre de choix à afficher. Si on utilise cet attribut (et seulement dans ce cas) on peut alors proposer un choix multiple en ajoutant l'attribut multiple="multiple" à la balise <select>.

Voici les trois listes de choix possibles :

• liste déroulante avec une pré-sélection

ce qui donne :

• liste non déroulante avec une présélection et 3 choix affichés
  

ce qui donne :

• liste non déroulante avec une pré-sélection, un choix multiple et les 5 choix affichés
  

ce qui donne :

LE CHAMPS CACHE est utile pour transférer au serveur des données complémentaires qui ne font pas partie des réponses du visiteur au formulaire et qui ne sont pas affichée par le navigateur. Par exemple pour accompagner le formulaire du nom de la page web qui l'envoie on utilisera l'attribut type="hidden" dans une balise <input> avec name="..." et "value="..." renseignés, comme ceci :




L'ENVOI D'UN FICHIER peut se révéler nécessaire dans un formulaire pour télécharger un document sur le serveur par exemple, ou encore pour joindre une pièce jointe à un courriel. Il faut dans ce cas utiliser l'attribut type="file" dans une balise <input> complété de name="..." pour donner un nom au fichier.

Attention ! Pour que cela fonctionne il est impératif d'avoir ajouté préalablement dans l'ouverture de la balise <form> l'attribut enctype="multipart/form-data".

La valeur "file" de l'attribut type va déclencher dans le navigateur l'apparition d'un bouton "Parcourir" à côté du champ, ce qui va permettre au visiteur de choisir sur son propre ordinateur, dans ses répertoires, le document à joindre au formulaire, comme ceci :


ce qui donne :



LES BLOCS sont des regroupements de certaines parties d'un formulaire qui permettent d'en améliorer la présentation et la compréhension. Ils se créent avec la balise double <fieldset> et </fieldset> qui encadre le bloc ; complétée juste après son ouverture de la balise double <legend>Titre du bloc</legend>. Ceci a pour effet de créer un cadre incluant une légende autour du bloc, comme ceci :

11. - L'en-tête de page HTML : le HEADER

L'en-tête d'une page HTML, que l'on appelle le "header", contient essentiellement 3 types d'informations entre les balises <head> et </head> :

• Les balises META qui donnent les informations sur le contenu de la page web aux navigateurs
• Les STYLES qui seront appliqués aux contenus de la page HTML
• Les SCRIPTS qui seront appelés par certaines parties de la page HTML
  

11-a. - Header : Les balises META

Ces balises, les META TAGS, placées dans la tête du document HTML (entre les balises <head> et </head> ) renseignent les moteurs de recherche sur la nature et le contenu de la page, ce sont les META NAME, ou bien informent le navigateur sur la structure de la page, ce sont les META HTTP-EQUIV. Seule une de ces dernières - que nous verrons plus loin - est indispensable, toutes les autres sont facultatives, voire inutiles.

Le bon positionnement d'un site internet sur les moteurs de recherche dépendait - il y a quelques temps - pour une bonne part de la construction et de l'optimisation de ces balises, et surtout dans l'étroite corrélation entre ces META TAGS et les textes et contenus qu'ils sont censés représenter (densité des mots-clés et pertinence de ceux-ci par exemple) ; ceci n'est plus exact aujourd'hui car les algorithmes des moteurs de recherche étant de plus en plus sophistiqués ils font de moins en moins (voir plus du tout) référence au contenu des balises META pour juger de l'intérêt d'un site et en déterminer son positionnement dans les réponses. Cependant les balises META continuent d'être un outil pratique comme aide à l'enregistrement d'un site web dans les moteurs et annuaires car elles peuvent être lues facilement par les pages d'enregistrement, ce qui évite de remplir des formulaires fastidieux lors des opérations de référencement naturel.

Les informations qui suivent sont suffisantes pour référencer un site sans enjeux stratégiques ou commerciaux, toutefois le référencement d'un site web professionnel et son positionnement en tête de liste sur les outils de recherche nécessitent un savoir faire professionnel.


Balise META TITLE

Syntaxe : <TITLE>Le titre donné à votre page</TITLE>

Taille de la balise limitée :

• soit en nombre de mots (7 ou 8 maxi)
• soit en nombre de caractères (entre 50 et 100 selon les moteurs de recherche)

Particularités de cette balise :

• Les majuscules, caractères accentués et chiffres sont acceptés
• Le contenu de cette balise apparait dans l'affichage du résultat de recherche.

Remarques :

• Eviter les titres galvaudés dans le style "bienvenue sur notre site".
• Reproduire, autant que possible le texte d'entrée de la page.
• Faire figurer un ou plusieurs mots clefs importants dans le titre.

Balise META DESCRIPTION

Syntaxe : <META NAME="Description" CONTENT="Le texte de description de votre page.">

Taille de la balise limitée :

• Soit en nombre de mots (20 à 50)
• Soit en nombre de caractères (entre 180 et 300 selon les moteurs de recherche)

Particularités de cette balise :

• Les majuscules, caractères accentués et chiffres sont acceptés
• Le contenu de cette balise apparait (souvent tronqué au-delà de 200 caractères) dans l'affichage du résultat de recherche.

Remarques :

• Limiter cette balise à 20 / 25 mots.
• Construire des phrases cohérentes.
• Concentrer l'essentiel des mots clefs dans cette balise.
• Ne pas perdre de vue que vous ne vous adressez pas seulement au moteur de recherche, mais aussi à vos futurs visiteurs.

Balise META KEYWORDS

Syntaxe : <META NAME="keywords" CONTENT="motclef1, motclef2, motclef3">

Séparateur conseillé : virgule + espace

Taille de la balise :

• de 100 caractères à + de 1800 caractères suivant les moteurs, se limiter à 500 caractères pour ne pas être considéré comme faisant du spamdexing (voir plus bas) par certains moteurs
  

Particularités de cette balise :

• Les caractères accentués sont acceptés

Remarques :

• Limiter la taille des mots clefs à 1000 caractères
• Faire figurer les mots clefs avec et sans accents.
• Inscrire les mots clefs importants en tête de la liste.
• Éviter de répéter le même mot clef plusieurs fois.
• Penser aux variantes, singulier pluriel, masculin féminin, nom verbe.

Balise META ROBOTS

Syntaxe : <META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">

Particularités de cette balise :

• Indique au robot s'il doit indexer la page INDEX ou non NOINDEX
  
• suivre les liens FOLLOW ou non NOFOLLOW,
• indexer toutes les pages ALL (= index, follow) ou aucune NONE (= noindex, nofollow)
• Interdit aux moteurs de conserver une version en cache de la page avec NOARCHIVE
  

Remarques :
L'idéal est de créer un fichier robots.txt, et de le placer à la racine du site (au même niveau que la page index). Ce fichier permet d'interdire certains répertoires aux robots (cgi, stats, espaces privatifs, etc).



Balise META LANGUAGE

Syntaxe : <META HTTP-EQUIV="Content-Language" CONTENT="fr">

Arguments : (les principaux)

• FR = français
• DE = allemand
• DK = danois
• EN = anglais
• EN-US = américain
• IT = italien

Particularité :

• Sur les moteurs mondiaux, affecte le site dans le répertoire de la langue.

Remarques :

• Risque de refus du site en FR s'il est proposé à un moteur uniquement anglophone, paramétré pour refuser les sites d'autres langues.

Balise META PRAGMA

Syntaxe : <Meta http-equiv="Pragma" content="no-cache">

Propriété :

• Impose au navigateur de votre visiteur de recharger la page à chaque nouvelle visite, et donc de voir les dernières mises à jour de votre site (très utile sur les sites dynamiques aux contenus changeants).

Remarque :

• Si votre site est assez lourd (nombreuses images), vous imposez alors à votre visiteur des temps de chargements importants, même s'il a visité la page juste avant, ce qui n'est pas une bonne chose.

Balise META TYPE de caractères

Syntaxe : <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-1">

Propriété :

• Cette balise est sans doute la plus importante et la seule obligatoire pour obtenir la validation W3C
  
• Désigne le type d'alphabet utilisé (type MIME et jeu de caractères). Dans l'exemple ci-dessus, alphabet pour l'Europe occidentale.

Balise META DISTRIBUTION

Syntaxe : <META NAME="distribution" CONTENT="global">

Arguments :

• Global = si le site est d'intérêt général (visible sur internet)
  
• Local = s'il concerne un public restreint (visible qu'en local)
  
• iu = si c'est un intranet
  

Remarque :

• Cette balise est interprétée différemment selon les moteurs !

Balise META EXPIRES

Syntaxe : <meta HTTP-EQUIV="Expires" content="UneDate">

Propriété :

• Donne la date (jj, mois anglais, aaaa) de fin de validité d'une page.

Balise META CLASSIFICATION

Syntaxe : <META NAME= "Classification" CONTENT= "rubrique1, rubrique2">

Propriété :

• Recommande au moteur une rubrique où classer le site.

Balise META RATING

Syntaxe : <META NAME="Rating" CONTENT="General">

Propriété :

• Précise le public auquel s'adresse le site

Arguments :

• general = tout public
• mature = réservé aux adultes
• restricted = accès restreint
• 14years = accès interdit aux moins de 14 ans
  

Beaucoup d'autres balises META existent... Parmi celles ci, les balises DC (le Dublin Core), destinées à l'origine à l'édification d'un outil statistique global sur le web, et à une harmonisation des META TAGS. Une quinzaine de balises standardisées, seront interprétées identiquement par tous les outils de recherche. Dans les années à venir, (on en parle déjà depuis plusieurs années...) leur présence deviendra peut être impérative (propriété intellectuelle des sites, et intégration sur les robots des outils de recherche). Aujourd'hui, plusieurs outils de recherche refusent de lire ces balises !

Le spamdexing (ou spamindexing) : Technique qui consiste à répéter abusivement certains mots clefs, soit dans les balises META, soit dans les pages du site, dans l'espoir d'améliorer son classement, ou en utilisant des mots clefs sans relation avec le site (ex: sexe, MP3 ...), ou encore à soumettre son site sous plusieurs noms de domaines, et/ou trop fréquemment. Les robots sont programmés pour détecter ces tentatives (avec des niveaux de tolérance variables). La sanction : pas d'indexation, et pire, inscription du site en liste rouge ou noire selon les moteurs (interdiction définitive de référencement).

Les dangers des trucs et astuces : Beaucoup de pseudo-tuyaux circulent, dont certains ont d'ailleurs bien fonctionné au début du web, mais les outils de recherche utilisent des logiciels de plus en plus intelligents pour visiter les sites, et le risque est le même que pour le spamdexing. Le plus éculé de ces bons tuyaux : inscrire et répéter les mots clefs dans la même couleur que le fond de page. La sanction est immédiate !

11-b. - Header : Les styles

Pour effectuer la mise en page HTML on utilise des feuilles de style en cascade nommées CSS (Cascading Style Sheets). Il y a deux manières d'appliquer les styles définis dans un fichier CSS externe à la page web :

• Avec la balise HTML <link rel="stylesheet" type="text/css" href="style.css">
• Avec du code CSS dans une balise double <style> :

La seconde méthode étant préférable car elle n'interfère pas avec les anciens navigateurs interprétant mal les CSS qui ne la reconnaissent pas. Dans les deux cas on place ces balises dans la partie "header" de la page, c'est-à-dire entre les balises <head> et </head>.

Il est également possible d'inclure un style par un code CSS interne à la page HTML en utilisant la balise double <style> :


Dans ce cas le style ne s'appliquera qu'à cette page. Toutefois si vous devez réutiliser ce style dans une autre page de votre site il faudra l'y ajouter également. Ce qui serait une redondance de code inutile, la bonne pratique étant d'éviter ça en utilisant la feuille de style CSS.

11-c. - Header : Les scripts

Lors de la création d'une page web HTML on fait souvent appel a des petits sous-programmes écrits en JavaScript ou en VBScript. Ils apportent des fonctions supplémentaires plus dynamiques au HTML qui, quant à lui, reste statique. Bien utilisés ces scripts permettent d'améliorer l'ergonomie des pages web.

Ces scripts se composent d'une partie programme et d'une partie d'appel au programme. La partie programme doit être insérée dans la balise double <script type="text/javascript"> et </script> que l'on place dans le header entre les balises <head> et </head>.

La partie programme peut être intégrée dans la page web, dans ce cas c'est un script interne, soit par exemple :
Si la partie programme est volumineuse on la place dans un fichier avec extension ".js" pour JavaScript, dans ce cas c'est un script externe et on l'appellera dans le "header" comme ceci :