Cours 1

Technologies Web
Architecture client-serveur
Architecture client-serveur : le
protocole HTTP
Une session HTTP consiste en une série d'émissions alternées entre un client et
un serveur. Chaque émission consiste en un chapeau, un entête et un corps de
message
Les requêtes
La requête provient du client et s'adresse au serveur
1-Le chapeau
Il contient la commande HTTP: ce que l'on demande au serveur. Typiquement:
• GET: demande de ressource. En principe, cette requête est sans effet au niveau du serveur.
• POST: transmission de données, typiquement avec la création ou la modification de données au niveau du
serveur (par exemple, mise à jour d'une base de donnée)
Par exemple:
GET /index.html HTTP/1.1

2- L'entête
L'entête est une série de paires (nom d'attribut, valeur). Pour une requête typique,
on trouve les attributs
• Host: le domaine du site internet concerné par la requête

• Referer: L'url du document d'où on vient
• User-Agent: chaine de caractère indiquant le nom du navigateur (ou de façon plus général du logiciel qui fait la requête)
• Cookie: Les cookies éventuels que le site internet avait alloués
3-Le corps du message
Il est séparé de l'entête par une ligne vide.

Pour un GET, le corps du message est vide. Pour un POST, le corps du message contient
le contenu des données que l'on envoie au serveur. Par exemple, le contenu d'un
formulaire.
Les réponses
Une réponse provient du serveur, et correspond à une requête.
1-Le chapeau
Il consiste en un code de statut HTTP. Il est sous la forme
HTTP/version code-réponse texte-réponse
Un sous-ensemble des codes et textes des réponses:

•200 OK
•301 MOVED PERMANENTLY
•308 PERMANENT REDIRECT
•400 BAD REQUEST
•401 UNAUTHORIZED
•403 FORBIDDEN
•404 NOT FOUND
•500 INTERNAL SERVER ERROR
2-L'entête
Comme pour les requêtes, l'entête contient des méta-données. Par exemple:
• Date: la date de création
• Server: le nom du programme qui fait tourner le serveur
• Last-Modified: la date de dernière modification
• Content-Type: le type MIME et l'encodage
• Content-Length: la taille du corps du message
• Set-Cookie: pour allouer des cookies
3-Le corps du message

contient les données demandées par la requête. L'encodage et le type
des données sont donnés dans l'entête.
Exemple
Par exemple, la requête suivante sur le port 80 du serveur domain.com
1-GET /index.html HTTP/1.1

2-Host: example.com
3-User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:43.0) Gecko/20100101 Firefox/43.0
4-Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
5-Accept-Language: en-US,en;q=0.5
6-Connection: keep-alive
Donne comme réponse
}
HTTP/1.1 200 OK div {
Accept-Ranges: bytes width: 600px;
Cache-Control: max-age=604800 margin: 5em auto;
Content-Type: text/html padding: 50px;
Date: Wed, 17 Feb 2016 14:50:13 GMT background-color: #fff;
Etag: "359670651" border-radius: 1em;
Expires: Wed, 24 Feb 2016 14:50:13 GMT }
Last-Modified: Fri, 09 Aug 2013 23:54:35 GMT a:link, a:visited {
Server: ECS (iad/18F0) color: #38488f;
Vary: Accept-Encoding text-decoration: none;
X-Cache: HIT }
x-ec-custom-error: 1 @media (max-width: 700px) {
Content-Length: 1270 body {
background-color: #fff;
}
<!doctype html> div {
<html> width: auto;
<head> margin: 0 auto;
<title>Example Domain</title> border-radius: 0;
padding: 1em;
}
<meta charset="utf-8" /> }
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> </style>
<meta name="viewport" content="width=device-width, initial-scale=1" /> </head>
<style type="text/css">
body {
background-color: #f0f0f2; <body>
margin: 0; <div>
padding: 0; <h1>Example Domain</h1>
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; <p>This domain is established to be used for illustrative examples in documents. You
may use this
domain in examples without prior coordination or asking for permission.</p>
<p><a href="http://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
Le Web 2.0
L’interactivité avec les utilisateurs
Au-delà de la réactivité de l’utilisateur, les

opérateurs de sites Web 2.0 offrent aux
utilisateurs de participer à l’élaboration du
Web d’aujourd’hui. Les technologies
présentées ci-après sont indispensables à
l’obtention de cette interactivité. Les
utilisateurs contribuent de cette façon à la
création de contenu
Le Web de l’utilisateur participatif

Blog
C’est un site personnel de publication, analogue à un carnet pour
des prises de notes.
Wiki
Le wiki est un site
Internet sans structure a
priori. Ce sont ses
visiteurs qui en créent le
contenu et peuvent le
modifier à volonté. Nul
besoin de compétence
technique particulière.
Messagerie instantanée
la messagerie instantanée présente une indéniable utilité professionnelle. Elle a
été popularisée dans sa version ludique par des outils tels que MSN Messenger de
Microsoft ou Yahoo Messenger.
RSS
RSS signifie « Really Simple Syndication » ou « syndication vraiment simple ».
Comment cela fonctionne ? Il s’agit d’un abonnement à des événements
d’un blog ou d’un site, dont l’utilisateur souhaite être informé à temps.
Une page Web c’est …
• Un fichier HTML est un format de fichier « texte » éditable dont les

éléments ont du sens
• Au format .html
• Peut contenir du texte, des images, des liens, des médias, etc.
• Peut être liée à une autre page via des liens
12
Un site Web c’est ...

• Un ensemble de pages liées entre elles
• Accessible en ligne depuis n'importe où
Mais pas que ...
Contenus textuels dans le fichier HTML, mais aussi images, sons,

vidéos, CSS, JavaScript, polices d'écriture, etc. tous ces fichiers
sont chargés dans le navigateur pour créer une page web.
Mettre son site en ligne
Le principe de « serveur web »
Pour mettre en ligne on fait passer ses fichiers de la machine du créateur à un serveur web
HTML : définition
• Hypertext Markup Language (HTML)
• Langage de balises qui permet de structurer des pages
• Différentes versions depuis 1989
• Aujourd’hui :
– XHTML (2000 – 2006)
– HTML5
Le W3C
• W3C : World Wide Web Consortium (1994)
– TBLee, fondateur du W3C et inventeur du HTML
– Chargé de promouvoir la compatibilité des technologies dans lesnavigateurs
– 378 entreprises membres qui peuvent faire des propositions
(Microsoft, Apple, Mozilla, Opera, Adobe, etc.)
– Proposent un validateur http://validator.w3.org/

Le WHATWG
WHATWG : Web Hypertext Application Technology

Working Group
(2004)
– Collaboration non officielle de développeurs de navigateurs
– Tentative de réponse à la lenteur des standards du W3C
– Mozilla Foundation, Opera, Apple, etc.
Générer du HTML avec un éditeur
Blocnote ou TextEdit, si vous

n’avez rien d’autre sous la main :
• Pas de coloration syntaxique
• Nécessite de connaître tout le
langage
Les éditeurs de texte plus avancés et spécialisés
• http://www.sublimetext.com/
• Éditeur spécialisé
• Auto-complétion, retour à la ligne,
colorisation syntaxique
• 30 jours essai Windows/Mac/ Linux
puis payant
D’autres éditeurs
• Coda : uniquement sur Mac (payant) http://panic.com/coda/

• Geany (Windows) gratuit http://www.geany.org/Download/Releases
• Notepad ++
• Komodo (Windows et Mac) http://www.activestate.com/komodo-ide
• Netbeans (Windows et Mac) gratuit http://netbeans.org/
Les éditeurs « WYSIWYG »
• What You See Is What You Get

• Permet de visualiser le rendu
directement
• Code parfois pas toujours propre ou
optimisé
• Exemple : Dreamweaver (payant),
Blue Griffon (gratuit)
Générer du HTML depuis un CMS
• CMS : Content Management System ou

systèmes de gestion de contenu
• Développé dans un langage de
programmation web (ex : PHP) et
fait appel à une base de données (ex : SQL)
• Éditeurs « visuels »
sans avoir besoin de notions de code
• Ex : WordPress, Drupal,
Joomla, Prestashop, etc.
Générer du HTML depuis un langage côté serveur
• Possibilité de générer « automatiquement » du HTML depuis un

langage de programmation côté serveur
• PHP, Python, Ruby, etc.

La syntaxe HTML : balises,
éléments et attributs
Le principe de balise
• Les balises structurent le contenu de la page (texte, images, etc.)

• Chaque balise a un rôle et donne du sens au contenu présenté
On peut imbriquer les balises (on y reviendra) les unes dans les
Autres
<p> Hooo un bloc !! </p>

<div>
<p> Et un joli paragraphe </p>
<p> Et autre un joli paragraphe </p>
</div>
• Touche < du clavier pour ouvrir : <

• Touche maj + < pour fermer : >
• Le nom des balises est prédéfini dans les spécifications HTML, on
ne peut donc PAS en inventer !
• Quelques exemples : <html>, <body>, <img>, <p>, <div>, <a>, etc.
• Par convention et pour faciliter la lecture du code, toute balise

ouverte doit être fermée (sauf exception).
• Certaines balises bien particulières n’ont pas besoin d’être fermées,
on les dit « auto-fermantes »
Attributs et valeurs
Certaines balises peuvent être complétées par des attributs

précisant certains paramètres (l'adresse des liens, source d'une
image à afficher, etc.)
• Une balise peut contenir plusieurs attributs
Attributs et valeurs
! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

en « inventer »
! On peut les mettre entre simple quote, double quote ou rien. Par
convention nous choisissons les doubles quotes « »
<div id="kittens"> // <div id=kittens>

! Les attributs sont toujours dans la balise ouvrante
Doctype, html, body : structure
d'un document valide
Structure d’un document HTML simplifié
Décomposons balise par balise !

La notion de doctype
Permet au navigateur de savoir quelle version de HTML (ou

XHTML) est utilisée sur la page
• Obligatoire pour valider une page (validateur W3C)
• Pas de doctype : le navigateur fait ce qu’il peut
avec ce qu’il trouve, en mode rétro-compatibilité => peut expliquer
certains bugs sur IE
<!doctype html>
Le doctype HTML5
Plus simple, plus concis

• «Future proof» : autant commencer aujourd’hui !
• <!doctype html>
• Vous pourrez utiliser des éléments HTML5 qui sont finalisés
La balise <html>
• Tout document HTML commence par la balise <html> qui se ferme

en fin de document : </html>
• La balise <html> contient nécessairement deux balises définissant
l'entête (<head>) et le corps (<body>) du document.
L'attribut lang
Permet de spécifier la langue de traitement du document global

– Indexation dans la bonne langue par les moteurs de recherche
– Synthèse vocale
– Vérification orthographique des formulaires
L'attribut lang
<html lang="fr">
La balise <head>
Détermine l’entête du document et contient les méta-informations
On y ajoutera également les appels pour les feuilles de style CSS et

certains JavaScripts
• On peut y trouver des balises « meta » parmi lesquelles
– <meta charset="UTF-8"/> : permet de définir l’encodage de caractère
de la page (à mettre directement sous le <head>)
La balise <title>
• On y trouve la balise <title> qui sera le titre du document

– Sert en référencement (repris dans les résultats de recherche)
– Affichée dans l’onglet du navigateur

La balise <body>
! Délimite le contenu de la page

! Le contenu est constitué de texte, images et autres éléments qui
seront affichés
<body>
Contenu de la page
</body>
Les tableaux HTML
Les tableaux, introduction
Un tableau sert à organiser des informations structurées sous forme tabulaire
• Il se compose de lignes organisées elles-mêmes en cellules

Créer un tableau : <table>
La balise <table> </table> permet d’indiquer le début et la fin
du tableau.
! La balise <tr> caractérise une nouvelle ligne
! La balise <td> marque le contenu d’une cellule dans une ligne
Exemple de tableau simple
Ajouter une entête avec
<th>
! <th> peut remplacer <td>

pour créer une cellule
d’entête au tableau
! Par défaut affiché en gras
et centré dans les navigateurs

Ajouter un titre au
tableau
! On utilise <caption> pour

donner un titre au tableau
! La balise se place au
début du tableau
Les formulaires
Le formulaire sert à récupérer des données que l’utilisateur va
entrer et les envoyer au serveur pour un traitement (en PHP par
exemple) : login, formulaire de contact et même le chat de
Facebook
La balise <form>
Balise principale du formulaire

• Deux méthodes :
– method="get" : limitée à 255 caractères, informations passées dans la
barre d’adresse
– method="post" : envoie les données dans le corps de la requête sans
passer par la barre d’adresse, c’est la méthode la plus utilisée
• Action : l’adresse du fichier ou programme qui va traiter les données
Exemple de la balise form en action
La zone de texte monoligne <input>
La balise input est auto-fermante

! Ne génère pas de retour à la ligne.
! Il faut lui donner un nom avec l’attribut « name » pour que l’on
puisse récupérer sa valeur (éviter les espaces dans le name). Le
nom n’est PAS visible sur la page
Le label
! Son rôle est de décrire à un être humain la fonction du

champ (puisque name est invisible)
! Ajouter un for="nom" au label
! Ajouter id="nom" au champ

L'attribut « value »
! value=" " : donne une valeur par défaut au champ

! Vide (ou inexistant) si on n'a pas de données
récupérées dans la
base de donnée du site
Zone de texte multiligne <textarea>
Une balise qu’il faut ouvrir et fermer

• Pas de retour à la ligne automatique

Cours 1

Transféré par

Informations du document

Titre original

Copyright

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 :

Cours 1

Titre original :

Transféré par

Droits d'auteur :

Technologies Web

GET /index.html HTTP/1.1

• Host: le domaine du site internet concerné par la requête

3-Le corps du message

Il est séparé de l'entête par une ligne vide.

Une réponse provient du serveur, et correspond à une requête.

HTTP/version code-réponse texte-réponse

Un sous-ensemble des codes et textes des réponses:

3-Le corps du message

1-GET /index.html HTTP/1.1

L’interactivité avec les utilisateurs

Au-delà de la réactivité de l’utilisateur, les

Le Web de l’utilisateur participatif

• Un fichier HTML est un format de fichier « texte » éditable dont les

Un site Web c’est ...

Contenus textuels dans le fichier HTML, mais aussi images, sons,

• W3C : World Wide Web Consortium (1994)

– TBLee, fondateur du W3C et inventeur du HTML

– Chargé de promouvoir la compatibilité des technologies dans lesnavigateurs

– 378 entreprises membres qui peuvent faire des propositions

(Microsoft, Apple, Mozilla, Opera, Adobe, etc.)

– Proposent un validateur http://validator.w3.org/

WHATWG : Web Hypertext Application Technology

Blocnote ou TextEdit, si vous

• Coda : uniquement sur Mac (payant) http://panic.com/coda/

• What You See Is What You Get

• CMS : Content Management System ou

• Possibilité de générer « automatiquement » du HTML depuis un

• PHP, Python, Ruby, etc.

• Les balises structurent le contenu de la page (texte, images, etc.)

<p> Hooo un bloc !! </p>

• Touche < du clavier pour ouvrir : <

• Par convention et pour faciliter la lecture du code, toute balise

Certaines balises peuvent être complétées par des attributs

! Les attributs sont des éléments prédéfinis dans le HTML on ne peut

<div id="kittens"> // <div id=kittens>

Décomposons balise par balise !

Permet au navigateur de savoir quelle version de HTML (ou

Plus simple, plus concis

• Tout document HTML commence par la balise <html> qui se ferme

Permet de spécifier la langue de traitement du document global

Détermine l’entête du document et contient les méta-informations

On y ajoutera également les appels pour les feuilles de style CSS et

• On y trouve la balise <title> qui sera le titre du document

– Affichée dans l’onglet du navigateur

! Délimite le contenu de la page

Un tableau sert à organiser des informations structurées sous forme tabulaire

• Il se compose de lignes organisées elles-mêmes en cellules

La balise <table> </table> permet d’indiquer le début et la fin

! <th> peut remplacer <td>

et centré dans les navigateurs

! On utilise <caption> pour

Balise principale du formulaire

La balise input est auto-fermante

! Son rôle est de décrire à un être humain la fonction du

! Ajouter id="nom" au champ

! value=" " : donne une valeur par défaut au champ

Une balise qu’il faut ouvrir et fermer

Centres d'intérêt liés

Vous aimerez peut-être aussi