DÉVELOPPEMENT WEB DYNAMIQUE

Fatou NGOM
Ingénieur en informatique

Ecole Supérieur Polytechnique

Département Génie Informatique

MARS 2018 1
 Introduction au développement web

MARS 2018 2
Plan

1. Introduction

2. Evolution du web

3. Technologie du web

MARS 2018 3
INTRODUCTION

C’est quoi le web?

 Technologie informatique permettant de consulter des pages

regroupés sur des sites

 Désigne une toile d’araignée

 Le World Wide Web désigne la toile d’araignée mondiale

MARS 2018 4
INTRODUCTION

Le Web : une application Internet

 Le World Wide Web, la toile d’araignée mondiale, est un réseau de

ressources qui s’appuie sur :

 une norme unique de nommage (URL) ;

 un protocole d’échange (HTTP) ;

 un système de liaison hypertexte entre ressources (HTML)

MARS 2018 5
INTRODUCTION

Le W3C

Définition (Wolrd Wide Web Consortium - Wikipédia)

 Le W3C est un organisme de normalisation fondé en octobre 1994 comme un
consortium chargé de promouvoir la compatibilité des technologies du World
Wide Web.

 Le W3C n’émet pas de normes au sens européen, mais des recommandations à

valeur de standards industriels.
MARS 2018 6
INTRODUCTION

Modèle client-serveur

 Le serveur : logiciels (e.g. Apache) situés sur les machines des hébergeurs.
 Le client : votre navigateur Web (Mozilla, Opera, IE, Safari, Chrome) se connecte
à des serveurs Web :
 émet des requêtes HTTP ;
 reçoit des réponses HTTP (une ressource).

MARS 2018 7
INTRODUCTION

Les requêtes HTTP

HTTP est un protocole client-serveur basé sur la notion de requête - réponse

 GET permet de demander la ressource spécifiée
 POST permet de transmettre des données (d’un formulaire par exemple) à une URL qui désigne
un script
 PUT permet de transmettre au serveur une ressource à l’URL
 DELETE permet d’effacer la ressource spécifiée
 GET / HTTP/1.1
 Host: [Link]
MARS 2018 8
EVOLUTION DU WEB

Web Statique au Web Dynamique

 Au tout début du World Wide Web (1991), les pages étaient statiques : leur
contenu était fixé une fois pour toute et ne variait pas.
 on se contentait de diffuser de l’information mais c’était une véritable révolution
pour l’époque (hypertexte)

MARS 2018 9
EVOLUTION DU WEB

Web Statique au Web Dynamique

 L’introduction des CGI (Common Gateway Interface) puis par la suite la

généralisation des scripts exécutables sur le serveur dans différents langages
(Perl, PHP, Python, Ruby) ont permis de faire varier le contenu des pages
 on a alors parle de Web dynamique

 le contenu de la page varie en fonction de l’utilisateur, de ses préférences ou du

sujet abordé.
MARS 2018 10
TECHNOLOGIES DU WEB

Développer pour le Web

 Il faut maîtriser de nombreuses technologies :

 structure du document : XML, XHTML, DOM

 rendu : CSS (feuilles de style)

 interaction : langage cote client (Javascript)

 interaction : langage cote serveur (PHP, Perl, Python, ...)

MARS 2018 11
TECHNOLOGIES DU WEB

Application

 structure du document : HTML

 rendu : CSS (feuilles de style)

 langage cote client: (Javascript)

 langage cote serveur: PHP

MARS 2018 12
 Introduction au langage HTML

MARS 2018 13
Plan
1. Introduction
2. Structure
▪ Structure de base
▪ Texte et mise en forme
▪ Listes
▪ Tableaux
▪ Hyperliens
▪ Images
3. Formulaire
14
4. Nouveautés dans HTML 5
MARS 2018
INTRODUCTION

Historique

 1991: première utilisation du terme HTML par Tim Berners-Lee

 1993: HTML première version publiée par l’IETF

 1995: HTML 2 normalisée par e W3C

 1997 : HTML 3.2

 1999: sortie de HTML 4.01

 2001 : XHTML

 2011: HTML 5

MARS 2018 15
INTRODUCTION

Principe
 Fichier texte contenant des informations de structuration.
 La structure est indiquée a l'aide de balises :
 Le nom de la balise indique le type de mise en forme a appliquer.
 On met une balise ouvrante au début du morceau de texte concerne :
 <nom balise> début du texte

 On met une balise fermante a la fin du texte concerne :

 fin du texte </nom balise> ( ! au /)
 Une balise ouvrante peut contenir des attributs de la forme nom="valeur"

 <nom balise nom1="val1" nom2="val2" ...> texte

 Les attributs permettent de préciser des informations concernant la mise en forme.

 Les balises peuvent être imbriquées.

16
 C'est le navigateur qui interprète les balises pour faire l’affichage.
MARS 2018
INTRODUCTION

Éléments abordés

 La structure d’une page

 Le texte et mise en forme
 Les listes
 Les liens hypertextes
 Les images
 Les tableaux
 Les formulaires
 Les nouveautés dans HTML5

MARS 2018 17
STRUCTURE

Structure d’une page HTML

 Un document HTML est en réalité un document XML avec des balises prédéfinies
 <!DOCTYPE html>
 la balise html marque le début du document
<html>
La balise Head contient les informations relatives à la page: le type d’encodage, le titre, la description, …
<head>
<meta charset="utf-8" />
<meta name="description" content="Exemple de cours" />
<title>Mon premier exemple</title>
</head>

18

MARS 2018
STRUCTURE

Structure d’une page HTML

la balise body contient le corps de la page (les éléments visuels de la page)

<body>
Le document se termine par la fermeture des balise body et html
</body>
</html>

19

MARS 2018
STRUCTURE

Structure d’une page HTML

20

MARS 2018
STRUCTURE

Texte et mise en forme

Les titres
 Les titres sont définis par la balise <hx>
 ou x désigne un niveau
 Il existe 6 niveaux: 1 étant associé a la taille de caractère la plus grande et 6 la plus petite

Les paragraphes
 <p> texte </p>
texte forme un paragraphe (saut de ligne avant et après).
 <hr/> ligne horizontale
 <br/> saut de ligne 21

MARS 2018
STRUCTURE

Texte et mise en forme: texte formaté

Balises qui identifient un formatage :

 <b>en gras</b>
 <i>en italique</i>
 <u>surligné</u>
 <big>en grand</big>
 <small>en petit</small>
 _{en indice}
 ^{en exposant}

22

MARS 2018
STRUCTURE

Listes

Balises qui structurent les listes :

 <ul>une liste non ordinale</ul>
 <ol>une liste ordinale</ol>
 <li>un élément</li>
 <dl>une liste de définition</dl>
 <dt>une étiquette</dt>
 <dd>une données</dd>

23

MARS 2018
STRUCTURE

Listes

<ul>
<li>entree 1</li>
<li>entree 2</li>
<li>entree 3</li>
<li>...</li>
</ul>
<ol>
<li>entree 1</li>
<li>entree 2</li>
<li>entree 3</li>
<li>...</li>
</ol>

24

MARS 2018
STRUCTURE

Tableaux
Balises qui structurent les tableaux :
 <table>un tableau</table>
 <thead>un en-tête de tableau</thead>
 <tbody> un goupe du corps</tbody>
 <tfoot>un pied de tableau</tfoot>
 <caption>un titre</caption>
 <tr>une ligne</tr>
 <th>une cellule d’en-tête</th>
 <td>une cellule de données</td>
 <col>une colonne</col>
 <colgroup>une groupe de colonne</colgroup>

25

MARS 2018
STRUCTURE

Structure de tableaux

Voir TP 1

26

MARS 2018
STRUCTURE

Hyperliens: Liens hypertextes

 <a href="adresse web">texte</a>

 texte devient un lien cliquable.

 Lorsque l'on clique sur texte, on va a l'adresse (URL) adresse web.

 <a href="http ://[Link]/TR/html401/">Documentation HTML</a>

 Le texte Documentation HTML est un lien vers la page web dont l'adresse est

http ://[Link]/TR/html401/
 <a href="[Link]">Des trucs</a>
 Le texte Des trucs est un lien vers la page web [Link] située au même endroit que la page courante.

27

MARS 2018
STRUCTURE

Images
Les formats d’images acceptés
 JPEG (.jpg, .jpeg) : un grand nombre de couleurs, images bien compressées ;
 PNG (.png) : taille faible, peu de couleurs, images entrelacées (affichage progressif) ;
 GIF (.gif) : idem que PNG en moins bien.
Balise <img/>
 L’insertion d’une image dans une page est possible à l’aide de la balise img
 Deux attributs:
 src : URL de l’image (absolue ou relative)
 alt : un texte alternatif en cas de non chargement de l’image

28

MARS 2018
STRUCTURE

Images

Balise simple
 <img src="URL" alt="Texte remplacant l’image"/>
Par ex, <img src="./[Link]" alt="Ma photo"/>
Critères de choix du format
 jpeg : idéal pour les photos et illustrations complexes contenant des millions de couleurs
 png : format sans compression 8 bits ou 24 bits ; possibilité de transparence
 gif : pratique pour les petites tailles (un logo par exemple) ; 256 couleurs max ; gestion de la transparence et
de l’animation
 svg : format vectoriel ; ensemble d’objet graphique ; pas de perte de qualité ; plus léger et plus rapide
29

MARS 2018
FORMULAIRES

Principe

Objectifs :
 accéder a une page (dynamique) en spécifiant des paramètres ;
 permettre a l'utilisateur de saisir ces paramètres.
Comment :
 en utilisant des champs textuels, des listes déroulantes, des cases a cocher ;
 à chacun de des composants de saisie correspond un paramètre.

30

MARS 2018
FORMULAIRES

Balise principale

<form action="adresse web" method="POST" name="nom">

contenu formulaire
</form>
 contenu formulaire : du texte contenant en particulier des balises représentant les différents
composants de saisie;
 adresse web : l'adresse de la page web dynamique à laquelle on souhaite accéder via ce formulaire ;
 POST : la méthode de transmission des paramètres (on peut également mettre GET) ;
 nom : le nom du formulaire (optionnel)
31

MARS 2018
FORMULAIRES

Saisie de texte

<input type="text" name="nom">

 Créée un champ de saisie pour une ligne de texte.
 nom est le nom du paramètre correspondant à ce composant.
 On peut ajouter les attributs suivants :
 size="un nombre" : la taille du champ en caractères ;
 value="une valeur" : texte pré-saisi
 utile pour modifier des informations.

 On peut remplacer type="text" par type="password" si on veut afficher des * au lieu des lettres lors de la
saisie.
 Pas de balise fermante.
32

MARS 2018
FORMULAIRES

Saisie d’un grand texte

<textarea name="nom" rows="h" cols="l">

contenu pré-saisi
</textarea>
 Créée un champ de saisie pour du texte sur plusieurs lignes.
 nom est le nom du paramètre correspondant a ce composant.
 h est la hauteur du composant en nombre de lignes.
 l est la largeur du composant en nombre de caractères.
 le contenu pré saisi peut être vide et ne contient de balise.

33

MARS 2018
FORMULAIRES

Liste déroulante
<select name="nom">
<option value="val1">Texte 1</option>
<option value="val2">Texte 2</option>
...
</select>
 Créée une liste déroulante ayant comme sélection possible
Texte 1, Texte 2,. . .
 La valeur du paramètre nom est donnée par la sélection choisie par l'utilisateur :
val1 pour Texte 1
val2 pour Texte 2
...
 L'attribut value est optionnel.
Par defaut c'est le texte dans la balise <option></option>
34
On peut ajouter selected="true" dans une des balises options pour pré-sélectionner cette option
MARS 2018
FORMULAIRES

Bouton de soumission

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

 Créée un bouton déclenchant le chargement de la page de destination (attribut action de la balise <form>).
 texte est un texte qui sera affiche sur le bouton.
<input type="reset" value="texte">
 Créée un bouton déclenchant la réinitialisation du formulaire, en utilisant les valeurs pré saisies lorsqu'elles
existent.
 texte est un texte qui sera affiché sur le bouton.

35

MARS 2018
FORMULAIRES

Méthodes de transmission de paramètres

Deux méthodes de transmission des paramètres
 GET
 Les paramètres sont encodes avec l'adresse de la page :

 a la fin de l'adresse, on ajoute le caractère ?

 puis pour chaque paramètre on ajoute nom=val
 les paramètres sont sépares par le caractère &

 Utile pour spécifier des paramètres dans un lien hypertexte.

 POST
 Les paramètres sont encodés séparément de l'adresse web.
 Plus pratique pour les formulaires
36

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<header">
<! - - représente l’ente de la page - ->
</headers>

 Entête de la page:
 Logo du site
 bannière

37

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<nav>
<! - - représente les liens de navigation du site- ->
</nav>
 On peut y définir le menu principale du site
<nav>
<ul>
<li><a href="[Link]"></a></li>
<li><a href="A propoc"></a></li>
<li><a href="Nous contacter"></a></li>
</ul>
</nav> 38

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<section>
<! - - contenu la section - ->
</section>

 Elle sert à regrouper des contenus en fonction de leur thématique

<section>
<h1>Ma section</h1>
<p> Mon premier paragraphe </p>
</section>

39

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<aside>
<! - - placer les informations complémentaires - ->
</aside>

 Elle permet de représenter des informations complémentaires au document que

l’on visualise

40

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<article>
<! - - placer les informations complémentaires - ->
</article>

 Cette balise sert a englober un portion autonome de la page.

<article>
<h1>Mon artice</h1>
<p> Mon premier paragraphe </p>
</article>

41

MARS 2018
NOUVEAUTÉ DE HTML5

Les balises structurantes de HTML 5

<footer>
<! - - placer les information comme les mentions légales par exemples- ->
</footer>

 la balise footer permet de représenter le pieds de page. Elle se trouve en général

tout en bas de notre page.

42

MARS 2018
 Introduction au langage CSS

MARS 2018 43
Plan
1. Introduction
2. Intégration
3. Syntaxe
4. Style

44

MARS 2018
INTRODUCTION

Qu’est que le CSS

 Web = Fond + Forme + Interactivité

 Gérer la mise en forme
 Technologie = HTML + CSS + Javascript
 Feuilles de style en cascade, en anglais Cascading Style Sheets (CSS)
 Avantages :
 séparation des préoccupation
 simplifier le code HTML
 factoriser le code
45

MARS 2018
INTÉGRATION

Comment intégrer le CSS

 Dans le code HTML

 Directement dans les balises via l’attribut style (méthode la moins recommandée)
 Dans l’entête de la page
 La balise <head>
 Dans un fichier séparé (méthode la plus recommandée)

46

MARS 2018
INTÉGRATION

Intégrer le CSS dans l’entête de la page

47

MARS 2018
INTÉGRATION

Intégrer le CSS dans un fichier séparé

[Link]
[Link]

48

MARS 2018
SYNTAXE

Syntaxe CSS
La syntaxe [Link]

selecteur1 {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
selecteur2 {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
49

MARS 2018
SYNTAXE

Sélecteur CSS
Sélecteur Exemple Description
* * sélectionne tous les éléments
element p sélectionne tous les éléments <p>
#id li # home sélectionne l’élément id="#home"
.class .gauche sélectionne tous les éléments class=".gauche"
el1, el2 table, td, th sélectionne tous les éléments <table>, <th> et td
el1 el2 footer a sélectionne tous les liens dans un pied de page
:hover a : hover sélectionne tous les liens survolés
:active a : active sélectionne tous les liens activés
:link a : link sélectionne tous les liens non visités
:after dt : after insert quelque chose après tous les éléments <dt>
:before dt : before insert quelque chose avant tous les éléments <dt> 50

:visited a : visited sélectionne tous les liens visités

MARS 2018
STYLE

Formatage du texte: la taille

 Pour modifier la taille du texte on utilise la propriété CSS font-size en indiquant soit la
taille absolue(en pixel, méthode très précis) soit la taille relative (en pourcentage, plus
souple)
 Pour indiquer une valeur relative il y a plusieurs manière:
 xx-small : minuscule ;
 x-small : très petit ;
 small : petit ;
 medium : moyen ;
 large : grand ;
 x-large : très grand ;
 xx-large : très très grand 51

MARS 2018
STYLE

Formatage du texte: la police

 Pour indiquer la taille du texte on utilise la propriété CSS font-family.

Exemple :
p{
font-family: Arial ;
}

52

MARS 2018
STYLE

Formatage du texte: Mettre en gras, italique, souligné

 Pour mettre la texte en italique on utilise la propriété CSS font-style qui peut prendre
trois valeurs:
 Normal, le texte est normal (par défaut)
 Italic, le texte sera mis en italique
 Oblique, le texte sera passé en oblique (légèrement différent de l’italique)
Exemple :
p{
font-family: Arial ;
font-style: italic ;
} 53

MARS 2018
STYLE

Formatage du texte: Mettre en gras, italique, souligné

 Pour mettre la texte en gras on utilise la propriété CSS font-weight qui peut
prendre deux valeurs:
 Normal, le texte est normal (par défaut)
 bold, le texte sera mis en gras
Exemple :
h1 {
font-style: bold ;
}
54

MARS 2018
STYLE

Formatage du texte: Mettre en gras, italique, souligné

 La propriété CSS qui permet de souligné un texte est texte-decoration. Elle peut
prendre les valeurs suivantes:
 underline :souligné
 line-throught : barré
 overline: souligné au dessus
 blink : clignotant
 none : normal

55

MARS 2018
STYLE

Formatage du texte: alignement

 La propriété CSS qui permet de faire des alignements (à gauche, centré, à droite,
justifié) un texte est texte-align . Elle peut prendre les valeurs suivantes:
 left : texte aligné à gauche
 center : texte centré
 right: texte aligné à droite
 justify : le texte sera justifié

56

MARS 2018
STYLE

La couleur et le fond: couleur du texte

 La propriété CSS qui permet de modifier la couleur du texte est color .

Exemple :
h1 {
color: red ;
}
p{
color: #FFFFFF
} 57

MARS 2018
STYLE

La couleur et le fond: couleur du fond

 La propriété CSS qui permet de modifier la couleur de fond est background-color.

Exemple :
body {
background-color: black ;
color: white;
}

58

MARS 2018
STYLE

La couleur et le fond: image du fond

 La propriété CSS qui permet d’insérer une image de fond est background-color .
Exemple :
body {
background-image: url(‘’[Link]’’) ;
color: white;
}

59

MARS 2018