Chez biroute - Les petits blocs

Les petits blocs

--> font les grandes pages

Pour continuer notre exploration du code, on ne va pas procéder de façon linéaire. aujourd'hui, on va plutôt analyser rapidement les blocs les moins importants à savoir, le bloc titre, celui du menu principal (celui situé sous le titre) et le pied de page. Il restera ainsi plus que deux gros morceaux: celui contenant les blocs définissables et celui contenant les articles.

Donc, prenons le bloc titre pour commencer. Il correspond à ce qui suit:

<div id="titre">
<h1><a href="http://joueb.com/be-rewt/">Dans la peau d'une biroute</a></h1>
<p>Le petit frère joueb et francophone de l'autre</p>
</div>

Déjà, ceux qui on vu la première version du code ont du voir qu'il y avait eu des changements. Je suis désolé, mais je prefère cette version qui est plus propre.

Petite explication de texte: le titre d'un joueb est composé du titre donc (Lapalisse, mon ami) et d'une description (ici: le petit frère [...]). Il est donc normal de regrouper ces deux éléments dans un même bloc: on utilise donc une balise div. Comme on l'a déjà vu précédemment, on utilise un identifiant (l'attribut id pour pouvoir par la suite désigner ce bloc précis parmi tous les autres quand on fera la mise en page. Ensuite, le titre du joueb est le gros titre de la page, il est donc placer dans une balise h1. La description du joueb est plus problématique. en effet, on a plusieurs solution: soit définir la description comme un deuxième titre, donc dans une balise h1 ou h2 (ce qui à mon goût n'est pas une bonne solution, cela n'a rien d'un titre), soit comme un paragraphe avec une balise p (ce qui est fait ici). Une fois ce choix fait, on en a fini pour le titre.

Le bloc du menu maintenant. On a un code qui ressemble à ceci :

<div id="topMenu">
<a href="http://joueb.com/be-rewt/">Page principale</a>
<span class="separator"> - </span>
<a href="/cgi-bin/news.pl?site_id=be-rewt&action=display&type=add">Proposer un article</a>
</div>

Donc, on a toujours le bloc autour du menu. À l'intérieur, les liens avec leur habituelle balise a. Les séparateurs de liens sont eux enfermés dans une balise span. Ceci est fait uniquement pour pouvoir éventuellement transformer cette liste de liens horizontale en liste de liens verticale en modifiant uniquement le style.

Pour finir (oui, enfin): le pied de page. Rien d'extraordinaire ici: On a deux paragraphe à l'intérieur du bloc: le premier contient le lien vers le fil RSS du joueb, le deuxième fait l'éloge de ma deuxième personne. On a donc le code suivant:

<div id="footer">
<hr />

<p>Version <a href="http://joueb.com/be-rewt/rss.shtml"
style="[... je ne recopie pas l'intégralité du style ...]"> XML </a>.</p>
<p>Modèle de mise en page par <a href="http://berewt.net">be-rewt</a>.</p>
</div>

Il y a encore deux petites choses : l'attribut style permet de créer le petit bouton XML, ce style pourrait aussi bien être avec les autres dans l'en-tête, je l'ai laissé là par flemme. Ensuite, la balise <hr /> insère une ligne horizontale qui n'apparait pas quand on regarde cette page, on verra pourquoi plus tard (quand on en sera à l'étude du style).

Ecrit par be-rewt, le Vendredi 3 Octobre 2003, 13:47 dans la rubrique "Comment faire ?".

Repondre a cet article

Commentaires

Excellent ! Impatient d'avoir la suite

OdeNice

06-10-03 à 13:13

J'ai téléchargé un éditeur HTML et commencé la création d'une page en suivant tes instructions:-) (copier/coller, c'est très facile)
J'ai modifié tes instructions, en changeant le titre du site, ainsi que quelques liens de ton site vers le mien mais, à part les deux liens qui pointe sur la page principale, les autres ne fonctionne pas ce qui c'est normal puisqu'ils ne donnent sur rien.
J'ai également modifié :
<div id="footer">
<hr />

<p>Version <a href="http://joueb.com/be-rewt/rss.shtml"
style="[... je ne recopie pas l'intégralité du style ...]"> XML </a>.</p>
<p>Modèle de mise en page par <a href="http://berewt.net">be-rewt</a>.</p>
</div>

en :
<div id="footer">
<hr />

<p>Version <a href="http://joueb.com/odenice/rss.shtml"
style="[... je ne recopie pas l'intégralité du style ...]"> XML </a>.Modèle de mise en page par <a href="http://berewt.net">be-rewt</a>.</p>

pour avoir XML (je n'ai pas la petite image, mais je suppose que ça viendra plus tard) et Modèle de... sur la même ligne.

Ça donne une page toute simple, fond blanc et texte noir (sauf pour les liens).
J'ai hâte d'avoir la suite et de pouvoir publier les résultats sur Joueb.com avec le design (couleurs, images) qui me correspond et en gardant ta mise en page.
Merci encore pour tes explications claires :-)

Les petits blocs

--> font les grandes pages

Commentaires

Liste de liens

Discussions actives

Liens pour les strandards