Langages de programmation orientés Web
Introduction
2025 - 2026
Nos objectifs
- Comprendre comment fonctionne le web
- Découvrir les différentes technologies
- Prendre en main les outils disponibles
- Mettre en pratique les notions vues aux cours pour construire un site web
Contexte
Le modèle client-server
- Client: l'utilisateur qui fait une requête depuis un navigateur pour atteindre une ressource.
- Réseau: fait la jonction entre le client et le serveur.
- Serveur: l'endroit où se trouve les ressources (les données).
Schéma d'une requête
Une requête peut se résumer à un client/navigateur qui souhaite atteindre une URL, laquelle est traduite en adresse IP par un serveur DNS afin de localiser le serveur où se trouvent les données.
Schéma d'une réponse
Si la requête aboutit, les données correspondantes sont renvoyées par le serveur vers le navigateur côté client, qui les interprète.
Navigateurs
ou client
La requête doit partir d'un client, qui prend la forme d'un navigateur. Ce dernier interprète les données renvoyées par le serveur comme de l'HTML, du CSS et du Javascript via un moteur de rendu. Voici les plus connus/pertinents:
URL
pour Uniform Resource Locator
Une adresse qui permet de localiser une ressource sur le web, comme une page HTML, une image, un fichier, etc.
Il est composé de différentes parties.
Ex: https://www.rtbf.be/recherche/article?q=cultureProtocole
https://www.rtbf.be/recherche/article?q=culture
Le protocole de communication est une spécification de plusieurs règles pour un type de communication particulier. Voici les plus communs:
- HTTP: HyperText Transfer Protocol
- HTTPS: HyperText Transfer Protocol Secure
- FTP: File Transfer Protocol
- SMTP: Simple Mail Transfer Protocol
- TCP/IP: Transfer Control Protocol / Internet Protocol
Nom de domaine
https://www.rtbf.be/recherche/article?q=culture
La combinaison entre au moins un mot et une extension(ex: .com, .be, .org, etc.) qui défini une adresse unique. Cela fonctionne comme une adresse composée du nom de la rue, d'un numéro et d'un code postal pour le web.
Sous-domaine
https://www.rtbf.be/recherche/article?q=culture
Un répertoire à l'intérieur de votre domaine principal. Cela permet d'organiser différentes sections d'un site web.
Le plus connu est www, souvent créé et utilisé à l'achat d'un nom de domaine.Dossier &
sous-dossier
https://www.rtbf.be/recherche/article?q=culture
Un dossier contient des pages secondaires, qui peut lui même contenir des sous-dossiers avec des pages ternaires.
Ceci peut être la réprésentation de l'architecture de vos fichiers, ou d'une schéma défini (routing).Page
https://www.rtbf.be/recherche/article?q=culture
La page est l'endroit actuel où se trouve l'utilisateur. La syntaxe peut varier selon les paramètres du serveur ou du fichier pointé (.html, .php, .jpg, .pdf, .css, etc.).
Paramètre(s) &
fragment
https://www.rtbf.be/recherche/article?q=culture
On peut retrouver des paramètres qui commence avec le symbole ? pour passer des données via l'url, et/ou un fragmant via le symbole # qui représente une portion particulière de la page courante.
Adresse IP
Un numéro d'identification unique attribué de façon permanente ou provisoire à chaque périphérique faisant partie d'un même réseau informatique utilisant l'Internet Protocol. Retenons 2 formats:
- IPV4:
172.016.254.001 (4 milliards de combinaisons) - IPV6:
2001 : 0DB8 : AC10 : FE01 : 0000 : 0000 : 0000 : 0000 (340 sextillion de combinaisons)
Normes de communication
Ces modèles décrivent des couches fonctionnelles nécessaires pour organiser et standardiser la communication entre systèmes informatiques. Retenons 2 modèles:
Technologies & techniques
HTML
HyperText Markup Language permet de mettre en place le contenu d'un site web à travers le DOM avec des balises. Ceci est interprété par le client.
Ceci est balise titre de premier niveau
Représente un paragraphe
Une règle essentielle est d'utiliser la bonne balise pour le bon contenu: la sémantique.
CSS
Cascading Style Sheets est un langage permettant de modifiant les styles de notre
Ceci est balise titre de premier niveau
Représente un paragraphe
h1{
// Change la couleur du texte
// des balises
color: crimson;
}
JavaScript
Ce langage permet de créer des intéractions avec l'HTML et dynamiser l'expérience web, comme définir une action à réaliser au clique d'un élément. À la base c'est un langage côté client, mais qui prend de plus en plus de place côté serveur avec l'environnement node.js.
⚠️ Évitez de raccourcir JavaScript par Java, ce sont 2 langages différents.
Ceci est balise titre de premier niveau
Représente un paragraphe
h1{
// Change la couleur du texte
// des balises
color: crimson;
}
// Récupère l'élément et l'enregistre
// pour réaliser des actions par la suite.
const title = document.querySelector('h1');
// Change le contenu texte de notre titre
title.textContent = 'Ce titre a un contenu dynamique'
Requête asynchrone
Cette technique permet de faire des requêtes en tâche de fond, ceci permet de charger du contenu de manière transparente et efficace. Il existe 2 techniques:
- AJAX: une version plus ancienne
- Fetch API: une version moderne
PHP
PHP: Hypertext Preprocessor est un langage côté serveur utilisé pour créer des sites web dynamiques et interagir avec des bases de données.
Nos outils
- Un navigateur
- Un éditeur de texte ou IDE (VS code)
- un serveur (local ou distant)
- un hébergement
- un FTP (Filezilla)
Liens utiles
Tutoriels
Hello World
Créons notre premier fichier index.html
Bye
