Programmation Internet Cours 4

Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23

Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web 3.2 Adressage des documents Web 3.3 HTML, le format des documents 2 / 23

Bref historique d Internet (1/2) 1959-1968 : ARPA. Le ministère de la défense Américain crée un réseau de quelques machines capable de resister à une attaque 1969 : ARPANET. Interconnexion des ordinateurs centraux des grandes universités américaines. Première utilisation du concept de paquet d information 1970-1982 : Interconnexion avec la Norvège et le Royaume-Uni. 1982 : Passage au protocole TCP/IP. Naissance de l Internet actuel 3 / 23

Bref historique d Internet (2/2) 1986 : Autoroutes de l information. Des super-ordinateurs sont utilisés (principalement aux US) pour accélérer le débit d Internet. 1987-1992 : Expansion, apparition des premiers fournisseurs d accès. Les entreprises se connectent utilisation du concept de paquet d information 1993-2000 : Avènement du Web. Démocratisation du haut-débit (vers 2000 pour la France) 2000-présent : Explosion des services en lignes, arrivée des réseaux sociaux, internet mobile 4 / 23

Internet Ensemble des logiciels et protocoles basés sur l architecture TCP/IP. Modèle client/serveur Un serveur fournit un service : courriel transfert de fichier (ftp) connexion à distance (telnet, ssh) web (http) Plusieurs services peuvent tourner sur la même machine (serveur). Un port (identifiant numérique) est associé à chaque service. Sur Internet, un service est donc identifié par : l adresse IP de la machine sur laquelle le service tourne le numéro de port associé à ce service 5 / 23

Exemples de services Service Protocole Port Description ftp File Transfer Protocol 20, 21 Transfert de fichiers telnet NVT : Network Virtual 23 Shell à distance Terminal ssh Secure Shell 22 Shell à distance crypté mail SMTP : Simple Mail 25 Envoi de mail Transfer Protocol pop Post Office Protocol 110 Récupération de mail imap Internet Message Access 143 Récupération de mail Protocol nslookup DNS : Domain Name 42 Serveur de noms System http Hyper Text Transfer Protocol 80 Web 6 / 23

World Wide Web (1/2) Service de distribution de pages hypertexte Hypertexte texte contenant des références immédiatements accessibles (nommées pointeurs ou liens hypertextes) les pages web sont décrite dans le langage HTML (HyperText Markup Language) architecture client serveur : page stockées sur le serveur envoyées au client (navigateur web) qui en assure le rendu utilise le protocole HTTP pour les échanges entre le client et le serveur 7 / 23

World Wide Web (2/2) Concepts clé : URL : localisation d une page web («l adresse de la page») HTTP : protocole de communication entre un client et un serveur web HTML : language de description des pages web Évolution récente (Web 2.0 puis applications pour mobiles) : ajout d images, de son et de vidéos en streaming ajout de contenu interactif (grâce au langage Javascript) uniformisation : des extensions ad-hoc sont regroupées dans la dernière version : HTML5 8 / 23

Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.2 Fonctionnement du Web 3.2 Adressage des documents Web 3.3 HTML, le format des documents 9 / 23

Fonctionnement du Web Navigateur Web Client (machine) HTML CSS Javascript... HTTP Requêtes Internet Documents (pages, images,...) Serveur Web (programme) Documents Serveur (machine) PHP Java... 10 / 23

Côté client Le navigateur : Analyse l URL demandée Obtient l adresse IP auprès du DNS Établit une connexion avec le site Envoie une requête HTTP au serveur Récupère la page envoyée par le serveur Scanne la page et récupère les éléments référencés : images, sons,... Effectue le traitement du code client (javascript) Met en forme le contenu et l affiche dans la fenêtre 11 / 23

Côté serveur (programme) Un listener (thread particulier) attend les connexions sur le port 80 Pour chaque requête, création d un nouveau thread de traîtement Le thread de traîtement vérifie la validité de la requête : document existe? client est autorisé à accéder au document?... Répond à la requête : Éxecute le traîtement coté serveur pour générer le HTML (si la page n est pas statique) Envoie le document HTML au client 12 / 23

Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.2 Fonctionnement du Web 3.3 Adressage des documents Web 3.3 HTML, le format des documents 13 / 23

Adressage des documents Web URL : Uniform Resource Locator identifie un document sur Internet Format en trois parties : protocole (comment?) adresse (où?) document (quoi?) Syntaxe (simplifiée) : Exemple : protocole://adresse/document http://www.lri.fr/ kn/teach_fr.html 14 / 23

Adressage des documents Web On peut aussi préciser un numéro de port, des paramètres et un emplacement : protocole://adresse:port/document?p1=v1&p2=v2#empl Exemple : http://youtube.com:80/results?search_query=tbbt#search-results Le serveur peut utiliser les paramètres passés par le client dans l URL pour calculer une page dynamique (changer la chaîne tbbt ci-dessus par autre chose, et constater que le serveur renvoie une page différente) 15 / 23

Adressage des documents Web La racine d un site web (ex : http://www.lri.fr/) correspond à un répertoire sur le disque du serveur (ex : /var/www). Le fichier : Se trouve à l emplacement : http://www.lri.fr/index.html /var/www/index.html sur le disque. Le serveur web peut aussi effectuer des réécritures d adresses : devient : http://www.lri.fr/ kn/index.html /home/kn/public_html/index.html 16 / 23

Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.2 Fonctionnement du Web 3.3 Adressage des documents Web 3.4 HTML, le format des documents 17 / 23

HTML HyperText Markup Language : language de mise en forme de documents hypertextes (text + liens vers d autres documents). Développé au CERN en 1989 : 1991 : premier navigateur en mode texte 1993 : premier navigateur graphique (moasic) développé au NCSA (National Center for Supercomputing Application) 18 / 23

HTML Appartient à la catégorie des documents semi-structurés La structure est donnée par des balises : Exemple texte <b>en gras</b>. <a href="http://www.u-psud.fr"> Le site de l Université </a> <ul> <li>premièrement</li> <li>deuxièmement</li> </ul> Rendu texte en gras. Le site de l Université premièrement deuxièmement On dit que <toto> est une balise ouvrante et </toto> une balise fermante. Une balise sans contenu (<toto></toto>) peut être raccourcie en <toto/>. 19 / 23

Historique d HTML 1973 : GML, Generalised Markup Language développé chez IBM. Introduction de la notion de balise. 1980 : SGML, Standardised GML, adopté par l ISO 1989 : HTML, basé sur SGML. Plusieurs entreprises (microsoft, netscape,...) interprètent le standard de manière différente 1996 : XML, extensible Markup Language norme pour les documents semi-structurés (SGML simplifié) 2000 : XHTML, version de HTML suivant les conventions XML 20 / 23

XHTML vs HTML On utilisera XHTML dans le cours. Différences avec HTML : les balises sont bien parenthésées (<a> <c> </c> </b> est interdit) les balises sont en minuscules Les avantages sont les suivants : HTML autorise de ne pas fermer les balises, les mélanges de majuscules et minuscules,... Les navigateurs corrigent ces choses de manière différentes Structuré comme un programme informatique, (les balises ouvrantes et fermantes correspondent aux { et }), plus facile à débugguer 21 / 23

Rôle d (X)HTML Séparer la structure du document de son rendu. La structure donne une sémantique au document : ceci est un titre ceci est un paragraphe ceci est un ensemble de caractères importants Celà permet au navigateur d assurer le rendu en fonction de la sémantique. Il existe différents types de rendus : graphique interactif (Chrome, Opera, Firefox, Internet Explorer,...) texte interactif (lynx, navigateur adapté aux mal-voyants,...) statique (par ex : sur les livres electroniques) rendu sur papier graphique pour petit écran (PDA, mobiles) 22 / 23

Exemple de document (liste des balises donnée sur la feuille de TD 4!) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>un titre</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1>titre de section</h1> <p> premier paragraphe de texte. On met un <a href="http://www.lri.fr">lien</a> ici. </p> <!-- on peut aussi mettre des commentaires --> </body> </html> 23 / 23