Support de Cours complet en à HTML
Le Langage
HTML
Une introduction
Nino
Janvier 1997
SOMMAIRE
I - Introduction
II - Rappels et définitions
III - Structure d'une page HTML
IV - Styles d'écriture et séparateurs
V - Listes d'éléments
VI - Liens internes et externes
VII - Inclusion d'images
VIII - Concepts avancés
IX - Conclusion
I - Introduction
Le but de ce document est de présenter, d'une façon concise et rapide, le langage HTML. Il ne s'agit que d'une introduction, les notions avancées comme les pages dynamiques, les extensions propriétaires des fournisseurs de navigateurs web ainsi que les langages comme Java et Javascript ne seront qu'évoquées dans le dernier chapitre, sans être développées.
Le lecteur est supposé connaître les principes d'Internet et savoir utiliser des outils classiques comme les navigateurs web.
Ce document n'a nullement la prétention d'être un cours sur le langage HTML. De plus, l'auteur ne peut assurer le lecteur de la totale exactitude des informations contenues dans les lignes qui suivent.
II - Rappels et définitions
Avant d'aborder le langage HTML, rappelons quelques définitions et concepts liés aux serveurs web.
Il existe, sur Internet (et maintenant en Intranet), un nombre important de serveurs proposant des documents multimédia c'est-à-dire composés de texte, images, sons, animations etc. Ces documents, appelés pages web sont visualisés grâce à un programme appelé browser ou navigateur en Français. Il existe principalement deux grands navigateurs, à savoir Netscape, disponible sur un très grand nombre de platesformes (Windows, UNIX, Mac) et Internet Explorer, fourni par Microsoft pour ses systèmes d'exploitation.
Un document, proposé par un serveur web, est toujours désigné par une "adresse" appelée URL pour Universal Resource Locator. Une URL a la structure suivante :
protocole://adresse_machine[/répertoire/sous-rep/ /nom_document]
Le protocole HTTP (HyperText Transfert Protocol) est utilisé pour transmettre une page au format HTML (que nous allons définir tout de suite). Il est cependant possible d'indiquer un autre protocole comme ftp, telnet etc. C'est pourquoi on parle de localisateur de ressource universel.
La machine sur laquelle fonctionne le serveur web est spécifiée soit par son adresse IP numérique (ex : 147.25.48.54) soit par son adresse DNS alphanumérique (ex : ). Dans le dernier cas, le premier terme de l'adresse DNS est généralement "www" (mais ce n'est pas une obligation).
Enfin, le document demandé est identifié par son chemin d'accès (path) et son nom. Pour une page HTML, son nom se termine par .html. Notez que si aucun document n'est spécifié, c'est une page par défaut, dite HomePage ou Page d'acceuil qui est envoyée au navigateur.
Voici un exemple d'URL (fictive):
Précisons que les pages HTML utilisent la technique de l'hypertexte, permettant de spécifier des URL au sein des pages, vers d'autres pages. Cela crée une structure, au niveau mondial, qui peut être vue comme une toile d'araignée, d'où le terme de World Wide Web.
Maintenant que nous avons fait ces quelques rappels, il est temps de définir ce qu'est le langage HTML.
HTML signifie HyperText Markup Language. Comme son nom l'indique, c'est un langage qui permet de définir l'habillage d'un document, c'est à dire la façon dont il doit s'afficher à l'écran d'un navigateur.
Cette notion d'habillage est importante : elle signifie qu'une page écrite en HTML comportera du texte, bien-sûr, mais aussi des codes ou balises permettant de modifier l'affichage de ce texte, à savoir sa forme, sa taille, sa couleur. Le HTML permet également d'inclure des images, du son ou des animations dans une page web.
Le HTML est très simple. Ce n'est pas un langage de programmation dans le sens où il n'existe pas de variables, boucles, expressions conditionnelles. En fait, c'est plus un ensemble de codes qu'un langage, comme on le conçoit en informatique.
Il faut également signaler qu'un document HTML n'est autre qu'un fichier texte (i.e. ASCII) auquel on a ajouté des balises HTML. Il est en effet parfaitement possible de créer une page HTML avec un simple éditeur de texte comme Write ou Wordpad sous Windows, à condition de sauver le fichier ainsi créé au format texte, avec une extension .html (ou .htm pour les versions de Windows antérieures à Windows 95). En pratique cependant, on utilise des outils munis d'une interface graphique évoluée permettant, d'un clic de souris, d'insérer dans le document en cours d'édition une balise HTML, comme on le ferait avec un traitement de texte.
Dans les lignes qui suivent, nous n'allons présenter que certaines commandes du langage HTML, dans sa version 2, dernière en date à avoir été "officialisée". Nous ne présenterons que très peu de commandes appartenant aux dernières version du langage, toujours non définies officiellement, désignées par les numéros de versions 3 et 3.2. En pratique, les navigateurs récents exploitent déjà les fonctionnalités des versions 3 et 3.2 du langage.
III - Structure d'une page HTML
Nous avons vu dans le chapitre précédent qu'une page HTML était en fait un fichier texte, enrichi d'un certain nombre de codes ou commandes, appelées balises. Ces balises sont toujours exprimées sous la forme d'un mot clé, encadré par les caractères "". Exemple : .
Pour la plupart des balises, il existe une balise de fermeture associée, reprenant le même nom, mais précédé du caractère "/". Exemple : . La commande spécifiée s'applique donc uniquement au texte situé entre le couple de balises ainsi formé. Exemple:
Notons que :
• une balise peut indifféremment être indiquée en minuscules ou en majuscules,
• le formattage "manuel" du document (espaces, sauts de lignes, ) est toujours ignoré.
Par exemple : est interprété de la même façon par le navigateur web que la syntaxe sur plusieurs lignes indiquée ci-dessus.
Nous venons de découvrir, sans le savoir, un des éléments de la structure d'une page HTML : toute page doit en effet débuter par la balise et se finir par .
Entre ces deux balises, on définit deux zones : l'en-tête, spécifié par les commandes et , ainsi que le corps, délimité par: et . Ce qui donne, comme structure de base :
Dans l'en-tête, on ne met généralement qu'une seule information, le titre du document qui sera affiché en haut de la fenêtre du navigateur et qui apparaît dans les bookmarks (listes d'URL gérées par un navigateur, une sorte d'annuaire).
Ce titre est indiqué entre les balises et .
Exemple: Ceci est le titre.
Dans le corps, on met en fait tout le document à afficher (texte, définition des images etc.).
Signalons l'existence d'une balise de commentaire, qui peut être utilisée partout dans les documents HTML, définie comme suit :