Aller au contenu principal

TP3 – Créer une page web de présentation (HTML + CSS)

Objectifs
  • Comprendre la structure d’une page web HTML
  • Mettre en forme une page web à l’aide du CSS
  • Faire le lien entre contenu (HTML) et présentation (CSS)
  • Créer une page web cohérente et lisible
Pré-requis
  • Savoir créer et enregistrer un fichier HTML
  • Connaître les balises HTML de base : html, head, body, h1 à h3, p, a, img, ul, li
  • Avoir déjà vu la notion de feuille de style CSS
Contexte

Vous devez réaliser une page web de présentation sur un thème libre (au choix) :

  • un loisir ou une passion
  • un pays ou une ville
  • un animal
  • un objet technologique
  • un métier

La page devra être réalisée en HTML et CSS, avec une séparation claire entre le contenu et la mise en forme.

Structure HTML (le contenu)​

  1. Créez un dossier nommé tp_html_css.
  2. Dans ce dossier, créez deux fichiers :
    • index.html
    • style.css
  3. Dans le fichier index.html :
    • Ajoutez la structure minimale d’une page HTML :
    • <!DOCTYPE html>
    • <html>
    • <head>
    • <body>
    • Donnez un titre à la page avec la balise <title>.
  4. Dans le <body>, ajoutez :
    • un titre principal (<h1>)
    • au moins deux sous-titres (<h2>)
    • plusieurs paragraphes (<p>)
    • une liste (<ul> ou <ol>) contenant au moins 3 éléments
    • au moins une image (<img>)
    • au moins un lien (<a>) vers un site externe

👉 À ce stade, la page doit s’afficher correctement dans le navigateur, même sans mise en forme.

Lier le CSS à la page​

  1. Dans la balise <head> de votre fichier HTML, reliez la feuille de style style.css.
  2. Vérifiez que le CSS est bien pris en compte (par exemple en changeant la couleur du texte).

Mise en forme avec le CSS​

Dans le fichier style.css, appliquez les règles suivantes.

Style général​

  • Modifier la couleur de fond de la page
  • Changer la police d’écriture
  • Modifier la couleur du texte

Titres​

  • Le titre <h1> doit être centré
  • Les titres <h2> doivent avoir une couleur différente du texte principal

Paragraphes​

  • Modifier la taille du texte
  • Aligner ou justifier le texte

Image​

  • Définir une largeur maximale
  • Ajouter une bordure
  • Centrer l’image

Liens​

  • Changer la couleur des liens
  • Supprimer ou modifier le soulignement

Pseudso-classes​

Utiliser des pseudo-classes pour modifier le style des éléments lors :

  • de survol ;
  • de clic.
Rappel

Le but n’est pas de faire le plus beau site possible, mais de comprendre comment HTML et CSS fonctionnent ensemble.