Web Development Practical Guide - TP Web SI3

Ce TP a pour objectif de vous familiariser avec la création et la gestion des feuilles de style CSS pour structurer et styliser une page web. Vous apprendrez à créer un fichier CSS, à le lier à une page HTML, et à appliquer différents styles aux éléments HTML tels que <body>, <nav>, <article>, <aside>, <header> et <footer>. Ce TP nécessite un éditeur de texte, un navigateur web pour visualiser les résultats, ainsi que des connaissances de base en HTML et CSS.

Objectifs

• Créer une feuille de style CSS et la relier à une page web.
• Appliquer des styles CSS aux différentes balises HTML.
• Utiliser les propriétés CSS de positionnement, de dimension, de couleur et de marge.
• Comprendre l’utilisation des sélecteurs d’identifiant (id) et de classe (class).
• Valider une page HTML avec un validateur officiel.

Prérequis et configuration

• Connaissances de base en HTML et CSS.
• Un éditeur de texte (ex : Visual Studio Code, Sublime Text, Notepad++).
• Un navigateur web récent pour tester la page (ex : Chrome, Firefox).
• Accès au validateur HTML : http://validator.w3.org.

Création et liaison de la feuille de style CSS

Commencez par créer un fichier nommé monstyle.css. Ce fichier contiendra toutes les règles CSS pour styliser votre page web. Ensuite, dans votre fichier HTML, liez cette feuille de style dans la section <head> avec la balise suivante :

<link rel="stylesheet" href="monstyle.css">

Cette étape est essentielle pour que les styles définis dans monstyle.css soient appliqués à votre page HTML.

Stylisation des blocs principaux

Appliquez les styles suivants dans votre fichier monstyle.css pour structurer la page :

Style de la balise <body>

Modifiez le style du corps de la page pour :

• Changer la couleur de fond en #E6E6FA.
• Fixer la largeur à 1335 pixels.
• Centrer horizontalement le contenu.

body {
  background-color: #E6E6FA;
  width: 1335px;
  margin: 0 auto;
}

Style du bloc <nav>

Appliquez les règles suivantes pour positionner et colorer le menu de navigation :

nav {
  float: left;
  width: 200px;
  height: 500px;
  background: #B1B6E4;
  margin-right: 17px;
}

Style du bloc <article>

Définissez ce bloc principal de contenu avec :

article {
  float: left;
  width: 750px;
  height: 500px;
  background: #8791EB;
  margin-right: 17px;
}

Style du bloc <aside>

Pour le bloc secondaire, appliquez :

aside {
  float: left;
  width: 250px;
  height: 500px;
  background: #949ACE;
}

Style du <header>

Ajoutez une marge de 50 pixels autour de l’en-tête :

header {
  margin: 50px;
}

Style du <footer>

Le pied de page doit avoir :

• Une couleur de fond #6669C1.
• Une hauteur de 100 pixels.
• Une largeur de 1234 pixels.
• Une marge de 50 pixels.

footer {
  background-color: #6669C1;
  height: 100px;
  width: 1234px;
  margin: 50px;
}

Espacement des titres et paragraphes

Pour améliorer la lisibilité, appliquez des marges intérieures aux titres et paragraphes :

Titres dans <article> et <aside>

Écartez les titres du bord gauche de 10 pixels :

article h1, article h2, article h3,
aside h1, aside h2, aside h3 {
  margin-left: 10px;
}

Paragraphes dans <article>

Écartez les paragraphes du bord gauche de 20 pixels :

article p {
  margin-left: 20px;
}

Ajout et utilisation d’identifiants (id) et de classes

Copiez le style suivant dans votre fichier CSS et appliquez les identifiants correspondants dans votre fichier HTML :

#content {
  margin: 50px;
}

#menu {
  margin: 20px;
  padding: 20px 10px 20px 10px;
  list-style: none;
}

#menu a {
  display: block;
  height: 1%;
  padding: 6px 10px 6px 10px;
  line-height: 1.5;
  font-size: .9em;
  text-decoration: none;
}

#menu a:hover, #menu a:focus {
  background: #8791EB;
}

Dans votre page HTML, assurez-vous que les éléments correspondants ont les attributs id="content" et id="menu" pour que ces styles soient appliqués.

Création d’une classe pour les puces

Créez une classe nommée liens pour modifier le style des puces de la liste des liens utiles en carré :

.liens {
  list-style-type: square;
}

Appliquez cette classe à la liste HTML correspondante :

<ul class="liens">
  <li>Lien 1</li>
  <li>Lien 2</li>
</ul>

Modification du style du texte des paragraphes de la zone centrale

Personnalisez l’apparence du texte dans la zone centrale (typiquement dans <article>) en modifiant les propriétés CSS telles que la police, la taille, la couleur, etc. Par exemple :

article p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #333333;
}

Adaptez ces valeurs selon vos préférences pour améliorer la lisibilité et l’esthétique.

Validation de la page HTML

Une fois votre page HTML et votre fichier CSS terminés, validez votre page HTML avec le validateur officiel :

• Ouvrez http://validator.w3.org.
• Soumettez votre fichier HTML ou l’URL de votre page.
• Corrigez les erreurs éventuelles signalées pour assurer la conformité aux standards du web.

Résultats attendus

Après avoir suivi ce TP, vous devriez obtenir une page web structurée avec :

• Un arrière-plan de couleur lavande claire (#E6E6FA) centré dans la fenêtre.
• Un menu de navigation à gauche, en bleu clair (#B1B6E4), de 200px de large et 500px de haut.
• Un bloc principal <article> en bleu moyen (#8791EB), 750px de large et 500px de haut, flottant à gauche avec une marge à droite.
• Un bloc <aside> en bleu-gris (#949ACE), 250px de large et 500px de haut, flottant à gauche.
• Un en-tête avec une marge de 50px autour.
• Un pied de page violet foncé (#6669C1), 1234px de large, 100px de haut, avec une marge de 50px.
• Des titres dans <article> et <aside> espacés de 10px du bord gauche.
• Des paragraphes dans <article> espacés de 20px du bord gauche.
• Une liste de liens avec des puces carrées si la classe liens est appliquée.
• Un menu stylisé avec des liens affichés en bloc, avec un effet au survol.

Pièges courants

• Oublier de lier la feuille de style CSS : Sans la balise <link> dans le <head>, aucun style ne sera appliqué.
• Mauvais sélecteurs CSS : Vérifiez que vous utilisez bien les bons sélecteurs (balises, id, classes) correspondant à votre HTML.
• Problèmes de flottement : Les éléments flottants (<nav>, <article>, <aside>) doivent être correctement dimensionnés et marginés pour éviter le chevauchement.
• Largeurs et marges incohérentes : Respectez les dimensions indiquées pour éviter que le contenu déborde ou ne soit mal aligné.
• Ne pas valider la page HTML : Des erreurs HTML peuvent empêcher le bon rendu des styles CSS.
• Confusion entre marge et padding : La marge (margin) crée un espace extérieur, tandis que le padding crée un espace intérieur à l’élément.