Exercice n°1 Exercice n°2 Exercice n°3 Exercice n°4 Intro Html Intro Css

Mise en situation

Débutons un petit projet qui nous servira de fil conducteur tout au long du cours de webmestre.

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érent éléments et par quelques réflexions sur ses menus et la manière d'y naviguer.

Exercice n°1 : structurer

Votre page d'accueil comprend un titre principal « Bienvenue en Franche Comté »,
puis deux titres secondaires « Une belle région française » et « Un patrimoine naturel », associée 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 ?

Voici un exemple de code final pour cette page d'accueil.

<h1>Bienvenue en Franche Comté</h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<h2>Un patrimoine naturel</h2>
<p>[Paragraphe associé à cet autre sous-titre de niveau 2.]</p>
<p>Pied de page et <a href="#">Mentions légales</a></p>

Rappelons que contrairement aux autres éléments de type bloc, les balises de titres et de paragraphes ne peuvent pas renfermer de bloc.
C'est pourquoi il n'est pas possible d'imbriquer un paragraphe dans une balise titre.

Résultat

Bienvenue en Franche Comté

Une belle région française

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

Un patrimoine naturel

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

Pied de page et Mentions légales

Ouvrages de références

• « More on CSS » par Eric Meyer
  (© CampusPress), 2005.
• « CSS 2 Pratique du design web » par Raphaël Goetter
  (© Eyrolles), 2009.

Haut de page