web

Web

Le "World Wide Web", plus communément appelé "Web" a été développé au CERN (Conseil Européen pour la Recherche Nucléaire) par le Britannique Sir Timothy John Berners-Lee et le Belge Robert Cailliau au début des années 90. À cette époque les principaux centres de recherche mondiaux étaient déjà connectés les uns aux autres, mais pour faciliter les échanges d'information Tim Berners-Lee met au point le système hypertexte. Le système hypertexte permet, à partir d'un document, de consulter d'autres documents en cliquant sur des mots clés. Ces mots "cliquables" sont appelés hyperliens et sont souvent soulignés et en bleu. Ces hyperliens sont plutôt connus aujourd'hui sous le simple terme de "liens".

première page web
première page web, les hyperliens sont soulignés et en bleu

Cette première page web est toujours consultable à l'adresse suivante : http://info.cern.ch/hypertext/WWW/TheProject.html

Tim Berners-Lee développe le premier navigateur web (logiciel permettant de lire des pages contenant des hypertextes), il l'appelle simplement "WorldWideWeb". Il faudra attendre 1993 et l'arrivée du navigateur web "NCSA Mosaic" pour que le web commence à devenir populaire en dehors du petit monde de la recherche.

Techniquement le web se base sur trois choses : le protocole HTTP (HyperText Transfert Protocol), les URL (Uniform Resource Locator) et le langage de description HTML (HyperText Markup Language). Nous aurons, très prochainement l'occasion de revenir sur ces trois éléments.

Une chose très importante à bien avoir à l'esprit : beaucoup de personnes confondent "web" et "internet". Même si le "web" "s'appuie" sur internet, les deux choses n'ont rien à voir puisqu'"internet" est un "réseau de réseau" s'appuyant sur le protocole IP (voir le module Internet) alors que, comme nous venons de le voir, le web est la combinaison de trois technologies : HTTP, URL et HTML. D'ailleurs on trouve autre chose que le "web" sur internet, par exemple, les emails avec le protocole SMTP (Simple Mail Transfert Protocol) et les transferts de fichiers avec le protocole FTP (File Transfert Protocol).

Téléchargement de cette page pour une utilisation sans ordinateur :

Dans la barre d'adresse de votre navigateur web vous trouverez, quand vous visitez un site des choses du genre : "http://www.ac-grenoble.fr/disciplines/informatiquelycee/index.html". Nous aurons l'occasion de reparler du "http" et du "www.ac-grenoble.fr" plus tard. La partie "/disciplines/informatiquelycee/index.html" s'appelle une URL.

Une URL (Uniform Resource Locator) permet d'identifier une ressource (par exemple un fichier) sur un réseau.

L'URL indique « l'endroit » où se trouve une ressource sur un ordinateur. Un fichier peut se trouver dans un dossier qui peut lui-même se trouver dans un autre dossier... On parle d'une structure en arborescence, car elle ressemble à un arbre à l'envers :

arbo
structure en arborescence

Comme vous pouvez le constater, la base de l'arbre s'appelle la racine de l'arborescence et se représente par un /

Chemin absolu ou chemin relatif ?

Pour indiquer la position d'un fichier (ou d'un dossier) dans l'arborescence, il existe 2 méthodes : indiquer un chemin absolu ou indiquer un chemin relatif. Le chemin absolu doit indiquer « le chemin » depuis la racine. Par exemple l'URL du fichier fichier3.jpg sera : /dossier2/dossier3/fichier3.jpg

Remarquez que nous démarrons bien de la racine / (attention les symboles de séparation sont aussi des /)

Imaginons maintenant que le fichier fichier1.css fasse appel au fichier fichier3.jpg (comme un fichier HTML peut faire appel à un fichier CSS). Il est possible d'indiquer le chemin non pas depuis la racine, mais depuis le dossier (dossier2) qui accueille le fichier1.css, nous parlerons alors de chemin relatif :

dossier3/fichier3.jpg

Remarquez l’absence du / au début du chemin (c'est cela qui nous permettra de distinguer un chemin relatif et un chemin absolu).

Imaginons maintenant que nous désirions indiquer le chemin relatif du fichier fichier1.txt depuis le dossier dossier4.

Comment faire ?

Il faut « reculer » d'un « cran » dans l'arborescence pour se retrouver dans le dossier dossier2 et ainsi pouvoir repartir vers la bonne « branche ». Pour ce faire il faut utiliser 2 points : ..

../dossier2/fichier3.jpg

Il est tout à fait possible de remonter de plusieurs « crans » : ../../ depuis le dossier dossier4 permet de « retourner » à la racine.

À faire vous-même 1

Soit la structure en arborescence suivante:

arbo

Le contenu du fichier "fichier7.odp" utilise le fichier "fichier5.svg". Donnez le chemin relatif qui devra ẽtre renseigner dans le fichier "fichier7.odp" afin d'atteindre le fichier "fichier5.svg".

Donnez le chemin absolu permettant d'atteindre le fichier "fichier6.html".


Remarque : la façon d'écrire les chemins (avec des slash (/) comme séparateurs) est propre aux systèmes dits « UNIX », par exemple GNU/Linux ou encore Mac OS. Sous Windows, ce n'est pas le slash qui est utilisé, mais l'antislash (\). Pour ce qui nous concerne ici, les chemins réseau (et donc le web), pas de problème, c'est le slash qui est utilisé.

Téléchargement de cette page pour une utilisation sans ordinateur :

Nous allons nous intéresser à un acteur fondamental du développement web, le couple HTML+CSS (Hyper Text Markup Langage et Cascading Style Sheets).

Dans un premier temps, nous allons exclusivement nous intéresser au HTML. Qu'est-ce que le HTML, voici la définition que nous en donne Wikipedia :

L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias, dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).

Pour l'instant, nous allons retenir deux éléments de cette définition «conçu pour représenter les pages web» et «un langage de balisage».

Grâce au HTML vous allez pouvoir, dans votre navigateur (Firefox, Chrome, Opera,....), afficher du texte, afficher des images, proposer des hyperliens (liens vers d'autres pages web), afficher des formulaires et même maintenant afficher des vidéos (grâce à la dernière version du HTML, l'HTML5).

HTML n'est pas un langage de programmation (comme le Python par exemple), ici, pas question de conditions, de boucles....c'est un langage de description.

Pour aborder le HTML, nous allons, dans un premier temps utiliser le site jsfiddle.net.

Après avoir lancé votre navigateur web, tapez http://jsfiddle.net/ dans la barre d'adresse.

Vous devriez voir apparaître ceci :

jsfiddle

Nous allons pour l'instant uniquement utiliser la fenêtre « HTML » et la fenêtre « Result ».

À faire vous-même 1

Écrivez le code HTML suivant :


<h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
			

Qu'est-ce qui s'affiche dans la fenêtre ?


Comme déjà évoqué ci-dessus, en HTML tout est une histoire de balise que l'on ouvre et que l'on ferme. Une balise ouvrante est de la forme <nom_de_la_balise>, les balises fermantes sont de la forme </nom_de_la_balise>.

En observant attentivement le code, vous devriez forcément remarquer que toute balise ouverte doit être refermée à un moment ou un autre. La balise ouvrante et la balise fermante peuvent être sur la même ligne ou pas, cela n'a aucune espèce d'importance, la seule question à se poser ici est : ai-je bien refermé toutes les balises que j'ai ouvertes ?

Enfin pour terminer avec les généralités sur les balises, il est important de savoir qu'une structure du type :

<balise1>
<balise2>
</balise1>
</balise2>

est interdite, la balise2 a été ouverte après la balise1, elle devra donc être refermée avant la balise1.

En revanche, l'enchaînement suivant est correct :

<balise1>
<balise2>
</balise2>
</balise1>

Notez que dans notre exemple nous respectons bien cette règle « d'imbrication » des balises avec la balise <p> et la balise <strong>.

Il est important de comprendre que chaque balise a une signification qu'il faut bien respecter (on parle de la sémantique des balises). Par exemple le texte situé entre la balise ouvrante et fermante <h1> est obligatoirement un titre important (il existe des balises <h2>, <h3>......qui sont aussi des titres, mais des titres moins importants (sous-titre)). La balise <p> permet de définir des paragraphes, enfin, la balise <strong> permet de mettre en évidence un élément important.

Vous devez aussi savoir qu'il existe des balises qui sont à la fois ouvrantes et fermantes (<balise/>) : un exemple, la balise permettant de sauter une ligne, la balise <br/> (balise qu'il faut d'ailleurs éviter d'utiliser par différentes raisons que nous n'aborderons pas ici).

Il est possible d'ajouter des éléments à une balise ouvrante, on parle d'attribut. Une balise peut contenir plusieurs attributs :

<ma_balise attribut_1= "valeur_1" attribut_2="valeur_2">

Il existe beaucoup d'attributs différents, nous allons nous contenter de 2 exemples avec l'attribut id (id pour identifiant) et class. Nous verrons l’intérêt de ces attributs dans l'activité suivante.

À faire vous-même 2

Écrivez le code HTML suivant :


<h1>Ceci est un titre</h1>
<h2 class="titre_1">Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
			

Qu'est-ce qui s'affiche dans la fenêtre ?


Le HTML n'a pas été conçu pour gérer la mise en page (c'est possible, mais c'est une mauvaise pratique). Le HTML s'occupe uniquement du contenu et de la sémantique, pour tout ce qui concerne la mise en page et l'aspect « décoratif » (on parle du « style » de la page), on utilisera le CSS (Cascading Style Sheets).

Dans JSFIDDLE, il est possible d'écrire du CSS dans la fenêtre en haut à gauche.

À faire vous-même 3

Écrivez le code HTML suivant :


<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
			

Écrivez le code CSS suivant :


h1
{
	text-align: center;
	background-color: red;
}
h2
{
	font-family: Verdana;
	font-style: italic;
	color: green;
}
			

Qu'est-ce qui s'affiche dans la fenêtre ?


Dans l'exemple du "À faire vous-même 3", les propriétés « text-align » et «background-color» seront appliquées au contenu de toutes les balises de type h1 (avec respectivement les valeurs «center» et «red»).....

À faire vous-même 4

Écrivez le code HTML suivant :


<h1>Ceci est un titre</h1>
<h2>Ceci est un sous titre</h2>
<p id="para_1">Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
			

Écrivez le code CSS suivant :


#para_1
{
	font-style: italic;
	color: green;
}
			

Qu'est-ce qui s'affiche dans la fenêtre ? Que remarquez-vous ?

Il est donc possible de cibler un paragraphe et pas un autre en utilisant l'id du paragraphe (en CSS l'id se traduisant par le signe #).

Il est aussi possible d'utiliser l'attribut class à la place de l'id. Dans le CSS on utilisera le point . à la place du #.

La différence entre "id" et "class" n'est pas très importante.

L'attribut "class" permet de donner le même nom à plusieurs reprises dans une même page.

Si nous avions eu un 3e paragraphe, nous aurions pu avoir :<p class="para_1">Voici un 3e paragraphe</p>, mais nous n'aurions pas pu avoir : <p id="para_1"> Voici un 3e paragraphe </p>, car le nom para_1 a déjà été utilisé pour le 1er paragraphe.

JSFIDDLE est un très bel outil, mais il ne peut pas être utilisé pour la réalisation d'un vrai site internet (ou d'une vraie application web).

Nous allons créer 2 fichiers : un fichier qui contiendra du HTML (index.html) et un fichier qui contiendra du CSS (style.css).

À faire vous-même 5

À l'aide d'un éditeur de texte, créer un nouveau fichier.

Sauvegardez-le en précisant son nom, par exemple "index.html".

Écrivez le code suivant dans votre éditeur de texte (sans oublier de sauvegarder quand vous avez terminé) :


<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<h1>Hello World! Ceci est un titre</h1>
		<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
	</body>
</html>
			

Testez votre code à l'aide d'un navigateur web (Firefox ou Chrome) en “double-cliquant” sur le fichier index.html


Dans l'exemple du "À faire vous-même 5", vous reconnaissez le code se trouvant entre les balises <body> :

<body>
......
</body>

Tout votre code HTML devra se trouver entre ces 2 balises.

Le reste des balises devraient vous êtes inconnues. Passons-les en revue :

La première ligne (<!doctype html>) permet d'indiquer au navigateur que nous utiliserons la dernière version du HTML, le fameux HTML5.

La balise <html> est obligatoire, l'attribut lang="fr" permet d'indiquer au navigateur que nous utiliserons le français pour écrire notre page.

Les balises <head>...</head> délimitent ce que l'on appelle l'en-tête. L'en-tête contient, dans notre exemple, 2 balises : la balise <meta charset="utf-8"> qui permet de définir l'encodage des caractères (utf-8) et la balise <title> qui définit le titre de la page (attention ce titre ne s'affiche pas dans le navigateur, ne pas confondre avec la balise <h1>).

À faire vous-même 6

Toujours à l'aide d'un éditeur de texte, vous allez créer un fichier qui va contenir le CSS de notre page (par exemple style.css). Complétez ce fichier à l'aide du code suivant :


h1
{
	text-align: center;
	background-color: red;
}
p
{
	font-family: Verdana;
	font-style: italic;
	color: green;
}
			

Pour l'instant notre CSS ne sera pas appliqué à notre page, pour ce faire, il faut modifier notre code HTML en ajoutant une ligne qui va permettre d'associer notre code CSS à notre page.

Modifiez le code HTML avec la ligne suivante <link rel="stylesheet" href="style.css"> :


<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
		<link rel="stylesheet" href="style.css">
	</head>
	<body>
		<h1>Hello World! Ceci est un titre</h1>
		<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
	</body>
</html>
			

Testez votre code à l'aide d'un navigateur web en “double-cliquant” sur le fichier index.html


Dans l'exemple que nous venons de voir, les fichiers "index.html" et "style.css" se trouvent dans le même dossier. Il est souvent utile de placer les fichiers CSS dans un dossier “CSS”. Il faudra alors modifier le code HTML en conséquence :


<link rel="stylesheet" href="CSS/style.css">
			

Pour terminer, voici quelques balises très utilisées :

La balise a

<a href="mon_autre_page.html">Cliquez ici pour vous rendre sur mon autre page</a>
			

La balise a permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de "voyager" entre les pages d'un site ou entre les sites. Les liens hypertextes sont par défaut soulignés et de couleur bleue (modifiable grâce au CSS). La balise a possède un attribut href qui a pour valeur le chemin du fichier que l'on cherche à atteindre ou l'adresse du site cible (exemple : <a href="http://www.google.fr">Cliquez ici pour vous rendre sur google.fr</a>). Entre la balise ouvrante et fermante, on trouve le texte qui s'affichera à l'écran (c'est ce texte qui est souligné et de couleur bleue).La balise peut sans problème se trouver en plein milieu d'un paragraphe.

La balise image

Comme vous devez déjà vous en douter, la balise image sert à insérer des......images :


<img src="mon_image.jpg" alt="avion"/>
			

la balise img est à la fois ouvrante et fermante comme la balise br. Elle possède 2 attributs :

  • src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier).
  • alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisées par les non-voyants), il faut donc systématiquement renseigner cet attribut.
Les balises form, input et button

Les formulaires sont des éléments importants des sites internet, ils permettent à l'utilisateur de transmettre des informations. Un formulaire devra être délimité par une balise form (même si ce n'est pas une obligation) :

<form>
....
</form>

Il existe différentes balises permettant de construire un formulaire, notamment la balise input. Cette balise possède un attribut type qui lui permet de jouer des rôles très différents.

La balise button nous sera aussi d'une grande utilité.

À faire vous-même 7

Créez un fichier html contenant le code suivant :


<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<form>
			<p>voici un champ de texte : <input type="text"/></p>
			<p>voici une checkbox <input type="checkbox"/></p>
			<button>Cliquez ici !</button>
		</form>
	</body>
</html>
			

Testez votre code à l'aide d'un navigateur web en “double-cliquant” sur le fichier html que vous venez de créer.

Les balises div et span

Ces 2 balises sont très utilisées (surtout la balise div). Pourtant, il faudrait, autant que possible, les éviter, pourquoi ?

Parce qu'elles n'ont aucune signification particulière, ce sont des balises dites “génériques”.

À quoi servent-elles alors ?

À organiser la page, à regrouper plusieurs balises dans une même entité.

Pourquoi 2 balises génériques ?

Parce que div est une balise de type “block” et que span est une balise de type “inline” !

Sans vouloir trop entrer dans les détails, il faut bien comprendre que l'ordre des balises dans le code HTML a une grande importance. Les balises sont affichées les unes après les autres, on parle du flux normal de la page.

C'est ici qu'entrent en jeu les balises de type "block" et les balises de type "inline".

  • Les contenus des balises de type "block" (p, div,h1,...) se placent sur la page web les uns en dessous des autres.
  • Les contenus des balises de type "inline" (strong, img, span, a) se placent sur la page web les uns à côté des autres.

Cela revient à dire qu'une balise de type “block” prend toute la largeur de la page alors qu'une balise de type “inline” prend juste la largeur qui lui est nécessaire.

À faire vous-même 8

Créez un fichier html contenant le code suivant :


<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Voici mon site</title>
	</head>
	<body>
		<div>div est une balise de type "block"</div>
		<p>la balise p est une autre balise de type block</p>
		<span>En revanche, span est une balise de type "inline"</span>
		<a href="www.google.fr">Et voici une autre balise de type "inline"</a>
		<h1>h1 est bien une balise de type "block"</h1>
		<span>la malheureuse balise span est "obligée" de se placer en dessous</span>
	</body>
</html>
			

Testez ce code


À faire vous-même 9

Élaborez une page HTML en utilisant les balises vues dans l'activité consacrée au HTML et au CSS.

Revenons sur l'adresse qui s'affiche dans la barre d'adresse d'un navigateur web et plus précisément sur le début de cette adresse c'est-à-dire le "http"

Selon les cas cette adresse commencera par http ou https (nous verrons ce deuxième cas à la fin de cette activité).

Le protocole http (hypertext transfert protocol) va permettre au client d'effectuer des requêtes à destination d'un serveur web. En retour, le serveur web va envoyer une réponse.

Voici une version simplifiée de la composition d'une requête http (client vers serveur) :

  • la méthode employée pour effectuer la requête
  • l'URL de la ressource
  • la version du protocole utilisé par le client (souvent HTTP 1.1)
  • le navigateur employé (Firefox, Chrome) et sa version
  • le type du document demandé (par exemple HTML)
  • ...

Certaines de ces lignes sont optionnelles.

Voici un exemple de requête HTTP :


GET /mondossier/monFichier.html HTTP/1.1
User-Agent : Mozilla/5.0
Accept : text/html
			

Nous avons ici plusieurs informations :

  • "GET" est la méthode employée (voir ci-dessous)
  • "/mondossier/monFichier.html" correspond l'URL de la ressource demandée
  • "HTTP/1.1" : la version du protocole est la 1.1
  • "Mozilla/5.0" : le navigateur web employé est Firefox de la société Mozilla
  • "text/html" : le client s'attend à recevoir du HTML

Revenons sur la méthode employée :

Une requête HTTP  utilise une méthode (c'est une commande qui demande au serveur d'effectuer une certaine action). Voici la liste des méthodes disponibles :

GET, HEAD, POST, OPTIONS, CONNECT, TRACE, PUT, PATCH, DELETE

Détaillons 4 de ces méthodes :

  • GET : C'est la méthode la plus courante pour demander une ressource. Elle est sans effet sur la ressource.
  • POST : Cette méthode est utilisée pour soumettre des données en vue d'un traitement (côté serveur). Typiquement c'est la méthode employée lorsque l'on envoie au serveur les données issues d'un formulaire ( avec une balise form, voir l'activité sur HTML et CSS).
  • DELETE : Cette méthode permet de supprimer une ressource sur le serveur.
  • PUT : Cette méthode permet de modifier une ressource sur le serveur

Réponse du serveur à une requête HTTP

Une fois la requête reçue, le serveur va renvoyer une réponse, voici un exemple de réponse du serveur :


HTTP/1.1 200 OK
Date: Thu, 15 feb 2019 12:02:32 GMT
Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4
Connection: close
Transfer-Encoding: chunked
Content-Type: text/html; charset=ISO-8859-1
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Voici mon site</title>
</head>
<body>
 <h1>Hello World! Ceci est un titre</h1>
<p>Ceci est un <strong>paragraphe</strong>. Avez-vous bien compris ?</p>
</body>
</html>
			

Nous n'allons pas détailler cette réponse, voici quelques explications sur les éléments qui nous seront indispensables par la suite :

Commençons par la fin : le serveur renvoie du code HTML, une fois ce code reçu par le client, il est interprété par le navigateur qui affiche le résultat à l'écran. Cette partie correspond au corps de la réponse.

La 1re ligne se nomme la ligne de statut :

  • HTTP/1.1 : version de HTTP utilisé par le serveur
  • 200 : code indiquant que le document recherché par le client a bien été trouvé par le serveur. Il existe d'autres codes dont un que vous connaissez peut-être déjà : le code 404 (qui signifie  «Le document recherché n'a pu être trouvé»).

Les 5 lignes suivantes constituent l'en-tête de la réponse, une ligne nous intéresse plus particulièrement :


Server: Apache/2.0.54 (Debian GNU/Linux) DAV/2 SVN/1.1.4
			

Le serveur web qui a fourni la réponse http ci-dessus a comme système d'exploitation une distribution GNU/Linux nommée "Debian" (pour en savoir plus sur GNU/Linux, n'hésitez pas à faire vos propres recherches). "Apache" est le coeur du serveur web puisque c'est ce logiciel qui va gérer les requêtes http (recevoir les requêtes http en provenance des clients et renvoyer les réponses http). Il existe d'autres logiciels capables de gérer les requêtes http (nginx, lighttpd...) mais, aux dernières nouvelles, Apache est toujours le plus populaire puisqu'il est installé sur environ la moitié des serveurs web mondiaux !

Le "https" est la version "sécurisée" du protocole http. Par "sécurisé" en entend que les données sont chiffrées avant d'être transmises sur le réseau. Seul le possesseur de la clé de déchiffrement sera en mesure de lire les données transmises sur le réseau. D'un point vu strictement pratique il est nécessaire de bien vérifier que le protocole est bien utilisé (l'adresse commence par "https") avant de transmettre des données sensibles (coordonnées bancaires...). Si ce n'est pas le cas, passez votre chemin, car toute personne qui interceptera les paquets de données sera en mesure de lire vos données sensibles.