TP : premiers sélecteurs et premières règles

Voici en pdf l'objectif du tp : pdf

I Placement des id et des classes

1) Charger la première page HTML page01.html et enregistrez-la dans votre dossier de travail.

2) Ouvrez sous firefox, et lancer firebug pour observer la structure ci-dessous

Placer sur la div englobante l'id "container"

et sur les suivantes :

header, content, sidebar1, footer

3) Dans la "sidebar1",

Placer sur chacunes des div enfants, les classes respectives "article" et "post"

Placer un id "recherche" sur le champ de saisie.

4) Dans la "header", placer un id "nav" à la liste

II Déclarations générales

1) Placer sur le body, la famille de polices de caractère "Lucida Grande", Arial, sans-serif et de taille "small"

2) Enlever aux liens leurs soulignements, et aux images contenues dans des liens, leur bordure

III Premières déclarations sur la barre de navigation

Sur la liste "nav" :

Sur les items de cette liste

IV Les titres du "content"

Voici la palette de couleur de la page

  1. #00C
  2. #EFBC15
  3. #8E9794
  4. #DA944E

Voici un élément de la page montrant le titre h1 et le titre h2 du "content"

A l'aide de sélecteurs composés, programmer

  1. la taille des caractères (en em)
  2. les marges, les padding
  3. le fond, la couleur
  4. la bordure

pour obtenir l'aspect ci-contre

VI sidebar1

La sidebar1 a pour largeur 17em

Elle contient un formulaire, et des div de classe.article et .post

Ajuster en utilisant des sélecteurs composés pertinents

  1. le fond de ces éléments,
  2. la couleur des caractères
  3. le fond des titres h3
  4. les paddings et marges nécessaires

Il faut aussi ajuster la largeur de la zone de saisie à 9em

 

 

 

 

 

VII Le calendrier

Il s'agit d'un tableau (<table>) inclus dans la div de classe .post

A l'aide d'un sélecteur composé pertinent

VIII Le pied de page

Les liens y sont en gras non-soulignés