Chapitre 28 : HTML version 3.2
Chapitre 28 : HTML version 3.2
Ce chapitre étudie le langage HTML qui a été normalisé le 15 janvier 1997, sachant que ce langage est de plus en plus destiné aux personnes désirant en connaître les fonctionnalités ou aux développeurs souhaitant générer des pages par programme.
En effet, le lecteur désirant écrire une page HTML ou un Web sans connaître la syntaxe du langage HTML peut aujourd'hui développer ses pages au moyen d'outils Wysiwyg que nous présentons au chapitre sur les éditeurs HTML Wysiwyg.
Le langage HTML est un langage à balises, avec lequel pour faire une action sur un groupe de mots, vous devez baliser ce groupe de mots. Par exemple, pour mettre en gras le mot Gilles, et le rendre visible sous la forme Gilles par les lecteurs de Web, il suffit d'écrire la chose suivante <b>Gilles</b>.
De façon générale les commandes sont de la forme :
<marqueur> texte </marqueur>
ou encore
<marqueur attribut=argument> texte </marqueur>
ou même
<marqueur>
Les noms de marqueurs sont identiques en majuscules ou minuscules : <b> équivaut à <B>.
On peut attribuer plusieurs attributs à la même balise par la syntaxe suivante :
<marqueur attribut1=argument1 attribut2=argument2> texte </marqueur>
Les normes HTML demandent de respecter le codage dans les caractères ASCII 7 bits, c'est à dire sans caractères accentués.
Les logiciels navigateurs actuels sont permissifs et vous pouvez entrer des caractères accentués sous votre éditeur, mais vous devez savoir que vos pages ne seront plus lisibles par exemple au Japon ou dans les pays utilisant des jeux de caractères non latins. En outre les caractères accentués sauteront vraisemblablement dans les moteurs de recherche américains, ce point est à méditer.
Pour coder un caractère accentué, on entre une combinaison précédée du caractère & et terminé par un ; (point virgule). Ainsi é se code é
Le tableau suivant donne la liste des caractères ASCII de 128 à 255 avec l'encodage correspondant, mais rassurez-vous les éditeurs HTML actuels font très bien ce genre d'encodage :
|
Codage des caractères accentués |
|
|||||||
|
Æ Æ |
Á Á |
  |
À À |
Å Å |
à à |
Ä Ä |
Ç Ç |
Ð Ð |
|
É É |
Ê Ê |
È È |
Ë Ë |
Í Í |
Î Î |
Ì Ì |
Ï Ï |
Ñ Ñ |
|
Ó Ó |
Ô Ô |
Ò Ò |
Ø Ø |
Õ Õ |
Ö Ö |
Þ Þ |
Ú Ú |
Û Û |
|
Ù Ù |
Ü Ü |
Ý Ý |
á á |
â â |
æ æ |
à à |
'
|
å å |
|
* * |
ã ã |
ä ä |
¦ ¦ |
ç ç |
¢ ¢ |
:
|
,
|
@
|
|
© © |
° ° |
$ $ |
é é |
ê ê |
è è |
 
|
 
|
=
|
|
ð ð |
ë ë |
!
|
½ 1/2 |
¼ 1/4 |
¾ 3/4 |
⅛ 1/8 |
⅜ 3/8; |
⅝ 5/8 |
|
⅞ ⅞ |
> > |
>] > |
½ ½ |
‐ ‐ |
í í |
î î |
¡ ¡ |
ì ì |
|
¿ ¿ |
ï ï |
« « |
( ( |
[ [ |
< < |
<] < |
— — |
µ µ |
|
· · |
|
– – |
¬ ¬ |
ñ ñ |
ó ó |
ô ô |
ò ò |
ø ø |
|
õ õ |
ö ö |
¶ ¶ |
% % |
. . |
+ + |
± ± |
£ £ |
? ? |
|
" " |
» » |
® ® |
) ) |
] ] |
§ § |
; ; |
­ |
¹ ¹ |
|
² ² |
³ ³ |
ß ß |
þ þ |
˜ ~ |
™ ™ |
ú ú |
û û |
ù ù |
|
ü ü |
ý ý |
¥ ¥ |
ÿ ÿ |
| | |
& & |
Les caractères espace consécutifs sont ramenés à un seul espace et pour forcer une suite de caractères espaces il faut utiliser
Un caractère ASCII peut s'écrire sous la forme &#numéro_du_caractère.
Rassurez-vous, ces conversions sont faites par les éditeurs HTML de haut niveau.
Avant d'entrer dans le vif du sujet il faut connaître les conventions suivantes :
Enfin tout le monde commence par regarder les pages HTML des autres avant d'écrire la sienne. Pour cela il vous suffit de cliquer sur le menu View Source de votre lecteur de Web pour voir les sources d'une page HTML et vous familiariser avec le langage. Il est bien entendu conseillé de choisir une page courte au début.
Enfin une ligne peut être entrée en commentaires
<! commentaire >
Ces balises permettent de faire une action ponctuelle là où elles apparaissent, sans effet sur la suite du document. <HR> trace un trait de séparation dans le texte, comme ceci.
Cette balise peut être agrémentée des arguments suivants :
<P> est une marque de fin de paragraphe.
<P ALIGN=CENTER|LEFT|RIGTH>
permet de rentrer le texte entre les marges gauche et droite ; dans ce cas, la balise </P> localisera la fin de la portée de la balise <P>
<BR> est une marque de fin de ligne sans saut de paragraphe.
Elle connait les arguments suivants :
<BR CLEAR=all|left|right>
CLEAR quand il a la valeur left va faire le même saut de ligne et fait un déplacement vers le bas en respectant la marge gauche. CLEAR avec la valeur right fait la même chose avec la marge droite. Ceci permet aussi de mettre des images autour de texte.
En outre le couple de balises
<DIV ALIGN="left|center|right">...</DIV> permet de justifier un texte à droite, au centre, ou à gauche
De même, le couple de balises <CENTER>...</CENTER> permet de centrer le texte qu'il encadre.
On s'attache ici aux couples de balises <xx> ... </xx > qui servent à délimiter une page HTML et à définir son entête et son corps.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
Exemple : la plus petite page HTML sera
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<TITLE>Exemple</TITLE>
<HEAD> . . . </HEAD>
est le couple de balises qui marque l'entête du document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HEAD> <TITLE>Exemple</TITLE> </HEAD> <BODY> Ceci est ma première page HTML ! </BODY> </HTML>
Ces commandes se mettent entre le couple de balises <HEAD> et </HEAD>. Elles donnent des informations générales sur toute la page.
<HTML>
<HEAD>
<BASE HREF="fichier.htm">
<ISINDEX>
</HEAD>
<BODY>
Voici une page d'interrogation très simple
</BODY>
</HTML>
affichera un masque de saisie d'une clé de façon à
lancer la requête fichier.htm?cle .
établit un lien avec un autre document pour donner le nom du document maître, l'index. Cette balise n'est jamais utilisée mais elle serait très utile pour renseigner sur les enchainements des documents. Ainsi si les liens étaient correctement exploités par les navigateurs, le bouton suivant permettrait d'aller à la page suivante de façon automatique.
La directive META sert également à donner la liste des mots clés du document par l'emploi du mot réservé KeyWords :
Exemple :
Exemple : <BASE HREF=http://www.pot.fr/> permettra de référencer les adresses du genre toto.html à l'adresse http://www.pot.fr/toto.html
Un lien permet de définir une région sensible au clic souris dans un document et en même temps, l'endroit ou l'on va se retrouver après ce clic. Cette adresse peut être un document différent, par exemple, mais également un endroit précis (défini par une ancre) dans le document.
La syntaxe générale d'un lien est la suivante :
<A HREF=adresse rel=top|contents|index|glossary|copyright|next|previous|help|search rev=top|contents|index|glossary|copyright|next|previous|help|search title=valeur>texte </A>
Les attributs rel, rev, et title sont peu usités et ont les mêmes significations que celles exposées dans la balise LINK
Exemple : <A name="CHAP1">Chapitre 1</A> définit un signet nommé CHAP1 associé aux mots Chapitre 1
Pour définir un lien hypertexte quelque part ailleurs sur le mot point, qui après avoir été cliqué, amène vers les mots Chapitre 1, on fait une définition de lien <A href="#CHAP1">Point</A>, et le mot Point sera marqué en bleu.
Rappelons qu'une URL 
est toujours de la forme : ressource://host.domaine:port/pathname
où la ressource peut être : file, http, news, gopher, telnet, wais ou mailto. Les éléments ressources, port et pathname sont optionnels.
Sur PC un lien à un document constitué par un fichier
situé sur un lecteur de disque défini par l'unité
c: se fera par l'URL :
<A HREF="file:///c|fichier.htm"> fichier
sur c:</A>
Le symbole : est remplacé par | et // est remplacé par /// pour éviter la confusion avec un nom de serveur.
Pour définir les liens URL, généralement en bleu, on utilise la balise <A HREF=....> et pour définir l'endroit ou le signet vers lequel on se rend, on utilise la balise <A NAME=....>.
Enfin
le chargement d'un fichier sons, vidéo, compressé peut être
fait au moyen de cette même balise de la façon suivante :
<A HREF=fichier>cliquez ici pour charger le fichier</A>
L'argument mailto:adresse permet d'envoyer un courrier électronique à l'adresse correspondante.
Ainsi
<A HREF=mailto:Gilles.Maire@imaginet.fr> texte </A>
permet d'envoyer un courrier électronique à l'utilisateur Gilles.Maire@imaginet.fr en cliquant sur le mot texte.
Cette directive mailto permet de spécifier le champ sujet normalement renseigné dans le courrier par ajoût de l'argument subject sous la syntaxe suivant :
<A HREF="mailto:Gilles.Maire@imaginet.fr?subject=Sujet"> texte </A>
Ces commandes permettent de mettre des parties de texte dans un format donné.
Sans attribut, le texte apparaît comme ceci.
Nous allons voir les différentes possibilités d'affichage. Il est à remarquer que ces balises influent sur la charte graphique du document mais peuvent ne pas être implémenté par tel ou tel éditeur.
Gras : <B> Ceci permet d'afficher en gras </B>
Italique : <I> Ceci permet d'afficher en italique </I>
Souligné : <U> Ceci permet d'afficher en souligné</U>
Exemple de combinaison : Gras Italique : <B> < I> Gras italique </I></B>
Adresse : <ADDRESS> Ceci permet d'afficher une adresse </ADDRESS>Citation : <CITE> Ceci permet d'afficher des citations </CITE>Blockquote : <BLOCKQUOTE> ceci permet d'afficher un bloc avec retrait à droite</BLOCKQUOTE>
Code : <CODE> Ceci permet d'afficher du code </CODE>
Remarque : cette commande est bien utile dans la mesure où elle respecte les retours-ligne du texte sans demander des marques <BR> ou <P> en fin de chaque ligne.
Machine à écrire : <TT> Affichage style machine à écrire </TT>
Variable : <VAR> Ceci permet d'afficher du texte de type variable </VAR>
Préformaté : <PRE WIDTH=nb> Ceci permet de mettre un style préformaté avec éventuellement une longueur de ligne si la variable WIDTH=nb </PRE WIDTH>.
La balise PRE est la seule qui permet :
Remarque : cette commande est utile dans la mesure où elle respecte les retours-ligne du texte sans demander des marques <BR> ou <P> en fin de chaque ligne.
Exemple : <SAMP> Ceci permet d'afficher un exemple </SAMP>
Rayé : <STRIKE>Ceci vous permet de barrer un texte
</ STRIKE>
Rayé <S>Cette balise est amenée à remplacer
la précédente</S>
Epais : <STRONG> Ceci permet de mettre des caractères épais </STRONG>
Clignotant : <blink> Ceci vous permet de mettre du texte en clignotant mais n'est pas dans la norme HTML 3.2!</blink>
<H1>Titre de niveau 1</H1>
<H2>Titre de niveau 2</H2>
<H3>Titre de niveau 3</H3>
<H4>Titre de niveau 4</H4>
<H5>Titre de niveau 5</H5>
<H6>Titre de niveau 6</H6>
Les balises H1 H6 peuvent
comporter un attribut ALIGN=LEFT|CENTER|RIGHT permettant
l'alignement du texte à gauche, au centre ou à droite.
Emphase : <EM> sert à mettre en relief un groupe de caractères </EM>
Clavier : <KBD> ceci permet d'afficher les entrées clavier </KBD>
Définition : <DFN> . . . </DFN> pour afficher une définition
Certaines
commandes peuvent ne rien afficher de notable dans votre document. Tout
cela dépend de la finesse de votre lecteur de Web.
<BIG>...</BIG>
Permet d'écrire un texte plus gros comme ceci
<SMALL>...</SMALL>
Permet d'écrire un texte plus petit comme ceci
<SUP> ... </SUP>
permet d'entrer des exposants : x2 + y2 = R2
<SUB> ... </SUB>
permet d'entrer des indices : xn+1 - xn = n(n-1)
Ces commandes permettent de donner des listes de plusieurs types.
permet de donner une liste de définitions
<DL>
<DT> Terme 1 à définir
<DD> Définition du terme 1
<DT> Terme 2 à définir
<DD> Définition du terme 2
</DL>
Exemple :
Terme 1 à définir
Définition du terme 1
Terme 2 à définir
Définition du terme 2
permet de donner une liste de répertoires
<DIR>
<LI> texte 1
<LI> texte 2
</DIR>
Exemple :
permet de donner une liste précédée d'un numéro s'incrémentant automatiquement.
<OL>
<LI> texte 1
<LI> texte 2
</OL>
Exemple :
La balise peut prendre les arguments suivants :
<OL TYPE=A|a|I|i|1 START=nb COMPACT>
Outre les numéros 1, 2, 3 etc.. vous pouvez accéder aux numéros A,B,C etc ... et pouvez commencer à un autre rang que le premier (START).
COMPACT permet l'écriture de numéros plus compacts.
de plus <LI VALUE=nb>
permet de changer la valeur de la numérotation en regard d'une ligne.
permet de donner une liste précédée d'une puce.
<UL>
<LI> texte 1
<LI> texte 2
</UL>
Exemple :
La balise peut prendre les arguments suivants :
<UL TYPE=disc|circle|square>
Ainsi il est possible de décider que la puce sera un disque vide, un cercle ou un carré.
<UL TYPE=disc>
<LI> texte 1
<LI> texte 2
</UL>
permet de donner une liste menus.
<MENU>
<LI> texte 1
<LI> texte 2
</MENU>
Exemple :
Les listes peuvent être emboîtées en niveaux. Par exemple les lignes suivantes seront emboîtées:
Ceci se programme bien évidemment de la façon suivante :
<UL> <LI>Niveau 1 <UL> <LI>Niveau 2 <LI>Niveau 2 </UL> <LI>Niveau 1 </UL>
Une des originalités des pages web est la large utilisation des
images. Les images sont au format GIF
ou JPG
et sont intégrées dans le document par la commande :
<IMG SRC="nom du fichier">
Cet ordre peut être agrémenté des options suivantes :
ALT : pour afficher un texte si le lecteur de Web ne sait pas lire l'image.
Exemple : <IMG ALT="texte" SRC="nom du fichier">
La balise IMG peut être agrémentée des arguments suivant :
ALIGN=left|right|top|texttop|middle|absmiddle|baseline|bottom|absbottom
Notons que seules les valeurs soulignées sont admises par la norme HTML 3.2 mais on recontre les autres dans tous les outils de manipulation HTML.
Ces différentes valeurs permettent d'aligner les images à gauche, à droite, en haut, en haut du texte, au milieu, au milieu par rapport à la ligne, en bas, en bas de la ligne etc.
WIDTH=valeur HEIGHT=valeur
Les attributs WIDTH et HEIGHT permettent de donner la longueur et la largeur de l'image, ce qui a pour effet d'accélérer la visualisation de l'image en évitant les temps de calcul. Cette option permet la visualisation du texte avant la visualisation des images avec les navigateurs les meilleurs. Elle est donc à utiliser.
BORDER=valeur
donne l'épaisseur du trait de marque d'URL autour de l'image.
VSPACE=valeur HSPACE=valeur
VSPACE contrôle l'espacement vertical en pixels au-dessus et en dessous de l'image. HSPACE contrôle l'espacement horizontal en pixels à droite et à gauche de l'image.
Les valeur ISMAP et USEMAP sont également comprises.
La procédure ISMAP permet de repérer la position de la souris sur un graphique pour exécuter des actions différentes suivant la région cliquée.
La carte de France vous donne un exemple de cette utilisation, puisqu'elle donne la liste des fournisseurs de la région cliquée.
Pour obtenir la procédure CGI il suffit d'ajouter à la directive IMG, l'argument ISMAP, comme le montre l'exemple suivant :
<A HREF="/cgi-bin/fourniss.pl">
<IMG SRC="gif/france.gif" BORDER=0 ISMAP></A>
fourniss.pl est le nom de la procédure CGI qui va être appelée sur le serveur. ISMAP permet de donner les coordonnées de la souris sur l'image, l'appel sera fait sous la forme fourniss.pl?x,y où x et y sont les coordonnées pointées.
La procédure CGI correspondante est expliquée en langage PERL dans l'exemple CGI.
Il est commode pour s'affranchir des procédures en CGI d'utiliser la primitive imagemap décrite dans le chapitre sur les serveurs http. Mais cette possibilité n'existe pas sur tous les serveurs http.
Les formulaires sont les seuls outils permettant de récolter des
informations en provenance des lecteurs de Web. Ils seront traités
sur le serveur par des programmes appelés CGI .
Un exemple de formulaire est accessible dans ce manuel par la touche
de souscription 
.
La puissance des procédures CGI est évidente, elle permet à l'utilisateur d'un lecteur de Web de faire des actions sur le serveur.
Ces actions peuvent être :
Dans les deux cas, le serveur pourra restituer un texte ou une page HTML de résultat spécialement conçue pour l'utilisateur qui a fait la requête. Mais dans la majeure partie des cas la procédure CGI ne se contentera pas de restituer une page de compte-rendu, elle aura généralement pour but premier d'enregistrer les informations dans une base de données.
Nous nous intéressons ici à l'écriture de requêtes CGI dans les pages HTML. Nous verrons en détail l'écriture des procédures CGI sur le serveur dans un chapitre dédié.
Les balises FORM permettent de définir les interfaces d'échange d'informations entre un utilisateur et le serveur http. Cette interface est graphique et utilise les listes déroulantes, les boutons poussoirs, les boutons radios et tous les éléments graphiques présents dans les systèmes actuels.
Plusieurs balises FORM peuvent être présentes dans un document HTML mais en aucun cas les balises FORM ne peuvent être emboîtées.
La balise FORM enverra une requête sur le serveur http sur lequel l'utilisateur est connecté lorsque ce dernier appuiera sur le bouton d'envoi de la requête.
La syntaxe d'une balise FORM est la suivante :
<FORM ACTION="url"> ... </FORM>
Les attributs suivants peuvent être utilisés :
Le texte encadré par le couple de balises <FORM> et </FORM> peut contenir un ensemble de commandes:
La commande INPUT est utilisée avec des attributs pour spécifier les caractéristiques de la commande clavier (ou souris) désirée.
Les différents attributs que peut utiliser la commande INPUT sont :
Exemple 1 : La forme suivante
Entrez votre texte
est obtenue par la programmation suivante :
<FORM METHOD="POST">
Entrez votre texte <INPUT NAME="entree">
</FORM>
Exemple 2 : la forme suivante
est obtenue par la programmation suivante :
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Entrez la valeur du champ 1 <INPUT NAME="entry1">
Entrez la valeur du champ 2 <INPUT NAME="entry2">
Entrez la valeur du champ 3 <INPUT NAME="entry3">
<INPUT TYPE="submit" VALUE="Envoyer">
</FORM>
Exemple 3 : La forme suivante
est obtenue par la programmation suivante :
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Nom <INPUT NAME="Nom"><P>
Prénom <INPUT NAME="Prenom">
<OL>
<LI> <INPUT TYPE="checkbox" CHECKED NAME="topping1"
VALUE="Marie">Marié
<LI> <INPUT TYPE="checkbox" NAME="topping2"
VALUE="francais"> francais
</OL>
Volontaire
<DL>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Oui"
CHECKED> <I>Oui</I>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Non">
<I>Non</I>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Ne
sait pas"> <I>Ne sait pas</I>
</DL>
<INPUT TYPE="submit" VALUE="Ok">
<INPUT TYPE="reset" VALUE="Annuler">
</FORM>
Exemple 4 : La forme suivante
est obtenue par la programmation suivante
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Champ 1 (normal): <INPUT NAME="entry1"> <P>
Champ2 (40 caractères affichés) : <INPUT SIZE=40
NAME="entry2"> <P>
Champ3 (5 caractères seulement) : <INPUT SIZE=5
MAXLENGTH=5 NAME="entry3"> <P>
<INPUT TYPE="submit" VALUE="OK"> <INPUT
TYPE="reset" VALUE="Annuler">
</FORM>
Cet exemple est obtenu par la syntaxe suivant :
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Exemple de fichier à envoyer <INPUT TYPE=file NAME=fichier>
<P>
<INPUT TYPE=submit VALUE="Envoyer le fichier">
</FORM>
Remarque :
La procédure PERL permettant de récupérer les données est disponible dans le chapitre sur les exercices en PERL
La commande SELECT permet de donner la liste des champs accessibles pour les menus déroulants.
La commande SELECT est utilisée avec la syntaxe suivante :
<SELECT NAME="a-menu">
<OPTION VALUE=valeur> Option 1
<OPTION VALUE=valeur> Option 2
</SELECT>
Les attributs de la commande SELECT sont les suivants :
NAME est le nom symbolique de l'élément. C'est-à-dire le nom du champ utilisé par l'auteur de la page HTML. Ce nom n'est pas visible pour les utilisateurs.
SIZE donne le nombre d'éléments qui seront affichés dans le menu. Les autres valeurs seront accessibles au moyen d'un ascenseur.
MULTIPLE indique que la commande SELECT pourra avoir plusieurs sélections.
SELECTED indique que l'option est sélectionnée par défaut.
VALUE est un paramètre optionnel permettant de donner à la variable en regard de NAME la valeur désirée
La commande TEXTAREA est utilisée avec la syntaxe suivante :
<TEXTAREA NAME=... ROWS=.. COLS=.. > valeur par défaut</TEXTAREA>
La commande TEXTAREA est utilisée pour les entrées textes et spécifie :
Exemple 5 : la forme suivante
est obtenue par la programmation suivante
<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Login <INPUT NAME="name" VALUE="guess"><P>
Mot de passe <INPUT TYPE="password" NAME="passwd"
VALUE="guess" ><P>
Système d'exploitation :
<SELECT NAME="system">
<OPTION>Mac OS
<OPTION SELECTED>PC Windows
<OPTION>Unix
</SELECT> <P>
Logiciels utilisés :
<SELECT NAME="software" MULTIPLE SIZE=5>
<OPTION>Comptabilité
<OPTION SELECTED>Jeux
<OPTION>Traitement de texte
<OPTION SELECTED> Internet
<OPTION> Compilateurs
</SELECT> <P>
<TEXTAREA NAME="Commentaires" ROWS=20 COLS=60>
Néant
</TEXTAREA><P>
<INPUT TYPE="submit" VALUE="OK">. <P>
</FORM>
Quand le bouton submit est pressé, le contenu de la FORM est assemblé dans la valeur URL qui ressemblera à ceci :
action?name=value&name=value&name=value
Nous verrons en détail l'implémentation des commandes ACTION côté serveur dans le chapitre sur les serveurs http.
Le contenu de la FORM est passé par un message de requête.
Si vous désirez tester votre requête sur un serveur qui vous renvoie simplement la liste des FORM que vous lui envoyez avec une présentation lisible, vous pouvez vous adresser au serveur http://hoohoo.ncsa.uiuc.edu
Les polices de caractères peuvent être modifiées sur l'ensemble d'une page par la directive :
<BASEFONT SIZE=valeur>
Valeur sert à changer la taille de la police par défaut. Sept tailles sont disponibles et la valeur par défaut est 3, la plus grosse étant de valeur 6.
Une partie de texte peut voir sa taille modifiée si elle est entourée de la balise :
<FONT SIZE=valeur> ..</FONT>
Valeur sert à spécifier , ici encore, 7 tailles de polices (le défaut étant 3).
La syntaxe SIZE=+i ou i peut être compris entre 1 et 7 est admise, elle permet de donner une taille relative par rapport à la taille en cours.
De même les caractères peuvent être modifiés par l'attribut COLOR, ainsi
<FONT COLOR="#FF0000">permet de colorier les caractères (ici en rouge)</FONT>
Permet de colorier les caractères (ici en rouge)
Notons que les noms de couleurs peuvent être donnés en toutes lettres (Red,Blue,Green,..)
<FONT COLOR="Green">Green</FONT>
Les tableaux sont une structure importante du langage HTML dans la mesure où ils permettent d'organiser le texte avec ou sans visualisation de cadres. Les tableaux peuvent être emboités.
Un tableau est encadré par la balise TABLE
Le code :
<TABLE BORDER=0> <TR> <TD>Colonne1 Ligne1</TD> <TD>Colonne2 Ligne1</TD> <TD>Colonne3 Ligne1</TD> </TR> <TR> <TD>Colonne1 Ligne2</TD> <TD>Colonne2 Ligne2</TD> <TD>Colonne3 ligne2</TD> </TR> </TABLE>
affichera le tableau suivant :
|
Colonne1 Ligne1 |
Colonne2 Ligne1 |
Colonne3 Ligne1 |
|
Colonne1 Ligne2 |
Colonne2 Ligne2 |
Colonne3 ligne2 |
<TABLE BORDER=0> <TH> Titre1</TH> <TH> Titre2 </TH> <TH> Titre3 </TH> <TR> <TD>Colonne1 Ligne1</TD> <TD>Colonne2 Ligne1</TD> <TD>Colonne3 Ligne1</TD> </TR> <TR> <TD>Colonne1 Ligne2</TD> <TD>Colonne2 Ligne2</TD> <TD>Colonne3 ligne2</TD> </TR> </TABLE>
affichera le tableau suivant :
|
Titre1 |
Titre2 |
Titre3 |
|---|---|---|
|
Colonne1 Ligne1 |
Colonne2 Ligne1 |
Colonne3 Ligne1 |
|
Colonne1 Ligne2 |
Colonne2 Ligne2 |
Colonne3 ligne2 |
<TABLE BORDER=0> <CAPTION ALIGN=TOP> Titre du tableau en haut</CAPTION> <TH> Titre1</TH> <TH> Titre2 </TH> <TH> Titre3 </TH> <TR> <TD>Colonne1 Ligne1</TD> <TD>Colonne2 Ligne1</TD> <TD>Colonne3 Ligne1</TD> </TR> <TR> <TD>Colonne1 Ligne2</TD> <TD>Colonne2 Ligne2</TD> <TD>Colonne3 ligne2</TD> </TR> </TABLE>
affichera le tableau suivant :
|
Titre du tableau en haut |
||
|
Titre1 |
Titre2 |
Titre3 |
|---|---|---|
|
Colonne1 Ligne1 |
Colonne2 Ligne1 |
Colonne3 Ligne1 |
|
Colonne1 Ligne2 |
Colonne2 Ligne2 |
Colonne3 ligne2 |
Les attributs s'insèrent dans les balises de définition. Par exemple l'attribut ALIGN=TOP se mettra dans la balise CAPTION par la commande : <CAPTION ALIGN=TOP> .... </CAPTION>
Ainsi le code suivant permettra d'afficher du texte dans certaines cellules en donnant une impression de mots dispersés:
<TABLE BORDER=0>
<TR> <TD></TD> <TD>Texte</TD> <TD></TD> <TD>Texte</TD> </TR> <TR> <TD>Texte</TD> <TD>Texte/TD> <TD></TD> <TD></TD> </TR> <TR> <TD>Texte</TD> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE>
affichera le résultat suivant :
|
|
Texte |
|
Texte |
|
|
Texte |
|
Texte |
|
|
|
|
Texte |
|
Texte |
Par exemple :
<TABLE BORDER> <TR> <TD>Colonne1 Ligne1</TD> <TD>Colonne2 Ligne1</TD> <TD>Colonne3 Ligne1</TD> </TR> <TR> <TD COLSPAN=2>Colonne1 Ligne2</TD> <TD>Colonne2 Ligne2</TD> </TR> </TABLE>
affichera le tableau suivant :
|
Colonne1 Ligne1 |
Colonne2 Ligne1 |
Colonne3 Ligne1 |
|
Colonne1 Ligne2 |
Colonne2 Ligne2 |
|
Par exemple
|
|
est un tableau à une ligne une colonne qui avec la valeur BORDER=6 provoquera un cadre idéal pour votre photo.
Les pages HTML utilisent désormais les fonds d'écran et des textures de toute sorte. Ceux-ci vous permettent de donner un style à votre page Web. On trouve désormais sur Internet des pages Web avec un fond en texture de parchemin beige et avec une écriture en noir du plus bel effet.
On trouve aussi des Webs totalement illisibles avec un fond rouge et des polices bleues.
Voici les informations utiles à votre imagination.
Il est possible d'assigner des attributs à la balise BODY, par exemple <BODY BACKGROUND="valeur" >.
Vous pouvez assigner les attributs suivants à la balise BODY :
BACKGROUND=fichier
Pour vous donner des idées vous pouvez consulter les pages
Enfin les arguments suivants vous permettent de jouer sur les paramètres de couleur de texte et de fond d'écran :
BGCOLOR=couleur
TEXT=couleur
LINK=couleur
VLINK=couleur
ALINK=couleur
Ainsi la syntaxe d'un attribut de changement de couleur du fond d'écran en blanc est : BGCOLOR="#FFFFFF"
La directive IMAGEMAP permet d'appeler une page HTML différente suivant la région où l'on clique dans une image quand l'atttribut ISMAP est positionné, ceci est expliqué dans la section IMAGEMAP du chapitre sur les serveurs http.
La difficulité de cette directive vient du fait que l'on doit positionner sur le serveur un fichier décrivant la géographie de l'image. Ceci nécessite une mise en oeuvre simple pour un cas particulier mais difficile à maintenir pour un administrateur de site.
La balise MAP qui est gérée uniquement côté client. Elle simplifie donc la tâche des développeurs de page HTML.
La balise <MAP> permet de définir la géométrie de l'image; elle contient également le nom de l'image dont on définit la géométrie.
A l'intérieur du bloc <MAP> </MAP> on trouve des définitions de type <AREA> définissant chacune des zones sensibles.
Ainsi la structure de la balise sera la suivante :
<MAP NAME=Nom>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées"
HREF=URL>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées"
HREF=URL>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées"
HREF=URL>
<AREA SHAPE=valeur COORDS= "valeur_coordonnées"
HREF=URL>
</MAP>
<IMG SRC=Nom de l'image USEMAP="#Nom">
Les paramètres prennent les valeurs suivantes :
Les applets JAVA sont définies par la norme HTML 3.2 elles sont déclarées dans la page par la syntaxe suivante
<APPLET CODEBASE=URL >
<PARAM NAME=paramètres VALUE=valeur>
</APPLET>
