Objectifs de l’enseignement de la matière

Développement d’Applications Web

(DAW, Licence 2, Semestre 4)
ØPrésenter les systèmes d’information dans le
contexte Internet.
ØLe module initie à la programmation Web via les
langages HTML, CSS, JavaScript et PHP.
ØEn plus, il initie au développement des services
web.
ØUne étude pratique (les TPs), renforce les
concepts acquis.

Enseignante: [Link]
Recommandations :
Ø Insister sur les TPs durant le module.

Connaissances préalables recommandées :

Ø Notions de base d’internet, initiation en HTML

Le contenu de la matière se base sur le Programme établi par le Ministère de

l’enseignement et de la Recherche scientifique de 2015.

Mode d’évaluation :
Ø Contrôle Continu et Examen écrit

Références
§ Concevoir des applications Web avec UML, Jim Conallen- Collection Eyrolles.
§ J2EE, Nicolas Duminil - Dunod.
§ EJB 2.0 Mise en œuvre. Christophe Calandreau, Alain Fauré, Nader Soukouti-
 2éme année Licence Informatique
Développement d’Applications Web
Programmation Spécifique :
Programmation Web

HTML / CSS

1
2015 Web 2eme Lic. inf. UHLB
 QUID ? « Qui » signifie « Quoi »
APACHE : Serveur WEB
•

•
HTML : Langage hypertexte de description de documents
•
PHP : Langage de programmation interprété coté
serveur
•
MYSQL : Gestionnaire de base de données (non étudié ici)
• Javascript : Langage de programmation interprété coté
client.
Pourquoi ces choix :
ߦ
Le prix (gratuit)
ߦ
La qualité (utilisés par les entreprises
ex : Apache = 2/3 des serveurs WEB)
2
2015 Web 2eme Lic. inf. UHLB
 Points du Module
• HTML : Hyper Text Markup Language
• CSS (feuilles de style Cascading Style Sheet)

• Javascript.

• XML EXtensible Markup Language (si possible)

•
PHP : Hypertext PreProcessor
• PHPde base.

• Interaction avec des SGBDD

• Création d'images à la volée / creation de pdf....

•
Services Web : notions de base

3
2015 Web 2eme Lic. inf. UHLB
 Serveur WEB
Un serveur WEB est une application capable de répondre aux
•
requêtes de clients.
Il est connecté au clients via un réseau (souvent).
•
Il communique avec le client à l'aide du protocole
HTTP(HypertText Transfert Protocol).
•
Il fournit aux clients une page HTML.

Serveur

Clients
4
2015 Web 2eme Lic. inf. UHLB
 5
2015 Web 2eme Lic. inf. UHLB
 6
2015 Web 2eme Lic. inf. UHLB
 7
2015 Web 2eme Lic. inf. UHLB
 8
2015 Web 2eme Lic. inf. UHLB
 9
2015 Web 2eme Lic. inf. UHLB
 Types de Sites
On distingue trois types de sites :
• Site Statique : les requêtes portent sur des fichiers html.
•Site Dynamique : les requêtes déclenche sur le serveur
l'execution d'un script (php). Le script produit une page
HTML.
•Site "Sapin de Noël" : les requêtes portent sur des fichiers
html contenant des scripts coté client.

On peut avoir un site dynamique et sapin de noel...

10
2015 Web 2eme Lic. inf. UHLB
 DEFINITIONS
Le WWW(World Wide Web)?

•WEB ?
Du réseau Internet au Web
Si on a un réseau et des documents :
•Web = réseau + documents hypertextes
!réseau = machines connectées
!documents hypertextes = documents connectés
•DONC :
Web = documents connectés sur machines connectées

•Réseau international Internet

® World Wide
•Donc le WEB est une application/utilisation particulière des
possibilités offertes par Internet
Hypertexte ?
• Un système hypertexte est un système contenant des nœuds liés entre eux
par des hyperliens permettant de passer automatiquement d'un nœud à un
autre.
•Un document hypertexte est donc un document qui contient des hyperliens
et des nœuds.
•Un nœud est une « unité minimale d'information », notion assez floue qui
signifie simplement que l'information d'un nœud sera toujours présentée
entière.
•Les liens entre les parties du texte sont gérés par ordinateur et permettent
d'accéder à l'information d'une manière associative ou, tout au moins, d'une
façon de naviguer personnalisée, de manière non linéaire, au gré de
l'utilisateur.
•La notion d'hypertexte a trouvé sa plus grande réalisation dans le World
Wide Web.
•Lorsque les nœuds ne sont pas uniquement textuels, mais
aussi audiovisuels, on peut parler de système et de documents
hypermédias.
 HTML
Langage hypertexte de description de documents
•
Hypertexte : permet une navigation non-linéaire
•
Interprété par un client http :
• adaptation au client (taille, polices...)
•
Fournit une description simple d'un document.
•
Documents composés de texte, images.
• LANGAGE STATIQUE: AFFICHER DES PAGES WEB

>>>> Nous utiliserons : HTML5

11
2015 Web 2eme Lic. inf. UHLB
 HTML
Architecture d'un document

• Format d'un document html : texte simple.

• Ce qui est dans le fichier est affiché, sauf instructions html.

• Instructions sous formes de balises (ou « tags ») (< >).

• 2 grandes parties dans un document :

Doctype : indique quel version du langage est utilisee

Entête (head) : informations générales sur la page
Corps (body) : Ce qui sera affiché sur le client.
12
2015 Web 2eme Lic. inf. UHLB
 HTML
Fonctionnement des balises

• Une balise est délimitée par des crochets < >

• Toutes doivent êtres ouvertes et fermées < > , </ >

• Elles peuvent avoir des attributs (options).

<p>
Du texte ici
<img src="[Link]" alt="logo de la compagnie [Link]" />
Puis encore du texte.
</p>
13
2015 Web 2eme Lic. inf. UHLB
 HTML
Exemple

Première page HTML typique :

<!doctype .........>
<html>
<head>
<title> Ma premi&egrave;re page</title>
</head>
<body>
<p>Le texte dans ma premi&eagrave;re page. </p>
</body>
</html>

14
2015 Web 2eme Lic. inf. UHLB
 Les caractères particuliers pour
Car HTML
HTML En français
â &acirc; a minuscule accent circonflexe
à &agrave; a minuscule accent grave
é &eacute; e minuscule accent aigu
ê &ecirc; e minuscule accent circonflexe
è &egrave; e minuscule accent grave
ë &euml; e minuscule tréma
î &icirc; i minuscule accent circonflexe
ï &iuml; i minuscule tréma
ô &ocirc; o minuscule accent circonflexe
œ &oelig; o e minuscule liés
û &ucirc; u minuscule accent circonflexe
ù &ugrave; u minuscule accent grave
ü &uuml; u minuscule tréma
ç &ccedil; c cedille minuscule
< &lt; inférieur à
> &gt; supérieur à
15
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises de structuration du document

• <doctype> : renseigne sur la version du langage utilisé

• <html></html> : il s’agit du langage HTML
• <head></head> : entête.
• <body></body> : corps du document.

16
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises de mise en forme des pages

Pour décrire le découpage des pages en zones :

•<div> </div> : une unité qui fait sens pour le site (ex : une
entête, un menu, )

Pour ce découpage, il y eut (obsolète) :

- <frameset> <frame>
- <table> <tr> <td>

17
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises de mise en forme de texte :

• <p></p> : un paragraphe.
• <strong> </strong> : accentué (gras visuellement)

• <em> </em>
: mis en évidence (italique visuellement)
• : exposant. (superscript).
• : indice (subscript).

18
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises de mise en forme de texte 2

• <xmp></xmp> : non interprété (affiché tel quel).

• <h1></h1>
: premier niveau de titre. (aussi <h2>...
• <!-- test -->
: commentaire.
• <ol></ol>
: liste numérotée.
ߦ <li></li>
: élement de liste.
• <ul> : liste à puces.

19
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises de mise en forme de texte :
les forbidden : Ne pas utiliser !

• <br> : passage à la ligne.

• <hr> : ligne horizontale.
• <i></i>
: italique.
• <b></b>
: gras (bold).

20
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises utiles

• <img> : insertion d'images.

• <a></a>
: ancre. Notamment pour les liens.
• <table></table> : tableau.
ߦ <tr></tr>
: ligne d'un tableau.
ߦ <td></td>
: case d'un tableau.
• Attribut : colspan/rowspan : multi colonne/ligne.

21
2015 Web 2eme Lic. inf. UHLB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "[Link]
[Link]">
<html>
<head>
<title>titre</title>
</head>

<body>
<p>Ceci est un paragraphe</p>
<hr/>

<h1>bonjour!</h1>
<h3>moyenjour.</h3>
<h6>mauvaisjour.</h6>
<p>je vais aller
<a href="[Link]
rendre visite à via</a>. via c'est bien
<img src="[Link]" alt=":)" />.</p>

<ul>
<li>un élément</li>
<li>un autre élément</li>
</ul>

<ol>
<li>premier élément</li>
<li>deuxième élément</li>
</ol>

</body> 22
</html>
2015 Web 2eme Lic. inf. UHLB
 Structuration du texte

les tables :

<table>
<tr>
<td>1ère ligne, 1ère colonne</td>
<td>1ère ligne, 2ème colonne</td>
</tr>
<tr>
<td>2ème ligne, 1ère colonne</td>
<td>2ème ligne, 2ème colonne</td>
</tr>
</table> 23

2015 Web 2eme Lic. inf. UHLB

<h1>une table un peu plus
compliquée...</h1>

<table border="1">
<tr>
<td colspan="3">
1ère ligne, 1ère colonne
</td>
<td>1ère ligne, 4ème colonne</td>
</tr>
<td>2ème ligne, 1ère colonne</td>
<tr>
<td>2ème ligne, 2ème colonne</td>
<td>2ème ligne, 3ème colonne</td>
<td rowspan="2">
2ème ligne, 4ème colonne
</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
3ème ligne, 1ère col
</td>
<td>3ème ligne 3ème colonne</td>
</tr>
<tr>
<td>4ème ligne, 3ème colonne</td>
<td>4ème ligne, 4ème colonne</td>
</tr>
</table>
24
2015 Web 2eme Lic. inf. UHLB
 HTML
Balises blocs et inline
Deux types de balises :
•
blocs (des parties entières de texte)
ex : <p> <div> <h1>
•
en ligne (inline) : enrichit une portion de texte
ex : <strong> <em> <img> .....

- Les blocs se suivent (par défaut) l'un en dessous de l'autre.

- Les inline se suivent (par défaut) l'un a coté de l'autre.

- Une inline ne peut contenir que des inline (et du texte)

- une bloc peut contenir des blocs, des inline, du texte.

25
2015 Web 2eme Lic. inf. UHLB
 HTML
Les feuilles de styles
On les appelle aussi CSS pour « Cascading Style Sheets ».
•
Objectif : Définir le style d'un document html indépendamment de
son contenu.
•
Intérêt : Votre site est beau, bien rempli...vous voulez changer
l'image de fond de toutes les pages...
•
Mise en oeuvre : 3 méthodes dont par exemple: les styles sont
définis dans un fichier, référencé dans le document html (voir
suite). On ultilisera la version 3
CSS3

26
2015 Web 2eme Lic. inf. UHLB
 La feuille de style est un modèle permettant une
mise en forme automatisée des différentes
parties d'une page web. Elle s'applique sur les
balises telles que les titres, les paragraphes, les
divisions, les liens, les listes.

27
2015 Web 2eme Lic. inf. UHLB
 Il existe 3 méthodes:

1/ Utiliser la balise <style> à l'intérieur du programme html, elle

s'applique sur les <p > , les <div>, les titres <h1> et des liens.

2/Utiliser un fichier externe : lien externe dans lequel on va

enregistrer tous les styles que l'on veut pour les paragraphes, les
titres, ...etc, et qu'on appelera [Link].

3/ Solution locale : on utilisera à l'intérieur du <Body> un style

comme on veut, au niveau des titres (header), des divisions et des
paragraphes, ...etc.

28
2015 Web 2eme Lic. inf. UHLB
 1/ Balise style à 2/ Les styles sont dans 3/ Solution locale : les
l’intérieur du un Fichier externe styles dans définis le
programme html. [Link], utiliser un Link. body.
<html> {.........} [Link] <html>
<head> [Link] : <head>
<style> <html> </head>
</head> <head> <body>
<body> <Link..... <h2 style=
<p> </head> <div style =
<div> <p style =
<h2> <body> </body>
<a href (liens)> </html>
</body> </body>
</html> </html>

29
2015 Web 2eme Lic. inf. UHLB
 1/ Utiliser la balise <style> à l'intérieur du programme html, elle
s'applique sur les <p > , les <div>, les titres <h1> et des liens:

<html>
<head>
<style>
</head>

<body>
<p>
<div>
<h2>
<a href (liens)>

</body>
</html>
30
2015 Web 2eme Lic. inf. UHLB
 2/Utiliser un fichier externe : lien externe dans lequel
on va enregistrer tous les styles que l'on veut pour
les paragraphes, les titres, ...etc, et qu'on appelera
[Link].

On le réutilisera à l'intérieur du programme html

grâce à un <Link ... :

{.........} [Link]

<HTML>
<HEAD>
<Link.....
</HEAD> [Link]

<BODY>
</BODY>
</HTML>
31
2015 Web 2eme Lic. inf. UHLB
 3/ Solution locale : on utilisera à l'intérieur du
<Body> un style comme on veut, au niveau des
titres, des divisions et des paragraphes, ...etc:
<html>
<head>
</head>
<body>
<h2 style=
<div style =
<p style =
</body>
</html>

32
2015 Web 2eme Lic. inf. UHLB
 Quand aux attributs, ils se trouvent sous cette forme:

{ font-size: 34 pt ; (hauteur d'un caractère de 14 à 34 pt

possibles)
font-family:arial; (famille de caractères)
text-align: center;
color: blue;
background: yellow;
font-style: oblique;}

CSS
33
2015 Web 2eme Lic. inf. UHLB
 Comme ce programme:

<html>
<head>
<style>
{ font-size: 34 pt ;
font-family:arial;
text-align: center;
color: blue;
background: yellow;
font-style: oblique;}
</style>
</head>
<body>
<p class="titre">css4</p>
css4
</body> </html>

34
2015 Web 2eme Lic. inf. UHLB
 Exemple 1:

<html>
<head>
<style>
. titre { color: 00ff00;
font-size: 20 pt ;
background: gold;
text-align: center;
</style>
</head>
<body>
<h1 class="titre">css1 - hello</h1>
</body>
CSS1-Hello
</html>

35
2015 Web 2eme Lic. inf. UHLB
 Exemple 2: liens externes

[Link]
.titre {color:00ff00;....background:gold;}

[Link]
<html>
<head>
<link ref = stylesheet
href="[Link]"
type="text/css">
</head>
<body> CSS1-Hello
<h1 class="titre">CSS1-Hello</h1>
</body>
</html>
Nous obtenons comme Exemple1!
36
2015 Web 2eme Lic. inf. UHLB
 Exemple3: Liens locaux qui se trouvent au niveau du
body: On affiche 2 titres CSS3-red, CSS3-green:

[Link]

<html>
<head> ...... </head>

<body>
<h2 style="color-red">CSS3-red </h2>
<h2 style="color-green">CSS3-green</h2>
</body>
CSS3-red
</html>
CSS3-green

37
2015 Web 2eme Lic. inf. UHLB
 HTML
Fonctionnement des feuilles de styles
Le document html indique l'utilisation de feuilles de styles avec la
ligne suivante dans l'entête :
<link rel=stylesheet type="text/css" href="[Link]">

La feuille de style indique ensuite des règles pour le formatage.

/* Definitions des titres niveau 2 */

h2 {color:#0000ca; text-align:left; font-size:large; font-style:italic}

38
2015 Web 2eme Lic. inf. UHLB
 HTML
Limiter les problèmes de polices grâce aux css
Voici comment préciser trois polices possibles dans l'ordre de
préférence, en fonction de leur disponibilité.

h3
{
font-family: verdana, arial, sans-serif; font-size: 14pt; color: red;
background-color: #ffffff;
}

39
2015 Web 2eme Lic. inf. UHLB
 HTML
surcharger des tags grâce aux css

Ici, on utilise la balise <p> pour laquelle on définit une nouvelle classe : petit
[Link]
{ font-family: times, serif; font-size: 10pt; color:black;
font-style:italic; background-color : #ffffff;
}

<p class="petit"> ceci va etre ecrit en petit </p>

40
2015 Web 2eme Lic. inf. UHLB
 HTML
utiliser au mieux l'hérédité dans les css
Vous pouvez créer des sous-classes applicables à toute balise.
.colored{ color:red; }
.marge { margin-left:30px}

Ceci est bien pratique pour faire des choses comme :

<h1 class="colored"> Un gros titre rouge </h1>

<b class="colored"> du texte gras et rouge </b>
<p class="marge"> un paragraphe avec une marge </p>

41
2015 Web 2eme Lic. inf. UHLB
 HTML
utiliser au mieux l'hérédité dans les css 2
La balise <span> est utilisée en CSS pour modifier
l'aspect d'une zone particulière de données.
.rouge{ color:red; }

Ceci est bien pratique pour faire des choses comme :

<span style= "font-size: 16pt; color: fuchsia; background-color:
#FFFFFF; " >un truc très occasionnel</span>
<span class="red">juste mettre en rouge.</span>

Ne pas en abuser...

42
2015 Web 2eme Lic. inf. UHLB
 HTML
utiliser au mieux l'hérédité dans les css 3
La balise <div> est utilisée en CSS pour modifier l'aspect de paragraphes

.marge{ margin-left:30px }

Ceci est bien pratique pour faire des choses comme :

<div class= "marge" >tout un paragraphe avec sa marge. Mais c'est

comme <p> alors ? Ben non, on verra ca plus loin...</div>

43
2015 Web 2eme Lic. inf. UHLB
 HTML
Les liens dans les css
Les pseudos classes liées aux liens (balise <a>) : link : lien normal.
visited : lien deja visité.
hover : on passe dessus avec la souris. active : on a cliqué dessus.
a:link { color:blue; text-decoration:underline; background-color: #ffffff;
} a:visited { color:purple; text-decoration:underline ;
background-color:
#ffffff; }
[Link] { color:red; text-decoration:underline; background-color:
#ffffff; }
a:active { color: red; font-weight: bold; background-color: #ffffff; }

44
2015 Web 2eme Lic. inf. UHLB
 HTML
Positionnement dans les css

Le modèle de boite : vaut pour

toutes les balises bloc :

En anglais (et en css) :

margin : marge externe.

border : bordure

padding : marge interne

45
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement dans le flux
Le positionnement normal : dans le flux.

Les éléments les uns en dessous des autres, puis par rapport :

- aux marges internes du containeur.

- aux marges externes des éléments.

Avec ceci, on peut "déplacer" un élément dans son containeur, et

le contenu d'un élément au sein de cet élément.
Mais on ne peut pas placer deux blocs l'un à coté de l'autre !

46
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement

fichier html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[Link]
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title> des tests </title>
<link rel="stylesheet" href="[Link]" type="text/css" />
</head>
<body>
<div id="entete"> entete </div>
<div id="navigation"> barre de navigation </div>
<div id="milieu"> Ici le milieu
<div id="menu"> le menu </div>
<div id="corps"> le corps du texte</div>
</div>
<div id="footer"> un pied de page </div>
</body>

</html>

47
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement

Et une css quasi vide : Pour ce résultat :

body{
color: #000;
background-color: #800;
}

#entete{ background-color : #080; }

#navigation{ background-color : #008;}

#milieu{ background-color : #444;}

#menu{ background-color : #880;}

#corps{ background-color : #808;}

#footer{ background-color : #088;}

48
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement : marges et centrage

on rajoute les lignes suivantes Pour ce résultat :

#entete{ width : 100px;
margin : auto;
}

#menu{ width : 200px;}

#corps{ margin-left:200px;}

49
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement flottant

Déplacer un élément a gauche ou a droite dans son parent.

Le reste du contenu du parent se positionne autour de l'élément déplacé.

Attention : Comme le float sort du flux courant, il n'est pas compté dans le calcul de la hauteur
du conteneur, si celle-ci n'est pas spécifiée. Il peut donc "dépasser" en hauteur.
Récapitulatif :
* L'élément est d'abord placé normalement dans le flux. Donc si un autre élément bloc est
placé avant lui, l'élément flottant se positionnera en dessous; et si un élément bloc le suit, ce
dernier sera placé dessous. Bref, le comportement classique du positionnement en flux
*Ensuite l'élément qui a reçu la propriété float est "poussé" à gauche ou à droite de son
conteneur.
*Les éléments qui le suivent au sein du conteneur se placent alors autour de lui.

50
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement float

on rajoute les lignes suivantes Pour ce résultat :

#menu{ float:left;}

51
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement : float

Mais .... si on allonge le menu, on a ceci :

La taille de la div de menu
n'est pas prise en compte
pour le calcul de la taille
de la div du milieu...

Notez que le pied de

page n'appartient pas a
la div milieu....

52
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement : float

Le clear : oblige la boite a avoir un coté libre. La boite se

place alors sous les autres boites flottantes floats du coté
spécifié.

on rajoute les lignes suivantes

#footer{ clear:left;}

Notez le vide rouge entre le corps de texte

et le footer : la div milieu ne s'étend pas
jusqu'au pied de page !

On peut avoir clear:right ou clear:both

53
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement absolu

Positionner un élément "en dur".

Pour spécifier la position d'un élément, on donne la position de son coin
supérieur gauche. On peut aussi donner l'indiquer comme suit :
- haut et droite (+ largeur)

L'élément est retiré du flux. Son positionnement est donc

le même quel que soit sa position dans le fichier html...

54
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement absolu
Ici on repositionne quelques élements en absolu.

on rajoute les lignes suivantes

#milieu{
position:absolute; top:5em;
left:5%; right:5%;
}

#footer{
position:absolute;
top:20em; left:1%; right:1%;
}

Notez la taille de la div milieu.

Attention aux chevauchements...

55
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement fixe
Les éléments fixes ne bougent pas
quelque soit la position du défilement dans la
fenêtre du navigateur...
Ici, la barre et l'entête sont fixes.
#entet#entete{
position:fixed; top:0; left:1em; right:1em;
z-index:2; margin : auto;
background-color : #080;
}

#navigation{
position:fixed;
top:1em; left:1em; right:1em; z-index:2;
background-color : #008;
}

56
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Positionnement Relatif

Non abordé ici !

57
2015 Web 2eme Lic. inf. UHLB
 Positionnement et CSS
Quelques remarques
-Une balise bloc peut être traitée comme une
balise inline et inversement avec la propriété
display (:inline ou :bloc)

-Attention à la fusion de marges.

-Certains navigateurs sont récalcitrants :

- évaluation des tailles, comportement fixed, floats, ils n'interprètent pas
les choses de la même façon.

- Testez vos sites avec plusieurs navigateurs, plusieurs versions des

navigateurs.....

58
2015 Web 2eme Lic. inf. UHLB