INITIATION_HTML_NAB_2009

Initiation au langage html Page 2 sur 61
___________________________________________________________________________________
Cours réalisé par Mr Nabeledi Formateur PHP Edition 2009
SOMMAIRE
I.
PRESSENTATION............................................................................................................ 4

1.1.
Présentation ............................................................................................................................4

1.2.
Historique ...............................................................................................................................4

1.3.
Architecture............................................................................................................................6

1.4.
Extension des fichiers html ....................................................................................................6

II.
LES META BALISES....................................................................................................... 7

2.1.
utilité.......................................................................................................................................7

2.2.
Récapitulatif ...........................................................................................................................9

III.
LES TABLEAUX............................................................................................................ 11

3.1.
Généralités............................................................................................................................11

3.2.
Les éléments d'un tableau.....................................................................................................11

3.3.
Remarques............................................................................................................................13

IV.
LES CADRES.................................................................................................................. 14

4.1.
Fonction................................................................................................................................14

4.2.
Avantages/Inconvénients......................................................................................................14

4.3.
Structure de la page HTML..................................................................................................14

4.4.
La balise <frameset> ............................................................................................................15

4.5.
La balise <frame>.................................................................................................................16

4.6.
La balise <iframe> ...............................................................................................................17

4.7.
L'attribut target .....................................................................................................................18

V.
FORMULAIRE................................................................................................................ 19

5.1.
Généralités............................................................................................................................19

5.2.
La balise <form> ..................................................................................................................19

5.3.
la balise <input>...................................................................................................................20

5.4.
la balise <textarea>...............................................................................................................22

5.5.
Liste de choix, la balise <select> .........................................................................................23

5.6.
Autres éléments de formulaire .............................................................................................24

5.7.
Un exemple de formulaire....................................................................................................25

5.8.
Récapitulatifs des balises......................................................................................................26

VI.
LES IMAGES DANS UNE PAGE WEB........................................................................ 28

6.1.
Généralités............................................................................................................................28

6.2.
La balise <img>....................................................................................................................29

6.3.
Afficher des images..............................................................................................................30

6.4.
Les images map ou images cliquables .................................................................................32

VII.
LES LIENS HYPERTEXTE ........................................................................................... 35

7.1.
Différents types de liens.......................................................................................................35

7.2.
Quelques attributs de la balise <a> .....................................................................................37

7.3.
Lien vers d'autres objets .......................................................................................................37

VIII.
MISE EN FORME DE TEXTE....................................................................................... 38

8.1.
Titre et sous-titre ..................................................................................................................38

8.2.
Paragraphes ..........................................................................................................................38

8.3.
Les balises <div> et <span>.................................................................................................39

8.4.
La balise <hr>.......................................................................................................................39

8.5.
Mise en forme de la police ...................................................................................................39

8.6.
Autres balises .......................................................................................................................40

8.7.
Les entités de caractères.......................................................................................................41

8.8.
Codage de la couleur ............................................................................................................41

___________________________________________________________________________________
8.9.
Listes d'items........................................................................................................................42

IX.
FEUILLES DE STYLES ................................................................................................. 46

9.1.
Présentation des feuilles de style..........................................................................................46

9.2.
Implémentation.....................................................................................................................46

9.3.
Définition de style ................................................................................................................49

9.4.
Assignation de propriétés ....................................................................................................50

9.5.
Les pseudo-classes ...............................................................................................................52

9.6.
Quelques propriétés..............................................................................................................54

___________________________________________________________________________________
I. PRESSENTATION
1.1. Présentation
Le HTML, abréviation de l'anglais Hypertext Markup Language (Hypertext est parfois écrit
HyperText pour marquer le T de l'abréviation), aussi appelé langage HTML, rarement traduit
littéralement en langage de balisage hypertexte, est le langage informatique créé et utilisé pour
écrire les pages Web. HTML permet en particulier d'insérer des hyperliens dans du texte, donc de
créer de l'hypertexte, d'où le nom du langage.
HTML est un langage de description de documents tel qu'il a été pensé à ses origines par Tim
Berners-Lee à partir de 1989.
C'est le protocole HTTP qui, sur le web, permet de transférer à partir d'un serveur Web, un fichier
HTML.
Les documents HTML sont identifiés par une adresse URL, et sont interprétés par un logiciel
appelé navigateur Web. Grâce à ce dernier, le fichier HTML apparaît à l'écran comme l'auteur l'a
voulu. Sont ainsi représentés texte, typographie, couleurs, tableaux, images, son, etc.
1.2. Historique
1989 - 1992
HTML a été inventé pour le World Wide Web, afin de pouvoir écrire des documents hypertextes
liant les différentes ressources d'Internet. En août 1991, lorsque Tim Berners-Lee annonce
publiquement le Web sur Usenet, il ne cite que le langage SGML(standard generalized Markup
Language), mais donne l'URL(Uniform Resource Locator , Repère uniforme de ressource) d'un
document ayant l'extension de fichier html.
Les premiers éléments du langage HTML sont le titre du document, les hyperliens, la structuration
du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par
index. La description d'HTML est alors assez informelle et principalement définie par le support des
divers navigateurs Web d’alors.
1993
L'état de HTML correspond alors à ce que l'on pourrait appeler HTML 1.0. Il n'existe cependant
aucune spécification portant ce nom, notamment parce que le langage était alors en pleine
évolution. Un effort de normalisation était cependant en cours. À partir de fin 1993, le terme HTML+
sera utilisé pour désigner la version future de HTML.
Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures : l'invention de
l'élément IMG qui permet d'intégrer des images (GIF ou XBM) aux pages Web (Mosaic 0.10) ; les
formulaires rendent le World Wide Web interactif (Mosaic 2.0 ).
1994
Avec l'apparition de Netscape Navigator 0.9 le 13 octobre, le support de nombreux éléments de
présentation est ajouté : styles de texte, clignotement, centrage... Le développement de HTML
prend alors deux voies divergentes. D'une part, les développeurs de navigateurs s'attachent à
maximiser l'impact visuel des pages Web. D'autre part, les concepteurs du Web proposent
d'étendre les capacités de description sémantiques (logos, notes de bas de page...) et les
domaines d'applications (formules mathématiques, tables) de HTML. En ceci, ils suivent les
principes de SGML consistant à laisser la présentation à un langage de style. En l'occurrence, les
feuilles de style en cascade (CSS) sont prévues pour HTML.
1995 - 1996
En mars 1995, le W3C nouvellement fondé propose le résultat de ses recherches sur HTML+ : le
brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions

___________________________________________________________________________________
mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin
1995, le RFC 1866 décrivant HTML 2.0 est finalisé. Ce document décrit HTML tel qu'il existait
avant juin 1994, donc sans les nombreuses additions de Netscape Navigator.
1997
Le 14 janvier, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée
début 1996, donc avec une partie des additions de Netscape Navigator et Internet Explorer. Ses
plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de
présentation.
Le 18 décembre, le W3C publie la spécification HTML 4.0 qui standardise notamment le support
les styles, les cadres (frames) et les objets (généralisation des images et des applets).
1998 - 1999
La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n'apporte que des
corrections mineures à la version 4.0.
2000 - 2006
Le développement de HTML en tant qu’application du Standard Generalized Markup Language
(SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup
Language (XML). La première étape est la spécification XHTML 1.0, publiée le 26 janvier 2000. Il
s'agit d'une reformulation de HTML 4.01 basée sur XML au lieu de SGML.
La seconde étape est la spécification XHTML 1.1, publiée le 31 mai 2001. Il s'agit d'un classement
des fonctionnalités de XHTML 1.0 en modules.
Mais, en 2004, des fabricants de navigateurs web créent le web Hypertext Application Technology
Working Group (WHATWG) dans le but, notamment, de relancer le développement du format
HTML et de répondre aux nouveaux besoins sur une base technologique jugée plus aisément
implémentable que celle du XHTML 2.0 en cours de conception. Ceci s’inscrit dans le contexte
d’une contestation plus générale du mode de fonctionnement du W3C, réputé trop fermé par une
partie des développeurs et designers web.
2007 à nos jours
En mars 2007, tirant la conséquence des réticences d’une partie de l’industrie et des concepteurs
de contenus web face à XHTML 2.0, le W3C relance le développement de HTML et crée un
nouveau groupe de travail encadré par Chris Wilson (Microsoft) . Il s’agit notamment :
• de faire évoluer HTML pour décrire la sémantique des documents mais aussi les
applications en ligne ;
• de parvenir à un langage extensible via XML tout en maintenant une version non XML
compatible avec les parseurs HTML des navigateurs actuels ;
• et d’enrichir les interfaces utilisateurs avec des contrôles spécifiques : barres de progrès,
menus, champs associés à des types de données spécifiques.
Les travaux du WHATWG ont été formellement adoptés en mai 2007 comme point de départ d’une
nouvelle spécification HTML 5. Ce document a été publié sous forme de Working Draft le
22 janvier 2008. Parmi les principes de conception évoqués par le groupe de travail figurent en
particulier :
• la compatibilité des futures implémentations HTML avec le contenu web existant, et la
possibilité pour d’anciens agents utilisateurs d’exploiter les futurs contenus HTML 5 ;
• une approche pragmatique, préférant les évolutions aux modifications radicales, et adoptant
les technologies ou pratiques déjà largement partagées par les auteurs de contenus
actuels ;
• la priorité donnée, en cas de conflit d’intérêt, aux besoins des utilisateurs sur ceux des
auteurs, et par suite, à ceux des auteurs sur les contraintes d’implémentation par les
navigateurs ;
• le compromis entre la richesse sémantique du langage et l’utilité pratique des solutions
disponibles pour remplir l’objectif majeur d’indépendance envers le media de restitution.

___________________________________________________________________________________
Le développement de XHTML 2.0 est poursuivi en parallèle, en réponse aux besoins d’autres
secteurs du web, tels que les périphériques mobiles, les applications d’entreprise et les
applications serveurs ;.
1.3. Architecture
Un document HTML est composé de texte et de commandes ou balises (tag en anglais). Ces
commandes permettent d’insérer un objet (une image, une vidéo, un lien,…) de mettre en forme le
texte (Titre, caractère gras, italique, ...).
Les commandes HTML ont une marque de début et une marque de fin.
Certaines marques de fin sont facultatives.
Les commandes HTML utilisent les caractères < et > comme délimiteurs.
<balise atribut_1="valeur_1" atribut_2="valeur_2" atribut_n="valeur_n" > …. </balise>
Voici l'exemple d'une structure de document HTML :
<HTML>
<HEAD>
<TITLE>Exemple de structure de document HTML</TITLE>
<META NAME="Author" CONTENT="Nabeledi">
</HEAD>
<BODY>
...
... Le document HTML
...
</BODY>
</HTML>
<HTML> …</HTML>
Commandes de début et de fin du document HTML .
<HEAD> …</HEAD>
Informations non affichées concernant le document .
<TITLE>…</TITLE>
Titre du document. Cette information apparaît dans la barre de titre du client WWW.
<META ...>
Situées dans l'en-tête de votre page HTML, ces commandes guident les moteurs de recherche
pour indexer votre page .
<BODY>… </BODY>
Corps du document. Toutes les informations affichées par le client WWW y sont contenues.
1.4. Extension des fichiers html
Le nom que vous donnez à vos fichiers HTML est libre, si ce n'est qu'il est limité à 8 caractères
sous DOS et Windows 3.x.
Lorsque vous enregistrez vos fichiers HTML, il faut leur donner une extension ; Cette extension est
".html", ou ".htm".

___________________________________________________________________________________
II. LES META BALISES
2.1. utilité
Un site web qui vit, qui bouge, c'est un site qui a de l'affluence et qui interagit avec l'internaute.
Pour cela, faut-il encore qu'on tombe sur le site en question ! Et là, y'a pas de secret : seul un très
bon référencement pourra vous permettre d'attirer à vous tous ceux qui se baladent sur le web.
Mais comme la plupart des outils de recherche sur Internet sont des moteurs de recherche
d'indexation automatique comme AltaVista ou Google , il faut préparer à l'avance ses pages à
l'arrivée des robots de ces moteurs de recherche.
Car lorsqu'on soumet l'adresse de son site à un moteur, celui-ci l'enregistre puis envoie des
"robots" aller se balader sur vos pages et enregistrer les informations contenues dans les meta
balises que vous aurez préalablement placé entre les balises <HEAD> et </HEAD> de votre code
HTML. Grâce à ces balises vous pouvez commander les robots mais aussi influencer le navigateur.
Les commandes META sont situées dans l'en-tête de votre page HTML et guident les
moteurs de recherche pour indexer votre page.
Il existe deux types de commande META :
<META NAME="paramètre" CONTENT="Attribut">
<META HTTP-EQUIV="paramètre" CONTENT="Attribut">
2.1.1. Des infos sur vous
Il serait très intéressant de tomber sur votre site web rien qu'en tapant votre nom à partir d'un
moteur de recherche, hein, avouez le ! Et bien l'attribut Author vous concerne :
<META NAME="Author" LANG="fr" CONTENT="Prénom NOM">
La propriété LANG spécifie la langue que vous utilisez dans vos pages.
Et tant que vous y êtes, si vous êtes aussi le publieur, c'est-à-dire si c'est une page perso et non un
site commercial destiné à un client (vous travaillerez alors pour une société), l'attribut Publisher
vous revient de droit :
<META NAME="Publisher" CONTENT="Prénom NOM">
Et pour qu'on puisse vous écrire, indiquez aussi votre adresse électronique :
<META NAME="Reply-to" CONTENT="Insérez ici votre adresse électronique et entre parenthèses vos
prénom et nom.">
Exemple :
<META NAME="Author" LANG="fr" CONTENT="Nabeledi Ouattara">
<META NAME="Publisher" CONTENT="Nabeledi">
<META NAME="Reply-to" CONTENT="nabson@fr.st(Nabeledi ouattara)">
2.1.2. Des infos sur votre site
Maintenant, il faut indiquer au moteur de recherche comment orienter les internautes vers votre site
en utilisant les attributs Description et Keywords.
Le premier vous permettra d'écrire une courte description de votre site qui sera affichée si votre site
se trouve dans les résultats d'une recherche :
<META NAME="Description" CONTENT="Ici se trouvera votre courte description.">

___________________________________________________________________________________
Sachez que si votre description est trop longue (plus de 255 caractères), elle sera coupée par le
moteur de recherche.
L'attribut Keywords, toujours comme son nom l'indique, vous permet de dire quels mots clés qui
feront pointer le moteur vers votre site :
<META NAME="Keywords" CONTENT="Ici se trouvera votre liste de mots clés séparés par des
virgules.">
Il est préférable d'indiquer pour moitié des mots clés généraux et pour autre moitié des mots clés
très précis. Enfin, les espaces entre mots clés et virgules ne sont pas indispensables.
Qui ne s'est jamais retrouvé avec des pages sur son disque et ne sachant plus de quel site elles
proviennent ? L'attribut Identifier-URL permet ainsi d'indiquer votre adresse internet. Vos visiteurs
pourront donc tous revenir vous visiter.
<META NAME="Indentifier-URL" CONTENT="Ici se trouvera votre adresse complète.">
Exemple :
<META NAME="Description" CONTENT="Site de vulgarisation des sciences et d'enseignement de la
programmation en Java, PHP et Turbo Pascal 7.0">
<META NAME="Keywords" CONTENT="java, html, unix, linux, php, mysql, php5">
<META NAME="Indentifier-URL" CONTENT="http//www.nabeledi.com/">
2.1.3. Des infos sur la création
Il est toujours intéressant d'indiquer les copyrights respectifs (auteur, publieur, graphistes,
société...) grâce à l'attribut du même nom : Copyright
<META NAME="Copyright" CONTENT="Indiquez ici les copyrights.">
De plus, il est de coutume d'indiquer quels ont été les outils de développement du site tels que les
logiciels de traitement d'image, les navigateurs, etc... avec le paramètre Generator :
<META NAME="Generator" CONTENT="Listez ici à la façon des mots clés les différents logiciels
utilisés.">
Vous pouvez aussi indiquer la date de création ou de mise en ligne de votre page avec l'attribut
Date :
<META NAME="Date" CONTENT="Inscrivez ici la date de création de votre page.">
Il vous est également donné la possibilité de spécifier le type MIME et le code ASCII utilisé grâce à
l'attribut Content-Type. Celui-ci indique l'alphabet latin contenant les accents (utilisé pour le
français) :
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
Exemple :
<META NAME="Copyright" CONTENT="© 1999 Nabeledi">
<META NAME="Generator" CONTENT="HomeSite v1.2,Paint Shop Pro 5.0,Animation Shop,Netscape
Communicator 4.0">
<META NAME="Date" CONTENT="Mon, 18 Sep 2009 08:00:00">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
2.1.4. Orienter les robots
Si vous désirez que le robot indexe toutes les pages de votre site c'est-à-dire toutes celles vers
lesquels vous avez placé des liens, utilisez la propriété All :
<META NAME="Robots" CONTENT="All">
Si par contre votre site est encore en construction ou en rénovation et que vous ne désirez pas qu'il
soit indexé dès maintenant, vous pourrez en interdire l'accès aux robots grâce à l'attribut None.

___________________________________________________________________________________
Avec Index, votre page sera indexée aussitôt. Tandis que si vous mettez Noindex, elle ne sera pas
indexée. Si le robot rencontre Follow, les destinations des liens sont indexées. Mais si vous écrivez
Nofollow, le robot ne gardera pas mémoire de vos liens. Avec Noimageindex, les images d'une
page déjà indexée ne le seront pas. Et freesurvey empèche de suivre les liens pointant vers les
images. Vous pouvez bien entendu combiner ces syntaxes.
Vous pouvez aussi demander aux robots de réindexer automatiquement votre site après n jours :
<META NAME="Revisit-after" CONTENT="n">
Exemple :
<META NAME="Robots" CONTENT="Index, Follow">
<META NAME="Revisit-after" CONTENT="15">
2.1.5. Le rafraîchissement et la redirection
Pouvoir faire recharger une page périodiquement peut s'avérer très utile surtout si l'on affiche des
bannières publicitaires, afin d'en changer souvent. Ainsi, il est possible d'ordonner au navigateur de
recharger une page toutes les n secondes grâce à l'attribut Refresh :
<META HTTP-EQUIV="Refresh" CONTENT="n">
On peut même stipuler le chargement d'une page différente, très utilise lorsqu'on change
d'hébergeur afin de rediriger le navigateur vers un autre site :
<META HTTP-EQUIV="Refresh" CONTENT="n; URL=Mettrez ici l'URL souhaitée">
Exemple :
<META HTTP-EQUIV="Refresh" CONTENT="60; URL=http://www.nabson.fr.st/">
2.1.6. Faire la loi aux caches
Vous pouvez interdire aux navigateurs de conserver en mémoire-cache vos pages :
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
2.1.7. Date d'expiration
Vous savez qu'il existe des ordinateurs qui, pour faciliter l'accès aux pages web, conservent dans
leurs disques durs les pages déjà visitées et donc susceptibles d'être redemandées. Ainsi,
lorsqu'on accède à une seconde reprise au même site, on a des chances de retomber sur les
mêmes pages déjà visitées. Ainsi, lorsqu'on veut empêcher cela, on indique une date d'expiration
qui, si elle est dépassée, ordonnera au proxy d'aller récupérer les vrais pages et de supprimer
celles expirées. Attention, la date est au format anglophone :
<META HTTP-EQUIV="Expires" CONTENT="Mon, 30 Jun 1999 14:30:00">
2.1.8. Mettre un cadre par défaut
Si vous utilisez des frames et que vos liens pointent tous ou presque vers un cadre précis, il est
intéressant de le spécifier comme cadre par défaut :
<META HTTP-EQUIV="Window-TARGET" CONTENT="votre cadre">
2.2. Récapitulatif
Ce récapitulatif ne traite que des Meta les plus utilisés.
2.2.1. <META NAME="paramètre" CONTENT="Attribut">
paramètre attribut description

___________________________________________________________________________________
author nom de l'auteur désigne l'auteur de la page
copyright
informations de
copyright
informations concernant les droits d'auteur.
description
la description de
votre page
Utilisé par les moteurs de recherche.
La description de votre page apparaîtra lors de l'affichage du
résultat de recherche.
keywords
mot-clef-1, mot-
clef-2, etc
Utilisé par les moteurs de recherche.
Votre page sera accessible grâce aux mots-clefs choisis par
vos soins (maximum de 1000 caractères). Les mots-clefs sont
séparés par des virgules. Vous pouvez utiliser plusieurs
langues en indexant les mots en français, en anglais, etc ... par
exemple : "biologie, biology".
robots "all" ou "none" indique aux robots d'indexer ou non cette page
2.2.2. <META HTTP-EQUIV="paramètre" CONTENT="Attribut">
paramètre attribut description
refresh x; URL="adresse"
rafraîchit votre page toutes les "x" secondes.
Si URL est absent c'est cette même page qui est rafraîchie.
Si URL existe alors la page change indiquée dans
URL="adresse".sera chargée.
Ceci permet de constituer un diaporama.
expires
"never" ou "date
d'expiration"
permet aux robots d'indexer la page

___________________________________________________________________________________
III. LES TABLEAUX
3.1. Généralités
Usuellement un tableau est constitué de lignes et de colonnes.
En HTML :
1 Un tableau est un conteneur <table>,
2 Un tableau est constitué de lignes <tr> (pour table row),
3 Un tableau est constitué de cellules<td> (pour table data).
Le tableau se défini grâce à la balise <TABLE> qui doit absolument être refermée : </TABLE>. Les
navigateurs internet chargent d'abord entièrement le tableau avant de l'afficher, c'est pourquoi il ne
faut surtout pas oublier de refermer la balise <TABLE>.
Il est également important de ne pas mettre en ligne des tableaux trop volumineux, préférez
toujours plusieurs petits tableaux plutôt qu'un seul très gros et long à charger.
Apres la balise <TABLE>, il faut commencer par ouvrir une balise <TR> pour commencer une ligne
et la refermer </TR> pour terminer la ligne. Mais cela ne suffit toujours pas à la création d'un
tableau car il faut également définir les colonnes. Et là, c'est un peu moins facile puisqu'il faut
insérer entre les balises lignes autant de couple (<TD>, </TD>) qu'il y a de colonnes. Le couple
<TD> et </TD> correspond à la colonne. A l'intérieur d'une ligne (couple <TR>, </TR>), il faut
placer autant de couples <TD> </TD> qu'il y a de colonnes dans le tableau. Attention ! il faut donc
mettre un même nombre de colonnes dans chaque ligne.
Un tableau peut contenir du texte, des images, des vidéos, des formulaires, d’autres tableaux...
Presque toutes les balises HTML peuvent êtres incluses dans une cellule.
Il est également possible de fournir une légende au tableau avce la balise <caption>
3.2. Les éléments d'un tableau
3.2.1. La balise <table>
La notion de table étant complexe, le nombre d'attributs de cette balise est important. En voici
quelques uns.
Attribut Effet Valeur
Width largeur du tableau
une longueur, qui peut s'exprimer en nombre de
pixels ou en pourcentage de la largeur de la
fenêtre du navigateur
heigth Hauteur du tableau
une longueur, qui peut s'exprimer en nombre de
pixels
border épaisseur de la bordure extérieure en pixel (par défaut, 0, sans bordure)
cellspacing marge entre cellules consécutives en pixels
cellpadding
marge entre le bord et le contenu de
la cellule
en pixels
Align
position du tableau dans la fenêtre.
Cet attribut est obsolète en
HTML 4.01 strict.
center
left
right
bgcolor
couleur de fond du tableau. Cet
attribut est obsolète en HTML 4.01
nom de couleur ou triplet RGB

___________________________________________________________________________________
strict.
background Image d’arrière plan du tableau url de l’image
Par défaut la taille du tableau s'ajuste à son contenu. C'est cette gestion particulière de la taille qui
fait du tableau un moyen très utile de présentation.
3.2.2. La balise <caption>
Cette balise est facultative, et ne peut être présente qu'une seule fois dans le tableau. Son rôle est
de lui donner une légende.
Elle possède un attribut principal align, qui gère son alignement relativement au tableau. Cet
attribut est obsolète en HTML 4.01 strict.
3.2.3. Les lignes: la balise <tr>
Les principaux attributs de cette balise sont les attributs d'alignement des cellules (valign, align),
ainsi que l'attribut bgcolor, dont la fonction est de spécifier la couleur de fond de la ligne. Mais ce
dernier attribut est obsolète en HTML 4.01 Strict.
Cette balise permet de définir une ligne dans le tableau. Elle peut contenir une ou plusieurs balises
<th> ou <td>.
3.2.4. Balises <td> et <th>
Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, <th> doit
être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table Header).
Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les <div> et les <p>.
Attribut Effet Valeur(s)
Abbr fournit un abrégé du contenu de la cellule une chaîne de caractères
Axis
indique à quelle catégorie appartient la
cellule (voir sur le site du W3C pour
plus d'informations sur l'utilisation de cet
attribut dans la structuration du contenu
d'un tableau).
une chaîne de caractères
headers
renvoi à (aux) l'identifiant(s) de la cellule
"header" associée. Cela permet à un
agent vocal de présenter le type de
contenu de la cellule avant le contenu
proprement dit.
une liste d'indentifiants (séparés par des
espaces)
Scope
indique quel est le jeu de cellules auquel
la cellule "header" courante s'applique
row : s'applique à la ligne courante
col : s'applique à la colonne courante
rowspan
nombre de lignes concernées par la
balise courante (fusion de lignes)
un nombre. La valeur par défaut est 1.
colspan
nombre de colonnes concernées par la
cellule courante (fusion de colonnes)
un nombre. La valeur par défaut est 1.
Align alignement horizontal
left (valeur par défaut)
right
center
justify
char : l'alignement se fait sur un caractère
particulier

___________________________________________________________________________________
Valign alignement vertical
top : alignement en haut de la cellule
middle : alignement au milieu de la cellule
(valeur par défaut)
bottom : alignement en bas de la cellule
baseline : alignement sur la ligne du bas
de la cellule
nowrap
empêche le retour à la ligne automatique
dans les cellules quand le bord de la
fenêtre du navigateur est atteint.
Obsolète en HTML 4.01 strict.
valeur unique : nowrap
bgcolor
couleur de fond de la cellule. Cet attribut
est obsolète en HTML 4.01 strict.
nom de couleur ou triplet RGB
width
largeur de la cellule. Cet attribut est
obsolète en HTML 4.01 strict.
nombre de pixels ou pourcentage
height
hauteur de la cellule. Cet attribut est
obsolète en HTML 4.01 strict.
nombre de pixels ou pourcentage
3.3. Remarques
3.3.1. Cellules vides
Un conteneur vide <td></td> crée un emplacement vide alors qu'un conteneur contenant un
espace insécable <td> </td> crée une cellule vide.
3.3.2. Tableaux imbriqués
Un tableau peut en contenir un autre qui peut en contenir un autre qui... Il n'y a pas de limitation.
3.3.3. Des tableaux pour la présentation
Créés au départ pour présenter des tables de données, les tableaux sont très vite devenus un
moyen efficace de présentation claire et ordonnée. Ils permettent, par exemple, de faire de manière
souple du multicolonnage. De nombreux sites les utilisent,
Néanmoins, les performances des navigateurs les plus récents avec les feuilles de style rendent
cette utilisation des tableaux obsolète au profit des balises <div> </div>.

___________________________________________________________________________________
IV. LES CADRES
4.1. Fonction
Les cadres (frames dans la terminologie anglo-saxonne) découpent la fenêtre principale en autant
de petits cadres, chacun d'eux jouant le même rôle qu'une fenêtre : document HTML propre, barres
de défilement indépendantes...
Ces frames peuvent être chargés de manière totalement indépendante : un cadre sera modifié et
l'autre maintenu. Ils peuvent interagir entre eux : un choix dans un premier cadre pourra provoquer
le chargement d'une nouvelle page dans un deuxième.
4.2. Avantages/Inconvénients
Les cadres permettent de créer rapidement une mise en page simple pour un site. L'utilisation
classique consiste ainsi à présenter sur un cadre à gauche une liste de liens vers les différentes
parties d'un site, qui s'affichent dans la fenêtre principale au centre. Cela facilite de plus la
maintenance des différentes pages.
Cependant, les moteurs de recherche indexent les pages à l'intérieur des cadres autant que les
autres. Il y a donc un risque pour qu'une page indexée de la sorte soit "orpheline", et ne donne pas
accès au reste du site. Plus généralement, une telle page ne se suffit souvent pas à elle-même (il y
manque parfois les outils de navigation à l'intérieur du site). Enfin, la présence de cadres
s'accompagne souvent de celles de barres de défilement horizontales.
4.3. Structure de la page HTML
4.3.1. Un nouveau type de document
Nous avions déjà rencontré les déclarations de type de document suivantes :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
L'appel à des cadres ne peut se faire qu'à l'aide de balises qui nécessitent une troisième forme de
déclaration :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd" >
Ce type de document étant une extension de la recommandation HTML Transitionnel, les balises
de présentation sont également acceptées, même s'il vaut mieux éviter de faire appel à elles.
Remarque
Ces appels sont facultatifs
4.3.2. Le squelette d'une page-cadre
Une page destinée à recevoir plusieurs cadres a une structure légèrement différente d'une page
"habituelle". Cette dernière, on s'en souvient, possède la structure suivante...
<html>
<head>
<title>Premiers pas</title>
</head>
<body>
(contenu de la page)
</body>
</html>

___________________________________________________________________________________
Cette fois-ci, la balise <body> est remplacée par la balise <frameset> :
<html>
<head>
<title>Premiers pas</title>
</head>
<frameset>
(déclarations des cadres)
<noframes>
(page à afficher pour les vieux navigateurs)
</noframes>
</frameset>
</html>
4.3.3. c. La balise <noframes>
L'objectif est d'avertir l'utilisateur d'une vieille version de navigateur qu’il n'a pas accès au contenu
du document. Les auteurs très scrupuleux pourront prévoir un contenu de rechange.
La balise <noframes> est fille de la balise <frameset>. Un navigateur reconnaissant <frameset>
ignore le contenu du conteneur <noframes>.
4.4. La balise <frameset>
4.4.1. Définition du découpage de la page: les attributs rows et cols
Les attributs rows et cols de la balise <frameset> définissent un quadrillage dont chaque élément
sera un cadre (frame). rows définit le découpage horizontal et cols le découpage vertical.
4.4.2. Jeux de valeurs possibles
Les valeurs peuvent s'exprimer par :
• Par un nombre entier de pixels.
• Par un pourcentage (ex : 20%) de la fenêtre du navigateur : lorsque
l'utilisateur modifie la taille de sa fenêtre, la taille du cadre se modifie en
proportion. Exemple : <frameset cols="20%,50%,30%">
Si la somme ne fait pas 100%, les pourcentages sont ajustés par règle de trois.
• Par le caractère astérisque *. Deux usages sont possibles :
o * peut signifier ce qui reste de libre. Exemple : <frameset
rows="150,*,100">.
o * peut signifier : le facteur multiplicatif nécessaire pour que
l'ensemble soit à la taille de la fenêtre. Exemple : <frameset cols="2*,*,5*">.
De manière générale, si le jeu de paramètres est incohérent, le navigateur trouve toujours un
moyen de les ajuster (en vertu du principe de la marge d'erreur !).
4.4.3. Découpage irrégulier
Le découpage peut ne pas être un quadrillage mais un simple pavage de rectangles. Ce pavage
est obtenu en insérant une nouvelle fois la balise <frameset> à l'intérieur du conteneur
<frameset></frameset>.
La structure de l'exemple est la suivante :

___________________________________________________________________________________
4.4.4. exemples
Il est tout à fait possible d'imbriquer les cadres les uns dans les autres.
cadre1
cadre2
cadre3
<FRAMESET ROWS="50%,25%,25%" COLS="*" BORDER="1"
FRAMEBORDER="yes" FRAMESPACING="5”>
<FRAME NAME=”cadre1” SRC=”intro.htm” SCROLLING=”yes”>
<FRAME NAME=”cadre2” SRC=”../developpement.htm”
scrolling=”no” NORESIZE=”NORESIZE”>
<FRAME NAME= ”cadre3” SRC= ”http ://www.nabeledi.net”>
</FRAMESET>
Som-
maire
cadre1
cadre2
<FRAMESET COLS= ”30%,70%”>
<FRAME NAME= ”sommaire ” SRC= ”sommaire.htm”>
<FRAMESET ROWS= ”50%,50%”>
<FRAME NAME= ”cadre1” SRC= ”intro.htm”>
<FRAME NAME= ”cadre2” SRC= ”article1.htm”>
</FRAMESET>
</FRAMESET>
Menu primaire
Som-
maire
Article
<FRAMESET ROWS= ”15%,* ”>
<FRAME NAME= ”menu” SRC= ”menu0.htm”>
<FRAMESET COLS= ”30%,* ”>
<FRAME NAME= ”sommaire” SRC= ”sommaire.htm”>
<FRAME NAME= ”article” SRC= ”article1.htm”>
</FRAMESET>
</FRAMESET>
A noter qu’il n’est pas indispensable de donner des noms à tous les cadres. Ainsi ceux vers
lesquels aucun lien n’ira jamais pourraient très bien ne porter aucun nom. Par contre ce nom est
absolument obligatoire pour le ou les cadre(s) vers lesquels des liens pointent leur destination.
4.5. La balise <frame>
4.5.1. Utilisation de la balise
Il doit y avoir autant de conteneurs <frame> qu’il y a de régions définies dans la balise <frameset>.
L’ordre est imposé de gauche à droite, puis de haut en bas (voir les numérotations des régions
dans les exemples précédents).
4.5.2. Les attributs
src
URL du document à charger
initialement dans le cadre.
Une URL. Facultatif, le chargement peut avoir
lieu plus tard.
Name Nom du cadre.
Une chaîne de caractères. Obligatoire si son
contenu doit être modifié après le chargement
initial. Répond à l’attribut target de l’appel de
lien <a>.
longdesc
Renvoie vers un fichier contenant
une « longue » description du
contenu de la fenêtre.
Une URL.
Frameborder Présence d’une bordure de 1 (présence) ou 0 (absence). Valeur par défaut

___________________________________________________________________________________
séparation entre les cadres.
Reprendre le premier exemple.
1.
Marginwidth,
marginheight
Marge entre le contenu et le bord
du cadre.
Un nombre de pixels.
Noresize
Gère le redimensionnement du
cadre.
Si noresize= ”noresize”, l’utilisateur ne peut
pas redimensionner le cadre.
Scrolling
Gère l’apparition des barres de
défilement.
Yes : le navigateur crée toujours des barres.
No : les barres sont interdites.
Auto : le navigateur crée des barres si besoin.
Valeur par défaut.
4.6. La balise <iframe>
4.6.1. Utilisation de la balise
Il ne s’agit plus du quadrillage de la fenêtre du navigateur de la balise <frameset> mais d’une petite
lucarne insérée dans le document HTML. Le document lui-même garde la structure habituelle :
entête (<head>) et corps (<body>).
Il s’agit de définir à l’intérieur d’une page HTML contenant du texte, des images… un cadre local
(ou des cadres, à loisir) à l’intérieur duquel s’affichera le contenu d’une autre page HTML. La balise
associée est <IFRAME>.
4.6.2. Les attributs
src
URL du document à charger initialement
dans le cadre.
Une URL. Facultatif, le chargement
peut avoir lieu plus tard.
Name Nom du cadre.
Une chaîne de caractères. Obligatoire
si son contenu doit être modifié après
le chargement initial. Répond à
l’attribut target de l’appel de lien <a>.
longdesc
Renvoie vers un fichier contenant une
« longue » description du contenu de la
fenêtre.
Une URL.
Frameborder Présence d’un encadrement.
1 (présence) ou 0 (absence). Valeur
par défaut 1.
Marginwidth,
marginheight
Marge entre le contenu et le bord du cadre. Un nombre de pixels.
Scrolling Gère l’apparition des barres de défilement.
Yes : le navigateur crée toujours des
barres.
No : les barres sont interdites.
Auto : le navigateur crée des barres si
besoin. Valeur par défaut.
Align
Détermine la position du cadre par rapport
au texte qui l’entoure. Le cadre peut suivre
le flot du texte ou être enveloppée par ce
texte. Par défaut la valeur est à bottom.
Left (valeur par défaut)
right
top : l’alignement se fait par rapport au
sommet du cadre.
Bottom : l’alignement se fait par
rapport au bas du cadre.

___________________________________________________________________________________
Middle : l’alignement se fait par
rapport au centre du cadre.
Width, height Largeur et hauteur du cadre.
Un nombre de pixels ou un
pourcentage.
4.7. L’attribut target
4.7.1. L’attribut target en HTML Transitionnel
La balise <a> permettant de créer un lien possède en HTML Transitionnel un attribut
supplémentaire, target (” cible ” en anglais), qui permet de spécifier la fenêtre dans laquelle le
document lié doit s’ouvrir.
Target ne peut prendre qu’une seule valeur pertinente possible en HTML Transitionnel, la valeur
target= ”_blank ”. Cela permet d’ouvrir le lien dans une nouvelle fenêtre. Par exemple, <a
href= ”http ://www.nabeledi.net ” target= ”_blank ”> permet d’ouvrir une seconde fenêtre du
navigateur, à l’intérieur de laquelle s’affiche le document spécifié par l’attribut href.
4.7.2. L’attribut target avec des cadres
Par défaut, l’appel de lien par la balise <a href= ”url_source ”> charge la fenêtre courante par le
document désigné par href.
L’attribut target permet de spécifier dans quel cadre (au sens large) va se charger le document. Il
peut prendre quatre valeurs prédéfinies, ou bien une valeur déterminée par l’auteur.
• target= ”_self ” : fenêtre ou cadre d’appel (valeur par défaut).
• target= ”_parent ” : fenêtre ouvrant le <frameset> du <frame>.
• target= ”_top ” : fenêtre entière du navigateur.
• target= ”_blank ” : nouvelle fenêtre.
• target= ”name ” : cadre dont la valeur de l’attribut name est spécifié.

___________________________________________________________________________________
V. FORMULAIRE
5.1. Généralités
Dans les premiers temps du Web, l’information ne circulait quasiment que dans un seul sens : du
serveur vers l’internaute. Il n’existait alors aucun retour de l’utilisateur vers le serveur : l’arrivée des
formulaires a comblé cette lacune. Un formulaire doit recueillir des informations de l’utilisateur, puis
les transférer au serveur, qui à son tour doit les traiter. Or le traitement de cette information sur le
serveur est effectué par des scripts (comprendre « petit programme généralement interprété »)
écrits en langage C, Perl, php ou ASP. Nous sortons ici du cadre de notre cours HTML statique :
nous ne traiterons pas ici le coté traitement-serveur, cette partie est prévue plus tard.
Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer avec leurs lecteurs,
un peu comme les coupon-réponses que l’on trouve dans les magazines. Un formulaire peut servir
à recueillir les avis des visiteurs, leur e-mail en vue d’une newsletter par exemple.
5.2. La balise <form>
5.2.1. Où se place-t-elle ?
Un formulaire débute par la balise <form> (et finit donc par </form>). Ce conteneur contient toutes
les autres balises du formulaire. Il peut contenir aussi d’autres balises html : <p>, <table>, etc.,
permettant la présentation du formulaire.
5.2.2. Attributs
Attributs Effet Valeur(s)
action
URL du script qui
traite les données
recueillies. Cet attribut
est obligatoire.
URL, 2 types possibles :
http : pour un traitement immédiat.
mailto : dans le cas d’un envoi à un courrier électronique, en
vue d’un traitement différé.
Method
Indique sous quelle
forme vont être
codées les
informations
envoyées.
Get : valeur par défaut. Les données sont adressées sous la
forme d’une liste de valeurs accolées à l’URL avec
interposition d’un séparateur particulier (point
d’interrogation). Le nombre de caractères doit rester inférieur
à 256. De plus elle ne permet pas d’envoyer les données à
une boîte de courrier électronique. Il est donc préférable
d’utiliser la seconde méthode.
Post : les données sont adressées sous la forme d’une liste
nom/valeur accolées à l’URL mais ici, le script doit lire les
données par défaut afin d’atteindre les véritables données
du formulaires. La forme de cette liste dépend de l’attribut
enctype.
Enctype
Précise la méthode
MIME de codification
de l’envoi. Permet au
serveur d’anticiper sur
l’objet à recevoir et de
prévoir le protocole
d’échange
application/x-www-form-urlencoded : l’envoi se présente
comme une chaîne de caractères formées de couples
nom=valeur sépararés par un &,
nom1=valeur1&nom2=valeur2&nom3=valeur3 (c’est la
valeur par défaut).
Text/plain : le séparateur précédent est remplacé par un
retour chariot. C’est la forme à utiliser pour l’envoi au
courrier électronique.

___________________________________________________________________________________
Multipart/form-data : lorsqu’un fichier est attaché à l’envoi
(<input type= ”file” …>).
Accept
Précise la méthode
MIME de codification
de l’envoi pour un
fichier. Permet au
serveur d’anticiper sur
le fichier à recevoir et
de prévoir le protocole
d’échange
Chaîne de caractères donnant un code MIME reconnu.
Onsubmit
Le code à exécuter
lors de la soumission.
Chaîne de caractères renvoyant vers une fonction script de
traitement (par exemple une fonction JavaScript).
Onreset
Le code à exécuter
lors de la remise à
zéro du formulaire.
Chaîne de caractères renvoyant vers une fonction script de
traitement (par exemple une fonction JavaScript).
Name Le nom du formulaire. Une chaîne de caractères.
Target
Spécifie la cible du
retour après
traitement du serveur
(voir le chapitre sur
les cadres).
Une liste de codage de caractères, séparée par des
espaces.
5.3. la balise <input>
5.3.1. Fonction
Cette balise sert à spécifier comment s’effectue la saisie du formulaire : par cases à cocher,
boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l’aide d’une seule balise :
la balise <input>. C’est son attribut type qui permet de préciser s’il s’agit de cases à cocher,
boutons radio, texte libre…
L’attribut type peut prendre les valeurs suivantes :
• text
• password
• chekbox
• radio
• submit
• reset
• image
• button
• hidden
• file
5.3.2. Attributs généraux
Cette balise possède de nombreux attributs ; certains n’ont une signification que pour un type
donné de champ. Ce paragraphe présente une liste des attributs d’usage général.
Attributs Effet Valeur(s)
name Le nom du champ.
Une chaîne de
caractères.

___________________________________________________________________________________
id
Identifiant du champ (même valeur que le nom) utilisable en
général en JavaScript
Une chaîne de
caractères.
alt Une courte description.
Une chaîne de
caractères.
disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.
accesskey
Définit une touche du clavier permettant d'accéder au champ de
formulaire. La combinaison "ALT+touche" a le même effet que
l'activation du champ.
Touche du
clavier
tabindex Fixe la position de l'élément dans l'ordre séquentiel des tabulations.
Valeur
numérique
entière
onfocus,
onblur
Un script à exécuter quand le curseur est positionné sur le champ
(onfocus), ou bien qu'il le quitte (onblur).
Une chaîne de
caractères.
onchange Un script à exécuter quand contenu du champ a été changé.
Une chaîne de
caractères.
5.3.3. Types de balises <input>
a. Champ de saisie
L'attribut type vaut type="text". La balise permet alors à l'utilisateur de saisir une ligne de texte. Les
attributs utiles pour ce type sont :
• size : un nombre entier, qui définit la taille visible du champ en nombre de
caractères.
• maxlength : un nombre entier, qui définit le nombre maximum de
caractères autorisés.
• value : une chaîne de caractères, qui permet d'afficher un texte par défaut
dans la zone de saisie.
• readonly : un booléen. La modification du contenu n'est pas permise.
L'attribut name est obligatoire pour ce type de champ.
b. Case à cocher
L'attribut type vaut type="checkbox". Les attributs utiles pour ce type sont :
• value : une chaîne de caractères, obligatoire, valeur passée au serveur
(couple nom="valeur") (a plus de sens dans le cas radio suivant).
• checked : un booléen (s'utilise sous la forme checked="checked"). S'il est
activé, la case est cochée par défaut.
c. Bouton radio
L'attribut type vaut type="radio". Outre la présentation (les cases sont rondes et non plus carrées),
il existe une grande différence entre les cases à cocher et les boutons radio : les boutons radio qui
portent le même name s'excluent mutuellement, le cochage de l'un décoche les autres. Les
attributs utiles pour ce type sont :
• value : une chaîne de caractères, obligatoire, valeur passée au serveur
(couple nom="valeur").
• checked : un booléen (s'utilise sous la forme checked="checked"). S'il est
activé, la case est cochée par défaut.

___________________________________________________________________________________
d. Attacher un fichier
L'attribut type vaut type="file". Il s'agit de donner la possibilité à l'utilisateur du formulaire de joindre
un fichier à son envoi. Les attributs utiles pour ce type sont :
• value : une chaîne de caractères. Nom du fichier à attacher par défaut.
e. Cacher des données
L'attribut type vaut type="hidden". Pourquoi cacher des données ? Il s'agit plutôt de faciliter le
traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL du
formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des données.
Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web. Les attributs
utiles pour ce type sont :
• value : une chaîne de caractères. Valeur cachée à envoyer au serveur,
obligatoire.
f. Mot de passe
L'attribut type vaut type="password". A l'identique que le type text, mais les caractères tapés sont
affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en clair dans le
message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité ne se
limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux du type
text :
• size : un nombre entier, qui définit la taille visible du champ en nombre de
caractères.
• maxlength : un nombre entier, qui définit le nombre maximum de
caractères autorisés.
• value : une chaîne de caractères, qui permet d'afficher un texte par défaut
dans la zone de saisie.
g. Soumettre et mettre à zéro des données
Soumission de données
L'attribut type vaut type="submit". Les attributs utiles pour ce type sont :
• value : une chaîne de caractères. Légende du bouton, par défaut Submit.
Une variante est possible en utilisant le type image : type="image". Le bouton d'envoi
est alors... une image. Les attributs utiles pour ce type sont :
• src : une chaîne de caractères. URL de l'image à utiliser.
Réinitialisation d'un formulaire
L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par défaut
l'ensemble des champs du formulaire. Les attributs utiles pour ce type sont :
• value : une chaîne de caractères. Légende du bouton, par défaut Reset.
5.4. la balise <textarea>
5.4.1. Fonction

___________________________________________________________________________________
Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte
quelconque.
5.4.2. Attributs
Name Nom de l'élément.
Une chaîne de
caractères.
Id
Identifiant (même valeur que le nom) utilisable en général en
JavaScript
Une chaîne de
caractères.
rows et cols
Nombre de lignes et de colonnes de la zone de texte. Ces
attributs sont obligatoires.
Un nombre entier.
readonly La modification du contenu n'est pas permise. Un booléen.
accesskey
Définit une touche du clavier. La combinaison "ALT + touche" a
le même effet que l'activation du champ.
Touche du clavier
tabindex
Fixe la position de l'élément dans l'ordre séquentiel des
tabulations.
Valeur numérique
entière
onfocus,
onblur
Un script à exécuter quand le curseur est positionné sur le
champ (onfocus), ou bien qu'il le quitte (onblur).
Une chaîne de
caractères.
onchange Un script à exécuter quand contenu du champ a été changé.
Une chaîne de
caractères.
Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le texte par
défaut.
5.5. Liste de choix, la balise <select>
5.5.1. Fonctionnement
Les boutons radio et checkbox sont bien mais quand on a un choix à faire entre 36 valeurs
différentes, mieux vaut utiliser les listes déroulantes avec le conteneur <SELECT>
Le conteneur <SELECT> en lui-même ne suffit pas, il faut lui rajouter autant de balise <OPTION>
qu'il y a de choix possibles.
Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un choix. Ce
choix peut être unique ou multiple. Les options possibles sont décrites pour chacune d'entre-elles
dans un conteneur <option> (la balise fermante </option> est obligatoire). Il y a autant de balises
<option> que d'options.
5.5.2. Attributs de la balise <select>
name Nom de l'élément. Une chaîne de caractères.
size Le nombre d'options accessibles. Un nombre.
multiple
Permet à plusieurs options d'être simultanément
sélectionnées.
Un booléen. Par défaut, une
seule option peut être
sélectionnée.
tabindex
Fixe la position de l'élément dans l'ordre séquentiel
des tabulations.
Valeur numérique entière

___________________________________________________________________________________
onfocus,
onblur
Un script à exécuter quand le curseur est
positionné sur le champ (onfocus), ou bien qu'il le
quitte (onblur).
Une chaîne de caractères.
onchange
Un script à exécuter quand contenu du champ a
été changé.
5.6. Autres éléments de formulaire
Les balises présentées dans cette partie sont très peu utilisées. Nous allons nous limiter aux
balises <label> et surtout <button>, mais il existe aussi <fieldset> et <legend>.
5.6.1. La balise <label>
a. Fonction
Cette balise permet d'associer à un élément de formulaire des informations relatives à son
contenu ; cette information est utile notamment pour les navigateurs destinés aux mal-voyants.
b. Attributs
for
Renvoie à l'élément de formulaire spécifié par le même attribut
id.
Une chaîne de
caractères.
accesskey
Touche du clavier
onfocus,
onblur
Une chaîne de
caractères.
5.6.2. La balise <button>
a. Fonction
Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec la
balise <input>, mais <button> permet un plus large choix d'options. Il est malheureusement moins
bien accepté par les "vieux" navigateurs.
b. Attributs
name Le nom du bouton.
Une chaîne de
caractères.
value Valeur envoyée au serveur.
Une chaîne de
caractères.
type Type de bouton.
submit (valeur par
défaut)
button
reset
tabindex
Fixe la position de l'élément dans l'ordre séquentiel des
tabulations.
Valeur numérique
entière
accesskey
Touche du clavier
onfocus,
onblur
Une chaîne de
caractères.

___________________________________________________________________________________
5.7. Un exemple de formulaire
Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même conseillé pour avoir
une mise en page soignée). Voici un exemple récapitulant les points ci-dessus et montrant
comment mettre en page un formulaire à l'aide d'un tableau:
<FORM method=post action="exo.php">
Enregistrement d'un utilisateur
<TABLE BORDER="0">
<TR>
<TD width="87">Nom</TD>
<TD width="240">
<INPUT type=text name="nom"> </TD>
</TR>
<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom"> </TD>
</TR>
<TR>
<TD>Sexe</TD>
<TD> Homme :
<INPUT type=radio name="sexe" value="M">
F
emme :
<INPUT type=radio name="sexe" value="F"> </TD>
</TR>
<TR>
<TD>Loisirs</TD>
<TD>
Echecs :
<input type="checkbox" name="echec" value="1">
Natation:
<input type="checkbox" name="natation" value="1">
Foot :
<input type="checkbox" name="foot" value="1">
</TD>
</TR>
<TR>
<TD>Fonction</TD>
<TD>
<SELECT name="fonction">
<OPTION VALUE="enseignant">Enseignant</OPTION>
<OPTION VALUE="etudiant">Etudiant</OPTION>
<OPTION VALUE="ingenieur">Ingénieur</OPTION>
<OPTION VALUE="retraite">Retraité</OPTION>
<OPTION VALUE="autre">Autre</OPTION>
</SELECT> </TD>
</TR>
<TR>
<TD>Commentaires</TD>
<TD>
<TEXTAREA rows="3" name="commentaires">
Tapez ici vos commentaires</TEXTAREA> </TD>
</TR>
<TR>

___________________________________________________________________________________
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer"></TD>
</TABLE>
</FORM></FORM>
Voici le résultat de ce code HTML
Enregistrement d'un utilisateur
5.8. Récapitulatifs des balises
Balise Attribut Valeur Résultat Effet Visuel
<FORM> ... </FORM>
METHOD
POST
GET
ACTION
envoie à l'adresse
indiquée
ENCTYPE
spécifie le type de codage
utilisé
<INPUT>
TYPE
Submit
effectue l'ACTION dans le
balise <FORM>
Envoyer
Text
simple ligne de texte dont
la longueur
est donnée par l'attribut
size
Reset
efface le contenu du
formulaire
Rétablir
Radio bouton radio
Checkbox case à cocher
NAME Nom
SIZE Taille du texte
<TEXTAREA> ... NAME Zone de texte

___________________________________________________________________________________
</TEXTAREA> ROWS
COLS
<SELECT>
<OPTION> ...
</OPTION>
</SELECT>
NAME Choix 1
MULTIPLE Plusieurs choix possibles
Choix 1
<OPTION> ...
</OPTION>
SELECTED
Option par
défaut
Choix 1
Choix 2
Choix 3
VALUE Valeur forcée

___________________________________________________________________________________
VI. LES IMAGES DANS UNE PAGE WEB
6.1. Généralités
Ce qui suit n'est pas un cours d'infographie mais simplement un panorama de ce qui est
nécessaire à un cours HTML. Nous n'aborderons pas tous les formats d'images ni les moyens de
les créer et les traiter.
6.1.1. Compromis entre nombre d'images et temps de chargement
Les images sont incontournables pour créer un impact visuel mais insupportables pour le temps de
chargement. Il n'y a rien de plus fastidieux que de lire un texte sans illustration. L'illustration et
l'image bien utilisées, permettent de structurer le document présenté. Elles le rendent attrayant,
accessible, lisible. L'emploi d'images est incontournable pour construire une page Web qui
retiendra son lecteur.
En revanche, les images qui doivent être téléchargées ont une certaine taille, qui augmente
d'autant le temps de chargement d'une page.
6.1.2. Les formats d'image
Trois formats principaux sont acceptés par la plupart des navigateurs.
a. Format GIF, GIF pour Graphic Interchange Format.
L'entreprise CompuServe Information Service et Unisys ont produit deux versions : 87a et 89a
(année de création). La dernière est la plus avantageuse et la plus repandue. Elle ne tolère pas
plus de 256 couleurs (2^8).
C'est un format de compression sans perte, qui est très utilisée pour le stockage et le transfert
d'images. Son mode de compression est particulièrement adapté à la création d'images simples,
des schémas avec des traits ou de larges zones de couleurs.
Il existe une méthode d'encodage particulière, appelée interlacing (GIF entrelacé), où l'image est
transférée en quatre passes au lieu d'une et qui permet donc au lecteur d'avoir un aperçu
progressif de l'ensemble de l'image globale (si l'utilisateur dispose d'un navigateur ancien, il ne
verra pas de différence !). Il faut noter qu'il n'y a pas vraiment augmentation de la vitesse de
transfert, mais lisibilité de l'image globale plus rapide. Cette différence n'apparaît d'ailleurs que la
première fois que le lecteur charge l'image si le navigateur a son propre cache (sinon raffraîchir
l'affichage de la page).
Le format gif89a permet de rendre une couleur transparente ; il est alors possible de la superposer
à un arrière-plan.
b. Format JPEG, JPEG pour Joint Photographic Experts Group.
Comme son nom l'indique, JPEG a été développé pour les images photographiques. Ce format
convient aux images obtenues à partir de scanner ou d'un appareil photo numérique. Mais il est
déconseillé pour les schémas et les bannières. Créé en 1990 pour s'affranchir des limitations du
format GIF, il compense le maintien des couleurs (jusqu'à seize millions) par une perte de la qualité
de l'image et un temps de décompression assez important. Cette perte de qualité affecte surtout
les schémas.
Il existe également un JPEG progressif (même effet que le gif entrelacé), malheureusement peu de
navigateurs actuellement l'affichent.
c. Format PNG , pour Portable Network Graphics.
Il s'agit d'un nouveau format libre de tous droits, qui devrait supplanter GIF. (source
http://www.libpng.org/pub/png/pngcode.html).
Le format PNG présente les propriétés suivantes :

___________________________________________________________________________________
o Transparence ; alors que cette transparence est limitée à une seule
couleur pour le GIF (une seule combinaison RGB), le format PNG utilise
un quatrième paramètre, dénommé alpha. Il permet d'appliquer un effet
de transparence progressive à une gamme de couleurs.
o Progressivité (entrelacement ou interlacing)
o Image 24 bits d'information par pixel pour créer les couleurs
(chaque pixel contient 256 nuances de rouge, de vert et de bleu. Une
image 24 bits peut ainsi comporter jusqu'à 16,7 millions de couleurs).
Cette capacité peut monter à 48 bits par pixel.
o La compression PNG est habituellement 25% meilleure que la
compression GIF.
Tous ces avantages sont développés par le consortium du W3C : http://www.w3.org/TR/PNG-
Rationale.html.
6.2. La balise <img>
6.2.1. Usage
La balise <img> est le moyen le plus simple d'insérer une image dans une page Web mais on
pourra aussi lui préférer la balise <object> qui est d'un usage beaucoup plus général et qui permet
d'insérer d'autres objets multimédia.
6.2.2. Syntaxe
La balise fermante est facultative : de fait elle est toujours omise.
<IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur"
ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement"
HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">.
La syntaxe minimale est :
<img src="adresse_de_l'image">
L'attribut src comme SouRCe attend pour valeur une URL relative ou absolue de l’image à inserer.
6.2.3. Attributs
Src où trouver l'image à afficher. Cet attribut est requis.
une URL (relative ou
absolue).
Alt
donne une courte description texte de l'image, qui
peut s'afficher fugacement au survol de la souris.
une chaîne de
caractères.
longdesc
Renvoie vers un fichier contenant une "longue" description de
l'image. Permet d'améliorer l'accessibilité en offrant aux
malvoyants la possibilité de consulter une description
détaillée d'une image riche en information.
une URL
width et
height
Largeur et hauteur réservées par le navigateur pour l'image
dans la page Web. Permet de réserver cette place même si
l'image n'est pas encore chargée. Par défaut ces valeurs sont
celles de l'image (voir paragraphe suivant).
nombre de pixels ou en
pourcentage de la
fenêtre du navigateur.
align
Détermine la position de l'image par rapport au texte qui
l'entoure. L'image peut suivre le flot du texte ou être
right

___________________________________________________________________________________
enveloppée par ce texte. Par défaut la valeur est à bottom.
Cet attribut est obsolète en HTML strict.
top : l'alignement se fait
par rapport au sommet
de l'image.
bottom : l'alignement se
fait par rapport au bas
de l'image.
middle : l'alignement se
fait par rapport au
centre de l'image.
border
épaisseur de la bordure entourant l'image. Par défaut zéro.
On ne peut pas en choisir la couleur. Cet attribut est
obsolète en HTML strict.
un nombre
hspace et
vspace
Définit une marge autour de l'image. hspace définit une
marge à droite et à gauche. vspace définit une marge avant
et après l'image. Cet attribut est obsolète en HTML strict.
un nombre de pixels
Les attributs width et height, même s'ils ne sont pas obligatoires, sont cependant recommandés. En
effet, lorsqu'une image est en chargement dans la fenêtre du navigateur, ils permettent à ce dernier
de réserver la place qu'elle va occuper. S'ils ne sont pas spécifiés, le client attend d'avoir
téléchargé l'image entière pour réserver la place ; cela peut résulter en un changement de
l'apparence d'une page en cours de téléchargement, ce qui n'est pas forcément esthétique.
Remarque :
Le seul attribut obligatoire est SRC, tous les autres sont optionnels.
6.3. Afficher des images
6.3.1. Suivre le chemin
Indiquer au navigateur le chemin à suivre pour trouver un fichier graphique est sans doute une
partie un peu difficile. Mais vous devriez vous en sortir très bien (j'y arrive bien!). Ce que nous
allons voir ici pour les images s'applique aussi aux liens vers d'autres fichiers HTML.
6.3.2. exemples
Pour les exemples, l’on souhaite afficher l’image fichier.gif dans le document texte.html.
Pour chaque exemple nous donnerons le chemin relatif par rapport au fichier texte.html
<IMG SRC="fichier.gif">

___________________________________________________________________________________
<IMG SRC=" images/fichier.gif">
<IMG SRC="repertoireX/images/fichier.gif">
<IMG SRC="../fichier.gif">
<IMG SRC="../../../fichier.gif">

___________________________________________________________________________________
6.4. Les images map ou images cliquables
6.4.1. Présentation
En HTML ou XHTML, on peut faire plusieurs zones de liens sur une seule image. On va ainsi
dessiner des zones et attribuer un lien à chacune d'entre elle.
C'est ce que l'on appelle une "image map" ou image cliquable en français.
6.4.2. Les zones
A une zone réactive est associée une balise <AREA> dont les attributs sont
NAME : le nom de la zone,
SHAPE : le type de zone (cercle, rectangle ou polygone),
COORDS : les coordonnées de la zone (séparées par des virgules),
HREF : l'adresse destination,
ALT : le commentaire qui apparaitra lorsque le curseur de la souris passera sur la zone.
Syntaxe :
<AREA NAME="nom_de_la_zone" SHAPE="type_de_zone" COORDS="coordonnées"
HREF="adresse_destination" ALT="commentaire">
a. Zone circulaire
Une zone circulaire est définie par la balise <AREA SHAPE="circle"> et dont l'attribut COORDS prend
pour valeurs l’abscisse, l’ordonnée à l'origine du centre et le rayon du cercle.
Syntaxe :
<AREA SHAPE="circle" COORDS="x,y,rayon" HREF="destination">
b. Zone rectangulaire
Une zone rectangulaire est définie par la balise <AREA SHAPE="rect"> et dont l'attribut COORDS
prend pour valeurs les coordonnées des coins supérieur gauche et inférieur droit séparées par des
virgules.
Syntaxe :
<AREA SHAPE="rect" COORDS="x1,y1,x2,y2" HREF="destination">
c. Zone polygonale
Une zone polygonale est définie par la balise <AREA SHAPE="poly"> et dont l'attribut COORDS prend
pour valeurs la liste des abscisses et ordonnée à l'origine de chacun des points.
Syntaxe :
<AREA SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4,...x27,y27,x1,y1" HREF="destination">
6.4.3. Comment réaliser une "image map"
<IMG SRC="../../images/fichier.gif">

___________________________________________________________________________________
Nous allons d'abord préciser dans notre balise image que l'on utilise un "map" avec l'attribut
usemap en précisant son nom.
<IMG SRC="adresse_de_l'image" NAME="nom_de_l'image" WIDTH="largeur" HEIGHT="hauteur"
ALT="commentaire" BORDER="épaisseur_de_la_bordure" ALIGN="alignement"
HSPACE="marge_horizonale" VSPACE="marge_verticale" USEMAP="#nom_de_la_carte">.
Exemple
Dans notre exemple nous baptiserons notre map «panneaux».
Notez bien l'ajout d'un dièze (#) avant le nom :
<img src="panneau.gif" width="374" height="162" alt="Orientation" border="0"
usemap="#panneaux"/>
L'image de notre exemple est la suivante :
Nous allons ensuite ajouter une balise <map> avec le nom correspondant. C'est ici que nous
définirons nos zones cliquables. Cette balise peut-être placée n'importe où dans le corps de la
page.
<map name="panneaux">
....
</map>
Enfin nous allons ajouter à notre map autant de balises <area> que nous avons de zones
cliquables.
Pour chacune d'elle nous allons préciser les attributs suivants :
• shape, la forme de la zone cliquable qui peut-être :
- un cercle (shape="circle"),
- un rectangle (shape="rect"),
- un polygone (shape="poly")
• coords, une suite de coordonnées dessinant la forme choisie
• href, le lien vers la page que l'on souhaite afficher lors du click sur la zone
• alt, un text alternatif décrivant la zone cliquable
Nous choisissons de faire 3 zones cliquables sur notre image (tramé ci-dessous) :

___________________________________________________________________________________
Nous aurons donc 3 balises <area> la première étant un rectangle (contact), la 2ème un cercle
(FAQ) et la dernière un polygone (accueil).
Pour dessiner le rectangle, nous allons donner les positions en x (horizontale) et en y (verticale)
du point supérieur gauche, et du point inférieur droit.
Nous aurons donc 4 chiffres pour l'attribut coords :
<area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
Pour dessiner le cercle, nous allons donner les positions en x (horizontale) et en y (verticale) de
son centre, puis son rayon.
Nous aurons donc 3 chiffres pour l'attribut coords :
<area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
Pour dessiner le ploygone, je vais donner les positions en x (horizontale) et en y (verticale) de
tous les points que je souhaite. Il faut au moins 3 points pour dessiner un polygone (un triangle), et
nous pouvons en mettre autant que l'on en souhaite.
Nous aurons donc 6 à N chiffres pour l'attribut coords :
<area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html"
alt="Accueil" />
Notre exemple complet
<img src="panneau.gif" alt="Orientation" width="374" height="162" border="0"
usemap="#panneaux" />
<map name="panneaux" id="panneaux">
<area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
<area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
<area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html"
alt="Accueil" />
</map>
6.4.4. A propos du calcul des coordonnées de nos zones cliquables
Repérer les coordonnées horizontales et verticales de chaque point pour dessiner une forme n'est
pas évident. L'utilisation d'un outil adapté tel Adobe Dreamweaver est alors recommandé. Il va
nous permettre de dessiner directement sur nos images nos zone grâce à une interface adaptée.

___________________________________________________________________________________
VII. LES LIENS HYPERTEXTE
Ecrire des "pages Web", c'est bien ; ne pas les isoler du monde et leur permettre, soit d'être
indexée sur une autre page, soit de mener vers un autre site, c'est mieux. A l'inverse d'un livre, par
exemple, où le plus souvent la lecture se fait de manière linéaire, et ceci à cause de la nature
même du support, le support électronique a permis de développer le concept d'hypertexte.
La lecture n'est plus forcément linéaire ; chaque groupe de mots peut mener à des informations
supplémentaires, ou bien permettre de lancer une application externe, en fonction des besoins de
l'utilisateur. C'est une perspective qu'il ne faut jamais oublier : un lien hypertexte est là pour
introduire une certaine profondeur ou bien pour élargir un champ... et non pour artificiellement
multiplier des pages sur un site !
7.1. Différents types de liens
Les liens hypertextes (ancrages) sont des éléments d'une page HTML permettant aux
internautes de naviguer vers une nouvelle adresse lorsque l'on clique dessus. Ce sont les liens
hypertextes qui permettent de lier des pages Web entre elles. Ils permettent notamment de
naviguer.
Il existe 3 types principaux de liens
a. Liens vers un autre endroit d’un (même) document.
Des liens internes à une page donnée. Lors du fonctionnement de ce lien, le navigateur ne charge
pas une nouvelle page. Le contenu de la fenêtre est simplement ajusté pour que la référence
apparaisse à l'écran
b. Liens vers un fichier HTML d’un même site : liens internes
Des liens pointant vers une autre page d'un même site. Lors du fonctionnement de ce lien, le
navigateur charge une nouvelle page située sur le même serveur. La syntaxe employée sera alors
relative à la page en cours. On parle de lien interne et d'adresse relative.
c. Lien vers une autre ressource externe ou autre machine : liens externes
Des liens pointant vers un autre site. Il va falloir lancer une requête sur l'ensemble de la toile pour
que le serveur qui possède la page ou la ressource demandée puisse l'envoyer via l'Internet, au
client demandeur. On parle de lien externe et d'adresse absolue.
L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante :
<a href="Adresse ou URL"> .. </a>
7.1.1. Liens internes
Pour définir un lien, il faut désigner son départ et son arrivée : c'est la même balise <a> (pour
anchor ou ancre) à l'aide de deux attributs différents (href et name) qui les prend en charge.
a. La Création d’un ancre se fait comme suite
<a name="signet"> ... </a>
b. L'appel d'un signet se fait de la manière suivante :
<a href="#signet"> ... </a>
Il est ainsi possible de permettre à l'utilisateur d'accéder à une section particulière d'une autre page :

___________________________________________________________________________________
<a href="url/nom_du_fichier.html#signet"> ... </a>
7.1.2. Le lien interne et l'adresse relative: URL relative
Les chemins relatifs se traitent comme dans le cas des chemins d’accès aux images
précédemment vus
Remarque importante: privilégier l'adresse relative
Lors de la création d'un site destiné à un seul serveur, tous les liens internes doivent être sous forme
relative. En effet, on développe sur sa propre machine avant de transférer sur le serveur l'ensemble
du site créé. Si les liens internes sont sous forme absolue, ils seront perdus après le transfert : les
noms de répertoires ne seront peut-être pas les mêmes sur le serveur !
De plus, utiliser une adresse relative au lieu d'une adresse absolue permet au routeur de ne pas avoir
à résoudre à chaque requête le chemin vers le serveur. Cette opération prend du temps, rendant ainsi
la page plus longue à charger.
7.1.3. Le lien externe et l'adresse absolue: URL absolue
a. URL: Uniform Resource Locator
C'est-à-dire un "localisateur" (adresse) unifié de ressource. L'URL absolue peut se décomposer en
trois parties, par exemple l'adresse :http://www.nabeledi.com/cours/html/index.html se décompose
en :
protocole adresse du serveur Chemin d'accès sur le serveur
http:// www.nabeledi.com /cours/html/index.html
b. Un protocole
Indique le mode de dialogue utilisé pour communiquer avec la ressource invoquée. Ce peut être :
• http:// Hyper Text Transfer Protocole, pour les pages Web.
• ftp:// File Transfer Protocole pour l'échange de fichiers quelconques.
• news: serveur de news.
• mailto: courrier électronique.
• gopher:// autre mode de parcours de pages web utilisant une recherche
par mot-clé.
• file:// fichier interne, dont l'accès ne nécessite pas l'emploi du réseau
Internet.
c. L'adresse du serveur
C'est l'identifiant du serveur où se trouvent les pages et autres ressources auxquelles l'utilisateur
souhaite accéder. Elle apparaît en général en clair formée de trois parties. On peut trouver aussi
des adresses numériques. Par exemple, 134.157.46.230
d. Un chemin d'accès
Une requête vers un serveur aboutit dans un dossier par défaut (généralement sous Windows NT,
dans le dossier InetPub>wwwroot). Il faut préciser le chemin d'accès (enchâssement des dossiers
et sous-dossiers) du fichier contenant la page Web à afficher.
Les extensions des fichiers contenant des pages HTML peuvent être .htm, .html, .shtml, .asp
(requête base de données sur le serveur) ou .php (idem).

___________________________________________________________________________________
7.2. Quelques attributs de la balise <a>
href
Hypertexte REFerence, désigne l'adresse
à atteindre par le navigateur
valeur de l'attribut name (nom) de l'ancre à
atteindre dans la même page Internet
précédée du caractère #.
name étiquette de l'ancre chaîne de caractères
accesskey
définit une touche du clavier. La
combinaison "ALT + touche" a le même
effet que le clic sur le lien.
touche du clavier
tabindex
fixe la position de l'élément dans l'ordre
séquentiel des tabulations.
valeur numérique entière
target (voir les frames)
title Une rapide description du lien Une chaîne de caractères.
onfocus,
onblur
Un script à exécuter quand le curseur est
positionné sur le lien (onfocus), ou bien
qu'il le quitte (onblur).
L'attribut accesskey est très important si l'on doit prendre en compte l'accessibilité de la page. Il
permet la navigation sans utiliser de souris. De plus, on peut imaginer, sur un site Web, des
fonctionnalités qui sont alors facilement accessibles par une combinaison de touches : envoyer un
courrier électronique avec une combinaison ALT+C, faire une recherche avec le raccourci ALT+R,
etc. De même, l'attribut tabindex permet de faciliter la navigation pour les personnes ne pouvant
que mal maîtriser une souris (les mal-voyants par exemple).
7.3. Lien vers d'autres objets
Le système d'exploitation recherchera de lui-même, selon l'extension du fichier, quelle application
permet de l'exploiter. S'il n'a jamais fait l'association, il proposera à l'utilisateur de l'établir lui-même.
Vous pouvez également proposer un fichier (.EXE ou .ZIP) en téléchargement...
<a href="site.zip"> Téléchargement du site </a>

___________________________________________________________________________________
VIII. MISE EN FORME DE TEXTE
A l'origine, HTML devait décrire la structure du texte sans imposer sa représentation physique qui
devait rester le choix de l'utilisateur et de son navigateur. Ce chapitre va traiter de la mise en forme
du texte
8.1. Titre et sous-titre
Il s'agit ici des titres qui s'afficheront dans la page (et non dans la barre de titre comme la balise
<title> ) : ce sont souvent les en-têtes de sections ou de paragraphes.
Il existe six niveaux de titres d'importance décroissante :
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Exemple :
Niveau de titre Effet en Times New Roman
<h6>Titre de niveau 6</h6>
8.2. Paragraphes
8.2.1. La balise <p>
a. Fonction :
Un paragraphe comme celui que vous lisez est délimité par les balises <p> et </p>. La balise <p>
provoque un saut de ligne avant le paragraphe. Un paragraphe ne peut en contenir un autre (le
navigateur les interprète comme des paragraphes successifs...).
b. Attributs de la balise <p>
Attribut Valeur(s)
align
left (par défaut)
right
center
justify
8.2.2. Rupture de ligne: la balise <br>
a. Fonction :
Force un retour en début de ligne suivante à l'intérieur d'un même paragraphe. La balise fermante
est facultative.
b. Attributs de la balise <br>

___________________________________________________________________________________
clear répartit le texte autour d'une image flottante ou d'un autre objet
all
left
right
8.3. Les balises <div> et <span>
Ces balises jouent un rôle particulier. Elles permettent de découper l'information en unités logiques,
et sont fortement utilisées avec des feuilles de style. Par exemple, on peut scinder un document
HTML avec deux balises <div> en deux parties, une présentant une table des matières, et l'autre
présentant un contenu de cours. La balise <span> permet quant à elle une structuration interne à
un paragraphe.
8.4. La balise <hr>
Destinée à séparer différentes parties d'un document au moyen d'un trait horizontal de longueur et
d'épaisseur variables, et généralement pourvu d'un ombrage. Il s'agit d'un conteneur vide dont la
balise fermante est facultative (et même jamais utilisée en HTML).
Cette balise possède des attributs, mais leur emploi est déconseillé par le W3C :
attribut effet valeur(s)
noshade
suppression de
l'ombrage
booléen, sa présence seule supprime l'ombrage
align alignement
right
center
justify
size épaisseur du trait nombre en pixels
width largeur du trait
en pixels ou en pourcentage de la fenêtre du navigateur (ajouter
le symbole %)
8.5. Mise en forme de la police
8.5.1. Police par défaut
Les navigateurs utilisent par défaut une police proportionnelle : Times Roman sur les Macintosh, et
Times New Roman sur les PC. En tant qu'utilisateur (surfeur !), il vous est possible de modifier
cette police par défaut. Cela rend la tâche des développeurs de site d'autant plus ardue...
8.5.2. La balise <font>
Cette balise est déconseillée, utiliser plutôt les feuilles de style.
Pour écrire en rouge une partie du texte, on écrira par exemple :
<font face="Verdana, Arial, Helvetica, sans-serif" size="5" color="red"> mon exemple </font>
a. L'attribut face :
sa valeur est une liste de polices séparées par des virgules, c'est la première de cette liste
présente sur le navigateur qui sera utilisée. Il est recommandé de spécifier en dernier lieu une
famille de polices dite "générique".
b. L'attribut size :

___________________________________________________________________________________
Il existe 7 tailles, la taille par défaut est 3. On peut spécifier une taille relative à l'aide d'un
incrément signé, par exemple size="+2", size="-1". Toute fois, l’on peut personnaliser au delà des
7 valeurs par défaut la taille en pixel
c. L'attribut color :
A l'aide d'un nom de couleur ou d'un code RGB (voir paragraphe sur la couleur).
d. La balise <basefont>
Elle est à déconseiller. Elle définit la taille du texte du conteneur dans laquelle elle est citée (seul
attribut size).
8.6. Autres balises
La touche "Entrée" (le "retour chariot" du temps des machines à écrire) est codée en ASCII par 13.
Le navigateur ne le considère pas comme un retour à la ligne mais comme un simple séparateur
comme un blanc. Sans demande particulière, le navigateur ignore votre formatage initial.
<PRE> force le navigateur à respecter les retours à la ligne et les blancs consécutifs.
Balise Signification Effet
<em> Emphasis
<strong> Fort
<cite> citation brève
<dfn> Définition
<code> extrait de programme
<samp> sample : échantillon
<kbd> Keyboard(clavier)
<var> variable ou argument
<abbr> Abréviation
<acronym> Acronyme
<sub> subscript/indice
<sup> superscript/exposant
<pre> Preformatted
<b> Gras
<i> Italique
<tt> télétype : police à pas fixe
<big>
taille supérieure à la taille
courante
<small>
taille inférieure à la taille
courante
<s> ou <strike>
<u> underline/soulignement

___________________________________________________________________________________
8.7. Les entités de caractères
8.7.1. Rappel
Il existe plusieurs codifications des caractères : ASCII sous MS-DOS, ANSI sous Windows ; les
Macintosh ont leur propre système et les grosses machines IBM se servent de l'EBCDIC.
8.7.2. Nécessité d'un codage supplémentaire: les diacritiques
Les diacritiques sont les caractères constitués d'une lettre modifiée par un signe particulier :
accent, tréma, cédille comme é, ï, ç etc.
HTML utilise la codification ASCII qui ne comporte aucun caractère accentué. Il faut donc définir
une convention de codage supplémentaire pour faire apparaître ces caractères.
8.7.3. Présentation d'une entité de caractère
Une entité de caractère débute par "&", et finit par ";". Exemple le "é" est codé "é".
Voici une petite liste des principaux diacritiques:
Caractère Abréviation Caractère Abréviation
à à â â
ä ä æ æ
é é è è
ê ê ë ë
ù ù û û
ü ü ö ö
ï ï î î
ç ç œ &oelig;
8.7.4. Les caractères réservés
Les caractères comme "<", ">" et "&" ont une signification spécifique : le caractère inférieur
désigne le début d'une balise, etc. Codés tels quels, le navigateur est incapable de les faire
apparaître. Il a donc fallu leur adjoindre une codification supplémentaire : "<" est codé <, ">" est
codé >, "&" est codé &.
8.8. Codage de la couleur
HTML propose deux façons de coder une couleur :
8.8.1. Par son nom
Il existe une liste de couleurs reconnues par la plupart des navigateurs. Les seize couleurs simples
sont données dans le tableau ci-dessous donné dans la section "Les seize couleurs simples". Il en
existe d'autres aux noms plus poétiques comme :
Cependant, le rendu de ces couleurs dépend parfois fortement du navigateur et de la plateforme
utilisée.
8.8.2. Par le triplet RGB
Toute couleur peut être décomposée en trois couleurs : rouge, vert, bleu (Red, Green, Blue d'où
RGB) d'intensité convenable. Cette intensité est exprimée en un nombre compris entre 0 et 255.
Ce nombre est codé en hexadécimal : il est alors compris entre 0 et FF.

___________________________________________________________________________________
Par exemple, #BA1B85 code une intensité de BA (186) pour le rouge, 1B (27) pour le vert, 85 (133)
pour le bleu qui donne :
8.8.3. Les seize couleurs simples
Voici les seize couleurs de base :
Vous aurez vous même noté la couleur noire (corrigez donc #000000) !
8.9. Listes d'items
8.9.1. Introduction
Les listes d'items sont énormément utilisées sur le web au même titre que dans les documents
électroniques ou manuscrits. Ils permettent d'énumérer des items en les numérotant ou non. Les
listes sont pratiques dans le cadre de sommaires.
8.9.2. Liste simple non ordonnée
Une liste doit être encadrée par le conteneur< UL> et chaque item doit être introduit par la balise
<LI>. Le conteneur provoque une tabulation.
Syntaxe :
<UL>
<LI>item n°1</LI>
<LI>item n°2</LI>
<LI>item n°3</LI>
</UL>
Exemple :
• item n°1
• item n°2
• item n°3
8.9.3. Type de puce
Par défaut, les puces d'une liste non ordonnée sont des disques pleins. On peut les modifier avec
l'attribut TYPE qui peut prendre les valeurs : square (carré plein), circle (cercle), disc (rond plein).

INITIATION_HTML_NAB_2009

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Similaire à INITIATION_HTML_NAB_2009

Similaire à INITIATION_HTML_NAB_2009 (20)

INITIATION_HTML_NAB_2009