Organiser une page web en blocs
L’utilisation conjointe de la balise et de CSS permet de définir l’organisation géographique d’une page web en différents blocs.
Du côté HTML, un bloc est défini par une balise que l’on peut nommer à l’aide de l’attribut id ou class :
• si la balise n’est utilisée qu’une fois dans le fichier, ou • si la balise est utilisée plusieurs fois dans le fichier.
Le nommage des balises permet de définir différents blocs grâce aux propriétés CSS. Pour une balise nommée par l’attribut id, on défini les propriétés CSS de la façon suivante :
#nom { propriete1: valeur1 ; propriete2 : valeur2 ;
…
}
Pour une balise nommée par l’attribut class, on défini les propriétés CSS de la façon suivante :
.nom { propriete1: valeur1 ; propriete2 : valeur2 ;
…
}
Pour illustrer ces notions délicates nous allons considérer un exemple classique d’organisation géographique d’une page. Le but est d’obtenir le résultat ci-dessous :

L’organisation de cette page est la suivante :
• une barre de titre (en jaune)
• un menu (en vert)
• un contenu (en blanc)
• un pied de page (en rouge)

Dans le code HTML, ces différents blocs sont définis par autant de balises différentiées par leurs noms (attribut id ou class). Leurs propriétés (taille, position etc …) sont définies par des propriétés CSS. Dans cet exemple, nous nommerons les balises par l’attribut id.
Créez une nouvelle page html liée à une nouvelle feuille CSS (voir polycopHTMLCSS.doc).
N’oubliez pas la structure de base (balises , et ) ni la balise pour lier la feuille CSS à la page HTML.
Dans la feuille CSS, commençons par définir un bloc qui contiendra tous les autres, que nous nommons conteneur. Dans cet exemple, il s’agit uniquement de définir la largeur de notre page web (vous pourrez éventuellement le raffiner par la suite). Nous fixons cette largeur à 1200 pixels par la déclaration CSS suivante :
#conteneur { width:1200px; }
Dans la page HTML, nous « activons