skip to: contenu de la page | liens sur cette page | site navigation | footer (site information)

Site personnel

RATP | MÉTÉO | ASTRO & MUSIC

 


FORMATEUR - WEBMESTRE - Tél : 06 25 27 61 68 


7 rue André Bernard - 93110 Rosny sous Bois 

eric-bourgeois.com www


Solution - Mise en situation éléments clés de la page


On distingue deux partie très différentes, correspondant à des zones graphiques séparées :
le menu navigation et la partie de contenu général (comprenant les différents titres et paragraphes).
Dans cette dernière, le paragraphe de pied de page se comportera différemment des autres.
<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>

Nous attribuerons donc un premier identifiant au menu, c'est à dire à la balise <ul> englobant la hiérarchie de liste :

<ul id="menu">  (dans le code HTML)

lu#menu  (dans le code CSS)

Distinguons encore le paragraphe de pied de page en lui attribuant l'identifiant pied :

<p id="pied">Pied de page et <a href="#">Mentions légales</a></p>
(dans le code HTML)

p#pied  (dans le code CSS)

Inutile en revanche de qualifier ou d'identifier le reste du contenu :
pour y intervenir, il suffira d'agir sur l'ancêtre commun, la balise <body>.

Nul besoin non plus d'attribuer un identifiant à l'élément de titre principal <h1>. Unique dans le document, il est déjà facilement identifiable en CSS.


Rappelez-vous de cette règle essentielle :

Ne nommez pas systématiquement chaque élément du document.
Contentez-vous des éléments parents ou ancêtres, aux premiers niveaux de hiérarchies.


Haut de page

Introduction Html


Le fond et la forme


Introduction Css


Les sélecteurs


Syntaxes


Mise en situation

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.
 
Dernière mise à jour le 12.08.2011