Introduction

(Très) brève histoire du World Wide Web

Le World Wide Web (WWW) est un ensemble de documents hypertextes distribués sur le réseau internet. Un document hypertexte est un document texte contenant des hyperliens permettant d'accéder à d'autres documents hypertextes. Ainsi, le World Wide Web peut être perçu comme une toile (web en anglais) composée de multiples ramifications. On parle de navigation internet lorsque l'on consulte des documents hypertextes d'hyperliens en hyperliens.

Il ne faut pas confondre le World Wide Web, créé en 1991 par Tim Berners-Lee alors qu'il était en charge du système d'information du CERN, avec le réseau internet. Le World Wide Web s'appuie sur l'infrastructure du réseau internet pour mettre à la disposition du public un maillage de documents hypertextes. À ce titre, Tim Berners-Lee a inventé le langage HTML (HyperText Markup Language) qui permet de concevoir des documents hypertextes ainsi que le protocole réseau HTTP (HyperText Transfer Protocol) qui permet de transférer des documents hypertextes entre deux machines distantes connectées au réseau internet.

Après son départ du CERN en 1994, Tim Berners-Lee fonde le W3C, un organisme de normalisation à but non lucratif visant à garantir l'interopérabilité des technologies Web.

Un seul Web partout et pour tous

De nombreuses entreprises dont les principaux éditeurs de navigateurs (Google, Fondation Mozilla, Microsoft, Apple et Opera), des opérateurs réseau et des laboratoires de recherche participent à l'évolution des technologies Web au sein du W3C.

Architecture client-serveur

Un document hypertexte (ou document Web) est hébergé sur un serveur Web. Un ensemble de documents Web hébergés sur le même serveur Web constituent un site Web. Enfin, on utilise un navigateur Web pour consulter un site Web.

Afin d'illustrer le cheminement des informations au travers du réseau internet, prenons un exemple : imaginons qu'un internaute japonais résidant à Osaka cherche à consulter le site Web du musée du Louvre afin de préparer son voyage à Paris.

1. Il commence par saisir l'URL http://www.louvre.fr dans la barre d'adresse de son navigateur Web.
2. Le navigateur Web interroge le DNS basé à Tokyo de son fournisseur d'accès internet pour connaître l'adresse IP du serveur Web qui héberge le site du Louvre.
3. Le navigateur établit alors une connexion avec le serveur distant.
4. Le navigateur formule ensuite une requête HTTP afin de récupérer la page d'accueil (index.php ou index.html en général) du site web.
5. Le serveur envoie une réponse HTTP au navigateur avec le contenu de la page Web demandée.
6. Le navigateur analyse la réponse afin d'afficher le contenu de la page Web.

Comme illustré dans l'exemple ci-dessus, le serveur Web est passif et devient actif que lorsqu'il est sollicité par un client Web pour recevoir une ressource (document Web, fichier image, audio ou vidéo, ...). Voilà pourquoi on parle d'architecture client-serveur pour le World Wide Web.

Petit glossaire du World Wide Web

Serveur Web

Ordinateur connecté au réseau internet hébergeant des sites Web

Navigateur Web

Logiciel utilisé pour consulter des sites Web

URL (Uniform Resource Locator)

Identifiant (chaîne de caractères) unique associé à une ressource disponible sur le réseau

DNS (Domain Name System)

Annuaire internet permettant de retrouver l'adresse IP d'un serveur à partir de son nom

Adresse IP (Internet Protocol)

Identifiant (composé de 4 nombres en IPv4) unique associé à chaque ordinateur connecté à internet

HTTP (HyperText Transfer Protocol)

Protocole utilisé pour transmettre des pages Web à travers le réseau internet

Publication de documents Web

L'ensemble des documents qui constituent un site Web sont rassemblés sur le serveur dans un répertoire dit public. Ce qui signifie que ces documents sont consultables depuis n'importe quel oridnateur connecté à internet.

Tous les utilisateurs du département Informatique de l'IUT de Reims disposent d'un répertoire public sur le serveur Web du département. Ce répertoire nommé public_html contiendra toutes les pages Web de votre site personnel. C'est dans ce répertoire que vous sauvegarderez tous les fichiers que vous écrirez durant les travaux pratiques.

Conformément à la configuration du serveur Web, la page d'accueil de votre site doit porter le nom index.html. Votre site web est accessible à l'adresse http://identifiant/ où identifiant correspond à votre identifiant de connexion. Pour des raisons de sécurité, cette URL n'est valide qu'au sein de l'intranet du département Informatique. Dans ces conditions, votre site Web ne sera pas publié sur internet.

Il est recommandé d'organiser vos fichiers en sous-répertoires pour des questions de lisibilité. Ainsi, vous pouvez créer un sous-répertoire par nature de fichiers. Par exemple,

public_html/
  css/			
    style.css
    background.jpg
  img/
    me.jpg
    map.png
  js/
    timer.js
    memory.js
  index.html

css

Feuilles de style et images utilisées pour la décoration des pages

img

Images incorporées dans vos pages Web

js

Scripts JavaScript

public_html/
  index.html
  css/			
    style.css
  img/
  M1105/

Choix d'un éditeur de code

Comme nous le verrons dans le chapitre suivant, un document Web n'est rien d'autre qu'un document texte. Par conséquent, pour concevoir votre site, vous n'aurez besoin que d'un simple éditeur de texte comme le bloc notes de Windows^®. Néanmoins, je vous encourage à utiliser un éditeur un peu plus sophistiqué qui propose :

• un système d'onglets pour l'édition simultanée de plusieurs fichiers
• la coloration syntaxique afin de mettre en évidence le code HTML, CSS et JavaScript

Selon le système d'exploitation que vous utilisez, vous avez le choix entre un grand nombre d'éditeurs de code source. Voici quelques suggestions :

Maintenant que votre environnement de développement est configuré, il est temps de disséquer un premier document Web et de découvrir pas à pas les langages HTML, CSS et JavaScript.