Florian/SNT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b1b4e0ba93b4e73f3e64ec5e4770ab50fe806c8b
SNT/sequences/web/tp/tp3_css_ma_page.md
Florian Mathieu 0e649c1adf Refonte des TP Web pour SNT seconde 
- Corrige les erreurs CSS (radius-border, prefixes vendeur obsoletes)
- Corrige la typo "La ciel" et les balises dt→dl dans index.html
- Ajoute les vrais liens Wikipedia pour les grands noms
- Harmonise les references au lycee Charlotte Perriand
- Met a jour l'annee dans INTRODUCTION.md (2024→2025)
- Remplace les anciens TP (PDFs niveau NSI/BTS) par 3 nouveaux TP adaptes :
  - TP1 : Decouverte du HTML (structure, balises, CSS)
  - TP2 : Experience utilisateur (analyse UX, bonnes pratiques)
  - TP3 : Ma premiere page web en CSS (mini-projet progressif)
- Ajoute le schema client/serveur et les templates de demarrage TP3
- Supprime les anciens TP 2/3/4 et intro.pdf (gardes en NSI)
- Met a jour le README avec le nouveau sommaire

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 10:11:03 +01:00

7.8 KiB
Raw Blame History

TP 3 : Ma premiere page web en CSS

Objectifs

  • Creer une page web personnelle en HTML
  • Decouvrir le CSS pour la mise en forme
  • Appliquer des couleurs, des polices, des bordures et des marges
  • Decouvrir les balises semantiques HTML5

Presentation du projet

Vous allez creer votre propre page web sur le theme de votre choix :

  • Un sport
  • Un artiste ou un genre de musique
  • Un pays ou une destination de voyage
  • Un jeu video
  • Tout autre sujet qui vous passionne !

Vous partirez d'un fichier HTML de base (tp3_template.html) et d'un fichier CSS (tp3_style.css) que vous allez completer etape par etape.

Preparation

  1. Ouvrez les fichiers tp3_template.html et tp3_style.css dans Notepad++
  2. Ouvrez tp3_template.html dans votre navigateur
  3. A chaque modification, sauvegardez dans Notepad++ (Ctrl+S) puis rafraichissez le navigateur (F5)

Etape 1 : La structure HTML (15 min)

Consigne

Ouvrez le fichier tp3_template.html. Vous verrez une structure de base deja en place. Votre travail est de remplir le contenu selon votre theme.

A faire

  1. Modifiez le titre de la page (balise <title>) avec le nom de votre sujet
  2. Modifiez le titre principal (<h1>) avec le nom de votre sujet
  3. Redigez le premier paragraphe : presentez votre sujet en 2-3 phrases
  4. Completez la section "Pourquoi j'aime..." :
    • Modifiez le sous-titre <h2>
    • Ajoutez au moins 3 elements dans la liste <ul>
  5. Ajoutez une image :
    • Trouvez une image libre de droits sur Internet
    • Enregistrez-la dans le meme dossier que votre fichier HTML
    • Completez la balise <img> avec le bon chemin et une description
  6. Ajoutez des liens :
    • Dans la section "Pour en savoir plus", ajoutez au moins 2 liens vers des sites en rapport avec votre sujet

Verifiez !

Sauvegardez et rafraichissez le navigateur. Votre page doit afficher :

  • Un titre
  • Un paragraphe de presentation
  • Une liste a puces
  • Une image
  • Des liens cliquables

Etape 2 : Decouvrir le CSS (15 min)

Comment ca marche ?

Le fichier tp3_style.css est deja lie a votre page HTML grace a cette ligne dans le <head> :

<link rel="stylesheet" href="tp3_style.css" />

Le CSS s'ecrit sous cette forme :

selecteur {
    propriete: valeur;
}

Le selecteur cible un element HTML. La propriete definit ce qu'on modifie. La valeur definit comment on le modifie.

A faire

Ouvrez tp3_style.css et effectuez les modifications suivantes :

1. Couleur de fond de la page

Trouvez la regle body et modifiez la couleur de fond (background-color). Choisissez une couleur qui correspond a votre theme !

Exemples de couleurs :

  • #f0f8ff (bleu tres clair)
  • #fff8dc (creme)
  • #f0fff0 (vert tres clair)
  • #fff0f5 (rose tres clair)

Outil pratique : https://htmlcolorcodes.com/fr/

2. Couleur et police du titre

Modifiez la regle h1 :

  • Changez la couleur du texte avec color
  • Changez la police avec font-family (exemples : Arial, Georgia, Verdana, "Trebuchet MS")

3. Couleur du texte

Modifiez la regle p pour changer la couleur des paragraphes.

4. Style des liens

Modifiez la regle a pour changer la couleur des liens. Essayez aussi d'enlever le soulignement :

a {
    color: darkorange;
    text-decoration: none;
}

Verifiez !

Votre page devrait maintenant avoir :

  • Une couleur de fond personnalisee
  • Un titre colore avec une police de votre choix
  • Des paragraphes d'une couleur harmonieuse
  • Des liens d'une couleur differente

Etape 3 : Ameliorer la presentation (15 min)

Les marges

En CSS, deux proprietes controlent l'espace autour des elements :

  • margin : espace exterieur (entre l'element et ses voisins)
  • padding : espace interieur (entre le bord de l'element et son contenu)
+------ margin ------+
|  +--- padding ---+ |
|  |   Contenu     | |
|  +---------------+ |
+--------------------+

A faire

1. Ajoutez du padding au body pour que le contenu ne colle pas aux bords :

body {
    /* ... vos proprietes existantes ... */
    padding: 20px 40px;
}

2. Ajoutez une bordure et un fond au titre :

h1 {
    /* ... vos proprietes existantes ... */
    background-color: #333;
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
}

3. Mettez en forme l'image :

img {
    border: 3px solid #333;
    border-radius: 10px;
    max-width: 400px;
}

max-width: 400px empeche l'image d'etre trop grande. border-radius arrondit les coins.

4. Stylisez la liste :

Ajoutez cette regle dans votre CSS :

ul {
    background-color: #eee;
    padding: 15px 30px;
    border-radius: 5px;
}

Verifiez !

Votre page devrait maintenant etre bien plus agreable visuellement, avec des espaces, des bordures et des couleurs harmonieuses.

Etape 4 : Les sections HTML5 (15 min)

Introduction aux balises semantiques

HTML5 propose des balises qui donnent du sens a la structure de la page :

Balise Role
<header> En-tete de la page (titre, logo, banniere)
<nav> Zone de navigation (menu, liens principaux)
<main> Contenu principal de la page
<footer> Pied de page (auteur, mentions, liens secondaires)

Ces balises fonctionnent comme des <div> mais elles indiquent clairement le role de chaque section.

A faire

Dans votre fichier HTML, reorganisez votre page avec ces balises :

  1. Entourez votre titre <h1> avec <header> :
<header>
    <h1>Mon sujet</h1>
</header>
  1. Ajoutez un <footer> en bas de page :
<footer>
    <p>Page creee par [votre prenom] - SNT 2025</p>
</footer>
  1. Stylisez le footer dans votre CSS :
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 30px;
    border-radius: 5px;
}

Bonus : Creer une deuxieme page

Si vous avez termine en avance, voici un defi supplementaire :

  1. Creez un nouveau fichier page2.html avec la meme structure de base (copiez tp3_template.html)
  2. Liez-le au meme CSS (tp3_style.css)
  3. Ajoutez du contenu sur un aspect precis de votre sujet (par exemple : les regles d'un sport, la discographie d'un artiste, les personnages d'un jeu video...)
  4. Reliez les deux pages avec des liens :
    • Dans tp3_template.html, ajoutez : <a href="page2.html">Voir la page 2</a>
    • Dans page2.html, ajoutez : <a href="tp3_template.html">Retour a l'accueil</a>

Felicitations, vous avez cree votre premier site web de plusieurs pages !

Recapitulatif des proprietes CSS vues dans ce TP

Propriete Effet Exemple
background-color Couleur de fond background-color: #f0f0f0;
color Couleur du texte color: navy;
font-family Police de caracteres font-family: Arial;
font-size Taille du texte font-size: 18px;
text-align Alignement du texte text-align: center;
text-decoration Decoration (soulignement...) text-decoration: none;
padding Espace interieur padding: 10px;
margin Espace exterieur margin: 20px;
border Bordure border: 2px solid black;
border-radius Coins arrondis border-radius: 8px;
max-width Largeur maximale max-width: 400px;

Licence Creative Commons
Ces cours sont mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.