HTML de blog [1] Infos générales - bannières

Petit (façon de parler…) aide-mémoire pour tritureurs de blog, parce qu'un jour j'en ai eu marre de toujours chercher quel div se trouve coincé dans quel autre, comment s'écrit telle classe, quel sélecteur CSS utiliser, etc. .

[1] Infos générales - Haut et bas de page

1. Structure commune
2. Les types de page de blog
3. En-tête
4. Pied de page

[2] La cellule des articles

[3] Articles et quasi-articles

[4] Annexes des articles

[5] Modules

[6] Diablogs

Toutes les pages d'un blog sont organisées selon un même canevas (première partie de cet article). Le contenu de ce canevas dépend d'abord du type de la page concernée : accueil, article, archive, etc. (deuxième partie de cet article).

Enfin les détails de chaque case du canevas dépendent des choix de mise en page que vous faites dans l'admin du blog : ajout ou suppression d'éléments, options diverses. Ces détails sont présentés dans les articles suivants. Pour vous donner une idée, ce premier article présente l'en-tête et le bas de page.

Tout ceci n'a rien d'officiel ! Je m'efforcerai de le tenir à jour mais ne promets pas une réaction instantanée.

Conventions utilisées : les balises sont écrites en noir, les classes (sans le point) en rouge, les identifiants (sans le dièse) en blanc sur gris. Attention à ne pas confondre minuscules et majuscules, trait d'union (-) et tiret bas (_) !

Structure commune

Les premiers niveaux sont les mêmes pour toutes les pages.

Ossature du blog

• Table

html

La fenêtre du navigateur

body

La page

divglobal

Le corps de blog

divlnln_0

En-tête (détails)

divlnln_1

Articles et modules (détails)

divlnln_2

Pied de blog (détails)

divlegals

Mentions légales (pas de détails)

Détails d'une ligne

• Table

divlnln_X

Xe ligne (pour la première ligne X = 0)

divclcl_X_0

Première cellule

divcolumn_content

Contenu de la cellule

divclcl_X_1

Deuxième cellule

divcolumn_content

Contenu de la cellule

divcl

Ainsi de suite pour les autres cellules

divclear

Assure que la ligne ln se termine en-dessous des flottants.

À garder à l'esprit :

• ln = LiNe = LigNe
• cl = CoLumn ou CeLl = CoLonne ou CeLlule
• la numérotation commence à zéro
• les numéros n'expriment que la place de chaque ligne ou cellule dans la page, pas son rôle. Rien ne garantit que ln_0 est forcément l'en-tête du blog : elle n'est que sa première ligne. Rien ne garantit que cl_1_0 est forcément la cellule contenant les articles : elle n'est que la première cellule de la deuxième ligne.

Les types de page de blog

Accueil

La page d'entrée (correspondant à l'URL du blog) mais aussi toutes les pages de suite (1-index.html, 2-index.html, etc.). Articles complets ou résumés (choix de configuration).

Articles

Ne désigne plus que les pages de catégorie. Articles complets ou résumés (choix de configuration).

Article seul

Un article lorsqu'on y accède par son URL propre (permalink), par exemple en cliquant sur son titre ou par la newsletter de publication. L'article est toujours complet.

Article et commentaires

Variante du cas précédent, affichant les commentaires éventuels.

Liste complète

La liste complète des articles, où ne figurent que des extraits de 200 caractères, sans images ni balisage.

Archives

Les articles d'un jour ou d'un mois. 200 premiers caractères, comme dans la liste complète.

Articles les plus commentés

Liste des titres des articles les plus commentés, regroupés par catégorie.

"Pages"

Des pages de blog à part, sans date ni possibilité de commentaire, avec leur propre système de catégories. Dans la suite je les nomme toujours OB-pages (terme non officiel…) pour les distinguer du terme page dans son acception courante.

CGU

Le règlement du blog (Conditions Générales d'Utilisation). Ben oui, pourquoi ne pas s'en soucier ?

Cette liste (non officielle, je répète !) vaut pour la configuration "classique" comme pour la configuration "avancée". Rappelons la signification de ces termes :

Classique

le blog n'a qu'un seul CSS et qu'une seule mise en page, applicables à toutes les pages.

Avancée

le CSS et la mise en page "accueil" s'appliquent aux pages d'accueil, le CSS et la mise en page "pages" s'appliquent aux OB-pages, le CSS et la mise en page "articles" à tout le reste.

---

Deux schémas pour commencer :

En-tête

Habituellement l'en-tête se trouve dans la 1ère ligne du blog, ln_0 .

En-tête

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divheader

1er emballage

divtop

En-tête. 3 variantes : nom du blog, image, personnalisé

En définitive, la bannière se trouve emballée dans cinq div emboîtés :

• ln_0
• cl_0_0
• cl_0_0 column_content
• header
• top

auxquels s'ajoutent encore deux niveaux dans les variantes autres que personnalisées (h1 et a, ou a et img). Une telle profusion permet une mise en page soignée.

En-tête avec nom du blog

• Table
• En-tête

divtop

En-tête

h1

Titre de 1er niveau

atopLien

Lien vers l'accueil

En-tête avec image

• Table
• En-tête

divtopcenter nomargin nofont

En-tête

atopLien topLinkImg nofont

Lien

img

Image cliquable

Notez que, si le lien garde la classe topLien, il n'y a plus de h1 pour le contenir.

En-tête personnalisé

• Table
• En-tête

divtop

En-tête

tout et rien

Texte saisi dans l'éditeur OB

divclear

Assure que le div.top se termine en-dessous des flottants.

Pied de page

Habituellement le pied de page se trouve dans la 3e ligne du blog, ln_2 .

Pied de page

• Table
• Structure commune

divcolumn_content

Contenu de la cellule

divfooter

Pied de page

tout et rien

Texte saisi dans l'éditeur OB

divclear

Assure que le div.footer se termine en-dessous des flottants.

Structure analogue à celle de l'en-tête, en plus simple. Quatre div emboîtés (et non cinq) :

• ln_2
• cl_2_0
• cl_2_0 column_content
• footer

… et pas de variantes prêtes à l'emploi. Initialement le pied de page contient un lien de retour à l'accueil.

Oublis, erreurs : merci de me les signaler en commentaire :-)