Introduction à HTML

Un résumé pour les élèves

HyperText Mark-Up Language

Préparé par Bernard Louissaint, Ingénieur informaticien

Email: masterbenfive@[Link]
Table of Contents
HTML - Définition ................................................................................................................................... 3
Langage HTML ....................................................................................................................................... 3
Versions du langage HTML...................................................................................................................... 3
HTML 3 ................................................................................................................................................ 3
HTML 4 ................................................................................................................................................ 3
HTML 5 ................................................................................................................................................ 3
Balise HTML ............................................................................................................................................ 3
Comment utiliser les balises HTML ? ...................................................................................................... 4
Imbrication des balises .............................................................................................................................. 4
Attribut HTML.......................................................................................................................................... 4
Espaces, saut de ligne et tabulations ......................................................................................................... 5
Commentaires HTML ............................................................................................................................... 5
Notion de document HTML...................................................................................................................... 5
Structure du document HTML .................................................................................................................. 6
Déclaration du type de document.............................................................................................................. 6
Codage des caractères spéciaux ................................................................................................................ 7
Codage des signes HTML propres ............................................................................................................ 9
Qu'est-ce qu'une balise de style ? ............................................................................................................ 10
Niveaux de titre ....................................................................................................................................... 11
Les attributs............................................................................................................................................. 11
Paragraphes ............................................................................................................................................. 11
Espaces.................................................................................................................................................... 11
Retour chariot.......................................................................................................................................... 12
Conteneurs .............................................................................................................................................. 12
Liste HTML ............................................................................................................................................ 12
OL LI : Liste ordonnée ........................................................................................................................... 13
UL LI : Liste non ordonnée .................................................................................................................... 13
DT DD : Liste de définition .................................................................................................................... 13
Attributs .................................................................................................................................................. 13
Tableaux HTML ..................................................................................................................................... 14
Attributs .................................................................................................................................................. 14
Liens hypertextes et ancres – HTML ...................................................................................................... 15

1|Page
 Ancres ..................................................................................................................................................... 15
Lien externe ............................................................................................................................................ 16
Lien local ................................................................................................................................................ 16
Ancres ..................................................................................................................................................... 16
Images en HTML .................................................................................................................................... 16
Comment afficher des images sur une page web ? ................................................................................. 16
Comment afficher des images sur une page web? .................................................................................. 17
Texte enveloppant une image ................................................................................................................. 18
Les images réactives ("images MAP") ................................................................................................... 18
Insérer une image en fond ....................................................................................................................... 19
Intérêt d'un formulaire............................................................................................................................. 23
La balise FORM...................................................................................................................................... 23
A l'intérieur de la balise FORM... ........................................................................................................... 24
Envoi des données................................................................................................................................... 24
La balise INPUT ..................................................................................................................................... 24
La balise TEXTAREA ............................................................................................................................ 25
La balise SELECT .................................................................................................................................. 25
Un exemple de formulaire ...................................................................................................................... 26
Attributs de la balise FORM et types d'entrées ....................................................................................... 27
Balises méta (Méta tags) ......................................................................................................................... 28
Définition ................................................................................................................................................ 28
Métas NAME .......................................................................................................................................... 29
Métas HTTP-EQUIV .............................................................................................................................. 29
Frames - HTML .......................................................................................................................................... 30
Présentation des frames........................................................................................................................... 30
Créer des frames ..................................................................................................................................... 30
Exemple n°1 ........................................................................................................................................ 30
Exemple n°2 ........................................................................................................................................ 30
Exemple n°3 ........................................................................................................................................ 31
Les attributs de la balise <FRAMESET> ............................................................................................... 31
Les attributs de la balise <FRAME> ...................................................................................................... 32
Comment éviter les erreurs avec les navigateurs non compatibles ? ...................................................... 32
Désigner un cadre avec un lien hypertexte ............................................................................................. 33

2|Page
 HTML
HTML - Définition
Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de «
structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec
des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le
document et les liens qu'il établit avec d'autres documents.
Langage HTML
Le langage HTML permet notamment la lecture de documents sur Internet à partir de machines
différentes, grâce au protocole HTTP, permettant d'accéder via le réseau à des documents
repérés par une adresse unique, appelée URL.

Versions du langage HTML

Le langage HTML a été mis au point par Tim Berners-Lee, alors chercheur au CERN, à partir de 1989.
Celui-ci annonça officiellement la création du web sur Usenet en août 1991. Ce n'est cependant qu'à partir
de 1993 que l'on considère l'état du HTML suffisamment avancé pour parler de langage (HTML est alors
baptisée symboliquement HTML 1.0). Le navigateur internet utilisé à l'époque était nommé NCSA
Mosaïc.

Le RFC 1866, daté de novembre 1995 représente la première version officielle de HTML, c'est-à-dire le
HTML 2.0.
HTML 3
Après la brève apparition d'un HTML 3.0, qui ne vit jamais officiellement le jour, le HTML 3.2 devint le
standard officiel le 14 janvier 1997. Les apports les plus marquants du HTML 3.2 étaient la
standardisation des tableaux ainsi que d'un grand nombre d'éléments de présentation.
HTML 4
Le 18 décembre 1997, le HTML 4.0 a été publié. La version 4.0 du langage HTML standardise
notamment les feuilles de style et les cadres (frames). La version HTML 4.01, apparue le 24 décembre
1999 apporte quelques modifications mineures au HTML 4.0.
HTML 5
Le HTML 5.0 est en cours de spécification en 2012. La version 5.0 du langage HTML définit deux
syntaxes de DOM : HTML5 et XHTML5. Cette version apporte de nouvelles possibilités en terme de
création d' « applications Web riches » bénéficiant de l'intégration d'éléments multimédias et
d'interactivité, à l'image de ce que permettent Adobe Flash ou Microsoft Silverlight.

Balise HTML
Le HTML n'est pas un langage de programmation. Il s'agit d'un langage permettant de décrire la mise en page et la forme
d'un contenu rédigé en texte simple.

3|Page
Une page HTML est ainsi un simple fichier texte contenant des balises (parfois appelées marqueurs ou repères ou tags en
anglais) permettant de mettre en forme le texte, les images, etc.

Comment utiliser les balises HTML ?

Une balise est un élément de texte (un nom) encadrée par le caractère inférieur (<) et le caractère
supérieur (>). Par exemple « <H1> ».

Les balises HTML ne sont pas sensibles à la casse, c'est-à-dire qu'elles

peuvent être saisies indifféremment en minuscules ou en majuscules !

Les balises HTML fonctionnent par paire afin d'agir sur les éléments qu'elles encadrent. La première est
appelée « balise d'ouverture » (parfois balise ouvrante) et la seconde « balise de fermeture » (ou
fermante). La balise fermante est précédée du caractère /) :
<marqueur> Votre texte formaté </marqueur>

A titre d'exemple, les balises <b> et </b> permettent de mettre en gras le texte qu'elles encadrent :
<b> Ce texte est en gras </b>

Les balises HTML peuvent parfois être uniques : la balise <br> représente par exemple un retour à la
ligne.

Afin d'être le plus proche possible du standard XHTML (beaucoup plus stricte
que le standard HTML), il est conseillé d'utiliser la notation suivante :
<br />.

Imbrication des balises

Les balises HTML ont la particularité de pouvoir être imbriquées de manière hiérarchique afin de
permettre le cumul de leur propriété. En contrepartie le chevauchement de balises n'est pas toléré par le
standard HTML. Voici un exemple de texte formaté avec des balises imbriquées :
<i><u>Comment ça Marche</u>, encyclopédie informatique libre</i>

L'exemple ci-dessus donne le résultat suivant :

Comment ça Marche, encyclopédie informatique libre

En contrepartie l'exemple ci-dessous n'est pas correct :

<i><b>Comment ça Marche</i>, encyclopédie informatique libre</b>

Attribut HTML

4|Page
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des propriétés
supplémentaires. Les attributs se présentent la plupart du temps comme une paire clé=valeur, mais
certains attributs ne sont parfois définis que par la clé.

Voici un exemple d'attribut pour la balise <p> (balise définissant un paragraphe), permettant de spécifier
que le texte doit être aligné sur la droite :
<p align="right">Exemple de paragraphe</p>

Chaque balise peut comporter un ou plusieurs attributs, chacun pouvant avoir (aucune,) une ou plusieurs
valeurs.

Espaces, saut de ligne et tabulations

Le langage HTML ne tient pas compte des espaces, des tabulations et des sauts de ligne (ci-après appelés)
ou plus exactement il considère une suite d'un ou plusieurs espaces/tabulations/saut de ligne comme une
seule espace. Cela permet notamment d'indenter le code HTML pour plus de lisibilité, sans modifier
l'apparence de la page HTML dans le navigateur.

A noter: il existe une exception pour le code contenu dans des balises
<PRE>, dont l'objectif est justement de conserver le formatage du texte
(espaces, sauts de lignes, etc.) !

Commentaires HTML
Il est possible d'ajouter des éléments d'information dans une page web sans que ceux-ci soient affichés à
l'écran grâce à un jeu de balises spécifique, appelé balises de commentaires.
<!-- Voici un commentaire -->

Les balises de commentaires permettent de mettre en commentaire du texte mais peuvent également servir
à commenter du code HTML.

Notion de document HTML

Une page HTML est un simple fichier contenant du texte formatté avec des balises HTML. Par
convention l'extension donnée au fichier est .htm ou .html, mais une page web peut potentiellement porter
n'importe quelle extension.

Une page web peut être construite à partir du plus basique des éditeurs de texte (une application bloc-note
par exemple), mais il existe des éditeurs beaucoup plus évolués.

Les éditeurs WYSIWYG («What You See Is What You Get», littéralement «ce que vous voyez est ce que
vous obtenez») sont des éditeurs graphiques permettant de travailler sur une page web telle qu'elle sera
affichée sur un navigateur à quelques détails près. Grâce à ce genre d'éditeurs il est possible d'ajouter des
balises par simple clic et d'en modifier les attributs en éditant leur propriétés dans un formulaire. Pour
autant, afin d'utiliser au mieux ce genre d'éditeur, une connaissance préalable du HTML est tout de même
très utile.

5|Page
 Il existe également des éditeurs permettant d'éditer le code HTML en affichant les balises, les attributs et
leurs valeurs avec différentes couleurs pour une meilleure lecture et proposant parfois des outils pour
vérifier la validité du code HTML.

Par convention l'extension donnée à une page HTML est .htm ou .html mais une page web peut
potentiellement porter n'importe quelle extension notamment les suivantes :
 .asp pour une page générée dynamiquement en ASP (Active Server Pages) ;
 .cgi pour une page générée dynamiquement avec des CGI (Common gateway Interface) ;
 .php, pour une page générée dynamiquement en PHP ;
 .pl pour une page générée dynamiquement en Perl (Practical Extraction and Report Language) ;
 etc.

Structure du document HTML

Un document HTML commence par la balise <HTML> et finit par la balise </HTML>. Il contient
également un en-tête décrivant le titre de la page, puis un corps dans lequel se trouve le contenu de la
page.

L'en-tête est délimité par les balises <HEAD> et </HEAD>. Le corps est délimité par les balises
<BODY> et </BODY>.

Voici par exemple une page HTML minimaliste :

<HTML>
<HEAD>
<TITLE>Titre de la page</TITLE>
</HEAD>

<BODY>
Contenu de la page
</BODY>
</HTML>

Déclaration du type de document

Il est conseillé d'indiquer dans la page HTML le prologue du type de document, c'est-à-dire une référence
à la norme HTML utilisée, afin de spécifier le standard utilisé pour le codage de la page. Cette déclaration
se fait par une ligne du type :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>...</HEAD>
<BODY>Contenu de la page</BODY>
</HTML>

La déclaration du document indique la DTD (Document Type Definition) utilisée, c'est-à-dire la référence
des caractéristiques du langage utilisé. Le tableau ci-dessous récapitule les déclarations pour les
principales versions du langage HTML :

6|Page
 Version Déclaration
HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML  Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
4.01 "[Link]
 Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[Link]
 Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"[Link]
XHTML  Strict : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
1.0 "[Link]
 Transitional : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
 Frameset : <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"[Link]
XHTML
1.1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[Link]

Codage des caractères spéciaux

Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués
ne sont pas autorisés. Il faut pour cela utiliser un codage particulier.

Pour coder un caractère accentué, il suffit de saisir une combinaison précédée du caractère & et terminée par un point-
virgule (;). Voici la liste représentations HTML des caractères ASCII de 128 à 255 :

Caractère Code ISO Code HTML

" &#34; &quot;
& &#38; &amp;
€ &#128; &euro;
&#129;
' &#130;
ƒ &#131;
" &#132;
… &#133;
+ &#134;
# &#135;
^ &#136;
‰ &#137;
Š &#138;
< &#139; &lt;
Π&#140;
• &#141;
Z &#142;
&#143;
&#144;
' &#145;
' &#146;
" &#147;
" &#148;
* &#149;

7|Page
- &#150;
-- &#151;
~ &#152;
™ &#153;
š &#154;
> &#155; &gt;
oe &#156; &oelig;
&#157;
z &#158;
Y &#159; &Yuml;
Space &#160; &nbsp;
¡ &#161; &iexcl;
¢ &#162; &cent;
£ &#163; &pound;
¤ &#164; &curren;
¥ &#165; &yen
¦ &#166; &brvbar;
§ &#167; &sect;
¨ &#168; &uml;
© &#169; &copy;
ª &#170; &ordf;
« &#171; &laquo;
¬ &#172; &not;
&#173; &shy;
® &#174; &reg;
¯ &#175; &masr;
° &#176; &deg;
± &#177; &plusmn;
² &#178; &sup2;
³ &#179; &sup3;
' &#180; &acute;
µ &#181; &micro;
¶ &#182; &para;
· &#183; &middot;
¸ &#184; &cedil;
¹ &#185; &sup1;
º &#186; &ordm;
» &#187; &raquo;
¼ &#188; &frac14;
½ &#189; &frac12;
¾ &#190; &frac34;
¿ &#191; &iquest;
À &#192; &Agrave;
Á &#193; &Aacute;
 &#194; &Acirc;
à &#195; &Atilde;
Ä &#196; &Auml;
Å &#197; &Aring;
Æ &#198 &Aelig
Ç &#199; &Ccedil;
È &#200; &Egrave;
É &#201; &Eacute;
Ê &#202; &Ecirc;
Ë &#203; &Euml;
Ì &#204; &Igrave;
Í &#205; &Iacute;

8|Page
Î &#206; &Icirc;
Ï &#207; &Iuml;
Ð &#208; &eth;
Ñ &#209; &Ntilde;
Ò &#210; &Ograve;
Ó &#211; &Oacute;
Ô &#212; &Ocirc;
Õ &#213; &Otilde;
Ö &#214; &Ouml;
× &#215; &times;
Ø &#216; &Oslash;
Ù &#217; &Ugrave;
Ú &#218; &Uacute;
Û &#219; &Ucirc;
Ü &#220; &Uuml;
Ý &#221; &Yacute;
Þ &#222; &thorn;
ß &#223; &szlig;
à &#224; &agrave;
á &#225; &aacute;
â &#226; &acirc;
ã &#227; &atilde;
ä &#228; &auml;
å &#229; &aring;
æ &#230; &aelig;
ç &#231; &ccedil;
è &#232; &egrave;
é &#233; &eacute;
ê &#234; &ecirc;
ë &#235; &euml;
ì &#236; &igrave;
í &#237; &iacute;
î &#238; &icirc;
ï &#239; &iuml;
ð &#240; &eth;
ñ &#241; &ntilde;
ò &#242; &ograve;
ó &#243; &oacute;
ô &#244; &ocirc;
õ &#245; &otilde;
ö &#246; &ouml;
÷ &#247; &divide;
ø &#248; &oslash;
ù &#249; &ugrave;
ú &#250; &uacute;
û &#251; &ucirc;
ü &#252; &uuml;
ý &#253; &yacute;
þ &#254; &thorn;
ÿ &#255; &yuml;

Codage des signes HTML propres

9|Page
Certains caractères ont une signification particulière en HTML, ayant une incidence forte sur le formatage
de la page ; il s'agit des caractères <, >, " et &<ital></ital>. Le caractère < possède une importance
particulière, dans la mesure où il représente pour le navigateur l'ouverture d'une nouvelle balise HTML.

Lorsque ces caractères sont utilisés dans un texte contenu dans une page web, il est donc impératif de les
coder en HTML, au risque sinon de provoquer une erreur d'affichage dans le navigateur.

Caractère Code ISO Code HTML

" &#34; &quot;
& &#38; &amp;
< &#8249; &lsaquo;
> &#8250; &rsaquo;

Notez toutefois que les navigateurs actuels reconnaissent les caractères accentués, ainsi vous pouvez
entrer des caractères accentués directement sous votre éditeur de texte, mais votre page HTML risque
d'être illisible depuis l'étranger ou à partir de certains navigateurs.

Qu'est-ce qu'une balise de style ?

Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans d'autres balises
de style de la même façon qu'on le ferait avec un traitement de texte.
Voici une liste de balises de style reconnues par la plupart des navigateurs (chacun à sa façon si bien que
certains ne font pas la différence entre ces styles).

Balise de style Effet Visuel

<ABBREV> Abréviation
<ACRONYM> Acronyme
<AU> L'auteur
<B> Met la police en gras
<BIG> Police plus grande
<BLINK> Clignote (propre à Netscape)
<CITE> Citation
<CODE> Instruction
<DEL> Texte supprimé mais qui reste présent
<DFN> Définition d'instance
<EM> Emphase
<I> Italique
<INS> Nouveau texte inséré a cet endroit
<KBD> Clavier - Suite de caractères devant être tapés tel quel
<PERSON> Accentuation du nom d'une personne
<Q> Encadre le texte par des guillemets
<S> Comme strike (barré)
<SAMP> Exemple
<SMALL> Police plus petite
<STRONG> Forte accentuation rendue par du gras
<STRIKE> Texte barré (comme S)
<SUB> Texte en Indice
<SUP> Texte en Exposant
<TT> Caractère de machine à écrire
<VAR> Nom d'une variable

10 | P a g e
Niveaux de titre
Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration
hiérarchique des paragraphes dans un texte :

Balise Effet Visuel

H1

H2
Test
Test
H3
Test
H4 Test
H5 Test
H6 Test

Les attributs
Les attributs suivants peuvent être placés dans les balises de structure afin de permettre une disposition
plus précise des éléments HTML :

Attribut Valeur Effet Visuel

ALIGN LEFT Texte aligné à gauche

RIGHT Texte aligné à droite
CENTER Texte centré
JUSTIFY Texte justifié
NOWRAP Interdit au navigateur d'effectuer un saut de ligne.
ID Attribue un identifiant à la balise. Cet attribut est notamment utile pour la programmation en
JavaScript
LANG Spécifie un langage différent
CLASS Assigne une classe au contenu (pour les feuilles de style).
CLEAR Utilisé dans le cas d'un texte entourant une image. Il permet de descendre dans la page aussi
loin qu'il est nécessaire pour atteindre une marge libre
Voici un exemple d'en-tête :
<H1 ALIGN=JUSTIFY> Texte justifié </H1>

Paragraphes
Le langage HTML considère les paragraphes comme des blocs de texte. Les navigateurs répartissent au
mieux leur contenu dans la fenêtre à moins qu'=un attribut NOWRAP ou NOBR soit spécifié
explicitement.

Espaces
A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul espace.

11 | P a g e
 La mise en page par blocs de texte est réalisée par l'intermédiaire de la paire de balises <p> et </p>. Cette
balise accepte n'importe lequel des attributs vus précédemment.

Retour chariot
Le retour chariot (retour à la ligne simple) est réalisé grâce à la balise
<br>

On peut aussi insérer une ligne horizontale grâce à la balise <hr>.

Balise Attribut Effet Visuel

<br> retour à la ligne

<p> et </p> paragraphe
<hr size=5 width=20% align=left> SIZE Séparateur horizontal
WIDTH
ALIGN

Conteneurs
Les balises servant à indenter le texte sont appelées des conteneurs.

Conteneur Effet Visuel

<blockquote> et Texte indenté

</blockquote>
<address> et </address> Pour écrire une adresse
<note> et </note> Permet de rédiger une note
<fn> et </fn> Permet de réaliser une note de fin de page
<banner> et </banner> Fixe un bloc de texte par rapport à la page
<pre> et </pre> Permet d'écrire un texte préformatté en conservant les espaces, les retours à la ligne et
les tabulations.

Liste HTML
Une liste est un paragraphe structuré contenant une suite d'articles. Le langage HTML définit trois types
de listes :
 La liste ordonnée ;
 La liste non ordonnée ;
 La liste de définition.

12 | P a g e
OL LI : Liste ordonnée

Conteneur Type de liste Effet Visuel

Liste ordonnée
<ol>
1. article 1
<li> article 1 </li>
2. article 2
<li> article 2 </li> 3. article 3

</ol>

UL LI : Liste non ordonnée

Conteneur Type de liste Effet Visuel


Non ordonnée article 1
<ul>  article 2
<li> article 1 </li>  article 3

<li> article 2 </li>

</ul>

DT DD : Liste de définition
Conteneur Type de liste Effet Visuel

De définition <dl>
<dl> <dt>article 1</dt>
<dd>définition 1</dd>
<dt>Terme</dt> <dt>article 2</dt>
<dd>Définition</dd> <dd>définition 2</dd>
</dl>
</dl>

Attributs
Il existe des attributs spécifiques aux listes :
Attribut Valeur Effet Visuel

COMPACT resserre l'interligne

PLAIN supprime les puces
SEQNUM définit le premier numéro
START définit le premier numéro

13 | P a g e
 CONTINUE repart du numéro où il s'était arrété
à la liste précédente
TYPE (pour les listes ordonnées) 1 numérotation chiffrée (par défaut)
A numérotation en capitales

a numérotation en bas de casse

I numérotation en chiffres romains (I, II, III, IV ...)

i numérotation en chiffres romains en bas de casse

TYPE (pour les listes non-ordonnées) circle puce circulaire
square puce carrée
disc puce en disque

Tableaux HTML
Un tableau doit respecter les quelques règles suivantes :

Le tableau est encadré par les balises <TABLE> et </TABLE>. Le titre du tableau est encadré par
<CAPTION> </CAPTION>. Chaque ligne est encadrée par <TR> </TR> (Table Row, traduisez par
ligne du tableau). Les cellules d'en-tête sont encadrées par <TH> </TH> (pour Table Header : En-tête de
tableau). Enfin, les cellules de valeur sont encadrées par <TD> </TD> (Table Data: Donnée de tableau).

Voici un exemple de tableau HTML :

<TABLE BORDER="1">
<CAPTION> Voici le titre du tableau </CAPTION>
<TR>
<TH> Titre A1 </TH>
<TH> Titre A2 </TH>
<TH> Titre A3 </TH>
<TH> Titre A4 </TH>
</TR>
<TR>
<TH> Titre B1 </TH>
<TD> Valeur B2 </TD>
<TD> Valeur B3 </TD>
<TD> Valeur B4 </TD>
</TR>
</TABLE>

Ce code donne le résultat suivant :

Voici le titre du tableau

Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4

Attributs
Attribut Balises auxquelles il Valeur Effet Visuel
s'applique
ALIGN THEAD CENTER centré
TBODY LEFT Gauche
TH RIGHT Droite
JUSTIFY Justifié

14 | P a g e
 TR
TD
CAPTION TOP Au-dessus
BOTTOM En-dessous
VALIGN (alignement vertical) THEAD TOP En haut
TBODY MIDDLE Au milieu
TH BOTTOM En bas
TR
TD
BORDER=n TABLE Taille de la bordure
CELLPADDING=n TABLE Espacement de n pixels entre le
contenu des cellules et la bordure
CELLSPACING=n TABLE Epaisseur de la grille intérieure
FLOAT TABLE RIGHT Position du texte qui suivra
LEFT </TABLE>
COLS=n TABLE Nombre de colonnes
FRAME TABLE NONE Aucun
(contrôle les éléments individuels TOP Au-dessus
d'encadrement du tableau) BOTTOM En bas
TOPBOT Tout en haut
SIDES Sur les cotés
ALL Tous
RULES TABLE NONE Aucun
(contrôle les éléments de la grille des BASIC basique
cellules) ROWS Ligne
COLS Colonne
ALL Tous
COLSPAN THEAD Débordement des cellules sur les
TBODY colonnes adjacentes
TH
TR
TD
ROWSPAN THEAD Débordement des cellules sur les
TBODY lignes adjacentes
TH
TR
TD

Liens hypertextes et ancres – HTML

Ancres
Les liens hypertextes (ancrages) sont des éléments d'une page HTML (soulignés lorsqu'il s'agit de texte)
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 :
 vers un autre endroit du document.
 vers un fichier HTML situé à un emplacement différent sur la machine qui héberge la page.
 vers une autre machine.

L'attribut principal des ancrages est href. Il s'écrit sous la forme suivante :

<a href="Adresse ou URL"> .. </a>

15 | P a g e
Lien externe
Un lien externe est un lien vers une page pointée par son URL. Par exemple :

<a href="[Link] Comment ça marche? </a>

Lien local
On peut créer un lien vers une page située sur le même ordinateur en remplaçant l'URL par le fichier
cible. Ce lien peut être fait de façon relative, en repérant le fichier cible par rapport au fichier source. Si le
fichier cible est "[Link]" situé dans le répertoire parent, son lien s’écrira :

<a href="../[Link]"> ... </a>

Ce lien peut aussi être défini de façon absolue, en écrivant l'adresse du fichier cible de façon locale :

<a href="[Link] ... </a>

Ancres
Il est également possible de créer une ancre dans une page, c'est-à-dire marquer un endroit précis d'une
page pour s'y rendre par un lien hypertexte. Les ancres se définissent grâce à l'attribut NAME ou ID. La
syntaxe est la suivante :
<balise id="ancre"> ... </balise>

L'appel d'une ancre se fait de la manière suivante :

<a href="#ancre"> ... </a>

Il est ainsi possible de permettre à l'utilisateur de se déplacer au sein d'une même page ou bien d'accéder à
une section particulière d'une autre page :
<a href="url/nom_du_fichier.html#ancre"> ... </a>

Images en HTML
Comment afficher des images sur une page web ?
Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est
important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement assez
long et peuvent dans certains cas nuire à la lisibilité.

16 | P a g e
 La balise IMG du langage HTML permet d'insérer des images dans une page HTML. L'image peut être
située sur le même serveur que la page dans laquelle elle est insérée mais également sur un autre serveur
en spécifiant son URL complète.

Seuls les formats d'images suivants sont acceptés en standard dans les spécifications du W3C :
 Les images JPEG (.JPG)</gras> : les images ayant un grand nombre de couleurs seront bien compressées,
c'est-à-dire qu'elles prendront moins de place, donc nécessiteront un temps de chargement moindre)
 Les images PNG : Leur taille est faible dans le cas d'images avec peu de couleurs avec des tons
uniformes, ce format permet en outre d'avoir des images entrelacées (qui s'affichent progressivement)
avec une profondeur de couleurs de 24 bits et des images dont on définit une couleur comme transparente.
 Les images GIF : Elles possèdent les mêmes atouts que les images PNG, si ce n'est que le format GIF est
limité à 256 couleurs maximum et que ce format n'est pas totalement libre.

Comment afficher des images sur une page web?

Les principaux attributs de la balise IMG sont les suivants :
 SRC: Indique l'emplacement de l'image (il est obligatoire)
 ALIGN: Spécifie l'alignement de l'image par rapport au texte adjacent. Il peut prendre les valeurs : TOP,
MIDDLE, et BOTTOM (au-dessus, au milieu et en-dessous)
 ALT: Permet d'afficher un texte alternatif lorsque l'image ne s'affiche pas.
 TITLE: Permet d'afficher une infobulle lors du survol de l'image par le curseur.
 WIDTH: Permet de spécifier la largeur de l'image.
 HEIGHT: Permet de spécifier la hauteur de l'image.

Ainsi pour insérer une image, il faudra saisir une balise du type suivant :
<IMG SRC="url_de_l_image"
ALT="Texte remplaçant l'image"
TITLE="Texte à afficher">

Attribut Valeur Résultat Effet Visuel

ALIGN bottom Alignement de l'image.
center
left
middle
top
right
ALT Texte alternatif au cas où l'image ne s'affiche pas.
BORDER Nombre Nombre de pixels de la bordure. La couleur de la bordure peut être
entier définie par l'attribut LINK ou TEXT de la balise <BODY>. Par défaut
l'attribut BORDER vaut 1 ce qui crée un petit cadre autour de l'image.
Pour ne pas avoir ce désagrément pensez à le définir comme étant égal
à 0.
HEIGHT Nombre Hauteur de l'image (en pixels ou en %). Lorsque cet attribut précise
entier une dimension différente de la dimension originale du graphique, le
navigateur la redimensionne dynamiquement, ce qui peut provoquer un
affichage de moins bonne qualité.

17 | P a g e
 HSPACE Nombre Nombre de pixels d'ajustement entre l'image et le texte adjacent
entier (horizontalement).

Texte
LONGDESC URL de la description de l'image.
LOWSRC URL Image alternative (généralemnt plus petite) affichée le temps que la
vraie image soit chargée par le navigateur.
NAME Permet de définir un nom pour l'image. Cet attribut est notamment
utile pour la gestion des images en JavaScript.
SRC URL URL de l'image
TITLE Texte alternatif au cas où l'image ne s'affiche pas.
USEMAP URL ou nom de l'ancre définissant l'image réactive.
VSPACE Nombre de pixels d'ajustement entre l'image et le texte (verticalement). Essai de texte

WIDTH Nombre Largeur de l'image (en pixels ou en %). Lorsque cet attribut précise
entier une dimension différente de la dimension originale du graphique, le
navigateur la redimensionne dynamiquement, ce qui peut provoquer un
affichage de moins bonne qualité.

Texte enveloppant une image

Les images s'insèrent dans le texte comme un caractère, ainsi il semble impossible de faire s'écouler du
texte le long d'une image.

Il existe en fait plusieurs façons, nous allons en voir deux :

 La première consiste à créer un tableau avec une ligne et deux colonnes, dans lesquelles on met l'image et
le texte.
 La seconde (moins précise) consiste à aligner l'image à gauche ou à droite avec l'attribut ALIGN puis de
taper son texte. Il suffit, pour arrêter cet enveloppement de mettre l'attribut CLEAR.

Les images réactives ("images MAP")

Il est possible de créer des zones cliquables à l'intérieur même d'une image grâce à l'attribut USEMAP
utilisé conjointement avec la balise MAP.
L'attribut USEMAP de la balise <IMG> pointe vers une balise <MAP> contenant la description du
découpage de l'image en zones cliquables.

La balise <MAP> a un attribut NAME définissant son nom (NAME="nom") et contient les zones
cliquables déclarées grâce à des balises AREA.

Balise Attribut Valeur Effet Visuel

MAP NAME

18 | P a g e
AREASHAPE RECT Rectangle (ses coordonnées sont:
"abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit")
CIRCLE Cercle (ses coordonnées sont:
"abscisse centre, ordonnée centre, rayon")

Polygone (ses coordonnées sont:

POLY "la suite des coordonnées séparées par des
virgules")
HREF URL Lien vers l'URL
COORDS"XX,XX,XX,XX"Contient les coordonnées de la zone cliquable, séparées par des
virgules.

Voici ci-dessous un exemple d'image réactive :

<IMG SRC="images/[Link]"
WIDTH=150
HEIGHT=70
USEMAP="#Map">
<MAP NAME="Map">
<AREA SHAPE="rect"
HREF="[Link]"
COORDS="0,0,48,28">

<AREA SHAPE="circle"
HREF="[Link]"
COORDS="50,30,10">

<AREA SHAPE="poly"
HREF="[Link]"
COORDS="60,50,80,30,100,40,50,100">
</MAP>

Insérer une image en fond

Il est possible de définir une image d'arrière-plan pour la page web grâce aux attributs de la balise
<BODY> :

Attribut Effet Visuel

BACKGROUND="image" Affiche l'image en arrière-plan
BGCOLOR="nom_de_la_couleur ou #XXXXXX" Affiche la couleur demandée en arrière-plan
LINK="couleur" Couleur des liens hypertexte
ALINK="couleur" Couleur du lien actif
VLINK="couleur" Couleur des liens déjà visités
TEXT="couleur" Couleur du texte par défaut
Les couleurs sont définies selon la notation #RRVVBB, où RR, VV et BB représentent respectivement un
nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu.

Le codage des couleurs

19 | P a g e
Les couleurs en HTML sont définies par 3 nombres hexadécimaux représentant les tons de Rouge, de
Vert et de Bleu (selon le codage RGB (Red Green Blue, en français : RVB) de la couleur choisie. Ainsi la
syntaxe de codage d'une couleur en HTML est la suivante :

couleur="#RRVVBB"

RR, VV et BB représentent respectivement un nombre hexadécimal entre 00 et FF pour le Rouge, le Vert

et le Bleu.

Ainsi, plus de 16 millions de couleurs sont disponibles pour colorer les pages web. Toutefois, étant
donné que tous les navigateurs ne reconnaissent pas les couleurs de la même façon, le W3C conseille
l'utilisation des couleurs ci-dessous, pour lesquelles un nom intelligible a été donné. Il est donc possible
(et conseillé) d'appeler une couleur de la façon suivante :

couleur="nom_de_la_couleur"

Nom de la couleur Codage RVB

aliceblue #F0F8FF
antiquewhite #FAEBD7
aqua #00FFFF
aquamarine #7FFFD4
azure #F0FFFF
beige #F5F5DC
bisque #FFE4C4
black #000000
blanchedalmond #FFEBCD
blue #0000FF
blueviolet #8A2BE2
brown #A52A2A
burlywood #DEB887
cadetblue #5F9EA0
chartreuse #7FFF00
chocolate #D2691E
coral #FF7F50
cornflowerblue #6495ED
cornsilk #FFF8DC
crimson #DC143C
cyan #00FFFF
darkblue #00008B
darkcyan #008B8B
darkgoldenrod #B8860B
darkgray #A9A9A9
darkgreen #006400
darkkhaki #BDB76B
darkmagenta #8B008B
darkolivegreen #556B2F
darkorange #FF8C00
darkorchid #9932CC

20 | P a g e
 darkred #8B0000
darksalmon #E9967A
darkseagreen #8FBC8F
darkslateblue #483D8B
darkslategray #2F4F4F
darkturquoise #00CED1
darkviolet #9400D3
deeppink #FF1493
deepskyblue #00BFFF
dimgray #696969
dodgerblue #1E90FF
firebrick #B22222
floralwhite #FFFAF0
forestgreen #228B22
fuchsia #FF00FF
gainsboro #DCDCDC
ghostwhite #F8F8FF
gold #FFD700
goldenrod #DAA520
gray #808080
green #008000
greenyellow #ADFF2F
honeydew #F0FFF0
hotpink #FF69B4
indianred #CD5C5C
indigo #4B0082
ivory #FFFFF0
khaki #F0E68C
lavender #E6E6FA
lavenderblush #FFF0F5
lawngreen #7CFC00
lemonchiffon #FFFACD
lightblue #ADD8E6
lightcoral #F08080
lightcyan #E0FFFF
lightgoldenrodyellow #FAFAD2
lightgreen #90EE90
lightgrey #D3D3D3
lightpink #FFB6C1
lightsalmon #FFA07A
lightseagreen #20B2AA
lightskyblue #87CEFA
lightslategray #778899
lightsteelblue #B0C4DE
lightyellow #FFFFE0
lime #00FF00

21 | P a g e
 limegreen #32CD32
linen #FAF0E6
magenta #FF00FF
maroon #800000
mediumaquamarine #66CDAA
mediumblue #0000CD
mediumorchid #BA55D3
mediumpurple #9370DB
mediumseagreen #3CB371
mediumslateblue #7B68EE
mediumspringgreen #00FA9A
mediumturquoise #48D1CC
mediumvioletred #C71585
midnightblue #191970
mintcream #F5FFFA
mistyrose #FFE4E1
moccasin #FFE4B5
navajowhite #FFDEAD
navy #000080
oldlace #FDF5E6
olive #808000
olivedrab #6B8E23
orange #FFA500
orangered #FF4500
orchid #DA70D6
palegoldenrod #EEE8AA
palegreen #98FB98
paleturquoise #AFEEEE
palevioletred #DB7093
papayawhip #FFEFD5
peachpuff #FFDAB9
peru #CD853F
pink #FFC0CB
plum #DDA0DD
powderblue #B0E0E6
purple #800080
red #FF0000
rosybrown #BC8F8F
royalblue #4169E1
saddlebrown #8B4513
salmon #FA8072
sandybrown #F4A460
seagreen #2E8B57
seashell #FFF5EE
sienna #A0522D
silver #C0C0C0

22 | P a g e
 skyblue #87CEEB
slateblue #6A5ACD
slategray #708090
snow #FFFAFA
springgreen #00FF7F
steelblue #4682B4
tan #D2B48C
teal #008080
thistle #D8BFD8
tomato #FF6347
turquoise #40E0D0
violet #EE82EE
wheat #F5DEB3
white #FFFFFF
whitesmoke #F5F5F5
yellow #FFFF00
yellowgreen #9ACD32

Intérêt d'un formulaire

Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie
sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une
adresse e-mail ou à un script de page web dynamique tel que PHP, ASP ou un script CGI.

La balise FORM
Les formulaires sont délimités par la balise <FORM> ... </FORM>, une balise qui permet de regrouper
plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède les attributs obligatoires
suivants :
 METHOD indique sous quelle forme seront envoyées les réponses « POST » est la valeur qui correspond
à un envoi de données stockées dans le corps de la requête, tandis que « GET » correspond à un envoi des
données codées dans l'URL, et séparées de l'adresse du script par un point d'interrogation (pour plus de
renseignement sur les méthodes POST et GET, consultez l'article sur le protocole HTTP)
 ACTION indique l'adresse d'envoi (script CGI ou adresse email ([Link]

La balise FORM possède comme attribut facultatif ENCTYPE qui spécifie le codage des données dans
l'URL, toutefois il n'est pas nécessaire de le préciser car la valeur attribuée par défaut (application/x-
www-form-urlencoded) est la seule valeur valide. L'attribut facultatif ACCEPT permet de définir les types
MIME des données pouvant être envoyées par le formulaire.

Voici la syntaxe de la balise FORM :

<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">

...
</FORM>

Voici quelques exemples de balises FORM :

23 | P a g e
 <FORM METHOD=POST ACTION="[Link]

<FORM METHOD=GET ACTION="[Link]

A l'intérieur de la balise FORM...

La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont
permettre à l'utilisateur de choisir ou de saisir des données, ensemble de données qui seront envoyées à
l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par l'attribut
METHOD.

Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM
(textes,boutons,tableaux,liens,...) mais il est surtout
intéressant d'insérer des éléments interactifs. Ces éléments interactifs sont :
 La balise INPUT: un ensemble de boutons et de champs de saisie
 La balise TEXTAREA: une zone de saisie
 La balise SELECT: une liste à choix multiples

Envoi des données

Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données
présentes dans le formulaire sont envoyées au script CGI sous forme de paires nom/valeur, c'est-à-dire un
ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur
associée. L'ensemble de ces paires nom/valeur étant séparées entre elles par des esperluettes (caractère
&). Les données envoyées ressembleront donc à ceci :

champ1=valeur1&champ2=valeur2&champ3=valeur3

Dans le cas de la méthode GET (envoi des données à travers l'URL), l'URL ressemblera à une chaîne du
genre :

[Link]

La balise INPUT
La balise INPUT est la balise essentielle des formulaires, car elle permet
de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante :

<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">

L'attribut name est essentiel car il permettra au script CGI de connaître le

champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ sera suivi du caractère "=" puis de
la valeur entrée par l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.

24 | P a g e
 L'attribut type permet de préciser le type d'élément que représente la balise INPUT, voici les valeurs que
ce champ peut prendre :
 checkbox: il s'agit de cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non
coché). Lorsque la case est cochée la paire nom/valeur est envoyée au CGI.
 hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de préciser un
paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur.
 file: il s'agit d'un champ permettant à l'utilisateur de préciser

l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser
le type de données pouvant être envoyées grâce à l'attribut ACCEPT de la balise FORM.
 image: il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à
l'emplacement précisé par son attribut SRC
 password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous forme
d'astérisques afin de camoufler la saisie de l'utilisateur.
 radio: il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons radios
devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera envoyé au
CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut.
 reset: il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir l'ensemble des éléments du
formulaire à leurs valeurs par

défaut.
 submit: il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut être
précisé grâce à l'attribut value.
 text: il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte.

La taille du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à
l'attribut maxlength.

La balise TEXTAREA
La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne de
saisie que propose la balise INPUT. Cette balise possède les attributs suivants :
 cols: représente le nombre de caractères que peut contenir une ligne
 rows: représente le nombre de lignes
 name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire
nom/valeur
 readonly: permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ
 value: représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par
une frappe de l'utilisateur

La balise SELECT
La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à
l'intérieur de celle-ci). Les attributs de cette balise sont :
 name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire
nom/valeur
 disabled: permet de créer une liste désactivée, c'est-à-dire affichée en grisée

25 | P a g e
 size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre
d'éléments effectifs dans la liste)
 multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste

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="cgi-bin/[Link]">

Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<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">
<br>Femme : <INPUT type=radio name="sexe" value="F">
</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>
</TR>
</TABLE>
</FORM>

26 | P a g e
Voici le résultat de ce code HTML :

<FORM method=post action="javascript:alert('L\'envoi du formulaire a bien évidemment été bloqué

<:)');">

Enregistrement d'un utilisateur

Nom
<INPUT type="text" name="nom">
Prénom
<INPUT type="text" name="prenom">
Sexe
Homme : <INPUT type="radio" name="sexe" value="M">
Femme : <INPUT type="radio" name="sexe" value="F">
Fonction
<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>
Commentaires
<TEXTAREA rows="3" name="commentaires">Tapez ici vos
commentaires</TEXTAREA>

<INPUT type="submit" value="Envoyer">

</FORM>

Attributs de la balise FORM et types d'entrées

<b>Balise<b> <b>Attribut<b> <b>Valeur<b> <b>Résultat<b> <b>Effet Visuel<b>
<FORM> ... METHOD POST
</FORM> GET
ACTION envoie à l'adresse
indiquée
ENCTYPE spécifie le type de
codage utilisé
<INPUT> TYPE submit effectue l'ACTION <form><input type="submit"
dans le balise name="B1"
<FORM> value="Envoyer"></form>
text simple ligne de <form><input type="text"
texte dont la size="20" name="T1"></form>
longueur
est donnée par
l'attribut size
reset efface le contenu du <form><input type="reset"
formulaire name="B2"
value="Rétablir"></form>

27 | P a g e
 radio bouton radio <form><input type="radio"
checked name="R1"
value="V1"></form>
checkbox case à cocher <form><input type="checkbox"
name="C1"></form>
NAME Nom
SIZE Taille du texte
<TEXTAREA> ... NAME Zone de texte <form><textarea name="S1"
</TEXTAREA> ROWS rows="2"
COLS cols="20"></textarea></form>
<SELECT> NAME <form><select name="D2"
size="1">
<OPTION> ... <option selected>Choix 1</option>
</OPTION> <option>Choix 2</option>
<option>Choix 3</option>
</SELECT> <option>Choix 4</option>
</select></form>
MULTIPLE Plusieurs choix <form><select name="D1"
possibles multiple size="1">
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
<option>Choix 4</option>
</select></form>
<OPTION> ... SELECTED Option par <form><select name="D3"
</OPTION> défaut multiple size="3">
VALUE Valeur forcée <option selected>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
<option selected>Choix 4</option>
</select></form>

Balises méta (Méta tags)

Définition
Les métadonnées sont des informations situées au sein d'un document afin de le décrire. Les métadonnées
sont ainsi utilisées par les moteurs de recherche lors du référencement de la page web. Grâce à ces balises
non affichées il est ainsi possible de renseigner des informations relatives à la page où au site afin de
mieux en décrire le contenu, en particulier des informations sur le ou les auteur(s) du document, sa limite
de validité, la langue utilisée, etc.

On appelle ainsi « méta tags » (en français « méta-balises ») des balises spéciales situées dans l'en-tête
du document HTML (c'est-à-dire la balise HEAD, située avant la balise BODY), afin notamment de
fournir des informations permettant aux moteurs de recherche d'indexer la page web.

On distingue deux types de méta tags :

 Les métas NAME, permettant de décrire la page HTML :

<meta name="Nom du tag" CONTENT="Attribut">

28 | P a g e
 Les métas HTTP-EQUIV, permettant d'envoyer des informations supplémentaires au navigateur via le
protocole HTTP :

<META HTTP-EQUIV="Nom du tag" CONTENT="Attribut">

Il est possible de renseigner plusieurs métas les uns après les autres dans l'en-tête de la page.
Métas NAME

Nom du Attribut Utilité

tag
Author "Informations sur l'auteur" Informations sur l'auteur de la page
Copyright "Informations de copyright" Permet de référencer des informations de droits d'auteur
Description "Description de votre site" Permet de donner une information à afficher lors du résultat
d'une recherche.
Expires never"date à laquelle la page expire" Indique au robot la date d'expiration de la page.
Generator Nom du logiciel Nom de l'éditeur HTML ayant généré la page web.
Keywords "mot clé, mot clé, etc." Mots clés décrivant la page Web.
Rating general Type de contenu (public visé).
Rev Votre@email Mél du Webmestre.
Revisit- "x days" ou x représente le nombre Délai de visite par le robot
after de jours
Robots allnone Permet à tous les robots d'indexerNe permet à aucun robot
d'indexer
Subject "Sujet de la page" Permet de préciser le sujet de la page

Métas HTTP-EQUIV
Nom du Attribut Utilité
tag
Pragma no-cache Empêche le navigateur de garder la page dans son
cache
Refresh x; URL="adresse" Appelle une autre page (située à l'URL spécifiée)
après un délai d'attente de x secondes.
Robots allfollowindexnofollownoindexnone Permet au robot de référencer toute la page (par
défaut) Permet au robot de suivre les liens de la
page Permet au robot d'indexer la page Interdit au
robot de suivre les liens Interdit au robot d'indexer
la page Empêche le robot de poursuivre
l'indexation du site
Window- _blank_top Force le browser à afficher la page dans une
target nouvelle fenêtre Affiche la page dans la fenêtre
entière (pas dans une frame).

29 | P a g e
 Frames - HTML

Présentation des frames

Grâce aux frames (en français "cadres") il est désormais possible d'afficher plusieurs pages HTML dans
différentes zones (ou cadres).

Les frames ne font pas partie de la spécification du HTML 3.x, il faut donc déclarer sa page comme étant
écrite en HTML 4.0 !

Créer des frames

Afin de créer un site contenant des cadres, il suffit de créer un fichier contenant l'agencement des cadres :
ce fichier HTML a pour particularité d'avoir un conteneur <FRAMESET> à la place du jeu de balises
<BODY>. C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%).

Voyons ceci sur 3 exemples:

 2 cadres verticaux
 2 cadres horizontaux
 2 cadres horizontaux et un vertical

Exemple n°1
<FRAMESET COLS="20%,
80%">

<FRAME SRC="[Link]" NAME="gauche">

<FRAME SRC="[Link]" NAME="droite">

</FRAMESET>

Exemple n°2

30 | P a g e
<FRAMESET ROWS="20%,
80%">
<FRAME SRC="[Link]" NAME="haut">
<FRAME SRC="[Link]" NAME="bas">
</FRAMESET>

Exemple n°3
<FRAMESET COLS="20%,
80%">
<FRAME SRC="[Link]" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="[Link]"
NAME="droit_haut">
<FRAME SRC="[Link]"
NAME="droit_bas">
</FRAMESET>

Les attributs de la balise <FRAMESET>

Attribut Valeur Action
Rows pourcentage (entre 1 et 100) Cadre horizontal
valeur en pixels
En fixant une seules des valeurs et en donnant à l'autre la valeur *, la
valeur s'ajuste automatiquement
Cols pourcentage (entre 1 et 100) Cadre vertical
valeur en pixels
En fixant une seules des valeurs et en donnant à l'autre la valeur *, la
valeur s'ajuste automatiquement

31 | P a g e
 Frameborder YES Indique si le cadre a une
NO bordure
ou non
Border=n n est une valeur définissant la taille de la bordure Indique la taille de la
bordure
Bordercolor Nom de la couleur Indique la couleur de la
Valeur de la couleur en hexadécimal bordure
Framespacing=n n est une valeur définissant l'espace entre les cadres Indique l'espace entre
les cadres

Les attributs de la balise <FRAME>

La balise <FRAME> permet de définir un
ou plusieurs cadres au sein de la balise <FRAMESET>

Attribut Valeur Action

Src URL Définit l'emplacement de la page à afficher dans le
cadre
Name "nom" Définit un nom qui permettra d'afficher un autre
document dans le cadre gâce à l'attribut Target
Marginwidth=n n est un entier spécifiant Taille des marges latérales
le nombre de pixels
Marginheight=n n est un entier spécifiant Taille des marges du haut et du bas
le nombre de pixels
Frameborder YES Détermine si les cadres auront ou non une bordure
NO
Border=n n est un entier spécifiant Taille de l'espace entre les cadres (uniquement pour
le nombre de pixels Netscape)
Noresize (Aucune) Interdit à l'utilisateur de redimensionner les cadres (Ce
n'est pas la valeur par défaut)
Scrolling YES Permet ou non l'affichage d'une barre de défilement
NO (Auto laisse le navigateur décider de son utilité)
AUTO

Comment éviter les erreurs avec les navigateurs non

compatibles ?
On utilisera les balises <NOFRAMES> et </NOFRAMES> permettant de spécifier un texte HTML à
afficher en cas de navigateur ne permettant pas d'afficher les frames. Le texte entre les balises
<NOFRAMES> et </NOFRAMES> doit donc contenir les balises <BODY> ... </BODY>.

Exemple :

<FRAMESET COLS="20%,
80%">
<FRAME SRC="[Link]" NAME="gauche">
<FRAME SRC="[Link]" NAME="droite">
</FRAMESET>

32 | P a g e
<NOFRAMES>
<BODY>
Cette page HTML nécessite un navigateur supportant les frames, veuillez nous en excuser.
</BODY>
</NOFRAMES>

Désigner un cadre avec un lien hypertexte

Pour faire afficher des liens dans un des cadres, il suffit d'utiliser l'attribut target dans la balise <A HREF
..> pour spécifier le nom du cadre qui a été spécifié dans la
balise <FRAME> par l'attribut NAME.

Par exemple :
<A HREF="[Link]" TARGET="gauche">

Valeur Action
_self Affiche la cible dans le même cadre que le lien
_parent Affiche la cible dans le cadre de niveau supérieur
_blank Affiche la cible dans une nouvelle fenêtre
_top Affiche la cible dans la fenêtre entière du navigateur

33 | P a g e