COMMENT FAIRE UNE BELLE PRESENTATION DU SOMMAIRE D'UN SITE.

par André Marini 20 Décembre 2014, 10:47 Blogs

Voici un exemple de code html pour faire un sommaire actif.

En <h1></h1> on écrit "LE TITRE DU SITE" puis en <h2></h2> on écrit "SOMMAIRE".

On peut ainsi allonger la liste avec <h3></h3> et <h4></h4> ....etc

Ensuite, entre les balises <p> et </p> on écrit le lien de chaque thème suivi de son intitulé.

Le footer ou "pied" est facultatif.

Il permet d'écrire le nom de l'auteur ou tout autre chose.

L'avantage de cette présentation est la forme tableau qui s'intègre parfaitement dans un module.

CODE

<article>
<header style="border-top:dotted 2px silver; border-bottom:solid 2px grey;">
<hgroup>
<h1 style="font-size:16px; border:none;">LA PECHE EN SEINE-ET-MARNE</h1>
<h2 style="font-size:14px;">SOMMAIRE</h2>
</hgroup>
</header>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20vif/">LA PECHE AU VIF</a></p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20leurre/">LA PECHE AU LEURRE</a></p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20quiver%20et%20au%20feeder/">LA PECHE AU FEEDER</a></p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20a%20la%20plombee,%20a%20fond/">LA PECHE A LA PLOMBEE</a></p>
<footer style="border-top:solid 2px grey; border-bottom:dotted 2px silver;">Proposé par André MARINI</footer>
</article>

RESULTAT

LA PECHE EN SEINE-ET-MARNE

SOMMAIRE

LA PECHE AU VIF

LA PECHE AU LEURRE

LA PECHE AU FEEDER

LA PECHE A LA PLOMBEE

On peut aussi remplacer le titre du chapitre par une photo éditée.

CODE

<article>
<header style="border-top:dotted 2px silver; border-bottom:solid 2px grey;">
<hgroup>
<h1 style="font-size:16px; border:none;"><br />
LA PECHE EN SEINE-ET-MARNE<br />
 </h1>
<h2 style="font-size:14px;">SOMMAIRE<br />
 </h2>
</hgroup>
</header>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20vif/"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20141228/ob_0861d3_vif.jpg" />LA PECHE AU VIF</a></p>

<p> </p>

<p> </p>
<p> </p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20leurre/"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20141228/ob_7ed855_leurre.jpg" />LA PECHE AU LEURRE</a></p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20au%20quiver%20et%20au%20feeder/"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20141228/ob_263f9b_feeder.jpg" />LA PECHE AU FEEDER</a></p>
<p> </p>
<p> </p>
<p> </p>
<p><a href="http://www.pecheurdumorin.fr/tag/la%20peche%20a%20la%20plombee,%20a%20fond/"><img src="http://img.over-blog-kiwi.com/1/30/51/51/20141228/ob_580ce9_fond.jpg" />LA PECHE A LA PLOMBEE</a></p>
<p> </p>
<p> </p>
<p> </p>
<footer style="border-top:solid 2px grey; border-bottom:dotted 2px silver;">
<p> </p>
<p><span style="font-size:16px;"><strong><span style="color:#0000CD;">Proposé par André MARINI</span></strong></span></p>
<p> </p>
<p> </p>
</footer>
</article>