1 <?xml version="1.0" encoding="utf-8" ?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
5 <html xmlns="http://www.w3.org/1999/xhtml" >
7 <title>Web et HTML</title>
9 <meta http-equiv="Content-Type"
10 content="text/html; charset=utf-8" />
11 <meta name="copyright"
12 content="Copyright © 2013 Kim Nguyễn" />
15 <script src="../jquery-1.9.1.min.js" type="text/javascript" ></script>
16 <!-- Load the library -->
17 <script src="../simpleWebSlides.js" type="text/javascript" ></script>
19 <link rel="stylesheet" href="../simpleWebSlides.css" type="text/css" media="all" />
20 <!-- Load a custom Theme, the class-element marks this style-sheet
21 a "theme" that can be swtiched dynamicaly -->
22 <link class="sws-theme" rel="stylesheet" title="U-Psud style" href="../themes/uPsud.css" type="text/css" />
24 <!-- Customize some templates and initialize -->
26 <script type="text/javascript">
27 SWS.Config['sws-slide-change'] = SWS.Effects.slideChangeFadeOutIn;
28 SWS.Config['sws-object-deactivate'] = SWS.Effects.objectDeactivateFadeOut;
29 SWS.Config['sws-object-activate'] = SWS.Effects.objectActivateFadeIn;
31 //Ensures that we load SWS at the very end, after MathJax has
34 $(window).load(SWS.Presentation.init);
38 <a class="sws-previous" href="unix_prog_web_03.xhtml" />
39 <div class="sws-slide sws-cover sws-option-nofooter">
40 <h1>Unix et Programmation Web</h1>
42 <a href="mailto:kn@lri.fr">kn@lri.fr</a><br/>
43 <a href="http://www.lri.fr/~kn/">http://www.lri.fr/~kn</a>
45 <h1>Internet et ses services</h1>
46 <div class="sws-slide">
47 <h1> Bref historique d'Internet (1/2)</h1>
50 <td style="width:6.5em;">1959-1968</td> <td>ARPA
51 (<i>Advanced Research Project Agency</i>) crée un réseau
52 de quelques machines capable de résister à une attaque.</td>
55 <td>1969</td> <td>ARPANET. Interconnexion des ordinateurs
56 centraux des grandes universités et institutions
57 américaines. Première utilisation du concept de paquet d'information.</td>
61 <td>Interconnexion avec la Norvège et le Royaume-Uni.
66 <td> Passage au protocole TCP/IP. Naissance de l'Internet actuel.</td>
70 <div class="sws-slide">
71 <h1> Bref historique d'Internet (2/2)</h1>
74 <td style="width:6.7em;">1986</td> <td>« Autoroutes de
75 l'information ». Des super-ordinateurs et les premières
76 connexions à fibres optiques sont utilisées pour accélérer
77 le débit d'Internet.</td>
80 <td>1987-1992</td> <td>Apparition des premiers fournisseurs
81 d'accès. Les entreprises se connectent.</td>
85 <td>Avènement du Web. Démocratisation du haut-débit (vers
91 <td> Explosion des services en ligne, arrivée des réseaux
92 sociaux, internet mobile, <i>Cloud</i> (stockage et calcul
93 mutualisés accessible depuis internet).</td>
98 <div class="sws-slide">
101 <li> Ensemble de logiciels et protocoles basés sur <em>TCP/IP</em>
103 <li> Modèle Client/Serveur</li>
104 <li> Un serveur fournit un service:
107 <li>transfert de fichier (ftp)</li>
108 <li>connexion à distance (ssh)</li>
112 <li> Plusieurs services peuvent être actifs sur la même
113 machine (serveur). Un <em>port (identifiant numérique)</em>
114 est associé à chaque service. Sur Internet, un service est
117 <li>L'adresse IP de la machine sur lequel il fonctionne</li>
118 <li>Le numéro de port sur lequel le programme attend les
124 <div class="sws-slide">
125 <h1> Exemples de services </h1>
126 <table class="simple" style="width:100%">
127 <tr><th style="width:10%">Service</th>
128 <th style="width:40%">Protocole</th>
129 <th style="width:5%">Port</th>
130 <th style="width:45%;">Description</th>
133 <td>ftp</td> <td >File Transfer Protocol</td> <td>
134 20,21 </td> <td>Transfert de fichiers</td> </tr>
135 <tr> <td>telnet</td> <td>Network Virtual
136 Terminal</td> <td>23</td> <td>Shell à distance</td></tr>
137 <tr> <td>ssh</td> <td>Secure Shell</td> <td>22</td><td>Shell à
138 distance crypté</td></tr>
139 <tr> <td>mail</td><td>Simple Mail Transfer
140 Protocol</td> <td>25</td> <td>Envoi de mail</td></tr>
141 <tr><td>pop</td> <td>Post Office
142 Protocol</td> <td>110</td><td>Récupération de mail</td></tr>
143 <tr><td>imap</td> <td>Internet Message Access
144 Protocol</td> <td>143</td><td>Synchronisation de mails</td></tr>
145 <tr><td>nslookup</td> <td>Domain Name
146 System</td> <td>42</td> <td>Serveur de noms</td></tr>
147 <tr ><td><em>http</em></td> <td>Hyper Text Transfer Protocole</td><td>80</td><td>Web</td></tr>
151 <div class="sws-slide">
152 <h1> World Wide Web (1/2)</h1>
154 <li>Service de distribution de page <em>hypertexte</em></li>
155 <li>Une page <em>hypertexte</em> contient des références
156 immédiatement accessibles à d'autres pages (pointeurs
157 ou <em>liens hypertextes</em>)</li>
158 <li>Les pages sont décrites dans le
159 langage <em>HTML</em> (HyperText Markup Language) </li>
160 <li>Architecture client/serveur:
162 <li>Les pages sont stockées sur le serveur</li>
163 <li>Les pages sont envoyées au client (navigateur Web) qui
164 en assure le rendu</li>
167 <li>Utilise le protocole <em>HTTP</em> pour les échanges entre
168 le client et le serveur</li>
172 <div class="sws-slide">
173 <h1> World Wide Web (2/2)</h1>
176 <tr><td>URL</td> <td>localisation d'une page Web (« adresse de
177 la page »)</td> </tr>
178 <tr><td>HTTP</td> <td>protocole de communication entre un
179 client et un serveur Web</td> </tr>
180 <tr><td>HTML</td> <td>langage de description des pages
183 <p>Évolutions récentes (Web 2.0, internet mobile, <i>Cloud</i>, …)</p>
185 <li>Standardisation du contenu multimédia (images, vidéos et
186 sons en <i>streaming</i>)</li>
187 <li>Contenu interactif avancé (stockage de fichier coté
188 client, rendu 3D, …)</li>
189 <li>Uniformisation de nombreuses extensions <i>ad-hoc</i>: HTML5</li>
194 <h1> Fonctionnement du Web </h1>
195 <div class="sws-slide">
196 <h1>Fonctionnement du Web</h1>
197 <div style="text-align:center;">
198 <img style="width:90%;height:50%;" src="cours_4.svg"
199 type="image/svg+xml" />
204 <div class="sws-slide">
206 <p>Le navigateur :</p>
208 <li>Analyse l'URL demandée</li>
209 <li>Obtient l'adresse IP auprès du serveur DNS</li>
210 <li>Établit une connexion (potentiellement sécurisée) avec le serveur</li>
211 <li>Envoie une <em>requête HTTP</em> au serveur</li>
212 <li>Récupère la page envoyée par le serveur dans
213 sa <em>réponse</em></li>
214 <li>Analyse la page et récupère les éléments référencés :
216 <li>Effectue le traitement du code client</li>
217 <li>Met en forme le contenu et l'affiche dans la fenêtre</li>
221 <div class="sws-slide">
222 <h1>Côté serveur</h1>
224 <li>Un <i>listener</i> (<i>thread</i> particulier) attend les
225 connexions sur un port par défaut (80 dans le cas de HTTP)</li>
226 <li>À chaque nouvelle connexion, le <i>listener</i> crée
227 un <i>thread</i> de traitement et se remet en attente
229 <li>Le <i>thread</i> de traitement vérifie la validité de la
232 <li>le document demandé existe ?
234 <li>le client est autorisé à accéder au document ?
239 <li>Le <i>thread</i> de traitement répond à la requête :
241 <li>Exécution de code côté serveur, récupération de
242 données dans une BD, …
244 <li>Envoi de la page au client
251 <h1> Adressage des documents Web </h1>
252 <div class="sws-slide">
253 <h1>Adressage des documents Web (1/3)</h1>
255 <tr><td>URL</td><td> <i>Uniform Resource Locator</i>
256 identifie un document sur internet</td></tr>
258 <p>Une URL se décompose en 3 partie</p>
259 <ul><li><em>protocole</em> (comment ?)</li>
260 <li><span style="color:orange;">adresse</span> (où ?)</li>
261 <li><span style="color:blue;">document</span> (quoi ?)</li>
263 <p>Syntaxe (simplifiée) :</p>
264 <code> <em>protocole</em>://<span style="color:orange">adresse</span>/<span style="color:blue;">document</span></code>
266 <code> <em>http</em>://<span style="color:orange">www.lri.fr</span>/<span style="color:blue;">~kn/teach_fr.html</span></code>
269 <div class="sws-slide">
270 <h1>Adressage des documents Web (2/3)</h1>
271 <p>On peut aussi préciser <span style="color:purple;">un numéro
272 de port</span>, des <span style="color:black;">paramètres</span>
273 et un <span style="color:red;">emplacement</span> :
275 <code> <em>protocole</em>://<span style="color:orange">adresse</span>:<span style="color:purple">port</span>/<span style="color:blue;">document</span>?<span style="color:black;">p1=v1</span>&<span style="color:black;">p2=v2</span>#<span style="color:red">empl</span></code>
276 <p class="sws-pause" >Exemple :</p>
277 <code> <a style="color:gray" href="http://www.youtube.com:80/results?search_query=tbbt#search-results"><em>http</em>://<span style="color:orange">www.youtube.com</span>:<span style="color:purple">80</span>/<span style="color:blue;">results</span>?<span style="color:black;">search_query=tbbt</span>#<span style="color:red">search-results</span></a></code>
278 <p>Le serveur utilise les paramètres passés par le client dans
279 l'URL pour <i>calculer</i> le contenu de la page (changer la
280 chaîne « <code>tbbt</code> » ci-dessus et essayer)</p>
282 <div class="sws-slide">
283 <h1>Adressage des documents Web (3/3)</h1>
285 La <em>racine</em> d'un site Web
286 (ex: <em><code>http://www.lri.fr/</code></em>) correspond
287 à un répertoire sur le disque du serveur
288 (ex: <em><code>/var/www</code></em>). Le fichier</p>
289 <code> http://www.lri.fr/index.html</code>
290 <p>se trouve à l'emplacement</p>
291 <code> /var/www/index.html</code>
292 <p>Le serveur Web peut aussi effectuer des <em>réécritures
293 d'adresses</em> :</p>
294 <code> http://www.lri.fr/~kn/index.html</code>
296 <code> /home/kn/public_html/index.html</code>
299 <h1>Le protocole HTTP</h1>
300 <div class="sws-slide">
301 <h1>Caractéristiques du protocole HTTP</h1>
303 <li>Sans connexion permanente:
305 <li>Le client se connecte au serveur, envoie sa requête,
307 <li>Le serveur se connecte au client, envoie sa réponse,
311 <li>Indépendant du contenu : permet d'envoyer des documents
312 (hyper) texte, du son, des images, …</li>
313 <li>Sans <em>état</em>: chaque paire requête/réponse est
314 indépendante (le serveur ne maintient pas d'information sur le
315 client entre les requêtes)</li>
316 <li>Protocole en mode <em>texte</em></li>
319 <div class="sws-slide">
320 <h1>Format des messages HTTP</h1>
321 <p>Les messages ont la forme suivante</p>
322 <ul><li>Ligne initiale CR LF</li>
323 <li>zéro ou plusieurs lignes d'option CR LF</li>
325 <li>Corp du message (document envoyé, paramètres de la
328 <ul><li><em>Requête</em> la première ligne contient un nom
329 de <em>méthode</em> (GET, POST, HEAD, …), le paramètre de la
330 méthode et la version du protocole</li>
331 <li><em>Réponse</em> la version du protocole, le code de la
332 réponse (200, 404, 403, …) et un message informatif
336 <div class="sws-slide">
339 <h1>HTML, le format des documents</h1>
340 <div class="sws-slide">
343 <em>HyperText Markup Language</em> : langage de mise en forme
344 de documents hypertextes (texte + liens vers d'autres
345 documents). Développé au CERN en 1989.<br/>
346 <em>1991</em> : premier navigateur en mode texte<br/>
347 <em>1993</em> : premier navigateur graphique (mosaic)
348 développé au NCSA (National Center for Supercomputing
352 <div class="sws-slide">
353 <h1>Document HTML</h1>
354 <ul><li> est un document <em>semi-structuré</em></li>
355 <li> dont la structure est donnée par
356 des <em>balises</em></li>
359 <table class="btable simple" style="width:90%;margin-left:5%">
361 <tr><th style="width:65%;">Exemple</th> <th>Rendu par défaut</th></tr>
363 <tr><td ><tt><![CDATA[Un texte <b>en gras</b>
364 ]]></tt></td><td style="font-family:serif;color:black;">Un
365 texte <b>en gras</b></td></tr>
366 <tr><td ><code><![CDATA[<a href="http://www.u-psud.fr">Un lien</a> ]]></code></td>
367 <td><a style="color:blue;text-decoration:underline;font-family:serif;"
368 href="http://www.u-psud.fr">Un lien</a></td></tr>
369 <tr><td><code><![CDATA[<ul >
370 <li>Premièrement</li>
371 <li>Deuxièmement</li>
372 </ul> ]]></code></td> <td><ul style="font-family:serif;color:black;">
373 <li>Premièrement</li>
374 <li>Deuxièmement</li>
379 <p>On dit que <em><tt><![CDATA[<toto>]]></tt></em> est une balise <em>
380 ouvrante</em> et <em><tt><![CDATA[</toto>]]></tt></em> une
381 balise <em>fermante</em>. On peut
382 écrire <em><tt><![CDATA[<toto/>]]></tt></em> comme raccourci pour
383 <tt><![CDATA[<toto></toto>]]></tt>.
386 <div class="sws-slide">
387 <h1>Historique du langage HTML</h1>
389 <tr><td style="width:3em;">1973</td> <td>GML, Generalised Markup Language développé chez
390 IBM. Introduction de la notion de balise.</td></tr>
391 <tr><td>1980</td><td> SGML, Standardised GML, adopté par l'ISO</td></tr>
392 <tr><td>1989</td><td> HTML, basé sur SGML. Plusieurs entreprises (microsoft,
393 netscape, ... ) interprètent le standard de manière
395 <tr><td>1996</td> <td>XML, eXtensible Markup Language norme pour les
396 documents semi-structurés (SGML simplifié)</td></tr>
397 <tr><td>2000</td><td> XHTML, version de HTML suivant les conventions
399 <tr><td>2008</td><td> Première proposition pour le nouveau standard,
401 <tr><td>2014</td><td>Standardisation de HTML5</td></tr>
405 <div class="sws-slide">
406 <h1>XHTML <i>vs</i> HTML</h1>
407 <p>On utilise XHTML dans le cours. Différences avec HTML:</p>
410 Les balises sont <em>bien parenthésées</em>
411 (<tt><![CDATA[<a> <c> </c> ]]> <span style="color:red"></b></span></tt> est interdit)
413 <li>Les balises sont en minuscules</li>
415 <p>Les avantages sont les suivants</p>
416 <ul><li>HTML autorise les mélanges majuscule/minuscule, de ne
417 pas fermer certaines balise … Les navigateurs corrigent ces
418 erreurs de manières <em>différentes</em></li>
419 <li>Le document est <em>structuré</em> comme un programme
420 informatique (les balises ouvrantes/fermantes correspondent à
421 { et }). Plus simple à débugger.</li>
424 <div class="sws-slide">
425 <h1>Rôle d'(X)HTML</h1>
426 <p>Séparer la <em>structure</em> du document de
427 son <em>rendu</em>. La structure donne une <em>sémantique</em> au
430 <li>ceci est un titre</li>
431 <li>ceci est un paragraphe</li>
432 <li>ceci est un ensemble de caractères importants</li>
434 <p>Cela permet au navigateur d'assurer un rendu en fonction de la
435 sémantique. Il existe différents types de rendus:</p>
437 <li>graphique interactif (Chrome, Firefox, Internet Explorer,
439 <li>texte interactif (Lynx, navigateur en mode texte)</li>
440 <li>graphique statique (par ex: sur livre électronique)</li>
441 <li>rendu sur papier</li>
442 <li>graphique pour petit écran (terminal mobile)</li>
445 <div class="sws-slide">
446 <h1>Exemple de document</h1>
447 <p style="text-align:center;font-size:smaller;">(liste des balises
448 données sur la feuille de TD 4!)</p>
449 <div style="margin-left:10%;">
450 <code style="font-size:smaller;"><![CDATA[ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
451 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
452 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
454 <title>Un titre</title>
455 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
458 <h1>Titre de section</h1>
459 <p> premier paragraphe de texte. On met
460 un <a href="http://www.lri.fr">lien</a> ici.
462 <!-- on peut aussi mettre des commentaires -->
467 <div class="sws-slide">
468 <h1>Structure d'un document XHTML</h1>
469 <p>Pour être <i>valide</i> un document XHTML contient <a>au
470 moins</a> les balises suivantes : </p>
471 <ul> <li>Une balise <tt>html</tt> qui est la <a>racine</a> (elle
472 englobe toutes les autres balises). La balise <tt>html</tt>
473 contient deux balises filles: <tt>head</tt> et <tt>body</tt></li>
474 <li>La balise <tt>head</tt> représente l'en-tête du document.
475 Elle peut contenir diverses informations (feuilles de styles,
476 titre, encodage de caractères, …). La seule
477 balise <a>obligatoire</a> dans <tt>head</tt> est le titre
478 (<tt>title</tt>). C'est le texte qui est affiché dans la barre
479 de fenêtre du navigateur ou dans l'onglet.
481 <li>la balise <tt>body</tt> représente le contenu de la page. On y
482 trouve diverses balises (<tt>div</tt>, <tt>p</tt>, <tt>table</tt>,
483 …) qui formattent le contenu de la page</li>
486 <h1>Encodage des caractères (UTF-8) (digression)</h1>
487 <div class="sws-slide">
488 <h1>Représentation des textes</h1>
489 <p>Avant de représenter des documents complexes, on s'intéresse
490 aux textes (sans structure particulière)</p>
491 <p class="sws-pause">Problématique: comment représenter du texte
493 <p>Exemple de texte réaliste:<br/>
494 <tt>"</tt> و عليكم السلام,Здравей,¡Hola!, 你好,Góðan daginn,…
498 <div class="sws-slide">
499 <h1>Historiquement…</h1>
500 <p>Encodage 1 caractère = 1 octet (8 bits) : </p>
501 <ul><li>Encodage ASCII sur 7 bits (128 caractères)</li>
502 <li>ASCII étendu 8 bits (256 caractères, dont 128 de «
504 <li>Latin 1 : ASCII 7 bits + 128 caractères « ouest-européens »
505 (lettres accentuées française, italienne, …)</li>
506 <li>Latin 2 : ASCII 7 bits + 128 caractères « est-européens »
507 (Serbe, Hongrois, Croate, Tchèque, …)</li>
508 <li>Latin 3 : ASCII 7 bits + 128 caractères turques, maltais,
510 <li>Latin 4 : ASCII 7 bits + 128 caractères islandais,
512 <li class="sws-pause"> … </li>
513 <li >Latin 15 : Latin 1 avec 4 caractères « inutiles »
514 remplacés (par exemple pour « € » à la place de « ¤ »)</li>
517 <div class="sws-slide">
518 <h1>… et pendant ce temps là, ailleur dans le monde </h1>
519 <p>Encodage multi-octets:</p>
521 <li>Encodages spécifiques pour le Chinois (Big5, GB, …)</li>
522 <li>Encodages spécifiques pour le Japonais (Shift-JIS, EUC, …)</li>
524 <p>Impossibilité de mettre plusieurs « alphabets » dans un même
526 <p>Chaque logiciel « interprétait » les séquences d'octet de
527 manière prédéfinie</p>
529 <div class="sws-slide">
531 <p>Universal (Character Set) Transformation Format 8 bit</p>
532 <ul><li>Encodage à taille variable « universel » (contient tous
533 les alphabets connus)</li>
534 <li>Un organisme (ISO) donne un code à chaque symbole</li>
535 <li>Compatible avec ASCII 7 bits</li>
538 <table class="withborder" style="position:relative;left:8%;">
539 <tr ><td>Nombre d'octets</td><td>Octet 1</td><td>Octet
540 2</td><td>Octet 3</td><td>Octet 4</td><td>Octet 5</td><td>Octet 6</td></tr>
541 <tr ><td>1</td><td><tt>0xxxxxxx</tt></td><td></td><td></td><td></td><td></td><td></td></tr>
543 <tr ><td>2</td><td><tt>110xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td><td></td></tr>
544 <tr ><td>3</td><td><tt>1110xxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td><td></td></tr>
545 <tr ><td>4</td><td><tt>11110xxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td><td></td></tr>
547 <tr ><td>5</td><td><tt>111110xxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td></td></tr>
548 <tr ><td>6</td><td><tt>1111110xx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td><td><tt>10xxxxxx</tt></td></tr>
552 <div class="sws-slide">
554 <p><tt style="font-size:200%">A</tt> ⟶ 65<sub>10</sub>
555 ⟶ 0100 1010<sub>2</sub> (représenté sur un
558 <p><tt style="font-size:200%">ễ</tt> ⟶ 7877<sub>10</sub>
559 ⟶ 0001 1110 1100 0101<sub>2</sub> (représenté
561 <s>1110</s><em>0001</em> <s>10</s><em>11 10
562 11</em> <s>10</s><em>00 0101</em>≡ 225 187 133
564 <p><tt style="font-size:200%">🐵</tt>
565 ⟶ 128053<sub>10</sub> ⟶ …
566 ≡ 240 237 220 181</p>
568 <ul><li>compatible ASCII 7 bits (d'anciens documents texte en
569 anglais sont toujours lisibles)</li>
570 <li>pas d'espace gaspillé (à l'inverse d'UTF-32 ou tous les
571 caractères font 32 bits)</li>
575 <li>Caractères à taille variable: il faut parcourir le texte
576 pour trouver le n<sup>ème</sup> caractère</li>
577 <li>Les vieux logiciels doivent être adaptés</li>