Support de Cours-Progweb

Actualit du cours
Programmation Web
http://eric.univ-lyon2.fr/~jdarmont/?page_id=449
Master 1 IDSM-Kharkiv
Anne 2014-2015
Jrme Darmont
http://eric.univ-lyon2.fr/~jdarmont/?feed=rss2
https://twitter.com/darmont_lyon2 hashtag #webidsm
http://eric.univ-lyon2.fr/~jdarmont
Plan du cours
Programmation Web
http://eric.univ-lyon2.fr/~jdarmont/
Un peu d'histoire
HTML : HyperText Markup Language
Langage HTML
lments de design Web
Feuilles de style en cascade (CSS)
Langage de script PHP
Connexion une base de donnes (MySQL)
Liens hypertextes
Langage base de balises
Objectif : publier sur le World Wide Web (ou WWW,

W3, ou Web) des documents formats
Issu de SGML (Standard Generalized Markup
Language), langage de dfinition de langages
Dvelopp par Tim Berners-Lee au CERN (Suisse) en
1990 et utilis sur le Web depuis
Programmation Web
Versions successives de HTML
lment : nom, notion abstraite
2000 : XHTML 1.0 (HTML 4 rcrit en XML)

2001 : XHTML 1.1
2003 : XHTML 2 (volution de XHTML 1 abandonne en 2009)
2008 : HTML 5 / XHTML 5 (volution de HTML 4, en cours)
Ex. Document HTML : html
Balise : forme concrte d'un lment
Consortium)
Programmation Web
lments, balises et attributs
1990 : HTML 1
1995 : HTML 2
1995 : HTML+ et HTML 3 (non standards)
1997 : HTML 3.2 et HTML 4 (W3C : World Wide Web
Programmation Web
Ex. de balise ouvrante : <html>

Ex. de balise fermante : </html>
Attribut : proprit d'un lment (nom, valeur)
Ex. <a href="http://www.univ-lyon2.fr">

Nom
Valeur
Programmation Web
Rgles d'criture XHTML
Squelette d'un document HTML

<!DOCTYPE html> 
<html>
Les noms des balises doivent tre crits en minuscules.

Toute balise ouverte doit tre ferme.
Les chevauchements entre balise sont interdits
(documents bien forms).
<head>

</head>
Les noms des attributs doivent tre crits en

minuscules.
<body>

Les valeurs des attributs doivent tre entre guillemets

doubles.
Programmation Web
</body>
En-tte


<meta name="Author" content="Jrme Darmont" />
<meta name="Keywords" content="Enseignement,Informatique" />
<meta name="Description" content="Exemple de page HTML" />
Mtadonnes : <meta />

Ex. Jeux de caractres, auteur, mots-cls, description de la
page
Note : Une balise vide peut se noter <balise></balise>

ou <balise />, au choix.
Programmation Web


<title>Exemple de page HTML</title>
</head>
10
Optimisation des performances
Programmation Web
lments de structuration du document
Ex. <link rel="dns-prefetch" href="//platform.twitter.com">
Prchargement de lien
Corps du document
Prchargement DNS
<head>

<meta charset="utf-8" />
Titre : <title></title>
Programmation Web
Exemple d'en-tte
Informations qui ne sont pas affiches mais qui sont

utilises des fins diverses
</html>
Ex. <link rel="prefetch" href="http://darmont.me/hello.html" />

Ex. <link rel="prefetch" href="http://darmont.me/picture.png" />
Invisibles
Permettent la mise en page ultrieure du document
Permettent la gnration automatique, par ex., dune table des
matires, des figures, etc.
lments qui apparaissent explicitement laffichage

Prrendu de page
Ex. <link rel="prerender" href="http://darmont.me/hello.html" />
11
Programmation Web
12
Texte
Images
Programmation Web
Structuration du document
Contenu principal :
Section :
Article :
Apart :
Entte :
Pied de page :
Menu/navigation :
Bote de dialogue :
13
Titres, paragraphes, sparateurs
<main> </main>
<section> </section>
<article> </article>
<aside> </aside>
<header> </header>
<footer> </footer>
<nav> </nav>
<dialog> </dialog>
Programmation Web
Titres (headings) : Six niveaux nots h1 h6
Paragraphes (spars entre eux par un espace)
Ex. <p>Ceci est un paragraphe</p>
Sparateurs :
14
Autres blocs de texte prdfinis
Retour la ligne (sans espace) : <br />

Ligne horizontale : <hr />
Programmation Web
Formatage de texte
Adresse
Ex. <h1>Titre de niveau 1</h1>
Texte appuy : <strong></strong>
Ex. <address>5 av. P. Mends-France </address>
Emphase : <em></em>
Surlignage : <mark></mark>
Citation
Police machine crire : <code></code>
Ex. <blockquote>Mignonne allons voir</blockquote>
En indice : <sub></sub>
En exposant : <sup></sup>
Texte prformat
Caractres spciaux :
< : <
& : &
> : >
" : "
espace inscable :
Ex. <pre>Le formatage sera

conserv
l'cran</pre>
15
Programmation Web
16
Imbrication des balises
Liens hypertextes
Forme gnrale : <a href="URI">libell</a>

URI : Uniform Resource Identifier

(anciennement URL : Uniform Resource Locator)
<header><h1>Prsentation du master IDSM</h1></header>

<article>
<p>L'<strong>Universit Lumire Lyon 2</strong> et
l<strong>Universit Nationale dconomie de Kharkiv</strong>
proposent une formation d'excellence (<em><strong>double diplme
de master</strong></em>) en <em>informatique et
statistique</em>.<br /> Ces domaines se dveloppent rapidement,
tant au niveau de la recherche que dans l'industrie, et offrent de
nombreux emplois.</p>
</article>
17
Programmation Web
Programmation Web
18
Absolue (adresse complte)

Ex.
http://www.hdeu.edu.ua
ftp://ftp.ciril.fr
mailto:jerome.darmont@univ-lyon2.fr
Relative ( partir du rpertoire courant)

Ex.
page_suivante.html
rep/page_dans_repertoire.html
Exemple : <a href="http://www.univ-lyon2.fr">Universit Lyon 2</a>

Programmation Web
Ancres
Images
Formats reconnus : GIF, JPEG, PNG
Permettent un lien vers un endroit prcis dans une

page Web
Balise : <img src="URI" alt="description" />
Dfinition dans une page : attribut id
Ex. <h1 id="menu">MENU</h1>
Ex. <a href="page.html#menu">Retour menu</a>
19
Programmation Web
src : URI du contenu

controls : affiche les contrles du lecteur multimdia
autoplay : dmarrage ds que possible
loop : en boucle
muted : sans son
Exemple
21
<audio src="test.mp3" controls="controls" loop="loop">

Le format MP3 nest pas support par votre navigateur.
</audio>
Programmation Web
22
Jauges
<figure>
<img src="tim-berners-lee.jpg" alt="Photo Tim BL" />
<video src="test.ogg" controls="controls" muted="muted">
Le format .ogg n'est pas support.
</video>
<audio src="chord.wav" controls="controls">
Le format .wav n'est pas support.
</audio>
<figcaption>Tout le multimdia de HTML5</figcaption>
</figure>
Programmation Web
Listes ordonnes et non-ordonnes

Listes puces : <ul> </ul>
Barre de progression
<progress max="100" value="75"></progress>
Listes numrotes : <ol> </ol>
Apparence :
21
lment de structuration (comme section, article)

Balise : <figure> </figure>
Lgende : <figcaption> </figcaption>
Exemple :
Attributs communs
Programmation Web
Figures
Sons : balise <audio> </audio>

Vidos : balise <video> </video>
Ex.
<a href="http://www.univ-lyon2.fr">
<img src="lyon2.gif" alt="Logo Lyon 2" />
</a>
20
Multimdia
Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/img/lyon2.gif" alt="Logo Lyon 2" />
Ex. <a href="#menu">Aller au menu</a>
Rfrence depuis une autre page
Ex. <img src="lyon2.gif" alt="Logo Lyon 2" />
Lien sur une image
Rfrence depuis la mme page
Exemple
Barre de mesure
<meter min="0" max="100" low="10" high="90"
optimum="50" value="75">75 %</meter>
<ul>
Apparence : variable selon les navigateurs
</ul>
Programmation Web
<li>1er lment</li>
<li>2me lment</li>
<li>3me lment</li>
24
Programmation Web
Listes de dfinitions
Imbrication de listes
Exemple
Exemple
<dl>
<dt>1er terme</dt>
<dd>Dfinition du 1er terme</dd>
<dt>2me terme</dt>
<dd>Dfinition du 2me terme</dd>
<ul>
<li>Elment non ordonn 1
<ol>
<li>Sous-lment ordonn 1.1</li>
<li>Sous-lment ordonn 1.2</li>
</ol>
</li>
<li>Elment non ordonn 2</li>
</dl>
Rsultat l'affichage
1er terme
Dfinition du 1er terme
2me terme
Dfinition du 2me terme
25
Programmation Web
</ul>
26
Tableaux simples
<table>
<caption>Mes totaux</caption>
<tr>
<th>Jour de la semaine</th> <th>Montant</th> <th>Total</th>
</tr>
<tr>
<td>Lundi</td> <td>456 euros</td> <td>456 euros</td>
</tr>
<tr>
<td>Mardi</td> <td>200 euros </td> <td>656 euros </td>
</tr>
</table>
Dfinition d'un tableau : <table> </table>

Lgende : <caption> </caption>
Dfinition d'une ligne : <tr> </tr>
Dfinition d'une cellule d'en-tte : <th> </th>
Dfinition d'une cellule normale : <td> </td>
Programmation Web
28
Apparence du tableau exemple
Programmation Web
C1
Jour de la semaine
Montant
Lundi
456 euros 456 euros
Mardi
200 euros 656 euros
C2
L1
Total
L12
C12
Programmation Web
Tableaux cellules recouvrantes
Mes totaux
29
Exemple de tableau
Tableau : Ensemble de lignes elles-mmes constitues

de cellules
27
Programmation Web
30
L2
Programmation Web
Tableaux cellules recouvrantes
Plan du cours
"Fusion" de cellules (<td> ou <th>)
Langage HTML
Cellule sur plusieurs colonnes : attribut colspan
Ex. <table> <tr> <td>C1</td> <td>C2</td> </tr>

<tr> <td colspan="2">C12</td> </tr> </table>
Cellule sur plusieurs lignes : attribut rowspan
31
Ex. <table> <tr> <td rowspan="2">L12</td>

<td>L1</td> </tr>
<tr> <td>L2</td> </tr> </table>
Programmation Web
32
Dix erreurs de base viter
Programmation Web
Dix erreurs de base viter
Fonds sombres, images de fonds charges, couleurs

trop nombreuses
Ouvrir de nouvelles fentres, des pop-ups, etc.

Pages lourdes charger (contenant des images
volumineuses, par exemple)
Gadgets technologiques (animations, textes qui

dfilent, sons, Javascripts divers)
Pages trop larges (scrolling latral)
Surcharger la page de texte ou d'images :

trop d'information tue l'information
Pages trop longues (scrolling vertical)
Absence d'aide la navigation
Requrir de l'utilisateur une configuration particulire

("site optimis pour tel navigateur en telle rsolution")
Liens de couleur non standard
33
Programmation Web
34
Design Web 2.0 *
Programmation Web
Principe fondamental : la simplicit

Chaque site / chaque page a un but prcis.
Quest-ce que le Web 2.0 ?
Dveloppement de la Web conomie
Interactivit accrue des sites Web (AJAX)
Web communautaire, rseaux sociaux
Nouvelle cole de design Web
Lattention de lutilisateur nest pas infinie.

Le concepteur doit aider lutilisateur trouver
linformation quil cherche.
Il ne faut pas noyer les informations importantes.
Minimiser le bruit = conomie, simplicit
* Daprs webdesignfromscratch.com
35
Programmation Web
36
Programmation Web
Comment faire simple ?

Minimiser le ratio
Exemple de simplification
pixels dcoratifs
pixels porteurs dinformation
Supprimer tout les lments non strictement

ncessaires
Essayer des solutions alternatives pour arriver au
mme rsultat plus simplement
Utiliser les lments visuel pour communiquer, jamais
pour dcorer
37
Programmation Web
38
lments de prsentation
Programmation Web
Centrer le site dans la fentre du navigateur
Distinguer clairement une section dentte

(logo ou marque bien visible, zone de navigation)
Limiter le nombre de colonnes 2 (3 maximum)
Contre-exemple !
39
Programmation Web
40
Identifier clairement les sections de la page
Programmation Web
Texte en gros caractres
Utiliser des couleurs (mais danger de distraction de lutilisateur)

Espacer nettement les sections
Mise en valeur des informations importantes

Facilit de lecture (accessibilit)
Titres en gras
41
Programmation Web
42
Attire lattention sur les

zones importantes du site
Programmation Web
Couleurs vives
Navigation
Objectifs : lutilisateur doit savoir facilement
Dlimitation de sections
Mise en valeur
dlments importants
Mise en place dune
ambiance
Dgrads
Textures
Menu de navigation global
(reflets, transparence)
Ne pas attirer lattention

ailleurs que sur le
contenu
Icnes
Programmation Web
44
viter la "balkanisation du Web" des annes 90
W3C : World Wide Web Consortium
Programmation Web
Pourquoi utiliser les standards

du W3C ?
Quest-ce que le W3C ?
Clairement spar du contenu

Diffrenci en termes de couleur et de forme
Gros, clairement et toujours visible
Texte des liens explicite
Contenu : Hyperliens bien diffrencis du texte normal
utiliser avec parcimonie !
43
O il se trouve dans le site

O il peut aller
Quelles sont options disponibles sur la page courante
Organisation internationale indpendante des

diteurs de logiciels
http://www.w3.org
Interoprabilit et portabilit (PDA, tlphones

mobiles)
Accessibilit aux personnes handicapes
Objectif : Dveloppement de standards et de bonnes

pratiques du Web
Rduction des cots de dveloppement

Exploitation de la technologie XML (vers le Web
smantique / Web 3.0)
Directeur : Tim Berners-Lee
45
45
46
Exemples les plus visibles :

moteurs de recherches smantiques*
Complment dinformation : http://www.sensebot.net

Suggestions de recherche : http://www.bing.com
Opinions sur le rsultat : http://feeltiptop.com
Connaissance du domaine : http://www.evri.com
Personnalisation de la recherche : http://trialx.com
Programmation Web
Pourquoi utiliser les standards

du W3C ?
Web smantique
Exemple : moteurs de recherche (personnalisation, suggestions,

rsum dinformations)
Contrle qualit (validation des pages Web)

Rduction considrable du volume des documents
Rfrencement efficace dans les moteurs de
recherche
Prennit des documents
Rtrocompatibilit avec les anciens navigateurs
*James Hendler, Web 3.0: The Dawn of Semantic Search, Computer, January 2010.
47
Programmation Web
48
Programmation Web
Accessibilit
Accessibilit
Prvoir des en-ttes de ligne et de colonnes dans les
tableaux
26,4 % de la population franaise souffre d'une entrave

dans une activit quotidienne et 10 % est affecte d'un
handicap. (SVM, novembre 2008)
Lier chaque champ de formulaire une lgende

Dfinir des raccourcis clavier
Prceptes daccessibilit :
Prvoir une alternative HTML aux technologies

propritaires (ex. Flash)
Proposer un texte alternatif aux images et aux

contenus multimdias en gnral (description,
transcription)
viter lusage des cadres (frames)

Prvenir des changements de langue dans le texte
Utiliser des feuilles de style
49
Programmation Web
50
Plan du cours
Expliciter les liens ( page daccueil >> cliquer ici )

Programmation Web
Dfinition et caractristiques
Cascading Style Sheets (CSS) :
Feuilles de style en cascade
Langage HTML
Premire spcification par le W3C en 1996

Sparation du contenu et de la prsentation
Dfinition de styles gnriques pour les balises
Syntaxe diffrente de HTML
Possibilit de validation automatique
51
Programmation Web
52
Avantages
Programmation Web
Dfinitions de styles
Gestion simplifie et globale de la prsentation d'un

site
Trois localisations possibles (+local au +global)

Dans une balise HTML : attribut style
Cots de dveloppement et de maintenance allgs

(code plus simple)
Possibilit de prsentations diffrentes selon le profil

utilisateur, la rsolution cran
Dans l'en-tte de la page Web (head) :

<style type="text/css"></style>
Dans un fichier spar
Meilleure accessibilit
Programmation Web
Ex. <p style="color: blue; text-align: center;"></p>
Dans une page HTML : balise <style>
Code source allg
53
Appel dans l'en-tte de la page Web (head) :

<link rel="stylesheet" type="text/css" href="feuille_style.css" />
54
Programmation Web
Notion de cascade
Units de taille
Imbrication des dfinitions : la plus locale l'emporte.
Units absolues
Ex. Dfinition de style dans un fichier externe vs. dfinition

dans une balise
la dfinition locale de la balise prvaut
Units relatives ( privilgier)
Imbrication des balises : le style d'une balise s'applique

aux balises imbriques.
Ex. <p><em></em></p>
Si un style est appliqu <p>, il s'applique <em>.
55
Programmation Web
px : pixel
pt : point
em : hauteur de ligne
% : proportion par rapport la taille de la fentre
56
Spcification de couleurs
Programmation Web
criture d'une feuille de style
Nom prdfini : aqua, black, blue, fucshia, green, gray,

lime, maroon, navy, olive, purple, red, silver, teal,
white, yellow
Feuille de style : ensemble de rgles
Un slecteur
Des proprits
Une valeur pour chaque proprit
Spcification RGB (Rouge Vert Bleu - RVB)
Ex. Jaune : rgb(255, 255, 0)
Exemple
h1 { color: yellow;
font-weight: bold;
}
Code RGB hexadcimal
Ex. Jaune : #FFFF00
57
Programmation Web
58
Slecteurs
Programmation Web
Classe de style
Slecteur universel : tous les lments HTML
Ex. * { color: blue; }
Slecteur dfini par l'utilisateur qui permet de dissocier

un style de balises particulires
Style d'une catgorie de balises
Ex. h1 { color: #FF00FF; }
Ex.
Style de plusieurs catgories de balises
Ex. h1, h2, h3, p { color: green; }
Slecteur associ un identifiant particulier
Style pour balises imbriques
.style_rouge { color: red; }

.style_bleu { color: blue; }
p.parag_vert { color: green; }
Ex.
#titre { text-align:center; color: navy; }
Ex. p em { color: red; } /* Italiques dans un paragraphe */

(Commentaire)
59
Programmation Web
60
Programmation Web
10
Classe de style
Application des styles
Utilisation dans une page Web
Ex.
<h1 class="style_rouge">Titre rouge</h1>

<p class="style_rouge">Texte rouge</p>
<p class="style_bleu">Texte bleu</p>
<p class="parag_vert">Texte vert</p>
une partie d'un paragraphe : <span> </span>
Application un ensemble d'lments : <div> </div>
Ex.
61
un lment identifi :
<div class="style_bleu">
<h1></h1>
<p></p>
<p></p>
</div>
Programmation Web
Programmation Web
Proprits de typographie
color
color: black;
color: #000000;
background-color
background-color: white;
background-color: #FFFFFF;
background-image
background-image: url("URL");
background-repeat
background-repeat: no-repeat;
background-position
background-position: center;
Programmation Web
Ex. <div id="titre"> </div>

<p id="titre"> </p>
62
Proprits de couleur
63
Ex. <p class="style_rouge">Ceci est rouge sauf

<span class="style_bleu">ce qui est bleu</span>
</p>
font-family
font-family: times;
font-family: arial, verdana;
font-size
font-size: 1.5em;
font-style
font-style: italic;
font-weight
font-weight: bold;
font-weight: bolder;
text-decoration
text-decoration: underline;
text-decoration: line-through;
64
Proprits de texte
Programmation Web
Proprits de bote englobante

Bote
Page Web
text-align
text-indent
65
text-align:
text-align:
text-align:
text-align:
left;
right;
center;
justify;
margin-left
text-indent: 10pt;
text-indent: 15px;
text-indent: 5%;
Programmation Web
width
Bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla
padding-top
bla bla bla bla bla bla bla bla bla bla bla
blatata
bla bla
bla
Tatabla
tata
tatablatata
blatata
blatata
bla bla
tatabla
tata
tatabla
bla
bla
bla
bla
bla
tata tata tata tata tatabla height
blatata
blatata
bla bla
tatabla
tata
tatabla
blatata
blatata
bla bla bla
tatabla
tata
bla bla bla bla bla bla bla bla bla blapadding-left
bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
margin-bottom
bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
66
Programmation Web
11
Proprits de bote englobante

width
height
padding
Proprits d'hyperlien
width: 80pt;
Hyperliens
height: 25%;
-left, -right, -top, -bottom
margin
padding: 5px;
padding-bottom: 10px;
Ex. a { color: blue; }
Hyperliens visits
Bote
centre
Ex. a:visited { color: purple; }
margin: 10px;
margin-left: 10%;
margin-left: auto; margin-right: auto;
Hyperliens survols (avec le pointeur de souris)
-width, -style, -color
border: 2px solid #FF00FF;

border-style: dotted;
border-radius: 15px;
Hyperliens activs
overflow
overflow: auto;
-left, -right, -top, -bottom
border
67
Programmation Web
Coins
ronds
list-style-image
list-style
list-style: disc;
list-style: circle;
list-style: square;
list-style-image: url("URL");
Balise caption:
Programmation Web
Balises td et th : border, width

et vertical-align: top;
vertical-align: middle;
vertical-align: bottom;
70
Exemple de style de tableau

Style 1
C1
C1
Programmation Web
Exemple de style de tableau
Style 2
C2
caption-side: top;
caption-side: bottom;
Balises tr: height
list-style: decimal;
list-style: upper-roman;
list-style: lower-alpha;
69
Balise table : border, width,

border-collapse: collapse
Listes ordonnes
Programmation Web
Proprits de tableau
Listes non-ordonnes
list-style
Ex. a:active { color: purple; }
68
Proprits de liste
Ex. a:hover { color: white; background-color: blue; }
HTML
<table>
<tr> <td>C1</td> <td>C2</td> </tr>
<tr> <td>C3</td> <td>C4</td> </tr>
</table>
C2
Style 1 (CSS)
table, td { border: 1px solid black; }
C3
C4
C3
Style 2 (CSS)
C4
table, td { border: 1px solid black; }

table { border-collapse: collapse; }
71
Programmation Web
72
Programmation Web
12
Positionnement flottant
Exemple 1 : menu flottant droite
Exemple 1 :
Menu
CSS
.menu_jaune { float: right;

background-color: yellow;
width: 100px; }
(style
.menu_jaune)
HTML
100 pixels
73
Programmation Web
<div class="menu_jaune">
<p>Menu</p>
</div>
<div>

</div>
74
Programmation Web
Conteneur
(style .page)
100 %
Exemple 2 : pagination en trois colonnes
Exemple 2 :
Colonne 1
Colonne 2
Colonne 3
(style .colonne)
33 %
(style .colonne)
33 %
(style .colonne)
33 %
75
Programmation Web
CSS
.page { float: left; width: 100%; }

.colonne { float: left; width: 33%; }
HTML
<div class="page"> 

<div class="colonne"> </div>
</div>
76
Positionnement absolu
Programmation Web
Positionnement absolu
1em
Bla bla sur fond vert

Idem sur fond jaune
CSS
1em
77
<div class="boite_verte">
<p>Bla bla sur fond vert</p>
<div class="boite_jaune">
<p>Idem sur fond jaune</p>
</div>
</div>
Programmation Web
position: relative;
background-color: #00FF00;
width: 15em; }
.boite_jaune { position: absolue;

top: 1em;
right: 1em;
background-color: #FFFF00; }
15em
HTML
.boite_verte {
78
Programmation Web
13
Exemple de mise en page : HTML
Exemple de mise en page : Objectif
<main>
<header>
<h1>Exemple de mise en page</h1>
</header>
<div id="conteneur">
<nav>
<a href="http://www.univ-lyon2.fr">Universit Lyon 2</a>
</nav>
<section>
<article>Article 1</article>
</section>
</div>
<footer>
© IDSM
</footer>
79
Programmation Web
80
Exemple de mise en page : CSS
background-color: silver;
}
main {
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: white;
padding: 1em;
}
header {
background-color: yellow;
text-align: center;
padding: 1em;
}
#conteneur {
float: left;
width: 750px;
background-color: lime;
margin-left: 1em;
}
article {
background-color: aqua;
margin: 1em;
}
footer {
background-color: fuchsia;
text-align: center;
padding: 1em;
width: 100%;
margin-top: 1em;
Programmation Web
Langage HTML
}
section {
}
}
82
Gnralits
83
1994
1995
1995
1997
2000
2004
Programmation Web
Gnralits
PHP : PHP Hypertext Preprocessor

Langage de script permettant d'insrer de la
programmation dans des pages Web
Pages Web dynamiques
Versions :
Plan du cours
float: left;
width: 200px;
background-color: red;
padding: 1em;
font-family: arial;
}
body {
Programmation Web
nav {
*{
81
<main>
Syntaxe du langage PHP proche de celles de C, Perl

ou Java
Support d'un grand nombre de bases de donnes
Support de services internet (IMAP, POP3, NNTP,
HTTP)
: Conception par Rasmus Lerdorf

: Premire version publique
: PHP/FI
: PHP 3
: PHP 4
: PHP 5
Programmation Web
Gratuit, fonctionne sous Unix et Windows
84
Programmation Web
14
Gnralits
Syntaxe de base
PHP : Langage de script "serveur" comme ASP

( Javascript, langage de script "client")
Passage du HTML PHP (chappement) : <script

language="php"> </script> ou <?php ?>
Script excut sur le serveur

<html>
<body>
<?php echo "Bonjour"; ?>
</html>
</body>
Page web avec script
Ex. <?php echo "Bonjour"; ?>
Sparateurs d'instructions :
Commentaires
Serveur Web
Client
Ex.
<html>
<body>
Bonjour
</html>
</body>
Page web sans script
85
Programmation Web
Nombres entiers : int, integer

Nombres rels : real, double, float
Chanes de caractres : string
Programmation Web
Tableaux : scalaires ou associatifs, cration par

assignation des valeurs
$i = 1;
$pi=3.14;
$ch="oui";
Programmation Web
Programmation Web
Variables d'environnement
Ex.
$matrice[0][0] = 2;
$msa["Dupont"][0] = 30;
$matrice2 = array(
array(1, 0, 0),
array(0, 1, 0),
array(0, 0, 1));
89
Programmation Web
Constantes
Tableaux plusieurs dimensions : possibilit de

mlanger indices scalaires et associatifs
Ex.
Initialisation :
Ex.
$notes_s = array(10, 12.5, 15, 8);
$notes_a = array("Valeriia" => 16, "Vadim" => 12);
Nombre dlments :
Ex.
$n = count($notes_s)
88
Variables et types
$ts[0] = "Chane 0"; // Indiage partir de 0

$ts[1] = "Chane 1";
$ta["Dupont"] = 30;
Fonctions associes :
Ex. $ipi = (int) $pi; // $ipi est gale 3
87
Ex.
Ex. d'affectation
Conversion de type : "cast" comme en C
Variables et types
Variables : prfixes par le caractre $

PHP ne ncessite pas de dclaration explicite du type
de variable ( ).
Types de donnes :
// Toute une ligne (faon C++)

# Toute une ligne (faon Shell Unix)
/* Plusieurs
lignes (faon C) */
86
Variables et types
Constantes dfinies par l'utilisateur
1 0 0
0 1 0
0 0 1
$_SERVER["PHP_SELF"]
$_SERVER["SERVER_NAME"]
$_SERVER["HTTP_REFERER"]
$_SERVER["REMOTE_ADDR"]
90
Ex.
define("maChaine", "Valeur de maChaine");

define("PI", 3.14159265);
echo "<p>maChaine=" . maChaine . "<br />";
echo "PI=" . PI . "</p>";
Programmation Web
15
Oprateurs
Oprateurs
Oprateurs d'affectation
Concatnation de chanes de caractres : .
Exemples
Affectation simple :
$a = 2;
Affectation multiple :
$a = $b = 2;
Affectation + opration :
$a += 2;
Pr/post incrmentation/dcrmentation :
++$a;
--$a;
$a++;
$a--;
Affectation conditionnelle :
$max=($a>$b)?$a:$b;
Ex.
$ch1 = $ch2 . $ch3;

$ch1 .= "<br />";
Caractres spciaux dans les chanes

(chappement)
Antislash :
Dollar :
Guillemets :
\\
\$
\"
Oprateurs arithmtiques : + - * / % (modulo)
91
Programmation Web
92
Oprateurs
Affichage
Oprateurs logiques
Programmation Web
Procdures prdfinies
ET : and ou &&
OU : or ou ||
OU exclusif : xor
NON : !
Ex. echo "Bonjour !";

Ex. print("Bonjour !");
Ces deux procdures sont le seul moyen d'afficher quelque
chose dans le document HTML final.
Affichage de tableau : print_r($my_array);
Oprateurs de comparaison
galit/Diffrence :
Infrieur/Suprieur :
Infrieur ou gal/Suprieur ou gal :
==
<
<=
Formatage : Utilisation des balises HTML
!=
>
>=
Ex. echo "<h1>TITRE</h1>";
Saut de ligne dans le code source
93
Programmation Web
94
Affichage du contenu de variables
Programmation Web
Test :
Ex. echo "PI = " . $pi . "<br />";
Directement dans une chane
Ex. echo "PI = $pi<br />";
Rsultat de fonction : concatnation obligatoire
95
Ex.
if (expression) instructions
[elseif (expression) instructions]
[else instructions]
if ($a>$b) echo "A > B";
if ($a>$b) { // Plusieurs instructions
echo "A > B";
$b = $a;
}
Ex. echo "Carr de PI = " . carre($pi);
Programmation Web
Structures de contrle
Utilisation de l'oprateur de concatnation
Ex. echo "<h1>TITRE</h1>\n";
96
Programmation Web
16
Slection : switch(variable) {cas}
if ($a>$b) {
echo "A > B";
} else {
echo "A <= B";
}
Ex.
switch($ch) {
case "a": echo "A"; $ch="A"; break;
case "b": echo "B"; $ch="B"; break;
case "c": echo "C"; $ch="C"; break;
default: echo "Ni \"a\" ni \"b\" ni \"c\"";
}
if ($a>$b) echo "A > B";

elseif ($a<$b) echo "A < B";
else echo "A = B";
97
Programmation Web
98
Ex.
Programmation Web
Boucle "pour tout lment" de tableau scalaire

foreach (tableau as valeur) instructions
$i=1;
while ($i<=10) { echo $i++;
}
Boucle "rpter tant que" : do {instr} while(expr)
Ex.
Boucle "tant que" : while(expr) {instr}
switch($i) {
case 0: echo "i=0"; break;
}
$i=1;
do { echo $i++;
} while ($i<=10);
Ex.
$tab[0]="Rouge";
$tab[1]="Vert";
$tab[2]="Bleu";
foreach ($tab as $val) {
echo "Valeur courante : $val<br />";
}
Boucle "pour" : for (expr1; expr2; expr3) {instr}
Ex.
99
for ($i=1; $i<=10; $i++) { echo $i;

}
Programmation Web
100
Programmation Web
Inclusion de fichiers dans une page
Boucle "pour tout lment" de tableau associatif

foreach (tableau as cl => valeur) instructions
Ex.
$tab["Rouge"]="#FF0000";
$tab["Vert"]="#00FF00";
$tab["Bleu"]="#0000FF";
foreach ($tab as $cle => $val) {
echo "Code de $cle : $val<br />";
}
Programmation Web
Fonction require() : Provoque une erreur fatale si le fichier

requis manque (interruption du script)
Fonction include() : Provoque seulement un avertissement
(warning) si le fichier requis manque
valuation des fichiers inclus en mode HTML
Exemples (paramtre des fonctions : une URI)
101
102
require("mes_fonctions.inc.php");
include("une_page_web.html");
include('http://serveur.fr/pg.html');
Programmation Web
17
Fonctions
Fonctions
Squelette de dfinition de fonction
Passage de paramtres par rfrence (paramtres passs

par valeur par dfaut) : &
function nom_fn ($p1, $p2, , $pn) {

// Code de la fonction
return val_retour; // Optionnel
}
Ex.
Exemple
function mon_max ($n1, $n2) {
return ($n1>$n2) ? $n1 : $n2;
}
Paramtres par dfaut
Ex.
Une fonction doit tre dfinie avant d'tre appele.
103
Programmation Web
104
Visibilit des variables
Sparation des tches de programmation

et de design Web
Maintenance facilite
Ex. function exemple_global {

global $vglob; // Visible hors de la fonction
Variables statiques
105
Ex. function exemple_static {

static $vstat; // Conserve sa valeur entre
deux appels la fonction
Programmation Web
Sparation de PHP et HTML
Variables globales
function cafe($type="expresso") {
return "Je fais un $type<br />";
}
echo cafe(); // Je fais un expresso
echo cafe("capucino"); // Je fais un capucino
Programmation Web
Variables normales : visibles uniquement l'intrieur

de la fonction o elles sont dfinies
function alaligne(&$chaine) {
$chaine .= "<br />";
}
$ch="Coucou !";
alaligne($ch); // <br /> ajout la fin
Lecture plus aise des pages HTML + PHP

Modification facile du code sans affecter la mise en page et
vice-versa
Rutilisation de code
Utilisation des fonctions include() et require()
Ex. Dfinition dans des fichiers spars d'en-ttes et de pieds

de page communs plusieurs pages
106
Plan du cours
Programmation Web
Principe
Imbrication de requtes SQL dans du code PHP +
formulaires HTML pour les mises jour
Langage HTML
SGBD utilis : MySQL
Serveur de BD SQL multi-utilisateurs rapide

Dvelopp depuis 1995 (version actuelle : MySQL 5)
Disponible sous licence GPL ou commerciale
Utilisation de l'extension PHP Data Objects (PDO) :

interface daccs une base de donnes
(divers SGBD supports dont MySQL ; ncessite PHP 5.1+)
107
Programmation Web
108
Programmation Web
18
lments de langage SQL
Base de donnes : ensemble de tables
Types de donnes principaux
Table : ensemble d'attributs et leurs valeurs
Ex. ETUDIANT (numetu, nom, prenom, datenaiss, note)
Interrogation simple
SELECT liste_attributs FROM table
WHERE condition
Ex. SELECT nom, prenom FROM etudiant WHERE note>=10
Nombre entier : INT

Nombre rel : FLOAT
Chane de caractres : VARCHAR(taille)
Date : DATE
Cl primaire : identifie de faon unique les

n-uplets (lignes) de la table
Cration de table
Mot-cl PRIMARY KEY aprs le type
CREATE TABLE nom_table (liste(champ, type))
109
Programmation Web
110
Programmation Web

Insertion d'un n-uplet
INSERT INTO nom_table VALUES (liste_valeurs)
Exemple de cration de table

CREATE TABLE etudiant (
Ex. INSERT INTO etudiant VALUES (123, 'Darmont', 'Jrme', '15-01-1972', 15.5)
Suppression d'un n-uplet
numetu INT PRIMARY KEY,

nom VARCHAR(50),
prenom VARCHAR(100),
datenaiss DATE,
note FLOAT )
DELETE FROM nom_table WHERE condition
Ex. DELETE FROM etudiant WHERE numetu = 123
Modification d'un n-uplet

UPDATE nom_table SET attribut = valeur WHERE condition
Ex. UPDATE etudiant SET note = 20 WHERE numetu = 123
111
Programmation Web
112
Programmation Web
PDO : Connexion une BD

Connexion
Requte de jointure (multi-table)
$idconn = new PDO(id_serveur_bd, login_mysql, mot_de_passe);
SELECT liste_attributs
FROM table1, table2, tableN
WHERE condition_jointure_t1t2
AND condition_jointure_tN-1tN
id_serveur = pilote:host=serveur;dbname=nom_bd
Ex.
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
Gestion des erreurs

try { instructions } catch () { traitement_des_erreurs }
113
Ex.
SELECT *
FROM etudiant, diplome
WHERE etudiant.num_dipl = diplome.num_dipl
Programmation Web
Ex. try {
// Connexion
} catch (PDOException $erreur) {
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}
114
Programmation Web
19
PDO : Excution dune requte
PDO : Exemple pratique

try {
Requte dinterrogation
// Connexion
$c = new PDO("mysql:host=localhost;dbname=darmont", "darmont", "x");
// Requte de slection
$q = "select nom, prenom from etudiant";
$res = $c->query($q);
echo "<ul>\n";
foreach($res as $l)
echo "<li>". $l["nom"] . " " . $l["prenom"] . "</li>\n";
echo "</ul>\n";
echo "<p>" . $res->rowCount() . " rsultat(s)</p>\n";
// Requte de mise jour
$res = $c->exec("update etudiant set note = note + 1") ;
echo "<p>$res ligne(s) modifie(s)</p>\n";
} catch (PDOException $erreur) { // Gestion des erreurs
echo "<p>Erreur : " . $erreur->getMessage() . "</p>\n";
}
$idconn->query(requte_SQL)
Ex. $c->query("select nom, prenom from etudiant");
Accs au rsultat de la requte (ligne par ligne)
Ex. foreach($c->query("select nom, prenom from etudiant") as $l)

echo $l["nom"] . " " . $l["prenom"] . "<br />\n";
Requte de mise jour

$idconn->exec(requte_SQL)
Ex. $c->exec("update etudiant set note = note + 1");

Retourne le nombre de n-uplets mis jour
115
Programmation Web
116
Conversion de jeux de caractres
Programmation Web
Formulaires HTML
Encodage de caractres Europe de lOuest : iso-8859-1

(sur 2 octets)
Formulaires : permettent la saisie de donnes dans une

page Web
Encodage de caractres international : utf-8

(sur 4 octets, plus rcent)
Dfinition : <form> </form>
Si un texte contenu dans une BD est un format et que

le serveur Web utilise lautre : problme (accents)
Affichage de type : caractres utf-8 affichs en iso-8859-1
$idconn->exec("set names latin1");

Affichage de type ? : caractres iso-8859-1 affichs en utf-8
$idconn->exec("set names utf8");
117
Programmation Web
Une seule fois, aprs la

commande de connexion
Programmation Web
Formulaires HTML
Diffrence entre les mthodes get et post
Attribut action : URI de la page PHP excuter aprs validation

du formulaire
Attribut method : mthode de transmission des donnes (valeurs
possibles : get et post)
Attribut enctype : type d'encodage (par dfaut application/xwww-form-urlencoded ou
multipart/form-data pour envoyer des fichiers)
118
Formulaires HTML
Saisie dans un formulaire : <input />
get : apparition des valeurs saisies en paramtres de l'URI de

la page action
post :
. valeurs saisies caches
. quantit de donnes possible plus importante
Attribut obligatoire : name, nom de la variable
Champ texte : <input type="text" size="" />
Ex. <input type="text" name="nom" size="30" />
Suggestion de valeurs : <datalist></datalist>
Exemple
<form action="ajout_etu.php" method="post"></form>
Structure d'un formulaire : ensemble de zones de

saisie (groupes de champs)
Groupe de champs : <fieldset> </fieldset>
119
Programmation Web
120
Ex.
<datalist id="prop_noms">
<option value="Dupond">
<option value="Durand">
<option value="Martin">
</datalist>
<input type="text" name="nom" list="prop_noms" />
Programmation Web
20
Formulaires HTML
Formulaires HTML
Vrification syntaxique : expressions rgulires
Bouton radio : <input type="radio" value="" />
Ex. <input type="email" pattern="[^ @]*@[^ @]*" />
Champ mot de passe : <input type="password" />
Ex. <input type="password" name="passwd" size="8" />
Case cocher : <input type="checkbox" />
Champ cach : <input type="hidden" value="" />
Ex. <input type="hidden" name="numetu" value="10" />
Fichier : <input type="file" />
Programmation Web
122
Formulaires HTML
Attribut name : nom de la zone de texte

Attributs rows et cols : nombre de lignes / colonnes
Ex. <textarea name="texte" rows="10" cols="60">
</textarea>
123
Programmation Web
124
Formulaires HTML
Ex. <label for="id_nom">
Lgende de zone de saisie : <legend> </legend>

Ex. <fieldset>
<legend>tat civil de l'tudiant</legend>
</fieldset>
Programmation Web
<form action="ajout_etu.php" method="post"> <fieldset>

<p> Nom : <input type="text" name="nom" size="50" /> </p>
<p> ge : <input type="text" name="age" size="2" /> </p>
<p> Anne : <select name="annee">
<option>Licence</option>
<option selected="selected">M1</option>
<option>M2</option>
</select> </p>
<input type="hidden" name="action" value="ajout" />
<p> <input type="reset" value="Annuler" />
<input type="submit" value="Valider" /> </p>
</fieldset> </form>
Nom : <input type="text" id="id_nom" name="nom" />

</label>
125
Programmation Web

Description de champ : <label> </label>
Attribut name : nom de la variable choix

Balise <option> </option> : lment de la liste
Attribut selected de <option> : choix par dfaut
Ex.
<select name="annee">
<option>Licence</option>
<option selected="selected">M1</option>
<option>M2 professionnel</option>
<option>M2 recherche</option>
</select>
Formulaires HTML
Options d'accessibilit (navigation alternative)
Liste droulante : <select> </select>
Attribut type = submit | reset : validation ou rinitialisation du

formulaire
Attribut value : lgende du bouton
Ex. <input type="submit" name="Valider" value="Valider" />
<input type="reset" name="Annuler" value="Annuler" />
Zone de texte long : <textarea> </textarea>
Programmation Web
Formulaires HTML
Boutons de commande
Ex.
choix 1 : <input type="checkbox" name="choix1" />
choix 2 : <input type ="checkbox" name="choix2" />
Ex. <input type="file" name="Fichier_tlcharg" />
121
Ex.
Homme : <input type="radio" name="genre" value="H" />
Femme : <input type="radio" name="genre" value="F" />
126
Programmation Web
21
Exploitation des donnes

d'un formulaire avec PHP
Mise jour d'une base de donnes

avec PHP
Dans la page cible (Ex. ajout_etu.php)
<?php // Suite de l'exemple : document ajout_etu.php

$c = new PDO("mysql:host=localhost;dbname=darmont",
"darmont", "x");
Tableaux associatifs $_GET[] et $_POST[]

Permettent d'accder aux valeurs transmises par les
mthodes get et post des formulaires, respectivement
Exemple
$nom = $_POST["nom"];
$age = $_POST["age"];
$annee = $_POST["annee"];
<?php
echo "<p>L'tudiant " . $_POST["nom"];
echo " (" . $_POST["age"] . " ans)";
echo " est en " . $_POST["annee"] . ".</p>";
?>
$requete = "insert into etudiant values ('$nom', $age, '$annee')";

$resultat = $c->exec($requete);
if ($resultat) echo "<p>Insertion effectue</p>";
?>
Cas particuliers : case cocher (valeur "on" si coche)

et fichiers
127
Programmation Web
128
Tlchargement de fichier
Variables disponibles dans la page cible
Ex.
<form action="telechargement.php" method="post"
enctype="multipart/form-data" />
<fieldset>
<input type="hidden" name="MAX_FILE_SIZE" value="50000" />
Fichier : <input name="monfichier" type="file" />
<input type="submit" value="Tlcharger" />
</fieldset>
</form>
Programmation Web
$destination = "/home/jd/public_html/" . $_FILES["monfichier"]["name"];

$res = move_uploaded_file($_FILES["monfichier"]["tmp_name"],
$destination);
if ($res) echo "<p>Fichier tlcharg avec succs</p>";
else echo "<p>Erreur : " . $_FILES["monfichier"]["error"] . "</p>";
130
Transmission de variables
d'une page PHP une autre


<form action="suivante.php" method="post"> <fieldset>
<input type="hidden" name="nom" value="<?php echo $nom; ?>" />
<input type="hidden" name="age" value="<?php echo $age; ?>" />
<input type="submit" value="Envoyer" />
</fieldset> </form>
Mthode 2 : Ajouter des paramtres l'URI de la page

cible

Mthode 1 : Utiliser les champs cachs d'un formulaire
Programmation Web
Programmation Web
Exemple : On dispose du nom et de l'age du visiteur de

la page courante.php dans les variables $nom et $age.
On souhaite les transmettre la page suivante.php.
131
$_FILES["monfichier"]["name"] : nom original du fichier

$_FILES["monfichier"]["size"] : taille du fichier
$_FILES["monfichier"]["tmp_name"] : nom temporaire du fichier sur la
machine serveur
Exemple de code dans la page telechargement.php
tape 2 : traitement l'aide de PHP
129
Tlchargement de fichier
tape 1 : formulaire dans une page HTML
Programmation Web


<a href="suivante.php?nom=<?php echo $nom; ?>&age=
<?php echo $age; ?>">Envoyer</a>
132
Programmation Web
22
Sessions
<?php // suivante.php
Objectif : Stockage de variables lors de la navigation

sur plusieurs pages Web successives
// Mthode 1
$nom = $_POST["nom"];
$age = $_POST["age"];
Utilisations courantes :
// Mthode 2
$nom = $_GET["nom"];
$age = $_GET["age"];
Identification des visiteurs d'un site par login et mot de passe

stocks dans une base de donnes
Gestion du profil des utilisateurs
?>
133
Programmation Web
134
Programmation Web
Sessions
Sessions


<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head> <title>Session 1</title> </head>
<body>
<form action="session2.php" method="post >
<fieldset>
Votre nom : <input type="text" name="nom" />
<input type="submit" value="Valider" />
</fieldset>
</form>
</body>
</html>
<?php
session_start();
// Enregistre la valeur de $nom dans la variable de session s_nom
$_SESSION["s_nom"] = $_POST["nom"];
?>
<!DOCTYPE html>
<html>
<body>
<p>Identifiant de session : <?php echo session_id(); ?><br />
Nom de session : <?php echo session_name(); ?></p>
<p>Bienvenue sur ma page Web, <?php echo $_SESSION["s_nom"]; ?>.<br />
<a href="session3.php">Page suivante</a>.</p>
</body>
</html>
135
137
Programmation Web
136
Programmation Web
Sessions
Sessions
<?php session_start(); ?>

<!DOCTYPE html>
<html>
<body>
<p>Es-tu toujours l, <?php echo $_SESSION["s_nom"]; ?> ?<br />
<a href="session4.php">Dtruire la variable de session</a> ou
<a href="session5.php">clore la session</a> ?</p>
</body>
</html>
<?php
session_start();
$_SESSION["s_nom"] = FALSE; // Suppression de la variable de session
?>
<!DOCTYPE html>
<html>
<body>
<p>Es-tu toujours l ?
<?php if ($_SESSION["s_nom"]) echo "Oui.";
else echo "Non."; ?>
<br /><a href="session5.php">Clore la session</a>.</p>
</body>
</html>
Programmation Web
138
Programmation Web
23
Sessions
Plan du cours
<?php
session_start();
session_destroy(); // Destruction de la session
?>
<!DOCTYPE html>
<html>
<body>
<p>Session termine.</p>
</body>
</html>
139
Programmation Web
Langage HTML
140
Programmation Web
24

Support de Cours-Progweb

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Support de Cours-Progweb

Transféré par

Droits d'auteur :

Formats disponibles

Actualit du cours

https://twitter.com/darmont_lyon2 hashtag #webidsm

Objectif : publier sur le World Wide Web (ou WWW,

Versions successives de HTML

lment : nom, notion abstraite

2000 : XHTML 1.0 (HTML 4 rcrit en XML)

Ex. Document HTML : html

Balise : forme concrte d'un lment

lments, balises et attributs

Ex. de balise ouvrante : <html>

Attribut : proprit d'un lment (nom, valeur)

Ex. <a href="http://www.univ-lyon2.fr">

Rgles d'criture XHTML

Squelette d'un document HTML

Les noms des balises doivent tre crits en minuscules.

Les noms des attributs doivent tre crits en

Les valeurs des attributs doivent tre entre guillemets

Mtadonnes : <meta />

Note : Une balise vide peut se noter <balise></balise>

Optimisation des performances

lments de structuration du document

Ex. <link rel="dns-prefetch" href="//platform.twitter.com">

Informations qui ne sont pas affiches mais qui sont

Ex. <link rel="prefetch" href="http://darmont.me/hello.html" />

lments qui apparaissent explicitement laffichage

Ex. <link rel="prerender" href="http://darmont.me/hello.html" />

Titres, paragraphes, sparateurs

Titres (headings) : Six niveaux nots h1 h6

Paragraphes (spars entre eux par un espace)

Ex. <p>Ceci est un paragraphe</p>

Autres blocs de texte prdfinis

Retour la ligne (sans espace) : <br />

Ex. <h1>Titre de niveau 1</h1>

Texte appuy : <strong></strong>

Ex. <address>5 av. P. Mends-France </address>

Police machine crire : <code></code>

Ex. <blockquote>Mignonne allons voir</blockquote>

Ex. <pre>Le formatage sera

Imbrication des balises

URI : Uniform Resource Identifier

<header><h1>Prsentation du master IDSM</h1></header>

Absolue (adresse complte)

Relative ( partir du rpertoire courant)

Exemple : <a href="http://www.univ-lyon2.fr">Universit Lyon 2</a>

Permettent un lien vers un endroit prcis dans une

Balise : <img src="URI" alt="description" />

Dfinition dans une page : attribut id

Ex. <h1 id="menu">MENU</h1>

Ex. <a href="page.html#menu">Retour menu</a>

src : URI du contenu

<audio src="test.mp3" controls="controls" loop="loop">

Listes ordonnes et non-ordonnes

Listes numrotes : <ol> </ol>

lment de structuration (comme section, article)

Sons : balise <audio> </audio>

Ex. <img src="http://eric.univ-lyon2.fr/~jdarmont/img/lyon2.gif" alt="Logo Lyon 2" />

Ex. <a href="#menu">Aller au menu</a>

Rfrence depuis une autre page

Ex. <img src="lyon2.gif" alt="Logo Lyon 2" />

Lien sur une image