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

Le rôle d'un blog est bien sûr d'afficher des articles sur des pages Web, mais il y a des variantes : article complet ou résumé, avec ou sans commentaires, en sélectionnant une catégorie ou une période de temps, etc. . D'autre part vous, auteur du blog, pouvez modifier la composition de ces pages par le menu "configurer/mise en page" de l'admin, supprimant ou ajoutant divers trucs petits ou gros : modules, article d'accueil, d'autres. En résumé : un squelette HTML fourni par OverBlog se garnit de diverses manières selon vos choix de configuration et la nature de la page affichée.

La première section de l'article présente donc le squelette, la deuxième donne la liste des types de page, types qui serviront à s'orienter dans les articles suivants. Ceux-ci donneront les détails de la structure (la garniture) des pages.

Enfin, pour compléter ce premier article, je présenterai l'en-tête et le bas de page.

---

Notes :

1. Les schémas suivants présentent des structures de code HTML, pour savoir à quels éléments on a affaire et lesquels contiennent les autres. Légende : 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 (_) !
2. Tout ceci n'a rien d'officiel ! Je m'efforcerai de le tenir à jour mais ne promets pas une réaction instantanée.

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.

Et maintenant, entrons dans le vif du sujet.

---

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 - nom du blog

• Table
• En-tête

divtop

En-tête

h1

Titre de 1er niveau

atopLien

Lien vers l'accueil

En-tête - 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 :-)