HTML

Langage pour la création de pages Web (*)

(par Z. Mammeri – UPS – Toulouse)

 

 

 

(*) Ce texte est inspiré d’un document accessible via  l’adresse http://www.ac-grenoble.fr/gb/htmldoc.htm#para0

 

1 - GENERALITES

·         Le langage HTML (Hyper Text Markup Language) est composé d'un ensemble relativement simple de commandes de mise en forme de documents et de liens vers d'autres documents (textes, images, sons, vidéos, bases de données ou programmes quelconques) qui peuvent se trouver sur le même serveur ou sur un autre serveur.

 

·         Un simple éditeur de texte ASCII suffit pour l'écriture d'un document HTML.

 

·         Il existe cependant des éditeurs d'HTML comme HTML ASSISTANT ou HTML EASY qui simplifient l'écriture des commandes.  HTML ASSISTANT est disponible à : http://www.w3.org/Tools/html-assistantHTML. On peut aussi utiliser des outils gratuits de microsoft (http://www.microsoft.com/).

 

·         Les espaces, tabulations, retours chariot n'ont pas de valeur en HTML.

 

·         A de rares exceptions près, chaque commande est utilisée en double (début et fin). Elle est encadrée par < et > . La fin de la commande est indiquée par / :

 

Exemple :


<TITLE> TITRE DU DOCUMENT </TITLE>
ou :
<TITLE>
TITRE DU DOCUMENT
</TITLE>
Les deux écritures sont correctes.
Cette commande affiche le titre du document dans la partie supérieure de la fenêtre de la page Web.

 

·         Les commandes peuvent être en majuscules ou minuscules (TITLE, title et TitlE sont équivalents). 

 

·         Le fichier contenant un document HTML doit avoir l'extension .HTM sous DOS ou .HTML sous UNIX.

 

·         Un document HTML doit être encadré par la commande <HTML>. Il est composé de deux grandes parties : l'en-tête et le corps. L'en-tête possède des informations générales sur le document. Le corps contient la partie principale du document avec toutes les commandes nécessaires.

 

Exemple :

            <HTML>

            <HEAD>

                    éléments d'en-tête du document

            </HEAD>

            <BODY>

                    corps du document

            </BODY>

            </HTML>

 

·         La commande : <! commentaire, remarque, ...>, permet d'agrémenter un document HTML de commentaires, remarques, ... qui n'apparaîtront pas au moment de l’affichage de la page HTML.

 

2 - EN-TÊTE DE DOCUMENT

 

·         L'en-tête d'un document est délimité par : <HEAD> ..............................</HEAD>

·         L'en-tête d'un document comporte principalement le titre du document (voir ci-dessous § 3).

·         Il peut aussi comporter des commandes telles que :
<BASEFONT SIZE = n> ou n prend les valeurs 1 à 7. Cette commande fixe la taille de la police de caractères (par défaut : 3) 1, petits caractères ...... 7, gros caractères (voir le paragraphe 6).

 

3 - TITRE DE DOCUMENT

·         Le titre d'un document est obligatoire, il apparaît dans une zone spéciale de la partie supérieure de l'écran. Il est délimité par :

<TITLE> ..............................</TITLE>

 

4 - CORPS DE DOCUMENT - COULEURS

·         Le corps est la partie principale du document avec toutes commandes nécessaires. Il est délimité par :

<BODY> ..............................</BODY>

 

·         Par défaut, le fond du document est gris clair, les caractères sont noirs, les prises d'hypertextes sont bleues quand elles n'ont jamais été utilisées, violettes dans le cas contraire, rouges à l'instant de la sélection (dans le cas de NETSCAPE).

Il est possible de modifier ces couleurs en rajoutant à la commande les options suivantes :
- BGCOLOR=c pour le fond du document                                    

- TEXT=c pour la couleur des caractères
- LINK=c pour la couleur des prises d'hypertextes non utilisées             

- VLINK=c pour la couleur des prises d'hypertextes utilisées
- ALINK=c pour la couleur des prises d'hypertextes à l'instant de la sélection

ex.       avec c = #000000 pour noir et avec c = #800000 pour marron
Pour le code des couleurs, voir le tableau à la fin de ce document ( §19).
 

Il est également possible de personnaliser le fond en utilisant l'option :
BACKGROUND="nom_image.gif"

L'image peut-être petite, le logiciel client Web calculera automatiquement le nombre d'images pour remplir l'écran et la reproduira autant de fois que nécessaire.

 

Exemple :

<HTML>

<HEAD>

<TITLE> Essai de couleurs </TITLE>

</HEAD>

<BODY BGCOLOR=#80FFFF TEXT=#000080 LINK=#FF0000>

La couleur du fond est bleu clair, la couleur du texte est bleu. La prise d'hypertexte est rouge.

</BODY>

</HTML>

 

5 – PARAGRAPHE

·         La commande <P> (fin de paragraphe) termine un paragraphe et insère une ligne vide après le paragraphe.
L'option ALIGN=center permet de centrer éventuellement le texte entre les marges gauche et droite.

 

Exemple :

Il fait beau, nous pouvons aller nous promener. <P>

Il est possible que demain il pleuve. <P> Fin de l'exemple.

 

6 - MISE EN FORME DES CARACTÈRES

·         Tailles de polices grasses :
Il existe 6 tailles de polices grasses. Ces polices sont fréquemment utilisées pour les en-têtes.
La commande est <Hn> ...... </Hn> ou n prend les valeurs de 1 à 6. 1, gros caractères ...... 6, petits caractères.

Exemple :

<H1> MAJUSCULES - minuscules - taille 1 </H1>

<H5> MAJUSCULES - minuscules - taille 5 </H5>

 

·         Tailles de polices :
Il existe 7 tailles de polices.
La commande est <FONT SIZE = n> ............ </FONT> ou n prend les valeurs de 1 à 7.
1, petits caractères ...... 7, gros caractères. La police par défaut possède la taille 3.
La taille de la police peut être fixée dans l'en-tête du document par la commande :
<BASEFONT SIZE = n> ou n prend les valeurs 1 à 7.

 

Exemple :

<FONT SIZE = 6> MAJUSCULES - minuscules - taille 6<BR>

<FONT SIZE = 4> MAJUSCULES - minuscules - taille 4<BR>

<FONT SIZE = 3>La taille des lettres d'un mot peut

<FONT SIZE = 7>V<FONT SIZE = 6>A<FONT SIZE = 5> R

<FONT SIZE = 4> I<FONT SIZE = 3> E<FONT SIZE = 2> R .

<FONT SIZE = 3></FONT>

 

·         Styles de caractères :

- Styles logiques :
à utiliser de préférence car ils sont interprétés par les différents logiciels clients WWW.
Les principales commandes de styles logiques sont les suivantes :

- <EM> texte </EM> met le texte généralement en italique.

-  <STRONG> texte </STRONG> met le texte généralement en gras.

- <CODE> texte </CODE> pour l'utilisation d'une police à chasse fixe (encombrement des caractères constant).

- <KBD> saisie </KBD> pour mettre en évidence une saisie d'utilisateur.

- <VAR> variable </VAR> pour indiquer le nom d'une variable.

- <DFN> définition </DFN> pour mettre en évidence la 1ère utilisation d'un terme.

- <ADDRESS> adresse </ADDRESS> : commande généralement utilisée pour indiquer l'auteur d'un document ainsi que le moyen de le contacter ou bien pour donner l'adresse du document. Elle est souvent placée en fin de document.

- <BLOCKQUOTE> texte </BLOCKQUOTE> : cette commande constitue avec le texte un texte avec retrait à gauche et à droite.

- <BLINK> texte </BLINK> pour faire clignoter le texte.

- <STRIKE> texte barré </STRIKE> : cette commande permet de barrer du texte.

- <LISTING> code informatique </LISTING> : cette commande permet d'afficher du code informatique

- <BIG> texte </BIG> : cette commande permet d'écrire un texte en plus gros caractères que les caractères en cours.

- <SMALL> texte </SMALL> : permet d'écrire un texte en plus petits caractères que les caractères en cours.

- <SUP> texte </SUP> : cette commande permet d'écrire un texte en exposant.

- <SUB> texte </SUB> : cette commande permet d'écrire un texte en indice.

 

Exemple :

<EM> ECRITURE EN ITALIQUE </EM>

<STRONG> ECRITURE EN GRAS </STRONG>

<CODE> POLICE A CHASSE FIXE </CODE>

 

- Styles physiques :
à utilisation déconseillée car ils ne laissent pas d'alternatives aux logiciels clients WWW.
Les commandes de styles physiques sont les suivantes :

- <I> texte </I> met le texte en italique.

- <B> texte </B> met le texte en gras.

- <TT> texte </TT> pour l'utilisation d'une police à chasse fixe (encombrement des caractères constant).

- <U> texte </U> souligne le texte.

 

Exemple :

<I> ECRITURE EN ITALIQUE </I><P>

<B> ECRITURE EN GRAS </B><P>

<TT> POLICE A CHASSE FIXE </TT>

 

 

7 - CARACTÈRES ACCENTUÉS

 

·         Les caractères accentués sont remplacés par les séquences d'échappement suivantes :
 - A a      &Aacute; = Á                      &Acirc; = Â                         &Agrave; = À                      &Aring; = Å

                &Atilde; = à                       &Auml; = Ä                         &aacute; = á                        &acirc; = â

                &aring; = å                           &agrave; = à                        &atilde; = ã                          &auml; = ä
- E e        &Eacute; = É                        &Ecirc; = Ê                           &Egrave; = È                       &Euml; = Ë

                &eacute; = é                        &ecirc; = ê                            &egrave; = è                        &euml; = ë
 - I i         &Iacute; = Í                           &Icirc; = Î                            &Igrave; = Ì                         &Iuml; = Ï

                &iacute; = í                          &icirc; = î                              &igrave; = ì                          &iuml; = ï
- N n       &Ntilde; = Ñ                        &ntilde; = ñ
 - O o      &Oacute; = Ó                      &Ocirc; = Ô                          &Ograve; = Ò                      &Otilde;= Õ

                &Ouml;= Ö                           &oacute; = ó                         &ocirc; = ô                          &ograve; = ò

                &otilde; = õ                          &ouml; = ö
- U u       &Uacute; = Ú                      &Ucirc; = Û                          &Ugrave; = Ù                      &Uuml; = Ü
                &uacute; = ú                        &ucirc; = û                           &ugrave; = ù                       &uuml; = ü
- Y y        &Yacute; = Ý                       &yacute; = ý                        &yuml; = ÿ

 

 

Exemple :

Les caract&egrave;res accentu&eacute;s sont remplac&eacute;s <P>

par des s&eacute;quences d'&eacute;chappement.

 

 

8 - CARACTÈRES SPÉCIAUX

Les caractères spéciaux sont remplacés par des séquences d'échappement :

&lt; = <                  &gt; = >                &amp; = &            &quot; = "            &AElig; = Æ         &copy; = ©

&aelig; = æ           &Ccedil; = Ç         &ccedil; = ç          &ETH; = Р          &eth; = ð              &#191; = ¿

&Oslash; = Ø       &oslash; = ø        &THORN; = Þ      &thorn; = þ          &szlig; = ß            &#215; = ×

&#161; = ¡             &#162; = ¢            &#163; = £            &#164; = ¤            &#165; = ¥            &#222; = Þ

&#166; = ¦             &#167; = §            &#168; = ¨             &#169; = ©           &#170; = ª             &#247; = ÷

&#171; = «            &#172; = ¬            &#173; = ­             &#174; = ®           &#175; = ¯            &reg; = ®

&#176; = °            &#177; = ±            &#178; = ²             &#179; = ³             &#180; = ´
&#181; = µ            &#182; = ¶            &#183; = ·             &#184; = ¸             &#185; = ¹

&#186; = º             &#187; = »            &#188; = ¼           &#189; = ½           &#190; = ¾

 

Exemple :

La le&ccedil;on du jour porte sur les tubes de &Oslash; 200 mm <P>

En HTML la commande de fin de paragraphe est &lt;P&gt;

 

9 - CÉSURE D'UNE LIGNE

·         La commande <BR> impose la coupure d'une ligne de texte en rejetant ce qui suit à la ligne suivante.
L'option CLEAR=all/left/right permet de faire des retours à la ligne en respectant les marges. Cette option est utilisée pour mettre des images autour du texte. Si cette commande ou la commande de fin de paragraphe est omise, des lignes successives de texte sont mises bout à bout.

 

Exemple :

- Une ligne de texte <BR> peut &ecirc;tre coup&eacute;e <BR> par cette commande <BR>

- Ligne num&eacute;ro 2

- Ligne num&eacute;ro 3

- Ligne num&eacute;ro 4

- Lignes mises bout &agrave; bout

 

·         La commande <NOBR> texte </NOBR> permet de mettre du texte sans retour à la ligne  (Bien vérifier alors que la ligne peut-être contenue dans l'écran).

 

·         La commande <WBR> permet de forcer un retour à la ligne dans un texte encadré par <NOBR>.

 

 

10 - CENTRAGE D'UN TEXTE

 

·         La commande <CENTER> ................... </CENTER> permet de centrer toutes les lignes d'un texte.

 

Exemple :

<CENTER>

Il fait beau. <BR>

Le soleil brille. <BR>

Les oiseaux chantent sur les toits.

</CENTER>

 

11 - LISTES

·         Les listes non numérotées (avec puces)
Ces listes sont utilisées pour des paragraphes de plusieurs lignes.
La commande est <UL> .................. </UL> pour une puce dont la forme varie suivant le niveau d'imbrication avec d'autres listes : pas de puce ou type disque ou type carré (voir exemple n°2 dans LISTES IMBRIQUÉES ci-dessous). Les options suivantes sont possibles :

TYPE=disc : pour une puce type disque
TYPE=circle : pour une puce type cercle
TYPE=square : pour une puce type carré

Chaque élément des listes est précédé de <LI>

 

Exemple :

LISTE AVEC PUCE TYPE DISQUE

<UL TYPE=disc>

<LI> 1er &eacute;l&eacute;ment<BR>

texte 1 du 1er &eacute;l&eacute;ment<BR>

texte 2 du 1er &eacute;l&eacute;ment

<LI> 2&egrave;me &eacute;l&eacute;ment

</UL><P>

LISTE AVEC PUCE TYPE CARR&Eacute;

<UL TYPE=square>

<LI> 1er &eacute;l&eacute;ment

<LI> 2&egrave;me &eacute;l&eacute;ment

</UL>

 

·         Les listes numérotées
La commande est <OL> .................. </OL>

Les options suivantes sont possibles :
TYPE=1 : pour une liste numérotée 1,2,3...
TYPE=A : pour un repérage type A,B,C...
TYPE=a : pour un repérage type a,b,c...
TYPE=I : pour une liste numérotée I,II,III,IV...
TYPE=i : pour une liste numérotée i,ii,iii,iv...
START=n fait débuter le repérage (chiffres ou lettres) au rang numéro n.

TYPE=1 est utilisé par défaut.
Chaque élément des listes est précédé de <LI>
L'option VALUE=n de <LI> permet de modifier la valeur du compteur.

 

Exemple :

LISTE NUM&Eacute;ROT&Eacute;E

<OL>

<LI> 1er &eacute;l&eacute;ment

<LI> 2&egrave;me &eacute;l&eacute;ment

</OL><P>

LISTE REP&Eacute;R&Eacute;E PAR DES MAJUSCULES

<OL TYPE=A START=3>

<LI> 1er &eacute;l&eacute;ment

<LI> 2&egrave;me &eacute;l&eacute;ment

</OL>

 

·         Les listes type MENU
Ces listes sont utilisées couramment pour des éléments d'une ligne seulement.
La commande est <MENU> .................. </MENU>
Chaque élément des listes est précédé de <LI>

 

Exemple :

<MENU>

<LI> Les roulements &agrave; billes type BC

<LI> Les roulements &agrave; rouleaux coniques

<LI> Les roulements &agrave; aiguilles

</MENU>

 

·         Les listes imbriquées
Il est possible d'imbriquer différents types de listes.

 

Exemple n°1 :

<OL>

<LI>Les roulements &agrave; billes

<UL TYPE=disc>

<LI>Rigides &agrave; une rang&eacute;e de billes<BR>

texte...

<LI>&Agrave; contact oblique<BR>

texte...

</UL>

<LI>Les roulements &agrave; rouleaux

<UL TYPE=disc>

<LI>&Agrave; rouleaux cylindriques<BR>

texte...

<LI>&Agrave; rouleaux coniques<BR>

texte...

</UL>

</OL>

 

Exemple n°2 :

<UL>

<LI>Les roulements &agrave; billes

<UL>

<LI>Rigides &agrave; une rang&eacute;e de billes<BR>

texte...

<LI>&Agrave; contact oblique<BR>

texte...

</UL>

<LI>Les roulements &agrave; rouleaux

<UL>

<LI>&Agrave; rouleaux cylindriques<BR>

texte...

<LI>&Agrave; rouleaux coniques<BR>

texte...

</UL>

</UL>

 

 

12 - TEXTE PRÉ-FORMATÉ

 

·         Commande <PRE> ................... </PRE> 

Les espaces (plusieurs à la suite), tabulations, retour chariot n'ont pas de valeur en HTML.
Cette commande est utilisée pour inclure un texte pré-formaté dans un document HTML.
Les espacements, tabulations et retour chariot gardent alors leur sens initial.
Attention : les commandes HTML existant dans le texte pré-formaté seront interprétées.
L'option WIDTH=n peut-être utilisée pour limiter la longueur de la ligne.

 

Exemple :

<PRE>

ARTICLES                VALEURS                 QUANTITES

pantalons               300                     20

robes                   500                     30

vestes                  400                     50

</PRE>

 

 

13 - TRAIT HORIZONTAL

·         La commande <HR> permet de tracer un trait horizontal.
Les options suivantes permettent de modifier la forme du trait :
- SIZE = n : modifie la largeur du trait avec n = nombre de pixels.
- WIDTH = n ou x% : modifie la longueur du trait avec n = nombre de pixels ou x% = valeur relative.
- ALIGN = left/right/center : impose la position horizontale du trait.
- NOSHADE : trace un trait noir (non ombré).
Ces options peuvent être combinées.

 

Exemple :

<HR SIZE=5 WIDTH=67% ALIGN=LEFT>

Un texte peut &ecirc;tre plac&eacute; entre deux traits horizontaux.

<HR>

<HR NOSHADE>

 

 

14 - LIENS

Dans un document HTML les liens sont présentés à l'utilisateur suivant le logiciel client WWW utilisé sous différentes formes : mots soulignés, mots colorés, mots en vidéo inverse ... ce sont les prises d'hypertextes ou d'hypermédia (appelées aussi : ancres).

 

·         Lien vers une partie du document courant :
Les commandes sont :
- <A NAME="etiquette"> pour définir le point de branchement de nom : etiquette
- <A HREF="#etiquette"> ancre </A> pour effectuer le lien sur le point de branchement de nom : etiquette, en cliquant sur la prise d'hypertexte : ancre.

 

·         Lien vers un document complet local :
La commande est :
<A HREF="nomdefichier"> ancre </A> pour effectuer le lien sur le fichier de nom : nomdefichier, en cliquant sur la prise d'hypertexte : ancre.  nomdefichier est le nom du fichier avec éventuellement son chemin à partir du répertoire du document "maître".

 

·         Lien vers une partie de document local :
Les commandes sont :
- <A NAME="etiquette"> pour définir le point de branchement de nom : etiquette
- <A HREF="nomdefichier#etiquette"> ancre </A> pour effectuer le lien sur le point de branchement de nom : etiquette, du fichier nomdefichier, en cliquant sur la prise d'hypertexte : ancre.
nomdefichier est le nom complet du fichier avec éventuellement son chemin à partir du répertoire du document "maître".

 

·         Lien vers un document distant :
La commande est :
<A HREF="URL"> ancre </A> pour effectuer le lien sur le document dont l'adresse complète (URL) est donnée, en cliquant sur la prise d'hypertexte : ancre.

 

·         Lien vers un site serveur :
La commande est : ex: <A HREF="http://www.irit.fr">Serveur WWW de l’irit </A>
Cette commande donne accès à un serveur WWW, celui de l’institut de recherche en informatique de Toulouse en cliquant sur la prise d’hypertexte "Serveur WWW de l’IRIT"

 

·         Lien pour un courrier
On peut adresser grâce à HTML un courrier en utilisant la commande MAILTO : ex :
- <A HREF="mailto:toto@irit.fr">Courrier à Toto </A>
Le fait de cliquer sur l’ancre "Courrier à Toto" ouvre la boîte de dialogue dans laquelle on tape le message.  

 

·         Lien pour un document sonore
Il est possible de placer des sons (format .wav, .mid, ...) dans un fichier HTML. Le navigateur WWW est incapable de reproduire un son, il faut donc faire appel à un autre programme (helper) qui doit être déclaré dans l’option PREFERENCES : ex :
- <A HREF="son.mid">Cliquez pour obtenir un son</A>

 

·         Lien pour une séquence vidéo
Il est possible de placer une séquence vidéo (format .mpg, .mov, .avi, ...) dans un fichier HTML.
Le navigateur WWW est incapable de reproduir une séquence vidéo, il faut donc faire appel à un autre programme (helper) qui doit être déclaré dans l’option PREFERENCES : ex :
- <A HREF="film.mov">Cliquez pour obtenir un film</A>

 

 

15 - IMAGES DANS LE TEXTE

Des images peuvent être insérées dans le texte d'un document HTML. Les images sont au format GIF ou JPG.
Elles peuvent servir de prises d'hypertextes :
- soit toute l'image réagit à un clic.
- soit l'image réagit en fonction de la zone où le clic s'est produit : on parle dans ce cas d'image cliquable ou réactive.

·         Les commandes sont les suivantes :

- <IMG SRC="nom_image.gif"> pour insérer une image locale, où nom_image.gif est le nom complet du fichier avec éventuellement son chemin relatif à partir du répertoire du document HTML.

- <IMG SRC="URL"> pour insérer une image distante. URL étant l'adresse complète du fichier image.

- <A HREF="#etiquette"><IMG SRC="nom_image.gif"></A> pour effectuer le lien sur le point de branchement de nom : etiquette, du document courant, en cliquant sur l'image nom_image.gif qui est la prise d'hypertexte. (nom_image.gif est le nom complet du fichier image).
Tout ce qui a été vu dans le § 14 sur les liens est évidemment applicable ici.

- <IMG SRC="nom_image.gif" ISMAP> pour une image cliquable (ou réactive)
Les images cliquables permettent des liens selon l'endroit du "clic" de la souris dans l'image. La requête est transmise à un programme exécutable (souvent IMAGEMAP.EXE) qui associe les coordonnées du "clic" à l'adresse correspondante.

Pour ces commandes les options suivantes sont possibles :

- ALIGN=left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom
left : positionne l'image à gauche de l'écran.
right : positionne l'image à droite de l'écran.
top : positionne le sommet de la ligne de texte au sommet de l'image.
texttop : positionne l'axe horizontal de la ligne de texte au sommet de l'image.
middle : positionne la base de la ligne de texte au milieu de l'image.
absmiddle : positionne l'axe horizontal de la ligne de texte au milieu de l'image.
baseline : positionne la base de la ligne de texte à la base de l'image.
bottom : positionne la base de la ligne de texte à la base de l'image.
absbottom : positionne la ligne de texte au bas de l'image.

- WIDTH=n ou n% HEIGHT=m ou m% : redimensionnent l'image : n et m valeurs de la largeur et de la hauteur de l'image en pixels ou n% et m% valeurs relatives par rapport à la taille normale de l'image.

- VSPACE=n HSPACE=m : éloignent le texte de l'image de n pixels au-dessus et au-dessous de l'image et de m pixels à gauche et à droite de l'image.

- BORDER=n : trace un cadre autour de l'image avec un trait de n pixels de large.

- ALT="texte" : le "texte" est une alternative à l'image lorsque le logiciel client WWW utilisé ne peut afficher l'image.

- Plusieurs options peuvent être utilisées ensemble.

 

Exemple :


<CENTER>
<STRONG>
VOICI LE LOGO De
<IMG SRC="irit.gif" ALIGN=MIDDLE BORDER=5 HSPACE=20>
l’institut de recherche en informatique de Toulouse
</STRONG>
</CENTER>

 

 

16 - TABLEAUX

·         Les commandes sont les suivantes :

- <TABLE>....... </TABLE> pour créer un tableau.

Pour cette commande les options suivantes sont possibles :
BORDER : trace un cadre en trait fin
BORDER=n : trace un cadre en trait de n pixels d'épaisseur
CELLSPACING=n : espacement de n pixels entre les cellules.
CELLPADDING=n : espacement autour de l'écriture dans les cellules.
WIDTH=n ou n% : largeur en pixels ou largeur relative du tableau.
CELLSPACING et CELLPADDING ont priorité sur width.

- <CAPTION> nomtableau</CAPTION> pour indiquer le nom du tableau.

Pour cette commande l'option suivante est possible :
ALIGN=top/bottom : place le nom du tableau au-dessus/au-dessous du tableau.

- <TR>....... </TR> encadre une ligne du tableau.

Pour cette commande les options suivantes sont possibles :
. ALIGN=left/right/center : position horizontale (gauche/droite/centre) du texte dans les cellules de la ligne.
. VALIGN=top/middle/bottom/baseline : position verticale (haut/milieu/bas/bas) du texte dans les cellules de la ligne.

- <TH>....... </TH> encadre une cellule d'en-tête du tableau. (cellule pouvant contenir un texte alphanumérique, une image, une liste, un lien, un autre tableau ou rien)(texte en gras).

Pour cette commande les options suivantes sont possibles :
ALIGN=left/right/center : position horizontale (gauche/droite/centre) du texte dans la cellule d'en-tête.
COLSPAN=n : fusionne n cellules horizontalement.
ROWSPAN=n : fusionne n cellules verticalement.
NOWRAP : supprime la césure éventuelle du texte de la cellule d'en-tête.

- <TD>....... </TD> encadre une cellule du tableau. (cellule pouvant contenir un texte alphanumérique, une image, une liste, un lien, un autre tableau ou rien)

Pour cette commande les options suivantes sont possibles :
- ALIGN=left/right/center : position horizontale (gauche/droite/centre) du texte dans la cellule.
- COLSPAN=n : fusionne n cellules horizontalement.
- ROWSPAN=n : fusionne n cellules verticalement.
- NOWRAP : supprime la césure éventuelle du texte de la cellule.

- Remarque : une macro EXCEL 5 est disponible à http://www710.gsfc.nasa.gov/704/dgd/xl2html.html.
Cette macro gratuite permet de convertir un fichier EXCEL 5 en un tableau HTML. (il suffit d'entrer les données dans un tableau, de sélectionner la zone, de lancer la macro, de répondre ou pas aux questions posées pour obtenir un fichier HTML).

 

Exemple n°1 :
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=top> PREMIER TABLEAU</CAPTION>
<TR>
<TD>ligne 1 ; cellule 1</TD>
<TD>ligne 1 ; cellule 2</TD>
</TR>
<TR>
<TD>ligne 2 ; cellule 1</TD>
<TD>ligne 2 ; cellule 2</TD>
</TR>
</TABLE>
</CENTER>

 

Exemple n°2 :
<TABLE BORDER=8 CELLPADDING=10>
<CAPTION ALIGN=bottom>DEUXIEME TABLEAU</CAPTION>
<TR>
<TH COLSPAN=5>LETTRES</TH>
</TR>
<TR>
<TD>Aa</TD><TD>Bb</TD><TD>Cc</TD><TD>Dd</TD><TD>Ee</TD>
</TR>
<TR>
<TD>Ff</TD><TD>Gg</TD><TD>Hh</TD><TD>Ii</TD><TD>Jj</TD>
</TR>
</TABLE>

 

Exemple n°3 :
<TABLE BORDER=12 CELLSPACING=10 CELLPADDING=10>
<TR>
<TH ROWSPAN=2><FONT SIZE=7>LETTRES</FONT></TH>
<TD><FONT SIZE=6>Aaa</FONT></TD><TD VALIGN=top>Bbb</TD>
<TD VALIGN=bottom>Ccc</TD><TD VALIGN=top>Ddd</TD>
<TD VALIGN=bottom>Eee</TD>
</TR>
<TR ALIGN=right>
<TD ALIGN=left><FONT SIZE=6>F</FONT></TD>
<TD>G</TD><TD>H</TD><TD>I</TD><TD>J</TD>
</TR>
</TABLE>

 

 

17 - FORMULAIRES - PROGRAMMES EXTERNES


Il est possible à partir d'un document HTML de lancer des programmes exécutables capables de réaliser une tâche particulière (par ex. consulter une base de données) .
Il est nécessaire pour cela que le document HTML possède la commande <ISINDEX> ou un formulaire permettant à l'utilisateur d'entrer des paramètres. Ces paramètres seront ensuite traités par le programme externe exécutable.

 

 

18 – EXEMPLE DE PROGRAMME HTML

<HTML>

<HEAD>

<TITLE> Exemple de document HTML</TITLE> </HEAD>

<BODY>

        <H1>Un exemple de document HTML plus long</H1>

        Ceci est un document HTML simple. Voici le premier paragraphe. <P>

        Voici un second paragraphe contenant des effets spéciaux. Ceci est

         un mot en <I>italique</I>.  Ceci est un mot en <B>gras</B>.

        Voici une image gif en ligne : <IMG SRC="dauphins.gif">. <p>

 

        Ceci est un troisième paragraphe qui montre comment construire des

  liens. Voici un lien hypertexte vers le serveur de l’IRIT

  <A HREF="http://www.irit.fr">Serveur WWW de l’irit </A>. <P>

 

        <H2>Un entête de niveau 2</H2>

 

        Voici une section de texte qui devrait s'afficher avec une police de

        taille fixe.  <P>

 

        <PRE>

        construire ses pages Web

        en combinant du texte, des images et du son

        cela devrait intéresser certains, distraire d’autres, ...

        </PRE>

 

        Voici une liste nom numérotée de deux éléments: <P>

        <UL>

        <LI> Premier cas : . . . . . . . .

        <LI> Deuxième cas :  . . . . . . .

        </UL>

        Voici un exemple de fin de document. <P>

        <address> <A HREF="mailto:X@irit.fr"> Courrier pour X@irit.fr </A>

</BODY>

</HTML>

 

19 – CODES DES COULEURS

 

 

Color

Red

Green

Blue

 

Color

Red

Green

Blue

aliceblue

F0

F8

FF

 

green

00

80

00

antiquewhite

FA

EB

D7

 

greenyellow

AD

FF

2F

aqua

00

FF

FF

 

honeydew

F0

FF

F0

aquamarine

7F

FF

D4

 

hotpink

FF

69

B4

azure

F0

FF

FF

 

indianred

CD

5C

5C

beige

F5

F5

DC

 

indigo

4B

00

82

bisque

FF

E4

C4

 

ivory

FF

FF

F0

black

00

00

00

 

khaki

F0

E6

8C

blanchedalmond

FF

EB

CD

 

lavender

E6

E6

FA

blue

00

00

FF

 

lavenderblush

FF

F0

F5

blueviolet

8A

2B

E2

 

lawngreen

7C

FC

00

brown

A5

2A

2A

 

lightpink

FF

B6

C1

burlywood

DE

B8

87

 

lightsalmon

FF

A0

7A

cadetblue

5F

9E

A0

 

lightseagreen

20

B2

AA

chartreuse

7F

FF

00

 

lightskyblue

87

CE

FA

chocolate

D2

69

1E

 

lightslategray

77

88

99

coral

FF

7F

50

 

lightsteelblue

B0

C4

DE

cornflowerblue

64

95

ED

 

lightyellow

FF

FF

E0

cornsilk

FF

F8

DC

 

lime

00

FF

00

crimson

DC

14

3C

 

limegreen

32

CD

32

cyan

00

FF

FF

 

linen

FA

F0

E6

darkblue

00

00

8B

 

magenta

FF

00

FF

darkcyan

00

8B

8B

 

maroon

80

00

00

darkgoldenrod

B8

86

0B

 

mediumaquamarine

66

CD

AA

darkgray

A9

A9

A9

 

mediumblue

00

00

CD

darkgreen

00

64

00

 

mediumorchid

BA

55

D3

darkkhaki

BD

B7

6B

 

mediumpurple

93

70

DB

darkmagenta

8B

00

8B

 

mediumseagreen

3C

B3

71

darkolivegreen

55

6B

2F

 

mediumslateblue

7B

68

EE

darkorange

FF

8C

00

 

mediumspringgreen

00

FA

9A

darkorchid

99

32

CC

 

mediumturquoise

48

D1

CC

darkred

8B

00

00

 

mediumvioletred

C7

15

85

darksalmon

E9

96

7A

 

midnightblue

19

19

70

darkseagreen

8F

BC

8F

 

mintcream

F5

FF

FA

darkslateblue

48

3D

8B

 

mistyrose

FF

E4

E1

darkslategray

2F

4F

4F

 

moccasin

FF

E4

B5

darkturquoise

00

CE

D1

 

navajowhite

FF

DE

AD

darkviolet

94

00

D3

 

navy

00

00

80

deeppink

FF

14

93

 

oldlace

FD

F5

E6

deepskyblue

00

BF

FF

 

olive

80

80

00

dimgray

69

69

69

 

olivedrab

6B

8E

23

dodgerblue

1E

90

FF

 

orange

FF

A5

00

firebrick

B2

22

22

 

orangered

FF

A5

00

floralwhite

FF

FA

F0

 

orchid

DA

70

D6

forestgreen

22

8B

22

 

palegoldenrod

EE

E8

AA

fuchsia

FF

00

FF

 

palegreen

98

FB

98

gainsboro

DC

DC

DC

 

paleturquoise

AF

EE

EE

ghostwhite

F8

F8

FF

 

palevioletred

DB

70

93

gold

FF

D7

00

 

papayawhip

FF

EF

D5

goldenrod

DA

A5

20

 

peachpuff

FF

DA

B9

gray

80

80

80

 

peru

CD

85

3F

 

 

Color

Red

Green

Blue

 

Color

Red

Green

Blue

pink

FF

C0

CB

 

slateblue

6A

5A

CD

plum

DD

A0

DD

 

slategray

70

80

90

powderblue

B0

E0

E6

 

snow

FF

FA

FA

purple

80

00

80

 

springgreen

00

FF

7F

red

FF

00

00

 

steelblue

46

82

B4

rosybrown

BC

8F

8F

 

tan

D2

B4

8C

royalblue

41

69

E1

 

teal

00

80

80

saddlebrown

8B

45

13

 

thistle

D8

BF

D8

salmon

FA

80

72

 

tomato

FF

63

47

sandybrown

F4

A4

60

 

turquoise

40

E0

D0

seagreen

2E

8B

57

 

violet

EE

82

EE

seashell

FF

F5

EE

 

wheat

F5

DE

B3

sienna

A0

52

2D

 

white

FF

FF

FF

silver

C0

C0

C0

 

whitesmoke

F5

F5

F5

skyblue

87

CE

EB

 

yellow

FF

FF

00

 

 

 


(*) Ce texte est inspiré d’un document accessible via  l’adresse http://www.ac-grenoble.fr/gb/htmldoc.htm#para0