logo cours PACECOURS I : Création de documents
HTML

Divisions

Les balises suivantes permettent de structurer le document par l'adjonction de titres, le réglage de la longueur des lignes et des paragraphes :

<Hn> ... </Hn> : avec n = 1 à 6 est la taille maximum des caractères. Un espacement vertical de type paragraphe est généré par ces balises.

<BR> ... </BR> : force un retour à la ligne avec saut de ligne.

<P> ... </P> : déclenche le passage à la ligne suivante.

<HR> ... </HR> : permet de tracer un trait en travers de la page.

<PRE> ... </PRE> : le texte inséré entre ces balises sera affiché par le browser, en respectant le formatage tel qu'il a été saisi dans le fichier source HTML

Listes

Les principaux types de listes :

Styles

Liens

La balise <A> permet de décrire les liens hypertextes dans un document. On distingue :

L'extrémité d'un lien peut être : un fichier HTML, une image, un film ou un texte.

Il est possible de décrire des liens vers d'autres services de l'Internet comme : FTP, NEWS, TELNET, GOPHER, WAIS, MAILTO, etc.

Voir exemple Images cliquables

Inclusion d'images

On peut inclure deux types d'images dans un document HTML:

Fond de page

HTML niveau 3 permet de modifier l'apparence de la page:

Les couleurs sont définies dans le système RGB, chaque composante étant définie sur deux octets dont chacun peut prendre une valeur comprise entre 0 et F (exprimée en hexadécimal)

Exemple de couleurs : (rrggbb)
jaune=ffff00, navy blue=23238e, turquoise=adeaea

Les tableaux

Un tableau se définit entre les balises <TABLE> et </TABLE>.
Cette première balise règle la présentation générale du tableau à l'aide de trois attributs :

Le tableau est ensuite décrit ligne après ligne, l'élément définissant une nouvelle ligne est <TR> qui admet les attributs d'alignement du texte à l'intérieur de toutes les cellules de la ligne :

</TR> termine la définition de la ligne.

<TD> est l'élément de départ d'une colonne. Il peut être complété par des attributs VALIGN et ALIGN qui seront alors prioritaires sur les mêmes valeurs définies dans la balise <TR>.

Deux attributs supplémentaires, COLSPAN et ROWSPAN permettent de générer des cellules dont la surface est un multiple de la cellule élémentaire. La matrice du tableau définissant le nombre de cellules élémentaires est calculée par le nombre de lignes du tableau (nombre d'instructions <TR>, multiplié par le nombre de cellules (nombre d'instructions <TD>) de la ligne définissant le plus de cellules (plus grand nombre de <TD>)

Le nombre de cellules par ligne du tableau est calculé sur la ligne définissant le plus de cellules.

Le dernier attribut de <TD> est NOWRAP qui empêche de diviser le texte de la cellule en plusieurs lignes.

Enfin, la balise <TH> qui est une balise fonctionnant de façon similaire à la balise <TD> et admettant les mêmes attributs mais considérée comme balise de titre d'une cellule. Le centrage du texte et l'utilisation de caractères gras sont automatiques.

Un tableau peut recevoir un titre défini entre les balises <CAPTION> et </CAPTION>. Ce titre peut se situer soit au-dessus en utilisant l'attribut ALIGN avec la valeur TOP ou en-dessous en utilisant ALIGN avec la valeur BOTTOM.

Images cliquables

Une image cliquable est définie par l'ensemble de balises suivant :

<A HREF=/cgi-bin/imagemap/nom_symbolique><IMG SRC=url_du_fichier.gif ISMAP></A>

/cgi-bin/imagemap/ est un programme devant être préalablement installé dans le serveur Web pour pouvoir proposer des images cliquables.

imagemap.conf est un fichier installé à la racine du serveur dans lequel on va référencer sous un nom_symbolique l'adresse réelle du fichier dans lequel sont décrites les relations entre les zones cliquables et leurs URL associées.

Ce fichier de relations s'écrit de la façon suivante :
forme URL X1,Y1 X2,Y2... ou le couple Xn,Yn définit les coordonnées d'un point de la forme utilisée.

Il existe trois types de formes géométriques pour définir une zone cliquable :
CIRCL X1,Y1 X2,Y2 le point 1 spécifie le centre du cercle et le point 2 un point quelconque situé sur le périmètre.
RECT X1,Y1 X2,Y2 le point 1 spécifie le sommet supérieur gauche le point 2 spécifie le sommet inférieur droit.
POLY X1,Y1 X2,Y2...Xn,Yn. Chaque point définit l'extrémité d'un vecteur composant le polygone.

L'unité de mesure utilisée est le pixel.