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

• Les listes descriptives
  <DL> : ouverture de la liste.
  <DT> titre de l'élément n <DD> description de l'élément n
  <DT> titre de l'élément n+1 <DD> description de l'élément n+1
  </DL> fermeture de la liste

• Les listes non numérotées :
  <UL> : ouverture de la liste.
  <LI> élément de la liste
  <LI> autre élément de la liste
  </UL> fermeture de la liste

• Les listes numérotées :
  <OL> : ouverture de la liste.
  <LI> élément de la liste
  <LI> autre élément de la liste
  </OL> fermeture de la liste

Styles

• Le style physique des caractères :
  • <B> ... </B> : pour des caractères en gras
  • <I> ... </I> : pour des caractères en italique.
  • <U> ... </U> : pour des caractères soulignés.
  • <TT> ... </TT> : pour des caractères type machine à écrire ou Teletype.
  Ces styles sont combinables entre eux

• Le style logique :
  • <CITE> ... </CITE> : pour citer un ouvrage par exemple;
  • <CODE> ... </CODE> : pour un exemple de programme informatique.
  • <DFN> ... </DFN> : pour une définition ; EPS : Format de description des fichiers PostScript;
  • <EM> ... </EM> : pour insister sur un texte to emphasize étranger;
  • <KBD> ... </KBD> : pour simuler la saisie d'un texte au clavier;
  • <SAMP> ... </SAMP> : pour citer un texte en exemple ;
  • <STRONG> ... </STRONG> : pour mettre en valeur ;
  • <VAR> ... </VAR> : pour représenter une variable ;
  
  
• Le style des paragraphes :
  • <BLOCKQUOTE> ... </BLOCKQUOTE> : pour citation ;
  • <ADDRESS> ... </ADDRESS> : pour une citation, une signature ;
  • <PRE> ... </PRE> : pour respecter le texte tel qu'il a été saisi

  Netscape propose une extension pour régler la taille et la couleur des caractères :
  <FONT SIZE=hauteur COLOR=#RGB>
  

Liens

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

• les liens définissant un accès vers un document. L'attribut utilisé dans ce cas est HREF qui permet de définir l'adresse du document à atteindre. Cette adresse peut être :
  • une URL standard : <A HREF="url_de_destination">...</A>
  • une étiquette vers un point précis du document :<A HREF="#label">...</A>
  • la combinaison des deux :<A HREF="url_de_destination#label">...</A>
  Le texte situé entre les balises <A> et </A> s'appelle l'ancre ; il sera mis en évidence par le browser car c'est une zone cliquable. (soulignement, couleur, etc.)
• les liens définissant un point d'entrée dans un document. L'attribut utilisé ici est NAME qui définit un label (une sous-adresse) dans le document : <A NAME="label">...</A>
  Le texte situé entre les balises <A> et </A> n'a aucun attribut visuel, ce n'est pas une zone cliquable.

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:

• Les images en ligne :

  Ce sont les images qui apparaissent dans la page HTML ; elles sont généralement au format GIF.
  La balise pour inclure une image en ligne est :

  <IMG SRC=url_du_fichier.gif>

  d'autres attributs sont possibles :

  ALT=texte pour spécifier un texte de substitution pour les browsers non graphiques.
  ALIGN=TOP ou BOTTOM ou MIDDLE pour aligner l'image sur une ligne de texte.

  d'autres attributs propres au browser Netscape permettent de redimensionner et de faire flotter une image dans un texte :

  ALIGN=LEFT et RIGHT font flotter l'image à gauche ou à droite du texte.
  WIDTH=L et HEIGHT=H où L et H représentent la largeur et la hauteur de l'image en pixels.
  BORDER=n où n représente l'épaisseur du trait bordant l'image. La valeur 0 supprime la bordure.

• Les images externes :
  Ce sont des fichiers graphiques pointés par des liens hypertexte :

  <A HREF=url_du_fichier.gif>ancre</A>

  <A HREF=url_du_fichier.jpg>ancre</A>

Fond de page

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

• Le fond de la page
  avec une couleur de fond:<BODY BGCOLOR="#rrggbb">
  avec une couleur de fond :<BODY BACKGROUND="url_image">
  
• la couleur du texte et la couleur des liens
  couleur de texte :<BODY TEXT="#rrggbb">
  couleur des liens non visités : <BODY LINK="#rrggbb">
  couleur des liens visités : <BODY VLINK="#rrggbb">
  couleur du liens au moment du clic :<BODY ALINK="#rrggbb">

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 :

• BORDER qui définit l'épaisseur du cadre extérieur,
• CELLPADING qui définit l'espace autour du texte d'une cellule,
• CELLSPACING qui définit l'espace inter cellules,
• WIDTH qui définit la largeur du tableau relativement à la largeur de la fenêtre du browser.

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 :

• VALIGN (alignement vertical) qui peut prendre les valeurs :
  • TOP place le texte en haut de la cellule,
  • BOTTOM en bas de la cellule,
  • MIDDLE au centre de la cellule,
• ALIGN (alignement horizontal) qui peut prendre les valeurs:
  • RIGHT place le texte à droite de la cellule,
  • LEFT à gauche de la cellule,
  • CENTER centre le texte dans la cellule,

</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.