Ce cours d’informatique pour le Tronc Commun Scientifique et Technologique initie aux technologies du Web : la structure d’un document HTML5 (balises imbriquées, titres h1-h6, paragraphes, listes, images et hyperliens) et la mise en forme graphique avec les feuilles de style CSS3 (sélecteurs, couleurs, typographie et modèle de boîte), avec un mini-projet guidé de création d’une page Web.
💻 Repères fondamentaux : HTML5 et CSS3 (Aperçu direct)
- Structure minimale d’une page HTML5 :
<!DOCTYPE html><html><head>...</head><body>...</body></html>. - Balises indispensables : Titres (
<h1>à<h6>), Paragraphes (<p>), Liens hypertextes (<a href='url'>), Images (<img src='chemin' alt='description'>), Listes à puces (<ul><li>). - Rôle de CSS3 : Séparation absolue entre le contenu/structure (HTML) et la présentation visuelle (CSS). Déclaration d’une règle :
selecteur { propriete: valeur; }. - Le modèle de boîte (Box Model) : Le contenu est entouré successivement par : le Padding (marge interne), la Border (bordure), et le Margin (marge externe séparant les éléments).
1. Compétences indispensables pour le projet et contrôle sur machine
- Lier correctement la feuille de style externe au fichier HTML via la balise
<link rel='stylesheet' href='style.css'>dans le<head>. - Ne jamais oublier l’attribut obligatoire
altsur les images pour l’accessibilité et le référencement. - Distinguer les balises de type bloc (prennent toute la largeur, ex:
<div>, <p>, <h1>) des balises de type en-ligne (ex:<span>, <a>, <strong>).
2. Documents et exercices à télécharger (PDF)
Consultez et téléchargez les ressources pédagogiques officielles ci-dessous :
| Titre du document | Nature de la ressource | Accès |
|---|---|---|
| Développement Web HTML5 et CSS3 — Guide complet des balises et du stylisme | Document PDF | Télécharger PDF |
| Fiche mémo — Sélecteurs CSS, modèle de boîte (box-model : margin, padding, border) et couleurs | Résumé de cours | Télécharger PDF |
| Série de TP corrigés — Création d’une page Web personnelle complète avec texte, images et liens | Corrigé pas à pas | Télécharger PDF |
3. Questions fréquentes des élèves (FAQ)
Q : Quelle est la différence entre un sélecteur de classe (.classe) et un sélecteur d’ID (#id) en CSS ?
Une classe (précédée d’un point) peut être réutilisée sur plusieurs éléments HTML d’une même page, tandis qu’un identifiant ID (précédé d’un dièse) doit être strictement unique sur toute la page.
Télécharger la ressource
Version PDF prête à consulter ou imprimer.