Le langage HTML
Les langages de balisages sont aussi appelés langages de description car ils ont pour but de décrire la structure des documents décrits. On parle par exemple de langage de description de page lorsqu'il s'agit de décrire la structure d'une page d'un site Internet (titre, paragraphes, sauts de ligne, passages en gras ou en italique, etc.). Le langage de description de page le plus connu est sans doute le HTML, qui est amené à être remplacé par le XHTML. Mais les langages de balisages peuvent servir à décrire bien d'autres types de documents que des pages web. Ils peuvent ainsi être utiles pour la création d'une base de données de livres que possède une bibliothèque, pour la mise en place d'un répertoire sur un téléphone mobile, etc. Citons quelques noms de langages de balisage : XML, HTML, latex.
Introduction
Pour publier des informations pouvant être lues dans le monde entier, il faut utiliser un langage que tous les ordinateurs soient susceptibles de comprendre. Le langage utilisé par le World Wide Web est le HTML (HyperText Markup Language). Un document HTML est d'abord un texte. Mais c'est un texte avec des indications sur l'articulation logique du document, comme savoir ce qui est un titre, une définition, etc (Markup). Il n'a pas une structure linéaire comme les textes imprimés classiques, il permet, à travers des liens, de sauter d'une partie du document à une autre voire à d'autres documents (HyperText). Il permet aussi d'inclure d'autres types de contenus comme des images, des vidéos, des applications. Le logiciel utilisé pour décoder le HTML et l'afficher à l'écran s'appelle un navigateur (Firefox, Safari...). Le HTML est apparu dans les années 1990. Il est rapidement devenu populaire, notamment grâce au navigateur Mosaic, et de nombreuses modifications au langage de base ont été apportées. Le premier vrai standard est apparu en 1995 et porte le nom HTML 2.0. Il a évolué depuis pour aboutir en 1997 au HTML 4, et enfin au HTML 5 en 2014.
L'organisme chargé de rédiger les standards concernant le WWW est le W3C (http://www.w3.org/) . Vous trouverez sur leur page toutes les normes, et des validateurs (http://validator.w3.org/) permettant de vérifier si vos pages sont conformes aux normes.
Ressources sur la toile
https://developer.mozilla.org/fr/docs/Learn/HTML/Introduction_to_HTML
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3
https://www.w3.org/Style/Examples/011/firstcss.fr.html
Pourquoi éditer le HTML à la main
Vous avez peut-être déjà généré du code HTML avec des logiciels spécialisés. Pourquoi devriez-vous en apprendre plus alors, si des logiciels savent s'en occuper pour vous ? Faisons un petit essai. Je lance Word ou LibreOffice , j'écris juste un mot (Bonjour), et je demande à Word ou LibreOffice d'exporter ce fichier en HTML. Voici le résultat.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN""http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--This file was converted to xhtml by LibreOffice - see http://cgit.freedesktop.org/libreoffice/core/tree/filter/source/xslt for the code.-->
<head profile="http://dublincore.org/documents/dcmi-terms/">
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title xml:lang="en-US">- no title specified</title>
<meta name="DCTERMS.title" content="" xml:lang="en-US"/>
<meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/>
<meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/>
<meta name="DCTERMS.issued" content="2016-10-17T08:58:49.674000000" scheme="DCTERMS.W3CDTF"/>
<meta name="DCTERMS.modified" content="2016-10-17T08:59:08.849000000" scheme="DCTERMS.W3CDTF"/>
<meta name="DCTERMS.provenance" content="" xml:lang="en-US"/>
<meta name="DCTERMS.subject" content="," xml:lang="en-US"/>
<link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/>
<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/>
<link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/>
<link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/>
<style type="text/css">
@page { }
table { border-collapse:collapse; border-spacing:0; empty-cells:show }
td, th { vertical-align:top; font-size:12pt;}
h1, h2, h3, h4, h5, h6 { clear:both }
ol, ul { margin:0; padding:0;}
li { list-style: none; margin:0; padding:0;}
<!-- "li span.odfLiEnd" - IE 7 issue-->
li span. { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; }
span.footnodeNumber { padding-right:1em; }
span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000; margin:0; border:0; padding:0; }
* { margin:0;}
.P1 { font-size:12pt; font-family:Liberation Serif; writing-mode:page; }
<!-- ODF styles with no properties representable as CSS -->
{ }
</style>
</head>
<body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; writing-mode:lr-tb; ">
<p class="P1">bonjour</p>
</body>
</html>
Dans des situations où le téléchargement est difficile (dans le désert, dans l'espace), où avec peu de mémoire disponible (Téléphone portable) c'est insupportable. Pourtant le simple code suivant suffirait :
<html>
<body>
Bonjour
</body>
</html>
Même si les logiciels de rédaction de pages web ont fait beaucoup de progrès le principe reste. Il existe des outils plus adaptés que LibreOffice pour produire du HTML, et tout ce que LibreOffice inclut dans le fichier HTML peut avoir une utilité dans certains cas. Mais l'idée reste que pour avoir un fichier de taille raisonnable, on a plus de chances sans un gros logiciel qui fait ses saletés dans notre dos.
Squelette de page HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!- Ceci se passe de commentaire. ->
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;␣charset=utf-8" />
<meta http-equiv="Content-Language"content="fr"/>
<meta name="author"content="Info_TSI"/>
<title>
Squelette
</title>
</head>
<body>
<p>
Allez dans <code> Fichier puis Enregistrer sous </code>, pour telecharger ce fichier.
</p>
<hr/>
</body>
</html>
Nous allons pour commencer essayer de comprendre ce que signifie tout cela. Les deux premières lignes servent à indiquer le type du document, à savoir ici du XHTML. La syntaxe exacte n'est pas très intéressante, il vous suffira de recopier la même chose au début de chaque nouvelle page. Nous en arrivons maintenant à la partie intéressante, le XHTML lui-même. Il a une structure d'arbre, avec des éléments emboités les uns dans les autres. Les choses de la forme : <truc> sont appelées des balises. <truc> et </truc> indiquent le début et la fin d'un élément truc. On voit donc ici que notre page est un gros élément html, qui commence par un élément head et continue avec un élément body. L'élément head (pour header, ce qui est au début) sert à donner des indications générales sur la page. On peut y indiquer l'auteur de la page, la langue (ainsi quand on demande à Google des pages en français, il risque moins de se tromper), on y mettra plus tard des indications sur comment rendre la page (couleurs, alignement, taille), et c'est là qu'on met l'élément title, avec le titre de la page, qui pourra par exemple apparaître dans la barre de titre (en haut de la fenêtre) de certains navigateurs.
L'essentiel du contenu se situe dans l'élément body. Il contient ici un élément p (paragraph), qui contient lui-même du texte et un élément code. Il contient aussi un élément hr (horizontal rule, trait horizontal). Cet élément ne se présente pas comme ceux que nous venons de voir. En effet, il n'y a rien à mettre dans un élément hr, cela n'aurait donc pas de sens de l'ouvrir pour devoir la refermer immédiatement. On utilise donc une balise avec un / final, pour indiquer que l'élément est entièrement contenu dans la balise. Vous pouvez y penser comme à un raccourci pour <hr></hr> (syntaxe à éviter). Notez qu'en HTML, cette syntaxe n'existe pas, et on utilise donc simplement <hr>, sans refermer.
Autre chose à remarquer ici, les accents ont été écrits sous formes d'entités. Une entité, de la forme &truc ; (ne pas oublier le ; final), représente un caractère. On aurait aussi pu écrire directement un é dans le fichier, c'est d'ailleurs à permettre ceci que servent toutes les indications charset et encoding au début du fichier (un fichier est une succession de 1 et de 0, et il faut expliquer au navigateur comment faire correspondre ça avec des caractères. Pour les caractères ascii (non accentués), c'est assez standardisé, mais pour les autres, il faut préciser.Les entités permettent de décrire en caractères ascii (donc avec peu de risques d'erreur) des caractères plus compliqués). Il existe des caractères qui ont une signification particulière en html, et qu'on ne peut pas utiliser directement, en particulier < > et &. On retiendra donc en particulier que ces caractères s'obtiennent par : <, > et & (donc pour afficher & j'ai dû écrire : & ).
Regardons maintenant les lignes avec les éléments meta. Je ne détaillerais pas la signification exacte de tous ces éléments, mais on remarque surtout que la balise ouvrante (qui se trouve être aussi fermante, mais cela marcherait de la même façon pour d'autres types d'éléments délimités par 2 balises) contient autre chose que le type de l'élément. Ces informations supplémentaires sont appelées des attributs. Dans le troisième élément meta, on a un attribut de nom name et de valeur author.
Pour finir, remarquons que ce qui est écrit entre : <!- et -> est ignoré par le navigateur. Il s'agit de commentaires. Il peut être utile d'en mettre pour se souvenir plus tard que l'on voulait rajouter un paragraphe à tel endroit, ou pour enlever provisoirement une partie de la page qui n'est pas d'actualité mais risque de le redevenir. Attention cependant à ne pas mettre de choses confidentielles dans les commentaires, et à ne pas en mettre trop (cela augmente la quantité de données à télécharger).
Liste d'éléments
Voici un certain nombre de types d'éléments. En partant du squelette que vous avez récupéré, vous essaierez de les inclure un peu tous, en n'hésitant pas à les imbriquer les uns dans les autres. Vérifiez au fur et à mesure que votre page s'affiche bien dans un navigateur (enregistrez votre page d'abord, sinon les navigateurs vous en montrerons une vieille version). Vérifiez aussi régulièrement qu'elle est valide, en demandant au validateur, ou en utilisant un plugin dédié de votre navigateur.
- h1, h2, h3, h4, h5, h6
Ces éléments servent à donner des titres, sous-titres, etc. h1 est généralement réservé pour le titre de la page.
Ces éléments sont souvent pourvus d'un attribut name ou id. Le second est la version officielle, mais le premier est le seul compris par internet explorer.
Dans le doute mettez les deux. Ils servent à placer une ancre, vers laquelle on pourra plus tard faire un lien cliquable.
Ces deux attributs peuvent être appliqués à la plupart des éléments.
- p
Il sert à organiser le texte sous forme de paragraphes. Même si votre texte ne comprend qu'un seul paragraphe, mettez-le dans un élément de ce type.
On verra à la prochaine séance que cela permet de gérer de façon simple les indentations, par exemple.
- strong, em
Ces éléments servent à mettre en valeur. strong est plus important, et sera généralement rendu par du gras, alors que em sera généralement rendu par de l'italique,
mais ce qui compte est le fait de donner de l'importance à ce qui est à l'intérieur, le rendu lui-même sera étudié une autre fois.
Il existe aussi un élément i qui sert à mettre en italique, ce qui est utile quand on utilise l'italique pour respecter une règle de typographie
(locution étrangère non francisée, comme des pates al dente) et non pour mettre en valeur.
- dfn
Cet élément indique que vous être en train de définir son contenu. Par exemple : une application est dite <dfn>injective</dfn> ssi...
- cite
Il permet d'indiquer que son contenu est un titre de livre, de film, etc. On peut lui donner un attribut lang avec comme valeur fr, en, it pour indiquer un nom français, anglais ou italien.
- code
Il indique un extrait de code informatique. C'est ce que j'utilise pour vous indiquer le contenu non formaté de votre page,
par opposition à ce que montre le navigateur (même si c'est un choix contestable, j'aurais parfois mieux fait d'utiliser kbd
(texte que l'utilisateur devrait entrer) ou var (instance d'une variable ou d'un argument à un programme)).
- pre
Il contient un texte préformaté. Le navigateur respectera tous les espaces et les retours à la ligne que vous mettrez à l'intérieur.
Il sert pour des poèmes, du code informatique (code est utilisé pour citer une ligne au milieu d'un texte, par pour citer plusieurs lignes).
- abbr, acronym
Ils servent à préciser les abréviations et acronymes (les acronymes sont des sigles prononçables, comme : ONU). Ils ne sont utiles que munis d'un attribut title,
précisant à quoi fait référence ce sigle. Lorsque vous passerez la souris sur ce mot, certains navigateurs afficheront une bulle avec la signification du sigle.
Essayez avec l'exemple fourni dans ce paragraphe. Pour vérifier comment j'ai fait, vous pouvez taper CONTROL+U ou cliquer avec le bouton droit et demander à voir le code source du document.
- ul, ol, li
Les éléments ul et ol sont des listes d'éléments li. Dans le second cas, les items seront numérotés. Voici un exemple, faites en d'autres,
et incluez des listes à l'intérieur de certains items.
- dl, dt, dd
Ils servent pour donner une liste de définitions. dl est la liste entière, et dedans on trouve en général en alternance des éléments dt (terme à définir)
et dd (la définition elle-même).
- br, hr
br indique un retour à la ligne, et hr une ligne horizontale. Ni l'un ni l'autre n'a de contenu,
on les referme donc immédiatement comme ceci : <br />.
- q, blockquote
Ils indiquent une citation. q est utilisé pour un simple morceau de phrase, et blockquote pour quelque chose de plus long. Pour citer un poème,
on pourra donc par exemple utiliser un blockquote contenant un pre, ou un blockquote contenant un p,
avec des br à la fin de chaque ligne. Pour l'instant, Internet Explorer ignore les éléments q.
- address
Cet élément sert à donner les coordonnées de quelqu'un (attention au nombre de « d » dans address).
- img
Cet élément sert à inclure une image. Comme br, il n'a pas de contenu et est refermé immédiatement.
L'intérêt de cet élément réside dans son attribut src qui est un lien vers l'emplacement de l'image.
Si l'image est stockée au même endroit que la page que vous êtes en train d'écrire, vous pouvez faire un lien relatif.
Par exemple : <img src="maphoto.jpg"/> indique d'inclure l'image du fichier maphoto.jpg qui se trouve dans le même répertoire
que votre page. <img src="../images/maphoto.jpg"/> indique que pour trouver le fichier, il faut partir du répertoire où est la page,
remonter d'un niveau, et descendre dans le répertoire images. Un autre attribut essentiel de cet élément est : alt.
Il permet d'indiquer un texte pouvant être affiché à la place de l'image. Vous pourriez ainsi mettre : <img src="maphoto.jpg" alt="photo d'identité"/>.
Il est essentiel de mettre un tel attribut, pour les cas où l'on ne peut pas (facilement) afficher l'image
(imaginez ce qu'un logiciel de synthèse vocale pour aveugles peut faire avec une page qui contient uniquement une animation flash...).
Quand l'image n'a qu'une valeur décorative et n'apporte aucune information, vous pouvez donner à cet attribut une valeur nulle : alt="".
Pour finir, faites attention aux images que vous mettez sur votre site, vérifiez que vous en avez le droit.
Ce n'est pas parce qu'une image est disponible sur un autre site ou que vous avez pris une photo vous-mêmes que vous avez le droit de les mettre sur votre site.
- table
Voyons maintenant comment faire un tableau. Le plus simple est de regarder l'exemple suivant, et de s'en inspirer :
<table border=1>
<caption>Ceci est un tableau</caption>
<tr><th>Colonne gauche</th><th>Colonne droite</th></tr>
<tr><td>Colonne gauche</td><td>Colonne droite</td></tr>
<tr><td>Colonne gauche</td><td>Colonne droite</td></tr>
<tr><td>Colonne gauche</td><td>Colonne droite</td></tr>
</table>
L’élément table est le tableau, chaque ligne est un tr, et chaque cellule un td. Les th servent à donner un nom à une ligne ou colonne. caption est la légende, et on ne peut la mettre qu'au début de l'élément table (ce qui ne veut pas dire qu'elle ne peut pas être affichée sous le tableau).
- a
Cet élément n'a aucune signification particulière. Il sert uniquement avec des attributs. On peut par exemple l'utiliser avec l'attribut name pour placer une ancre.
On peut aussi l'utiliser pour faire un lien. L'attribut href indique la destination du lien. Le texte (ou l'image, ou ce que vous voulez)
que vous mettrez dans l'élément a sera en général représenté d'une couleur un peu différente, et vous pourrez cliquer dessus pour suivre le lien.
Le début du lien indique le type de lien dont il s'agit (mailto pour envoyer un email, http est le protocole utilisé pour télécharger les pages web,
vous avez peut-être aussi entendu parler de ftp). On peut aussi faire des liens relatifs, comme pour les images : href="autrepage.html".
- div
Cet élément n'a pas non plus beaucoup de sens par lui-même, il sert à délimiter une partie de la page (contrairement à a qui sert plus pour quelques mots).
Nous verrons son utilité quand nous étudierons les feuilles de style.
Le TP HTML, les bases
Nous allons commencer par créer un document html très petit, et nous l'enrichirons au fur et à mesure. Lancez d'abord l’éditeur de texte par défaut de l'environnement que vous utilisez, et recopiez le texte suivant :
<html>
<head>
<meta name="author"content="Info_TSI"/>
<!- Il faudrait penser à changer le nom de l'auteur ->
<title>
Premier essai
</title>
</head>
<body>
<p>
Bonjour à tous <!- Je ne sais pas trop quoi écrire alors je fais plein de commentaires qui ne vont pas s'afficher ->
</p>
<hr/>
</body>
</html>
Si vous ne trouvez pas cela très beau, commencez par indiquer à Notepad++ que votre document est du html, en enregistrant le fichier avec le nom index.html. Quand vous ouvrez un fichier avec l'extension .html, Notepad++ met tout seul les couleurs, on n'a été obligé de lui préciser que parce qu'il s'agissait d'un nouveau fichier. À l'aide d'un navigateur, regardez votre page. Nous allons la modifier progressivement (n'hésitez pas à faire d'autres changements que ceux proposés, en vous en inspirant), et il faudra vérifier à chaque nouvelle étape à quoi ressemble maintenant votre page. Un peu de vocabulaire.
- Des couleurs
Remplacez la ligne <body> par la suivante :
<body bgcolor="#00C0FF" text=red>
Récupérez une image sur internet ???.gif. Copiez-là dans le répertoire de ce TP, et essayez à la place :
<body background="???.gif">
Ne soyez pas surpris si cela devient complètement illisible, c'est un piège classique des fonds d'écran.
- Paragraphes
Ecrivez deux paragraphes de texte, en sautant des lignes entre les deux paragraphes. Par exemple, reprenons à Bonjour tout le monde... :
Bonjour tout le monde ... Ceci est un premier paragraphe. J'essaie de le
faire
suffisamment long pour qu'il y ait au moins un retour à la ligne, sinon
c'est moins joli.
Et maintenant j'ai sauté plein de lignes, que se passe-t-il ? Vous pouvez supprimer tous ces sauts de ligne, et mettre à la place <p>. Essayez aussi de mettre <br> à la place. <p> indique un changement de paragraphe, alors que <br> est un simple retour à la ligne. En général, vous devriez donc plus utiliser <p>.
- Titres
Changeons un peu le texte de notre page, pour quelque chose comme :
<h1 align=center> Voici un titre </h1>
<h2> Maintenant un sous-titre </h2>
<h3> Et on peut continuer </h3>
<h4> La profondeur est limitée </h4>
<h5> Pénultième </h5>
<p align=right> Un petit texte justifié à droite pour introduire cette partie, elle le mérite bien, et puis il serait dommage de se priver.</p>
<h6> Un vraiment petit paragraphe </h6>
Et un titre est un changement de paragraphe implicite.
- Paragraphes spéciaux
On ajoute encore :
<blockquote>
Mignonne, allons voir si la rose<br>
Qui ce matin avait desclose<br>
Sa robe de pourpre au Soleil,<br>
A point perdu cette vesprée<br>
Les plis de sa robe pourprée,<br>
Et son teint au vostre pareil.
</blockquote>
<pre>
<html>
<body>
</body>
</html>
</pre>
- Les barres horizontales
On a depuis le début une barre en bas de notre page, représentée par <hr>. On va la modifier un peu. Essayez le code suivant :
<p>Barre horizontale simple,</p>
<hr>
<p>avec une longueur relative limitée,</p>
<hr width=50%>
<p>avec une longueur absolue, </p>
<hr width=100>
<p>avec d'autres positions dans la page, </p>
<hr width=50% align=right>
<hr width=50% align=left>
<p>avec une épaisseur modifiée,</p>
<hr size=3>
<p>sans l'ombré, </p>
<hr noshade>
<p>avec une longueur dépendant de la taille des caractères,</p>
<hr style="width:10 em;">
N'oubliez pas de changer la taille de votre fenêtre pour voir comment évoluent les traits. Changez aussi la taille des caractères (dans le menu affichage, ou en appuyant sur CONTROL et + ou -).
- Les styles logiques
Encore du code à recopier :
<p>Il y a parfois des mots très <strong>importants</strong>, d'autres
que l'on veut simplement mettre <em> en valeur </em>.
On peut vouloir indiquer que <kbd>CTRL Q</kbd> quitte kwrite .
On parle parfois de code que l'on a écrit, comme <code> & lt;html& gt;</code>.
<samp>Ceci est un exemple</samp>. Lorsque je définis un mot ,
je l'écris<dfn>mot</dfn>. Et pour citer quelqu'un :
<cite>quand on veut s'amuser ,<strong> on additionne les plaisirs.</strong></cite>
Voyez-vous la même chose avec firefox et Chrome ? Ces éléments ont une valeur sémantique, mais laissent le navigateur décider comment les rendre (on verra à la prochaine séance comment lui donner des indications sur ce qu'on attend).
- Styles, couleurs, tailles, fontes
<ul>
<li><b> Le texte peut être en gras,</b></li>
<li><i> Les italiques mettent le texte en valeur! </i></li>
<li><tt> Et enfin, on peut écrire à la machine du même nom, </tt></li>
<li><u> un style souligné à éviter : ici, on ne peut pas cliquer, </u></li>
<li><s> et on peut même rayer du texte </s></li>
<li><big> On peut écrire de gros caractères, </big><small> ou de petits </small></li>.
<li> Et enfin, on peut utiliser des exposants comme dans 1<sup>er</sup> ou des indices, u<sub>n+1</sub> = u<sub>n</sub>+1</li>
</ul>
<ul>
<li><font color=purple>Du texte violet, </font></li>
<li> du texte, <fontsize=+3> du texte plus gros (en relatif),</font></li>
<li><fontsize=2> du texte, taille absolue, </font></li>
<li><fontface="Zapf Chancery">et des jolies lettres.</font></li>
</ul>
- Énumérations
Dans le paragraphe précédent, on vient de créer une liste. Que se passe-t-il si on remplace ul par ol ? Créez une liste, dont le premier élément commencera par Les peintres,
suivi d'une liste numérotée avec dans l'ordre vos trois peintres favoris. Le second élément sera la même chose avec « Les musiciens ».
Vous ferez de plus suivre le nom de votre musicien préféré d'une liste numérotée de ses trois meilleures chansons.
Vous pourrez ensuite essayer de remplacer un <ol> par <ol type="a"> (au lieu de "a", on peut choisir parmi : a, A, i, I, 1).
Essayez aussi : <ol start="42">. Dans vos listes imbriquées, remplacez tous les ol par des ul, et regardez les points utilisés.
- Tableaux
<table>
<tr><td> X </td><td> 1 </td><td> 2 </td><<td> 3 </td></tr>
<tr><td> 1 </td><td> 1 </td><td> 2 </td><<td> 3 </td></tr>
<tr><td> 2 </td><td> 2 </td><td> 4 </td><<td> 6 </td></tr>
<tr><td> 3 </td><td> 3 </td><td> 6 </td><<td> 9 </td></tr>
</table>
On ajoute maintenant au début de l'élément table :
<caption align=bottom> Table de multiplication </caption>
La table n'est pas encore très jolie. Ajoutez à l'élément table un attribut border, de valeur 1. Pour changer encore plus radicalement, essayez :
<table border=20 cell padding =10 cell spacing =5> ... </table>
Voici quelques exemples plus compliqués. Après les avoir testés, faites un tableau similaire au second, en vous arrangeant pour avoir un artiste qui était à la fois peintre et musicien, et un autre qui a vécu à cheval entre deux siècles. Avec l'attribut bgcolor, vous lui mettrez aussi une couleur de fond dorée. En appliquant maintenant cet attribut aux cellules individuelles, vous ferez un échiquier (ou une mosaïque plus jolie). Utilisez aussi <font color="purple"> pour changer la couleur du texte de façon appropriée. L'alignement dans les cellules, verticalement, horizontalement,
<table border width=50%>
<tr><th></th><th><font size=6> Peintre </font><th><font size=6>Écrivain</font><th><font size=6>Musicien</font>
<tr valign=top align=center><th>vfont size=6>17<sup>ème</sup></font><td>Rembrandt<td>Molière<td>Bach
<tr valign=middle align=left><th><font size=6>19<sup>ème</sup></font><td>Monet<td>Goethe<td>Brahms
<tr valign=bottom align=right><th><font size=6>20<sup>ème</sup></font><td>Modigliani<td>Jarry<td>Ellington
</table>
<hr>
On peut faire l'alignement, case par case,
<br><br>
<table border width=50%>
<tr><th></th><th><font size=6>Peintre</font><th><font size=6>Écrivain</font><th><font size=6>Musicien</font>
<tr><th><fontsize=6>17<sup>ème</sup></font><td valign=top align=center>Rembrandt<td>Molière<td>Bach
<tr><th><font size=6>19<sup>ème</sup></font><td>Monet<td valign=middle align=right>Goethe<td>Brahms
<tr><th><font size=6>20<sup>ème</sup></font><td valign=bottom align=left>Modigliani<td>Jarry<td>Ellington
</table>
<hr>
Les cases peuvent être fusionnées,
<table border>
<tr><td>un<td colspan=2>exemple simple</td>
<tr><td>avec<td>trois<td>colonnes
</table>
- Liens
Votre document commence (enfin ce qu'il y a après <body>) sans doute par un titre
<h1>Titre</h1>
Remplaçons-le par :
<h1 name="debut">Titre</h1>
Ajoutez maintenant à la fin de votre document (avant