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:

2 4/27/14

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) : METHODE URL VERSION <crlf> EN-TETE : Valeur<crlf>

. . . EN-TETE : Valeur<crlf>

Ligne vide<crlf> CORPS DE LA REQUETE

•  Exemple

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

Entête Description Accept Type de contenu accepté par le browser (par exemple text/html) Accept-Encoding Codage de données accepté par le browser Accept-Language Langage attendu par le browser (anglais par défaut)

Content-Encoding Type de codage du corps de la requête

Content-Language Type de langage du corps de la requête

Content-Length Longueur du corps de la requête Content-Type Type de contenu du corps de la requête (par exemple text/html) Date Date de début de transfert des données From Permet de spécifier l'adresse e-mail du client

User-Agent Chaîne donnant des informations sur le client, comme le nom et la version du navigateur, du système d'exploitation

Requêtes sur Internet (HTTP)

4/27/14 12

•  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> EN-TETE : Valeur<crlf> . . . EN-TETE : Valeur<crlf> Ligne vide<crlf> CORPS DE LA REPONSE

HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354 <html> <body> <h1>Happy New Millennium!</h1> (more file contents) . . . </body> </html>

Le client envoie la requête : Méthode POST

Post /Nom_Script HTTP/1.0

Accept : Text/html

Accept : image/gif

Accept : image/jpeg

User-Agent : Mozilla/4.0

*** saut de ligne ***

Var1=Value1

Var2=Value2

Var3=Value3

Entête de la requête

Corps de la requête

Méthode, chemin, version

Documents acceptés

Ty p e e t v e r s i o n d u navigateur ayant soumis la requête.

Paramètres des différents champs du formulaire.

La ligne spécifique

Le client envoie la requête : Méthode GET

GET /Nom_Script?var1=val1&var2=val2&…. HTTP/1.0 Accept : Text/html

Accept : image/gif

Accept : image/jpeg

User-Agent : Mozilla/4.0

*** saut de ligne ***

Entête de la requête

Corps de la requête

La ligne spécifique

Le Serveur retourne la réponse :

HTTP/1.0 200 OK

Date : Wed, 05Feb02 15:02:01 GMT

Server : Apache/1.3.24

Mime-Version 1.0

Last-Modified : Wed 02Oct01 24:05:01GMT

Content-Type : Text/html

Content-legnth : 4205

*** saut de ligne ***

<HTML><HEAD>

….

</BODY></HTML>

Entête de la réponse

Corps de la réponse

Ligne de Status

Nom du Serveur

Dernière modification

Type de contenu

Sa taille

Le fichier que le client va afficher

La ligne spécifique

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

4/27/14 19

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

</html>

Principaux éléments

Les hyperliens

4/27/14 21

<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>

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 - Internet: réseau mondial

- Ords dans Internet @IP - Se parlent par TCP/IP

- Architecture C/S - Client – prog client - Serveur – prog serveur - 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 à un ord

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

- Doc HTML statiques - Liens - Formatage du texte - Images - Listes - Tableaux - Autres

- Doc HTML dynamiques - Docs statiques + formulaires - Dynamisme grâce à des programmes

- Au niveau client (javascript, Ajax, etc.) - Au niveau serveur (phg, jsp, asp)

- Formulaires - Listes déroulantes - Champs de saisie - Mot de passe - Case à cocher - Bouton radio - Bouton

4/27/14 24

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

4/27/14 27

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 ... }

Les feuilles de styles

Les feuilles de styles

Sélecteur CSS Motif Signification Exemple

* Correspond à tout élément.

E Correspond à tout élément E (c.à.d., un élément de type E). H1 { font-family: sans-serif }

E F Correspond à tout élément F qui est un descendant de l'élément E. H1 EM { color: blue }

E > F Correspond à tout élément F aussi un enfant de l'élément E. BODY > P { line-height: 1.3 }

E:first-child Correspond à un élément E aussi le premier enfant de son élément parent.

P:first-child EM { font-weight : bold }

E:link E:visited

Correspond à un élément E qui est une ancre dans la source dont le lien n'a pas été visité (:link) ou bien l'a déjà été (:visited).

A:link { color: red }

E:active E:hover E:focus

Correspond à l'élément E au cours de certaines actions de l'utilisateur.

A:hover { color: yellow } A:active { color: lime }

E:lang(c)

Correspond à l'élément de type E qui emploie une langue c (la détermination de cette langue est spécifique au langage du document).

HTML:lang(fr) { quotes: '« ' ' »' }

4/27/14 30

Sélecteur CSS Motif Signification Exemple

E + F Correspond à tout élément F immédiatement précédé par un élément E. H1 + H2 { margin-top: -5mm }

E[foo] Correspond à tout élément E avec l'attribut "foo" (quelles qu'en soient les valeurs). H1[title] { color: blue; }

E[foo="warning"] Correspond à tout élément E dont l'attribut "foo" a exactement la valeur "warning".

SPAN[class=exemple] { color: blue; }

E[foo~="warning"]

Correspond à tout élément E dont l'attribut "foo" a pour valeur une liste de valeurs séparées par des caractères blancs et dont une de celles-ci est "warning".

A[rel~="copyright"]

E[lang|="en"] Correspond à tout élément E dont l'attribut "lang" a pour valeur une liste de valeurs séparées par des tirets, cette liste commençant (à gauche) par "en".

*[LANG|="en"] { color : red }

DIV.warning S e u l e m e n t e n H T M L . I d e n t i q u e à DIV[class~="warning"].

E#myid Correspond à tout élément E dont l'ID est "myid". H1#chapitre1 { text-align: 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> <title>jQuery To do Example</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src ="todo.js"></script> <link rel="stylesheet" href="todo.css" > </head> <body> <h2>Todo</h2> <div class="enter_todo"> <form id="todo_form" action="" method="POST"> <input type="text" size="55" id="todo_description"

name="todo_description"/> <input type="submit" id="add_todo" value="Add"/> </form> </div> <div class="todo_list"> </div> </body> </html>

L’utilisation de la bibliothèque JQuery Lier le fichier HTML au Script Jquery Formulaire Contenant le bouton et la zone de Texte Identifier la zone de texte avec un id Identifier le bouton avec un id La zone d’insertion identifie avec le nom de la classe

$(document).ready( function() { $('#add_todo').click( function() { var todoDescription = $('#todo_description').val(); $('.todo_list').prepend('<div class="todo">' + '<div>' + '<input type="checkbox" class="check_todo » name="check_todo"/>’ + '</div>' + '<div class="todo_description">' + todoDescription + '</div>’+ '</div>'); $('#todo_form')[0].reset(); $('.check_todo').unbind('click'); $('.check_todo').click( function() { var todo = $(this).parent().parent(); todo.toggleClass('checked'); }); return false; }); });

Répondre au click du bouton add_todo à l’aide d’une fonction Récupération du texte de la zone de texte todo_description La fonction insert dans le document dans la zone todo_list un div pour le checkbox identifié par une classe La fonction permettant de changer la classe de la div de check_todo à checked

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://

ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script> <script type="text/javascript" src ="todoAJ.js"></script>

<link rel="stylesheet" href="todoAJ.css"> </head> <body> <h2>Todo</h2> <div ng-controller="TodoCtrl"> <span>{{remaining()}} of {{todos.length}} remaining</span>

[ <a href="" ng-click="archive()">archive</a> ] <form ng-submit="addTodo()"> <input type="text" ng-model="todoText" size="30" placeholder="add new todo here"> <input class="btn-primary" type="submit" value="add »> </form>

<ul class="unstyled"> <li ng-repeat="todo in todos"> <input type="checkbox" ng-model="todo.done"> <span class="done-{{todo.done}}">{{todo.text}}</span> </li> </ul> </div> </body> </html>

L’utilisation de la bibliothèque AngularJS Lier le fichier HTML au Script AngularJS Appelle de la méthode remaining() et l’utilisation du variable todos Appelle de la méthode archive() Le formulaire avec l’appelle de la méthode addTodo() La zone de texte identifie par le nom todoText le bouton de soumission appelant la méthode addTodo La zone d’insertion identifie avec le nom de la classe

function TodoCtrl($scope) { $scope.todos = [ {text:'learn angular', done:true}, {text:'build an angular app', done:false}]; $scope.addTodo = function() { $scope.todos.push({text:$scope.todoText, done:false}); $scope.todoText = '’; }; $scope.remaining = function() { var count = 0; angular.forEach($scope.todos, function(todo) { count += todo.done ? 0 : 1; }); return count; }; $scope.archive = function() { var oldTodos = $scope.todos; $scope.todos = []; angular.forEach(oldTodos, function(todo) { if (!todo.done) $scope.todos.push(todo); }); }; }

La déclaration du variable todos avec l’attribut text et l’attribut done La définition de la fonction addTodo() La définition de la fonction remaining() Compter le nombre de todo cheked La définition de la fonction archive() Ne garder que des todo no cheked

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

4/27/14 44

Exemple : HTML 5 Video & Canvas

4/27/14 45

Exemple : HTML 5 Video & Canvas

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