# 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. 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):
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:

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

## 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:
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
alors le script suivant ne modifiera que le contenu de la division:
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:

### 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:
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:
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
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:
On peut aussi simuler un effet de marqueur jaune:
Un caractère spécial en html, s'obtient en écrivant une esperluette suivie de la description du symbole. Par exemple:
* &infin; pour le symbole de l'infini;
* &cap; pour le symbole de l'intersection;
* &cup; pour le symbole de la réunion;
* &empty; pour l'ensemble vide;
* &le; &lt; &ge; &gt pour les inégalités;
* &ne; pour la différence
* &times; pour le signe de multiplication;
* &radic; pour la racine carrée.
* &pi; et autres pour les lettres grecques;
* &int; 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
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
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:

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

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