Code HTML et CSS pour Blog

Je pense que tout blogger qui se respect s'est posé la question un jour "comment souligner mon texte ? Comment ajouter une ombre à mes lettres ? Comment le faire clignoter ? Comment encadrer mon texte ?



Et oui blogger est très permissif et c'est ce qui fait sa puissance, l'outil rédiger est bien mais on se retrouve très vite limité en terme de design, de fantaisie etc ...

Je pense que quand quelqu'un décide de blogger plutôt que de créer son site de A a Z c'est parce qu'il ne veut pas, ou à pas le temps d'apprendre les langages de conception de site Web, le simple fait de prononcer les mots PHP, HTML, CSS, Javascript donne des boutons à certains et à d'autre juste l'envie de savoir ce que c'est, mais pas d'y consacrer de longues années d'apprentissage.

C'est pourquoi je vais donner des astuces "clés en main" il suffit d'un copier/coller pour reproduire les styles sur son blog.

Avant toute chose quand vous écrivez un nouveau message il faut bien vérifier que vous êtes en mode HTML et pas en mode Rédiger.

Blogger et le langage HTML

Le HTML c'est un langage qui s'écrit avec des balises, il y a toujours une balise ouvrante et toujours une balise fermante à quelques exceptions près, c'est toujours sous cette forme :

<nom de la balise> Votre texte </balise fermante>

Blogger et le langage CSS

Le langage CSS peut être définit dans un fichier CSS mais aussi à l'intérieur des balises HTML et ici c'est de cette manière que je vais procéder.

---

Souligner un texte

<span style="text-decoration: underline;">Mon texte</span>

résultat: Mon texte

---

Mettre un texte en gras

<span style="font-weight: bold;">Mon texte</span>

résultat: Mon texte

---

Mettre un texte en italique

<span style="font-style: italic;">Mon texte</span>

résultat: Mon texte

---

Mettre une ombre à un texte

<h2 style="text-shadow: 1px 1px 1px purple;">mon texte</h2>

résultat:

mon texte

---

Faire défiler un texte horizontalement

<marquee>Mon texte défile horizontalement</marquee>

résultat: Mon texte défile horizontalement

---

Faire défiler un texte verticalement

<marquee direction="up">Robert de NiroBard PiitAl pacinoAngelina joliesophie marceau</marquee>

résultat:



Robert de Niro

Bard Piit

Al pacino

Angelina jolie

sophie marceau

---

Il est possible de régler la vitesse, la direction etc .. Tous les renseignements sont sur cette page.

---

Faire clignoter un texte

Marche seulement avec Mozilla Firefox

<blink>Mon texte</blink>

résultat: Mon texte

---

Barrer un texte

<del>Mon texte</del>

résultat: Mon texte

---

Ajouter une bordure à un texte

<span style="border: 2px solid black; padding: 1px 3px;">Mon texte</span>

Mon texte

---

Tirer un trait

Pour tirer un trait c'est une balise spéciale car elle est seul donc c'est encore plus simple.

<hr />



résultat:

---

---

Voilà j’espère que cet article vous aidera !! Pour toute question complémentaire, vous pouvez laisser un commentaire.