Bases du HTML (1ière partie)
Sommaire
|
1. - Introduction
L'abréviation "HTML" signifie HyperText Markup Language, soit langage balisé hypertexte ; le terme à retenir est "balisé" car ce langage repose sur l'utilisation de balises entre lesquelles (ou dans lesquelles) vont être spécifiés des contenus et leurs définitions afin d'être structurés et lus par les navigateurs web ou tout autre outil réalisant la même fonction. Le HTML est un langage de structuration de contenus, pas un langage de programmation à proprement parler. C'est en effet un langage statique qui indique aux navigateurs (Firefox, Internet Explorer, Opéra, Chrome, Safari, K-Méléon, ...) comment afficher une page web à l'écran afin que l'internaute puisse la visualiser. Ce dernier ne pouvant pas agir sur le contenu proposé, ce qui n'est rendu possible que par l'utilisation d'un langage dynamique.
Le langage HTML est normalisé, cette norme est contrôlée par un organisme, le World Wide Web Consortium, nommé plus simplement le W3C. Nous en reparlerons plus loin, en particulier pour ce qui concerne la validation des pages écrites en langage HTML.
Tout au long de ce tutoriel vous verrez utilisée l'abréviation url qui signifie Uniform Ressource Locator (littéralement "localisateur uniforme de ressource"), il s'agit de ce que l'on appelle plus simplement une adresse web. Cette adresse est utilisée par les navigateurs pour localiser les ressources du web (sites, pages internet ou éléments de ces pages par exemple). Elle débute toujours par http:// qui précise le protocole (Hypertext Transfer Protocol) utilisé pour faire transiter les informations sur le réseau internet.
2. - Le système de balisage
Les balises HTML sont des indications ajoutées aux contenus d'une page web (texte, image, lien, ...) qui permettent au navigateur de savoir comment afficher ces contenus. Les navigateurs sont, en quelque sorte, les "interpréteurs" de ces balises.Une balise commence toujours par le signe < (plus petit que, ou inférieur à) et se termine toujours par le signe > (plus grand que, ou supérieur à). La première balise à connaître est <html> que vous trouverez au début de chaque page web et qui indique au navigateur qu'il va devoir interpréter du langage HTML.
En plus de son nom ("html" dans l'exemple ci-dessus) une balise va pouvoir comporter des attributs, lesquels vont accueillir des valeurs. Soit par exemple : <html lang="fr"> qui se décompose ainsi :
- ouverture de la balise : <
- nom de la balise : html
- nom de l'attribut : lang (pour language, ou langage) séparé du nom de balise par un espace
- valeur de l'attribut : fr que l'on écrit entre guillemets derrière le signe égal, soit ="fr"
- fermeture de la balise : >
Il y a deux sortes de balises : les balises simples et les balises doubles. Il est utile de distinguer les balises structurelles des balises de mise en forme, et bon de savoir que certaines balises peuvent s'imbriquer les unes dans les autres.
2-a. - Les balises simples
Les balises simples sont des balises HTML qui n'ont pas besoin d'être fermées, c'est-à-dire qu'elles ne contiendront aucune autre balise. En effet, nous verrons plus loin que certaines balises HTML peuvent être imbriquées les unes dans les autres, ce qui n'est donc pas le cas des balises simples qui se suffisent à elle-mêmes. Par exemple pour afficher une image dans une page web on va utiliser la balise "img" qui se présentera sous la forme suivante : <img src="adresse_image">, "img" étant le nom de la balise, "src" étant l'attribut et "adresse_image" étant la valeur de l'attribut.
2-b. - Les balises doubles
Les balises doubles doivent être ouvertes puis fermées car elles sont destinées à accueillir du contenu (des textes ou des images par exemple) ou bien d'autres balises en cas d'imbrication de balises. La balise fermante est identique à la balise ouvrante, sauf qu'elle contient un "/" devant son nom pour indiquer la fermeture ; et elle ne contient pas d'attributs. Par exemple pour insérer un paragraphe de texte dans une page web on utilisera la balise ouvrante <p> et la balise fermante en insérant le texte entre les deux, soit <p>Paragraphe de texte.</p>.
2-c. - Les balises structurelles d'une page HTML
Une page HTML doit toujours être structurée de la façon suivante :
- Définition du type de document (balise "DOCTYPE")
- Balise de début de page HTML : <html>
- L'en-tête, appelé aussi "header" (situé entre les balises <head> et </head>)
- Le corps, appelé aussi "body" (situé entre les balises <body> et </body>)
- Balise de fin de page HTML : </html>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> - <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
2-d. - Les balises imbriquées
Lorsque l'on veut appliquer plusieurs effets à un contenu (voir mise en forme ci-dessous), par exemple du texte en italique et souligné dans un paragraphe de texte, il faut imbriquer plusieurs balises doubles en faisant très attention au respect de la hiérarchie "première ouverte, dernière fermée" ! Soit <p>Texte en <i>italique et <u>souligné <b>ici</b> seulement</u></i>.</p> ; ce qui donne :
3. - Les commentaires
Il est très utile de commenter votre code lorsque vous programmez car cela le rend plus lisible et il est ainsi plus aisé de se replonger dedans afin d'y effectuer des modifications ou de rechercher un bug par exemple. La balise de commentaire est une balise simple qui commence par "<!-- " et se termine par "-->". Attention ! Lorsqu'un navigateur affiche le code source d'une page HTML il affiche également les commentaires, il ne faut donc rien mettre dans ces balises qui soit confidentiel ! En revanche tout ce qui est écrit dans cette balise sera ignoré et ne sera pas affiché dans la page par le navigateur.
4. - La mise en forme des textes
La taille des titres est hiérarchisée de la plus grande à la plus petite par les balises doubles <h1>, <h2>, ... jusqu'à <h6> qui se ferment respectivement par </h1>, </h2>, ... jusqu'à </h6> et qui enserrent le texte du titre. Le texte des paragraphes est positionné à l'intérieur de la balise double <p> et </p>.
Le choix de la police de caractères, de sa taille et de sa couleur se fait par l'utilisation de la balise double "font" avec les attributs face="...", size="..." et color="..." dont les valeurs sont respectivement les noms des polices (Arial, Verdana, ...), la taille absolue de 1 à 7 ou relative de -2 à +4 (la valeur par défaut de "size" étant 3) et un nom ou un code couleur (blue, red, black, ... ou #0000FF, #FF0000, #000000, ...). Pour en savoir plus sur les codes couleur et les palettes nous vous invitons à visiter le site http://www.code-couleur.com.
Différentes mises en forme complémentaires sont possibles, exactement comme dans un traitement de texte avec les balises doubles b, i, u, s, sup et sub qui correspondent respectivement aux caractères gras, italiques, soulignés, barrés, en exposant ou en indice.
5. - Les images
Les images aux formats JPG, PNG, GIF ou BMP (nous déconseillons ces dernières, souvent trop lourdes et donc lentes à afficher) s'insèrent au moyen de la balise "img" avec les attributs :
- src="..." qui contient l'adresse url de l'image,
- alt="..." qui contient un texte alternatif (très utile au référencement et indispensable pour les visiteurs qui n'affichent pas les images dans leur navigateur),
- title="..." qui contient le titre de l'image pour l'infobulle,
- width="..." qui contient sa largeur en pixels ou en %,
- height="..." pour sa hauteur en pixels ou en %,
- align="..." pour son alignement par rapport au texte adjacent,
- et enfin border="..." pour fixer la présence et l'épaisseur d'une bordure, ou son absence avec la valeur zéro.
- center (centrage horizontal)
- left (à gauche)
- right (à droite)
- middle (centrage vertical)
- top (au dessus)
- bottom (en dessous)
- hspace="..." : espace horizontal entre l'image et le texte adjacent, en pixels,
- vspace="..." : espace vertical entre l'image et le texte adjacent, en pixels,
- name="..." : nom de l'image,
- lowsrc="..." : image alternative de poids plus faible qui s'affiche en attendant le chargement de la totalité de l'image originale par le navigateur
- longdesc="..." : url de la description (longue) de l'image
- usemap="..." : nom de la carte des zones réactives de l'image (voir ci-après)
5-a. - Les zones réactives des images
Sur une image on peut souhaiter rendre plusieurs zones cliquables (c'est-à-dire en faire des liens) ou à l'inverse exclure des zones des liens. Pour ce faire le HTML propose la création d'une carte de l'image que l'on nomme la "map", chaque zone étant appelée une "area".Cette carte sera reliée à l'image par l'insertion de l'attribut usemap="#nom_carte" dans la balise img.
Pour coder une carte de l'image on va utiliser la balise double <map name="nom_carte"> pour encadrer une ou plusieurs balises simples <area shape="..." coords="..." href="...">. Ces balises n'afficheront rien directement dans le navigateur, elles servent seulement à définir les zones de la carte de l'image qui leur fera référence par appel du nom de la carte.
L'attribut href contiendra en valeur l'url de destination du lien.
L'attribut shape sert à définir le type de surface d'une zone à l'aide des valeurs suivantes :
- "rect" ou "rectangle" = zone rectangulaire
- "circ" ou "circle" = zone circulaire
- "poly" ou "polygon" = zone polygonale
Pour une zone réactive rectangulaire l'attribut coords contient 4 valeurs : les 2 premières sont l'abscisse et l'ordonnée du coin supérieur gauche du rectangle à tracer par rapport au coin supérieur gauche de l'image ; les 2 suivantes sont l'abscisse et l'ordonnée du coin inférieur droit du rectangle à tracer par rapport au même coin supérieur gauche de l'image.
Pour une zone réactive circulaire l'attribut coords contient 3 valeurs : les 2 premières sont l'abscisse et l'ordonnée du centre du cercle par rapport au coin supérieur gauche de l'image ; la suivante est le rayon du cercle.
Pour une zone réactive polygonale l'attribut coords contient autant de fois 2 valeurs que le polygone a d'angles. Chaque angle est représenté par son abscisse et son ordonnée par rapport au coin supérieur gauche de l'image.
Pour réaliser des "maps" un peu complexes il existe un créateur de map sur image en ligne à l'adresse suivante : http://www.isdntek.com/tagbot/imap.htm (en anglais). Il y a aussi un petit logiciel shareware nommé "Imagination Image Map Editor" (en anglais) dont la version d'évaluation permet de réaliser 20 créations de maps librement : téléchargement ici.
Voici un exemple de code créé pour le logo vert de 1&1 qui contient cercle, rectangle et polygone dans la même "map" :
ce qui donne :
Vous observerez en passant la souris sur ce logo qu'elle ne s'anime que sur 3 zones : le cercle contenant l'arbre et la flèche, le carré contenant 1&1, puis le texte situé en dessous. Dans cet exemple on combine les 3 "sharpe" pour diriger l'internaute vers 3 directions différentes (voir liens ci-dessous).
6. - Les liens hypertextes
Les liens vers d'autres pages web s'inscrivent dans une balise double de la forme suivante : <a href="adresse_page_web">Texte visible du lien</a>. La partie visible du lien peut être un texte (comme dans l'exemple précédent), ou bien une image (balise "img"). L'attribut "href" est indispensable car il contient pour valeur la destination du lien.
On distingue deux types de liens : externes ou internes. Les premiers redirigent vers une page autre que la page courante située soit dans votre site, soit dans un autre site. Les seconds redirigent vers la page courante, généralement vers un autre endroit de cette page que l'on aura ciblé par une ancre.
Les ancres permettent de naviguer dans une même page, pour y diriger le visiteur on ajoute un # devant un mot-clé en valeur de l'attribut href, comme ceci : <a href="#NomAncre">Texte de l'ancre</a> ; et on n'oubliera pas d'ajouter l'ancre sur le texte cible dans la page en y ajoutant l'attribut id="NomAncre", soit par exemple : <h2 id="NomAncre">Texte de l'ancre</h2>.
D'autres attributs sont possibles (et même souhaitables) pour la balise "a", en particulier target="..." qui sert à préciser où s'ouvre le lien avec les valeurs suivantes :
- _self : dans le même cadre de navigation ; c'est la valeur par défaut
- _blank : dans une nouvelle fenêtre de navigation (ou un nouvel onglet)
- _top : dans la totalité de la fenêtre courante (utile si elle contient plusieurs cadres)
- _parent : dans le cadre qui contient les cadres courants
- NomDuCadre : dans le cadre spécifié à condition qu'il ait été nommé précédemment
Il est également possible de faire un lien vers une adresse email, bien que cela soit déconseillé en raison du vol des adresses par les robots spammeurs. Toutefois, si vous devez le faire quand même, voici comment procéder : il suffit d'ajouter devant la valeur de l'attribut href la mention mailto: suivi de l'adresse email. Ce qui donne <a href="mailto:adresse@email.com">Envoyer un mail</a>. Ce type de lien ouvrira le logiciel de messagerie du visiteur avec une fenêtre de nouveau mail dont le destinataire sera déjà inséré.
A la suite de l'adresse email, sans espace, on peut ajouter (et même cumuler en remplaçant ? par & à partir du second argument) :
- une autre adresse séparée par un ";"
- un sujet avec "?subject=..."
- un contenu avec "?body=..."
- une adresse en copie avec "?cc=..."
Annexe : Aide-Mémoire des balises et termes HTML
| Balise Simple ou Ouvrante | Balise Fermante si Double | Attribut possible | Valeur possible | Fonction de la balise ou de l'attribut | Traduction |
| <!DOCTYPE ...> | Voir W3C | Définition du type du document | |||
| <html> | </html> | Début et fin de page | |||
| <head> | </head> | Début et fin en-tête | tête | ||
| <body> | </body> | Début et fin corps de page | corps | ||
| <p> | </p> | Paragraphe | |||
| <b> | </b> | Caractères gras | |||
| <i> | </i> | Caractères italiques | |||
| <u> | </u> | Caractères soulignés | |||
| <s> | </s> | Caractères barré | | ||
| <sup> | </sup> | Caractères en exposant | |||
| <sub> | </sub> | Caractères en indice | |||
| <h1> <h2> ... <h6> | </h1> </h2> ... </h6> | Titre, sous-titre, sous-sous-titre, ... de h1 à h6 | |||
| <img ... > | src="..." | url | Affichage image JPG, PNG, GIF ou BMP et adresse | ||
| border="..." | "0" | - Bordure ('0' = absence) | bordure | ||
| "x" | - Bordure large de 'x' pixels | ||||
| width="..." | pixels | - Largeur de l'image | largeur | ||
| height="..." | pixels | - Hauteur de l'image | hauteur | ||
| alt="..." | texte | - Texte alternatif à l'image | |||
| title="..." | texte | - Titre pour infobulle | titre | ||
| <font> | </font> | face="..." | Arial,... | Police de caractères | police |
| color="..." | #000000 | Code couleur de la police | couleur | ||
| size="..." | de 1 à 7 ou de -2 à +4 | Taille de la police (3 par défaut) en taille absolue ou relative | taille | ||
| <a ... > | </a> | href="..." | url #ancre mailto: | Destination lien externe Destination lien interne Destination vers email | |
| target="..." | _self _blank _top _parent "texte" | Affichage : - dans le cadre courant - dans une nouvelle fenêtre - dans totalité fenêtre cour. - dans cadre conteneur - dans un cadre "nommé"' | |||
| title="..." | texte | Titre pour infobulle | titre |
