Le web : les bases

Principes de fonctionnement d’un site web

Vous avez déjà l’habitude d’utiliser un navigateur web, comme presque tout le monde. Nous allons évoquer aujourd’hui la manière dont cela fonctionne.
Les sites web sont tous basés sur des langages informatiques universels : le HTML et le CSS.

Le langage HTML a été inventé par Tim Berners-Lee en 1991. Tim Berners-Lee a créé le World Wide Web Consortium (W3C) qui définit les nouvelles versions des langages liés au web.

Faisons une petite distinction entre deux termes qui sont souvent utilisés de manière interchangeable. De nombreuses personnes confondent à tort Internet et le Web. Il faut savoir que le Web fait partie d’Internet.

Internet est un tissu international d’ordinateurs connectés. Internet n’appartient à personne, c’est un système coopératif gouverné par un système de standards et de règles.

Il y a de nombreuses façons d’échanger des données entre ordinateurs. On peut citer par exemple :

  • le web (HTTP, HTTPS),
  • le courrier électronique (SMTP, POP3, IMAP),
  • le transfert de fichiers (FTP, FTPS),
  • la messagerie instantanée (IRC),
  • le pair à pair,
  • etc.

Ces échanges de données ou de fichiers sur internet s’appuient sur des méthodes standardisées, ce sont les protocoles.

Le web, à l’origine « Word wide web », le fameux « www » dans les adresses des sites, est juste un aspect de ces moyens par lesquels l’information peut être partagée sur internet.

C’est unique dans le sens où cela permet de lier des documents les uns aux autres à travers des liens hypertextes, formant ainsi un volume conséquent d’informations interconnectées. Le web utilise le protocole appelé HTTP (HyperText Transfer Protocol).

Tim Berners-Lee n’est donc pas l’inventeur d’Internet, c’est « seulement » l’inventeur du Web.

Vous servir l’information

Un mot sur les ordinateurs qui constituent internet. Comme ils « servent » des documents sur demande, on les appelle des « serveurs ». Pour être plus précis un serveur est un logiciel (pas l’ordinateur lui-même) qui permet à l’ordinateur de communiquer avec d’autres ordinateurs. Cependant il est courant d’appeler « serveur » l’ordinateur lui-même.

Le rôle d’un serveur est d’attendre une demande d’information, et d’ensuite concevoir et renvoyer l’information le plus rapidement possible.

N’importe quel ordinateur peut devenir un serveur, il suffit d’installer un logiciel de serveur web, qui lui permettra de traiter les transactions via le protocole hypertexte. Les serveurs web sont aussi appelés « serveurs HTTP ».

Il y a beaucoup de solutions logicielles de serveur web. La plus populaire est « Apache », open source, ou Microsoft Internet Information Service (IIS). Apache est gratuitement disponible sur les systèmes UNIX et pré-installé sur les Mac ayant MacOS. Il y a aussi une version Windows.

Chaque terminal connecté à internet (routeurs, smartphones, voitures, etc.) dispose d’une adresse numérique unique, c’est l’adresse IP (IP pour « Internet Protocol »).

Chaque terminal connecté peut donc être contacté par son adresse IP, par exemple 91.121.93.182. Ce système n’étant pas très pratique, les systèmes de noms de domaines (DNS pour Domain Name System) ont été développés pour permettre de contacter un serveur par son « nom de domaine », mmibordeaux.com par exemple. Les adresses IP étant plus manipulable par les systèmes alors que les noms de domaines sont bien plus utilisables par les humains.

Faire correspondre une adresse IP à un nom de domaine, c’est le rôle des serveurs DNS. Si vous imaginez les adresse IP comme étant des numéros de téléphones, les serveurs de noms de domaines seraient les annuaires.

Un mot sur les navigateurs

Nous avons vu comment marchent les serveurs, mais qu’en est-il de l’autre moitié de l’équation ? Le logiciel qui va effectuer les demandes est appelé le « client« .  Nous utilisons un navigateur de bureau, un navigateur sur mobile, ou une aide technique, un navigateur vocal, comme client pour accéder à des documents web. Le serveur renvoie les documents afin que le navigateur le restitue (à l’écran ou autre).

Les demandes et les réponses transitent avec le protocole HTTP. Bien que nous parlions de « documents », HTTP  peut être utilisé pour transporter des images, des films, des bandes sonores, des programmes et toutes les ressources qui constituent les sites web.

Il est courant de penser qu’un navigateur est une fenêtre qui affiche sur l’écran une page web. Ceux-là sont des navigateurs graphiques, et pendant longtemps ils ont été les seuls disponibles. Les plus populaires sont Edge et Internet Explorer pour Windows, Chrome, Firefox, ou Safari, suivis par Opera ou Vivaldi.

Aujourd’hui plus de la moitié des consultations se font sur mobiles et tablettes, comme avec Safari sur iOS, Android avec Chrome, Opera mini, et toute une myriade d’autres, installables sur mobile.

Il est important de garder en tête les alternatives de consultation. De penser aux utilisateurs en situation de handicap de consultation, à ceux qui écoutent la page web lue par un navigateur vocal, ceux qui agrandissent énormément les caractères pour lire. ces utilisateurs qui parfois n’ont qu’un joystick ou leur seule voix pour activer les liens ou saisir du contenu.

Les sites que nous créons doivent être accessibles et utilisables par tous les utilisateurs, quelle que soit leur expérience de navigation.

Le web apparaît maintenant aussi sur nos télés intelligentes et nos consoles de jeux, sur lesquels les utilisateurs peuvent consulter des pages web avec leur télécommande ou leur manette. On ne peut pas savoir où une page web sera consultée bientôt !

Les adresses des pages web

Chaque page ou ressource sur le web dispose de sa propre adresse, appelée « URL » (pour : Uniform Resource Locator« ).

Une URL complète est composée de trois parties distinctes :

  1. le protocole,
  2. le nom du site,
  3. et le chemin absolu du document ou de la ressource.

1 http:// 2 www.exemple.com 3 /2018/exemple/page.html

Il est à noter que le fameux www précédent le nom de domaine est devenu une convention, mais que ce n’est pas une règle. Il peut être enlevé, ou il est possible d’utiliser des sous-domaines à la place, par exemple developpement.exemple.com.

Pour résumer cet exemple, il demande d’utiliser le protocole HTTP pour se connecter au serveur web appelé « www.exemple.com » sur internet, pour accéder au document « page.html » situé dans le répertoire « exemple« , lui-même situé dans le répertoire « 2018« .

Beaucoup d’adresses ne spécifient pas le document, comme par exemple http://www.mmibordeaux.com/ ou https://www.mmibordeaux.com/equipe. Quand un serveur reçoit une demande ainsi formulée, il distribue la page par défaut, typiquement appelée index.html. Ce fichier par défaut peut varier, cela dépend de la configuration du serveur.

Ce fichier par défaut est utile pour la sécurité, pour éviter que le serveur (s’il est ainsi configuré) n’affiche la liste des documents présents dans le répertoire demandé.

HTTPS le protocole du web sécurisé

Vous croisez de plus en plus souvent des adresses commençant par https. Il s’agit du protocole HTTPS, où le « S » signifie « sécurisé. Cela signifie que les informations saisies dans les formulaires sont cryptées entre l’utilisateur client et le serveur.

Auparavant utilisé principalement pour les transactions bancaires, alors qu’aujourd’hui, environ 60% des pages utilisent https, et ce pour de bonnes raisons. Pas seulement pour sécuriser les échanges d’informations, mais aussi pour satisfaire Google qui favorise ce protocole lors de l’indexation des pages. Si votre site dispose de formulaire et n’utilise pas ce protocole sécurisé, il ne progressera pas correctement dans les résultats de recherche. De surcroit il seront marqués comme « non sécurisés » dans la barre de navigation de Chrome.

HTTPS fonctionne en tandem avec SSL (pour « Secure Socket Layer« ) qui doit être activé sur le serveur pour que les transactions sécurisées fonctionnent. Généralement les hébergeurs proposent maintenant cette activation gratuitement.

Gardez en tête que le HTTPS protège les données de formulaires envoyées au serveur, mais ne sécurise pas votre site contre les attaques.

Anatomie d’une page web

HTML et CSS : deux langages pour créer un site web

Ces deux langages sont utilisés pour faciliter les choses car ils se complètent avec des rôles différents :

  • HTML (HyperText Markup Language) : son rôle est de gérer et organiser le contenu. C’est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images…
  • CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : son rôle est de gérer l’apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

Dans les images suivantes, une page web comme elle apparaît dans un navigateur graphique. Bien que vous voyiez une page cohérente, elle est en réalité constituée de plusieurs fichiers séparés, dont le document HTML et la feuille de style CSS.

vue du site du mmi bordeaux
vue du site du mmi bordeaux sans css

Qu’est-ce qu’un langage de balisage

En informatique, les langages de balisage ne font pas partie des langages de programmation, ils représentent une classe de langages spécialisés dans l’enrichissement d’information textuelle.

Exemples de langages balisés : HTML, XML, SVG

Historiquement, les langages à base de balises servent surtout à structurer ou formater des documents.
De par leur spécificité syntaxique d’utiliser des balises, ces langages facilitent l’annotation de texte. Il suffit en effet d’encadrer des portions de texte par des balises pour utiliser une fonctionnalité du langage. Par exemple en HTML il suffit d’encadrer un mot par les balises «  » et «  » pour qu’il apparaisse en gras.
Un simple éditeur de texte suffit ainsi à définir un document.

Le langage de balisage le plus couramment utilisé sur le World Wide Web est le HyperText Markup Language, ou HTML. En HTML, on utilise des balises pré-définies afin de préciser à l’intérieur d’un fichier texte des éléments tels que les titres, les paragraphes, les acronymes, les citations, etc.

La version du HTML actuellement utilisée est le HTML5. Il y a eu plusieurs versions de ce langage depuis sa naissance en 1989.

Petite introduction au HTML et au CSS

Je veux juste évoquer maintenant comment marche le HTML et comment votre navigateur l’interprète.

Vous noterez que les balises elles-mêmes (par exemple <body>, ou <p>) ne sont pas affichées par votre navigateur dans la restitution finale de la page. Le navigateur n’affiche seulement que ce qu’il est contenu entre deux balises, le contenu de l’élément.

Ensuite vous remarquerez que la plupart des balises fonctionnent par paires « encapsulant » le contenu. Par exemple la balise <h1> déclare que le texte qui suit sera un titre de niveau 1, et la balise </h1> indique la fin du titre. Certains autre éléments, nommés éléments vides n’ont pas de contenus, c’est le cas par exemple de la balise <br> qui évoque un élément vide indiquant au navigateur d’insérer un saut de ligne.

Lorsque votre navigateur rencontre le caractère »ouvrant » une balise « <« , il va considérer que tous les caractères suivants comme la déclaration de la balise, jusqu’à ce qu’il rencontre le caractère fermant la balise « > ». De la même façon, il va considérer que tous les caractères suivant une balise, « <h1> » par exemple, sera du titre jusqu’à ce qu’il rencontre la balise fermante « </h1> ».

C’est la manière dont les navigateurs parcourent (parse) les documents et les analysent.

Où sont les images ?

Il n’y a pas d’image dans les fichiers HTML eux-même. Chaque image est un fichier séparé. Elles sont placées dans le flux du document à l’aide de la balise image HTML (img), qui dit au navigateur où se trouve le fichier image. Lorsqu’un navigateur rencontre a balise img, il effectue une nouvelle demande au serveur pour se faire « livrer » l’image, et la placer dans le flux du document.

Le navigateur va aussi effectuer d’autres demandes au serveur pour les feuilles de styles (.css), les scripts (.js) et autres medias embarqués comme des fichiers sonores ou des vidéos. Il va assembler ces fichiers pour construire la page finalement restituée.

Ajouter un peu de style

En haut des documents HTML, vous trouverez souvent un élément link qui pointe vers une feuille de style. Cette feuille de style contient des instructions décrivant la façon dont la page doit apparaître graphiquement dans le navigateur. Ces instructions sont écrites selon les règles CSS (pour Cascading Style Sheet). CSS permet au développeur d’ajouter des instructions pour styliser visuellement la présentation des balises HTML (la structure du document).

Ajouter des comportements avec JavaScript

Pour que des éléments de la page fassent quelque chose, on utilise un langage de programmation appelé JavaScript. Là où le HTML décrit la structure et les CSS modifient l’apparence, le JavaScript va ajouter des composants de comportement qui contrôlent comment fonctionnent les choses. Ils peuvent être déclarés dans des fichiers distincts et joints au document HTML, ou ils peuvent être directement déclarés dans le document. Ils peuvent être conçus pour s’exécuter immédiatement au chargement de la page, ou lorsque l’utilisateur effectue une action, comme un clic, le survol d’un élément, ou la saisie dans un champ de formulaire.

Récapitulatif du fonctionnement

  1. Vous tapez une URL ou cliquez sur un lien dans son navigateur
  2. Le client envoie une requête HTTP au serveur
  3. Le serveur renvoie en réponse un document HTML
  4. Le navigateur analyse le document. Si il y a des images, des feuilles de styles ou des scripts à charger, le navigateur contacte à nouveau le serveur
  5. Le serveur renvoie les fichiers demandés
  6. La page est assemblée par le navigateur, qui vous la restitue à l’écran.
Learning web design, by Jennifer Robbis

Sites statiques vs. sites dynamiques

Les sites statiques sont constitués de fichiers HTML qui proposent la même information à tous les utilisateurs. En d’autre terme chaque page vue dans un navigateur correspond à un fichier HTML sur le serveur.

Par opposition, les sites dynamiques sont générés par un langage de programmation côté serveur, comme le PHP ou l’ASP. Chaque page est générée à la volée par l’application côté serveur. Les sites dynamiques peuvent accéder à du contenu présent dans une base de données, et au final il peut être spécifique à chaque visiteur. Pour des gros sites proposant des centaines de pages, construire et maintenir un site dynamique est considérablement moins coûteux que de créer et de stocker chaque page individuellement comme un document HTML.

Fonctionnement d'un site statique
Fonctionnement d’un site statique
Fonctionnement d'un site dynamique
Fonctionnement d’un site dynamique

Les outils de la production web

Équipement

Vous avez besoin d’avoir un ordinateur à jour, qu’il soit sous Windows, MacOS, ou Linux, mais la production d’un site web n’est pas gourmande en ressources. La plupart des fichiers sont légers. A moins que vous ne fassiez du traitement de vidéos, ne vous inquiétez pas si votre matériel n’est pas très puissant.

Il est cependant pratique d’avoir un écran assez grand, bien que ce ne soit pas nécessaire.

Il est aussi utile de disposer d’un second ordinateur muni d’un système d’exploitation différent pour les tests, de pouvoir aussi tester les pages créées sur des terminaux mobiles (smartphone, tablette).

Logiciels de codage

Les éditeurs de code ne manquent pas sur le marché. Il est délicat d’en faire la liste, car il y en a vraiment beaucoup, chacun a son préféré, et il en sort régulièrement de nouveaux.

Ceci dit voici les plus couramment utilisés :

Navigateurs

Un de grands défis des créateurs de site est qu’il soit rendu de manière cohérente dans les différents navigateurs. Pour cette raison il est important de tester ses créations avec différents navigateurs.

  • Chrome
  • Firefox
  • MS Edge
  • Internet Explorer 9-11
  • Safari
  • Opera

Gestion et transferts de fichiers

La création de site web implique beaucoup de transferts de fichiers, notamment  entre l’ordinateur depuis lequel vous développez et le serveur d’hébergement du site. Pour envoyer et recevoir les fichiers, vous utilisez le protocole FTP, et aurez donc besoin d’un client FTP.

  • Filezilla
  • Cyberduck
  • WinSCP (Windows seulement)
  • Transmit (Mac seulement)

Exercices

Afficher le code source d’une page

  1. Lancez votre navigateur graphique.
  2. Ouvrez la page de votre choix.
  3. Affichez le code source de la page

Agrandissement en utilisant le zoom de votre navigateur graphique

Utilisation des différentes formes de zoom (page entière ou texte) dans les navigateurs courants :

Dans votre navigateur, utilisez le zoom pour agrandir la page d’accueil du site du mmi : MMI Bordeaux

  1. En mode zoom page complète
  2. En zoom texte seulement

Navigation au clavier dans votre navigateur graphique

Utilisez les touches « flèches » et « tabulation » pour naviguer dans le site alsacreations, pour accéder à la page « Contact », depuis la page d’accueil.

Utilisez les touches « flèches » et « tabulation » pour naviguer dans le site du MMI Bordeaux, pour accéder à la page de l’événement « Pré-rentrée 2018-2019 à Bordeaux », depuis la page d’accueil.

Utilisation du navigateur texte Lynx

Téléchargez et installez le logiciel « Lynx » :

Appuyez sur la touche « G » de votre clavier pour pouvoir saisir une URL.

  1. Rendez vous sur le site https:///www.google.fr,
  2. Cherchez l’expression « bordeaux »,
  3. Accédez au site de la mairie de Bordeaux

Utilisation d’un logiciel de synthèse vocale JAWS / VoiceOver

Si vous disposez d’un environnement Windows, téléchargez et installez le logiciel « JAWS » :

Si vous êtes sur Mac, lancez le logiciel « VoiceOver » :

Si vous le pouvez, munissez-vous d’un casque audio. Effectuez la lecture de cette page, ou d’un autre page.