HTML signifie HyperText Markup Language, ce que je me trouve bien en peine d'essayer de traduire, puisqu'il n'existe pas à ma connaissance de mot français pour "markup"... Il s'agit d'un langage destiné à "coder" une mise en page particulière d'un document, avec des liens hypertexte. Le HTML est la base d'Internet, puisque toutes les pages consultables sont (à peu de choses près) écrites dans ce langage. (Les non-initiés auront tout de même entendu parler de site réalisés, par exemple, en PHP ou dans d'autres langages de scripts ; cela n'est pas incompatible, car le code PHP est destiné à fabriquer, selon divers paramètres, un fichier HTML qu'un navigateur peut comprendre.)
Le HTML sert surtout à la mise en page "de base". On peut lui rajouter un certain nombre de choses pour l'embellir ou le rendre plus dynamique. Ainsi, l'apparence de ce document doit être à peu près impossible à obtenir en HTML pur ; j'ai rajouté des feuilles de style (que je vous recommande chaudement). Les effets dynamiques sont impossibles à réaliser en HTML pur, mais on peut par exemple rajouter du javascript...
Créer un document HTML simple est très facile : il suffit de créer un fichier texte "normal", de l'éditer avec votre programme favori (le bloc-note ou tout programme du genre suffit largement pour de petits fichiers de test, mais je recommande un programme un brin plus puissant pour de gros fichiers).
Un document HTML est constitué de texte inclus dans des balises, le plus souvent entre une balise d'ouverture et la balise de fermeture correspondante. Le texte inclus entre ces deux balises est alors sujet à l'"effet" de celles-ci, et peut lui-même contenir des balises. (Sauf indication contraire, toute balise ouvrante doit être associée à une balise fermante correspondante.)
Les balises HTML sont toujours écrites entre un < et un >. Le premier mot collé au < est le nom de la balise ; tous les noms de balises sont composées de lettres normales (sans accent) uniquement. Une balise de fermeture reprend le nom de sa balise d'ouverture et y ajout un slash ( / ) qui vient s'insérer entre le < et la première lettre du nom de la balise. (Par exemple, <STRONG> est une balise d'ouverture, et </STRONG> est la balise de fermeture correspondante. Ceci est un exemple de l'effet de cette balise.)
Ces balises peuvent elle-même être modifiées par des attributs permettant de définir, par exemple, la couleur du texte qu'elles contiennent. Une balise s'écrit donc le plus souvent comme cela : <BALISE nomattribut="valeurattribut">texte quelconque<BALISE>. Rien n'empêche une balise d'avoir plusieurs attributs ; dans ce cas, il suffit de les rajouter les uns à le suite des autres dans la balise. Chaque balise a une liste d'attributs déterminés qui peuvent la définir ; un attribut incorrect sera ignoré.
En dehors des balises, le texte destiné à être rendu "tel quel" peut être écrit tel quel... ou presque. Le HTML reformate tous les espaces, tabulations et retours à la ligne, remplaçant tout usage de ces éléments (ou combinaisons de ces éléments) par un simple espace à l'écran.
Les navigateurs se moquent complètement de la présence ou non de majuscules dans les noms des balises et des attributs ; ainsi, ils ne voient aucune différence entre <STRONG>, <strong> et <StRoNg>. La principale différence est le degré de lisibilité du code source : personnellement, je préfère mettre les noms de balises en majuscule pour mieux les répérer, et je laisse les noms des attributs en minuscule pour ne pas surcharger mon code de majuscules guère reluisantes. (À noter que ceci est en désaccord avec les spécifications du xhtml, qui imposent entre autres d'écrire les balises en minuscule.)
Quel que soit le contenu que l'on désire mettre dans un document HTML et le formatage que l'on désire réaliser, il y a deux balises auxquelles on ne peut pas couper : les balises <HTML> et <BODY>. (L'honnêteté me pousse à remarquer que la plupart des navigateurs rajouteront gentiment ces deux balises si elles venaient à manquer.)
| Balise | Usage / Effet |
|---|---|
| <HTML> | Marque le début et la fin du code HTML du document. Tout le code HTML de la page doit être situé entre les balises <HTML> et </HTML> ; tout ce qui est en-dehors ne sera (normalement) pas représenté |
| <BODY> | Marque le début et la fin du document lui-même. Seul le code situé entre les balises <BODY> et </BODY> donnera lieu à une représentation à l'écran. |
| Balise | Usage / Effet |
|---|---|
| <!-- ... --> | <!-- et --> ne sont pas vraiment des balises, mais permettrent d'écrire des commentaires : le navigateur ignore tout ce qui se trouve entre ces deux éléments. |
| <P> | Définit un paragraphe précédé d'un saut de ligne. Cette balise ne doit pas obligatoirement être refermée. |
| <BR> | Effectue un retour à la ligne. Cette balise n'a pas lieu d'être refermée. |
| <STRONG> | Met son contenu en gras. |
| <EM> | Met son contenu en italique. |
| <H1>, ... <H6> | Cette série de balise est destinée à mettre en valeur son contenu à la manière de titres de sections, sous-sections, etc. <H1> correspond à la plus forte mise en valeur, <H6> à la plus faible. |
Les tableaux constituent le principal moyen de mise en page en HTML pur. Ils sont en eux-même assez contraignant : le code à écrire pour faire le moindre tableau est au début assez rébarbatif.
| Balise | Usage / Effet |
|---|---|
| <TABLE> | Ouvre et ferme un tableau. Les balises <TR> doivent obligatoirement être mises entre un <TABLE> et un </TABLE>. |
| <TR> | Ouvre et ferme une ligne de tableau. Les balises <TD> (ou <TH>) doivent obligatoirement être mises entre un <TR> et un </TR>. |
| <TD> | Ouvre et ferme une case de tableau. |
| <TH> | Identique à <TD>, mais met en valeur le texte de la case. (Sert pour les cases de titre.) |
Voici un exemple de tableau pour illustrer quelques attributs des balises <TD> (ou <TH>) :
| Première colonne | Seconde colonne | Troisième colonne | Quatrième colonne |
|---|---|---|---|
| Ceci est | une ligne normale | contenant | quatre cases. |
| L'attribut ROWSPAN permet de faire une case de plusieurs lignes de haut. | L'attribut COLSPAN permet de faire une case de plusieurs colonne de large. | ||
| Cette case est (presque) vide. | On peut bien sûr employer COLSPAN et ROWSPAN en même temps. | ||
| Celle-ci aussi. | |||
Attention, colspan et rowspan nécessitent d'"éliminer" les cases "absorbées".
Toutes les couleurs de ce tableau sont définis par des effets de style. Ils pourraient en partie être obtenus au moyen d'attributs obsolètes.
Les liens hypertexte sont ce qui fait d'Internet une toile : ils permettent de passer librement d'une page à l'autre.
Ces liens sont tous obtenus au moyen de la seule balise <A>. Le texte compris entre les balises <A> et </A> est le lien lui-même (ou l'ancre d'un lien le cas échéant). Cependant, cette balise ne fait rien d'elle-même ; ce sont ses attributs qui lui donnent tout son pouvoir.
| Attribut de <A> | Usage / Effet |
|---|---|
| href | Définit l'url de destination du lien. La valeur de cet attribut peut être une url (par exemple http://www.enseirb.fr/), un chemin local vers une page voisine (par exemple ../index.html) ou un lien vers une ancre (par exemple #liens). |
| name | Définit une ancre pour un lien vers un endroit spécifique d'un document. Le nom d'une ancre ne doit comporter aucun caractère spécial. Pour y faire référence, il suffit de faire un lien vers "fichier.html#nomdelancre". (Le nom du fichier peut être omis s'il s'agit du fichier courant.) |
Mettre des images sur une page peut la rendre plus attractive... Il existe évidemment une balise pour cela : la balise <IMG>, qui n'a pas besoin d'être refermée, et que le navigateur remplace par l'image correspondante. Ici encore, ce sont les attributs de cette balise qui font le boulot.
| Attribut de <IMG> | Usage / Effet |
|---|---|
| src | Définit l'url de l'image à afficher. Sa valeur peut être un chemin vers une image locale ou lointaine. |
| alt | Définit un texte alternatif qui sera affiché à la place de l'image si celle-ci est indisponible ou que le navigateur ne peut afficher d'images. (Oui, ça existe.) |
L'en-tête d'un document HTML est une partie très importante que l'on aurait tort de négliger. Il est susceptible de contenir un certain nombre d'informations importantes pour soi-même et les gens qui liront la page ; les moteurs de recherche se servent aussi de ces balises pour répertorier les pages.
| Balise | Usage / Effet |
|---|---|
| <!DOCTYPE> | Cette balise n'en est pas vraiment une : elle est censé définir (le cas échéant) le type du document, en accord avec les spécifications officielles, et se place avant même la balise <HTML>. Elle sert à s'assurer qu'un navigateur prendra bien le document pour ce qu'il est. Pour du HTML 4.01 strict (comme cette page, donc), il faut insérer <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> au début du document |
| <HEAD> | Cette balise est à l'en-tête ce que <BODY> est au corps du document. L'en-tête est placé au début du document, entre les balises <HTML> (début du code HTML du document) et <BODY> (début du contenu du document). Les balise suivantes sont à placer entre <HEAD> et </HEAD>. |
| <TITLE> | Définit le titre du document, que la plupart des navigateurs affichent dans leur barre supérieure. |
| <META> | Sert à définir certaines informations sur le document lui-même. <META http-equiv="REFRESH" content="10; url=http://ixonze.networms.org/"> redirige vers ma page de garde après 10 secondes. <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> définit le jeu de caractères employé comme étant l'ISO-8859-1 (c'est-à-dire vraisemblablement celui qu'il vous faut). <META name="author" content="Thomas PIERRE"> m'identifie comme l'auteur de la page. |
| <LINK> | Sert à associer divers fichiers, telles que des feuilles de style, au document. <LINK rel="stylesheet" type="text/css" href="style.css"> associe le fichier style.css situé au même endroit que le document comme une feuille de style de ce document. |
À noter que les balises <META> et <LINK> n'ont pas lieu d'être refermées.
Il existe un certain nombre de caractères "spéciaux" que l'on peut afficher au moyen du "code" correspondant. Ces codes commencent toujours par une esperluète ou "et commercial" (&) et finissent par un point-virgule (;).
| Nom | Code | Affichage | Description |
|---|---|---|---|
| Espace insécable | | " " | L'espace insécable est toujours rendu à l'écran par un espace, contrairement à l'espace normal qui peut être rendu par un espace ou un retour à la ligne selon les cas, et dont les répétitions sont ignorées. En toute logique, il devrait être employé devant un certain nombre de signes de ponctuation (point-virgule, deux points, etc.) qui selon les règles de la typographie française sont normalement précédés de ce caractère. Il peut également servir à forcer la main au navigateur qui pourrait avoir par exemple envie de séparer deux mots que l'on souhaiterait voir afficher côte-à-côte, notemment dans des cases de tableaux. |
| Esperluète | & | "&" | Sert à afficher ce caractère qui a un sens particulier en HTML. |
| "Inférieur" | < | "<" | Sert à afficher ce caractère qui a un sens particulier en HTML. |
| "Supérieur" | > | ">" | Sert à afficher ce caractère qui a un sens particulier en HTML. |
Cette liste est bien entendue loin d'être exhaustive.
Il existe un certain nombre de balises et d'attributs de balises qui, bien que définis dans des versions antérieures du HTML, ne sont plus considérés comme valides selon les dernière spécifications. Cela peut sembler arbitraire, surtout qu'en général ils restent comprises par les navigateurs, mais ils l'ont été parce que les feuilles de style les ont rendus obsolètes.
Je présente donc ici une liste (non-exhaustive) d'attributs qui soit ne sont plus vraiment valables en HTML, soit ne méritent plus (selon moi) d'être utilisés, avec bien entendus les propriétés de style qui permettent de faire la même chose (sinon mieux). (Ils ne sont pas forcément définissables pour toutes les balises.)
| Attribut | Effet | Propriété(s) de style correspondante(s) |
|---|---|---|
| text | Définit la couleur du texte. | color |
| bgcolor | Définit la couleur du fond. | background-color |
| link | Définit la couleur des liens non visités. | color employé pour A:link |
| vlink | Définit la couleur des liens visités. | color employé pour A:visited |
| height | Définit la hauteur. | height |
| width | Définit la largeur. | width |
| cellpadding | Définit le "padding" des cases d'un tableau. | padding |
| cellmargin | Définit la marge entre les cases d'un tableau. | margin |
| align | Définit l'alignement horizontal. | text-align |
| valign | Définit l'alignement vertical. | vertical-align |
Ce document est loin d'être complet vis-à-vis du HTML 4.01, et ce n'est d'ailleurs pas son but. Un certain nombre de choses ont été omises, soit parce que je les trouve inutiles ou trop complexes, soit parce que j'ignore simplement leur existence ou leur usage, soit parce que je n'y ai simplement pas pensé, soit parce que, euh..., c'est quand même pas facile d'écrire un document de ce genre et que la fainéantise a eu raison de moi sur certains points.
Je n'ai par exemple pas parlé des formulaires, ni des listes, et j'ai mis sur le dos des feuilles de style tout ce qui pouvait l'être. J'espère cependant qu'il servira au moins un minimum à ceux qui l'ont lu.