Séparer le fond et la forme avec HTML et CSS
CHAPITRE 2
© Groupe Eyrolles, 2005
33
Mise en situation
Débutons un petit projet qui nous servira de fil conducteur tout au long des chapitres suivants.
Il s’agit de concevoir un site web de A à Z, de sa structure à sa mise en page complète, en passant par le placement des différents éléments et par quelques
réflexions sur ses menus et la manière d’y naviguer.
Endossez l’identité d’un Alsacien amoureux (à juste titre) de sa région. Votre
projet consiste à concevoir un site web de tourisme en Alsace comprenant des
textes de présentation, des liens et illustrations, ainsi que des photographies de
cette belle région.
Exercice numéro 1
Les balises de titres sont les balises de bloc

à

. Le titre principal sera donc
défini à l’aide de la balise

et les titres secondaires avec

. Quant aux paragraphes, ils seront délimités par la balise de bloc

.
Pour le pied de page, on préférera encore une balise de paragraphe à la balise
générique

.
Voici un exemple de code final pour cette page d’accueil :
Rappelons le cas particulier des balises de titres et de paragraphes : contrairement
aux autres éléments de type bloc, elles ne peuvent pas renfermer des blocs. Il n’est
donc pas possible d’imbriquer un paragraphe dans une balise de titre.
Votre page d’accueil comprend un titre principal (« Bienvenue en Alsace »), puis
deux titres secondaires (« Une belle région française » et « Un patrimoine
considérable »), associés chacun à un paragraphe de texte explicatif. Pour finir,
un pied de page contiendra une présentation de votre société et un lien vers
diverses précisions juridiques.
Comment structurer cette page d’accueil en HTML ?

Bienvenue en Alsace

Une belle région française

[Paragraphe associé au sous-titre de niveau 2.]

Un patrimoine considérable

[Paragraphe associé à cet autre sous-titre de niveau 2.]

Pied de page et Mentions légales