Mise en situation : éléments clés de la page
Continuons le projet de site touristique sur la Franche Comté en reprenant la structure établie à l'
Exercice n°4 :
<body>
<ul>
<li><a href="#">Retour à l'accueil</a></li>
<li><a href="#">Présentation de la région</a></li>
<li><a href="#">Historique Comtois</a></li>
<li><a href="#">Gastronomie locale</a></li>
<li><a href="#">Hôtels et gîtes</a></li>
<li><a href="#">Photographies</a></li>
</ul>
<h1><a href="photos.htm" title="photos de Franche Comté">Bienvenue en Franche Comté</a></h1>
<h2>Une belle région française</h2>
<p>[Paragraphe associé au sous-titre de niveau 2.]</p>
<a href="photos.htm" title="lien vers photos de Franche Comté"><img src="francheComte.jpg"></a>
<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>
</body>
Cette deuxième étape nous amène aux fondations de la structuration et de la mise en page du document web.
Nous nous emploierons ici à « préparer le terrain » et à signaler certains éléments clés du document, en leur donnant un nom pour mieux les désigner par la suite avec des sélecteurs CSS...
Exercice 5 : éléments clés - Solution
La première étape consiste à distinguer les différents éléments significatifs du document
en les nommant via un identifiant (id).
Nous les démarquerons les uns des autres selon la fonction et l'apparence que l'on prévoit pour eux plus tard
(lesquelles seront exprimées par des styles CSS).
Combien d'éléments pensez-vous devoir désigner au minimum ?
Mené à bien, ce type d'exercice produit un document bien réalisé et compréhensible par tous.
Il s'agit d'identifier un nombre d'objet minimal permettant de mettre en page facilement tout le document,
sans tomber dans le piège consistant à identifier chaque élément de la page par un identifiant ou une classe.
Haut de page
Ouvrages de références
Auto-entrepreneur.
Access®, Excel®, Powerpoint®, Word® & Windows®
sont des produits et marques déposés
propriété de
Microsoft, Inc.
Photoshop® &
Dreamweaver
® sont des produits et marques déposés propriété de
Adobe System. | 
