COXHTML New1

INITIATION A LA CONCEPTION DES PAGES WEB
STATIQUES : NOTION DE XHTML ET CSS

PREMIERE PARTIE : XHTML
INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

NOTION DE XHTML ET CSS
Support compilé par A. ATADEGNON
1
SOMMAIRE
SOMMAIRE .................................................................................................................................................................2
INTRODUCTION .......................................................................................................................................................3
I. QU'EST-CE QU'UN SITE WEB ? .......................................................................................................................3
II. COMMENT CREER UNE PAGE WEB ? .......................................................................................................3
III. LANGAGE XHTML ET LE CSS .....................................................................................................................3
III.1. Présentation .....................................................................................................................................................3
III.2. Notion de XHTML ........................................................................................................................................4
III.2.1. Quelques explications ? .......................................................................................................................4
III.2.2. Les commentaires ..................................................................................................................................5
III.2.3. Les paragraphes ....................................................................................................................................6
III.2.4. Sauter une ligne .....................................................................................................................................6
III.2.5. Les titres ..................................................................................................................................................7
III.2.6. Mettre en valeur le texte ......................................................................................................................8
III.2.7. Mettre un peu en valeur .......................................................................................................................9
III.2.8. Mettre bien en valeur............................................................................................................................9
III.2.9. Mettre en exposant ou en indice ........................................................................................................9
III.2.10. Les citations....................................................................................................................................... 10
III.2.11. Les acronymes, abréviations et définitions ................................................................................ 11
III.2.12. Les objets ........................................................................................................................................... 13
III.2.13. Les scripts .......................................................................................................................................... 15
III.2.14. Lien relatif ou absolu ? ................................................................................................................... 16
III.2.15. Un lien vers une autre page ........................................................................................................... 17
III.2.16. Une bulle d'aide sur le lien ............................................................................................................ 18
III.2.17. Le cas des liens ouvrant une nouvelle fenêtre ........................................................................... 18
III.2.18. Un lien pour envoyer un mail ........................................................................................................ 18
III.2.19. Un lien vers une ancre .................................................................................................................... 19
III.2.20. Lien vers une ancre située dans une autre page ....................................................................... 20
III.2.21. Différents formats d'images ........................................................................................................... 20
III.2.22. Insérer une image ............................................................................................................................ 22
III.2.23. Une bulle d'aide................................................................................................................................ 23
III.2.24. Image cliquable ................................................................................................................................ 23
III.2.25. Les images réactives ("images map").......................................................................................... 23
III.2.26. Ligne horizontale ............................................................................................................................. 24
III.2.27. Aligner plusieurs éléments ............................................................................................................. 24
III.2.28. Blocs d'éléments ............................................................................................................................... 24
III.2.29. Les listes ............................................................................................................................................. 25
III.2.30. Les tableaux....................................................................................................................................... 25
III.2.31. Qu'est-ce qu'un marqueur de style ?............................................................................................ 28
III.2.32. Qu'appelle-t'on "Méta Tag" ? ....................................................................................................... 29
III.2.33. Présentation des frames.................................................................................................................. 31
III.2.34. Formulaires ....................................................................................................................................... 34
III.3. Balises XHTML : Récapitulatif.................................................................................................................. 38
III.3.1. Balises de premier niveau ................................................................................................................ 38
III.3.2. Le code minimal d'une page XHTML ............................................................................................ 38
III.3.3. Balises d'en-tête .................................................................................................................................. 39
III.3.4. Balises de structuration du texte ..................................................................................................... 40
III.3.5. Balises de liste..................................................................................................................................... 42
III.3.6. Balises de tableau............................................................................................................................... 43
ANNEXE A : LISTE DES CARACTERES ASCII DE 129 à 255 ............................................................... 44
ANNEXE B : CODES DES COULEURS .......................................................................................................... 48

2
INTRODUCTION
L'objectif de ce cours est de permettre un apprentissage progressif de la conception des sites
web statiques basés sur les notions de html ou XHTML (eXtensible HyperText Markup Language)
et CSS (Cascading Style Sheets). Ce support cours est une compilation à partir de documents web
et de plusieurs sites web, principalement :
 http://www.commentcamarche.net,
 http://www.siteduzero.com,
 http://www.aliasdmc.fr,
 http://www.developpez.com
 http://elitwork.com.
I. QU'EST-CE QU'UN SITE WEB ?

Un site web (aussi appelé site Internet ou page perso dans le cas d'un site Internet à but
personnel) est un ensemble de fichiers html, asp (Active Server Pages), perl, javaScript, php
(Hypertext Preprocessor) ou autres stockés sur un ordinateur connecté en permanence à Internet et
hébergeant les pages web (on parle généralement de serveur car cet ordinateur possède un logiciel
permettant de servir les pages web, il s'agit bien évidemment d'un serveur web).
La personne (ou plus exactement la société) mettant à votre disposition un serveur web
connecté en permanence à Internet est appelé hébergeur.
II. COMMENT CREER UNE PAGE WEB ?

Pour créer un site Internet, il est essentiel de créer des fichiers xHTML. Il existe deux façons
de créer ce type de fichier :
 Editer le fichier HTML "à la main", c'est-à-dire en tapant le code xHTML dans un
fichier texte à l'aide d'un simple éditeur de texte. Si cette solution est la plus fastidieuse
(bien que xHTML soit très facile), c'est toutefois la meilleure façon d'apprendre à faire un
site, de comprendre comment celui-ci fonctionne, et ainsi d'être à même de créer un code
optimisé et propre.
 Utiliser un éditeur xHTML WYSIWYG (What You See Is What You Get, traduisez
Ce que vous voyez est ce que vous obtenez). Il s'agit d'un logiciel permettant de créer des
pages web visuellement en plaçant des objets et des contrôles, le logiciel se chargeant de
créer le code XHTML à votre place. S'il s'agit d'une solution très pratique pour créer de
petites pages peu compliquées, il peut sřavérer très ennuyeux de ne pas arriver à faire ce
que l'on veut...
D'autre part, un site Internet doit contenir des images, il vous faut donc un logiciel de dessin
capable d'égayer votre site avec des images (au format GIF ou JPG). Ex. PhotoShop, Fireworks, etc.
III. LANGAGE XHTML ET LE CSS
III.1. Présentation
Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper
simplement le texte qu'il y aura dans son site, il faut aussi savoir placer ce texte, insérer des images,
faire des liens, etc.

3
Pour expliquer à l'ordinateur ce que vous voulez, il va falloir utiliser un langage qu'il comprend. Il
existe des langages qui servent à créer des programmes, comme le C++ ou encore le Java. Ces
langages sont néanmoins complexes et destinés à des personnes qui ont déjà quelques
connaissances en informatique.
Les langages XHTML et CSS, eux, servent précisément à créer des sites web, et ils ont été créés de
manière à être simples à utiliser. Chacun de ces 2 langages sert à faire quelque chose de précis, et
les deux se complètent naturellement pour au final donner un site web :
 XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Ce langage

XHTML, c'est celui avec lequel vous taperez le contenu de votre site web. Il contient des
informations logiques : vous direz par exemple "Ceci est mon titre, ceci est mon menu, là
c'est le texte principal de la page, là il y a une image etc. etc.".
En fait, le XHTML et le HTML se ressemblent beaucoup et peuvent tous les deux être
utilisés pour créer des pages web. Ils sont quasiment identiques. Le XHTML fonctionne
cependant sur des règles un peu plus strictes que le HTML.
En bref, si vous savez programmer en XHTML, alors vous savez programmer en HTML.
C'est pour cela que nous étudierons XHTML dans ce cours.
 CSS : c'est l'abréviation de Cascading Style Sheets ("Feuille de style"). Ce langage nous sert
uniquement à présenter la page web. C'est en CSS que l'on dira : "Mes titres sont en rouge
et sont soulignés, mon texte est dans la police arial, mon nom est centré, mon menu a un
fond blanc..." etc. etc.
 Grâce à ce langage, nous allons pouvoir créer rapidement et simplement la mise en page de
notre site. Nous pourrons ainsi lui donner une belle présentation, sans pour autant être des
experts en graphisme.
En résumé, on se sert de :
 XHTML pour écrire le contenu de nos pages web,

 CSS pour présenter ce contenu.
Ces langages sont donc complémentaires, l'un ne va pas sans l'autre. Si vous retenez que XHTML
sert à taper le contenu, le CSS sert à présenter ce contenu.
III.2. Notion de XHTML

III.2.1. Quelques explications ?
Code : XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
1
strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
3
<head>
4
<title>Bienvenue sur mon site !</title>
5
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6
</head>
7
<body>
8
</body>
9
</html>

4
Voici les explications ligne par ligne :
1. Sur la toute première ligne se trouve la déclaration "Doctype". C'est une balise un peu
particulière, cette balise sert à dire au navigateur que ce que vous faites est une page
XHTML, et que vous utilisez la version 1.0 du langage XHTML (comme dans les
programmes il y a des versions !).
Vient ensuite la balise <html>. C'est la balise principale qui englobera toute votre page
(x)HTML. Comme vous pouvez le voir, on ne la ferme qu'en dernier avec </html>, qui
indique que votre page (x)HTML s'arrête là. Il n'y a donc rien après le </html>.
La balise <html> contient 2 attributs :
o xmlns : cet attribut, obligatoire, indique une adresse traitant du xHTML.
o xml:lang : cet attribut sert à indiquer dans quelle langue est rédigée votre page web.
Si vous écrivez une page web en français, mettez "fr". Si la page est en anglais,
mettez "en", en italien "it", espagnol "es" etc. etc.
2. La balise <head> contient quelques informations d'en-tête pour votre page web. Elle est
refermée un peu plus loin.
1.A l'intérieur de la balise <head>, vous trouvez notamment la balise <title>. Elle est
très importante : c'est elle qui contient le titre de votre page web. Ici, le titre est
"Bienvenue sur mon site !", mais c'est à vous de mettre le bon titre de votre page.
2. Ensuite, vous pouvez avoir une balise <meta>. Il existe beaucoup de balises de ce
type, mais elles ne sont pas indispensables. Seule celle qui se trouve dans lřexemple est
indispensable : elle sert à indiquer que vous allez taper des caractères spécifiques au
français (éèàê etc...).
3. Enfin, après la fermeture de la balise <head> commence une nouvelle balise : <body>
C'est entre <body> et </body> que vous taperez le contenu de notre page web. En clair, c'est
entre ces 2 balises que nous allons passer 99% de notre temps.
Pour le moment, il n'y a rien entre ces 2 balises, donc la page n'affiche rien (il y a un fond
blanc comme vous avez pu le constater tout à l'heure).
Encore une fois, retenir ce que cela signifie exactement n'est pas indispensable. Ce qui est
indispensable, c'est de se servir de ce modèle à chaque fois que vous créerez une nouvelle page
web.
III.2.2. Les commentaires
Les commentaires sont des informations que vous écrivez pour vous. Les commentaires
n'apparaissent pas aux yeux des visiteurs.
Vous pouvez par exemple utiliser les commentaires pour marquer des repères si votre page
XHTML est très longue, ou pour vous servir de rappel.
Un commentaire est une balise un peu spéciale commençant par 
Voici un exemple de commentaires dans le code de tout à l'heure :
Code : XHTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
3 <head>
4 <title>Bienvenue sur mon site !</title>
5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
6 </head>
7 <body>
8 
9 </body>
10 </html>

5
III.2.3. Les paragraphes
Vous avez donc envie d'écrire du texte dans votre page web, mais vous ne savez pas comment
procéder?
En XHTML, les choses sont plutôt simples : cela fonctionne en paragraphes. Chaque paragraphe se
trouve entre les balises <p> et </p> (qui signifient "paragraphe").
Regardez ce bout de code, c'est un petit paragraphe écrit en XHTML :
Code : XHTML
<p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test, alors soyez indulgents s'il
1
vous plaît, j'apprends petit à petit comment ça marche à l'aide des tutoriels … </p>
 <p> signifie "Début du paragraphe"

 </p> signifie "Fin du paragraphe"
Code : XHTML
1 strict.dtd">
3 <head>
6 </head>
7 <body>
8 <p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test, alors soyez indulgents s'il vous plaît,
9 j'apprends petit à petit comment ça marche à l'aide des tutoriels…. </p>
10 </body>
</html>
III.2.4. Sauter une ligne
En XHTML, si vous appuyez sur la touche "Entrée", cala ne va pas créer une nouvelle ligne comme
vous avez l'habitude en traitement de texte. Il existe une balise "Aller à la ligne" ! C'est une balise
seule qui sert juste à indiquer qu'on doit aller à la ligne : <br />. Vous devez obligatoirement la
mettre à l'intérieur d'un paragraphe, donc <br /> être à l'extérieur des balises <p></p>.Voici,
exemple de code source :
Code : XHTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3 <head>
6 </head>
7 <body>
8 <p>
9 Bonjour et bienvenue sur mon site !<br />
10 Ceci est mon premier test, alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment ça marche à l'aide
11 des tutoriels du Site….
12 </p> <p>
13 Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous
14 assure que vous allez être surpris !
15 </p>
16 </body>
17 </html>

6
Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de
lignes, mais normalement vous n'aurez pas besoin de le faire quand vous connaîtrez le CSS.
 <p> </p> : pour organiser son texte en paragraphes.

 <br /> : pour aller à la ligne.
III.2.5. Les titres
Rédiger du texte c'est bien, mais donner un titre à votre texte c'est encore mieux.
En XHTML, on a le droit d'utiliser 6 niveaux de titres différents.
Cela signifie qu'on peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins
important", "Ceci est un titre encore moins important" etc...On a donc 6 balises de titre différentes
que l'on peut utiliser :
 <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page
en haut.
 <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et
leur donner un titre.
 <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous
voulez)
 <h4> </h4> : titre encore moins important.
 <h5> </h5> : titre pas important.
 <h6> </h6> : titre vraiment pas important du tout.
Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page dans la
barre de titre du navigateur comme nous l'avons vu. Les titres <h1> et compagnie eux, servent à créer des
titres qui seront affichés dans la page web.
Code : XHTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 <head>
7 </head>
8 <body>
9 <h1>Titre super important</h1>
10 <h2>Titre important</h2>
11 <h3>Titre un peu moins important (sous-titre)</h3>
12
13 <h4>Titre pas trop important</h4>
14 <h5>Titre pas important</h5>
15 <h6>Titre vraiment pas important du tout</h6>
16 </body>
17 </html>

7
Code : XHTML
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
1
<head>
2
<title>Le Site du Zér0</title>
3
4
5
</head>
6
<body>
7
<h1>Bienvenue sur le Site du Zér0 !</h1>
8
9
<p>
10
Bonjour et bienvenue sur mon site : le Site du Zér0.<br />
11
Le Site du Zér0, qu'est-ce que c'est ?
12
</p>
13
14
<h2>Des cours pour débutants</h2>
15
<p>
16
Le Site du Zér0 vous propose des cours (tutoriels) destinés aux débutants : aucune connaissance n'est requise
17
pour lire ces cours !
18
</p>
19
<p>
20
Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un site web, construire des cartes en 3D
21
avec le logiciel Hammer etc...
22
</p>
23
24
<h2>Une communauté active</h2>
25
<p>
26
Vous avez un problème, un élément du cours que vous ne comprenez pas ? Vous avez besoin d'aide pour créer
27
votre site ?<br />
28
Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul dans ce cas, et vous trouverez très
29
certainement quelqu'un qui vous aidera aimablement à résoudre votre problème.
30
</p>
</body>
</html>
III.2.6. Mettre en valeur le texte

Si, à l'intérieur de vos paragraphes, il y a plusieurs mots que vous aimeriez mettre en valeur, XHTML met à
votre disposition 2 balises :
 La première permet de mettre "un peu" en valeur les mots de votre texte.
 La seconde permet de bien mettre en valeur les mots.
Nous allons voir quelles sont ces balises et comment les utiliser.

8
III.2.7. Mettre un peu en valeur
Pour mettre "un peu" en valeur votre texte, vous devez utiliser la balise <em> </em>Son utilisation est très
simple : entourez les mots à mettre en valeur par ces balises.
Code : XHTML
1 strict.dtd">
3 <head>
6 </head>
7 <body>
8 <p>
10 Ceci est mon premier test, alors <em>soyez indulgents</em> s'il vous plaît, j'apprends petit à petit comment
11 ça marche à l'aide des tutoriels du Site du Zér0.
12 </p>
13 </body>
</html>
Comme vous pouvez le voir, le texte avec la balise <em> est mis en italique. Vous pouvez donc vous servir
de cette balise pour mettre des mots en italique.
III.2.8. Mettre bien en valeur
Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort", ou "important" si vous
préférez. Elle s'utilise exactement de la même manière que <em> :
Code : XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 <head>
6 </head>
7 <body>
8 <p>
10 Ceci est mon premier test, alors <strong>soyez indulgents</strong> s'il vous plaît, j'apprends petit à
11 petit comment ça marche à l'aide des tutoriels du Site du Zér0.
12 </p>
13 </body>
</html>
III.2.9. Mettre en exposant ou en indice
Pour mettre en exposant certains mots ou caractères, on utilise la balise <sup>.

Les mots seront alors affichés en hauteur. Par exemple :
Code : XHTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
2 strict.dtd">
4 <head>
5 <title>Un peu d'histoire...</title>
7 </head>
8 <body>
9 <h1>Un peu d'histoire...</h1>

9
10 <p>
11 <em>Le saviez-vous ?</em><br />
12 Le langage XHTML est le langage qui nous permet de créer des sites web en ce début de XXI<sup>ème</sup>
13 siècle.<br />
14 Avant, vers la fin du XX<sup>ème</sup>, on utilisait le langage HTML, qui disparaît aujourd'hui peu à peu au profit
15 de XHTML
</p>
</body>
</html>
Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne en petit), on utilise cette fois la balise
<sub>.
Code : XHTML
1 <p>
2 x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
3 </p>
III.2.10. Les citations
On peut faire 2 types de citations :
 Des citations courtes, dans un paragraphe : les citations courtes s'effectuent à l'intérieur d'un
paragraphe. On encadre la citation par la balise <q>, qui fonctionne comme <em>, <strong>, <sup>
etc...Voici un exemple de citation courte au milieu d'un paragraphe :
Code : XHTML
<p>Vous souvenez-vous de la phrase célèbre qu'a prononcé Neil Armstrong en posant le premier pied
1 sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q>. C'était un
certain 20 Juillet 1969...</p>
 La citation, sur un navigateur récent comme Mozilla Firefox, est entourée de guillemets, mais IE lui
ne fait rien de particulier (essayez sur Firefox et IE !). Sous IE donc, la balise <q> n'a aucun effet
particulier. Mais en CSS, on peut décider de la façon dont vous voulez afficher les citations courtes
(en couleur, en italique etc...)
 Des citations longues, hors d'un paragraphe : si vous avez besoin d'effectuer une citation assez
longue, vous devrez utiliser la balise <blockquote>. Vous devez mettre des balises de paragraphe
<p> à l'intérieur du blockquote comme ceci :
Code : XHTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

4 <head>
7 </head>
8 <body>
9 <h1>Le Corbeau et le Renard</h1>
10 <p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La Fontaine</em> :</p>
11 <blockquote>
12 <p>
13 Maître Corbeau, sur un arbre perché,<br />
14 Tenait en son bec un fromage.<br />
15 Maître Renard, par l'odeur alléché,<br />
16 Lui tint à peu près ce langage :<br />
17 "Hé ! bonjour, Monsieur du Corbeau.<br />
18 Que vous êtes joli ! que vous me semblez beau !<br />
19 Sans mentir, si votre ramage<br />

10
20 Se rapporte à votre plumage,<br />
21 Vous êtes le Phénix des hôtes de ces bois."<br />
22 A ces mots le Corbeau ne se sent pas de joie ;<br />
23 Et pour montrer sa belle voix,<br />
24 Il ouvre un large bec, laisse tomber sa proie.<br />
25 Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
26 Apprenez que tout flatteur<br />
27 Vit aux dépens de celui qui l'écoute :<br />
28 Cette leçon vaut bien un fromage, sans doute. "<br />
29 Le Corbeau, honteux et confus,<br />
30 Jura, mais un peu tard, qu'on ne l'y prendrait plus.
31 </p>
32 </blockquote>
33 </body>
</html>
 Vous remarquez que les citations longues sont mises légèrement en décalé sur la droite.
Les balises <q> et <blockquote> servent toutes deux à effectuer une citation. Oui, mais quelle est la
différence ?
En XHTML, on distingue 2 types de balises :
 Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe. C'est le
cas notamment des balises <strong>, <em>, <q> etc...
 Les balises de type bloc : ces balises servent à structurer la page en plusieurs "blocs". La première
qu'on a apprise, c'est la balise <p>, mais il y a aussi les balises de titre <h1>, <h2>,
<blockquote>...Vous ne devez PAS mettre de titre ou de citation longue à l'intérieur d'un paragraphe.
Chacune de ces balises constitue un bloc séparé.
En dehors de ces deux balises, il existe aussi la balise <cite> qui concerne les citations courtes :
La balise <cite> affiche son contenu avec un style spécifique qui varie suivant les navigateurs. Cette balise
n'entraine pas de saut de ligne (ni avant ni après), elle est utilisée pour des citations courtes ou des références
alors que le tag <blockquote> est adapté à des citations longues.
Exemple :
Votre spiritualité, vous la définissez comment ?
<cite>
oh, elle est très simple, elle est faite de oui et de non (...)
</cite>
III.2.11. Les acronymes, abréviations et définitions
 Un acronyme est une suite d'initiales utilisée généralement pour raccourcir certains noms,
comme par exemple XHTML, FBI, CSA etc...
Le problème des acronymes, c'est qu'on ne sait pas toujours ce qu'ils signifient. Pour que le
visiteur sache de quoi il s'agit, vous devez entourer votre acronyme de la balise <acronym>
La nouveauté ici, c'est que vous allez devoir utiliser un attribut (title) pour expliquer ce que
signifie l'acronyme.

11
Code : XHTML
<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui

1
permet de créer un site web.</p>
Comme vous pouvez le voir, si vous pointez la souris sur XHTML, la description de l'acronyme
apparaît. Vous noterez encore une petite différence entre IE et Firefox : Firefox souligne en
pointillés l'acronyme, tandis qu'IE... ne fait rien
 Les abréviations sont monnaie courante sur internet et, jusqu'à preuve du contraire, aucun
programme n'a encore la faculté de reconnaître et comprendre des abréviations sans orthographe
réelle. C'est pourquoi j'insiste pour que vous utilisiez les balises qui suivent aussi souvent que
nécessaire. Il en va de la cohérence de votre document.
La balise : <abbr>
Cette balise est utilisée pour indiquer que ce qu'elle contient est une abréviation. Cette dernière n'est
vraiment utile que si l'on indique son sens grâce à l'attribut title.
Type de balise : inline
Attributs pouvant être employés : lang (pour la langue), dir (pour le sens de la lecture, ltr : de
gauche vers la droite, rtl : de la droite vers la gauche (pour lřhébreu par exemple), title.
Exemple d'utilisation :
Tu n'es pas cap de faire du XHTML ?
Source :
<p>
Tu n'es pas <abbr title="capable" lang="fr" dir="ltr">cap</abbr> de faire du
XHTML ?
</p>
La balise : <dfn>
La balise s'utilise lorsque qu'un paragraphe est consacré à la définition d'un mot et que ce mot est
contenu dans ce dernier. Attention, il existe les listes de définitions qui peuvent être utilisées
lorsqu'il s'agit de définitions détachées du texte et non de sa continuité.
Attributs pouvant être employés : lang, dir, title (cf. la balise <abbr> pour explication).
Exemple d'utilisation :
Le labrador est un chien doux et affectueux.
Source :
<p>
Le <dfn title="Un Chien"> labrador </dfn> est un chien doux et affectueux.
<p>

12
III.2.12. Les objets
Un objet, en XHTML, c'est des données intégrées au document et qui ne dispose pas de leur balise
spécifique. Cela peut aller de l'applet Java à la bande son, de la vidéo à l'animation flash etc. On ne
peut malheureusement pas vous décrire tous les types d'objets possibles et leur utilisation, mais on
décrira simplement leur utilisation pour quelques exemples concrets et fréquents sur Internet.
 La balise object
 La balise param
La balise <object>
Utilisé pour créer un nouvel objet dans un document.
Type de balise : block
Quelques attributs pouvant être employés : lang, dir, title, classid, codebase, codetype, data, type,
archive, declare, standby, usemap, name, width, height. Dans le tableau ci-après la liste des attributs
et événements. Cette mise en forme indique que l'attribut est obligatoire dans la balise donnée. Les
attributs obsolètes ont été volontairement omis.

13
NOM TYPE UTILITE VALEURS
Liste d'adresses de fichiers, séparées par des espaces, prenant en charge <url>
Archive Attribut
le chargement et l'exécution de l'élément object. (Universal Ressource Locator)
Permet de définir la liste des classes CSS affectées à la balise, séparées
Class Attribut <chaîne>
par des espaces.
Indique l'adresse de l'implémentation d'un object tel qu'un fichier de
<url>
Classid Attribut classe programme, un applet java, ou un plugin, à charger par le
navigateur.
Indique le chemin d'accés utilisé pour résoudre les adresses relatives
Codebase Attribut <url>
spécifiées par les attributs classid, data et archive.
Indique le type MIME du contenu des informations pointées par l'attribut
Codetype Attribut <type-mime>
classid.
Data Attribut Définit l'emplacement des données utilisées par l'objet. <url>
La déclaration de l'objet n'aura qu'une valeur informative, il ne sera pas
Declare Attribut declare
chargé dans l'immédiat.
Dir Attribut Détermine le sens de la lecture et de l'écriture du texte. ltr | rtl
Height Attribut Définit la hauteur de l'élément en pixels ou en pourcentage. <entier>
Id Attribut Permet d'affecter à une balise, un identifiant unique au document. <chaine>
Name Attribut Définit le nom donné à un élément. <chaine>
Standby Attribut Message affiché pendant le chargement de l'objet. <chaine>
Définit l'index qui représente la position de l'élément dans l'ordre
Tabindex Attribut <entier>
d'exploration par la touche tabulation.
Permet d'afficher des informations concernant un élément lorsque le
Title Attribut <chaine>
pointeur de la souris reste immobile au dessus de ce même élément.
Type Attribut Définit le type MIME du document en lien. <type-mime>
Permet d'associer une map à l'élément. S'il s'agit d'un élément input, il
Usemap Attribut devra être de type image, s'il s'agit de l'élément object, son attribut data <id>
devra indiquer l'adresse d'une image.
Width Attribut Définit la largeur de l'élément en pixels ou en pourcentage. <entier>
xml:lang Attribut Définit une langue dans laquelle le contenu d'un élément est rédigé. fr | en | ...
Définit l'espace de nommage XHTML de l'élément. Il est recommandé
Xmlns Attribut http://www.w3.org/1999/xhtml
d'utiliser cet attribut pour l'élément racine : html.
Evénement survenant lorsque l'utilisateur clique sur l'élément. Sert à
Onclick Événement <chaine>
utiliser des instructions ou des fonctions de script.
Evénement survenant lorsque l'utilisateur double-clique sur l'élément.
ondblclick Événement <chaine>
Sert à utiliser des instructions ou des fonctions de script.
Evénement survenant lorsque, le pointeur de la souris étant sur l'élément,
onkeydown Événement l'utilisateur appuie sur une touche du clavier. Sert à utiliser des <chaine>
instructions ou des fonctions de script.
Evénement survenant lorsque, le pointeur de la souris étant au dessus
onkeypress Événement d'un élément, l'utilisateur appuie sur une touche du clavier puis la <chaine>
relâche. Sert à utiliser des instructions ou des fonctions de script.
Evénement survenant lorsque, le pointeur de la souris étant sur l'élément,
Onkeyup Événement l'utilisateur relâche une touche du clavier. Sert à utiliser des instructions <chaine>
ou des fonctions de script.
Evénement survenant lorsque, le pointeur de la souris étant sur l'élement,
onmousedown Événement l'utilisateur appuie sur un bouton de la souris. Sert à utiliser des <chaine>
Evénement survenant lorsque, le pointeur de la souris étant sur un
onmousemove Événement élément, il est déplacé en dehors de l'élément. Sert à utiliser des <chaine>
Evénement survenant lorsque le pointeur de la souris quitte l'élément au
onmouseout Événement dessus duquel il était. Sert à utiliser des instructions ou des fonctions de <chaine>
script.
Evénement survenant lorsque le pointeur de la souris vient au dessus d'un
onmouseover Événement <chaine>
élément. Sert à utiliser des instructions ou des fonctions de script.
Evénement survenant lorsque, le pointeur de la souris étant sur un
onmouseup Événement élément, l'utilisateur relâche un bouton de la souris. Sert à utiliser des <chaine>

14
La balise <param>
Permet de passer des paramètres à l'objet qui la contient.
Attributs pouvant être employés : name, value.
Quelques exemples
incorporer un document HTML
<object data="data/test.html" type="text/html" width="300" height="200">

alt : <a href="data/test.html">test.html</a>
</object>
incorporer un document pdf
<object data="data/test.pdf" type="application/pdf" width="300" height="200">

alt : <a href="data/test.pdf">test.pdf</a>
</object>
Vous pouvez spécifier des paramètres relatifs au document par l'intermédiaire de la balise param. IE
a parfois besoin du paramètre src pour localiser correctement la source.
incorporer un document wav
<object type="audio/x-wav" data="data/test.wav" width="200" height="20">

<param name="src" value="data/test.wav">
<param name="autoplay" value="false">
<param name="autoStart" value="0">
alt : <a href="data/test.wav">test.wav</a>
</object>
Le paramètre autoplay est compréhensible par QuickTime, autoStart par Windows Media Player
et Real Audio.
III.2.13. Les scripts
Les scripts en XHTML ne différent qu'en peu de choses de ce que nous avons pu connaître avant.
Cependant, il est important de signaler que l'attribut language est périmé et qu'on utilise l'attribut
type en remplacement. De plus, il est tout à fait conseillé de ne pas inclure les scripts aux pages,
mais de les utiliser en document externes.
Source :
<script type="text/javascript" src="javascript.js">

..
..
..
</script>

15
Exemple
<body>
<script type="text/javascript">
document.write ("Un")
document.write ("Trois")
</script>
</body>
Cet exemple affichera également UnTrois
III.2.14. Lien relatif ou absolu ?
On distingue 2 types de liens :
 Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML
(ou alors il sera bien pauvre !). Si vous voulez faire un lien d'une page à une autre, vous
ferez le plus souvent ce qu'on appelle des liens relatifs. Un lien relatif est assez court, par
exemple "fichiers/cible.html".
 Les liens vers d'autres sites : ce sont par exemple des liens vers
"http://www.siteduzero.com", ou vers un fichier précis (par exemple
"http://www.siteduzero.com/fichier.html"). Ces liens sont appelés liens absolus et,
contrairement aux liens relatifs, ils commencent souvent par "http://".
Les liens les plus simples à priori sont les liens absolus : http://www.siteduzero.com/page.html, on
peut avoir aussi des liens commençant par ftp://
Exemple : <a href="ftp://serveur/chemin/fichier..."> Université de Lomé </a>
Supposons maintenant que vous ayez 2 pages XHTML qui se trouvent dans le même dossier sur
votre disque dur :
c:\site\source.html
c:\site\cible.html
Vous voulez faire un lien de source.html vers cible.html. Là c'est très simple, comme les fichiers se
trouvent dans le même dossier il suffira d'écrire juste "cible.html" !
Si les fichiers ne se trouvent pas dans le même dossier :
 Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :

c:\site\dossier\cible.html
Le fichier source.html, lui, ne bouge pas de place.
Il faudra écrire le nom du dossier d'abord "dossier/cible.html". S'il y a plusieurs sous-
dossiers, il suffit de les écrire à la suite : "dossier1/dossier2/cible.html"
Ne confondez pas avec les antislash (\) de Windows : sur Internet, on utilise TOUJOURS
des slash (/)
 Si votre fichier cible.html se trouve dans un dossier parent, par exemple dans :
c:\cible.html
Alors là, pour remonter d'un dossier il faudra écrire "../cible.html"
Vous allez voir en pratiquant que c'est en fait vraiment très simple avec des liens relatifs et intuitifs

16
à utiliser. Pour commencer, on mettra toutes nos pages .html dans le même dossier, il suffira juste
d'écrire le nom de la page vers laquelle amène le lien : "page.html" par exemple.
III.2.15. Un lien vers une autre page
Pour faire un lien, on utilise la balise <a>

On doit ajouter l'attribut "href" pour indiquer l'adresse de la page cible (la page vers laquelle le lien amène).
Code : XHTML
1 <p>Hep ! Je connais un site qui est vraiment super : le <a href="http://www.siteduzero.com">Site du Zér0</a><br />
2 N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'oeil ;)</p>
Vous mettez le texte du lien entre les balises <a> et </a>, et vous indiquez l'adresse de la page dans
le href=""
Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme :
http://www.site.com/?data=15&name=mateo21&source=ms
... Vous devrez remplacer tous les & par & comme ceci :
http://www.site.com/?data=15&name= [...] amp;source=ms
Vous ne verrez pas la différence, mais cela est nécessaire pour que votre page web respecte les
normes du XHTML.
Nous venons de faire ici un lien en absolu vers un autre site ("http://"...). Maintenant, nous allons
voir comment faire un lien en relatif.
Créons 2 pages : source.html et cible.html.
source.html contient un lien vers cible.html, et les 2 pages se trouvent dans le même dossier.
Voici comment on va procéder :
Code : XHTML
1 <h1>source.html</h1>
2
3 <p>Tu te trouves sur source.html<br />
4 Souhaites-tu visiter <a href="cible.html">le fichier cible.html</a> ?</p>
Code : XHTML
1 <h1>cible.html</h1>
2
3 <p>Bravo! Tu viens d'atterrir sur cible.html !</p>
Pour faire plus court, on a omis dans mes exemples les autres balises d'en-tête qui constituent
d'habitude une page XHTML (<html>, <head> etc...), mais il est bien entendu qu'il faut les mettre
pour faire une vraie page XHTML.
Voilà, tout le principe de la chose est là : le lien est <a href="cible.html"> ce qui est très court. Cela
implique par contre que la page cible.html se trouve dans le même dossier.
Si la page s'était trouvée dans un sous-dossier, on aurait fait le lien comme précédemment :
<a href="dossier/cible.html">

17
III.2.16. Une bulle d'aide sur le lien
Vous pouvez, si vous le désirez car ce n'est pas obligatoire, utiliser l'attribut title : une bulle d'aide s'affichera
lorsque vous pointerez sur le lien. Cela ressemblera à :
La bulle d'aide peut être utile pour informer le visiteur de quelque chose avant même qu'il n'ait cliqué sur le
lien.
Voici comment faire :
Code : XHTML
<p>Allez donc visiter le <a href="http://www.siteduzero.com" title="Site réservé aux débutants">Site du
1
Zér0</a></p>
III.2.17. Le cas des liens ouvrant une nouvelle fenêtre
Et si vous voulez que le lien s'ouvre dans une nouvelle fenêtre ?
Ce n'est pas possible.

Beaucoup de sites le font, c'est vrai, mais en XHTML il n'est plus possible d'ouvrir les liens dans
une nouvelle fenêtre.
C'est une décision qui a été prise : désormais on ne force plus les liens à ouvrir automatiquement
une nouvelle fenêtre. Ceci afin de ne pas gêner la navigation du visiteur qui n'a pas forcément envie
de voir plusieurs fenêtres ouvertes de son explorateur.
C'est au visiteur de décider lui-même s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj +
Clic sur le lien (fonctionne sur IE et Mozilla), ou encore mieux : Ctrl + Clic (pour ouvrir dans un
nouvel onglet dans Mozilla ;)).
Enfin, chose importante à savoir pour que vous compreniez un peu mieux : les personnes non-
voyantes qui surfent sur le web sont perturbées par l'ouverture d'une nouvelle fenêtre de leur
navigateur. Quand une nouvelle fenêtre s'ouvre, il n'est plus possible de faire "Précédente", et cela
perturbe beaucoup les personnes handicapées.
C'est aussi par respect pour ces personnes-là qu'on a décidé aujourd'hui de ne plus forcer un lien à
ouvrir une nouvelle fenêtre du navigateur. Cette règle est vraiment très importante.
S'il est impossible d'ouvrir une nouvelle fenêtre en XHTML, on peut en revanche le faire à l'aide de
Javascript.
III.2.18. Un lien pour envoyer un mail
Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens
"mailto". Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de
l'attribut href comme ceci :

18
href="mailto:votrenom@bidule.com"
Il suffit donc de faire commencer le lien par "mailto:" et d'écrire l'adresse e-mail où on peut vous
contacter. Un exemple :
Code : XHTML
1 <h2>Me contacter</h2>
2 <p>Pour me contacter,
3 <a href="mailto:akokou@free.fr">cliquez ici</a> !</p>
Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-
mail.
III.2.19. Un lien vers une ancre
Une ancre, c'est une sorte de point de repère que vous pouvez mettre dans de longues pages
XHTML.
En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la
même page pour amener le visiteur directement à la partie qui l'intéresse.
Pour créer une ancre ou signet, il suffit de rajouter l'attribut id à une balise qui va alors servir de
repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va vous servir ensuite pour faire le lien
vers cette ancre. Par exemple :
<h2 id="mon_ancre">Titre</h2>
Au lieu de lřattribut id on peut utiliser lřattribut <a name>
Pour lřexemple précédent, on peut faire : <a name="mon_ancre"><h2>Titre</h2></a>
Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse
(#) suivi du nom de l'ancre. Exemple :
<a href="#mon_ancre">Aller vers l'ancre</a>
Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à
condition que la page comporte suffisamment de texte pour que les barres de défilement se
déplacent automatiquement).
Voici un exemple de page comportant beaucoup de textes et utilisant les ancres.
Code : XHTML
1
2 <h1>Ma grande page</h1>
3
4 <p>
5 Aller directement à la partie traitant de :<br />
6 <a href="#cuisine">La cuisine</a><br />
7 <a href="#rollers">Les rollers</a><br />
8 <a href="#arc">Le tir à l'arc</a><br />
9 </p>
10 <h2 id="cuisine">La cuisine</h2>
11
12 <p>.</p>
13 <h2 id="rollers">Les rollers</h2>
14
15 <p>.</p>
16
17 <h2 id="arc">Le tir à l'arc</h2>
18
19 <p>.</p>
20

19
S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas,
vous pouvez soit rajouter du texte dans la page pour qu'il y ait (encore) plus de texte, ou bien
réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le
côté.
L'attribut id sert à donner un nom "unique" à une balise, pour s'en servir de repère. Ici, on s'en sert
pour faire un lien vers une ancre, mais en CSS cela nous sera très utile pour "repérer" une balise
précise.
III.2.20. Lien vers une ancre située dans une autre page
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi
du nom de l'ancre.
Par exemple :
<a href="cible.html#rollers">
... vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "rollers".
Voici une page qui contient 3 liens, chacun amenant vers une des ancres de la page de l'exemple
précédent :
Code : XHTML
1 <h1>Le Mégamix <sup>TM</sup></h1>
2 <p>
3 Rendez-vous quelque part sur une autre page :<br />
4 <a href="ancres.html#cuisine">La cuisine</a><br />
5 <a href="ancres.html#rollers">Les rollers</a><br />
6 <a href="ancres.html#arc">Le tir à l'arc</a><br />
7 </p>
III.2.21. Différents formats d'images
Quand vous disposez dřune image, vous avez la possibilité de l'enregistrer dans plusieurs "formats"
différents. Le poids (en Ko) de l'image sera plus ou moins élevé selon le format choisi, et la qualité
de l'image va changer.
Par exemple, le logiciel de dessin Paint (même si c'est loin d'être le meilleur) vous propose de
choisir entre plusieurs formats lorsque vous enregistrez une image :

20
Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image animée...). Notre
but ici est de faire le tour des différents formats que l'on utilise sur le web, pour que vous les
connaissiez et sachiez choisir celui qui convient le mieux à votre image.
Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut
dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à
charger.
Voici les formats d'images que l'on utilise sur le web :
 JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos, et
c'est d'ailleurs souvent dans ce format-là qu'est l'image de votre fond d'écran. Les images de
type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" (cela revient au
même).
 PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des
graphiques (à tout ce qui n'est pas une photo"). L'avantage du PNG, c'est qu'il peut être
rendu transparent, ce qui est très appréciable. Le PNG existe en 2 versions :
o PNG 8 bits : le PNG 8 bits est la version du PNG limitée à 256 couleurs. 256
couleurs c'est assez peu, quand on sait que le JPEG supporte plusieurs millions de
couleurs... Mais ça suffit bien souvent pour des petits graphiques
o PNG 24 bits : le PNG 24 bits est la version du PNG la plus évoluée, elle supporte
plusieurs millions de couleurs (comme le JPEG). Quel intérêt d'utiliser le PNG 24
plutôt que le JPEG ? Pour la transparence ! Cela permet de créer de beaux effets de
transparence facilement sur des éléments graphiques, notamment pour le design de
votre site web.
 GIF : c'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par
habitude). Aujourd'hui, le PNG est bien meilleur que le GIF : les images sont plus légères et
la transparence est meilleure. Le format GIF est limité à 256 couleurs (alors que le PNG
peut aller jusqu'à plusieurs millions de couleurs). Si je vous parle du GIF, c'est qu'il
conserve quand même un avantage que le PNG n'a pas : il peut être animé.
Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent
ils ne sont pas compressés, donc trop gros, donc pas du tout adaptés au web.
Si on résume, voici quel format adopter en fonction de l'image que vous avez :
 Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG.
 Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible car le
format est meilleur, sinon utilisez un GIF.
 Une image animée : utilisez un GIF animé.
Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en
minuscules, sans espaces ni accents. Par exemple : mon_image.png
Vérifiez aussi que l'extension est en minuscules, car Paint a tendance à enregistrer l'extension en
majuscules (mon_image.PNG).

21
III.2.22. Insérer une image
Pour insérer une image, on doit utiliser la balise <img />.

C'est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :
 src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre
un chemin en absolu (ex. : "http://www.site.com/fleur.png"), soit mettre le chemin en relatif
(ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier "images" vous
devrez taper :
src="images/fleur.png"
 alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image,
c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place
de l'image si celle-ci ne peut pas être téléchargée, ou sur les navigateurs de personnes
handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Pour la
fleur, on mettrait par exemple :
alt="Une fleur"
Il faut absolument que vous mettez le texte alternatif. Si vous ne le faites pas, votre page ne
sera plus une page XHTML "valide" et votre site sera détecté comme non conforme aux
normes.
Voici un exemple d'insertion d'image :
Code : XHTML
1 <p>
2 Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
3 <img src="images/hawai.jpg" alt="Photo de Hawaii" />
4 </p>
Evitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Voici
un chemin qui va poser problème :
"Images du site/Image tout bête.jpg"
Il faudrait supprimer les espaces (ou les remplacer par le symbole "_"), supprimer les accents et tout
mettre en minuscules comme ceci :
"images_du_site/image_toute_bete.jpg"
Sachez donc que si votre image ne s'affiche pas, c'est très certainement parce que le chemin est
incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers et tout ira bien.
Notez aussi que les images se mettent obligatoirement à l'intérieur d'un paragraphe (<p></p>). Si
vous ne le faites pas, comme pour "alt" la page s'affichera peut-être correctement mais elle ne sera
alors plus valide.

22
III.2.23. Une bulle d'aide
L'attribut fait pour afficher une bulle d'aide est le même que pour les liens, c'est title. Cet attribut est
facultatif (contrairement à "alt").
Voici ce que cela donne :
Code : XHTML
1 <p>
2 Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
3 <img src="images/hawai.jpg" alt="Photo de Hawaii" title="Ca fait envie hein ?" />
4 </p>
III.2.24. Image cliquable
Comme le texte, une image peut très bien servir de lien. Au lieu de mettre du texte entre les balises
<a></a>, vous pouvez très bien mettre une balise <img /> !
Par exemple :
Code : XHTML
<p>
1 Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur
2 l'image ci-dessous :<br />
3 <a href="http://www.siteduzero.com"><img src="images/hawai.jpg" alt="Photo de
4 Hawaii" title="Clique pour voyager !" /></a>
</p>
L'ennui, c'est qu'un cadre bleu (ou violet) s'affiche autour de votre image cliquable.
Heureusement, on va pouvoir "enlever" ce cadre grâce à CSS.
III.2.25. Les images réactives ("images map")
On peut créer à l'intérieur même d'une image des zones cliquables.

Cela est possible grâce à l'attribut usemap utilisé conjointement avec la balise <map> ... </map>.
L'attribut usemap de la balise <img> pointe vers la balise <map> contenant le découpage.
La balise <map> a pour attribut le nom qu'on lui donne (name="nom") et contient les zones
cliquables déclarées par les balises <area> ... </area>.
Balises Attribut Valeur Effet Visuel
<map> ... </map> name
rect Rectangle (ses coordonnées sont:

"abscisse sup gauche, ordonnée sup gauche,
abscisse inf droit, ordonnée inf droit")
shape circle Cercle (ses coordonnées sont :
"abscisse centre, ordonnée centre, rayon")
<area> poly Polygone (ses coordonnées sont :
"la suite des coordonnées séparées par des virgules")
href="url" Lien vers l'URL
coords= Contient les coordonnées de la zone
"XX,XX,XX,XX" cliquable entre guillemets et
séparées par des virgules

23
Un exemple :
<map name="nommap">
<area shape="rect" href="debut.html" coords="0,0,48,28" title="Zone rectangulaire">
<area shape="circle" href="precedent.html" coords="50,30,10" title="Zone circulaire">
<area shape="poly" href="suivant.html" coords="60,50,80,30,100,40,50,100"
title="Zone polygonale">
</map>
<img src="images/image.gif" width=150 height=70 usemap="#nommap" />
III.2.26. Ligne horizontale
On peut aussi insérer une ligne horizontale grâce à la balise <hr />.
Balise Attribut Effet Visuel
size
<hr width=20% size=5 align=left color="blue"/> width
align
color
III.2.27. Aligner plusieurs éléments
Balise Attribut Effet Visuel

<div> et </div> align balise qui permet dřaligner
plusieurs éléments
III.2.28. Blocs d'éléments

On peut citer :
Conteneur Effet Visuel
<address> et </address> Pour écrire une adresse (généralement en fin de document)
<pre> et </pre> Permet d'écrire un texte PREFORMATTE en conservant entre autres
les espaces et saut de ligne définis à lřécran

24
III.2.29. Les listes
Une liste est un paragraphe structuré contenant une suite d'articles. Il en existe trois types:
 Ordonnée (ol = Numbered list)
 Non ordonnée (ul = Bullet list)
 De définition (dl = Definition list)
Voici leur syntaxe :
Conteneur Type de liste Effet Visuel
<ol>
<li> article 1 </li> 1. article 1
<li> article 2 </li> Ordonnée 2. article 2
</ol>
<ul>
<li> article 1 </li>  article 1
<li> article 2 </li> Non ordonnée  article 2
</ul>
<dl> Terme 1
<dt>Terme 1</dt>
<dd>Définition 1</dd> Définition 1
<dt>Terme 2</dt> De définition
<dd>Définition 2</dd> Terme 2
</dl>
Définition 2
(li= list items, éléments de liste)
Il existe des attributs spécifiques aux listes, voici quelques-uns :
Attribut Valeur Effet Visuel

start définit le premier numéro
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 O puce circulaire
square  puce carrée
disc  puce en disque
III.2.30. Les tableaux
On a souvent besoin de présenter des informations mieux structurées qu'avec des listes. Les
tableaux permettent de les afficher en lignes et en colonnes.
Les tableaux sont définis comme étant des suites de lignes.
Le tableau est encadré par les marqueurs<table> et </table>.
Le titre du tableau est encadrée par <caption> </caption>.
Chaque ligne est encadrée par <tr> </tr> (table row : ligne du tableau).
Les cellules d'en-tête sont encadrées par <th> </th> (table header : entête du tableau).
Les cellules de valeur sont encadrées par <td> </td> (table data : donnée de tableau).

25
Les cellules peuvent contenir les éléments comme :
- du texte,
- des images,
- des liens,
- des arrière-plans,
- et même des tableaux.
* Par exemple le tableau

<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>
</tr>
</table>
donne le résultat ci-après :
Voici le titre du tableau

Titre A1 Titre A2 Titre A3 Titre A4
Titre B1 Valeur B2 Valeur B3 Valeur B4
Il est aussi possible de modifier la couleur de la cellule,
<td bgcolor="#$$$$$$"> *** </td>
Comme exercice modifions
<td> Valeur B2 </td> en <td bgcolor="#0000FF"> Valeur B2 </td>

26
NB. Pour les informations complémentaires sur les couleurs (voir annexe)
* Les attributs
Attribut Balises auxquelles il s'applique Valeur Effet Visuel
thead center centré
left gauche
align right droite
justify justifié
caption top au-dessus
bottom en-dessous
left à gauche
right à droite
valign thead
(alignement vertical) tbody top en haut
th middle au milieu
tr bottom en bas
td
border=n table taille de la bordure
cellpadding=n table espacement de n pixels entre le
contenu
des cellules et son encadrement
cellspacing=n table Epaisseur de la grille intérieure
Float table right Spécifie la position du texte qui
left suivra </table>
cols=n table Spécifie le nombre de colonnes
frame void aucune valeur par défaut

(contrôle les éléments above côté supérieur uniquement
individuels below côté intérieur uniquement
d'encadrement table hsides côtés horizontaux
du tableau) vsides côtés verticaux
lhs côté gauche uniquement
rhs côté droit uniquement
box Quatre côtés
border Quatre côtés
rules none aucune bordure (par défaut)
(contrôle les éléments rows ligne
de la grille des cellules : table cols colonne
bordures internes) all tous
thead
tbody Fait déborder les cellules sur les
colspan th colonnes adjacentes
tr
td
thead
Rowspan tbody Fait déborder les cellules sur les
th lignes adjacentes
tr
td

27
III.2.31. Qu'est-ce qu'un marqueur de style ?
Les marqueurs de style modifient la typographie du texte. Ils peuvent être imbriqués dans
d'autres marqueurs de style de la même façon qu'on le ferait avec un traitement de texte.
Voici une liste de quelques marqueurs de style reconnus par la plupart des browsers (chacun
à sa façon si bien que certains ne font pas la différence entre ces styles).
Balise de style Effet Visuel
<u> et </u> Souligne le texte
<big> et </big> Police plus grande
<blink> et </blink> Clignote (propre à Netscape, firefox)
<cite> et </cite> Citation moyenne
<code> et </code> Instruction
<del> et </del> Texte supprimé mais qui reste présent
<dfn> et </dfn> Définition d'instance
<em> et </em> Italique
<i> et </i> Italique
<ins> et </ins> Nouveau texte inséré à cet endroit
<kbd> et </kbd> Clavier - Suite de caractères devant être tapés tel quel
<person> et </person> Accentuation du nom d'une personne
<q> et </q> Encadre le texte par des guillemets
<s> et </s> Comme strike (barré)
<samp> et </samp> Exemple
<small> et </small> Police plus petite
<strong> et </strong> Forte accentuation rendue par du gras
<strike> et </strike> Texte barré (comme S)
<sub> et </sub> Texte en Indice
<sup> et </sup> Texte en Exposant
<tt> et </tt> Caractère de machine à écrire
<var> et </var> Nom d'une variable
<font size=?> et </font size> Taille des caractères.
Elle peut être indiquée de deux façons :
- avec un nombre de 1 à 7. La valeur par défaut est 3
- de façon relative par rapport à la valeur par défaut (ici
0). Soit -3 -2 -1 0 +1 +2 +3
<font color=#$$$$$$$> et </font color> Couleur des caractères
Voici les codes de quelques couleurs :
Bleu : #0000FF Blanc : #FFFFFF
Rouge : #FF0000 Gris clair : #C0C0C0
Vert : #00FF00 Violet : #8000FF
Jaune : #FFFF00 Noir : #000000
 Commentaires, ne pas afficher
<marquee>et</marquee> Faire défiler un texte (propre à Netscape, firefox)

28
Exemple :
<html>
<head>
<title>Exemple </title>
</head>
<body>
<p>
<! -- Début -->
texte simple
<b>texte en gras</b> <br/>
<strong>texte en gras</strong><br/>
<i>texte en italique</i><br>
<em>texte en italique</em><br/>
<b><i>texte en gras et en italique</i></b><br/>
<font size=5>texte</font> <br/>
<font color="#0000FF">texte en bleu</font> <br/>
<marquee>Défilement de texte</marquee> <br/>
<marquee direction="down" behavior="alternate">Défilement de
texte</marquee><br/>
<blink>Togo</blink>
<! -- Fin -->
</p>
</body>
</html>
III.2.32. Qu'appelle-t'on "Méta Tag" ?

Les meta tags sont des marqueurs spéciaux situés dans l'en-tête (c'est-à-dire la balise head,
avant la balise body) de votre document XHTML qui servent à aider les moteurs de recherche
comme AltaVista, GOOGLE, etc. à indexer votre site Web.
Vous pouvez en écrire autant que vous voulez dans la balise d'en-tête les uns après les
autres.
Ils s'écrivent de la manière suivante :
<meta http-equiv="Nom du tag" content="Attribut">
Nom du tag Attribut Utilité
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é) après un
délai d'attente de x secondes.
robots all Permet au robot de référencer toute la page (par défaut)
follow Permet au robot de suivre les liens de la page
index Permet au robot d'indexer la page
nofollow Interdit au robot de suivre les liens
noindex Interdit au robot d'indexer la page
none Empêche le robot d'aller plus loin
window-target _top Force le browser à afficher la page dans une nouvelle fenêtre

29
Il en existe d'autres s'écrivant de la manière suivante :
<meta name="nom du tag" content="attribut">
Nom du tag Attribut Utilité
author "Informations sur l'auteur" Permet de rentrer des 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 Permet de préciser la date à laquelle la page ne
"date à laquelle la page expire" sera plus disponible
keywords "mot clé, mot clé, ..." Permet d'entrer les mots clés de votre page Web
rating general Type de contenu
rev "Votre@email" Permet de préciser l'e-mail du Webmestre
revisit-after "x days" ou x représente le Délai de nouvelle visite par le robot

nombre de jours
robots all Permet à tous les robots d'indexer
none Ne permet à aucun robot d'indexer
subject "Sujet de la page" Permet de préciser le sujet de la page
Exemple de description de Meta Tags du site Caramail.com
<head><title>Caramail : e-mail gratuit, dialogue en direct, forums de discussions</title>

<meta name="description" content="Service de création de boite et de compte e-mail
gratuit. A chacun son adresse personnalisée de courrier électronique.
L'accès à la messagerie instantanée permet de bénéficier
des services du site : la boutique caramail, les enchères avec Caraplazza, le dialogue en
direct et les forums de discussion.">
<meta name="keywords" content="Caramail, e-mail, gratuit, compte, courrier,
électronique, adresse, boutique, caraplazza, enchères, dialogue, en, direct,
messagerie, mail, instantanée, forums, de, discussions, mel, courriel, chat, discuter,
email">
<meta name="desc" content="CaraMail est un service gratuit de communication et de dialogue

entre internautes francophones. Retrouvez non seulement des outils comme l'e-mail, le dialogue en
direct et les forums, mais aussi une grande communauté de membres prête à vous accueillir !">
<meta name="outline" content="mail, courrier, message, chat, dialogue, salons, forum,

discussion, gratuit, jeu, concours, soirée">
</head>

30
III.2.33. Présentation des frames
Grâce à la technologie des frames (en français "cadres") il est désormais possible d'afficher
plusieurs page XHTML dans différentes zones ou cadres.
Pour ce faire, il faut un fichier qui contiendra l'agencement des cadres, c'est un fichier
XHTML qui a pour particularité d'avoir sa balise <body> remplacée par le conteneur <frameset>.
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.
NB. Avant que les exemples arrivent à tourner normalement, nous devons construire 3
pages html élémentaires que nous nous allons placer dans le même répertoire (dossier) que les
fichiers de frames.
frame1.html frame2.html frame3.html
<html> <html> <html>

<body> <body> <body>
<h1>FRAME 1</h1> <h2>FRAME 2</h2> <h2>FRAME 3<h2>
</body> </body> </body>
</html> </html> </html>
Exemple n°1
<frameset cols="20%,80%">
<frame src="frame1.html" name="gauche">
<frame src="frame2.html" name="droite">
</frameset>
Exemple n°2
<frameset rows="20%,80%">
<frame src="frame1.html" name="haut">
<frame src="frame2.html" name="bas">
</frameset>

31
Exemple n°3
<frameset rows="20%,80%">
<frame src="frame1.html" name="haut">
<frame src="frame2.html" name="bas_gauche">
<frame src="frame3.html" name="bas_droite">
</frameset>
</frameset>
On peut mettre un lien vers frame1.html dans le fichier frame2.html comme cible
frame3.html, on aura :
<html>
<body>
<a href="frame1.html" target="bas_droite"><h2>FRAME 2</h2></a>
</body>
</html>
 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 laissant l'autre
champ libre, la valeur s'ajuste automatiquement
cols pourcentage (entre 1 et 100) Cadre vertical
valeur en pixels
En fixant une seules des valeurs et en laissant l'autre
champ libre, la valeur s'ajuste automatiquement
frameborder Yes Indique si le cadre a
No une 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
Valeur de la couleur en hexadécimal la bordure
framespacing=n n est une valeur définissant l'espace entre les cadres Indique l'espace entre
les cadres

32
 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 Taille des marges latérales
spécifiant le nombre
de pixels
marginheight=n n est un entier Taille des marges du haut et du bas
spécifiant le nombre
de pixels
frameborder Yes Détermine si les cadres auront ou non une bordure
No
border=n n est un entier Taille de l'espace entre les cadres (uniquement pour
spécifiant le nombre Netscape)
de pixels
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 <noframe> et </noframe> permettant de spécifier un texte XHTML à

afficher en cas de navigateur ne permettant pas d'afficher les frames. Le texte entre les balises
<noframe> et </noframe> doit donc contenir les balises <body> ... </body>.
Exemple :
<frame src="frame1.html" name="gauche">
<frame src="frame2.html" name="droite">
</frameset>
<noframe>
<body>
Cette page HTML nécessite un navigateur supportant les frames, veuillez nous en excusez.
</body>
</noframe>

33
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="page.html" 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
III.2.34. Formulaires
 Intérêt d'un formulaire

Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer avec leurs lecteurs, un
peu comme les coupons-réponse que l'on trouve dans les magazines.
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
LIENHYPERTEXTE (URL), c'est-à-dire de façon générale à une adresse e-mail ou à un script
stocké sur un serveur et écrit dans un langage de programmation comme un shell UNIX, PERL,
TCL, Applescript, PHP, etc.
 La balise <form>
Les formulaires sont délimités par le marqueur <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.
action indique l'adresse d'envoi (nom dřun script : traitement.php par exemple ou adresse
email : mailto:adresse.email@machine par exemple).
Voici la syntaxe de la balise <form> :
<form method="post" ou "get" action="url" >

...
</form>
Voici quelques exemples de balises <form>:
<form method=post action="mailto:athino@univ-lome.tg">
<form method=get action="http://www.univ-lome.tg">
 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.

34
Il est possible d'insérer n'importe quel élément XHTML 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 aux 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 lien hypertexte), l'URL ressemblera à
une chaîne du genre :
http://www.univ-lome.tg/essai.php?champ1=valeur1&champ2=valeur2&champ3=valeur3
 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.
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ée à 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,

35
 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,
 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="----------------------------">
enregistrement d'un utilisateur
<table border=0>
<tr>
<td><p>Nom</p></td>
<td><p><input type=text name="nom"></p></td>
</tr>
<tr>
<td><p>Prénom</p></td>
<td><p><input type=text name="prenom"></p></td>
</tr>
<tr>
<td><p>Sexe</p></td>
<td>
<p>
Homme : <input type=radio name="sexe" value="M"><br>
Femme : <input type=radio name="sexe" value="F">
</p>
</td>
</tr>

36
<tr>
<p>
<td>Autres activités</td>
<td>
Sport : <input type=checkbox name="activite"><br>
Voyage : <input type= checkbox name="activite">
</td>
</p>
</tr>
<tr>
<td><p>Fonction</p></td>
<td>
<p>
<select name="fonction">
<option name="enseignant">Enseignant</option>
<option name="etudiant">Etudiant</option>
<option name="ingenieur">Ingénieur</option>
<option name="retraite">Retraité</option>
<option name="autre">Autre</option>
</select>
</p>
</td>
</tr>
<tr>
<td><p>Commentaires</p></td>
<td>
<p><textarea rows="3" name="Commentaires">Tapez ici vos commentaires</textarea></p>
</td>
</tr>
<tr>
<td colspan=2>
<p>
<input type="submit" value="Envoyer">
<input type="reset" value="Annuler">
</p>
</td>
</tr>
</table>
</form>

37
III.3. Balises XHTML : Récapitulatif
III.3.1. Balises de premier niveau
Les balises de premier niveau sont les principales balises qui structurent une page XHTML. Elles sont
indispensables pour réaliser le "code minimal" d'une page web.
Balises Description
Balise principale de toute page web.
On lui donne généralement 2 attributs :
 xmlns : la liste des balises xhtml existantes (appelée espace de noms).

 xml:lang : la langue utilisée sur votre page web. Utilisez "fr" pour un document en français.
<html>
En temps normal, votre balise <html> doit ressembler à ceci :
Code : XHTML
1 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
2 </html>
<head> En-tête de la page
<body> Corps de la page
III.3.2. Le code minimal d'une page XHTML
Vous trouverez ci-dessous le code minimal de toute page web XHTML.
Code : XHTML
1
strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
3
<head>
4
<title>Titre du site</title>
5
6
</head>
7
<body>
8
</body>
9
</html>

38
III.3.3. Balises d'en-tête
Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head>
Balise Description
Cette balise permet d'indiquer certaines informations sur la page web.
On l'utilise le plus souvent pour inclure une feuille de style CSS, comme ceci :
Code : XHTML
1 <link rel="stylesheet" media="screen" type="text/css" title="Mon design" href="design.css" />
On peut aussi s'en servir pour 2-3 autres choses :
Code : XHTML
1 
<link /> 2 <link rel="start" title="Accueil" href="index.html" />
3 
4 <link rel="help" title="Politique d'accessibilité" href="accessibilite.html" />
5 
6 <link rel="alternate" type="application/rss+xml" title="News de mon site" href="news.xml" />
7 
8 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
La favicon est une icône qui s'affiche généralement à gauche de l'adresse de votre site sur le
navigateur de vos visiteurs. C'est un moyen de personnaliser un peu plus son site.
Quant au fil RSS, il s'agit d'une technique permettant à vos visiteurs de suivre l'actualité de votre
site depuis un logiciel spécial (un navigateur tel que Firefox le fait d'ailleurs). En général, on génère
des fils RSS en PHP (si vous ne faites que du XHTML / CSS cela ne nous intéresse donc pas pour
le moment).
Cette balise permet de définir les propriétés de la page web.
On s'en sert pour une foule de choses. Voici quelques exemples pratiques :
Code : XHTML

1
<meta name="author" content="Votre nom" />
2

3
<meta name="description" content="La page personnelle de Votre nom " />
4

5
<meta name="keywords" content="expériences, recherche, laboratoire, chimie" />
6

7
<meta /> <meta name="reply-to" content="monadresse@email.com" />
8

9
<meta http-equiv="pragma" content="no-cache" />
10

11
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
12

13
<meta http-equiv="refresh" content="10; URL=http://www.monsite.com" />
14
En général, on utilise surtout le meta pour la table de caractères.

La description et les mots-clés de la page n'influencent pratiquement plus les moteurs de recherche.
Inutile donc de passer du temps à mettre tout plein de mots là-dedans.
Permet de placer un script.

<script>
On l'utilise souvent pour mettre du code Javascript :

39
Balise Description
Code : XHTML
1 <script type="text/javascript">
2 /* Votre script ici */
3 </script>
Permet de définir du code CSS pour la page.
On lui met l'attribut type="text/css".
Exemple :
<style>
Code : XHTML
1 <style type="text/css">
2 /* Votre code CSS ici */
3 </style>
Titre de la page web.
C'est probablement la balise la plus importante d'une page web. Choisissez bien votre titre car il a
beaucoup d'importance pour les moteurs de recherche (ils donnent de l'importance aux mots qui se
<title> trouvent dans le titre).
Code : XHTML
1 <title>Mon site web</title>
III.3.4. Balises de structuration du texte

Balise Type Description
Sert à définir des acronymes, comme C.I.A.
On utilise généralement l'attribut title pour donner la définition de l'acronyme quand on
pointe dessus :
<acronym> Inline
Code : XHTML
1 <acronym title="Central Intelligence Agency">C.I.A.</acronym>
Citation (longue)
Vous devez obligatoirement mettre une balise de paragraphe à l'intérieur du
blockquote. Par exemple :
Code : XHTML
<blockquote> Block
1 <blockquote>
2 <p>
3 Texte de la citation
4 </p>
5 </blockquote>
<cite> Inline Citation (moyenne)
<q> Inline Citation (courte)
<sup> Inline Mise en exposant
<sub> Inline Mise en indice
Mise en valeur (forte)
<strong> Inline Le texte est généralement mis en gras.
Mise en valeur (faible)

<em> Inline
Le texte est généralement mis en italique.
<h6> Block Titre de niveau 6

40
Insère une image.
Utilisez les attributs src (pour indiquer l'adresse de l'image) et alt (pour indiquer un
texte de remplacement). Ces 2 attributs sont obligatoires. Exemple :
<img /> Inline
Code : XHTML
1 <img src="Templates/images/smiley.png" alt=":)" />
Lien hypertexte.
Indiquez l'url de destination grâce à l'attribut href :
<a> Inline
Code : XHTML
1 <a href="autrepage.html">Rendez-vous sur l'autre page</a>
<br /> Inline Retour à la ligne
<p> Block Paragraphe
<hr /> Block Crée une ligne de séparation horizontale
Permet d'indiquer une adresse, ou éventuellement l'auteur d'un document.

<address> Block
Le texte est généralement mis en italique.
Permet d'indiquer un texte qui a été supprimé.
<del> Inline
Le texte est généralement barré.
Permet d'indiquer un texte qui a été inséré.
<ins> Inline
Le texte est généralement souligné.
<dfn> Inline Permet d'indiquer une définition.
<kbd> Inline Permet d'indiquer un code que doit taper le visiteur.
Le texte à l'intérieur de la balise <pre> sera affiché tel qu'il a été tapé dans le code
<pre> Block
(espaces et entrées compris). Une police de taille fixe est utilisée.

41
III.3.5. Balises de liste
Cette partie énumère toutes les balises XHTML permettant de créer des listes (listes à puces, listes
numérotées, listes de définitions...)

Liste à puces non numérotée. Vous devez mettre un <li></li> par élément de la liste.
Exemple :
Code : XHTML
<ul> Block
1 <ul>
2 <li>Un élément</li>
3 <li>Un autre élément</li>
4 </ul>
Liste à puces numérotées. Vous devez mettre un <li></li> par élément de la liste. Exemple :
Code : XHTML
<ol> Block 1 <ol>
2 <li>Elément n°1</li>
3 <li>Elément n°2</li>
4 </ol>
Permet de créer un élément de liste.
list-
<li> Le type de la balise est particulier car elle n'est ni block ni inline. On dit qu'elle est de type
item
list-item.
Liste de définitions. Vous devez alterner chaque terme <dt> par sa définition <dd>.
Exemple :
Code : XHTML
<dl> Block 1 <dl>
2 <dt>Porte</dt>
3 <dd>Ouverture dans un mur permettant d'entrer et de sortir</dd>
4 <dt>Théâtre</dt>
5 <dd>Lieu où l'on représente des ouvrages dramatiques</dd>
6 </dl>
<dt> Block Terme à définir
<dd> Block Définition du terme

42
III.3.6. Balises de tableau
Délimite un tableau. Voici un exemple de tableau simple :
Code : XHTML
1 <table>
2 <caption>Passagers du vol 377</caption>
3
4 <tr>
5 <th>Nom</th>
6 <th>Age</th>
7 <th>Pays</th>
8 </tr>
9
10 <tr>
<table> Block 11 <td>Carmen</td>
12 <td>33 ans</td>
13 <td>Espagne</td>
14 </tr>
15 <tr>
16 <td>Michelle</td>
17 <td>26 ans</td>
18 <td>Etats-Unis</td>
19 </tr>
20 <tr>
21 <td>François</td>
22 <td>43 ans</td>
23 <td>France</td>
24 </tr>
25 </table>
<caption> - Permet de donner un titre au tableau
<tr> - Ligne de tableau
<th> - Cellule d'en-tête du tableau (généralement mise en gras)
<td> - Cellule du tableau
Balise non obligatoire permettant d'insérer l'en-tête du tableau.
Si vous choisissez d'utiliser <thead>, <tfoot> et <tbody>, vous devez les mettre dans
l'ordre suivant dans votre code source :
<thead> -
1. <thead>
2. <tfoot>
3. <tbody>
<tbody> - Balise non obligatoire permettant d'insérer le corps du tableau

<tfoot> - Balise non obligatoire permettant d'insérer le pied du tableau

43
ANNEXE A : LISTE DES CARACTERES ASCII DE 129 à 255
Caractère Code ISO Code HTML

•
‚
ƒ
„
…
†
‡
ˆ
‰
Š
‹
Œ
Ţ

Ř
ř
Ŗ
ŗ
•
Ŕ
ŕ
˜
™
š
›
œ &oelig;

ÿ &Yuml;
espace
¡ ¡ ¡
¢ ¢ ¢
£ £ £
¤ ¤ ¤
¥ ¥ &yen
¦ ¦ ¦

44
§ § §
¨ ¨ ¨
© © ©
a
ª ª
Ŗ « «
¬ ¬ ¬
-
® ® ®
¯ ¯ &masr;
° ° °
± ± ±
² ² ²
³ ³ ³
´ ´ ´
µ µ µ
¶ ¶
· · ·
¸ ¸ ¸
¹ ¹ ¹
º º º
ŗ » »
¼ ¼ ¼
½ ½ ½
¾ ¾ ¾
¿ ¿ ¿
À À À
Á Á Á
Â Â Â
Ã Ã Ã
Ä Ä Ä
Å Å Å
Æ &#198 &Aelig
Ç Ç Ç
È È È
É É É
Ê Ê &Ecric;
Ë Ë Ë
Ì Ì Ì
Í Í Í
Î Î Î
Ï Ï Ï
Ð Ð ð

45
Ñ Ñ Ñ
Ò Ò Ò
Ó Ó Ó
Ô Ô Ô
Õ Õ Õ
Ö Ö Ö
× × ×
Ø Ø Ø
Ù Ù Ù
Ú Ú Ú
Û Û Û
Ü Ü Ü
Ý Ý Ý
Þ Þ þ
ß ß ß
à à à
á á á
â â â
ã ã ã
ä ä ä
å å å
æ æ æ
ç ç ç
è è è
é é é
ê ê ê
ë ë ë
ì ì ì
í í í
î î î
ï ï ï
ð ð ð
ñ ñ ñ
ò ò ò
ó ó ó
ô ô ô
õ õ õ
ö ö ö
÷ ÷ ÷
ø ø ø
ù ù ù
ú ú ú

46
û û û
ü ü ü
ý ý ý
Þ þ þ
Ÿ ÿ ÿ

47
ANNEXE B : CODES DES COULEURS
Les couleurs ne sont matérialisées par une balise mais représentent plutôt un attribut de bon
nombre de balises tels que <font>, <body>, . . . l'introduction des couleurs a été, au départ, sous
forme de code hexadécimal qui représente la dose de rouge, de vert et de bleu. Ainsi, toutes les
couleurs sont de subtiles dosages de ces trois couleurs primaires (du moins du point de vue
XHTML) ! Une couleur s'écrit alors color="#rrvvbb" ou rr est le code hexadécimal du rouge, v v
celui du vert et bb celui du bleu. Le code hexadécimal d'une couleur primaire est compris entre 00
et FF.
Les codes couleurs les plus simples sont bien entendu :
Noir : #000000 (c'est l'absence de toutes les couleurs)

Blanc : #FFFFFF (présence de toutes les couleurs)
Rouge : #FF0000
Vert : #00FF00
Bleu : #0000FF
Jaune : #FFFF00
Gris : #CCCCCC
Mauve : #CC33FF
Rose : #FF6600
Notons cependant que depuis les versions Netscape 3 Gold et IE4, il est possible de donner
le nom de la couleur (en anglais) plutôt que le code hexadécimal. C'est ainsi que vous pouvez
utiliser color="white", color="blue", color="red", color="ivory",…
Liste des noms de couleurs supportés par Netscape ou Firefox : (les couleurs avec * sont des
couleurs à 4 nuances : exemple azure se décline en azurel, azure2, azure3 et azure4).

48
Aliceblue Darkviolet lightseagreen peachpuff*
antiquewhite* deeppink* lightskyblue* Peru
aquamarine* deepskyblue* lightslateblue pink*
azure* Dimgray lightslategray plum*
Beige dodgerblue* lightsteelblue* powderblue
bisque* f1oralwhite lightyellow* purple*
Black firebrick* limegreen red*
Blanchedalmond Floral linen rosybrown*
blue* Forest magenta* royalblue*
Blueviolet forestgreen maroon* royalblue*
brown* Gainsboro mediumaquamarine saddlebrown
burlywood* ghostwhite mediumblue saddlebrown
cadetblue* gold* mediumorchid* salmon*
chartreuse* goldenrod* mediumpurple* sandybrown
chocolate* Gray mediumseagreen seagreen*
comf1owerblue Green mediumslateblue seashell*
comsilk* green* mediumspringgreen sienna*
coral* greenyellow mediumturquoise skyblue*
cyan* honeydew* mediumvioletred slateblue*
Darkblue hotpink* midnightblue slategray*
Darkcyan indianred* mintcream snow*
darkgoldenrod* ivory* mistyrose* springgreen *
Darkgray khaki* moccasin steelblue*
Darkgreen Lavender navajowhite* tan*
Darkkhaki lavenderblush* navy thistle*
Darkmagenta Lawngreen navyblue tomato*
darkolivegreen* lemonchiffon * oldlace turquoise*
darkorange* lightblue* olivedrab* violet
darkorchid* Lightcoral orange* violetred*
Darkred lightcyan * orangered* wheat*
Darkrnagenta lightgoldenrod* orchid* white
Darksalmon lightgoldenrodyellow palegoldenrod whitesmoke
darkseagreen* Lightgray palegreen * yellow*
Darkslateblue Lightgreen paleturquoise* yellowgreen
darkslategray* lightpink* palevioletred *
Darkturquoise lightsalmon* papayawhip

49

COXHTML New1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

COXHTML New1

Transféré par

Droits d'auteur :

Formats disponibles

INITIATION A LA CONCEPTION DES PAGES WEB

STATIQUES : NOTION DE XHTML ET CSS

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

I. QU'EST-CE QU'UN SITE WEB ?

II. COMMENT CREER UNE PAGE WEB ?

III. LANGAGE XHTML ET LE CSS

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

 XHTML : c'est l'abréviation de eXtensible HyperText Markup Language. Ce langage

 XHTML pour écrire le contenu de nos pages web,

III.2. Notion de XHTML

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

III.2.2. Les commentaires

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

Regardez ce bout de code, c'est un petit paragraphe écrit en XHTML :

 <p> signifie "Début du paragraphe"

III.2.4. Sauter une ligne

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

 <p> </p> : pour organiser son texte en paragraphes.

III.2.5. Les titres

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

III.2.6. Mettre en valeur le texte

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

III.2.8. Mettre bien en valeur

III.2.9. Mettre en exposant ou en indice

Pour mettre en exposant certains mots ou caractères, on utilise la balise <sup>.

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

III.2.10. Les citations

On peut faire 2 types de citations :

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

En XHTML, on distingue 2 types de balises :

III.2.11. Les acronymes, abréviations et définitions

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui

Type de balise : inline

Type de balise : inline

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

Utilisé pour créer un nouvel objet dans un document.

Type de balise : block

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

Permet de passer des paramètres à l'objet qui la contient.

Type de balise : inline

Attributs pouvant être employés : name, value.

incorporer un document HTML

<object data="data/test.html" type="text/html" width="300" height="200">

incorporer un document pdf

<object data="data/test.pdf" type="application/pdf" width="300" height="200">

incorporer un document wav

<object type="audio/x-wav" data="data/test.wav" width="200" height="20">

III.2.13. Les scripts

<script type="text/javascript" src="javascript.js">

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

Cet exemple affichera également UnTrois

III.2.14. Lien relatif ou absolu ?

On distingue 2 types de liens :

Si les fichiers ne se trouvent pas dans le même dossier :

 Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :

INITIATION A LA CONCEPTION DES PAGES WEB STATIQUES :

III.2.15. Un lien vers une autre page

Pour faire un lien, on utilise la balise <a>

Créons 2 pages : source.html et cible.html.