Sujet :

Bien construire son haut/bas de page

Geo
   Posté le 18-11-2007 ŕ 09:48:17   

Ce post est fait pour les personnes qui aimeraient concevoir un bas/haut de page simplement, joliment, sans éprouver la moindre difficulté.
On y va.
1) La structure
En fait, il faut savoir (même si certains d'entre vous n'apprendront rien jusque là que le bas de page (il en va de même pour le haut, mais je dirais "bas" à présent, pour aller plus vite) n'est qu'une banale page html logée dans une frame. Une page html possède la structure suivante :
Citation :

<html>
<!-- Début de la page -->

<head>
<!-- Tête de la page. Ici, on y met des informations concernant la page, comme le titre, le lien d'une éventuelle feuille de style ou le style en lui-même, les méta-tags, etc... Ici, c'est inutile mais c'est toujours correct d'afficher les balises de tête. -->
</head>

<body>
<!-- Ici, on tape le contenu de la page, avec les <b>,<u>,<i>,<font color... etc. Tout ce que l'utilisateur voit sur la page web est donc situé dans la balise "corps" : body -->
</body>

<!-- Fin de la page -->
</html>


Imaginons un pied de page similaire à celui-ci :
Citation :

Une flêche n'est pas un fil .


(Ok, ça manque d'inspiration et de contenu, mais bon)

Nous pourrions écrire en bas de page :
Citation :

<html>
<head>
<title>Bas de page</title> <!-- Notez que le titre ici est inutile, mais bon -->
<style>
span.rouge {
/* Sont affectés uniquement les "objets" html dont la balise est '<span>' et la classe est 'rouge'.
color: red; /* On colorie l'objet en rouge */
font-weight: bold; /* On le met en gras (pourquoi pas ?) */
}
</style>
</head>

<body>
<p>Une <span class="rouge">flêche</span> n'est pas un <span class="rouge">fil</span>.</p>
</body>

</html>


2) Ne pas mélanger torchons et serviettes
En html, on fonctionne en "dernier ouvert, premier fermé" dans les tags (<b>, <i>, <u>, etc...) Imaginez que vous vouliez écrire :
Citation :

Salut !


C'est gras et souligné. On fait donc en html :
Citation :

<b><u>Salut !</u></b>


Et non pas :
Citation :

<b><u>Salut !</b></u>


Car, <u> étant la dernière balise ouverte, il faut la refermer en premier.

3) Conclusion
C'est pas sorcier.