Support de Cours Module XHTML-CSS

Support de cours Module
XHTML/CSS
1re Anne BTS Informatique Dveloppeur
dApplication
M. Benjamin GOGBE
2014
Ce support de cours contient quelques explications sur certains concepts de HTML en vigueur au
programme en 1re anne BTS option IDA en Cte dIvoire. Il a t labor sur la base de supports de cours
existants et de sources trouves sur Internet.
Support de cours Module HTML 1re Anne BTS Informatique Dveloppeur
dApplication
TABLE DES MATIRES
1re PARTIE : LE LANGAGE HTML
INTRODUCTION................................................................................................................... - 3 -
Chapitre I NOTION DE BALISES.........................................................................................- 5 -
Chapitre II LES BALISES EN BLOC ET LES BALISES EN LIGNE..........................................- 11 -
Chapitre IV LES BALISES DE TABLEAU............................................................................- 16 -
Chapitre V LES BALISES DIMAGE ET DIMAGES-MAPS....................................................- 20 -
Chapitre VI LES BALISES DE FORMULAIRE......................................................................- 23 -
Chapitre VII LES BALISES DE CADRE...............................................................................- 28 -
Chapitre VIII LA BALISE DHYPERLIEN.............................................................................- 30 -
Chapitre IX LES BALISES DE LISTE..................................................................................- 32 -
Chapitre X LES BALISES DE CONTENU EXECUTABLE.......................................................- 34 -
2me PARTIE : LES FEUILLES DE STYLE OU CSS
Chapitre XI LES FEUILLES DE STYLE (CSS)......................................................................- 35 -
Mini-PROJET:...................................................................................................................... - 48 -
M. GOGBE Benjamin Professeur Dveloppement Web 2

dApplication
INTRODUCTION
Historique du langage HTML
HTML (Hypertext Markup Language) est un langage de balisage qui permet de

structurer le contenu des pages web.
Conu par Tim Berners-Lee en 1991, HTML 1 est un langage bas sur le SGML
(Standard Generalized Markup Language) : il s'agit en effet de prsenter un contenu
affichable non seulement par les ordinateurs classiques, mais galement sans trop
de dgradation par des terminaux mobiles (PDA : Personnal Digital Assistant,
Smartphones, etc) bien moins puissants. (Wikipedia, 2011).
Les versions successives de HTML sont HTML 1 en 1991, HTML 2 en 1994, HTML 3
en 1996 et HTML 4 en 1998. En 2000, le W3C lance la version XHTML qui est une
variante plus rigoureuse du langage.
Les premires spcifications du XHTML ont vus le jour en 2000 sous lappellation
XHTML 1.0. Un an plus tard, elle fut remplace par la version 1.1. En 2009, le W3C
lance une tude pour la version HTML 5.
Le langage de styles CSS
Paralllement au HTML, le langage de mise en page et de mise en forme des pages

web fut dvelopp. Les diffrentes versions sont CSS 1 en 1996. Ensuite suivies les
versions CSS 2.1 en 1998 et enfin la dernire version CSS3.
Lenvironnement de travail
Pour crer des pages web avec XHTML et CSS, il faut disposer dun environnement
de travail adapt.
Si en thorie, un simple diteur de texte (tel que le Bloc Notes de Windows ou

Emacs de Linux) peut suffire, en pratique, il existe des diteurs plus labors
permettant de gagner du temps.
Les diteurs visuels
Avec ces diteurs vous avez la possibilit de travailler graphiquement sur la page
sans taper de code qui est gnr automatiquement. Lon peut citer le plus connu
est Dreamweaver, FrontPage (payant ou en version dessai) et Nvu (libre et gratuit).
Leur inconvnient est quils rendent le dveloppeur trop passif et le code gnr est
difficilement maitrisable (souvent problme de compatibilit avec les nouvelles
spcifications).
Les diteurs classiques
1 Le langage HTML, qui a maintenant volu vers le XHTML, fut invent en 1991 par
Tim Berners-Lee lorsquil travaillait au CERN de Genve (Centre Europen de
Recherche Nuclaire). Lobjectif tait alors dafficher des pages dinformation ayant
les proprits suivantes : les pages taient relies entre elles par des liens
hypertexte (ces liens sur lesquels, aujourdhui, nous narrtons pas de cliquer !) ;
ces documents devaient tre lisibles sur tous les ordinateurs, quel que soit leur
systme dexploitation : Windows, Unix, Mac OS, etc. (Drailard, 2008)

dApplication
Ils offrent des fonctions daide la saisie. Souvent gratuits en tlchargement, ils
servent surtout la phase de cration de la structure de base du document. On
peut citer entre autres EditPlus, NotePad ++, PSPad, JEdit et bien dautres pour
Windows ; Espresso, Smultron, TextWrangler pour Macs et gEdit, Vim, Emacs, Kate.
Vous trouverez une varit dditeur en faisant une recherche sur Google.
Les navigateurs web
Les navigateurs permettent de visualiser le contenu les pages web. Ils traduisent les
codes HTML et CSS et prsentent le rsultat visuel lcran. Il existe de nombreux
navigateurs parmi lesquels on peut citer :
- Google Chrome
- Mozilla FireFox
- Internet Explorer
- Safari
- Opera
Il existe des variantes de ces navigateurs pour les appareils mobiles comme les
Smartphones. On peut citer :
- Safari Mobile sur iPhone dApple
- Chrome Mobile pour les appareils sous Android
- Internet Explorer Mobile pour les appareils sous Windows Mobile
Il est important de noter quil faut disposer de plusieurs navigateurs dans leurs
dernires versions sur notre ordinateur afin de tester la conformit du code HTML et
CSS des pages avec les dernires spcifications du langage.
Fonctionnement dun site web
Figure 1 - Fonctionnement d'un site web statique
Figure 2 - Fonctionnement d'un site web dynamique

dApplication
CHAPITRE I NOTION DE BALISES
Les diffrentes parties dune page web (la structure) sont reprsentes dans le code
HTML sous forme dlments constitus de balises. On parle alors de langage de
balisage.
Dans un langage de balisage, tout contenu, tels que les blocs de texte, les images,
les tableaux, paragraphes et autres, doivent tre renferm dans un lment.
La liste des lments utilisables est clairement dfinie dans la DTD (Document Type
Definition) qui dpend de la version du langage. La DTD contient les spcifications
du langage qui sont tablies par le W3C (World Wide Web Consortium), organisme
de normalisation dans le domaine du web.
I- LES BALISES
Les balises HTML structurent le contenu du document, en dlimitant les blocs qui
seront amens contenir des paragraphes, des titres, diffrents types de mdias
(images, sons, vidos), des contrles de formulaires ou encore des liens
hypertextes.
Une balise dbute par le signe infrieur , et finit par le signe suprieur ;
on parle aussi de chevrons.
Sauf exception, elles fonctionnent par paires. Et chaque balise ouvrante

correspond sa balise fermante, dbutant par les caractres </. Ces paires dlimitent
la portion de texte laquelle elles sappliquent.
Syntaxe : <nombalise> Portion du document </nombalise>
Exemple de balises : <strong>, <p>, <h1>, </h1>,

</strong>
Il peut arriver quune balise soit referme immdiatement. On parle alors de

balise vide ou de balise simple ou encore orpheline . Dans ce cas, pour
marquer la fermeture de la balise, on utilise les caractres /> .
Voici quelques balises dans ce cas sont : area, base, br, col, command, embed, hr,
img, input, keygen, link, meta, param, source, wbr.
Syntaxe : <nombalise />
Exemple de balise simple : <img src="photo.jpg" />
Un lment est lensemble compos dune balise ouvrante, dun contenu (du texte
et/ou dautres balises), et de la balise fermante correspondante.
Exemple dlment :
<strong> texte mettre en gras </strong> === Toute
cette ligne reprsente un lment

dApplication
II- LES ATTRIBUTS
Les attributs ou proprits sont des caractristiques qui permettent de

personnaliser les balises. Ils dfinissent des options supplmentaires pour la balise.
Les attributs sont toujours placs lintrieur la balise ouvrante. Leur valeur est
toujours entoure dapostrophes simples (') ou doubles (").
Syntaxe : <nombalise nomattribut="valeur">
Exemple :
<h1 id="monTitre">Bienvenue sur le site web de GOBIS
TRAINING</h1>
<img src="images/photo.jpg" />
Dans lexemple ci-dessus, llment 1 reprsente un titre de premier niveau

<h1> possdant un attribut id de valeur monTitre.
Llment 2 reprsente une image dont lattribut src indique quil sagit du
fichier photo.jpg dans le dossier images.
NB : Certains attributs sont devenus obsoltes avec lavnement du CSS. Ce sont pour
la plupart des attributs de mise en forme tels que : align, valign, color, bgcolor, border,
face, width, height.
III- IMBRICATION DES ELEMENTS
Les lments peuvent tre imbriqus, condition de respecter une certaine

hirarchie, et dviter de faire se chevaucher des balises ouvrantes et fermantes qui
ne se correspondent pas.
Bon exemple : <h2>Bienvenue chez Toto <strong>et

moi</strong></h2>
Mauvais exemple : <h2>Bienvenue chez Toto <strong>et
moi</h2></strong>
Dans cet exemple, nous avons un titre de niveau 2 dans lequel la portion de texte
et moi est renforc (en gras).
Dans le bon exemple, la balise ouvrante <strong> se ferme lintrieur de

llment dfini par la balise <h2>.
Les possibilits dimbrications doivent rpondre des critres stricts qui dfinissent
quels lments peuvent en contenir dautres, et quelles sont les consquences en
termes daffichage ou de smantique.
Globalement, un lment de type bloc (bloc-level) peut contenir soit dautres blocs
et du contenu texte, soit uniquement des lments de type en ligne (inline) et du
contenu texte.
Un lment de type en ligne ne peut pas contenir dlments de type bloc, mais
uniquement des lments en ligne ou du contenu texte.

dApplication
Il faut noter quun document HTML est une structure compose dun ensemble
dlments plusieurs niveaux dimbrication. Le premier niveau de cette hirarchie
est constitu par la balise <html>.
IV- QUELQUES REGLES DECRITURE DU HTML
Rgles pour les noms des fichiers
Chaque page web est un fichier dont le nom peut comprendre des lettres, des
chiffres et des tirets. Il faut viter : les espaces, les caractres accentus et le .
Son extension est gnralement .html .
La premire page dun site web doit tre nomm index.html (ou index.htm).
Quelques rgles dcriture des balises HTML
La norme HTML impose les rgles suivantes :
Pour respecter les rgles du XHTML, il faut toujours crire les noms de balises
en minuscules
Toute balise ouverte doit tre referme ; y compris les balises simples ou
orphelines.
Dans ce dernier cas, la barre de fermeture est alors intgre dans la balise
elle-mme.
Exemples :
Saut de ligne: <br /> au lieu de <br>
Trac dune ligne horizontale : <hr /> au lieu de <hr>
Image: <img src="photo.gif" /> au lieu de <img
src="photo.gif">
En cas dimbrication de balises, lordre de fermeture est linverse de celui de

louverture
Les valeurs des attributs des balises sont crire entre guillemets simples ou
doubles :
<img src="photo.gif" />.
Tous les attributs utiliss doivent avoir une valeur, y compris ceux dont la
valeur est unique. Par exemple, il ne faut plus crire : <input type=
"checkbox" checked />
mais le code suivant : <input type= "checkbox" checked="checked"/>
Lattribut name qui servait identifier certains lments (<a>, <form>,
<input>) doit tre remplac par lattribut id.
V- STRUCTURE DUNE PAGE HTML 5
Une page HTML ou XHTML scrit de la faon suivante :
<!DOCTYPE html>
<html>

dApplication
<head>
<meta name=charset content="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Le reste de la page est encadr par des balises <html> et </html> qui
signifient dbut et fin de la page HTML.
Entre ces deux balises se trouvent deux parties :
o len-tte de la page entre <head> et </head> qui contient les
informations qui ne seront pas visibles sur la page sauf la balise
<titre> qui contient le texte afficher dans la barre de titre.
o et le contenu (le corps) de la page entre <body> et </body>.
VI- LES ELEMENTS DE BASE
La dclaration DOCTYPE
<! DOCTYPE html >
Sur la premire ligne, la balise <!DOCTYPE> indique au navigateur le type de

document qui va tre cr.
Elle est obligatoire dans tout document.
Llment racine <html>

<html>
Il reprsente le parent. Il contient la racine de tout le document HTML. De ce fait, les

balises <html>, </html> encadre tous les lments.
Lentte du document : Llment <head>

Cette section donne quelques informations sur la page ; telles que le titre,
lencodage des caractres spciaux, les codes externes utiliss.
Parmi ses lments enfants, on peut citer : <link>, <meta>, <script>, <style> et
<title>.
Seul le contenu de llment <title> est visible dans la barre de titre de la fentre.
Parmi ces lments seuls les lments <title> et <base> ne peuvent tre utilis
quune seule fois. Les autres peuvent tre utiliss de faon illimite.
Les meta-informations : llment <meta />

Les informations contenues dans les balises <meta /> sont destines au serveur
web, au navigateur et aux moteurs de recherche.
Chaque information est identifie par un nom et un contenu. Le nom est dfini par
lattribut name et le contenu par lattribut content sous la forme qui suit :
<meta name="nom" content="valeur" />

dApplication
Leur rle diffre selon la valeur de lattribut name. Ainsi, on peut dfinir :
Lauteur de la page : name="author"

<meta name="author" content="Gogb Benjamin" />
Les mots cls : name="keywords"
<meta name="keywords" content="Cours XHTML, Les
balises, " />
Une description de la page : name="description"
<meta name="description" content="Cours de

dveloppement web pour le cycle BTS IDA 1" />
Le temps de rechargement automatique de la page : http-equiv="refresh"
<meta http-equiv="refresh" content="30" />, la page sera

rafraichie chaque 30 secondes.
Encodage des caractres : charset
<meta charset="utf-8" />

Permet de dfinir le jeu de caractres utilis dans la page. Il existe plusieurs jeux de
caractres dont les plus utiliss sont:
1. iso-8859-1 : encodage classique pour les langues dEurope occidentale
2. iso-8859-15 : complte le prcdent avec les caractres et .
3. utf-8 : utilise les caractres de la majorit des langues du monde. Il permet

dutiliser les caractres spciaux et les accents.
Exercice pratique :
Crer une page contenant un texte vous dcrivant en quelques mots (au plus 2
lignes).
NB :
1. le texte doit contenir des accents et des caractres spciaux
2. dfinir les mots-cls et une description afin que votre page soit visible par les
moteurs de recherche.
Les commentaires
Ils permettent une meilleure comprhension, une rutilisation facile et une
meilleure lisibilit du code lors des mises jour. On utilise les symboles : < !et
-->.
Exemple : < !-- Menu principal du site -->
Le corps du document : llment <body>

Cest le conteneur de lensemble des lments textuels et graphiques de la page
web. Le corps du document est dlimit par les balises <body> et </body>.
<!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Premire page XHTML</title>
</head>
<body>

dApplication

</body>
</html>
M. GOGBE Benjamin Professeur Dveloppement Web

10
dApplication
Exercices
Exercice 1 : quel emplacement est dfini la DTD utilise dans le document ?
Exercice 2 : Quels sont les lments enfants de llment <html> ?
Exercice 3 : quoi sert llment <head> ? Quels peuvent tre ses lments
enfants ? Peuvent-ils tre employs plusieurs fois dans le mme document ?
Exercice 4 : Quel lment est obligatoire dans llment <head> ? quoi sert-il ?
Exercice 5 : Comment dclarer les mots-cls associs la page ? Quelle est lutilit
de cette dclaration ? crivez-en un exemple.
Exercice 6 : Peut-on crire le code suivant dans une page ?
<body>
<title>Bienvenue dans notre site </title>
<h1>Le site du XHTML et de CSS2</h1>
</body>
Exercice 7 : Peut-on inclure les lments <img />, <form> et <li> dans llment
<body> ?
Exercice 8 : Ecrire le code HTML complet dune page web comportant les lments
suivants :
1. Titre : Ma bienvenue sur ma page personnelle
2. Mots cls : GOGBE, Benjamin, Informaticien, Ingnieur, Enseignant
3. Rechargement chaque 10 minutes
4. Auteur : Benjamin GOGBE
5. Description : Ma page personnelle
6. Jeu de caractres : utf-8
Insrer des commentaires chaque niveau pour expliquer chaque tape du code
HTML.

11
dApplication
CHAPITRE II LES BALISES EN BLOC ET LES BALISES

EN LIGNE
Le langage HTML distingue deux grandes catgories de balises :

1. les balises en bloc (block)
2. et les balises en ligne (inline).
I- LES ELEMENTS DE STRUCTURE OU DE BLOC
1- Dfinition
Ce sont les lments qui se placent automatiquement les uns en dessous des
autres.
Le rendu de ces balises occupe par dfaut toute la largeur de la page.
Gnralement, le navigateur insre automatiquement un espace au-dessus et en
dessous du contenu de la balise.
Les blocs distinguent des sections entires de la page comme des titres, des
paragraphes, des listes, des citations, etc.
Exemples dlments de type bloc
<h1>....</h1> 
<p>...</p> 
Les blocs peuvent contenir dautres blocs et des lments en ligne, lexception
des paragraphes <p> et des titres <h1>, <h2>,...<h6> qui ne peuvent inclure
dautres lments de bloc.
2- Les principaux lments de type bloc

12
dApplication
(Goetter, 2005) P 29

13
dApplication
Exercice pratique : TP BALISES DE BLOC 1
Raliser une page web en utilisant ci-dessous :

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="author" content="Gogb
Benjamin" />
<meta name="keywords" content="Cours XHTML,
Les balises, Exemples du cours" />
<meta name="description" content="Cours de
dveloppement web pour le cycle BTS IDA 1" />
<meta name="refresh" content="10" />
<title>Exemples Cours HTML 5</title>
</head>
<body>



<p>Paroles d'or du pre de la Nation ivoirienne
<strong>Prsident Houphouet Boigny</strong>:</p>
<blockquote>
<ul>
<li>La paix n'est pas un vain mot. C'est
un comportement. Alors faisons en sorte de graver la paix
dans chacun de nos actions.</li>
<li>Le vrai bonheur on ne l'aperoit que
lorsqu'on l'a perdu. Faisons en sorte de jamais la
perdre</li>
</ul>
</blockquote>

14
dApplication

<div>
<h3>Les fondamentaux du
XHTML et du CSS</h3>
<dl>
<dt>Les balises de
bloc</dt>
<dd>Toutes les balises
permettant de raliser la structure du
document</dd>
<dd>Il s'agit
galement de choisir la bonne imbrication
des balises</dd>
</dl>
</div>

<div>
<h5>Tableau de quelques Figure 3 : Aperu TP 1 Balises de blocs
lments XHTML</h5>
<table>
<thead><th>Balise</th><th>Commentaires</th></thea
d>
<tbody>
<tr><td>body</td><td>Corps
du document</td></tr>
<tr><td>head</td><td>Entte
du document</td></tr>
</tbody>
</table>
</div>
</body>
</html>

15
dApplication
II- LES BALISES EN LIGNE
1- Dfinition
Contrairement aux balises de bloc, les balises en ligne se placent toujours les unes
ct des autres.
Les lments en ligne sont prvus pour enrichir localement des portions de texte
(lien hypertexte, emphase, renforcement, etc.).
Par exemple : le renforcement dune partie de texte laide

de la balise <strong>
Les lments en ligne ne peuvent contenir que dautres lments en ligne mais pas
dlments de bloc.
Il existe aussi deux sortes dlments en ligne : remplacs et non remplacs .
Seuls les lments remplacs peuvent tre redimensionns. Ils acceptent des
attributs de dimensions tels que : height, width.
Il sagit entre autres des lments <img>, <input>, <textarea>, <select> et
<object>.
Les autres nont pas de dimension, et noccupent que la place ncessaire
leur contenu. Cest le cas des lments <strong>, <em>, <a>, <span>, etc.
2- Les principaux lments en ligne

16
dApplication
Exercice pratique : TP 2 BALISES DE BLOC
Utiliser la page web du TP prcdent et effectuer les modifications afin dobtenir la

page ci-dessous :
Figure 4 : Aperu TP 2 Balises de bloc
Evaluation N1

17
dApplication
CHAPITRE IV LES BALISES DE TABLEAU
Un tableau est compos de lignes et de colonnes. Lintersection entre une ligne et une
colonne forme une cellule. La balise permettant de crer un tableau est <table>.
Ainsi, on peut crer des tableaux simples et des tableaux plus complexes.
I- TABLEAU SIMPLE
Syntaxe dun tableau de 2 lignes et 2 colonnes:

<table>
<tr>
<td>cellule 1</td>
<td> cellule 2</td>
</tr>
<tr>
<td> cellule 3</td>
<td> cellule 4</td>
</tr> Figure 5 - Exemple tableau
simple
</table>
Llment <table> </table> marque le dbut et la fin du tableau.
Llment <tr> </tr> dsigne le dbut et la fin dune ligne.
Llment <td> </td> indique le dbut et la fin dune cellule.
II- LA LIGNE DENTETE
Pour crer une entte de tableau, il suffit dutiliser llment <th></th> la place de
llment <td></td> dans la premire ligne du tableau. En gnral, le contenu de
llment <th></th> apparait en gras. On obtient la syntaxe suivante :
<table>
<tr>
<th>Entte 1</th>
<th> Entte 2</th>
</tr>
<tr>
<td>cellule 1</td>
<td> cellule 2</td>
</tr>
<tr>
<td> cellule 3</td>
<td> cellule 4</td>
Figure 6- Tableau avec entte
</tr>
</table>
III- LE TITRE DU TABLEAU

18
dApplication
On utilise llment <caption></caption> au dbut du tableau avant le code de lentte.
Exercice dapplication
Ecrire le code HTML du tableau ci-dessous :
<table>
<caption>LISTE DES CLIENTS</caption>
<tr>
<th>NOM ET PRENOMS</th>
<th> VILLE</th>
<th> CONTACT</th>
</tr>
<tr>
<td>KONE MOHAMED</td>
<td> BOUAKE</td>
<td> 05 45 76 23</td>
</tr>
<tr>
<td> KOUAKOU JOEL</td>
<td> ABIDJAN</td>
<td>09 47 28 47</td>
</tr> Figure 7-Aperu de la Liste des clients sous IE 9
<tr>
<td>AGOULE BENOIT</td>
<td> DIVO</td>
<td>04 57 65 48</td>
</tr>
</table>
IV- LES TABLEAUX STRUCTURES
Dans le cas de longs tableaux, il importe de le diviser en 3 grandes parties :
- Lentte dfinit par les balises thead /thead

- Le corps du tableau dfinit par les balises tbody/tbody
- Le pied de tableau dfinit par les balises tfoot/tfoot
Toutefois, il est conseill dutiliser lordre suivant lors de la cration du tableau :
1. thead le haut du tableau (lentte)

2. tfoot le bas du tableau (le pied de page)
3. tbody le corps du tableau
En reprenant lexemple prcdent, on pourra crire une longue liste de clients avec le code
suivant :
<table>
<caption>LISTE DES CLIENTS</caption>
<thead>
<tr>
<th> VILLE</th>
<th> CONTACT</th>
</tr>
</thead>
<tfoot>

19
dApplication
<tr>
<th> VILLE</th>
<th> CONTACT</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>KONE MOHAMED</td>
<td> BOUAKE</td>
<td> 05 45 76 23</td>
</tr>
<tr>
<td> KOUAKOU JOEL</td>
<td> ABIDJAN</td>
<td>09 47 28 47</td>
</tr>
<tr> Figure 8-Exemple de Tableau structur
<td>AGOULE BENOIT</td>
<td> DIVO</td>
<td>04 57 65 48</td>
</tr>
<tr>
<td>GOGBE JEROME</td>
<td> MAN</td>
<td> 05 55 77 23</td>
</tr>
<tr>
<td> KOUAME ANGE</td>
<td> ABIDJAN</td>
<td>09 00 28 12</td>
</tr>
<tr>
<td>AMOI ANGE BENOIT</td>
<td> GUIGLO</td>
<td>01 57 65 34</td>
</tr>
<tbody>
</table>
V- FUSION DE LIGNES OU DE COLONNES
1. Fusion de lignes
Pour fusionner des lignes, on utilise lattribut rowspan=x dans la balise td de la cellule
fusionne ; o x reprsente le nombre de lignes fusionner verticalement.
Par exemple pour raliser le tableau ci-dessous :

1 2
3 4
5
On utilisera le code suivant :
<table>
<tr>

20
dApplication
<td>1</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
2. Fusion de colonnes
Pour fusionnes plusieurs colonnes, on dispose de lattribut colspan=x o x est le nombre de

colonnes fusionner horizontalement.
Par exemple, pour raliser le tableau ci-dessous :
1
3 4
5
On crira le code suivant :
<table>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>

21
dApplication
CHAPITRE V LES BALISES DIMAGE ET DIMAGES-

MAPS
I- LES DIFFERENTS FORMATS DIMAGES
Les formats dimages les plus rpandus actuellement sont :
Le format GIF : utilis pour les petits lments graphiques, les icnes, les petites
images animes avec un seul niveau de transparence.
Le format JPEG : utilis pour les photographies. Il ne supporte pas la
transparence
Le format PNG : utilis pour les images de haute qualit avec plusieurs niveaux
de transparence.
II- LES BALISES DIMAGES
Pour afficher une image dans une page HTML, on utilise la balise <img>. Elle
possde plusieurs attributs dont les plus utiliss sont : src, alt et title.
Syntaxe :
<img src= url image alt=texte title=texte
dinfobulle />
Lattribut src : chemin daccs du fichier image. Ce chemin peut tre relatif
ou absolu selon les cas.
o Cas de chemin relatif : le chemin fait rfrence lemplacement
courant du fichier image.
Exemple : src=images/photo.jpg
o Cas de chemin absolu : le chemin fait rfrence la racine du site web.
Il est utilis gnralement pour faire rfrence une image situe sur un
autre site web.
Exemple : src=http:\\www.galeriesdumonde.com\photos\montnimba.png
Lattribut alt : texte alternatif qui saffiche lorsque lattribut src nest pas
dfini ou lorsque limage narrive pas safficher pour une raison quelconque.
Lattribut title : texte dinfobulle qui apparait lorsquon pointe la souris sur
limage.
III- LES BALISES DIMAGES-MAPS ET SES ATTRIBUTS
La balise <map> permet de crer des images ractives. Limage ractive contient
plusieurs zones cliquables amenant chacune vers un lien dtermin.
La balise <map> contient un attribut name permettant de dfinir le nom du map.
Pour dfinir les zones cliquables, on utilise la balise <area> dont les principaux
attributs sont :
1. shape : qui dfinit la forme de la zone. Ses valeurs possibles sont rect
(rectangle), circle (cercle), poly (polygone),

22
dApplication
2. coords : qui indique les coordonnes en pixels des points de la zone en
fonction de la forme. Ainsi, nous aurons :
Pour un rectangle, les coordonnes (abscisse, ordonne) du coin
suprieur gauche et celles du coin infrieur droit ;
Pour un polygone, les coordonnes de chaque sommet ;
Pour un cercle, les coordonnes du centre et le rayon ;
3. href : qui indique lURL de la page de destination du lien
SYNTAXE GENERALE
Insertion de limage
<img src = chemin daccs image usemap= #nom du map>
Dfinition de la structure du map
<map name=nom du map>
<area shape= coords=. href=#..../>

..
<area shape= coords=. href=#..../>
</map>
Cas 1 : Zone rectangulaire :

<area shape=rect coords=x1,y1,x2,y2 href=#adresse
de destination/> o (x1,y1) et (x2,y2) reprsentent respectivement les
points sur limage ci-contre.
Cas 2 : Zone ractive circulaire :

<area shape=circle coords=x,y,r href=#adresse de
destination/>o (x,y) reprsente les coordonnes du centre du
cercle et r le rayon du cercle.
Cas 3 : Zone polygonale
<area shape=rect coords=x1, y1, x2, y2, x3, y3

href=#adresse de destination/> o (x1,y1), (x2,y2), (x3,y3)
reprsente les coordonnes des diffrents points du polygone dans
lordre.
NB :
1. Pour obtenir les coordonnes dun point sur une image, il suffit douvrir le fichier
image avec les logiciels PAINT ou encore Photoshop. Passer la souris sur le
point et regarder en bas sur la barre de statut.
2. Les balises <img />, <map> sont des balises en ligne. De ce fait elles doivent
toujours tre utilis dans une balise de bloc telle que <p></p> ou
<div></div>.

23
dApplication
EXERCICE DAPPLICATION N1
Soit limage casemappe.jpg ci-contre :
Crez deux zones ractives sur cette image

permettant dindique le toit et le mur de la maison.
Pour la premire zone ractive, nous retiendrons un

polygone dont les points reprsentent la toiture. Figure 9 : Image Case
mappe
Pour la seconde zone ractive, nous reprsenterons
le mur de la maison en forme rectangulaire.
Ecrire le code HTML permettant dinsrer limage et de crer les 2 zones ractives.
Proposition de solution
<img alt="Cas d'image mappe simple" title="Case mappe"

src="images/casemappee.JPG" usemap="#case"/>
<map name="case">
<area shape="poly" href="toiture.html" title="Toiture"
coords="4,143,155,5,311,143"/>
<area shape="rect" href="mur.html" title="Le mur" coords="44,143,275,325"/>
</map>
Dans notre cas le clic sur les zones nauront pas deffet puisque les valeurs de href nont
pas t dfinies.
EXERCICE DAPPLICATION N2
D Soit limage relative la photo densemble dtudiants ci-aprs. Lon veut crer des images
C ractives sur cette photo, de sorte pouvoir ouvrir une page concernant chaque tudiant en
cliquant sur sa tte.
B
Nom du fichier image : etudiant.jpg

URL de limage : images/etudiant.jpg A
Coordonnes des centres des cercles dimages
ractives :
A(58,39,39)
B(123,41,30)
C(167,48,25)
D(228,46,46)
Travail faire : Figure 10 : Exercice Zones ractives

Crer le code HTML permettant
dinsrer limage etudiant.jpg et de crer les zones ractives circulaires sur le visage de
chaque tudiant avec les coordonnes ci-dessous.
Proposition de solution :
<p>
<img src="images/etudiant.jpg" alt="Etudiant" title="Groupe d'tudiants"
usemap="#mapetudiant"/>

24
dApplication
<map name="mapetudiant">
<area title="Etudiante 1" href="fille1.html" shape="circle" coords="58,39,39"/>
<area title="Etudiant 2" href="garcon1.html" shape="circle" coords="123,41,30"/>
<area title="Etudiante 3" href="fille2.html" shape="circle" coords="167,48,25"/>
<area title="Etudiant 4" href="garcon2.html" shape="circle" coords="228,46,46"/>
</map>
</p>

25
dApplication
CHAPITRE VI LES BALISES DE FORMULAIRE
Les formulaires permettent daccroitre linteractivit de lutilisateur avec le serveur

web. En effet, ils servent saisir un texte, choisir une option, valider une action,
etc.
Les usages des formulaires sur les sites web sont diverses ; entre autres, on peut
citer : effectuer des inscriptions en ligne, crer un compte utilisateur, modifier des
profils, envoyer des commentaires, etc.
Les donnes envoyes par le biais dun formulaire sont :
1. Soit directement affiches sur une page pour tre visible par les autres
visiteurs,
2. Enregistres dans un fichier,
3. Envoyes par email un destinataire
4. Ou encore, enregistres dans une base de donnes
Base de donnes
Langages ct
serveur
Langages ct
client
Affichage
Fichier
HTML/CSS, Javascript, etc.
Formulaire Serveur web

PHP, JSP, etc. @ Email
Figure 11 : Architecture d'un site web
Comme vous pouvez le constater sur le schma, lchange entre le serveur web et
lutilisateur se fait avec les langages ct client tels que HTML/CSS, Javascript. Alors
que les transactions entre le serveur web et les serveurs de fichiers, de bases de
donnes ou de messagerie se font avec les langages ct serveur tels que PHP, JSP,
DOTNET, etc.
Notre cours sintressera particulirement aux manipulations ct client du
formulaire.
Le ct serveur du formulaire sera vu en 2 me anne de BTS avec ltude du langage
PHP.
I. LA BALISE <FORM>
La balise principale de cration de formulaire est <form></form>. Il indique le
dbut et la fin dun formulaire.
Syntaxe :
<form>
<p>Texte l'intrieur du
formulaire</p>
</form>
NB : il faut absolument utiliser des balises en bloc lintrieur du formulaire pour

faire figurer du texte
A lintrieur de la balise <form>, on trouve les attributs suivants :

1. id : dfinit le nom qui identifie le formulaire. Il ne doit pas contenir despace.

26
dApplication
2. Method : indique le mode denvoi des donnes au serveur. Il existe deux
mthodes denvoi des donnes :
Method=get : cette mthode permet denvoyer des donnes de
petite taille (au plus 255 caractres). Les donnes sont envoyes par
ladresse URL de la page et sont visibles dans la barre dadresse du
navigateur.
Method=post : cest la mthode qui est gnralement utilise car
elle permet denvoyer une grande quantit de donnes sans quelles
soient visibles dans la barre dadresse.
3. Action : dfinit ladresse de la page ou le script (programme) qui va traiter les
informations aprs la validation du formulaire. Les donnes peuvent tre
envoyes par email une adresse. Dans ce cas, on utilise le mot cl
mailto:adresse_email_destinataire. Pour utiliser mailto, il faut que la
valeur de lattribut method soit post.
4. Enctype : dfinit la manire dont les donnes du formulaire seront encodes
lors de lenvoi au serveur.
NB : Cet attribut ne peut tre utilis que lorsque la valeur de lattribut method
est post.
Valeurs de lattribut enctype :
Valeur Description
application/x-www- Par dfaut. Tous les caractres sont encods avant lenvoi
form-urlencoded (les espaces sont convertis en symboles + et les caractres
spciaux en valeurs hexadcimales du code ASCII).
multipart/form-data Aucun caractre nest encod. Cette valeur est utilise dans
les cas o le formulaire contient un champ denvoi de fichier
au serveur.
text/plain ou Elles sont utilises dans les cas denvoi des donnes par
text/html email. Elles indiquent si les donnes seront envoyes sous
forme de texte ou de code XHTML
Syntaxe :
<form id="form1" action=" valider.php" method=" valeur " enctype=" valeur
">
<! Contenu -->
</form>
II.LA BALISE CHAMP <INPUT> ET SES VARIANTES

En gnral, pour crer un champ dans un formulaire, on utilise la balise <input />
et les principaux attributs de cette balise sont :
Attribut Fonction Exemple
type Dfinir le type du champ type="text"
Identifier le champ dans le
Name
formulaire afin de rcuprer son id="matricule"
ou id
contenu
Fixer la longueur de la zone de
Size size ="10"
saisie en nombre de caractres
Maxleng Limiter le nombre de caractres
maxlength ="15"
th saisir dans un champ de saisie
Dfinir la valeur par dfaut du
Value value="ET-0405-00000"
champ
Readonl Indiquer si le champ est en lecture readonly="readonly"

27
dApplication
seule. Dans ce cas, la valeur de ce
y
champ ne peut tre modifie.
Donner une indication sur le
Placehol
contenu du champ. (HTML 5 placeholder="ET-0405-00015"
der
seulement)
Syntaxe :
<input type="valeur" name="nom_champ" size="N" maxlength="N"
value="valeur_par_defaut"/>
Remarque : On peut dfinir un libell pour le champ avec la balise

<label></label>.
La balise <input /> peut tre utilise plusieurs fin dans un formulaire. Parmi les
multiples usages, nous avons : les champs de saisie mono-ligne, les mots de passe,
les champs denvoi de fichiers et divers autres champs apparus surtout avec
larrive de HTML 5.
1) LE CHAMP DE SAISIE MONO-LIGNE

Dans une zone de saisie mono-ligne, le texte scrit sur une seule ligne sans aller
la ligne. Pour crer ce type de champ, on dfinit la valeur de lattribut type
text.
Exemple:
<label>Nom :</label><input type="text" name="nomuser"
size="15" maxlength="40" value="GOGBE" />
2) LE CHAMP DE SAISIE DE MOT DE PASSE

Pour saisir un mot de passe dans un champ de saisie, on donne la valeur password
lattribut type.
Ainsi, on aura par exemple :
<form action="validconnexion.php" method="post" name="fconnexion">
<label>Login </label><input name="login" type="text" placeholder="Taper votre
login" size="30"/>
<label>Mot de passe </label><input name="pass" type="password" size="20"/>
</form>
Rsultat :
Figure 12 : Champs de saisie mono ligne et de mot de passe
NB : pour organiser le formulaire en regroupant les champs ayant trait au mme

sujet, on utilise les balises <fieldset></fieldset> pour encadrer les lments
regrouper.
3) LES CHAMPS DENVOI DE FICHIER

Pour crer un champ denvoi de fichier on dfinit lattribut type de la balise
<input> file. Dans ce cas, un bouton Parcourir ou Browse apparait droite
de la zone.
Pour utiliser un champ denvoi de fichier dans un formulaire, la balise <form> doit
avoir les attributs method et enctype avec les valeurs respectives post et
multipart/form-data.

28
dApplication
Exemple : <form action="script1.php" method="post"
enctype="multipart/form-data">
Pour restreindre les fichiers envoyer des types prcis, on utilise lattribut accept
dont la valeur est la liste des types MIME accepts.
Exemple : <input type="file" name="photo" accept="image/*" />

Ce champ accepte lenvoi de tous les types dimages.
Pour limiter la taille des fichiers envoyer, on insre un champ cach dont
lattribut name sera MAX_FILE_SIZE et lattribut value sera la taille maximale
du fichier en octets.
Exemple complet :
Ecrire le code HTML du formulaire ci-dessous :
Figure 13 : Exemple de champ d'envoi de fichier
<form name="formcv" method="post" enctype="multipart/form-data"

action="traitement.php">
<fieldset><legend><strong>Transfert de CV</strong></legend>
<label>Votre CV (au format PDF ou Word - Taille max. 10 Mo): </label>
<input name="cvfile" type="file" size="20"
accept="application/pdf,application/msword"/><br />

<input name="MAX_FILE_SIZE" value="10000000" type="hidden"/>
</fieldset>
</form>
4) LES BOUTONS RADIO
Pour crer une liste doptions choix unique, on utilise la balise <input /> en
dfinissant lattribut type la valeur radio.
Lattribut name des options appartenant un mme groupe doit avoir la mme
valeur pour chaque option.
Lattribut value dfinit la valeur qui sera envoye au serveur si lutilisateur clique
sur loption.
Pour dfinir par dfaut le choix dune option dans un groupe doptions, on donne la
valeur checked lattribut checked (checked="checked").
Syntaxe :
<input type="radio" name="nomgroupe" value="valeur1" />
------
------
<input type="radio" name="nomgroupe" value="valeurN" />
Exemple:
<fieldset><legend>Qualit du produit</legend>
<label><input type="radio" name="info" value="Excellent"
/>Excellent</label><br />
<label><input type="radio" name="info" value="Bon"
checked="checked" />Bon</label><br/>

29
dApplication
<label><input type="radio" name="info" value="Moyen"
/>Moyen</label><br />
<label><input type="radio" name="info" value="Mauvais"
/>Mauvais</label><br />
<label><input type="radio" name="info" value="Mauvais"
/>Indiffrent</label>
</fieldset>
Dans lexemple ci-contre loption Bon est choisie par dfaut.
Figure 14 : Exemple de boutons radio
5) LES BOUTONS DE CHOIX MULTIPLES OU CASES A COCHER

Ils permettent de faire plusieurs choix dans un mme groupe de cases cocher. Ils
ont les mmes arguments que les boutons radio.
Mais lattribut type doit prendre la valeur checkbox. Le nom du champ doit tre
un tableau lorsquil sagit dun groupe de case cocher.
Syntaxe :
<input type="checkbox" name="nom1" value="valeur1" />
------
------
<input type="radio" name="nomN" value="valeurN" />
Exemple :
Soit une socit de distribution de repas qui dsire concevoir un formulaire dans le
but de permettre aux clients de passer leur commande dans le menu du jour. Dans
cet exemple le plat Tchep au poulet est choisi par dfaut. Le formulaire doit se
prsenter comme suit :
Figure 15 : Exemple de cases cocher
Aperu du code HTML

<fieldset><legend>Menu du jour</legend>
<input type="checkbox" name="repas1" value="Attiekepoisson" /><label>Attik -
Poisson</label><br />
<input type="checkbox" name="repas2" value="Tcheppoulet" checked="checked"
/><label>Tchep au poulet</label><br />
<input type="checkbox" name="repas3" value="foutoutomate" /><label>Foutou banane
- Sauce tomate</label><br />

30
dApplication
<input type="checkbox" name="repas4" value="rizfeuille" /><label>Riz blanc - Sauce
Feuille</label><br />
<input type="checkbox" name="repas5" value="foufou" /><label>Foufou - Sauce
claire</label>
</fieldset>
6) LES BOUTONS DE VALIDATION ET DE REINITIALISATION DE

FORMULAIRE
On utilise les boutons de validation pour envoyer les donnes du formulaire au

serveur. Lappui sur ce bouton excute, gnralement, le script inscrit dans la
valeur de lattribut action de la balise <form>.
Syntaxe :
<input type="submit" name="nom bouton" value="texte du
bouton" />
Le bouton de rinitialisation permet de rafraichir le formulaire afin de retrouver les

valeurs de dpart.
Syntaxe :
<input type="reset" name="nom bouton" value="texte du
bouton" />
Exemple
<input name="valider" type="submit" width="15"
value="Envoyer" />
<input name="valider" type="reset" width="15"
value="Annuler" />
Pour utiliser une image sous forme de bouton de validation, on utilise la syntaxe
suivante :
Syntaxe:
<input name="nom" type="image" src="url image" width="x"
height="y" alt="texte alternatif" />
Exemple :
<input name="valider" type="image" src="images/zendf.jpg"
width="103" height="54" alt="Envoyer" />
Figure 16 : Exemple de
bouton image
Il existe, avec larrive de HTML 5, de nouveaux types de champs de saisie

permettant de rendre plus convivial le contenu dun formulaire. Pour les obtenir, il
suffit de dfinir les diffrentes valeurs de lattribut type de llment <input />
comme suite :
Valeur Description Aperu du rsultat sur Google

Chrome
color Dfinit un slecteur de couleur

31
dApplication
date Dfinit un champ date au format (an,

mois, jour)
dateti Dfinit un champ de type date et

me heure au format (an, mois, jour, heure,
minute, seconde)
email Dfinit un champ devant contenir une

adresse email
month Dfinit un champ de type mois
numbe Dfinit un champ de saisie numrique

r
range Dfinit un curseur permettant de

choisir un nombre dans un intervalle.
search Dfinit un champ de recherche
tel Dfinit un champ de saisie de numro

de tlphone
time Dfinit un champ de saisie de lheure
url Dfinit un champ de saisie dadresse

URL
week Dfinit un champ de saisie de semaine

et danne.
III- LES AUTRES ELEMENTS DE FORMULAIRE
1) LES LISTES
Il sagit de listes droulantes ou de listes simples.
Pour crer une liste droulante on utilise les balises <select></select> avec
lintrieur des balises <option></option> pour chaque lment de la liste.
Les attributs de <option> sont :
- value : dfinit la valeur envoye au serveur par le formulaire
- selected : pour dfinir si loption est choisie par dfaut
Syntaxe :
<select name=nomliste>
<option value=valeur1></option>
-----
<option value=valeurN></option>
</select>
Pour dfinir une liste simple, il suffit dajouter lattribut size pour indiquer le nombre
dlments de la liste.
Pour permettre que plusieurs lments soient slectionns en mme temps, on
dfinit lattribut multiple dans la balise <select>.
Exemple :
Ecrire le code HTML des listes suivantes :

32
dApplication
<label>Lieu de livraison :</label>
<select name="lieu">
<option value="0">Aucune</option>
<option
value="plateau">Plateau</option>
<option
value="cocody">Cocody</option>
<option
value="treich">Treichville</option>
Figure 17 : Exemple de liste <option
droulante
value="marcory">Marcory</option>
<option value="koum">Koumassi</option>
<option value="yop">Yopougon</option>
<option value="vridi">Vridi</option>
</select>
<select name="lieu" size="8" multiple="multiple">

<option value="0">Aucune</option>
<option value="plateau">Plateau</option>
<option value="cocody"
selected="selected">Cocody</option>
<option value="treich">Treichville</option>
<option value="marcory">Marcory</option>
<option value="koum">Koumassi</option>
<option value="yop">Yopougon</option>
Figure 18 : <option value="vridi">Vridi</option>
Exemple
</select>
de liste
2) CHAMP DE SAISIE MULTI-LIGNE

Ce champ permet de saisir un long texte sur plusieurs lignes (exemples :
commentaires, suggestions, descriptions, etc.). Pour insrer ce champ, on utilise la
balise <textarea></textarea>.
Les attributs possibles de cette balise sont :
1. Name : dfinit le nom de llment
2. Cols : dfinit le nombre de caractres visibles sur la largeur de la zone de
saisie.
3. Rows : dfinit le nombre de lignes visibles sur la hauteur de la zone de
saisie.
4. Readonly : indique que la valeur par dfaut dfinie ne peut tre modifie.
Pour dfinir une valeur par dfaut pour la zone de saisie, il suffit de placer le texte
entre les balise <textarea> et </textarea>.
Syntaxe : <textarea name="nom" cols="N" rows="N" cols="N">Texte par

dfaut</textarea>
Exemple :
<textarea name="comment" cols="50" rows="5" cols="50">Entrez un
commentaire sur notre service ici</textarea>
Figure 19 : Exemple de champ de saisie

Exemple complet 1:
multi-ligne
33
dApplication
La socit de livraison de repas domicile BON APPETIT veut concevoir un
formulaire permettant leurs clients potentiels de sinscrire en ligne.
Ecrire le code HTML du formulaire ci-dessous :
<form name="finscription" action="validinscription.php"
method="post">
<h2>Formulaire d'inscription</h2>
<fieldset><legend>Informations de
connexion</legend>
<label>Pseudo</label><br/> <input name="pseudo"
type="text" size="50" maxlength="250"
placeholder="Votre pseudo en un seule mot"><br/>
<label>Mot de passe</label><br/> <input
name="pass" type="password" size="50"
maxlength="250" placeholder="Votre mot de passe en 8
caracteres mini"><br/>
<label>Retaper le mot de passe</label><br/> <input
name="repass" type="password" size="50"
maxlength="250" placeholder="Retaper le meme mot de
passe">
</fieldset>
<fieldset><legend>Identit du client</legend>
<label>Nom et prnoms</label><br/> <input
name="nom" type="text" size="50" maxlength="250"
><br/>
<label>Entreprise / Socit</label><br/> <input
name="entreprise" type="text" size="50" ><br/>

34
dApplication
<label>Cellulaire / Tlphone </label><br/> <input
name="telephone" type="tel" size="50"><br/>
<label>Email</label><br/> <input name="email"
type="email" size="50" ><br/>
<label>Votre commune</label><br/>
<select name="Commune">
<option value="0" label="Choisir votre
commune"></option>
<option value="plateau"
label="Plateau"></option>
<option value="cocody"
label="Cocody"></option>
<option value="2plateaux" label="II
Plateaux"></option>
<option value="treichville"
label="Treichville"></option>
<option value="yopougon"
label="Yopougon"></option>
</select><br />
<label>Adresse exacte (Quartier / Rue / Porte)
</label><br/>
<textarea name="adresse" cols="50"
rows="3"></textarea>
</fieldset>
<fieldset><legend>Tarif souhait</legend>
<label><input name="tarif" type="radio" value="500"
>Moins de 500 F</label><br/>
<label><input name="tarif" type="radio"
value="1000">Entre 500 F et 1000 F</label><br/>
value="1500">Entre 1000 F et 1500 F</label><br/>
value="2000">2000 F et plus </label><br/>
value="0">Indiffrent</label><br/>
</fieldset>
<fieldset><legend>Priode de livraison
souhaite</legend>
<label><input name="periode[]" type="checkbox"
value="matin" >Matin (Petit djeuner)</label><br/>
value="midi">Midi (Djeuner)</label><br/>
value="apresmidi">Aprs-midi (Gouter)</label><br/>
value="soir">Soir (Diner) </label><br/>
</fieldset>
<label>Autres prcisions </label><br/>
Figure 20 : Formulaire complet 1 - Cas du <textarea name="precision" cols="50"
formulaire d'inscription rows="3"></textarea><br/>
<input name="valider" type="submit"
value="Valider"><input name="Annuler" type="reset"
value="Annuler">
</form>

35
dApplication
Exemple complet 2:
La socit BON APPETIT souhaite galement mettre la disposition de ces
partenaires (restaurants, maquis) un formulaire permettant de saisir les
informations sur les mets quils proposent. Ecrire le code HTML du formulaire ci-
dessous :
<form name="finscription"
action="validinscription.ph
p" method="post"
enctype="multipart/form
-data">
<h2>Saisie des recettes
proposes</h2>
<fieldset><legend>Inform
ations sur la
recette</legend>
<label>Nom de la
recette</label><br/>
<input
name="nomrecette"
type="text" size="50"
maxlength="250"><br/>
<label>Description
de la recette</label><br/>
<textarea
name="description"
rows="5"
cols="50"></textarea><br
/>
<label>Prix du plat
pour une personne
<input name="prix"
type="number" min="0"
max="10000"
step="500"
/></label><br/>
Figure 21 : Formulaire complet 2 - Cas de saisie de recette propose <label>Capacit de
production
<input
name="capacite"
type="number" min="0"
max="100"
/></label><br/>
<label>Priode de
disponibilit</label><br/>
<label><input
name="periode[]"
type="checkbox"
value="matin" >Matin
(Petit
djeuner)</label><br/>
<label><input
name="periode[]"
type="checkbox"
value="midi">Midi
(Djeuner)</label><br/>
<label><input
name="periode[]"
type="checkbox"

36
dApplication
value="apresmidi">Aprs-
midi
(Gouter)</label><br/>
<label><input
name="periode[]"
type="checkbox"
value="soir">Soir (Diner)
</label><br/>
</fieldset>
<fieldset><legend>Echant
illons</legend>
<label>Tlcharger
quelques images (Format
JPG, PNG, GIF - Taille totale
< 5 Mo) <br/>
<input name="photo"
type="file" multiple
accept="image/gif,image/jp
eg,image/x-png"
></label><br/>
<input
name="MAX_FILE_SIZE"
type="hidden"
value="5000000"
/></label><br/>
</fieldset>
<br/>
<input
name="valider"
type="submit"
value="Valider"><input
name="Annuler"
type="reset"
value="Annuler">
</form>
CHAPITRE VI LA BALISE DHYPERLIEN
Un lien hypertexte (hyperlien) est un lment HTML qui renvoie le visiteur une page ou
un emplacement de la page du mme site ou dun autre site web. Le lien hypertexte est
dlimit par la balise <a>.
Syntaxe gnrale :
<a href="url_page_destination" title="Texte_infobulle" target="cible ">Texte du lien</a>
Lattribut href permet de dfinir le chemin de la page de destination du lien.

Lattribut title permet de spcifier un texte dinfobulle qui apparaitra quand le visiteur va
pointer le texte du lien.
Lattribut target permet de prciser la fentre cible dans laquelle la fentre de destination
va safficher.
Les valeurs possibles de lattribut target sont :
Valeur Description
_self Affichage dans le cadre courant (par dfaut).

37
dApplication
_blank Ouvre le lien dans une nouvelle fentre.
_top Affichage dans la totalit de la fentre courante.
Affichage dans le cadre qui enveloppe la structure
_parent
courante.
Il peut avoir plusieurs situations dutilisation des liens hypertextes en fonction de

lemplacement de la page cible ou de lusage que lon veut faire du fichier. Parmi elles, on
peut citer :
- Lien vers un autre site web

- Lien vers une autre page de son propre site
- Lien vers une ancre
- Envoyer un email ou tlcharger un fichier par le lien
I- LIEN VERS UN AUTRE SITE WEB
Il suffit de prciser dans lattribut href ladresse URL absolue du site web de
destination.
Exemple :
Lien vers le site web www.google.ci:
<a href="http://www.google.ci">Accdez au Google </a>
Lien vers la page inscription.html du site www.bonappetit.ci :
<a href="http://www.bonappetit.ci/inscription.html"> Bon appetit </a>
Exemple
Lien vers la page agenda.html de notre site web : <a href="agenda.html"> Bon appetit
</a>
II- LIEN VERS UNE AUTRE PAGE DU MEME SITE WEB
Il peut y avoir deux situations dans ce cas :
1) Les 2 pages sont dans le mme dossier
Dans ce cas, il faut spcifier le nom de la page dans lattribut href.

Exemple : Lien vers la page agenda.html de notre site web : <a
href="agenda.html"> Bon appetit </a>
2) Les 2 pages sont dans des dossiers diffrents
Lorsque la page cible se trouve dans un sous-dossier du dossier courant, la valeur de

lattribut href scrira :
sous-dossier/pagecible.
Exemple : soient deux fichiers index.html et inscription.html organiss selon

larborescence ci-dessous :
monsite
|--index.html
|---Contenu

38
dApplication
|---inscription.html
|---produit.html
Pour crer un lien de la page index.html vers la page inscription.html, on crira :

<a href="contenu/inscription.html"> Inscription </a>
Lorsque la page cible se trouve dans le dossier parent du dossier courant, la valeur de
lattribut href scrira :
../pagecible.
Exemple : soient deux fichiers index.html et inscription.html organiss selon

larborescence prcdente :
Pour crer un lien de la page inscription.html vers la page index.html, on crira :

<a href="../index.html"> Inscription </a>
III- LIEN VERS UNE ANCRE
Une ancre est une sorte de point de repre que lon place sur une page web pour faire
rfrence une portion de cette page. Elle est trs souvent utilise pour crer un lien
permettant daller directement au bas ou en haut de la page.
Pour crer une ancre, on ajoute lattribut id dans une balise qui servira de repre sur la
page.
Syntaxe de cration dune ancre : <nom_balise id="nom_ancre">contenu de la

balise</nom_balise>
Exemple : <h2 id="nom_ancre">Texte du titre</h2>

Pour faire rfrence une ancre, il faut utiliser le signe dise (#) suivi du nom de lancre.
Plusieurs cas peuvent se produire :
- Cas dune ancre interne

Dans ce cas, le lien pointe vers un emplacement (ancre) situ sur la mme page.
Syntaxe dune ancre interne: <a href="#nom_ancre">Texte du lien vers lancre</a>
Exemple : <a href="#fin_page"> Aller directement la fin de la page</a>
- Cas dune ancre situe sur une page du mme site

Syntaxe : <a href="nompage#nom_ancre">Texte du lien vers lancre</a>
Exemple : <a href="client.html#inscription">Cliquer pour aller directement au

formulaire dinscription</a>
- Cas dune ancre situe sur une page dun autre site
Syntaxe : <a href="http://url_site/page#nom_ancre">Texte du lien vers lancre</a>
Exemple :
<a href="http://www.bonappetit.com/client.html#inscription">Inscrivez-vous sur le site
bonappetit.com </a>
NB: pour crer un lien vers le dbut dune page, on crit : <a href="#">Dbut de la
page</a>

39
dApplication
CHAPITRE VII LES BALISES DE LISTE

Elles permettent de crer des listes, dnumrer des lments, de crer des sommaires, des
menus, etc.
Il existe 04 diffrents types de listes:
- Les listes non ordonnes ( puces)
- Les listes ordonnes (numrotes)
- Les listes imbriques
- Les listes de dfinitions
I- LES LISTES NON ORDONNES OU LISTES PUCES

Elles sont dfinies par la balise <ul> et chaque item (lment) est dfini par la balise <li>.
Syntaxe :
<ul type=type_puce>
<li>Item 1</li>
<li>Item 2</li>

<li>Item n</li>
</ul>
Il existe plusieurs types de puces. Le type est prcis par lattribut type. Les principaux
utiliss sont :
Disc
Circle
Square
Exemple 1:
<p>Liste des matires :</p>
<ul type="circle">
<li>Algorithmique</li>
<li>Langage de
programmation</li>
<li>Merise</li>
<li>Dveloppement Web</li>
</ul>
Exemple 2:
<p>Liste des matires :</p>
<ul type="square">
<li>Algorithmique</li>
<li>Langage de
programmation</li>
<li>Merise</li>
<li>Dveloppement Web</li>
</ul>
Figure 22 : Aperu de listes puces
II- LES LISTES ORDONNES
Elles sont introduites par la balise <ol> et chaque lment par la balise <li>.
Lattribut start permet de dfinir le dbut de la numrotation. Pour inverser la
numrotation, on ajoute lattribut reversed dans la balise <ol>.

40
dApplication
Syntaxe :
<ol>
<li>Item 1</li>
<li>Item 2</li>

<li>Item n</li>
</ol>
Exemples

<p>Exemple 1: Le plan de lexpos
:</p>
<ol>
<li>Introduction</li>
<li>Les causes</li>
<li>Les consquences</li>
<li>Les perspectives</li>
<li>Conclusion</li>
</ol>

<p>Exemple 2: Le plan de lexpos
:</p>
<ol start="2">
<li>Les causes</li>
<li>Conclusion</li>
</ol>

<p>Exemple 3 : Le plan de lexpos
:</p>
<ol reversed>
<li>Les causes</li>
<li>Conclusion</li>
</ol> Figure 23 : Aperu de listes numrotes avec
plusieurs variantes
III- LES LISTES IMBRIQUEES

Il est possible de combiner une liste numrot avec une liste puces. On obtient une
syntaxe comme suite :
<ol>
<li> item 1
<ul>
<li>Item 1</li>
<li>Item 2</li>

<li>Item n</li>
</ul>
</li>
<li>Item 2</li>

<li>Item n</li>

41
dApplication
</ol>
Exemple de liste imbrique :


<p>Exemple 3 : Le plan de lexpos :</p>
<ol>
<li>Les causes
<ul>
<li>Les causes
lointaines</li>
<li>Les causes
immdiates</li>
<li>Les causes
internes</li>
</ul>
</li>
<li>Conclusion</li>
</ol>
Figure 24: Aperu de listes imbriques
IV- LES LISTES DE DEFINITIONS
Ce type de liste permet dassocier un terme avec sa description. Elle est utile pour la
cration de glossaire ou de dictionnaire par exemple. On la dfinit en utilisant la balise
<dl>. Ensuite, on indique chaque terme de la liste avec la balise <dt> et sa description
avec la balise <dd>.
Syntaxe gnrale :
<dl>
<dt>Terme 1</dt>
<dd>Description terme 1</dd>
<dt>Terme 2</dt>
<dd>Description terme 2</dd>

<dt>Terme N</dt>
<dd>Description terme N</dd>
</dl>
Exemple :

<p>Quelques dfinitions de termes en Dveloppement
web</p>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>URL</dt>
<dd>Uniform Resource Location</dd>
<dt>Internet</dt>
<dd>Rseau mondial d'ordinateurs</dd>
<dt>HTTP</dt>
<dd>HyperText Transfert Protocol</dd>
</dl>

Figure 25: Cas de liste de dfinitions
42
dApplication

43
dApplication
CHAPITRE VIII LES BALISES DE CONTENU

EXECUTABLE
Les contenus excutables ou scripts sont des petits programmes en Javascript ou

VBscript excuts ct client (par le navigateur) pour amliorer linteractivit avec le
visiteur.
Les scripts excutables sont des fonctions qui sexcutent gnralement lors des
vnements (clics, survol, appui de touche, etc) lis aux objets tels que les boutons, les
images, les liens, etc.
On distingue deux types de scripts :
- Les scripts externes
- Les scripts internes
I- LES SCRIPTS EXTERNES

Ce sont des fichiers externes la page, avec extension .js pour les fichiers javascript
ou .vbs pour les VBscript.
On utilise la balise <script> et lattribut src pour inclure le fichier dans la page.
Syntaxe de la Balise script
<script type="text/javascript" src="chemindufichierjavascript.js"></script>
II- LES SCRIPTS INTERNES

Les scripts internes sont des bouts de code directement crits entre les balises <script> et
</script>. Ils sont directement inclut dans la page comme suit :
Balise <script>
<script type="text/javascript">
function maFonction()
{
/* du code ici */
}
</script>
NB : Contrairement aux scripts externes, les scripts internes ne sont pas rutilisables dans
les autres pages.

44
dApplication

45
dApplication
2me PARTIE : LES FEUILLES DE STYLE

OU CSS

46
dApplication
CHAPITRE IX GENERALITES SUR LES FEUILLES DE

STYLE
I. INTRODUCTION
Les feuilles de style en cascade ou Cascade Style Sheet (CSS) ont t adoptes par le W3C
pour sparer le contenu des pages HTML et leur apparence. Elles rgissent lapparence des
lments HTML dune page concernant la disposition, la couleur, les dimensions, etc.
Apparues depuis les annes 1996, les versions successives de ce langage ont t :
- CSS 1;
- CSS 2.0 ;
- CSS 2.1 ;
- CSS 3, la version actuelle
Si les versions prcdentes du HTML permettaient encore de nous passer de ce langage

un certain niveau, avec larrive du HTML 5, le CSS simpose tout dveloppeur web.
Elles facilitent ainsi la gestion de la charte graphique dun site web. En effet, grce aux
feuilles de style, lorsque la charte graphique d'un site compos de plusieurs dizaines de
pages web doit tre change, il suffit de modifier la dfinition des feuilles de style en un seul
endroit pour changer l'apparence du site tout entier !
Les feuilles de style permettent entre autres :

d'avoir une prsentation homogne des pages sur tout le site.
Une maintenance plus rapide du site web.
une plus grande lisibilit du code HTML.
le positionnement rigoureux des lments.
un chargement plus rapide des pages.
II. PRINCIPE GENERAL
On peut dfinir une feuille de style dans trois (3) endroits dans le code HTML de la page web
:
- Directement lintrieur des balises avec lattribut style (mthode pas
recommande) ;
- Dans lentte <head> de la page HTML (peu recommande);

- Dans un fichier externe .css (mthode la plus recommande).
1) Dans lentte <head> de la page HTML
On insre le code CSS dans la balise <style> entre les balises dentte <head> de la page
HTML.
Syntaxe :
<head>

47
dApplication
<style>
Selecteur {
proprit1: valeur;
proprit2: valeur;

propritN: valeur ;
}
</style>
</head>
Exemple : le code suivant dfinit une couleur appliquer aux lments <li> des
listes de la page :
Mme si cette mthode

fonctionne, elle devient pnible surtout lorsque vous devez dfinir ou modifier le mme style
pour plusieurs pages. Cest pourquoi, il est recommand de recourir la mthode suivante.
2) Dans un fichier externe .css
Cette mthode consiste crer un fichier css externe la page HTML (gnralement dans
un dossier css) et ensuite de lier ce fichier la page HTML avec la balise <link>.
Application :
1re tape : crons un fichier style.css (par exemple) dans un dossier CSS (par exemple)
que lon aura cre auparavant. Ensuite, crivons le code CSS de la feuille de style
prcdente.
2me tape : A lintrieur des balises <head> de la page HTML, on insre la balise <link>
comme suit :
<link rel="stylesheet" href="url_du_fichier_css">
par exemple <link rel="stylesheet" href="css/styles.css">.
Dans la syntaxe prcdente, on a :

La balise <link> avertit le navigateur qu'il doit chercher un document situ
l'extrieur de la page HTML.

48
dApplication
L'attribut rel="stylesheet" prcise que le document en question est une feuille de
style externe.
L'attribut type="text/css" prcise le type de feuille de style.
L'attribut href=" URL " donne l'URL de la feuille de style, c'est--dire son
emplacement sur Internet.
III. DEFINITION DES SELECTEURS
Revenons sur la syntaxe de dfinition des feuilles de style prcdente.

Selecteur {
proprit1: valeur;
proprit2: valeur;

propritN: valeur ;
}
Dans cette syntaxe, le slecteur reprsente llment ou les lments auxquels on veut
appliquer les diffrentes proprits.
IV. QUELQUES TYPES DE SELECTEURS SIMPLES
Il existe plusieurs types de slecteurs dont quelques-uns.
Slecteurs Syntaxe Exemples du Elment auxquels

code CSS sapplique le CSS
Slecteur Element{ } p{ } <p>
dlment h3{ } <h3>
Element1, element2{ } li, a{ } <li> et <a>
Slecteur [attribut]{ } [alt] { } Tout lment possdant un
dattribut Element[attribut=vale input[type=submi attribut alt
ur]{ } t] { } Tout lment <input
type=submit/>
Slecteur * Tous les lments de la page
universel
Slecteur de .nomclasse{ } .remarque { } Tout lment lattribut

classe element.classe{ } div.remarque { } class="remarque"
Tout lment <div
class="remarque">
Slecteur did Element#id{ } Img#photo{ } Tout lment <img
id="photo">
V. LES PSEUDO-CLASSES ET PSEUDO-ELEMENTS
Les pseudo-classes permettent d'affiner le style appliqu un certain nombre de balises en

dfinissant une raction un vnement ou bien la position relative de llment au sein
des autres balises.
Contrairement aux classes, le nom des pseudo-classes est prdfini, il n'est donc pas
possible de crer ses propres pseudo-classes.
Tableau 1: Quelques pseudo-classes et pseudo-lments

Pseudo-classe ou pseudo- Rle
lment

49
dApplication
:hover Elment lien survol
:visited Elment lien visit
:link Lien
:active Etat activ dun lment
:focus Etat rception de focus
:checked Etat coch dun lment checkbox
::first-letter Pseudo lment dsignant la Premire lettre
Exemples :
a:hover {font-decoration: underline;} permet de souligner le texte du lien lors
du survol de celui-ci
textarea:focus {color: #FF0000;} permet de changer la couleur du texte de la

zone de texte lorsque celle-ci reoit le focus.
a:active {color: #FF0000;} permet de changer la couleur du texte du lien lorsque

celui-ci est actif.
a:link{color: #FF0500;} permet de dfinir les proprits des liens que visiteur na
pas encore t slectionn.
a:visited {color: #FF000A;} permet de dfinir la couleur des liens hypertextes

que le client a dj visits
p ::first-letter : pseudo-classe dlment sappliquant sur la premire lettre de

chaque paragraphe :
p::first-letter{

50
dApplication
font-size: 3em;
font-weight: bold;
Figure 26: Rsultat du code
color:rgb(0,0,120);
CSS ci-contre
text-decoration:none;
VI. LES PROPRIETES
Elles reprsentent les diffrents effets souhaits sur llment. La ligne de proprit est
compose dun nom de proprit et dune valeur spare par deux points termine par un
point-virgule.
Exemple : font-weight: bold;
Il existe un nombre important de proprits CSS mme si toutes ne sont pas encore prises
en compte par tous les navigateurs.
Nous numrerons quelques proprits selon les groupes dlments auxquelles elles
peuvent sappliquer.
Tableau 2 : Quelques proprits sur le texte

Proprits Rles Quelques valeurs possibles
Color Couleur du texte Blue, red, green, yellow, rgb(0,0,255),
rgba(0,0,0,0.5), #003399
Font Dclaration groupe de font-style font-weight font-size/line-height
proprits sur un texte font-family
(taille, couleur, police, etc.) bold 16px "Trebuchet MS", Arial,
Helvetica, sans-serif ;
Font-weight Epaisseur du texte normal, bold, light, bolder, lighter valeur
numrique
Font-size Taille de police xx-small, x-small, small, medium, large, x-
large, xx-large, taille en points (pt), cm, %
Font-style Style de police du texte normal, italic, oblic
Font-family Famille de police Arial ou Georgia, "Times New Roman",
Times, serif
Font-stretch Etirement du texte Condensed, expanded
Text- Dcoration du texte blink, underline, line-through, overline ou
decoration none (clignotant, soulign, barr, surlign
ou aucune)
Text-indent Indentation de texte en pouces (in), en cm, ou en %
Text-align Alignement du texte left, center, right, justify
Text- Dfinit la casse de texte uppercase, lowercase, capitalize
transform (majuscule, minuscule, premire lettre en
majuscule)
Word- Espace entre les mots
spacing En points (pt), pouces (in), en cm, en
pixels (px), ou en %
Line-height Interligne du texte

En points (pt), pouces (in), en cm, en

51
dApplication
pixels (px), ou en %
Exemple :
p{
font-family: Georgia, "Times New Roman", Times, serif; /*Famille de
police*/
font-size:16px; /* taille 16*/
font-weight:bold; /*texte en gras*/
text-align:justify;
}
Tableau 3 : Proprits de fond

background-color Couleur de fond "#RRGGBB", "#F03300A", blue,
green
background- Image de fond url(../images/bonappetitfig.jpg)
image
background- Rptition de larrire-plan repeat, repeat-x, repeat-y, no-
repeat repeat
background- Comportement de limage scroll, fixed
attachment larrire-plan lors du
dfilement
background- Position de limage darrire- top, center, bottom, left, center ou
position plan par rapport au coin right
suprieur gauche En points (pt), pouces (in), en cm,
en pixels (px), ou en %
background-size Taille de limage de fond par 80% 80%
rapport aux dimensions de
llment
background Groupe de proprits url(test.jpg) fixed repeat
darrire-plan
Exemple :
body{
background-
image:url(../images/bonappetitfig.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:left top;
background-size:10% 15%;
}
Tableau 4 : Proprits dombres et transparence

Text-shadow Ombrage du texte
Text-outline Contour du texte
box-shadow Ombrage de llment bote
opacity Opacit de llment

52
dApplication
Exemple:
.logo{
width:15%;
height:15%;
box-shadow: 10px 10px 5px #666666;
}
Tableau 5 : Quelques proprits de bordure

border Groupe de proprits de border: 1px solid #CCC;
bordure
Border-width Largeur de bordure 2px
Border-color Couleur de bordure Gray, #CCC
Border-spacing Espacement de bord 0px
Border-radius Rayon du bord arrondi 2px 2px 3px 3px
Outline Contour
Outline-style Style du contour Solid, dotted
Outline-color Couleur du contour blue
Outline-width Largeur de contour 1px
Exemple:
table, tr, td{
border-width:1px;
border-color:#CCCCCC;
border-style:solid;
border-spacing:0px;
width:60%;
}
LISTE DES PROPRIETES
Type Proprit Valeur Description
Marge margin-top En points (pt), pouces (in), en cm, en pixels Valeur de la marge
s (px), ou en % suprieure
margin-right En points (pt), pouces (in), en cm, en pixels Valeur de la marge de

(px), ou en % droite
margin- En points (pt), pouces (in), en cm, en pixels Valeur de la marge

bottom (px), ou en % infrieure

53
dApplication
margin-left En points (pt), pouces (in), en cm, en pixels Valeur de la marge de

(px), ou en % gauche
margin Raccourci pour les

proprits de marge
padding-top En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
ou en % l'lment et le bord
suprieur
padding-right En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
droit
padding- En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
bottom ou en % l'lment et le bord
infrieur
padding-left En points (pt), pouces (in), en cm, en pixels (px), Ecartement entre
gauche
padding Raccourci vers les

proprits
d'cartement
Listes list-style-type disc, circle ou square Type de puces et de

numrotation
list-style- URL Permet de remplacer

image les puces par une
image
list-style- inside ou outside Spcifie si les puces

position sont l'intrieur ou
l'extrieur du texte
list-style Raccourci vers les

proprits de liste

54
dApplication
Exemple complet :
Figure 27 - Exemple complet classes universelles
Rsultat attendu :
Figure 28- Aperu de la page obtenue

55
dApplication
MINI-PROJET:
Projet 1 : Ralisation dun site web de la classe BTS IDA 1re Anne
APERU DE LA PAGE DACCUEIL DU SITE

56
dApplication
CODE HTML 5
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bienvenue sue le site de la classe BTS IDA 1re Anne</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="corps">
<header>
<div id="titre_ecole">
<img id="logo" alt="logo esicom" src="images/logoesicom.gif"/>
<h2>Ecole Suprieure d'Informatique et de Commerce</h2>
</div>
<div id="banniere">
<h1> Bienvenue sur le site des etudiants de BTS IDA 1re Anne</h1>
<h3> La programmation et le developpement web n'ont plus de secret pour nous.
</h3>
</div>
</header>
<nav>
<ul id="menu_h">
<li> <a href="#"> Accueil </a> </li>
<li> <a href="#"> Formation </a> </li>
<li> <a href="#"> Rcompense </a> </li>
<li> <a href="#"> Bibliothque </a> </li>
<li> <a href="#"> Infos </a> </li>
<li> <a href="#"> Contactez-nous </a> </li>
</ul>
</nav>
<section>
<article>
<h2>Presentation de la filire</h2>
<p> Le mot algorithme est un terme dorigine arabe, venant plus prcisment
du nom du <strong>clbre mathmaticien de Bagdad (780-850), AL-
KHUWARIZMI</strong> qui crivit le premier ouvrage de rsolution des quations linaires
et quadratiques.</p>
<p>L'algorithmique est lensemble des rgles et des techniques qui sont impliques
dans la dfinition et la conception d'algorithmes.
</p>
<p>Un algorithme est donc une suite ordonne et finie dinstructions lmentaires
permettant de rsoudre un problme.</p>
<p>Le dictionnaire Robert dfinit lalgorithme comme un ensemble de rgles
opratoires propres un calcul.</p>
</article>
<article >
<h2>Album Photos</h2>
<figure>
<figcaption>Quelques photos d'tudiants de la Classe</figcaption>
<a href="images/btsida1_ens.png" target="_blank"><img class="photo_ens"
alt="photo ensemble" src="images/btsida1_ens.png"/></a>
<a href="images/btsida1_garcons.png" target="_blank"><img
class="photo_ens" alt="photo garcons" src="images/btsida1_garcons.png"/></a>
<a href="images/btsida1_filles.png" target="_blank"><img class="photo_ens"
alt="photo filles" src="images/btsida1_filles.png"/></a>

57
dApplication
alt="photo filles" src="images/btsida1_ens.png"/></a>
alt="photo filles" src="images/btsida1_ens.png"/></a>
</figure>
</article>
</section>
<aside>
<h2>News TIC</h2>
<p class="titreinfo"><a href="http://www.lemondeinformatique.fr/"
target="_blank">Droit l'oubli : Google s'incline devant la Justice europenne</a></p>
<p>Google a mis en ligne un formulaire permettant toute personne de demander
la suppression de son moteur de recherche des rsultats de recherche inclu...</p>
</aside>
<footer>
<h2>Rubriques</h2>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Formation</a></li>
<li> <a href="#"> Rcompense </a> </li>
<li> <a href="#"> Bibliothque </a> </li>
<li> <a href="#"> Infos </a> </li>
<li> <a href="#"> Contactez-nous </a> </li>
</ul>
<p>Copyright © 2013-2014 - BTS IDA 1 ESICOM Plateau- Tous droits
rservs<br/>
Plateau, Prs de l'Htel IBIS<br />
Contactez-nous <a href="mailto:esicom.ida2014@gmail.com">ici</a></p>
</footer>
</div>
</body>
</html>

58
dApplication
CODE CSS
@charset "utf-8"; /*Slogan*/

/* CSS Document */ header h3{
font-family:"Trebuchet MS", Arial,
body{ Helvetica, sans-serif;
background- color:rgba(214,16,5,0.9);/*#14237e; Le
color:rgba(191,191,191,0.5);/* Gris avec bleu du logo*/
transparence de 0.5 */ font-style:italic; /*Rendre l'criture
} italique*/
/*bloc de corps de la page contenant toutes les font-size:16px;
donnes*/ text-align:center;
#corps{ }
width:80%;
height:100%; /*Menu */
background-color:#FFFFFF; /*Girs */ nav{
margin:auto; width:100%;
border-radius:10px 10px; /*Bordures text-align:center;
arrondies*/ font-family:Arial, Helvetica, sans-serif;
border:2px solid rgb(214,16,5); }
} /*Element texte du menu*/
/*Taille du logo*/ nav ul li{
#logo{ display:inline-block;
width:30%; margin-left:15px;
height:30%; padding:10px;
vertical-align:middle; /*Aligner /* border: 2px dotted #999999;*/
verticalement */ }
margin-left:20px;/*Marge exterieure de /*Element conteneur ul du menu*/
gauche*/ nav ul{
} list-style-type:none;
/*Cadre logo et nom de l'ecole*/ background-color:#000;/*#666; Gris
#titre_ecole{ fonc*/
background-color:#fde5d9;/*Couleur de margin:0;
fond rose du logo*/ }
border:1px solid #fde5d9; nav a{
border-radius:10px 10px 0px 0px; font-size: 1.1em;
/*Bordures arrondies*/ color:#CCC; /*#181818; Gris*/
} text-decoration:none;
/*banniere*/ }
#banniere{ nav a:hover{
background- font-size: 1.1em;
color:rgba(20,35,126,1);/*#14237e;*/ color:#6CF; /*#CCC; Gris clair*/
border:1px solid rgba(20,35,126,1); text-decoration:none;
} }
/*Nom de l'ecole*/ /*Presentation*/
header div h2{ section{
display:inline-block; width:70%;
font-family:"Trebuchet MS", Arial, }
Helvetica, sans-serif; /*News TIC*/
color:#14237e; /*Le bleu du logo*/ aside{
font-weight:lighter; /*Rendre l'criture width:25%;
fine*/ }
margin-left:50px;/*Marge exterieure de
gauche*/ article, section, aside{
display:inline-block;
} vertical-align:top;
/*Titre de bienvenue*/ border:1px solid #fde5d9;
header h1{ border-radius:10px 10px 0px 0px;
font-family:"Trebuchet MS", Arial, /*Bordures arrondies*/
Helvetica, sans-serif; box-shadow: 0px 0px 20px #aaa;
color:rgba(255,255,255,1);/*#14237e; Le -moz-box-shadow: 0px 0px 20px #aaa;
bleu du logo*/ -webkit-box-shadow: 0px 0px 20px #aaa;
font-weight:bold; /*Rendre l'criture fine*/ margin-top:5px;
font-size:26px; margin-left:5px;
text-align:center; margin-bottom:5px;
text-shadow:0px 1px 2px #FFFFFF; margin-right:5px;
} }

59
dApplication
article p, aside p{ /*Album photo*/
font-family:Arial, Helvetica, sans-serif; figure img{
font-size:14px; display:inline-block;
color:#000; border:1px solid rgb(214,16,5);
padding-left:15px; margin:2px;
} width:25%;
article h2{ height:25%;
font-family:Arial, Helvetica, sans-serif; }
font-size:20px; figcaption{
color:#000; color:#333;
border-bottom-style:dotted; font-family:Arial, Helvetica, sans-serif;
border-bottom-color:#FF0000; font-size:12px;
border-bottom-width:thin; }
background-color:#CCCCCC;
padding-left:15px; /*pied de page*/
margin-top:0; footer, footer h2{
border-radius:10px 10px 0px 0px; font-family:Arial, Helvetica, sans-serif;
/*Bordures arrondies*/ font-size:14px;
} background-color:#000000;
aside h2{ color:#CCCCCC;
font-family:Arial, Helvetica, sans-serif; padding-left:5px;
font-size:16px; padding-top:5px;
color:#000; }
border-bottom-style:ridge; footer a{
border-bottom-color:#FF0000; text-decoration:none;
border-bottom-width:thin; color:#CCCCCC;
padding-left:10px; }
border-radius:10px 10px 0px 0px; footer ul{
/*Bordures arrondies*/ display:inline-block;
} vertical-align:top;
.titreinfo{ margin-left:50px;
font-family:Arial, Helvetica, sans-serif; }
font-size:12px; footer p{
font-weight:bold; display:inline-block;
color:#999999; margin-left:100px;
padding-left:10px; text-align:center;
} }

60
dApplication
Aperu de la page daccueil du site

61
dApplication
BIBLIOGRAPHIE
Commentamarche. (2006, Juin). Feuille de style - CSS. Retrieved Octobre 2010, from Portail
encyclopedique commentcamarche.net: http://www.commentcamarche.net
Goetter, R. (2005,2007). CSS 2 - Pratique du design web. Groupe EYROLLES.

62

Support de Cours Module XHTML-CSS

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Support de Cours Module XHTML-CSS

Hochgeladen von

Copyright:

Verfügbare Formate

Support de cours Module

TABLE DES MATIRES

1re PARTIE : LE LANGAGE HTML

Chapitre I NOTION DE BALISES.........................................................................................- 5 -

Chapitre II LES BALISES EN BLOC ET LES BALISES EN LIGNE..........................................- 11 -

Chapitre IV LES BALISES DE TABLEAU............................................................................- 16 -

Chapitre V LES BALISES DIMAGE ET DIMAGES-MAPS....................................................- 20 -

Chapitre VI LES BALISES DE FORMULAIRE......................................................................- 23 -

Chapitre VII LES BALISES DE CADRE...............................................................................- 28 -

Chapitre VIII LA BALISE DHYPERLIEN.............................................................................- 30 -

Chapitre IX LES BALISES DE LISTE..................................................................................- 32 -

Chapitre X LES BALISES DE CONTENU EXECUTABLE.......................................................- 34 -

2me PARTIE : LES FEUILLES DE STYLE OU CSS

Chapitre XI LES FEUILLES DE STYLE (CSS)......................................................................- 35 -

M. GOGBE Benjamin Professeur Dveloppement Web 2

Historique du langage HTML

HTML (Hypertext Markup Language) est un langage de balisage qui permet de

Le langage de styles CSS

Paralllement au HTML, le langage de mise en page et de mise en forme des pages

Si en thorie, un simple diteur de texte (tel que le Bloc Notes de Windows ou

Les diteurs visuels

Les diteurs classiques

M. GOGBE Benjamin Professeur Dveloppement Web 3

Les navigateurs web

Fonctionnement dun site web

Figure 1 - Fonctionnement d'un site web statique

Figure 2 - Fonctionnement d'un site web dynamique

M. GOGBE Benjamin Professeur Dveloppement Web 4

CHAPITRE I NOTION DE BALISES

Sauf exception, elles fonctionnent par paires. Et chaque balise ouvrante

Syntaxe : <nombalise> Portion du document </nombalise>

Exemple de balises : <strong>, <p>, <h1>, </h1>,

Il peut arriver quune balise soit referme immdiatement. On parle alors de

Syntaxe : <nombalise />

Exemple de balise simple : <img src="photo.jpg" />

M. GOGBE Benjamin Professeur Dveloppement Web 5

II- LES ATTRIBUTS

Les attributs ou proprits sont des caractristiques qui permettent de

Syntaxe : <nombalise nomattribut="valeur">

Dans lexemple ci-dessus, llment 1 reprsente un titre de premier niveau

III- IMBRICATION DES ELEMENTS

Les lments peuvent tre imbriqus, condition de respecter une certaine

Bon exemple : <h2>Bienvenue chez Toto <strong>et

Dans le bon exemple, la balise ouvrante <strong> se ferme lintrieur de

M. GOGBE Benjamin Professeur Dveloppement Web 6

IV- QUELQUES REGLES DECRITURE DU HTML

Rgles pour les noms des fichiers

Quelques rgles dcriture des balises HTML

La norme HTML impose les rgles suivantes :

En cas dimbrication de balises, lordre de fermeture est linverse de celui de

V- STRUCTURE DUNE PAGE HTML 5

Une page HTML ou XHTML scrit de la faon suivante :

M. GOGBE Benjamin Professeur Dveloppement Web 7

VI- LES ELEMENTS DE BASE

Sur la premire ligne, la balise <!DOCTYPE> indique au navigateur le type de

Elle est obligatoire dans tout document.

Llment racine <html>

Il reprsente le parent. Il contient la racine de tout le document HTML. De ce fait, les

Lentte du document : Llment <head>

Les meta-informations : llment <meta />

<meta name="nom" content="valeur" />

M. GOGBE Benjamin Professeur Dveloppement Web 8

Lauteur de la page : name="author"

<meta name="description" content="Cours de