Voir la source de Programmation objet et géométrie/Rappels sur html

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. [[w:html|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):

<syntaxhighlight lang="html5">
<balise>
des tas de choses
</balise>
</syntaxhighlight>

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:

<syntaxhighlight lang="html5">
<html>
<head>
Ici se trouve l'entête...
</head>
<body>
Ici se trouve le corps du document.
</body>
</html>
</syntaxhighlight>

=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:

<syntaxhighlight lang="html5">
<html>
<head>
<title>
Ceci n'est pas un titre
</title>
<script>
//ici on met le JavaScript
</script>
</head>
</html>
</syntaxhighlight>

==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:

<syntaxhighlight lang="javascript">
document.write("Misère, j'ai tout effacé !");
</syntaxhighlight>

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

<syntaxhighlight lang="html5">
<div id='panneau'>
Un petit texte à écraser...
</div>
</syntaxhighlight>

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

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

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:

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>


===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:

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

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:

<syntaxhighlight lang="html5">
<i><b>en gras et en italique</b></i>
</syntaxhighlight>

<syntaxhighlight lang="html5">
<b><i>en gras et en italique</i></b>
</syntaxhighlight>

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

<syntaxhighlight lang="html5">
<body>
u<sub>n</sub>=u<sub>0</sub> r<sup>n</sup>
</body>
</syntaxhighlight>

ce qui donne <math>u_n=u_0 r^n</math>. 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 [[w:Feuilles de style en cascade|css]]. Par exemple, pour écrire en rouge, on donne à l'attribut ''style'' du ''span'' la valeur ''red'':

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

On peut aussi simuler un effet de marqueur jaune:

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

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

* ''&amp;infin;'' pour le symbole de l'infini;
* ''&amp;cap;'' pour le symbole de l'intersection;
* ''&amp;cup;'' pour le symbole de la réunion;
* ''&amp;empty;'' pour l'ensemble vide;
* ''&amp;le;'' ''&amp;lt;'' ''&amp;ge;'' ''&amp;gt'' pour les inégalités;
* ''&amp;ne;'' pour la différence 
* ''&amp;times;'' pour le signe de multiplication;
* ''&amp;radic;'' pour la racine carrée.
* ''&amp;pi;'' et autres pour les lettres grecques;
* ''&amp;int;'' pour le symbole d'intégrales.
* ''&amp;real;'' et ''&amp;image'' pour les parties réelle et imaginaire d'un nombre complexe. 

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

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

On peut aussi dessiner des jeux de cartes avec les caractères ''&amp;diams'', ''&amp;hearts'', ''&amp;spades'' et ''&amp;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

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

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'':

<syntaxhighlight lang="html5">
<body>
<ul>
<li>La phrase suivante est fausse.</li>
<li>La phrase précédente est vraie.</li>
</ul>
</body>
</syntaxhighlight>

===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 [[w:Nombre de Fibonacci|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'':

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

===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:

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

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:

<syntaxhighlight lang="html5">
<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>
</syntaxhighlight>

{{AutoCat}}