Vous êtes sur la page 1sur 99

Cours de

HTML/PHP/Mysql
Docteur Fod CAMARA
{fode.camara@ucad.edu.sn}
1
Ecole
Suprieure de
Technologie et
Management
29/03/14
Dr. Camara
Licence 2 Tlinformatique
Plan du cours

Le langage HTML,

Les feuilles de styles CSS,

Les Bases de Donnes,

Le Systme de Gestion de Bases de


Donnes MySQL,

Le langage Php.

nterface Php-MySQL
29/03/14 Dr. Camara 2
3
Premire partie
Introduction au langage HTML
Introduction au langage HTML
29/03/14 Dr. Camara
29/03/14 4
Vous avez dit WWW ?

Fin 1989 :

Tim Berners Lee prsente le projet

World Wide Web pages Web

En 1993:

Le W3C (World Wide Web Consortium, http://www.w3c.org) a t


cr l'occasion du premier standard du HTML : HTML
1.0.

Le W3C a t cr pour dvelopper des protocoles


communs pour l'volution du World Wide Web.
Dr. Camara
29/03/14 5
Le Web

Besoins exprims par les chercheurs

Le Web est compos de pages Web (= pages HTML)


sur des serveurs web

Chacune des pages web est repre par une


adresse unique appele URL
Dr. Camara
29/03/14 6
L'URL

Uniform Resource Locator

Protocole://nom_de_serveur

Exemple :

http://www.ucad.sn

+ parfois d'autres informations


Dr. Camara
29/03/14 7
Navigateur (Browser) (1)

Logiciel client capable d'interroger les


serveurs web et d'exploiter leurs resultats

permet de surfer sur le Net et d'afficher sur


votre cran les "pages" qu'il a interceptes.
Dr. Camara
29/03/14 8
Navigateur (Browser) (2)

a!igateurs

etscape

Internet E"plorer

Mo#illa $ire%o"

Sa%ari

&oogle Chro'e

Etc.
Dr. Camara
29/03/14 9
Vos premiers outils

Vous avez besoin :

d'un diteur de texte : Bloc note,Notepad..

d'un navigateur
Dr. Camara
29/03/14 10
HTML

Le langage HTML est un langage qui permet de crer


une page web . l est l'abrviation de Hyper Text
Markup Language.

HTML est un langage de description qui va nous


permettre de dcrire l'aspect d'un document web, d'y
inclure des informations varies (textes, images,
sons, animations, etc.) et d'tablir des relations
cohrentes entre ces informations grce aux liens
hyperte"tes.
Dr. Camara
29/03/14 11
Exemples de pages web
Dr. Camara
29/03/14 12
Exemple
Dr. Camara
29/03/14 13
Exemple
Dr. Camara
29/03/14 14
Allure d'un fichier HTML
<html>
<head>
<title>
Bonjour monde
</title>
</head>
<body>
Ceci est tout simple
</body>
</html>
Dr. Camara
29/03/14 15
Donc HTML est constitu de quoi?

Le langage HTML n'est pas un langage de


programmation proprement dit ! comme le c /
c++ , vb .etc . Ce sont "simplement" des
(alises (ou tag en anglais) pour mettre en
forme du texte et des images !
Dr. Camara
29/03/14 16
Allure d'un fichier HTML
Dr. Camara
29/03/14 17
)u*est ce qu*une (alise +

Une balise est le moyen de communiquer avec


le navigateur.

C'est une "instruction" comprise entre


crochets < > qui possde un nom et parfois
des attributs.

La plupart doivent tre fermes

Exemple : <b> votre texte </b>

Peuvent possder des attributs

<balise attribut1=valeur_num
attribut2="valeur_alpha-numrique> . </balise>
Dr. Camara
29/03/14 18
)u*est quoi un attri(ut d,une
(alise +

Les attributs permettent de modifier le


comportement par dfaut d'une balise, ou bien de
spcifier des informations indispensables (par
exemple la source d'une image).

Certains attributs sont o(ligatoires, d'autres


optionnels.

L'ordre dans lequel les attributs sont crits n'est


pas important et le sparateur est un espace.

<(alise attribut1="valeur1" attribut2="valeur2"


attribut3="valeur3">blabla</(alise>
Dr. Camara
29/03/14 19
Rgles De Base Pour L'criture
En Langage Html (1)

Un document html "standard" doit


imprativement commencer par -HTML. et
finir par -/HTML..

Les commandes HTML ont une marque de


dbut et une marque de fin. Certaines
marques de fin sont facultatives.

Dr. Camara
29/03/14 20

Les commandes HTML utilisent les


caractres - et . comme dlimiteurs.

Les commandes HTML peuvent tre crites


en minuscules ou en majuscules.

Tout ce qui n'est pas compris entre "-" et "."


est tout simplement considr comme du
texte afficher.
Rgles De Base Pour
L'criture En Langage Html (2)
Dr. Camara
29/03/14 21
Structure D'un Document Html

<HTML> Ceci est le dbut d'un document de type HTML.

</HTML> Ceci est la fin d'un document de type HTML.

<HEAD> Ceci est le dbut de la zone d'en-tte.

</HEAD> Ceci est la fin de la zone d'en-tte.

<TTLE> Ceci est le dbut du titre de la page.

</TTLE> Ceci est la fin du titre de la page.

<BODY> Ceci est le dbut du document proprement dit.

</ BODY> Ceci est la fin du document proprement dit.


Dr. Camara
29/03/14 22
Exemple
Dr. Camara
29/03/14 23
Votre premire page HTML
Dr. Camara
29/03/14 24
Rgles gnrales

mbrication : le chevauchement des


balises n'est pas permis
<h1><b> bla bla </h1><b>
Dr. Camara
29/03/14 25
L'en-tte (1)
-
TITLE indique le nom du document HTML, qui sera affich
dans la barre de titre.
-
Exemple:
<HEAD><TTLE>Guide HTML</TTLE> </HEAD>
voir aussi <META>, <SCRPT>, etc.
Dr. Camara
29/03/14 26
L'en-tte (2)
-
La balise META permet de donner des meta-informations sur le
document.
-
Exemple:
<'eta name="author author" content="G. Chagnon">
<'eta name="keywords keywords" content="HTML, initiation">
<'eta name="description description" content="Cette page fournit une introduction
au langage HTML">
<'eta name="date date" content="2003-09-19T16:55:37+01:00">
Dr. Camara
29/03/14 27
Formatage du texte : les titres

H/ 0. H1 Dfinit 6 niveaux pour les titres. Chaque niveau


possde son propre style.
Dr. Camara
29/03/14 28
Formatage du texte : les titres

Para'2tres : L'attribut ALGN spcifie l'alignement


horizontal d'un titre

ALGN = LEFT/RGHT/CENTER
<H1 align="right">
Dr. Camara
29/03/14 29
Formatage du texte : les paragraphes

P Constitue un nouveau paragraphe = un double


retour la ligne.

Para'2tres : L'attribut ALGN spcifie l'alignement


horizontal d'un paragraphe

ALGN = LEFT/RGHT/CENTER
<P align="right">
Dr. Camara
29/03/14 30
Exercice
Dr. Camara
29/03/14 31 Dr. Camara
29/03/14 32
Les paragraphes
Pour aligner du texte, on peut utiliser l'attribut ALGN
avec la balise <P> lui affectant la valeur Center , ou le
tag <CENTER>. l existe une balise permettant d'aligner
diffrents lments. c'est le tag :
<DV align=left>...</DV>
<DV align=center>...</DV>
<DV align=right>...</DV>
Dr. Camara
29/03/14 33

Le tag <BLOCKQUOTE> permet de


dcaler le paragraphe droite
Les paragraphes
Dr. Camara
29/03/14 34
Les caractres spciaux

Pour afficher les symboles <, >, &, "


sans qu'ils ne soient interprts
comme des dlimiteurs de
marqueurs, il faut utiliser les codes
suiant !
Dr. Camara
29/03/14 35
Les caractres spciaux
&lt; <
&gt; >
&amp; &
&quot; "
Dr. Camara
29/03/14 36
Les caractres spciaux
Code
Majuscule obtenue
Code
Minuscule obtenue
&Aacute; &aacute;
&Agrave; &agrave;
&Acrc; &acrc;
&Atl!e; &atl!e;
&Ar"g;
&Auml; &aulm;
&Aelg; &aelg;
&Cce!l; &cce!l;
&#acute; &eacute;
&#grave; &egrave;
&#crc; &ecrc;
Dr. Camara
29/03/14 37
Les sparateurs

<br> saut de ligne (sans balise fermante)

<hr> ligne horizontale

Paramtres :

SZE : spcifie l'paisseur de la barre

WDTH : Spcifie la longueur de la ligne

ALGN : Spcifie l'alignement de la ligne


<hr size=epaisseur width=largeur align=alignement color=couleur >
Dr. Camara
29/03/14 38
Le texte dans les pages Web

<HTML>

<HEAD><TTLE></TTLE></HEAD>

<BODY>texte simple<BR>

<B>texte en gras</B><BR>

<STRONG>texte en gras</STRONG><BR>

<>texte en italique</><BR>

<EM>texte en italique</EM><BR>

<B><>texte en gras et en italique</></B><BR>

<FONT SZE=5>texte</FONT>

<FONT COLOR="#0000FF">en bleu</FONT>

<!--C'est fini-->

</BODY>

</HTML>
Dr. Camara
29/03/14 39
Le texte dans les pages Web
Dr. Camara
29/03/14 40
Le texte dans les pages Web

<sup> le texte sera mis en exposant

<sub> le texte sera mis en indice

<s> le texte sera barr


Dr. Camara
29/03/14 41
Les polices

Avec la balise <font> on peut jouer sur


la taille ( size ="1 ), la couleur ( color
="green ) et la police des caractres
( face ="Arial )

<FONT SZE=5>texte</FONT>

<FONT COLOR=blue face= arial size= 20> coucou</FONT>


Dr. Camara
29/03/14 42

Voici les codes de quelques couleurs


basiques.
Bleu #0000FF Vert #00FF00
Blanc #FFFFFF Violet #8000FF
Rouge #FF0000 Jaune #FFFF00
Gris clair #C0C0C0 Noir #000000
Dr. Camara
Tableau des couleurs en hexadcimal
29/03/14 43 Dr. Camara
29/03/14 44
Option de
body
body

BACKGROUND : Permet de mettre une image dans le fond de


la page. Exemple : <BODY BACKGROUND="cahier.gif">

BGCOLOR : Permet de changer la couleur de l'arrire plan


sans avoir charger une image, l aussi, il faudra veiller ce
que le texte et les liens soient visibles dans tous les cas. Par
dfaut, le fond de page est en blanc, le texte en noir, les liens
en bleu soulign, les liens activs en rouge et les liens visits
en violet.
Dr. Camara
29/03/14 45

TEXT : Permet de changer la couleur du texte, par


dfaut cette couleur est en principe le noir, mais elle
peut-tre change dans les prfrences du browser.

LNK : Permet de changer la couleur des liens.

ALNK : Permet de changer la couleur des liens


slectionns.

VLNK : Permet de changer la couleur des liens dj


visits.
<"#$% "&C#'#()"couleur" *E+*)"couleur" <"#$% "&C#'#()"couleur" *E+*)"couleur"
',-.)"couleur" /',-.)"couleur" 0',-.)"couleur">1 ',-.)"couleur" /',-.)"couleur" 0',-.)"couleur">1
Option de
body
body
Dr. Camara
29/03/14 46
Liste non nu'3rot3e
-4L.

-LH.Entte en option-/LH.

-LI.Point numro1-/LI.

-LI.Point numro2-/LI.

-LI.Point numro3-/LI.

-LI.Point numro4-/LI.
-/4L.
Dr. Camara
29/03/14 47
Liste nu'3rot3e
-5L.

-LH.Entte en option-/LH.

-LI.Point numro1-/LI.

-LI.Point numro2-/LI.

-LI.Point numro3-/LI.

-LI.Point numro4-/LI.
-/5L.
Dr. Camara
Le type des listes
29/03/14 Dr. Camara 48
Exemple
<HTML>
<HEAD>
<TTLE>Nos filires</TTLE>
</HEAD>
<BODY>
<H1> nformatique et Tlcoms</H1>
<OL>
<L>Tlinformatique</L>
<L>Tlcoms et rseaux</L>
<L>Multimdia</L>
<L>Maintenance</L>
</OL>
<BODY>
<HTML>
29/03/14 Dr. Camara 49
29/03/14 50
Exercice

Consigne
Reproduisez un fichier qui prsente la structure
suivante
Dr. Camara
29/03/14 51 Dr. Camara
29/03/14 52
L'hypertexte & les liens :
nternet etc.
Lien externe :

<a href="URL cible> . </a>


<a href)"http!223331estm1sn"> cole suprieure<2a> <a href)"http!223331estm1sn"> cole suprieure<2a>
Lien local :

<a href="chemin/index.html"> ... </a>


Dr. Camara
29/03/14 53
Les ancres ou signets

Des liens peuvent aussi pointer vers un


endroit prcis du mme document ou
d'un autre fichier. C'est ce qu'on appelle
les ancres, ancrages ou pointeurs
[Anchor].
Dr. Camara
29/03/14 54
Les ancres ou signets

On veut se positionner dans cet exemple en


haut de la page (le titre).

dentifier la cible avec <A NAME="titre">Texte ou


image</A>

utiliser le marqueur: <A HREF="#Titre">pour y


aller</A>
Dr. Camara
29/03/14 55
Exercice
Dr. Camara
29/03/14 56
Exercice
Dr. Camara
29/03/14 57
mages

<img src="chemin> ou

<img src=URL>

<img src="mon_image.gif align=TOP


alt="nom_d_image>

<a href="URL> <img . > </a>


Dr. Camara
29/03/14 58
mages
Dr. Camara
29/03/14 59
mages
Dr. Camara
29/03/14 60
Tableaux
Dr. Camara
29/03/14 61
Tableaux
Dr. Camara
29/03/14 62
Tableaux
Dr. Camara
29/03/14 63
Tableaux
Dr. Camara
29/03/14 64
Tableaux (ex1)
Dr. Camara
29/03/14 65
Tableaux (Sol1)

<HTML>

<HEAD>

<TTLE>tableau 1</TTLE>

</HEAD>

<BODY>

<CENTER>

<TABLE BORDER>

<CAPTON ALGN=top> PREMER TABLEAU</CAPTON>

<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>
Dr. Camara
29/03/14 66
Tableaux (ex2)
Dr. Camara
29/03/14 67
Tableaux (Sol2)

<HTML>

<HEAD><TTLE>tableau 2</TTLE></HEAD>

<Body>

<TABLE BORDER=8 CELLPADDNG=10>

<CAPTON ALGN=bottom>DEUXEME TABLEAU </CAPTON>

<TR>

<TH COLSPAN=5>LETTRES</TH>

</TR>

<TR>

<TD>Aa</TD><TD>Bb</TD><TD>Cc</TD><TD>Dd</TD><TD>Ee</TD>

</TR>

<TR>

<TD>Ff</TD><TD>Gg</TD><TD>Hh</TD><TD>i</TD><TD>Jj</TD>

</TR>

</TABLE>

</BODY>

</HTML>
Dr. Camara
29/03/14 68
Tableaux (ex3)
Dr. Camara
29/03/14 69
Tableaux (Sol3)

<HTML>

<HEAD><TTLE>tableau 3</TTLE></HEAD>

<Body>

<TABLE BORDER=12 CELLSPACNG=10 CELLPADDNG=10>

<TR>

<TH ROWSPAN=2><FONT SZE=7>LETTRES</FONT></TH>

<TD><FONT SZE=6>Aaa</FONT></TD><TD VALGN=top>Bbb</TD>

<TD VALGN=bottom>Ccc</TD><TD VALGN=top>Ddd</TD>

<TD VALGN=bottom>Eee</TD>

</TR>

<TR ALGN=right>

<TD ALGN=left><FONT SZE=6>F</FONT></TD>

<TD>G</TD><TD>H</TD><TD></TD><TD>J</TD>

</TR>

</TABLE>

<CENTER><H1>Tableau 3</H1></CENTER>

<BODY>

<HTML>
Dr. Camara
29/03/14 70
Tableaux (ex4)
Dr. Camara
29/03/14 71
Tableaux (Sol4)

<HTML>

<HEAD><TTLE>tableau 4</TTLE></HEAD>

<Body>

<TABLE BORDER=5>

<TR>

<TD ROWSPAN=2><MG SRC="225sbe52.jpg"></TD>

<TD><MG WDTH=70 HEGHT=50 SRC="225sbe52.jpg"

WDTH=50% HEGHT=50%></TD>

<TD><MG WDTH=70 HEGHT=50 SRC="225sbe52.jpg"></TD>

<TD><MG WDTH=70 HEGHT=50 SRC="225sbe52.jpg"></TD>

</TR>

<TR>

<TD>rien</TD>

<TD><MG WDTH=70 HEGHT=50 SRC="225sbe52.jpg"></TD>

<TD><MG WDTH=70 HEGHT=50 SRC="225sbe52.jpg"></TD>

</TR>

</TABLE>

</BODY>

</HTML>
Dr. Camara
29/03/14 72
Ex5
Dr. Camara
29/03/14 73
Les formulaires
Dr. Camara
29/03/14 74
Les formulaires
Dr. Camara
29/03/14 75
Les formulaires-Zone de texte multiligne
Dr. Camara
29/03/14 76
Les formulaires-liste de slection
Dr. Camara
29/03/14 77
Les formulaires-liste de slection
Dr. Camara
29/03/14 78
Les formulaires- Case cocher
Dr. Camara
29/03/14 79
Les formulaires-Boutons de slection
Dr. Camara
29/03/14 80
Les formulaires-Boutons de slection
Dr. Camara
29/03/14 81
Les formulaires
Dr. Camara
29/03/14 82
Les formulaires-Boutons de slection
Dr. Camara
29/03/14 83
Exercice
Dr. Camara
29/03/14 84
Exercice
Dr. Camara
29/03/14 85
Les Frames
Dr. Camara
29/03/14 86
Les Frames

Attention! <FRAMESET></FRAMESET>
remplace <BODY></BODY>

L'attribut
ROWS="hauteur1,hauteur2,...,hauteurN"
dfinit la hauteur des diffrentes fentres en
cas de division horizontale.

La hauteur s'exprime en pixels ou en %.


Dans ce cas, on veillera ce que le total soit
gal 100%;
Dr. Camara
29/03/14 87
Les Frames
Dr. Camara
29/03/14 88
Les Frames
Dr. Camara
29/03/14 89
Les Frames

<FRAME SRC="url__mettre_dans_la_zone"

NAME="donne_un_nom__cette_fentre"

MARGNWDTH="marges_gauches_et_droites_en_pixels"

MARGNHEGHT="marges_hautes_et_basses_en_pixels"

SCROLLNG="yes" si on veut (yes)(ou non(no), ou


automatique(auto)) l'chelle

NORESZE > empche l'utilisateur de bouger les positions des


zones
Dr. Camara
29/03/14 90
Les Frames
Dr. Camara
Exercice

Reproduisez la structure suivante (avec


l'utilisation de frames).
29/03/14 Dr. Camara 91
29/03/14 Dr. Camara 92
29/03/14 93
Placer du multimdia sur une
page Web

Les 'odules e"ternes ou 6 plug0in 7

Les navigateurs ne sont pas capables d'excuter


seuls les sons et vidos.

ls disposent d'une architecture ouverte qui leur


permet de faire appel des programmes
supplmentaires externes. Ce sont les plug0in.

Ces programmes sont souvent installs avec le


navigateur ou bien disponibles, gnralement
gratuitement, sur nternet.

Trois technologies sont utiliss pour insrer de


l'audio ou de la vido: Real Player Real Player, Quick Time Quick Time et
Windows Media Player Windows Media Player.
Dr. Camara
29/03/14 94
Placer du multimdia sur une
page Web

Les (alises d,insertion de contenu 'ulti'3dia

La balise La balise <embed> <embed>, , initialement introduite par Netscape


ne fait mme plus partie de la recommandation HTML
du W3C.

W3C recommande l'utilisation de la balise <object> <object>

La balise <object> <object> est utilise pour inclure images,


squences video, applets Java, etc.

Cette balise est prvue pour remplacer les balises


usage plus limit <img> et <applet>.

Pour assurer une compatibilit entre navigateurs on peut


inclure la balise <embed> <embed> dans <object> <object>
Dr. Camara
29/03/14 95
Placer du multimdia sur une
page Web

Code HTML standard pour 8indows Media Player


<#"4EC* 3idth)567 hei8ht)9: classid)"C';,$!<<$=>95<?":>=?55$:?@A/"?
::B:C6AC6E@7"
codebase)"
http!22actiex1microsoft1com2actiex2controls2mplayer2en2nsmp<inf1cabC0ersion)=,:,:<,@:<
"
standby)"Char8ement de Dicrosoft Eindo3s Dedia Player111"
type)"application2x?oleobFect">
<P/(/D -/DE)">ile-ame" 0/'GE)"le chemin complet du fichier">
<P/(/D NAME)"animationat;tart" 0/'GE)"true">
<P/(/D -/DE)"transparentat;tart" 0/'GE)"true">
<P/(/D -/DE)"auto;tart" 0/'GE)"false">
<P/(/D -/DE)"sho3Controls" 0/'GE)"true">
<P/(/D -/DE)"auto;iHe" 0/'GE)":">
</OBJECT>
Dr. Camara
29/03/14 Dr. Camara 96
29/03/14 97
Placer du multimdia sur une
page Web

Code HTML standard pour 9eal Player


<OBJECT CLASSID="clsid:02BF25D5-8C!-"B2#-BC80-
D#"88ABDDC$B" %IDT&="$0" &EI'&T="$"
CODEBASE=")**+://,,,-.++l/-c01/2*.c*i3/4/2*+l56i7-c.8">
<9A:AM 7.1/="S:C" ;AL<E="l/ c)/1i7 c01+l/* d5 =ic)i/>">
<9A:AM 7.1/="A<TO9LA?" ;AL<E="*>5/">
<9A:AM 7.1/="LOO9" ;AL<E="=.ls/">
<9A:AM 7.1/="CONT:OLLE:" ;AL<E="*>5/">
</OBJECT>
Dr. Camara
29/03/14 98
Placer du multimdia sur une
page Web

Code HTML standard pour )uic:Ti'e


<OBJECT CLASSID="clsid:CFCDAA0#-8BE"-c=-B8"B-
0020AFBBCCFA" %IDT&="!5" &EI'&T="#0">
<9A:AM NAME="CONT:OLS" ;AL<E="C07*>0l9.7/l">
<9A:AM NAME="CONSOLE" ;AL<E="Cli+">
<9A:AM NAME="A<TOSTA:T" ;AL<E="=.ls/">
<9A:AM NAME="70l060" ;AL<E="*>5/">
<9A:AM NAME="NOJA;A" ;AL<E="*>5/">
<9A:AM NAME="S:C" ;AL<E=")**+://l/c)/1i7 c01+l/* d5
=ic)i/>">
<9A:AM NAME="LOO9" ;AL<E="=.ls/">
</OBJECT>
Dr. Camara
99
Deuxime partie
Les %euilles de styles CSS
Les %euilles de styles CSS
29/03/14 Dr. Camara