Le graphisme se faisant directement dans le fichier html, il peut être nécessaire de (re)voir la structure de celui-ci, et notamment ce qui existait avant html5. Html utilise des balises, qui sont comme des parenthèses. Aussi chaque fois qu'une balise est ouverte, il doit lui correspondre une balise fermante (la même, mais avec un slash devant):

<balise>
des tas de choses
</balise>

Connaître html, c'est essentiellement connaître la signification des balises usuelles, et repérer leur fermeture. Pour cela un éditeur de texte avec coloration syntaxique est vivement recommandé.

Une balise peut ne pas avoir de fermeture (par exemple le saut à la ligne). Dans ce cas elle est autofermante et le slash se met à la fin de sa déclaration.

La première balise du document html c'est celle qui précise que c'est bien un document html:

<html>
<head>
Ici se trouve l'entête...
</head>
<body>
Ici se trouve le corps du document.
</body>
</html>

Entête

L'entête d'un document html contient des choses qui sont examinées dès l'ouverture du document, essentiellement le titre qui apparaît dans l'onglet du navigateur, et le javascript:

<html>
<head>
<title>
Ceci n'est pas un titre
</title>
<script>
//ici on met le JavaScript
</script>
</head>
</html>

Titre

La balise title crée un titre qui apparaît dans l'onglet du navigateur, et qui servira de nom automatique au fichier enregistré par le navigateur. Elle ne doit pas être confondue avec les titres en caractères gras qui apparaissent dans le texte, et qui sont dans le corps du document; ces balises s'appellent h1, h2 et h3 dans l'ordre décroissant de taille.

JavaScript

la balise script permet de placer du JavaScript dans le document. C'est donc à la fois la plus discrète et la plus utile du document (en tout cas, pour la géométrie).

Corps

Sous-pages

Les balises frame et iframe permettent de mettre une page html à l'intérieur d'une autre page html. Cependant elles présentent l'inconvénient de rallonger l'accès à leur contenu (il faut leur donner un identifiant puis écrire document.getElementById() pour accéder à leurs méthodes). La balise div qui crée une simple division du document (une sorte de région) est par contre indispensable parce qu'elle permet de modifier le contenu de la division par JavaScript, sans modifier le reste de la page. Ainsi, si on met dans le script de l'entête, ceci:

document.write("Misère, j'ai tout effacé !");

on se retrouve avec une page presque blanche, le texte ayant effacé le reste. Si par contre, on a préalablement créé dans le corps une division appelée panneau avec

<div id='panneau'>
Un petit texte à écraser...
</div>

alors le script suivant ne modifiera que le contenu de la division:

var ici=document.getElementById('panneau');
ici.innerHTML="Ce coup-là je n'ai quasiment rien effacé!");

Ci-dessous ce procédé permettra d'engendrer automatiquement des listes et tableaux en JavaScript.

Texte structuré

Titres

Pour écrire un titre, on le met dans une balise h1, h2 ou h3 selon l'importance du titre. Un document peut ressembler à ceci:

<body>
<h1>I/ Première partie</h1>
<h2>1) Introduction</h2>
<h2>2) Pour aller plus loin</h2>
<h1>II/ Deuxième partie</h1>
</body>

Paragraphes

La balise p encercle un paragraphe, avec retour à la ligne automatique. La balise autofermante br va à la ligne. Elle permet donc d'éviter la balise p mais celle-ci permet d'écrire un texte plus structuré. Un poème peut s'écrire en combinant les deux balises:

<body>
<h1>Un petit poème</h1>
<p>
Ce langage hachetéèmeèlle<br/>
Tend à me donner des ailes<br/>
Avec toutes ses balises<br/>
Je ne suis plus dans la mouise!<br/>
</p>
<p></p>
<p>
Quant au fameux JavaScript<br/>
Ouh là là qu'est-ce qu'il est strict!<br/>
Mais en mille comme en cent<br/>
Ouh là là qu'il est puissant!<br/>
</p>
</body>

On remarquera que pour aller à la ligne entre les deux strophes, on a préféré un paragraphe vide plutôt qu'une balise autofermante br.

Effets de texte

Changement de casse

La balise b (comme boldface) permet d'écrire en gras, et la balise i permet d'écrire en italique. On peut les combiner, ainsi les deux fichiers suivants ont le même effet:

<i><b>en gras et en italique</b></i>

<b><i>en gras et en italique</i></b>

Pour souligner un texte on peut le placer dans une balise u (comme underline). On peut même barrer du texte avec la balise s!

Indices et exposants

Pour écrire quelque chose plus bas que la ligne (écriture en indice) on utilise la balise sub, alors que pour écrire au-dessus (en exposant) c'est la balise sup. Par exemple, le terme général d'une suite géométrique s'écrit

<body>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
</body>

ce qui donne $u_{n}=u_{0}r^{n}$ . On peut imbriquer des indices et exposants les uns dans les autres.

Effets de police

Le moyen recommandé pour écrire en couleurs est d'utiliser la balise span qui permet de modifier l'effet du css. Par exemple, pour écrire en rouge, on donne à l'attribut style du span la valeur red:

<body>
Un texte en noir avec un mot en <span style='color:red'>rouge</span>.
</body>

On peut aussi simuler un effet de marqueur jaune:

<body>
Un texte partiellement passé au <span style='background:yellow'>marker jaune</span>.
</body>

Un caractère spécial en html, s'obtient en écrivant une esperluette suivie de la description du symbole. Par exemple:

∞ pour le symbole de l'infini;
∩ pour le symbole de l'intersection;
∪ pour le symbole de la réunion;
∅ pour l'ensemble vide;
≤ < ≥ &gt pour les inégalités;
≠ pour la différence
× pour le signe de multiplication;
√ pour la racine carrée.
π et autres pour les lettres grecques;
∫ pour le symbole d'intégrales.
&real; et &image pour les parties réelle et imaginaire d'un nombre complexe.

Par exemple, pour écrire une intégrale, on peut faire

<body>
&int;<sub>0</sub><sup>&infin;</sup> e<sup>-t</sup>dt=1
</body>

On peut aussi dessiner des jeux de cartes avec les caractères &diams, &hearts, &spades et &clubs. Les accents sont également gérés avec ces caractères spéciaux mais il est plus simple de précéder la balise html d'un appel à l'encodage unicode avec

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<html>
<head>
</head>
<body>
</body>
</html>

Ce qui permet d'écrire normalement avec des caractères accentués sans problèmes de lecture dans le navigateur.

Listes et tableaux

Listes à puces

Une liste à puces est unordered puisque si l'ordre comptait, il faudrait numéroter les entrées de la liste. La liste est délimitée par la balise ul (comme unordered list) et chacun de ses éléments est délimité par la balise li:

<body>
<ul>
<li>La phrase suivante est fausse.</li>
<li>La phrase précédente est vraie.</li>
</ul>
</body>

Listes numérotées

Une liste numérotée est ordered puisque les numéros se suivent; la balise qui la délimite est donc ol au lieu de ul. On peut donc en fabriquer avec JavaScript, sous forme d'une chaîne de caractères comprenant les balises ol et li (ne pas oublier de les refermer après usage!). Par exemple, pour calculer 10 termes successifs de la suite de Fibonacci, on peut les placer dans une liste ordonnée, les éléments li étant ajoutés par JavaScript dans une boucle sur n:

<html>
<head>
</head>
<body>
<div id='Fibonacci'>
<script>
var a=1, b=1, c;
var affichage='<ol>';//ouverture de la liste
for(var n=1;n<=10;n++){
	c=a+b;
	b=a;
	a=c;
	affichage+='<li>'+b+'</li>';//ajout d'une ligne
}
affichage+='</ol>';//fermeture de la liste
//on récupère la présente division et on y écrit la liste en html:
document.getElementById('Fibonacci').innerHTML=affichage;
</script>

</div>
</body>
</html>

Tableaux

Tableau

La balise qui délimite un tableau est table mais on peut ajouter à l'intérieur de celle-ci des propriétés comme la couleur ou l'épaisseur du bord du tableau.

Lignes

Le tableau est décomposé en lignes placées chacune dans une balise tr (comme table row ou tableau --> rangée). Chaque rangée peut être affublée de sa propre couleur, en ajoutant celle-ci dans la définition même de la balise.

Cellules

Enfin chaque rangée contient des cellules délimitées par la balise td (table data) qui elle aussi peut être munie de son propre style. Par exemple pour écrire dans des cellules bleues placées dans des lignes vertes d'un tableau rouge, on peut faire ceci:

<body>
<table style="background-color: red;">
<tr style="background-color: green;">
<td style="background-color: blue;">oui</td>
<td style="background-color: blue;">non</td>
</tr>
</table>
</body>

On remarque que la couleur verte est invisible, les cellules cachant la rangée.

En général, les cellules de la première ligne du tableau sont faites avec la balise th (table header) plutôt que td qui met leur contenu en italique gras.

Pour en savoir plus

Voir Le langage HTML.

Exemple: Fibonacci

On peut améliorer l'exemple précédent avec un tableau au lieu d'une liste:

<html>
<head>
<title>suite de Fibonacci</title>
</head>
<body>
<h1>Nombres de Fibonacci</h1>
<div id='Fibonacci'>
<script>
var a=1, b=1, c;
var affichage='<table border="8"><tr><th>n</th><th>F<sub>n</sub></th></tr>';
//ouverture du tableau et écriture de sa première ligne
for(var n=1;n<=10;n++){
	c=a+b;
	b=a;
	a=c;
	affichage+='<tr><td>'+n+'</td><td>'+b+'</td></tr>';//ajout d'une ligne
}
affichage+='</table>';//fermeture du tableau
//on récupère la présente division et on y place le tableau en html:
document.getElementById('Fibonacci').innerHTML=affichage;
</script>
</div>
</body>
</html>