Bases du développement web : HTML, CSS et
JavaScript
Le HTML (HyperText Markup Language) est le langage de balisage utilisé pour structurer le contenu
d’une page web 1 . Il définit l’ossature du document (titres, paragraphes, listes, images, etc.). Le
navigateur interprète le code HTML pour afficher la page. Un fichier HTML peut être statique ( .html )
ou généré dynamiquement par un serveur (PHP, ASP, etc.). Par convention et pour assurer la
compatibilité, on met les balises et attributs en minuscules 2 . Par exemple, une page HTML minimale
ressemble à ceci :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de la page</title>
</head>
<body>
<h1>Titre principal de la page</h1>
<p>Ceci est un paragraphe de texte.</p>
</body>
</html>
• Structure de base : <html> encadre tout le document ; <head> contient les métadonnées
(titre, encodage, liens vers CSS/JS, etc.) 3 ; <body> contient le contenu visible.
• Titres et paragraphes : <h1> à <h6> pour les titres (du plus important <h1> au plus petit
<h6> ), et <p> pour les paragraphes 4 .
• Liens (hyperliens) : <a href="URL">Lien</a> crée un lien cliquable. On peut ajouter
target="_blank" pour l’ouvrir dans un nouvel onglet. Exemple : <a href="https://
example.com" target="_blank">Visiter Example</a> .
• Images : <img src="image.jpg" alt="Description"> insère une image. L’attribut alt
fournit un texte alternatif (important pour l’accessibilité).
• Listes : pour les listes à puces on utilise <ul> (unordered list) et pour les listes numérotées
<ol> (ordered list), avec <li> pour chaque élément de liste 5 .
• Tableaux : <table> contient le tableau, <tr> chaque ligne, <td> chaque cellule, et <th>
les en-têtes de colonnes 6 .
• Formulaires : <form> regroupe les champs de saisie ( <input> , <textarea> , <button> ,
etc.) permettant de recueillir des données (nom, e-mail, envoi de fichier…). Chaque champ a un
attribut name qui sera envoyé au serveur.
• Éléments sémantiques (HTML5) : pour enrichir la structure, HTML5 propose des balises comme
<header> , <nav> , <section> , <article> , <aside> , <footer> (respectivement en-
tête, menu de navigation, section thématique, article indépendant, contenu secondaire, pied de
page) 7 . Leur usage améliore la lisibilité du code et le référencement.
Conseil pratique : Séparez toujours clairement le contenu (HTML) de la mise en forme
(CSS) 8 . Par exemple, évitez de colorer ou de positionner les éléments directement dans
1
le HTML; utilisez des feuilles de style CSS externes ou internes pour faciliter la
maintenance du site.
Exercice simple (HTML) : Créez une page index.html comportant au moins un titre <h1> , un
paragraphe <p> et une image. Ajoutez également une liste à puces <ul> de trois éléments. Vérifiez
la validité de votre code avec le validateur W3C 9 .
CSS (Feuilles de style en cascade)
Le CSS (Cascading Style Sheets) est le langage de feuilles de style qui décrit la présentation (mise en
forme) d’un document HTML 10 . Il permet de modifier les couleurs, les polices, les marges,
l’alignement, etc., sans toucher au contenu HTML. Voici les principes de base :
• Insertion du CSS : il existe trois façons d’ajouter du style : (1) en ligne, via l’attribut style dans
les balises HTML (ex. <p style="color:blue;">Texte</p> ) 11 ; (2) dans un bloc
<style>…</style> placé dans la section <head> du document HTML 12 ; (3) via un fichier
externe CSS relié avec <link rel="stylesheet" href="styles.css"> dans <head> 13 .
L’approche extern est recommandée pour appliquer facilement le même style à plusieurs pages.
• Sélecteurs CSS : un sélecteur cible l’élément à styliser. On peut cibler une balise directement
( h1 , p , div , etc.), un identifiant unique avec #monID (ex. <div id="monID"> visé par
#monID { ... } ), ou une classe avec .maClasse (ex. <p class="maClasse"> visé par
.maClasse { ... } ) 14 . Les règles CSS s’écrivent généralement au format sélecteur
{ propriété: valeur; ... } . Exemple :
/* Style pour toutes les balises <p> */
p { color: sienna; margin-left: 20px; }
/* Style pour l’élément ayant id="chap1" */
#chap1 { padding: 10px; border: 5px solid gray; }
/* Style pour tous les éléments de classe "important" */
.important { font-weight: bold; color: red; }
• Propriétés de style courantes : on peut régler la police ( font-size , font-family , font-
style , etc.), les couleurs ( color pour le texte, background-color pour le fond), les
bordures ( border ), les marges et le padding (espace intérieur) 15 . Par exemple, body
{ background-color: lightblue; } colore le fond de la page.
• Couleurs : elles peuvent être spécifiées en hexadécimal ( #RRGGBB ), par noms ( red , blue ,
etc.), ou via le modèle RGB ( rgb(255,0,0) pour le rouge) 16 .
• Modèle de boîte (Box Model) : chaque élément HTML est une boîte avec plusieurs couches 17 :
• Contenu (texte/images) affiché au centre.
• Padding (rembourrage) : espace interne transparent autour du contenu.
• Bordure (border) : contour qui entoure le contenu + padding.
• Marge (margin) : espace extérieur transparent autour de la boîte, séparant l’élément des autres
éléments voisins 17 .
CSS Box Model
Les propriétés margin , padding et border influencent la taille totale de la boîte.
2
Conseil pratique : Pour gérer la mise en page responsive (adaptée aux mobiles), ajoutez
la balise meta <meta name="viewport" content="width=device-width,
initial-scale=1.0"> dans <head> . Testez également votre design sur différents
navigateurs et résolutions, car le rendu du CSS peut varier 9 .
Exercice simple (CSS) : Prenez votre page HTML précédente. Créez un fichier styles.css externe et
liez-le dans <head> . Dans ce fichier, modifiez la couleur du texte <body> et la taille de police des
titres <h1> et <p> . Testez également la modification du padding et de la marge d’un paragraphe.
Enfin, vérifiez la validité de votre CSS avec l’outil de validation du W3C 9 .
JavaScript
JavaScript est un langage de script léger, interprété côté client et principalement utilisé pour ajouter de
l’interactivité aux pages web 18 . Le code JavaScript est exécuté par le moteur du navigateur (après que
le HTML et le CSS ont été chargés) 19 . Il ne doit pas être confondu avec Java, ce sont deux langages
distincts 18 . JavaScript permet d’afficher des messages, de modifier dynamiquement le contenu de la
page, de répondre à des événements (clics, saisies, etc.), et même d’accéder à des APIs complexes
(géolocalisation, carte, vidéo…).
• Insertion de JavaScript : on place généralement le code JavaScript dans une balise <script>
(avec attribut type="text/javascript" facultatif en HTML5). Le <script> peut être dans
<head> , dans <body> , ou dans un fichier .js externe référencé avec <script
src="script.js"></script> 20 . Pour que le code interagisse avec le DOM, on veillera à
l’exécuter après le chargement du contenu (par exemple en plaçant <script> juste avant </
body> ou en écoutant l’événement DOMContentLoaded ).
• Syntaxe de base : JavaScript est sensible à la casse (majuscule/minuscule) 21 . Une instruction
se termine par un point-virgule (optionnel en fin de ligne). Les variables peuvent être déclarées
avec var , let ou const (pour les bases on utilisait var ). Exemple :
var x = 5;
var message = "Hello"; // Chaîne de caractères
var total = x + 10; // Addition numérique
var salutation = "Hi " + message; // Concaténation de chaînes
Les opérateurs arithmétiques + , - , * , / s’utilisent comme en mathématiques, et +
concatène les chaînes. Les opérateurs de comparaison ( == , != , < , > , <= , >= ) et
logiques ( && , || , ! ) permettent de tester des conditions 22 23 .
• Instructions et affichage : on peut afficher du contenu en JavaScript de plusieurs façons. Par
exemple, document.write() écrit directement dans la page HTML (généralement utilisée à
des fins pédagogiques) 24 , tandis que console.log() écrit dans la console de
développement du navigateur. Voici un exemple simple qui écrit un titre et deux paragraphes :
<script>
document.write("<h1>Bonjour</h1>");
document.write("<p>Paragraphe 1</p>");
3
document.write("<p>Paragraphe 2</p>");
</script>
• Structures de contrôle : JavaScript dispose des mêmes structures basiques qu’en d’autres
langages : instructions if…else pour la conditionnelle, for ou while pour les boucles, etc.
Exemples de condition :
if (age < 18) {
console.log("Mineur");
} else {
console.log("Majeur");
}
• Fonctions : on définit un bloc réutilisable avec function nomFonction(param1, param2)
{ /* code */ } . Par exemple :
function saluer(nom) {
alert("Bonjour, " + nom + " !");
}
saluer("Alice"); // Affiche une alerte "Bonjour, Alice !"
Une fonction est exécutée lorsqu’on l’appelle, ou en réponse à un événement. Les parenthèses
sont obligatoires même si la fonction n’a pas de paramètre 25 .
• Événements (Events) : ce sont des actions détectées par le navigateur (clic de souris,
chargement de page, mouvement, validation de formulaire, saisie clavier, etc.). On associe du
code JavaScript à ces événements. Par exemple, l’attribut onclick dans un bouton ou un lien
déclenche du code quand l’utilisateur clique. L’événement onload se produit lorsque la page
est entièrement chargée 26 , onchange lors du changement de valeur d’un champ de
formulaire, onfocus/onblur lorsqu’un champ reçoit ou perd le focus, onsubmit au moment
de l’envoi d’un formulaire, etc. 27 26 . Par exemple :
<button onclick="afficherAlerte()">Cliquez ici</button>
<script>
function afficherAlerte() {
alert("Bouton cliqué !");
}
</script>
Conseil pratique : Pour déboguer du JavaScript, utilisez la console du navigateur (F12).
Testez toujours que votre script fonctionne avec JavaScript activé. N’oubliez pas qu’un
mauvais script (boucle infinie, erreurs de syntaxe) peut bloquer la page. Soyez rigoureux
sur la syntaxe (points-virgules, accolades). Les navigateurs modernes supportent
l’ECMAScript 2015+, mais pour la compatibilité, vérifiez au besoin avec caniuse.com.
4
Exercice simple (JavaScript) : Sur votre page HTML/CSS, ajoutez un bouton <button> ayant l’attribut
onclick . Dans ce code, appelez une fonction JavaScript qui modifie le contenu d’un paragraphe ou
affiche une alerte. Par exemple, écrivez une fonction qui change le texte de <p id="demo"> en
Bonjour le monde ! via document.getElementById("demo").textContent . Testez
également un petit script if avec prompt() pour demander l’âge de l’utilisateur et afficher un
message correspondant.
Ressources complémentaires
• MDN Web Docs (Mozilla) : documentation riche en français pour HTML, CSS et JavaScript 1 10
18 .
• W3C Validator : vérificateur de code HTML/CSS pour assurer la conformité aux standards 9 .
• W3Schools : tutoriels et exemples pratiques interactifs (intégration rapide de code et exercices).
• OpenClassrooms, Codecademy, Grafikart, etc. : cours en ligne gratuits sur HTML/CSS/JS.
Ces langages sont la base du développement web et utiles en géomatique (par exemple pour créer des
cartes web interactives avec Leaflet ou OpenLayers qui utilisent JavaScript et manipulent du HTML/CSS).
Assurez-vous de bien comprendre chaque concept avec des exemples pratiques et n’hésitez pas à
expérimenter dans votre navigateur.
Sources : Cours original « HTML, CSS, JS basics » 28 15 (extraits et traduction), et documentation MDN
1 10 18 .
1 Notions de base en HTML - Apprendre le développement web | MDN
https://developer.mozilla.org/fr/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content
2 3 4 5 6 7 8 9 11 12 13 14 15 16 17 20 21 22 23 24 25 26 27 28
02dubois_HTML_CSS_JS_basics_2023.pdf
file://file-FH6CY5jdwx2KGTJAPa7NpE
10 CSS : Feuilles de style en cascade | MDN
https://developer.mozilla.org/fr/docs/Web/CSS
18 JavaScript | MDN
https://developer.mozilla.org/fr/docs/Web/JavaScript
19 Qu'est-ce que le JavaScript ? - Apprendre le développement web | MDN
https://developer.mozilla.org/fr/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
