http://www.w3schools.com/tags/tag_hn.asp
les HTML <h1> to <h6> Tags.
Ils sont importants pour de très nombreuses raisons:
http://www.w3schools.com/html/html_headings.asp
Dans blogspot, Blogger (post page) utilise cette heading distribution:
<h1>Blog Title</h1> et Post-Title
<h2>Sidebar Gadget title</h2>
C'est bizarre mais c'est comme cela! Par contre la talle de la police de caractère est plus petite pour les "Sidebar Gadget title" (voir ci-contre).
C'est bizarre mais c'est comme cela! Par contre la talle de la police de caractère est plus petite pour les "Sidebar Gadget title" (voir ci-contre).
Par défaut ils apparaissent en gras avec une taille décroissante si on utilise seulement le style suivant:
<h3> mon texte </h3> et aucun changement dans son "template".
Comment modifier l'apparence des titres des articles : changer la police, la taille, la couleur, ajouter une image en fond:
https://ladybirdr.blogspot.fr/2014/11/personnaliser-et-ajouter-une-image-aux.html
http://www.leblogger.com/2011/11/entetes-h2-h3-h4-article-referencement.html
En changeant le template (ajout de 7 lignes, voir ci-dessous)
on obtient (h1 est pour le titre du post, voir ci-dessus)
h2
h3
h4
Dans l'éditeur de blogger, il n'est pas wysiwyg, les en-têtes apparaissent en gras et de taille différente.Pour installer cette mise en forme des en-têtes:
1/ aller dans template, le sauvegarder puis un clic sur edit HTML:
Un clic sur *** pour dérouler la mise en forme de votre blogspot (c'est le bloc CSS) :
Les "7 lignes" sont les suivantes:
h2 { font-size: 22px; font-weight: normal; border-style: solid; border-left: 7px solid red;border-width: 0 0 0px 7px; background-color: #fcfcfc; padding: 3px; margin-top: 10px; }
h2.date-header { font-size: 15px; font-weight: normal;border-style: hidden;background-color:#ffefdb;}
h2.title { font-size: 15px; font-weight: normal;border-style: hidden;background-color:#ffffff;}
h3 { font-size: 20px; font-weight: normal; border-style: solid; border-color: #ccdef0; border-width: 0 0 2px 5px; padding: 3px; margin-top: 10px; }
h3.post-title { background-color: #eedfcc; font-size: 22px; font-weight: normal; border-style: solid; border-color: #555500; border-width: 0 0 2px 10px; padding: 5px; margin-top: 10px; }
h4 { font-size: 18px; font-weight: normal; border-style: solid; border-color: #eedfcc; border-width: 0 0 1px 3px; padding: 3px; margin-top:10px; margin-bottom:5px; }
h5 { font-size: 15px; border-style: solid; border-color: #555500; border-width: 0 0 2px 0px; padding-left: 3px; }
Remarques:
la balise <hr> signifie un changement thématique majeur dans la page (barre horizontale).Utilisation de scoped (The scoped attribute is new in HTML5):
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_style_scoped
Jusqu'au tag h4, on peut changer leur style avec class, dir, id, lang, style, title:
http://www.websitesbymark.co.uk/posts/the-h4-html-tag/
id and class attributes sont liés au CSS styling stocké dans le <head> de la webpage ou dans un fichier externe.
No comments:
Post a Comment