Vous êtes sur la page 1sur 31

Facult des Sciences et Techniques Beni Mellal Licence Informatique

HTML : Hyper Text MarkUp Language


&
CSS (Cascading Style Sheets)

Pr : Hicham ZOUGAGH Page 1


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Sommaire
HTML (Hyper Text Markup Language)

Introduction

Listes puces

Style

Cration des liens

Les images

Les tableaux

Les formulaires

Finaliser et envoyer un formulaire

Les cadres HTML

CSS (Cascading Style Sheets)

Introduction

Formatage du texte

La couleur et le fond

Les bordures

Pr : Hicham ZOUGAGH Page 2


Facult des Sciences et Techniques Beni Mellal Licence Informatique

1. Introduction:

LHyperText Markup Language, gnralement abrg HTML, est le format de


donnes conu pour reprsenter les pages web. Cest un langage de balisage permettant
dcrire de lhypertexte, do son nom. HTML permet galement de structurer
smantiquement et de mettre en forme le contenu des pages, dinclure des ressources
multimdias dont des images, des formulaires de saisie, et des programmes informatiques. Il
permet de crer des documents interoprables avec des quipements trs varis de manire
conforme aux exigences de laccessibilit du web. Il est souvent utilis conjointement avec
des langages de programmation (JavaScript, PHP, ..) et des formats de prsentation (feuilles
de style en cascade). Voici donc quoi ressemblera un document minimal ainsi que sa
reprsentation dans un navigateur Web :

<HTML>
<HEAD>
<TITLE>Bonjour </TITLE>
</HEAD>
<BODY>
HTML : Hyper Text MarkUp Language
</BODY>
</HTML>

Entte : <head> : L'en-tte du document est rserve aux mta-informations


Titre : <title> : Le titre apparat le plus souvent dans la barre de titre du navigateur
Web. Son but est de pouvoir identifier le document.
Corps : <body> : Le corps du document, ce qui sera effectivement affich par le navigateur Web, est
balis par les balises <BODY> et </BODY>.

1.1 Insrer un commentaire

<!-- Ceci est un commentaire -->


1.2 Les paragraphes

Lorsqu'on crit du texte dans une page web, on le fait l'intrieur de paragraphes. Le
langage HTML propose justement la balise <p> pour dlimiter les paragraphes.

<p> signifie "Dbut du paragraphe" et </p> signifie "Fin du paragraphe"

1.3 Taille de la police

Pr : Hicham ZOUGAGH Page 3


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Il existe 7 tailles de polices. La commande est <FONT SIZE = n> </FONT> ou n


prend les valeurs de 1 7.

1 : petits caractres
7 : gros caractres.
La police par dfaut possde la taille 3.

<FONT SIZE = 7> dveloppement Web. -taille7<BR>


<FONT SIZE = 6> dveloppement Web -taille 6<BR>
<FONT SIZE = 5> dveloppement Web -taille 5<BR>
<FONT SIZE = 4> dveloppement Web -taille 4<BR>
<FONT SIZE = 3> dveloppement Web -taille 3<BR>
<FONT SIZE = 2> dveloppement Web -taille 2<BR>
<FONT SIZE = 1> dveloppement Web -taille 1<BR>

1.4 Les titres


En HTML , on a le droit d'utiliser 6 niveaux de titres diffrents. :

<h1> </h1> : En gnral, on s'en sert pour afficher le titre de la page.

<h2> </h2> : signifie "titre important".

<h3> </h3> : 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 pas important du tout.

La balise <title> affiche le titre de la page dans la barre de titre du navigateur.

Les titres <h1> servent crer des titres qui seront affichs dans la page web.

Exemple :
<HTML>
<HEAD>
<TITLE>Essai n 2</TITLE>
</HEAD>
<H1> TITRE PRINCIPALE </H1>
<H2> TITRE SECONDAIRE </H2>
<H3> Paragraphe principale</H3>
<H4> Paragraphe secondaire</H4>
<H5> titre Paragraphe 1 secondaire</H5>
<H6> texte1, texte1, texte1, texte1 </H6>
<H5> titre Paragraphe 2 secondaire</H5>
<H6> texte2, texte2, texte2, texte2 </H6>
</BODY>
</HTML>

Pr : Hicham ZOUGAGH Page 4


Facult des Sciences et Techniques Beni Mellal Licence Informatique

1.5 Les sparateurs

<br /> : est une balise orpheline qui sert juste aller la ligne. Vous devez
obligatoirement la mettre l'intrieur d'un paragraphe.

<HR> pour une ligne horizontale de sparation :

WIDTH fait varier la largeur de la ligne en % soit en pixel (valeur par dfaut
100%)
SIZE fait varier l'paisseur de la ligne en pixel (valeur par dfaut 1)
ALIGN fait un alignement de la ligne suivant les 3 possibilits :
CENTER par rapport au centre de la fentre,
LEFT par rapport la gauche de la fentre,
RIGHT par rapport la droite de la fentre.
NOSHADE Lorsqu'il est prsent dans le marqueur <HR> l'effet est une
ligne pleine sans ombrage.

Le paramtre ALIGN a un effet que lorsque la longueur de la ligne est infrieure


100 %.

<HTML>
<HEAD>
<TITLE>essai n 3</TITLE>
</HEAD>
<BODY>
<H4>
HR<HR>
HR WIDTH="75%"
<HR WIDTH="75%">
HR WIDTH="25%"
<HR WIDTH="25%">
-HR WIDTH="50%" & SIZE=5
<HR WIDTH="50%" SIZE=5>
HR WIDTH="50%" & SIZE=20
<HR WIDTH="50%" SIZE=20>
HR WIDTH="50%" & SIZE=5 ALIGN=LEFT
<HR WIDTH="50%" SIZE=5 ALIGN=LEFT>
HR WIDTH="50%" & SIZE=5 ALIGN=LEFT
NOSHADE
<HR WIDTH="50%" SIZE=5 ALIGN=LEFT
NOSHADE>
</H4>
</BODY>
</HTML>

Pr : Hicham ZOUGAGH Page 5


Facult des Sciences et Techniques Beni Mellal Licence Informatique

1.6. Les balises de mise en valeur


Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et
vous aimeriez les faire ressortir. HTML vous propose diffrents moyens de mettre en valeur le
texte de votre page :

<em> : permet de mettre le texte en italique


<strong> : permet de mettre le texte en gras
<mark> : perme de surligner le texte.

2. Les listes puces

HTML dfinit 5 types de listes :

Les listes numrotes ou ordonnes (ou Ordered (numbered) lists),


Les listes non numrotes dites listes puces dont les entes sont signales par un
signe.
2.1 Listes numrotes ou Ordered (numbered) lists
Exemple :

<HTML>
<HEAD>
<TITLE>Liste non ordonne</TITLE>
</HEAD>
<BODY>
<H1>
<ol>
<h1>Universit My Slimane
<li>EST
<li>FST
<li>FP
</ol>
</H1>
<BODY>
<HTML>

Remarque:
Les options suivantes sont possibles :

TYPE=1 : pour une liste numrote 1,2,3...


TYPE=A : pour un reprage type A,B,C...
TYPE=a : pour un reprage type a,b,c...
TYPE=I : pour une liste numrote I,II,III,IV...
TYPE=i : pour une liste numrote i,ii,iii,iv...
START=n fait dbuter le reprage (chiffres ou lettres) au rang numro n.

Pr : Hicham ZOUGAGH Page 6


Facult des Sciences et Techniques Beni Mellal Licence Informatique

2.2 Listes non numrotes ou Unordered lists

<HTML>
<HEAD>
<TITLE>Liste non
ordonne</TITLE>
</HEAD>
<BODY>
<H1>
<ul>
<lh>Universit My Slimane
<li>EST
<li>FST
<li>FP
</ul>
</H1>
<BODY>
<HTML>

2.3 Listes descriptives ou (Definition lists) <DL> <DT> <DD>

L'environnement <DL> dlimite une zone de liste de dfinition.


La commande <DT> introduit un nouveau terme de dfinition. C'est en gnral
un lment court.
La commande <DD> introduit une description du terme de dfinition. Le
rsultat l'cran est un dcalage du texte vers la droite.

<HTML>
<HEAD>
<TITLE>Liste des Labores</TITLE>
</HEAD>
<BODY>
<H2>
Departement
<DL>
<DD> ESSI
<DT>Equipe Signaux et System Informatique
<DD>MAD
<DT>Mathematique d'aide la decision
<DD> TIM
<DT>Telecom & Informatique & Multimedias
</DL>
</H2>
<BODY>
<HTML>

Pr : Hicham ZOUGAGH Page 7


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Remarque : Deux types de liste peuvent semboter :

<HTML>
<HEAD>
<TITLE>emboitement de listes</TITLE>
</HEAD>
<OL>
<LI> inforamtique
<UL>
<LI> HTML
<LI> PHP
</UL>
<LI> Mathematique
<UL>
<LI> analyse
<LI> algebre
</UL>
</BODY
</HTML>

3. Style
3.1 Police
L'utilisation de diffrents styles de polices de caractres permet de varier la
prsentation d'un texte.

<I> texte </I> met le texte en italique.


<B> texte </B> met le texte en gras.
<U> texte </U> souligne le texte.
<S> texte </S> barre le texte.
<SUB> texte </SUB> indice.
<SUP> texte </SUP> exposant.

3.2 Centrage dun texte


Cette commande permet de centrer toutes les lignes d'un texte.
<center> texte </center>
3.3 texte prformat
<PRE> texte </PRE>

Les espaces (plusieurs la suite), tabulations, retour chariot n'ont pas de valeur en
HTML.
La commande <PRE> ... </PRE> est utilise pour inclure un texte pr-format dans
un document HTML.

Pr : Hicham ZOUGAGH Page 8


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple

<HTML>
<HEAD>
<TITLE>texte prformat</TITLE>
</HEAD>
<BODY>
<BR><BR>
<PRE>
MATIERES PROFESSEUR NB d'heures
-----------------------------------------------------
java Alaoui 80
Rseaux Elansari 90
Linux Amrani 70
</PRE>
<BODY>
<HTML>

3.4 Les couleurs utilises dans BODY

Il est possible de modifier ces couleurs en rajoutant la commande les options suivantes :

BGCOLOR=c pour le fond du document


TEXT=x pour la couleur des caractres
FLINK=x pour la couleur des prises d'hypertextes non utilises.

La valeur de x est compose de trois nombres hexadcimaux accols (cods de 00


FF) reprsentant le mlange des trois couleurs primaires RGB (Red, Green, Blue). Le nombre
obtenu est prcd dun dise (#). Le blanc pour valeur # FFFFFF ; le noir pour valeur
#000000. Toutes les autres couleurs sont obtenues par des dosages prcis dans chacune des
composantes RVB.

Pr : Hicham ZOUGAGH Page 9


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple de couleurs :

avec x = #000000 pour noir


avec x = #FFFFFF pour blanc
avec x = #C0C0C0 pour gris clair
avec x = #80FF80 pour vert clair
avec x = #FFFFE8 pour jaune clair
avec x = #80FFFF pour bleu clair
avec x = #FF8080 pour rose
avec x = #FF80C0 pour mauve
avec x = #800000 pour marron
avec x= #000080 pour bleu
avec x = #008040 pour vert
avec x = #FF0000 pour rouge
avec x= #FF8000 pour jaune
avec x = #800080 pour violet

Exemple illustrative de couleur:

<HTML>
<HEAD>
<TITLE> Essai de couleurs </TITLE>
</HEAD>
<BODY BGCOLOR=#80FFFF TEXT=#000080
>
HTML est un langage de balisage

</BODY>
</HTML>

4. Cration des liens


La balise <a> permet de crer un lien vers un site ou une page.

Lattribut possibles sont :HREF

La syntaxe complte est <A HREF="document">texte</A>

O HREF est un raccourci pour "Hypertexte rfrence", document dsigne le document vers
lequel on pointe et texte reprsente le texte qui sera affich pour reprsenter le lien hypertexte.

4.1 Pour crer un lien vers un site,

exemple :

google.fr : <a href="http://www.google.fr">Site de google </a>

Pr : Hicham ZOUGAGH Page 10


Facult des Sciences et Techniques Beni Mellal Licence Informatique

4.2 Pour crer un lien vers une page :

Nom_fichier.html situe dans le mme rpertoire que notre page courante :

<a href="nom_fichier.html"> nom_fichier </a>

4.3 crer un lien vers une page hors dossier courant :

Nom_fichier.html situe dans un dossier qui se trouve "avant" dans larborescence,

<a href="../nom_fichier.html"> nom_fichier </a>

4.4 Cration dun lien interne vers un endroit prcis dun document

Un lien interne pointe vers une ancre, c'est dire un endroit l'intrieur d'un
document dfini par un nom. Une ancre se dfini dans le marqueur <A> en y ajoutant le
paramtre NAME="nom".

Vous pouvez dfinir une table des matires au dbut d'un long document en utilisant
ce type de lien.

<HTML>
<HEAD>
<TITLE>Modules </TITLE>
</HEAD>
<BODY>
<H1>Modules Genie informaique</H1>
<A HREF="#Informatique"><H2>Informatique</H2></A>
<A HREF="#Mathematique"> <H2>Mathematique</H2></A>
<A HREF="#physique"><H2>Physique</H2></A>
<BR><BR>
<A NAME="Mathematique"></A>
Analyse<BR>
algebre<BR>
<A NAME="Informatique"></A>
PHP<BR>
Java<BR>
UML<BR>
Base de donne<BR>
Analyse de donne<BR>
<A NAME="Physique"></A>
Electricit<BR>
Mcanique quantique<BR>
Electromagntisme<BR>
</BODY>
</HTML>

Pr : Hicham ZOUGAGH Page 11


Facult des Sciences et Techniques Beni Mellal Licence Informatique

4.5 Cration dun lien externe vers un endroit prcis dun document

Il est galement possible d'utiliser les ancres dans les liens externes. Il faut alors
spcifier l'ancre vers laquelle pointe le lien en ajoutant #nom la fin de l'URL.

Dans le fichier1.htm :

<A href="fichier2.htm#Mathmatique"> Mathmatique </a>

et dans le fichier2.htm lendroit ou lon veut pointer :

<A name="Mathmatique">Mathmatique </A>

5. Les images
Il existe plusieurs formats d'images adaptes au Web :

JPEG : pour les photos ;


PNG : pour toutes les autres illustrations ;
GIF : similaire au PNG, plus limit en nombre de couleurs mais qui peut tre anim.

Quelle est la fameuse balise qui va nous permettre d'insrer une image ?

<img /> : C'est une balise de type orpheline (comme <br />). Cela veut dire qu'on n'a pas
besoin de l'crire en deux exemplaires comme la plupart des autres balises que nous avons
vues jusqu'ici. En effet, nous n'avons pas besoin de dlimiter une portion de texte, nous
voulons juste insrer une image un endroit prcis.

La balise doit tre accompagne de 2 attributs obligatoires :

src : il permet d'indiquer o se trouve l'image que l'on veut insrer (chemin).

alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif
l'image, c'est--dire un court texte qui dcrit ce que contient l'image. Ce texte sera affich
la place de l'image si celle-ci ne peut pas tre tlcharge.

Title : permettant d'afficher une info bulle lors du survol de limage.

Pr : Hicham ZOUGAGH Page 12


Facult des Sciences et Techniques Beni Mellal Licence Informatique
<p>
Voici une photo illustrant une montagne:<br />
<img src="images/montagne.jpg" alt="Photo de montagne" title="C'est beau les
Alpes quand mme !" />
</p>

Pour ces commandes les options suivantes sont possibles :

ALIGN=left/right/top/texttop/middle/absmiddle/baseline/bottom/absbottom

left : positionne l'image gauche de l'cran.


right : positionne l'image droite de l'cran.
top : positionne le sommet de la ligne de texte au sommet de l'image.
texttop : positionne l'axe horizontal de la ligne de texte au sommet de l'image.
middle : positionne la base de la ligne de texte au milieu de l'image.
absmiddle : positionne l'axe horizontal de la ligne de texte au milieu de
l'image.
baseline : positionne la base de la ligne de texte la base de l'image.
bottom : positionne la base de la ligne de texte la base de l'image.
absbottom : positionne la ligne de texte au bas de l'image.

WIDTH=n ou n% HEIGHT=m ou m% redimensionnent l'image : n et m valeurs de la


largeur et de la hauteur de l'image en pixels ou n% et m% valeurs relatives par rapport la
taille normale de l'image.

VSPACE=n HSPACE=m loignent le texte de l'image de n pixels au-dessus et au-dessous de


l'image et de m pixels gauche et droite de l'image.

BORDER=n trace un cadre autour de l'image avec un trait de n pixels de large.

5.1 Cration d'une figure

La balise < figures> ..</Figure> vient pour jouer le rle de la balise <P>, il est
souvent utilis avec une lgende <figcaption></figcaption>

Exemple :
<figure>
<img src="bhar.jpg" alt="Photo de montagne" title="C'est beau les Alpes quand mme !"
/>
<figcaption>Le logiciel Bloc-Notes</figcaption>
</figure>

Pr : Hicham ZOUGAGH Page 13


Facult des Sciences et Techniques Beni Mellal Licence Informatique

6. Les tableaux :
Un tableau se compose de colonnes et de lignes.

Pour la cration des tableaux on utilise les balises : <table> .. </ table>
Cette balise sutilise avec les attributs suivant :
BORDER : trace un cadre en trait fin
BORDER=n : trace un cadre en trait de n pixels d'paisseur
CELLSPACING=n : espacement de n pixels entre les cellules.
CELLPADDING=n : espacement autour de l'criture dans les cellules.
WIDTH=n ou n% : largeur en pixels ou largeur relative du tableau.

Pour la cration dune ligne on utilise les balises : <tr> ..</tr>

Cette balise sutilise avec les attributs suivant :

ALIGN= left/ right/center : position horizontale (gauche/droite/centre) du texte dans


les cellules de la ligne.

VALIGN=top/middle/bottom/baseline : position verticale (haut/milieu/bas) du texte


dans les cellules de la ligne.

<TD> ... </TD> encadre une cellule du tableau. (cellule pouvant contenir un
texte alphanumrique, une image, une liste, un lien, un autre tableau ou rien).

Cette balise sutilise avec les balises suivantes :

ALIGN = left/right/center : position horizontale du texte dans la cellule.


COLSPAN=n : fusionne n cellules horizontalement.
ROWSPAN=n : fusionne n cellules verticalement.

<TH> ... </TH> encadre une cellule d'en-tte du tableau. (cellule pouvant contenir un
texte alphanumrique, une image, une liste, un lien, un autre tableau ou rien)(texte en
gras).

Cette balise sutilise avec les balises suivantes :

ALIGN=left/right/center : position horizontale (gauche/droite/centre)


du texte dans la cellule d'entte.
COLSPAN=n : fusionne n cellules horizontalement.
ROWSPAN=n : fusionne n cellules verticalement.

Pr : Hicham ZOUGAGH Page 14


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple 1 :

<HTML>
<HEAD>
<TITLE>tableau 1</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=top> PREMIER
TABLEAU</CAPTION>
<TR>
<TD>ligne 1 ; cellule 1</TD>
<TD>ligne 1 ; cellule 2</TD>
</TR>
<TR>
<TD>ligne 2 ; cellule 1</TD>
<TD>ligne 2 ; cellule 2</TD>
</TR>
</TABLE>
</CENTER>
<BODY>
<HTML>

Exemple 2 :

<HTML>
<HEAD><TITLE>tableau 2</TITLE></HEAD>
<Body>
<TABLE BORDER=8 CELLPADDING=10>
<CAPTION ALIGN=bottom>DEUXIEME TABLEAU
</CAPTION>
<TR>
<TH COLSPAN=5>LETTRES</TH>
</TR>
<TR>
<TD>Math</TD><TD>Info</TD><TD>Chimie</TD>
<TD>physique</TD><TD
>communication</TD>
</TR>
<TR>
<TD>ALg</TD><TD>Web</TD><TD>Orga</TD><
TD>thermo</TD><TD>Exp_Oral</TD>
</TR>
</TABLE></body/></html>

Pr : Hicham ZOUGAGH Page 15


Facult des Sciences et Techniques Beni Mellal Licence Informatique

7. Les formulaires
Toute page HTML peut tre enrichie de formulaires interactifs, qui invitent vos
visiteurs renseigner des informations : saisir du texte, slectionner des options, valider et
envoyer par un bouton afin quelles soient traites au niveau du serveur.

7.1 Cration dun formulaire :

La cration du formulaire se fait par lintermdiaire de la balise : <form></form>

Cette balise utilise les attributs suivants :

Method : cet attribut indique par quel moyen les donnes vont tre envoyes. existe
deux solutions pour envoyer des donnes sur le Web :

method=get : cest une mthode en gnral assez peu adapte car elle est
limite 255 caractres. La particularit vient du fait que les informations
seront envoyes dans l'adresse de la page.
Method=post : c'est la mthode la plus utilise pour les formulaires car
elle permet d'envoyer un grand nombre d'informations. Les donnes saisies
dans le formulaire ne transitent pas par la barre d'adresse.

Action :c'est l'adresse de la page ou du programme qui va traiter les informations

<form method="post" action="traitement.php">


Texte l'intrieur du formulaire
</form>

7.2 Les zones de texte

Nous allons passer en revue les diffrentes balises HTML permettant de saisir du texte dans
un formulaire.
Il faut savoir qu'il y a deux zones de texte diffrentes :

La zone de texte monoligne : comme son nom l'indique, on ne peut y crire qu'une
seule ligne. Elle sert saisir des textes courts, par exemple un pseudo.
La zone de texte multiligne : cette zone de texte permet d'crire une quantit
importante de texte sur plusieurs lignes.

Pr : Hicham ZOUGAGH Page 16


Facult des Sciences et Techniques Beni Mellal Licence Informatique

a) Zone de texte monoligne :


Zone texte

<form method="post" action="traitement.php">


Nom : <input type="text" name="Nom" size=30/>
</form>

Avec la commande input il faut spcifier le type le nom

Quelques attributs supplmentaires

On peut ajouter un certain nombre d'autres attributs la balise <input /> pour personnaliser
son fonctionnement :

On peut agrandir le champ avec size.

On peut limiter le nombre de caractres que l'on peut saisir avec maxlength.

On peut pr-remplir le champ avec une valeur par dfaut l'aide de value.

On peut donner une indication sur le contenu du champ avec placeholder. Cette
indication disparatra ds que le visiteur aura cliqu l'intrieur du champ.

Zone de mot de passe.

Vous pouvez facilement faire en sorte que la zone de texte se comporte comme
une zone de mot de passe , c'est--dire une zone o on ne voit pas l'cran
les caractres saisis.

Pour crer ce type de zone de saisie, utilisez l'attribut : type="password".

Votre mot de passe : <input type="password" name="pass" />

b. Zone de texte multiligne


Pour crer une zone de texte multiligne, on change de balise : nous allons utiliser
<textarea> </textarea>.

Pr : Hicham ZOUGAGH Page 17


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Dans ce type, on spcifie d'abord le type soit textarea, ensuite le nom de la rubrique soit
name=" nom_du_champ , puis les paramtres d'affichage de la zone de dialogue en lignes (n)
et en colonnes (m).

<TEXTAREA name="zone_libre" rows=5 cols=40></TEXTAREA>

7.3 lments doption

Les d'lments d'options utiliser dans les formulaires sont des lments qui demandent au
visiteur de faire un choix parmi une liste de possibilits. Nous allons passer en revue :

les cases cocher ;


les zones d'options ;
les listes droulantes.

a. Les cases cocher

La commande input Type=checkbox permet d'afficher une liste ou plusieurs choix sont
possibles en mme temps.

La commande s'crit:

<input name="nom_du_champ" TYPE=checkbox VALUE="texte"> Texte

Exemple : <form method="post" action="traitement.php">


<p>
Cochez les aliments que vous aimez manger :<br />
<input type="checkbox" name="couscous" value="couscous" /> couscous<br />
<input type="checkbox" name="steak" value="steak" /> Steak <br />
<input type="checkbox" name="panini" value="panini" /> Panini <br />
<input type="checkbox" name="friture" value="friture" /> friture
</p>
</form>

Pr : Hicham ZOUGAGH Page 18


Facult des Sciences et Techniques Beni Mellal Licence Informatique

b. Les zones d'options


Les zones d'options vous permettent de faire un choix (et un seul) parmi une liste de
possibilits. Elles ressemblent un peu aux cases cocher mais il y a une petite difficult
supplmentaire : elles doivent tre organises en groupes. Les options d'un mme groupe
possdent le mme nom (name), mais chaque option doit avoir une valeur (value) diffrente.

La balise utiliser est toujours un <input />, avec cette fois la valeur radio pour
l'attribut type.

<input type="radio" name="info" value="OUI">OUI


<input type="radio" name="info" value="NON">NON

Exemple :

<form method="post" action="traitement.php">


<p>
Veuillez indiquer la tranche d'ge dans laquelle vous vous situez :<br />

<input type="radio" name="age" value="moins15" />Moins de 15 ans<br />


<input type="radio" name="age" value="medium15-25" />15-25 ans<br />
<input type="radio" name="age" value="medium25-40" />25-40 ans<br />
<input type="radio" name="age" value="plus40" />Encore plus vieux que a ?!
</p>
</form>

c. Les listes droulantes


Les listes droulantes sont un autre moyen lgant de faire un choix parmi
plusieurs possibilits. Le fonctionnement est un peu diffrent.

Pr : Hicham ZOUGAGH Page 19


Facult des Sciences et Techniques Beni Mellal Licence Informatique

On va utiliser la balise <select> </select> qui indique le dbut et la fin de la


liste droulante. On ajoute l'attribut name la balise pour donner un nom la liste.

Puis, l'intrieur du <select> </select>, nous allons placer plusieurs


balises <option> </option> (une par choix possible). On ajoute chacune d'elles un
attribut value pour pouvoir identifier ce que le visiteur a choisi.

Exemple illustraif

<form method="post" action="traitement.php">


<p>
Dans quel pays habitez-vous ?<br />
<select name="pays" value="pays">
<option value="france"> France </option>
<option value="espagne"> Espagne </option>
<option value="italie"> Italie </option>
<option value="maroc"> maroc </option>
</select>
</p>
</form>

8. Finaliser et envoyer un formulaire


8.6. Regroupement des champs
Si votre formulaire grossit et comporte beaucoup de champs, il peut tre utile de les
regrouper au sein de plusieurs balises <fieldset>.
Chaque <fieldset> peut contenir une lgende avec la balise <legend>.
Exemple :

Pr : Hicham ZOUGAGH Page 20


Facult des Sciences et Techniques Beni Mellal Licence Informatique

<form method="post" action="traitement.php">


<fieldset>
<legend>Vos coordonnes</legend> <br>
Quel est votre nom ?
<input type="text" name="nom" id="nom" />
Quel est votre prnom ?
<input type="text" name="prenom" />

Quel est votre e-mail ?


<input type="email" name="email" />

</fieldset>

<fieldset>
<legend>Votre souhait</legend> <!-- Titre du fieldset -->
<p>
Faites un souhait que vous voudriez voir exauc :
<input type="radio" name="souhait" value="riche/> Etre riche
<input type="radio" name="souhait" value="celebre" /> Etre
clbre
<input type="radio" name="souhait" value="intelligent" /> Etre
<strong>encore</strong> plus intelligent
<input type="radio" name="souhait" value="autre" /> Autre...
* </p>

<p>
Si "Autre", veuillez prciser :
<textarea name="precisions" id="precisions" cols="40"
rows="4"></textarea>
</p>
</fieldset>
</form>

8.7. Les boutons denvoie

Les formulaires doivent tre complts avant fermeture par une commande
permettant d'envoyer le contenu des champs remplis au serveur HTTP.

type="submit" : le principal bouton d'envoi de formulaire. C'est celui que vous


utiliserez le plus souvent. Le visiteur sera conduit la page indique dans
l'attribut action du formulaire (traitement.php).

<input type="submit" value="Soumettre">

type="reset" : remise zro du formulaire.

<input type="reset" value="effacer">

Pr : Hicham ZOUGAGH Page 21


Facult des Sciences et Techniques Beni Mellal Licence Informatique

9. Les cadres HTML (frames) :


Grce la technologie des frames (en franais "cadres") il est dsormais possible
d'afficher plusieurs pages HTML dans diffrentes zones (ou cadres).

Crer un cadre

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

Trois commandes permettent de grer cette fonctionnalit.

<FRAMESET ROWS COLS> </FRAMESET>

Exemple 1 :

<FRAMESET COLS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>

Exemple 2 :

<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>

Pr : Hicham ZOUGAGH Page 22


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple 3 :

<FRAMESET COLS="20%,80%">

<FRAME>

<FRAMESET ROWS="40%,60%">

<FRAME>

<FRAME>

</FRAMESET>

</FRAMESET>

Pr : Hicham ZOUGAGH Page 23


Facult des Sciences et Techniques Beni Mellal Licence Informatique

CSS (Cascading Style Sheets)

Pr : Hicham ZOUGAGH Page 24


Facult des Sciences et Techniques Beni Mellal Licence Informatique

1. Introduction

Il faut savoir qu'aux dbuts du Web, CSS n'existait pas. En fait, il n'y avait
initialement que le langage HTML. Il y avait en effet des balises HTML ddies la
mise en forme. <font color="FFFFFF">, par exemple, permettait de dfinir la couleur
du texte.

Cependant, les pages HTML commenaient devenir assez complexes. Il y


avait de plus en plus de balises et c'tait un joyeux mlange entre le fond et la forme,
qui rendait la mise jour des pages web de plus en plus complexe. C'est pour cela que
l'on a cr le langage CSS.

1.1 Utilisation du code CSS

On peut crire du code en langage CSS trois endroits diffrents :

Dans un fichier .css (recommand) :

C'est la mthode la plus pratique et la plus souple. Cela nous vite de tout
mlanger dans un mme fichier.

Pour ce faire on utilise le lien suivant dans lentte head

<link rel="stylesheet" href="nom_fichier_style.css" />

Dans l'en-tte <head> du fichier HTML

Cette mthode consiste insrer le code CSS directement dans une


balise <style> l'intrieur de l'en-tte <head>.

<html>
<head>
<style>
Code CSS
</style>
</head>

</html>

Directement dans les balises

Pr : Hicham ZOUGAGH Page 25


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Cette dernire mthode permet dajouter un attribut style n'importe quelle


balise. Vous insrerez votre code CSS directement dans cet attribut :

<body>
<h1>Mon super site</h1>

<p style="color: blue;"> Bienvenue sur mon site ! </p>

</body>

1.2 Ajout dun style

syntaxe :

une feuille de style CSS ressemble cela :

balise1
{
propriete1: valeur1;
propriete2: valeur2;

}

balise2
{
propriete1: valeur1;
propriete2: valeur2;

}

Ce code est constitu de trois lments :

Des noms de balises : on crit les noms des balises dont on veut modifier l'apparence.
Par exemple, si je veux modifier l'apparence de tous les paragraphes <p>, je dois
crire p.
Des proprits CSS : les effets de style de la page sont rangs dans des
proprits. Il y a par exemple la proprit color qui permet d'indiquer la couleur du
texte, font-size qui permet d'indiquer la taille du texte, etc.
Les valeurs : pour chaque proprit CSS, on doit indiquer une valeur. Par exemple,
pour la proprit color, il faut indiquer le nom de la couleur. Pour font-size, il faut
indiquer quelle taille on veut, etc.

Pr : Hicham ZOUGAGH Page 26


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple :

p
{
color: blue; /* Les paragraphes seront en bleu */
}

Le problme qui se pose ici cest que tous les paragraphes seront en bleu.
Pour remdier cet handicap, on utilise le principe de classe.de telle sorte que chaque
balise on lui attribut une classe (class)

Exemple :

Code html :

<p class="introduction"> Bienvenue sur mon site ! </p>

Code css :

.introduction
{
color: blue;
}

2. Formatage du texte

2.1 La Taille :

Pour modifier la taille du texte, on utilise la proprit CSS font-size. pour ce faire on utilise
deux mthode :

- Valeur absolue : font-size: 14px (la mesure est en pixel).

- Valeur relative : Il y a plusieurs moyens d'indiquer une valeur relative. Vous pouvez
par exemple crire la taille avec des mots en anglais comme ceux-ci :

xx-small : minuscule ;
x-small : trs petit ;
small : petit ;
medium : moyen ;
large : grand ;

Pr : Hicham ZOUGAGH Page 27


Facult des Sciences et Techniques Beni Mellal Licence Informatique

x-large : trs grand ;


Exemple :
p
{
font-size: small;
}
h1
{
font-size: large;
}

Remarque : on utilise aussi une mesure sous forme 1em, 0.8em, 1.3em

2.2. Police

La proprit CSS qui permet d'indiquer la police utiliser est font-family. Vous devez crire
le nom de la police comme ceci :

Exemple :

Font-family : type de police ;

Font-family : arial, comic sans MS, Time New Romains;

Pour changer le style de police on utilise

font-style: normal;

font-style: italic;

font-weight: bold; // pour changer la police en gras

2.3. Allignement

Le langage CSS nous permet de faire tous les alignements connus : gauche, centr, droite
et justifi.

C'est tout simple. On utilise la proprit text-align et on indique l'alignement dsir :

p
{ text-align: justify;
text-align: left;
text-align: right;
}

Pr : Hicham ZOUGAGH Page 28


Facult des Sciences et Techniques Beni Mellal Licence Informatique

2.3 Flotter un objet

Le CSS nous permet de faire flotter un lment autour du texte. On dit aussi qu'on fait un
habillage . Cette proprit peut prendre deux valeurs trs simples :

- Left : l'lment flottera gauche.

- Right : llment flottera droite

Exemple :

Code html : <img src="flash.gif" class="imageflottante" >

Code css :
.imageflottante
{
float: left;
}

3. La couleur et le fond
3.1 Couleur de texte

La mthode la plus simple et la plus pratique pour choisir une couleur


consiste taper son nom. Le seul dfaut de cette mthode est qu'il n'existe que seize
couleurs dites standard .

Syntaxe : par exemple changer la couleur du titre en marron

h1
{
color: maroon;
}

Pr : Hicham ZOUGAGH Page 29


Facult des Sciences et Techniques Beni Mellal Licence Informatique

3.2 Couleur de fond

Pour indiquer une couleur de fond, on utilise la proprit CSS background-color

Exemple ;

background-color: black; /* Le fond de la page sera noir */

3.3 image de fond

La proprit permettant d'indiquer une image de fond est background-image. Comme valeur,
on doit renseigner url("nom_de_l_image").

Exemple :

background-image: url("neige.png");

4. Les bordures

Le CSS vous offre un large choix de bordures pour dcorer votre page. De
nombreuses proprits CSS vous permettent de modifier l'apparence de vos bordures :

border-width, border-color , border-style

Pour border on peut utiliser jusqu' trois valeurs pour modifier l'apparence de la bordure :

La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels


(comme 2px).
La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un
nom de couleur (black,red,), soit une valeur hexadcimale (#FF0000).
Le type de bordure : l, vous avez le choix. Votre bordure peut tre un simple trait,
ou des pointills, ou encore des tirets, etc. Voici les diffrentes valeurs disponibles :
- solid : un trait simple ;
- dotted : pointills ;
- dashed : tirets ;
- double : bordure double ;
- groove : en relief ;
- ridge : autre effet relief ;
- inset : effet 3D global enfonc ;
- outset : effet 3D global surlev.

Pr : Hicham ZOUGAGH Page 30


Facult des Sciences et Techniques Beni Mellal Licence Informatique

Exemple :

h1
{
border: 3px blue dashed;
}

Pr : Hicham ZOUGAGH Page 31