Le web est de nos jours un outil incontournable du monde actuel.

Que ce soit pour le travail

(mail, télétravail, etc.), ou le divertissement (streaming, jeux, etc..) nous nous connectons
tous les jours pour interagir avec le monde. Il est d’ailleurs fréquent d’entendre utiliser les
termes Internet et de Web pour le même outil alors qu’ils désignent des concepts
différents.

Internet : Internet est un vaste réseau informatique qui interconnecte les machines
(ordinateurs, tablettes, smartphones, etc.) à l’échelle de la planète.

Image réseau internet

Web : Technologie basée sur le réseau Internet permettant de consulter des pages web via
un navigateur. Il est basé sur les protocoles HTTP (HyperText Transfert Protocol) et HTTPS
(HTTP Secure).

En réseau un protocole est une norme standardisée utilisée pour la communication entre les
équipements interconnectés. Ceci afin que les messages envoyés ou reçu soient bien
compris. (note de bas de page)

Internet est donc le support (l’infrastructure réseau) et le web le service offert. En plus du
Web il existe plusieurs autres services qui sont disponibles sur le réseau internet. Parmi ces
services il y a :
- Le courrier électronique (mail) : pour l’envoie et la réception des messages
électroniques ;
- La Voix sur IP (VoIP) : qui regroupe des technologies comme la visio-conférence
(Zoom), les appels vocaux via internet (Skype ou WhatsApp par exemple)

Qu’en est-il de l’origine du web ?

L’aventure qui a débouchée au web que nous connaissons aujourd’hui a débuté au début
des années 1960. En pleine guerre froide (1947-1991), aux Etats-Unis, le département de la
défense (équivalant du ministère de la défense) lance un projet qui vise à doter l’armée
d’une réseau capable de supporter les conséquences d’un conflit nucléaire. Ce projet, confié
aux chercheurs du pays, a abouti à la mise en place dans les années 1970 de l’ARPANET
(Advanced Research Projects Agency Network). Ce réseau qui relie le département de la
défense aux universités en contrat avec l’armée.

Image du réseau ArpaNet

Dans les années 80, les Etats-Unis procèdent à l’ouverture de leur réseau des universités
hors pays (Royaume Uni, Australie, etc.). Dès lors, le réseau devient de plus en plus un
réseau dédié à la recherche permettant aux universités d’échanger plus aisément.

Il est à noter que depuis sa création internet était un réseau d’échange de données pour
scientifiques. De ce fait, il était principalement en ligne de commande qui demandait une
certaine connaissance de l’informatique et pour pouvoir l’utiliser.

Images internet en 1980

C’est fort de ce constat que Tim Berners-Lee, alors chercheur au CERN (Conseil européen
pour la recherche nucléaire), créait le protocole HTTP, le langage pour les pages web le
HTML ainsi que le premier navigateur. Toutes ces nouvelles technologies ont rendu l’usage
d’internet moins « complèxe » ce qui a favorisé sa vulgarisation dans les administrations, les
entreprises et chez les particuliers.

De 1995 à 2000 on assite à une véritable bulle-internet, avec la création de startups telles
que (Google, Amazon, Yahoo, eBay,…) et des investissements massifs dans les entreprises
internet. Ces entreprises sont aujourd’hui des multinationales florissantes pour la plus part.

Depuis les années 2000 on a assisté l’émergence du concept du Web 2.0 (Web deux point
zero) mettant l'accent sur l'interactivité, les réseaux sociaux et les contenus générés par les
utilisateurs. C’est la période de la popularisation des plateformes comme Facebook,
Youtube, Twitter.
Avec l’évolution des technologies mobiles et des objets connectés, Internet est continu son
expansion au point d’être devenu de nos jours quasi incontournables. Il ne fait aucun doute
que son évolution sera plus accentuée avec l’impact des nouvelles technologies comme
l'intelligence artificielle, la réalité virtuelle/augmentée et la blockchain.

Fonctionnement du web

Le World Wide Web, communément appelé le Web, est un système vaste et complexe qui
permet de naviguer et d'accéder à une multitude d'informations en ligne. Pour comprendre
son fonctionnement, il est essentiel de se familiariser avec les concepts de base comme les
serveurs et les clients, les protocoles de communication, ainsi que les technologies qui
composent le Web.

Les principes de base du web

Le web fonctionne principalement selon un modèle client-serveur. Dans ce modèles, un

client souvent représenté par un navigateur web, envoie des requêtes à un serveur. Le
serveur ) à son tour, traite ces requêtes et renvoie les réponses appropriées.
Par exemple lorsque vous taper dans votre navigateur une adresse web (par exemple
[Link]) ce dernier envoie une requête au serveur qui héberge le site demandé. Le
serveur répond en envoyant le contenu de la page web, qui est ensuite affiché par le
navigateur.

Image client serveur

Le protocole utilisé pour la communication entre les clients et les serveurs est le HTTP.
Cependant, pour des raisons de sécurité, une version de ce protocole appelée HTTPS (HTTP
Secure) est largement utilisée. HTTPS utilise des techniques de chiffrement pour protéger
les données échangées entre le client et le serveur contre les interceptions et les attaques
malveillantes.

Les clients, qui sont les navigateurs web (Google Chrome, Mozilla Firefox, Microsoft Edge,
etc…) sont les points d’accès pour les utilisateurs. Ils envoient des requêtes au serveur qui
leur répond de façon appropriée..

- La méthode : comme GET ou POST ;

- L’URL : L’adresse de la ressource demandée ;
- La version du protocole ;
- Les entêtes de requêtes fournissent des information supplémentaires comme le
contenu accepté par le clients etc..

Image exemple de requete

Pour ce qui concerne les réponses elles sont également structurées de façon à ce que votre
navigateur soit à même de les interpréter efficacement. Les réponses commencent par une
ligne de statut contenant un code de statut (par exemple, 200 OK pour indiquer une
requête réussie ou 404 Not Found pour indiquer que la ressource demandée n'a pas été
trouvée). Les en-têtes de réponse fournissent des informations supplémentaires, et le corps
de la réponse contient le contenu de la ressource demandée.

Image exemple de requête

Les technologies du web

Le web repose sur plusieurs technologies, clés :

- HTML (HyperText Markup Language) : C’est le langage qui permet de créer des pages
web. Il est utilisé pour structurer et présenter le contenu sur le web.
- CSS (Cascading Style Sheets) : CSS est utilisé pour la présentation des documents
HTML. Il permet d’ajouter de « l’embellissement » à la page web en intégrant des
aspets comme la couleur ou la police des éléments.
- Javascript : langage de programmation coté client qui permet de rendre les pages
interactives.
Dans le cadre de ce cours nous aborderons les langages HTML et CSS.

Images HTML CSS JS

Un autre aspect du web est l’adresse web ou URL (Uniform Resouce Locator) qui est une
chaîne de cacartère qui indique l’emplacement des ressources sur le Web. Une URL est
composée de plusieurs parties :
- Le protocole :
- Le nom de domaine ou l’adresse IP
- Le chemin vers la ressource
Nous savons que le Web est une technologie basée sur le réseau Internet. Dans un réseau
informatique ou il peut y avoir des milliers d’ordinateurs, il est important de connaitre
comment contacter son interlocuteur. A la manière d’un réseau téléphonique ou vous devez
diposer du numéro de votre correspondant pour le contacter, sur le Internet aussi, il faut un
« numéro » pour contacter un serveur. Ce numéro est appelé Adresse IP. Chaque
équipement sur le réseau internet dispose d’une adresse IP qui lui permet de communiquer.

Cela dit, les adresses IP étant des suites de chiffres, il est difficile pour un humain de retenir
toutes les adresse IP de tous les sites qu’il visite. Ainsi donc, il a fallu trouver un système qui
permette de remplacer la suite l’adresse IP par un nom facile à retenir. Ce système c’est le
DNS (Domain Name System).
Le système de noms de domaine joue un rôle crucial en convertissant les noms de domaine,
que les humains peuvent lire, en adresses IP, que les machines utilisent pour communiquer
entre elles. Lorsque vous tapez une URL dans votre navigateur, une requête DNS est
envoyée pour obtenir l'adresse IP correspondante au nom de domaine, permettant ainsi de
localiser et d'accéder au serveur hébergeant le site web.

Éditeurs de code

Les éditeurs de code sont des outils essentiels pour les développeurs web. Ils permettent de
créer, modifier et gérer les fichiers de code source avec des fonctionnalités qui facilitent le
développement. Il existe de nombreux éditeurs de code, chacun avec ses propres
caractéristiques et avantages.

Un éditeur de code est un logiciel conçu pour écrire et éditer du code source de
programmes informatiques. Contrairement aux éditeurs de texte simples, les éditeurs de
code offrent des fonctionnalités spécifiques aux développeurs, telles que :
- Coloration syntaxique : Met en évidence les différentes parties du code (mots-clés,
variables, chaînes de caractères) avec des couleurs distinctes pour améliorer la
lisibilité.
- L'autocomplétion : Suggère automatiquement des complétions de code, réduisant
les erreurs typographiques et accélérant le développement.
- Etc.

Voici quelques éditeurs de code populaires, largement utilisés par les développeurs web :
Visual Studio Code (url), Sublime Text (url), Atom (url).

Image d’un editeur de texte VS Code

Structure d'une page Web

La structure d'une page web repose sur le langage de balisage HTML (HyperText Markup
Language), qui définit la composition et l'organisation du contenu. Comprendre les bases de
HTML est essentiel pour quiconque souhaite développer des sites web ou travailler avec des
technologies web.

Introduction à HTML
HTML est le langage utilisé pour créer et structurer des pages web. Conçu pour être. Simple
et flexible, il permet de définir des éléments de contenu variés comme les titres, les
paragraphes, les images, les listes…

Le HTML est un langage de balisage qui utilise des "tags" ou balises pour annoter des
documents de texte afin de les rendre interprétables par les navigateurs web. Chaque
élément HTML est défini par une paire de balises d'ouverture et de fermeture, qui
entourent le contenu à afficher. Par exemple, une balise de paragraphe est représentée
comme suit :

<p>Ceci est un paragraphe.</p>

Dans cet exemple <p> est la balise d'ouverture et </p> est la balise de fermeture, et le texte
"Ceci est un paragraphe." est le contenu du paragraphe.

Les balises HTML peuvent disposer d’attributs. Ils permettent de préciser ou de modifier les
comportement d’une balise (par exemple la couleur de fond, la bordure, etc. )

Attributs code exemple

Un document HTML complet comprend un certain nombre d’éléments de base. Voici un

exemple simple d’un document HTML

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta

name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page
d'exemple</title> </head> <body> <h1>Bienvenue</h1> <p>Ceci est un paragraphe de
texte.</p> </body> </html>

Décomposons cet exemple pour en comprendre chaque partie :

- <Doctype html> : Cette déclaration indique au navigateur que le document utilise la
version HTML5.
- <html lang="fr"> : La balise <html> encapsule tout le contenu de la page.
L'attribut lang="fr" spécifie que le contenu est en français.
- <head> : La section <head> contient des métadonnées sur le document, comme
l'encodage des caractères et le titre de la page.
- <meta charset="UTF-8"> : Définit l'encodage des caractères du document, ici UTF-
8.
- <meta name="viewport" content="width=device-width, initial-
scale=1.0"> : Assure la réactivité de la page sur différents appareils.
- <title> : Spécifie le titre de la page qui apparaît dans l'onglet du navigateur.
- <body> : La section <body> contient tout le contenu visible de la page.

Les éléments de base de HTML

Les titres
HTML permet de définir six niveaux de titres, du plus important (<h1>) au moins important
(<h6>). Les titres aident à structurer le contenu et à améliorer l'accessibilité et le
référencement.

<h1>Titre de niveau 1</h1>

<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>

Les paragraphes
Les paragraphes de texte sont définis à l'aide de la balise <p>. Ils sont utilisés pour structurer
le contenu textuel.

<p>Ceci est un paragraphe de texte.</p>

Liens
Les liens hypertextes permettent de naviguer d'une page à une autre. Ils sont définis avec la
balise <a> et l'attribut href qui spécifie l'URL de la page de destination.

<a href="[Link] [Link]</a>

Images
Les images peuvent être insérées dans une page web à l'aide de la balise <img>. L'attribut
src spécifie le chemin de l'image.

<img src="[Link]" alt="Description de l'image">

Listes
HTML supporte des listes à puces (<ul>) et des listes numérotées (<ol>). Les éléments de
liste individuels sont définis avec la balise <li>.

Code Listes à puce

Code liste numérotées

Les tableaux
Construire un tableau en HTML revient à déclarer des lignes de haut vers le bas. Puis au sein
de chacune des lignes, déclarer les cellules.
Les principales balise sont :

- <table>...</table> : pour la dénition du tableau;

- <tr>...</tr> : pour la dénition des lignes ;

- <td>...</td> ou <th>...</th> : pour les cellules normales (td) et les

cellules d’entête en gras (th) ;
Exemple de tableau :

La balise table peut contenir els ttribut suivants :

- width et heigth : pour dénir respectivement la largeur et la hauteur de
votre tableau. Les unités possibles sont le pixel (px) ou en pourcentage
(%) ;
- border permet de dénir la taille (en pixel) de la bordure du tableau ;
- align pour dénir la position du tableau dans la page. Les valeurs possibles
sont center, left, right.

Pour des tableaux spécifiques, il peut être nécessaire de fusionner des cellules ou des lignes
pour n’en faire qu’une. Les attributs colspan (pour fusionner des colonnes) et rowspan
(fusionner des lignes) sont disponibles.

Code rowspan et colspan