Cliquez Ici

Introduction à HTML(1)

HTML... qu'est-ce que c'est?

'HTML' est l'acronyme de HyperText Markup Language ce qui peut être traduit en français par 'Langage de Marquage pour HyperTexte'. Comme son nom l'indique HTML n'est en fait 'rien d'autre' qu'un langage qui permet de mettre en forme un document hypertextuel. Ce document (que vous consultez à l'instant) est écrit en HTML, comme d'ailleurs, tous les autres document que vous pouvez consultez sur le Web.

Imaginez que...

Imaginez que vous soyez un imprimeur et qu'un client un peu rétro vous envoie sa commande par Télex (imaginons qu'il s'agit d'imprimer le paragraphe précédent 'HTML... qu'est-ce que c'est?').

Question :
Comment dans ces conditions, le client peut-il vous faire savoir l'apparence que doit avoir le document final?

Je vous rappelle que le Télex ne permet pas vraiment de faire de mise en page; quoiqu'il en soit dans notre exemple le télex ne permet aucune mis en page et l'imprimeur reçoit toute la commande sur une longue bandelette de papier sans retour à la ligne...


fig.1 ) Extrait d'une commande à un imprimeur

Une solution est d'établir un code de mise en forme entre le client et l'imprimeur qui permette au premier de dire au second comment imprimer sa commande. Par exemple, imaginons que le client décide d'utiliser les marqueurs <vert> et </vert> pour délimiter du texte qui doit être imprimer en couleur verte, etc.


fig.2 ) Code de mise en forme

La partie du Télex spécifiant le contenu à imprimer aurait peut-être cette allure :


fig.3 ) Commande codée par le client

Si le code est suffisamment exhaustif il permettra au client de préciser à l'imprimeur, toute la mise en forme de son texte.

HTML... à quoi ça sert?

En fait HTML est ce code international qui permet à des logiciels tels que Netscape ou Internet Explorer (génériquement appellé des browsers, ou butineur en québecois) reliés à Internet d'afficher du contenu sur l'écran de votre ordinateur, selon les spécifications du rédacteur. Celles-ci se traduisent concrètement par l'utilisation de tags (tags=marques) dans le texte. Le travail du rédacteur se 'résume' donc à écrire du contenu et à le 'taguer' selon le code HTML. Tous les browser reconnaissent la plupart des tags HTML car un effort important à été fournit pour standardiser HTML.

Lors de la rédaction de cette page j'ai par exemple pu spécifier que le titre de ce paragraphe (i.e. HTML... à quoi ça sert?) doit être écrit en vert et d'une taille supérieure au texte normal. Si HTML (ou quelque chose de semblable) n'existait pas, les pages Web n'auraient pas de couleur, tout les textes seraient écris à l'aide du même type de caractère, toujours à la même taille, etc. Le Web n'existerait tout simplement pas... car il ne serait pas possible de spécifier des hyperliens.

Mais voila, HTML existe et permet de faire de pages Web. Voici une liste non-exhaustive de ce que HTML permet faire :

Structure d'un document HTML

Un fichier HTML doit répondre à certains critères pour qu'un browser le reconnaisse et affiche correctement son contenu.
  1. Tout fichier HTML doit avoir l'extension .html ou .htm, p.ex. monFichier.html.
  2. Par ailleurs, un document doit commencer et se terminer par les tags <html> respectivement </html> (voir fig.4).
  3. Des informations, méta par rapport au contenu (titre, mots-clefs, etc.) doivent être compris entre les tags <head> et </head> (voir fig.4).
  4. De plus, le contenu affichable dans le browser doit être comprises entre les tags <body> et </body> (voir fig.4).
  5. Finalement, tous les tags utilisés doivent être syntaxiquement correctes.

fig.4 ) fichier HTML minimal

Une grande partie de l'apprentissage d'HTML se résume à l'apprentissage de la syntaxe des tags.

Comment rédiger du HTML?

Pour rédiger un texte en HTML il existe 3 méthodes :
  1. La façon 'hard' : vous ouvrez le bloc-notes et rédigez votre document, en écrivant le texte et les tags à la main. On recourt à cette option lorsque les deux autres ne sont pas à dispostion.
  2. La façon 'Hacker' : vous utilisez un éditeur spécialisé (comme par exemple Emacs) qui vous facilite l'insertion des tags, mets ceux-ci en couleur pour les distinguer du texte, etc. Cette méthode permet une manipulation directe du code, mais nécessite une assez bonne maîtrise d'HTML.
  3. La façon 'facile' : vous utilisez un éditeur WYSIWYG (What You See Is What You Get) tel que Netscape Gold ou Composer, et vous rédigez votre document HTML comme un texte avec WinWord. Bien que d'abord très facile, cette méthode n'est pas LA solution définitive car souvent vous allez devoir intervenir à la façon 1 ou 2 pour corriger des erreurs commises par l'éditeur.
Au cours de l'année nous allons dans un premier temps utiliser la façon 'hard' pour apprendre et comprendre le principe d'HTML, puis nous apprendrons à utiliser un éditeur HTML WYSIWYG.

Travail à domicile (optionel)

Comme travail à domicile pour le prochain cours, je vous propose d'étudier les chapitres 1 et 2 du TECFA HTML Manuel.

Image nécessaire pour l'exercice: europe.gif
Page exercice