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)​

ExercicesTout déplier
  1. 1
    Créez un dossier nommé tp_html_css.
  2. 2
    Dans ce dossier, créez deux fichiers :
    • index.html
    • style.css
  3. 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. 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​

ExercicesTout déplier
  1. 1
    Dans la balise <head> de votre fichier HTML, reliez la feuille de style style.css.
  2. 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.