Le World Wide Web

Le World Wide Web
Les origines
En 1989, Tim Berners-Lee travaille comme informaticien au
CERN1. Il propose à sa hiérarchie de travailler sur un système
informatique qui permettrait aux chercheurs du centre de partager
leurs données. Il souhaite combiner deux principes :
•
le principe de l'hypertexte, c'est à dire un système
contenant des nœuds liés entre eux par des hyperliens qui
permettent de passer de l'un à l'autre automatiquement
•
le principe des systèmes distribués, où l'information peut
être répartie sur plusieurs endroits.
Son supérieur trouve la proposition « vague mais excitante » et
l'autorise à travailler dessus.Tim Berners-Lee est rejoint l'année
suivante par l'ingénieur système Robert Cailliau qui est tout de
suite convaincu de l'intérêt de son système hypertexte.
Ils mettent en place les deux briques fondamentales du web :
•
Le langage HTML (HyperText Markup Language),
langage informatique qui permet de présenter un
contenu hypertexte.
•
Le protocole HTTP (HyperText Transfert Protocol) qui permet de gérer la communication
nécessaire aux transfert de documents hypertextes.
Tim Berners-Lee en 2010
Le protocole HTTP s'appuye sur les standards de l'internet qui existent alors, en particulier TCP/IP
et le système de DNS
1
Organisation européenne pour la recherche nucléaire
Ces informaticiens vont lancer sans s'en rendre compte une véritable révolution. En 1990, le
premier serveur web (Cern httpd) voit le jour, ainsi que le premier navigateur (appellé
WorldWideWeb). En 1993, le CERN verse dans le domaine public toutes les technologies autour
du www. Pour l'occasion, l'organisation place en ligne ce qui peut être considéré comme le
premier site en www.
À partir de ce moment là, la machine est lancée et la croissance du web va être explosive, pour
atteindre ce que l'on connaît aujourd'hui. Nul n'imagine maintenant se passer du web. Nous y
faisons nos recherches, nous apprenons avec wikipedia, nous planifions nos trajets et les
reservons sur les sites de voyage, nous obtenons des informations en quelques instants sur
n'importe quelle société ou apprenons la cuisine chinoise. Nous construisons des liens via des
réseaux sociaux qui nous permettent de rester en contact avec notre famille ou nos amis malgré la
distance. Certains y cherchent même l'amour.
Maintenant, internet fait partie de nos vies. 2 Un sondage récent annonçait que l'américain
moyen était connecté au net en moyenne 35 heures par semaine, le net ayant supplanté la
télévision !
Exercice 1
Qu'est ce que le W3C ? Quel est son rôle ? Qui en a été le fondateur ?
Que signifie URL ? DNS ?
Les technologies
Nous allons nous intéresser au contenu • 1991 : html 1, la version initiale du standard
du web dans un premier temps, les
• 1994 : html 2 qui est une version intermédiaire
protocoles et la topologie du résseau
viendront plus tard.Le contenu du web • 1996 html 3, avec les tables et de nouveaux éléments de
présenation
repose sur trois langages informatiques :
•
• 1998 html 4, la version la plus répandue actuellement,
HTML (Hypertext Markup
avec les frames et les styles via CSS
Language) est le langage qui
spécifie le contenu d'une page • 2008 première draft (brouillon) de html 5, le nouveau
standard. Les CSS sortent en version 3
2
2
À tel point qu'une pathologie de dépendance à l'internet a été reconnue depuis 1996 !
Le World Wide Web
web. C'est lui qui va préciser qu'un texte est un titre, un sous titre, qu'il y a une image, un
bouton, etc... Il s'occupe du sens, du fond du contenu, mais pas du tout de la présentation.
•
CSS (Cascading Style Sheets) est aussi un langage descriptif. Il se combine avec html
pour spécifier la façon dont le contenu doit être présenté. Il précisera la taille du texte, la
couleur, s'il est souligné, si les images osnt ou non encadrées, etc … La première version
date de 1996. Il y aura une version 2, qui est actuellement la plus utilisée et la mieux
supportée par les navigateurs. La version 3 apporte beaucoup d'amélioration comme les
cadres aux bords arrondis, les ombres, les animations, mais le support par les navigateurs
est encore inégal.
•
Javascript : HTML et CSS sont des langages informatiques descriptifs. Ils se contentent
de décrire un contenu. Javascript lui est un langage de programmation. Il est chargé de
rendre le contenu des pages web interactifs. Sa première apparition date de 1995. Les
différents éditeurs de navigateurs ont une façon spécifique d'implémenter ce langage. Du
coup, la progammation pour les développeurs peut devenir un véritable casse tête !
Les outils
Nous naviguons sur le net, nous surfons sur le web en utilisant un navigateur internet. Certains
parlent de butineurs, de browser. Voici les 4 plus connus.
FIREFOX
Logiciel libre disponible
pour Windows, mac Os
X et Linux. Il est l'un des
plus répandus
Internet Explorer
SAFARI
Développé par Microsoft Développé par Apple et
et
disponible
pour disponible pour Mac OS
windows. Les version 9 X et Windows
et 10 n'existent pas pour
CHROME
Développé par Google,
disponible
pour
Windows, Linux et Mac
Os X. C'est le petit
3
XP
dernier.
Exercice 2
Quel est le système d'exploitation que vous utilisez sur votre ordinateur ?
Quels sont les navigateurs disponible sur votre ordinateur ?
Quelle est la version de chacun d'entre eux ?
Pour créer du contenu web, les outils nécessaires sont assez simples. En effet, en créant le
langage HTML, Tim Berners-Lee a cherché à produire un langage qui soit :
•
constitué de texte
•
puisse être généré par un programme informatiques
•
puisse être décodé par un programme informatique
•
mais puisse être aussi lu par un être humain, et écrit par un être humain
Du coup, pour créer un site web, il suffit
simplement … d'un éditeur de texte. Le bloc
note de windows fonctionne très bien à cet
effet. On peut cependant utiliser des éditeurs
de texte qui facilitent la tache, comme
Notepad++3 ou Scite4 sous windows, ou
encore gPHPEdit5 ou Scite sous linux.
Un éditeur comme Notepad++ facilite
grandement la vie. En effet, il met en valeur la
syntaxe du langage HTML et fournit des outils
qui permettent de ne pas (trop) se tromper dans
la rédaction de la page HTML.
C'est lui que nous utiliserons dans un premier temps pour apprendre un peu le langage.
3
4
5
4
http://notepad-plus-plus.org/fr/
http://www.scintilla.org/SciTE.html
Installable par les paquets des distributions linux, le site de référence : http://www.gphpedit.org/features.phtml
Le World Wide Web
Les concepts du langage HTML
Le langage HTML est très simple à appréhender. C'est une solution légère et élégante au
problème posé. On a un ensemble d'information que l'on veut présenter de façon structurée. On
veut avoir un fichier unique qui est écrit avec du texte.
Le texte sera écrit de façon naturelle. Les informations nécessaires à la présentation seront
présentées dans des balises. Jetons un coup d'oeil à un exemple
<!DOCTYPE html>
<html>
<head>
<title> Mon premier site web </title>
</head>
<body>
<p>
Voilà mon premier site web.
Regardez cette belle image ...
<img src="image.jpg" />
Pour allez voir wikipedia, cliquez
<a href="http://wikipedia.fr/"> ici </a>
</p>
</body>
</html>
Les balises
Une balise en html est un élément qui indique une information qui sera interprété par le
navigateur mais ne sera pas affichée à l'utilisateur.
Une balise commence par un signe inférieur et s'achève par un signe supérieur. Il y a deux
types de balise :
•
Les balises en paire. Il y a une balise ouvrante et une balise fermante. La balise fermante
commence par un signe inférieur suivi d'un slash ( / )
<balise> le texte affecté par la balise </balise>
5
•
Certaines balises n'affectent pas une zone de texte. Celle ci seront donc ouverte et fermé
immédiatement. Le standard html 5 propose à ce moment là de fondre en une seule les
balises ouvrante et fermante et de faire une balise orpheline. Cela est indiqué en mettant
un slash avant le signe supérieur qui marque la fin de la balise
<orpheline />
Bien entendu, balise et orpheline ne sont pas des vraies balises, elles ne sont mis là qu'à titre
d'exemple.
Exercice 3
Dans le fichier exemple affiché ci dessus, indiquez trois balises par paire.
Indiquer aussi une balise orpheline
Les attributs
En plus des balises, il faut pouvoir donner des informations supplémentaires sur la balise. Par
exemple, une balise indiquera un lien vers une autre page du web. Il faudra bien indiquer
l'adresse de cette page web. Cela est rendu possible grâce aux attributs de la balise. Il s'agit d'une
information qui est dans la balise, séparé du nom de la balise par un espace et qui a une syntaxe
de type
attribut=''valeur de l'attribut''
On aurait donc pour un lien
<balise adresse=''adresse du lien''> Lien vers un site </balise>
Une même balise peut avoir plusieurs attributs qui servent à exprimer différentes informations.
Exercice 4
Dans le fichier précédent, indiquez deux attributs de balise ainsi que leurs valeurs. Quelle couleur utilise
notepad++ pour mettre les attributs en valeur ?
6
Le World Wide Web
La structure du document
Dans l'exemple précédent, on peut voir la structure du document :
Au début du document, il y a la balise qui indique que le document est un document HTML
<!DOCTYPE html>
Immédiatement après, la balise html est ouverte. Elle sera refermée à la fin du document. Tout
ce qui se trouve après la balise html fermante serait ignorée par le navigateur web au moment ou
il affiche le document.
<html>
...
</html>
Ensuite, il y a l'entête du document. Ce sont des informations qui sont destinées au navigateur
mais qui ne seront pas affichées. Elles se trouvent entre les balises head
<html>
<head>
...
</head>
...
</html>
Enfin, la balise qui indique le corps du document est la balise body. C'est elle qui contient
l'information destinée à être affichée.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
7
Exercice 5
Ouvrez Notepad++
Recopiez le fichier html donné en exemple au début de cette partie.
Enregistrez le en lui donnant le nom exemple.html
Ouvrez ce fichier dans un navigateur.
Le texte de la balise title est il affiché sur la page web ?
Où peut on le trouver ?
Les commentaires
On peut rajouter dans un fichier html des commentaires. Ceux ci commencent par la s équence
< !-- et se terminent par la séquence →
Tous les commentaires sont ignorés par les navigateurs. Mais ils ne sont pas inutiles. Ils
servent à la compréhension d'un éventuel lecteur humain. Voici notre exemple commenté.
<!DOCTYPE html>
<html>
<!-- Ceci est l'entête du document -->
<head>
<title> Mon premier site web </title>
</head>
<!-- Ceci est le corps du document -->
<body>
<p>
Voilà mon premier site web.
Regardez cette belle image ...
<img src="image.jpg" />
Pour allez voir wikipedia, cliquez
<a href="http://wikipedia.fr/"> ici </a>
</p>
</body>
</html>
8
Le World Wide Web
Du lien, du lien...
Venons en à ce qui fait le point fort des documents hypertexte. Les liens. Un lien est indiqué
par la balise a comme nous l'avons vu dans l'exemple.
La balise a prend un attribut qui est href, ce qui est l'abbréviation pour « hypertext reference »
La balise a peut aussi prendre un attribut title. Celui ci indiquera une infobulle qui apparaitra
au survol du lien
Voyons la syntaxe sur quelques exemples
Voici des exemples de lien :
<a href="fr.wikipedia.org" title="l'encyclopédie
collaborative"> Wikipedia </a>
<a href="page2.html"> ma seconde page </a>
<a href="details/presentation.html"> la presentation </a>
située dans le dossier "details"
Le premier exemple crée un lien vers wikipedia. Lorsque l'on survole le lien, une infobulle
apparaît.
Le second exemple crée un lien vers une page html qui est située dans le même répertoire que
la page actuellement visionnée.
Le troisième exemple donne un lien vers la page présentation qui est dans le sous dossier
détails local
<a href="#adresse"> lien interne vers mon adresse </a>
<a href="page2.html#adresse"> lien vers mon adresse </a> dans
la page 2
Les deux exemple ci dessus sont intéressants. Ils définissent des liens internes. La partie de
référence qui indique #adresse va pointer vers un emplacement du document. C'est l'attribut id
qui indiquera cet emplacement.
Imaginons que l'on ait une grande page de présentation et que l'on veuille dedans faire un lien
pour aller directement à la section de l'adresse. Le lien commencera par un diése pour indiquer
9
que c'est un lien interne. Le navigateur cherchera quelque part dans le document un élément qui
possède l'attribut id avec la valeur adresse comme ci dessous. Si on clique sur le lien, il se
positionnera directement dessus.
<p id="adresse">
Voilà l'endroit ou j'habite
</p>
Le dernier exemple montre que l'on peut combiner le lien vers un autre document et vers une
partie interne de cet autre document (on irait à la partie adresse de la page2.html)
Et les images ?
Une chose qui surprend la première fois que l'on crée une page web, c'est de voir que ce n'est
qu'un esemble de texte simple. Et les images ? Comment peut on avoir une image dans une page
web si on ne peut mettre que du texte simple ?
On ne peut pas « mettre une image » dans la page au sens où on en a l'habitude dans un
traitement de texte. Mais on peut bien ajouter une image. Pour cela, on indique où se trouve
l'image.
La balise que l'on utilise est la balise img
<img src="image.jpg" alt="une image" title="Oh!" />
La balise img est une balise orpheline. Elle possède deux attributs qui sont théoriquement
obligatoires :
•
l'attribut src indique au navigateur où trouver l'image. Cela peut être sur le net (une
adresse absolue comme par exemple http://tinyurl.com/kpskyxq Cela peut aussi être une
adresse relative au dossier local comme dans l'exemple ci dessus.
Exercice 6
Modifiez le document exemple pour y faire figurer l'image donnée dans le lien ci dessus.
Ajoutez un lien vers la page d'accueil de google
10
Le World Wide Web
•
L'attribut alt est lui aussi obligatoire en théorie. Il indique le texte qui devra être affiché
si l'image n'est pas disponible ou si le navigateur ne permet pas de l'afficher. C'est le cas
par exemple des navigateurs qui fonctionnent par synthèse vocale pour les personnes mal
voyantes.
L'attribut title lui est facultatif. Il correspond au texte qui s'affichera sous forme d'une infobulle
au survol de l'image
Balises html usuelles
Voici quelques balises html habituelles
Balises de structuration
<html>
Balise principale qui encadre le document
<head>
En tête de la page
<body>
Corps de la page
Balises d'en tête
<title>
Titre de la page web
<meta />
Métadonnées de la page
La balise meta donne des informations sur la page. Le plus souvent un attribut name décrit
l'information et un attribut content contient l'information
<head>
<title> Mon premier site web </title>
<!-- Example 1 - Definit les mots clefs pour les moteurs de
recherche -->
<meta name="keywords" content="HTML,balises,cours">
<!-- exemple 2 : description de la page -->
<meta name="description" content="Page d'exemeple sur le
html">
<!-- exemple 3 : définit l'auteur de la page web -->
<meta name="author" content="M. Cooper">
</head>
11
On a ci dessus trois balises meta qui indiqueraient aux moteurs de recherche l'auteur, la
description du document et les mots clefs qui lui sont associés.
Il existe plusieurs autres balises d'en tête que l'on verra par la suite.
Balises de structuration du texte
<p>
Un paragraphe
<h1>
Titre de premier niveau
<h2>
Titre de second niveau (sous titre)
…
...
<h6>
Titre de sixième nievau
<br/>
Retour à la ligne
<hr/>
Ligne de séparation horizontale
<a>
Ancre (lien html)
<img>
Insertion d'une image
Exercice 7 :
Pour mettre ensemble toutes les notions abordées, voici venue le moment de créer une fiche de présentation en
langage html. La fiche devra contenir les éléments suivants :
12
•
une partie « administrative » avec nom, prénom, classe, date de naissance, classe de l'an passé
•
une partie « renseignement » avec l'adresse postale, l'adresse de courriel, le numéro de téléphone et le
numéro des parents
•
une partie motivation avec les raisons qui vous ont poussé à prendre cette discipline
•
une partie projet qui indique les projets d'orientation et professionnel à moyen et long terme
•
une photo de vous devra être incluse dans un fichier du même dossier.
•
Un lien devra figurer vers une page « hobby » où vous présenterez vos hobby ou passions.
•
L'ensemble des trois fichiers (présentation, image, hobby) sera envoyé par courrier électronique au
professeur : [email protected]
Le World Wide Web