---------------------------------- CE QUI SE CACHE DERRIERE VOTRE URL ---------------------------------- Démystifier le WWW, en montrant ce qui se passe quand vous y cliquez! 1) RAPATRIER L'INFORMATION Avant que votre navigateur n'affiche une page, il lui faut la récupérer. Comment? DES CLIENTS ET DES SERVEURS Internet fonctionne selon le mode client/serveur, un serveur proposant des services, un client les "consommant". On appelle souvent "serveur" un ordinateur dont la tâche principale est de fournir des services à des clients. Un "serveur web" a ainsi pour fonction d'héberger des pages web, et de les fournir aux "clients" qui en font la demande. Mais chaque ordinateur peut-être client et serveur, selon les logiciels qui y sont installés. Un "serveur web" n'est autre qu'un logiciel, programmé pour répondre à des requêtes "http", et un "client web", un logiciel concu pour émettre des requêtes "http" et en réceptionner les réponses. Il existe plusieurs logiciels pour remplir la tâche de "serveur web", mais le plus répandu (et efficace) est sans conteste "Apache", qui fonctionne sur divers systèmes Unix. Il existe quantité de logiciels pour remplir la tâche de "client web". Les plus connus sont probablement "Internet Explorer" de Microsoft, bien que médiocre, et "Navigator" de Netscape, bien qu'obselète. Parmi les "clients web" dignes de ce nom, citons "Mozilla browser" ou "Galeon". DES PROTOCOLES Sur Internet, on trouve des ordinateurs très différents les uns des autres, tant matériellement (on trouve des PC, mais aussi des Macintosh, des Amiga, des stations SUN, etc.) que logiciellement (on trouve des Windows, mais aussi et surtout des GNU/Linux et divers systèmes Unix). Afin qu'ils puissent se comprendre malgré leurs différences, une série de languages spécifiques a été inventée. Il s'agit des protocoles. Un protocole définit une série de mots clefs commandant des actions particulières. Pour surfer sur le web, le protocole utilisé est le "http" (Hyper Text Transfer Protocol). Il existe quantité d'autres protocoles, chacun étant destiné à un usage spécifique: "irc" (Internet Relay Chat) pour discuter en ligne, "ftp" (File Transfert Protocol) pour transférer des fichiers, "ssh" (Secure SHell) pour commander à distance de manière sécurisée un ordinateur, etc. CAS PRATIQUE Bob et Alice sont les protagonistes de notre atelier. Alice a un ordinateur connecté en permanence à internet, y a installé le logiciel "apache" pour transformer sa machine en "serveur web", et ainsi héberger ses propres pages web sur Internet. Autrement dit, de les rendre accessibles à quiconque se connecte à son "serveur", via un "client". Pour que sa machine soit aisément trouvable sur Internet, Alice lui a donné un nom, et acheté le "domaine" correspondant: bidule.net. Ainsi, quiconque souhaite accéder à la machine d'Alice n'a qu'à se connecter à "bidule.net". Bob a un ordinateur qu'il connecte de temps en temps à internet, et sur lequel il a installé un "client web", autrement dit, un "navigateur", comme Mozilla ou Netscape. Celui-ci lui permet de "surfer sur le oueb". Autrement dit, de se connecter à des "serveurs web" comme celui d'Alice. Bob veut consulter l'une des pages web d'Alice, dont l'adresse est "http://bidule.net/truc.html" (on appelle cela une URL, pour "Uniform Ressource Locator"): - L'adresse "http://bidule.net/truc.html" signifie que la page "truc.html" se trouve sur le serveur "bidule.net", et qu'il faut utiliser le protocole "http" pour y accéder. - Pour parler "http" avec le serveur, il faut un "client web". Bob lance donc le logiciel "Mozilla" installé sur sa machine, et y entre l'URL (adresse) précédemment indiquée. - le "client" Mozilla se connecte au "serveur" bidule.net, et entame une conversation "http" avec ce dernier, lors de laquelle le client et le serveur se présentent l'un l'autre. Le client demande ensuite au serveur de lui envoyer la page "truc.html". Sauf erreur (page inexistante, protégée par un mot de passe, etc.), le serveur obéit et envoie la page. - Après l'avoir récupérée, le client (Mozilla, donc) l'interprète, et affiche le fruit de son interprétation dans sa fenêtre, sous les yeux de Bob. Le tout a probablement duré moins d'une seconde. 2) AFFICHER L'INFORMATION Après avoir rapatrié la page web, on dit que le navigateur "l'interprète". Pourquoi? PAGE WEB, INTERPRÉTATION ET HTML Une page web est un document multimédia, pouvant associer du texte, des images, du son voire de l'animation. Mais une page oueb est surtout un document "hypertexte", contenant des liens vers d'autres documents (d'où le protocole "http", "hyper text transfert protocol", soit "protocole de transfert de documents hypertexte"!). Formellement, une page oueb est un fichier texte, qui contient une suite de caractères. On y trouve le texte du document affiché, entouré d'une série de codes entre crochets. Cet ensemble constitue un language, qu'on appelle le language HTML ("Hyper Text Markup Language"). Comme son nom l'indique, il s'agit d'un language de "description de page". En effet, on peut schématiquement dissocier le contenu (le texte) de la forme (les codes entre crochets, appelées balises). Les balises donnent ainsi des "indications de formatage" du texte, permettent de l'agencer, de le mettre en forme. Par exemple, "

Voilà un paragraphe dont une partie est en gras

" signifie "crée un nouveau paragraphe, dont la partie du texte située entre les balises et apparaîtra en gras. Voilà pourquoi le "client web" a besoin, après réception de la page envoyée par le serveur, de "l'interpréter": pour appliquer au texte les directives données par les balises, et ainsi afficher dans le navigateur un document "multimédia" et "hypertexte". Mais voyons de plus près ce fameux code HTML. ANATOMIE D'UNE PAGE WEB Note: une page web n'étant autre qu'un fichier texte, il suffit d'un simple éditeur de texte (comme le "bloc notes" de Windows, ou "nano", "pico", "jed", "vim" ou "emacs" et quantité d'autres sur les systèmes unix) pour créer un site web. Pour reproduire l'exemple qui va suivre, il vous suffit donc de retaper ou de copier/coller le code HTML dans votre éditeur de texte préféré, d'enregistrer le tout sous un fichier "kekchose.html", puis de l'ouvrir dans votre navigateur. Soit le fichier HTML "bidule.html" suivant: --- début du fichier --- page d'exemple

Ceci est une page d'exemple, dont certains passages sont en gras, d'autres en italique, d'autres soulignés.

Voici un lien vers une autre page.

--- fin du fichier --- On observe que le fichier contient un mélange de texte (les phrases, le contenu) et de code (les balises, entre crochets). Une balise peut-être "ouverte" (par ex: ) ou "fermée" (par ex: ). L'action initiée par la balise ("bold", soit "mettre en gras") prend fin avec la balise . Par exemple, dans le code suivant... une portion de la phrase sera en gras ...seuls les mots "portion" et "gras" apparaîtront en gras; seul le texte situé entre la balise ouverte et la balise fermée s'en trouve affecté. Une page commence avec la balise ouverte , et se termine avec la balise fermée . Une page HTML est composée de deux parties au minimum. La première est "l'en-tête", délimitée par les balises et . Il s'agit d'une section dans laquelle on déclare le titre de la page (qui s'affichera en haut du navigateur, ou dans les onglets de celui-ci - grâce aux balises et ), et d'autres informations que nous ne verrons pas ici. La seconde partie est "le corps", délimité par les balises et . Au sein du "corps", se trouve la page à proprement parler. Elle est souvent structurée en paragraphes, délimités par les balises

et

. Un lien vers une autre page est établi grâce à la balise , qui prend en paramètre href="la-page-vers-laquelle-pointer". Le texte situé entre les balises et apparaîtra souligné et coloré, et un click sur ce dernier renverra l'internaute à la page liée. Note: quelques rares balises n'ont pas besoin d'être fermées. C'est notamment le cas de
, qui provoque un saut de ligne. En HTML, les retours à la ligne doivent être précisémment notifiés par des balises. Il existe quantité d'autres balises permettant les mises en forme les plus diverses. On peut ainsi insérer des titres, centrer du texte, l'aligner, le justifier, créer des tableaux, des cadres, des colonnes, changer la police de caractères, sa couleur, celle du fond, celle des zones que l'on définit, etc. Les possibilités sont énormes, et leur découverte dépasse de loin les objectifs de cette courte introduction. Pour continuer, de nombreux guides sont disponibles sur Internet, et notamment sur le site du W3C, consortium chargé d'établir des normes d'écriture en matière de code HTML et autres languages de description de pages, afin d'assurer la cohésion et la lisibilité du web. Voir notamment http://www.w3schools.com. 3) AU DELÀ DU HTML Le WWW et le HTML sont des créations récentes, qui ne cessent d'évoluer. Leur déploiement massif a progressivement généré de nouveaux usages et de nouveaux besoins, qui semblent promettre le web à de plus en plus d'interactivité et d'évolutivité. Les normes d'écriture de pages et techniques du web muent donc en conséquence. EVOLUTIVITÉ ET CSS Aussi le HTML simple, tel que l'exemple précédent l'a montré, fait-il progressivement place aux "feuilles de styles", ou "CSS" ("Cascading Style Sheets"), qui permettent une dissociation franche entre forme et fond. Alors que le texte demeure dans une page HTML, sa mise en forme se trouve désormais dans un fichier CSS. Ce nouveau mode d'écriture de pages étend considérablement les possibilités du HTML "classique", ouvrant la voie à une évolution graphique constante des sites, sans que le contenu soit en jeu. Le site http://www.csszengarden.com offre une illustration pour le moins epoustouflante des possibilités offertes par les CSS. INTERACTIVITÉ ET PHP Le web a pris une autre dimension lorsque ses pages sont devenues "dynamiques". L'exemple précédemment utilisé pour présenter le HTML est celui d'une page "statique": elle n'est créée ou modifiée que manuellement, lors de sa mise à jour par son auteur-e, par exemple. Le serveur se contente de l'envoyer au client, telle-quelle. A l'inverse, une page dynamique sera générée ou altérée par le serveur en fonction de la requête du client, avant de lui être envoyée. Le contenu de la page web dépendra, par exemples, des cases cochées par l'utilisateur/trice ou d'éventuels formulaires qu'ille a rempli-e. Imaginons le site web d'une bibliothèque. Sur le serveur de la bibliothèque, se trouve le site web, ainsi qu'une base de données référençant tous les ouvrages de l'établissement. Grâce à un language de script mêlé au code HTML, il devient possible de piloter à travers le web la base de données: de l'interroger, d'y ajouter des entrées, etc. Imaginons que le site de la bibliothèque propose un système de recherche de ses ouvrages. Si toutes les pages du sites étaient "statiques", cela signifierait que le serveur devrait contenir autant de pages différentes que de réponses possibles à une recherche, ce qui est tout simplement impossible. Avec des pages "dynamiques", il suffit d'écrire une page vierge, dans laquelle seront insérés par le serveur les résultats de la recherche. Celle-ci sera menée par un programme situé sur le serveur et chargé d'interroger la base de données. Il sera appelé à s'exécuter par le language de script contenu dans les pages HTML. De ces languages, "PHP" est probablement le plus utilisé, car libre, efficace et s'insérant à merveille dans le HTML. Sans que cela soit visible à l'utilisateur/trice final-e, il est au coeur de quantité de sites actuels, comme plusieurs sites Indymedia, et constitue le moteur de la plupart des sites dits "contributifs". Il devient alors possible de lever la contrainte du HTML, en contribuant à des sites par le biais de formulaires simples. 4) A VOUS DE JOUER! ... août 2003 darkveggy@squat.net http://print.squat.net