Le Vortex de l'Info

Pondre un billet en html

Tout d'abord, lorsque vous arrivez sur l'interface "billet" vous devez sélectionner en "Format", l'option "HTML".
Logique.
Par la même occasion en "État", vous pouvez mettre "En ligne" ou "Hors ligne" ; l'avantage du "Hors ligne" étant de pouvoir sauvegarder souvent votre billet sans qu'il soit visible sur le Vortex.
Ca évite certains désagréments (genre plantage et aucune save, hein Magoo) et vous pouvez ainsi construire votre billet sur le long terme puisque en bas de la zone de saisie de votre texte, se trouve le lien "+ Plus d'options" grâce auquel vous pourrez changer votre date de postage.

Voilà pour l'aspect pratique du billet ; il y a d'autres options comme les balises à la façon Hfr, les smiles, mais là vous n'avez pas besoin d'explication.

Et pour quelques balises de plus

Deux types de balises sont extrêmement importantes :
<p> </p> et <br />
Pour les premières elles concernent les paragraphes.
On débute un paragraphe par <p> et on le termine par </p> .
Le <br /> lui sert au saut de ligne. Il est donc à intégrer dans les paragraphes.

Exemple :

A copier : <p> </p> et <br />

Rien qu'avec ça vous pouvez écrire un billet en Html. Magique, non ?
Allez maintenant que vous avez de l'appétit, nous allons nous intéresser aux liens et images.

Lien hypertexte

Quoi de plus moche qu'un lien hypertexte à l'état brut ?
Camilla Parker-Bowles peut-être...

Pour rendre votre lien beau rien de plus simple ; enfin faut se souvenir de certains trucs, mais grâce à ce billet je vous rassure, vous pourrez faire du "copier-coller".

Exemple :

Ce qui donne :

Le Vortex de l'Info

Vous remarquerez que le titre "Le Vortex de l'Info" se situe entre > et </a>.
J'ai volontairement intégré la balise <strong> pour donner plus d'importance au titre du lien (on pourra même mettre de la couleur, souligner ...).
Mais bon vous n'êtes pas obligé de mettre <strong>, c'est juste que je faisais une pierre, deux coups.

A copier : <a href="lien hypertexte" target="_blank">Titre du lien</a>.

Le target="_blank" est lui destiné à ouvrir le lien dans une nouvelle fenètre (IE) ou dans un nouvel onglet (FF).
Vous ne mettez rien entre les guillemets et votre lien s'ouvrira dans la page/ onglet courant.

L'image

Exemple :

Ce qui donne :

A copier : <img src="adresse de l'image "width="largeur" height="hauteur" alt="" title="" />

concernant le alt="", ce dernier permet d'identifier l'image en cas de son non affichage. Le title="" étant tout simplement le titre de l'image (lorsque vous survolez l'image, apparait une bulle avec son nom si elle est indiquée).

Accouplement

Ben oui mais moi j'aimerais afficher une image plus grosse que ce que le vortex pourrait exposer !
Ah ah vous voudriez faire comme sur ce billet ===> [] ????
Rien de plus simple, il suffit de suivre le lapin blanc.

Exemple :

Ce qui donne :

A copier : <a href="image taille réelle.jpg" target="_blank"><img src="image taille miniature.jpg" alt="" title=""/></a>

La première partie du "code" concerne une image que l'on ne voit pas (l'image taille réelle) et à qui l'on donne un "lien" par l'entremise de la balise <a href=> </a>.
La deuxième partie amorcée par la balise <img src= /> se rapporte à la "miniature" que vous allez afficher sur votre billet ; libre à vous de lui donner un titre title="".

Et vous noterez, que les deux balises, "lien" et "image" sont fermées en bout de code :
/> </a>

De la diversité avant tout

C'est bien, vous avez des outils en main pour illustrer votre billet (reste à trouver un ftp), mais c'est désespérant, vos images se collent à gauche quoiqu'il arrive.
Ah mais Sieur CoolRod a pensé à vous en travaillant le Style au niveau de l'os du foie.

Le Html c'est un langage. Le style CSS, c'est ce qui permet "d'organiser" votre html de façon visuelle
Mettre une image à gauche (par défaut), au centre ou à droite, c'est le style CSS par exemple.
On ne va pas rentrer dans le détail, ce n'est pas le but, puisque je veux vous offrir des solutions "clefs en main" pour rendre vos billets plus attractifs.
Attaquons donc la "pratique" en reprenant l'image précédente:

Exemple :

Ce qui donne :

Ce qui nous préoccupe, ce n'est pas tout ce que nous avons étudiés dans le corps du lien, mais cette fameuse fonction <div> </div>.
En entourant votre "image", votre "goupe d'image" ou votre texte par cette fonction, vous serez sur que tout sera centré !!!

A copier : <div class="aligncenter"> </div>

I'll be back

ce billet n'est pas exhaustif, CoolRod & moi y apporterons d'autres tutoriaux, toujours pour toi, rédacteur.

Pour info, ce billet est consultable dans la section "Les Incontournables", sidebar de droite (oui droite) et sera régulièrement uppé selon ses mises à jour.