Web & HTML

Karim Bouzoubaa
Issam Kabbaj
 Introduction Internet - web
•  Internet : Réseau d’ordinateurs connectés à
travers le monde

•  Internet permet de relier entre plusieurs sous-

réseaux

•  Le protocole TCP/IP, Transmission Control

Protocol/Internet Protocol, un langage universel
permettant à deux machines de communiquer entre
elles, peu importe leur système d’exploitation

•  Chaque ordinateur a un identificateur, n° IP

–  n° unique
–  identifie et localise l’ord dans le réseau
–  sur 4 octets (IPv4) : a.b.c.d (chaque numéro allant de 0 à 255)
–  exemple : 172.20.10.236
•  172.20.10 exemple de sous réseau
•  236 ordinateur
•  IPv6: 3,4×1038 adresses, soit 667 millions de milliards
d’adresses IP disponibles par mm2
•  Nom de domaine: faire correspondre à une adresse
IP un nom humainement plus simple à retenir:

4/27/14 2
 Clients et Serveurs dans un réseau
•  Client : ordinateur qui demande une ressource (fichier, imprimante, etc.) à
un autre ordinateur
•  Serveur : ordinateur qui met une ressource à la disposition d'autres
•  Le client envoie une requête au serveur, qui y répond en fournissant le
service demandé.
•  Un serveur présente des ports, qui sont des points d'entrées, sur lesquels
les clients envoient leur requêtes

•  Programme client : programme qui

demande une ressource dans le
réseau
•  Programme serveur : celui qui
fournit cette ressource
 C/S – cas du web

•  Programme client = navigateur (browser)

–  IExplorer
–  Mozilla FireFox
–  Safari
–  Opera

•  Programme serveur : le serveur web

–  GlassFish : http://glassfish.java.net/
–  Apache Tomcat : tomcat.apache.org/
–  Oracle OC4J : www.oracle.com/technology/products/oc4j
–  Microsoft IIS : www.iis.net
4/27/14 4
 C/S – cas du web
•  Le browser demande d'accéder à une page web stockée sur serveur web

•  Le programme navigateur envoie une requête HTTP au serveur, lequel y répond

en envoyant le document demandé dans le corps d’une réponse HTTP

•  Ce dernier est écrit dans le langage HTML ( Hypertext Markup Language )

•  Le browser interprète donc ce document HTML pour l'afficher sur l’écran

 Architecture 2 tiers

4/27/14 7
 Requêtes sur Internet
•  Forme de la requête protocole://hôte/chemin
•  http://www.emi.ac.ma/index.html
•  http://www.linux.org/docs/howto.html
•  http://www.w3.org/Markup/html/

•  Hôte spécifié par un URI (Uniforme Resource Identifier, Identificateur de

Ressource Uniforme)
–  A Unifying Syntax for the Expression of Names and Addresses of Objects on the
Network as used in the World-Wide Web (Tim Berners-Lee)

•  Par Défaut
–  index.html, main.html, home.html (ou htm) ...

•  Paramétrisation éventuelle
–  http:// ... ?prenom=mohamed&ville=rabat

•  Autres services aussi

–  ftp://ftp.java.com
–  telnet://myHost

4/27/14 8
 Requêtes sur Internet (HTTP)
•  Une requête Internet (par exemple http://www.emi.ac.ma/index.html)
n’est pas envoyée du client vers le serveur telle quelle. Elle
est mise dans une structure plus large qui contient non
seulement la requête elle-même mais également d’autres
informations telles que le type du système d’exploitation, le
nom du browser, etc.

•  Cette structure n’est pas aléatoire. Elle est définie selon les
règles du protocole HTTP.
•  Le protocole HTTP (HyperText Transfer Protocol) est le
protocole le plus utilisé sur Internet depuis 1990. Il permet de
transférer des ressources (fichiers HTML, fichiers image,
résultats de requêtes, etc.) avec des en-têtes décrivant le
contenu de la ressource

4/27/14 9
 Requêtes sur Internet (HTTP)
•  La communication entre le client et le serveur se fait
en deux temps :
–  Le navigateur effectue une requête HTTP
–  Le serveur traite la requête puis envoie une réponse
HTTP

•  Versions 0.9, 1.0 et actuellement 1.1

•  Même principe que ce soit une requête ou une
réponse
–  Une ligne spécifiant le type de la transaction HTTP
–  L'en-tête HTTP
–  Le corps HTTP (optionnel pour l'envoie de la requête)
 Requêtes sur Internet (HTTP)
•  Une requête HTTP comprend :
1.  Une ligne de requête : c'est une ligne précisant le type de document demandé, la méthode qui doit être appliquée, et la version du protocole
utilisée. La ligne comprend trois éléments devant être séparés par un espace :
•  La méthode, L'URL, La version du protocole utilisé par le client (généralement HTTP/1.0 ou 1.1)
2.  Les champs d'en-tête de la requête : il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires
sur la requête et/ou le client (Navigateur, système d'exploitation, ...). Chacune de ces lignes est composée d'un nom qualifiant le type d'en-
tête, suivi de deux points (:) et de la valeur de l'en-tête
3.  Le corps de la requête : c'est un ensemble de lignes optionnelles devant être séparées des lignes précédentes par une ligne vide et
permettant par exemple un envoi de données par une commande POST lors de l'envoi de données au serveur par un formulaire

•  Une requête HTTP a donc la syntaxe suivante (<crlf> signifie retour chariot ou saut de ligne) :
Entête Description
METHODE URL VERSION <crlf> Accept Type de contenu accepté par le browser (par exemple text/html)
EN-TETE : Valeur<crlf> Accept-Encoding Codage de données accepté par le browser
Accept-
. . . Langage attendu par le browser (anglais par défaut)
Language
EN-TETE : Valeur<crlf> Content-
Type de codage du corps de la requête
Encoding
Ligne vide<crlf>
Content-
CORPS DE LA REQUETE Type de langage du corps de la requête
Language
Content-Length Longueur du corps de la requête
Content-Type Type de contenu du corps de la requête (par exemple text/html)

•  Exemple Date
From
Date de début de transfert des données
Permet de spécifier l'adresse e-mail du client
Chaîne donnant des informations sur le client, comme le nom et la version
User-Agent
du navigateur, du système d'exploitation
GET http://www.commentcamarche.net HTTP/1.0
Accept : text/html
User-Agent : Mozilla/4.0 (compatible; MSIE 5.0; Windows 95)

4/27/14 11
 Requêtes sur Internet (HTTP)
•  Une réponse HTTP comprend :
–  Une ligne de statut: c'est une ligne précisant la version du protocole utilisé et l'état du traitement de la requête à l'aide d'un code et d'un
texte explicatif. La ligne comprend trois éléments devant être séparés par un espace :
•  La version du protocole utilisé, Le code de statut, La signification du code
–  Les champs d'en-tête de la réponse: il s'agit d'un ensemble de lignes facultatives permettant de donner des informations supplémentaires
sur la réponse et/ou le serveur. Chacune de ces lignes est composée d'un nom qualifiant le type d'en-tête, suivi de deux points (:) et de la
valeur de l'en-tête
–  Le corps de la réponse: il contient la ressource demandée

Syntaxe d’une réponse HTTP : Exemple

VERSION-HTTP CODE EXPLICATION<crlf> HTTP/1.0 200 OK
EN-TETE : Valeur<crlf> Date: Fri, 31 Dec 1999 23:59:59 GMT
. . . Content-Type: text/html
EN-TETE : Valeur<crlf> Content-Length: 1354
Ligne vide<crlf>
CORPS DE LA REPONSE <html>
<body>
<h1>Happy New Millennium!</h1>
(more file contents)
. . .
</body>
</html>

4/27/14 12
Le client envoie la requête : Méthode POST

La ligne spécifique
Post /Nom_Script HTTP/1.0 Méthode, chemin, version

Accept : Text/html
Accept : image/gif Entête de la requête
Documents acceptés
Accept : image/jpeg
Ty p e e t v e r s i o n d u
User-Agent : Mozilla/4.0 navigateur ayant soumis la
requête.
*** saut de ligne ***
Var1=Value1
Corps de la requête
Var2=Value2
Paramètres des différents
Var3=Value3 champs du formulaire.
Le client envoie la requête : Méthode GET

La ligne spécifique

GET /Nom_Script?var1=val1&var2=val2&…. HTTP/1.0

Accept : Text/html
Entête de la requête
Accept : image/gif
Accept : image/jpeg
User-Agent : Mozilla/4.0
*** saut de ligne ***

Corps de la requête
Le Serveur retourne la réponse :

La ligne spécifique

HTTP/1.0 200 OK Ligne de Status

Date : Wed, 05Feb02 15:02:01 GMT Entête de la réponse

Nom du Serveur
Server : Apache/1.3.24
Mime-Version 1.0
Dernière modification
Last-Modified : Wed 02Oct01 24:05:01GMT
Content-Type : Text/html Type de contenu
Content-legnth : 4205 Sa taille
*** saut de ligne ***
<HTML><HEAD>
…. Corps de la réponse
Le fichier que le client va
</BODY></HTML>
afficher
 Architecture 2 tiers

4/27/14 16
 HTML Langage de balisage
•  HTML (Hyper Text Markup Language) est un langage pour la description
des pages web. HTML n’est pas un langage de programmation mais
plutôt un langage de balisage. Un langage de balisage permet de décrire
un document avec un ensemble de balises. Langage de balisage

•  Document HTML composé d'éléments de la forme:

•  Dans le cas normal
<balise> contenu </balise>
•  Lorsqu’une balise est sans contenu
<balise/>
•  Lorsqu’une balise contient des attributs (fournissant des informations
additionnelles) et leurs valeurs correspondantes
<balise attribut¹=”valeur¹” … attributn=”valeurn”>
contenu
</balise>
 Exemple

4/27/14 18
 Structure d’un document

<html>
<head>
<title> titre de la page </title>
<meta> Informations générales </meta>
</head>
<body>
Contenu à afficher
</body>
</html>

4/27/14 19
Principaux
éléments
 Les hyperliens
<html>
<head>
<title> Hyperliens </title>
</head>

<body>
<a href=”aide.html”> Lien vers une page d’aide </a>
</ br>
<a href=”http://www.w3.org”> Lien vers W3C </a>
</body>
</html>

4/27/14 21
 Formulaires pour l’interaction
•  Pages web statiques vs Pages web dynamiques
•  Interactivité entre client et serveur
•  Requête HTTP
•  Ressource
•  Paramètres
www.bib-atlas.com

http://www.bib-atlas.com/Formulaire.html?nom=Bihri+Fouzia&categorie=etud
iant&type=Mensuel&passwd=pass123&bouton=Soumetre
Formulaires
 Synthèse web & html

- Réseaux - Architecture C/S

- Internet: réseau mondial - Client – prog client
- Ords dans Internet @IP - Serveur – prog serveur
- Se parlent par TCP/IP - Requête, port

- Réseau qlq - Réseau Internet

- Des services disponibles par modèle C/S
- Accès à ces services par requêtes
- 1 requête spécifiée par protocole/URI/Chemin
- Les services

- courrier - Transfert de fichiers - Accès distant - Bavardage (chat) - Web

à un ord - Docs bien formatées (HTML/XML)
- HTML : forme standard des
documents hypertextes
- Langage de balisage
- Structure particulière du doc

- Doc HTML statiques - Doc HTML dynamiques

- Liens - Docs statiques + formulaires
- Formatage du texte - Dynamisme grâce à des programmes
- Images - Au niveau client (javascript, Ajax, etc.)
- Listes - Au niveau serveur (phg, jsp, asp)
- Tableaux
- Autres
- Formulaires
- Listes déroulantes
- Champs de saisie
- Mot de passe
- Case à cocher
4/27/14 - Bouton radio 24
- Bouton
 XML et XHTML
•  XML (Extensible Markup Language) est un langage de
balisage, comme HTML
•  Cependant, avec XML l’utilisateur est libre de définir autant
que nécessaire de nouvelles balises

•  Contrairement à XML, XHTML est une version de HTML plus

stricte et plus propre. C’est une reformulation de HTML en
XML
•  XHTML est également une recommandation W3C
 Architecture 2 tiers

4/27/14 26
 Les feuilles de styles

•  Objectif des CSS (Cascading StyleSheet)

–  séparer le contenu d’une page web et sa présentation. Ainsi, la structure
et la présentation d’une page web sont gérées séparément
–  changer la forme finale d’une page web sans toucher au code HTML qui
le constitue.
–  définir les styles à un seul endroit
–  réduire en taille et en complexité le code HTML

•  La forme générale d’une règle de style est comme suit :

sélecteur { propriété : valeur; propriété : valeur ... }

4/27/14 27
Les feuilles de styles
Les feuilles de styles
 Sélecteur CSS
Motif Signification Exemple
* Correspond à tout élément.
Correspond à tout élément E (c.à.d., un
E H1 { font-family: sans-serif }
élément de type E).
Correspond à tout élément F qui est un
EF H1 EM { color: blue }
descendant de l'élément E.
Correspond à tout élément F aussi un
E>F BODY > P { line-height: 1.3 }
enfant de l'élément E.
Correspond à un élément E aussi le premier P:first-child EM { font-weight :
E:first-child
enfant de son élément parent. bold }

Correspond à un élément E qui est une

E:link
ancre dans la source dont le lien n'a pas été A:link { color: red }
E:visited
visité (:link) ou bien l'a déjà été (:visited).

E:active
Correspond à l'élément E au cours de A:hover { color: yellow }
E:hover
certaines actions de l'utilisateur. A:active { color: lime }
E:focus
Correspond à l'élément de type E qui
emploie une langue c (la détermination de
E:lang(c) HTML:lang(fr) { quotes: '« ' ' »' }
cette langue est spécifique au langage du
document).

4/27/14 30
 Sélecteur CSS
Motif Signification Exemple
Correspond à tout élément F immédiatement
E+F H1 + H2 { margin-top: -5mm }
précédé par un élément E.

Correspond à tout élément E avec l'attribut

E[foo] H1[title] { color: blue; }
"foo" (quelles qu'en soient les valeurs).

Correspond à tout élément E dont l'attribut "foo" a SPAN[class=exemple] { color:

E[foo="warning"]
exactement la valeur "warning". blue; }

Correspond à tout élément E dont l'attribut "foo" a

E[foo~="warning pour valeur une liste de valeurs séparées par des
A[rel~="copyright"]
"] caractères blancs et dont une de celles-ci est
"warning".

Correspond à tout élément E dont l'attribut "lang" a

*[LANG|="en"] { color :
E[lang|="en"] pour valeur une liste de valeurs séparées par des
red }
tirets, cette liste commençant (à gauche) par "en".

Seulement en HTML. Identique à

DIV.warning
DIV[class~="warning"].

H1#chapitre1 { text-align:
E#myid Correspond à tout élément E dont l'ID est "myid".
center }

4/27/14 31
 Les scripts
•  Problématique
–  Tous les traitements effectués sur le serveur
–  Exemple: vérification des champs non remplis

•  Objectif
–  Sous traiter certaines vérifications au client pour éviter la surcharge sur le
serveur
–  Utilisation des langages de scripts
•  Exemples: Javascript, Vbscript, jquery (librairies javascripts)

•  Javascript
–  Développé à l’origine par Netscape
–  Adopté actuellement par W3C
 Les scripts
•  ≠ de Java

•  JavaScript peut changer le contenu des éléments HTML

•  JavaScript peut utiliser des structures de contrôle

•  JavaScript peut réagir aux événements

•  JavaScript peut être utilisé dans les pages web interactives, comme
par exemple pour valider des données

•  JavaScript peut être intégré directement dans le code HTML soit

être séparé dans un fichier à part
Les scripts
Les scripts
Les scripts
 Libraires - JQuery
•  est une bibliothèque JavaScript rapide, légère et riche en
fonctionnalités
•  permet de parcourir le document HTML, le manipuler, gérer les
événements et l'animation
•  exploitable par API
•  fonctionne sur une multitude de navigateurs

4/27/14 37
<!doctype html>
<html> <head> L’utilisation de la bibliothèque
<title>jQuery To do Example</title> JQuery
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> Lier le fichier HTML au Script
<script type="text/javascript" src ="todo.js"></script>
Jquery
<link rel="stylesheet" href="todo.css" >
</head> <body>
<h2>Todo</h2>
<div class="enter_todo"> Formulaire Contenant le bouton et
<form id="todo_form" action="" method="POST"> la zone de Texte
<input type="text" size="55" id="todo_description" Identifier la zone de texte avec un
name="todo_description"/> id
<input type="submit" id="add_todo" value="Add"/>
</form> </div> Identifier le bouton avec un id
<div class="todo_list"> </div>
</body> </html> La zone d’insertion identifie avec le
nom de la classe

$(document).ready( function() { Répondre au click du bouton

$('#add_todo').click( function() { add_todo à l’aide d’une fonction
var todoDescription = $('#todo_description').val(); Récupération du texte de la zone de
$('.todo_list').prepend('<div class="todo">' texte todo_description
+ '<div>'
+ '<input type="checkbox" class="check_todo » La fonction insert dans le document
name="check_todo"/>’ + '</div>' dans la zone todo_list un div pour le
+ '<div class="todo_description">' checkbox identifié par une classe
+ todoDescription + '</div>’+ '</div>');
$('#todo_form')[0].reset();
$('.check_todo').unbind('click');
$('.check_todo').click( function() {
var todo = $(this).parent().parent(); La fonction permettant de changer la
todo.toggleClass('checked'); classe de la div de check_todo à
}); checked
return false; });
});
 Libraires - angularJS
•  est une API pour le développement d'applications web clientes
•  extensible et fonctionne avec d'autres bibliothèques

4/27/14 39
<!doctype html>
<html ng-app>
<head> <title>angularjs To do Example</title>
<script type="text/javascript" src="https:// L’utilisation de la bibliothèque AngularJS
ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></
Lier le fichier HTML au Script AngularJS
script>
<script type="text/javascript" src ="todoAJ.js"></script>
<link rel="stylesheet" href="todoAJ.css">
</head> <body> Appelle de la méthode remaining() et l’utilisation du
<h2>Todo</h2> variable todos
<div ng-controller="TodoCtrl"> Appelle de la méthode archive()
<span>{{remaining()}} of {{todos.length}} remaining</span> Le formulaire avec l’appelle de la méthode addTodo()
[ <a href="" ng-click="archive()">archive</a> ] La zone de texte identifie par le nom todoText
<form ng-submit="addTodo()">
le bouton de soumission appelant la méthode
<input type="text" ng-model="todoText" size="30"
addTodo
placeholder="add new todo here">
<input class="btn-primary" type="submit" value="add »>
</form>
<ul class="unstyled">
<li ng-repeat="todo in todos"> La zone d’insertion identifie avec le nom de la classe
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
</li> </ul> </div>
</body> </html>
function TodoCtrl($scope) {
$scope.todos = [ La déclaration du variable todos avec l’attribut text et
{text:'learn angular', done:true}, l’attribut done
{text:'build an angular app', done:false}];
$scope.addTodo = function() {
La définition de la fonction addTodo()
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '’; };
$scope.remaining = function() { La définition de la fonction remaining()
var count = 0;
angular.forEach($scope.todos, function(todo) {
count += todo.done ? 0 : 1; Compter le nombre de todo cheked
});
return count; };
$scope.archive = function() { La définition de la fonction archive()
var oldTodos = $scope.todos;
$scope.todos = [];
 Libraires - Ajax
•  Asynchronous JavaScript and XML :
–  permet de construire des applications Web et des sites web dynamiques
interactifs sur le poste client en se servant de différentes technologies
–  combine JavaScript, les CSS, XML, le DOM et le XMLHttpRequest afin
d'améliorer maniabilité et confort d'utilisation des Applications Internet Riches

4/27/14 41
 HTML 5
•  Nouvelle restructuration des pages web

à Nouveaux éléments
•  Section, article, header, footer, nav, figure, audio, video, canvas, …

à Nouveaux attributs
•  Exemple : Pour l’ancienne balise <a>
–  media : permet de spécifier pour quel media ou device il est optimisé

à Nouvelles APIs
•  8 nouvelles APIs pour la création des applications web
–  Pour dessin 2D, pour vidéos, pour les applications hors-lignes, pour édition,
pour drag and drop, permet l'accès à l'historique, etc.

4/27/14 42
4/27/14 43
 Exemple : HTML 5 Video & Canvas

4/27/14 44
 Exemple : HTML 5 Video & Canvas

4/27/14 45
 Autres éléments à étudier
•  Plus
–  http://www.w3schools.com/
–  http://www.w3.org/MarkUp/Guide/
–  http://www.htmlhelp.com/

4/27/14 46
 La suite

4/27/14 47
 Exercice
•  Formulaire
–  css et scripts dans fichiers séparés
–  La majorité des composants HTML
–  Bouton de soumission (test de GET et POST)
–  Voir requête HTTP dans browser

4/27/14 48