Comment fonctionne le web ?
Nous utilisons tous le web, la « toile » d’Internet, en naviguant de pages en pages par des liens. Ce principe n’a pas changé depuis le début des années 1990 où Tim Berners-Lee l’a inventé et a créé le premier navigateur, le programme qui permet de consulter une page web.
Depuis les origines, le principe tient en quatre phases :
- Vous décidez de publier des informations sur le web en créant un site web.
- Étant bien formé(e) (comme vous le serez à la fin de ce cours !) vous écrivez pour cela une ou plusieurs pages dans un langage informatique nommé HTML.
- Tout est prêt, vous décidez de publier le site en déposant les pages sur un serveur d’Internet qui est actif 24h/24.
- Tous les utilisateurs connectés à Internet peuvent consulter votre site à partir d’un navigateur.
Voyons maintenant un peu plus en détail ces trois éléments essentiels : le langage HTML, le navigateur et le site web.
Langage HTML
Tim Berner-Lee a défini au départ les « documents HTML » — on parle maintenant de pages web — comme contenant du texte et des liens dits « hypertextes », qui permettent par un clic de sauter vers un autre document. Le langage HTML permet de décrire ce contenu aussi bien sur le fond (quel texte, quels liens ?) que sur la forme (quelles couleurs, quelles mises en forme de caractères ?).
Voici un exemple de code HTML vu par le concepteur :
<!DOCTYPE html>
<html>
<head>
<title>Accueil</title>
</head>
<h1>Bienvenue</h1>
<hr/>
<p>
<b>Bonjour</b> à toutes et à tous !
</p>
</html>
Le chapitre I sera consacré à l’étude de base de ce langage.
Au départ fondé sur ces deux éléments, texte et liens, le langage a vite évolué pour insérer dans les pages web des images, des vidéos ou du son. Aux pages s’ajoutent donc des fichiers multimédia, qui forment un site web, que nous traiterons au chapitre II.
Terminons ce premier tour d’horizon, par l’idée de séparer la mise en forme et le contenu d’un document HTML. Présente dès les origines, avec le concept de feuille de style, sa gestation a pris quelques années pour aboutir aux incontournables CSS dont vous avez sans doute entendu parler. Ce principe de feuille de style CSS est essentiel dans le web et ne cesse de grignoter HTML, le couple étant maintenant arrivé à maturité avec HTML 5 et CSS 3 (qui continu de bouger !). Les CSS touchent avant tout à la mise en forme (couleurs, bordures, marges) que nous verrons au chapitre III, mais aussi à la composition de la page (chapitre V).
Voyons à présent l’indispensable navigateur qui montre le résultat de tant d’effort.
Navigateur
Entrons dans le concret tout de suite ! Voici comment le document HTML précédent est affiché par un navigateur :
On comprend intuitivement ce que décrit le document HTML : un titre, une barre horizontale puis un paragraphe avec un mot en gras. Avec une feuille de style CSS, le même document HTML peut par exemple ressemblez à ceci :
Ici aussi, on devine le mécanisme des CSS qui ajoute une sorte de peau à une page dont la structure ne change pas.
Toute la force du web, et en même temps le commencement des problèmes, sont là :
- HTML est un langage clairement défini par un organisme créé par Tim Berner-Lee, le World Wide Web Consortium (W3C)
- Les navigateurs appliquent cette norme, avec plus ou moins de précision, pour interpréter et afficher n’importe quelle page HTML bien écrite (en fait même mal écrite, ils l’affichent avec beaucoup de souplesse !).
Le navigateur proposé par défaut par votre système d’exploitation n’est pas le seul. Les principaux sont les suivants :
Disons le tout de suite, et nous verrons cela en détail plus tard, nous utiliserons pour travailler Firefox ou Google Chrome qui sont stables, à jour et respectueux des normes HTML et CSS.
Maîtriser HTML & CSS est essentiel pour créer un site web, mais avec la professionnalisation dans ce domaine et l’essor du web dans les années 2000, cela devient une compétence (toujours très importante !) parmi d’autre. C’est le métier de l’ « intégrateur web » qui tend à devenir un véritable « développeur web », ce que nous allons expliquer dans cette deuxième partie.
Qu’est-ce que l’intégration web ?
Avant l’explosion du web à la fin des années 90, les sites Internet étaient sobres, pour ne pas dire austères et moches. Les designers se sont peut à peu penchés sur la question qui ne concernait auparavant que les programmeurs informatiques. En parallèle, les sites sont devenus plus interactifs et dynamiques, demandant de fortes compétences techniques. C’est là, vers l’an 2000, que la figure magistrale du webmaster est apparue, l’homme ou la femme à tout faire du web, de la conception, à l’exploitation en passant par le codage.
De nos jours, l’utilisateur entre enfin dans la partie pour rappeler que le site était avant tout pour lui, achevant un morcellement en de multiples métiers. Cette spécialisation est indispensable pour produire un site web important de façon professionnelle. Le webmaster polyvalent est toujours là pour de petits projets, mais il devient intégrateur web ou développeur web dans une agence web ou une ESN, avec toujours HTML & CSS au cœur de son métier.
La production d’un site web professionnel passe en général par ces étapes :
L’intégrateur :
- Récupère une maquette graphique des pages du site ainsi qu’un « plan de navigation »
- Crée les pages HTML, mises en forme par CSS, pour représenter fidèlement ces maquettes
En plus, mais on sort du cadre de ce cours, l’intégrateur qui est aussi développeur « front-end », anime le site par des effets et des traitements réalisés en Javascript.
Finalement, on obtient un site consultable sur un navigateur, où les liens fonctionnent. L’aspect visuel du site est montré mais le contenu est fictif.
A titre d’exemple, vous pouvez télécharger les fichiers utilisés pour le schéma ci-dessus :
Pour l’instant, il y a peu à retenir car il s’agit ici d’une introduction.
| Nom | Adresse | Description |
| W3Schools | https://www.w3schools.com | Un incontournable pour apprendre et s’informer sur les technos web, notamment HTML & CSS |
| MDN | https://developer.mozilla.org/fr/docs/Web/Reference | La référence, plus complète mais aussi moins conviviale que W3Schools, pour chercher la moindre signification d’une balise, d’un attribut |
| Alsacréations | https://alsacreations.com | LE site historique pour s’informer et apprendre les technos web, des articles très bien écrits régulièrement mis à jour |