Etape 8 - Insérer l'image dans le blog

Vous pouvez cliquer sur chaque image pour l'agrandir dans une nouvelle fenêtre.
Retour au menu

• Ouvrir votre Blogg en mode "admin"
  
• accéder à votre post à illustrer, en mode "modification"
  
• dans la fenêtre de saisie de votre texte
  
• choisir le bouton "image"

Dans la fenêtre qui s'affiche,

indiquer :

• Image URL : le lien direct de l'image donné par le site http://imageshack.us/ (copié dans le presse papier à l'étape précédente)
• Alternate texte : un texte optionnel d'explication
• Alignment : l'alignement de votre image (right : à droite du texte, left : à gauche du texte)
• Border : l'épaisseur de la bordure (0 ou vide si vous ne voulez pas de bordure)
• Spacing : un espace horizontal ou vertical à laisser entre le texte et l'image (entre 5 et 10 sont des valeurs acceptables)

Après avoir cliqué sur OK, la fenêtre d'édition vous montre immédiatement ce que donnera le résultat.

Si vous ne pouvez pas (ou ne souhaitez pas) utiliser cette boîte de dialogue, vous pouvez passer en mode "code source" ou "code Html" : On retrouve ici les éléments de la boîte de dialogue précédente :

• img src = "LIEN DIRECT donné par IMAGESHACK.US"
• border = "EPAISSEUR DE LA BORDURE" (0, 1, 2...)
• align = "ALIGNEMENT" (right, left, ...)
• vspace et hspace = "ESPACEMENT VERTICAL ET HORIZONTAL"
• alt = "TEXTE OPTIONNEL"

Poster définitivement votre texte modifié.

Avec cette méthode, vous pourrez insérer plusieurs images dans un même texte.

Pour ceux qui ne peuvent accéder à tous les caractères (comme certains, je pense à Heaven qui n'a pas de clavier accentué au Japon), et si cela vous est indispensable pour vous faire comprendre, voici ici une table complète des codes de chaque caractère, utilisée pour l'internet.

http://www.visibone.com/htmlref/char/cer.htm

Vous avez, pour les 65535 caractères possibles, le dessin du code dans votre navigateur, et le code correspondant, pour "forcer" l'affichage.
Une fois que vous avez noté (ou copié en mémoire) le code du caractère, comment faire ?

Exemple : Le caractère œ est : & #339;

- Ouvrez l'éditeur de blog :
- Tapez votre texte normal
- Au moment de positionner le caractère choisi, cliquez sur "Passer au code source HTML" (le bouton "<>" à gauche du "?")
- Coller ou recopier le code, sans oublier le "&" du début et le ";" de la fin
- Ne mettez aucun espace dans ce code
- Cliquez à nouveau sur "Passer au code source HTML" (le bouton "<>" à gauche du "?")
- Le caractère a pris forme dans l'éditeur de blog, et vous pouvez continuer à rédiger...

Je vous laisse fouiller, il y a même des caractères graphiques... ☞ ♡ ☆

PS.
Le caractère de l'Euro ne passe pas... malgré toutes mes tentatives !
Astuce : utiliser un caractère approchant qui pourrait faire illusion.
Je vous propose ceux-ci :
Caractère cyrillique : Є dont le code est : & #1028;
Caractère mathématique : ∈ dont le code est : & #8712; ou & isin;

Bon posts !

Pour ceux qui voudraient créer rapidement un mini album photo dans un seul post de blog.

1) Préparation des photos (création des vignettes, optimisation de la taille des photos) :
- utiliser un logiciel spécialisé (Photoshop, Paint shop pro).
- pour les moins fortunés, les outils gratuits existent sur http://www.gratilog.net (je préconise IrfanView)

2) Stockage des images :
- utiliser un espace web perso (votre fournisseur d'accès vous en fournit souvent un gratuit)
- utiliser http://www.imageshack.us/ (il y a une aide en français : cliquez en haut sur FAQ) (pensez à ne pas perdre les adresses retournées pour chaque image)

3) L'album sur le post du blog :
- utiliser une mise en page avec un tableau (2 ou 3 colonnes) et mettre chaque vignette dans une case du tableau.
- un clic sur la vignette, et la photo taille normale s'affichera.

Méthode simple :
- utiliser w.bloggar (Aide ici)
Bloggar permet de composer des tableaux, et d'insérer les liens vers les adresses de vos images.

Méthode plus complexe (à la main) :
- utiliser le code Html (bascule par le bouton [< >] de l'éditeur de Blogg.org) et créer un tableau de façon simple.

Création Html d'un tableau de 2 lignes et 2 colonnes
(en insérant les instructions suivantes sans mettre d'espace après les < et avant les >)
< table > (création du tableau)
< tr >(création de la 1e ligne)
    < td >(création de la 1e cellule : 1e colonne dans la 1e ligne)
       image 1 (texte de la 1e cellule)
    < /td > (fin de la 1e cellule)
    < td >(création de la 2e cellule : 2e colonne dans la 1e ligne)
       image 2 (texte de la 2e cellule)
    < /td > (fin de la 2e cellule)
< /tr > (fin de la 1e ligne)
< tr >(création de la 2e ligne)
    < td >(création de la 3e cellule : 1e colonne dans la 2e ligne)
      image 1 (texte de la 3e cellule)
   < /td > (fin de la 3e cellule)
   < td >(création de la 4e cellule : 2e colonne dans la 2e ligne)
      image 2 (texte de la 4e cellule)
   < /td > (fin de la 4e cellule)
< /tr > (fin de la 2e ligne)
< /table > (fin du tableau)

Revenir en mode éditeur texte normal (bascule par le bouton [< >] de l'éditeur de Blogg.org) et insérer une image dans chaque cellule.

Pour ajouter des colonnes et des lignes, ajouter autant d'instructions que vous le souhaitez.

C'est peut-être compliqué à écrire, mais ça doit vous donner un truc de ce style :

4) Images "cliquables"
(un clic sur la vignette affiche l'image taille normale)
- lien de la vignette : http://www.monsite.com/vignette1.jpg
- lien de l'image taille normale : http://www.monsite.com/image1.jpg

code HTML à insérer pour chaque image de l'album photo :
(remplacer les deux liens par ceux de votre image, sans mettre d'espace après les < et avant les >)
< a href="http://www.monsite.com/image1.jpg" target="_blank">
< img src="http://www.monsite.com/vignette1.jpg" border="0" / >
< /a >

Ce qui donne ceci (cliquez sur la vignette pour afficher l'image grande taille) :

Se pose souvent la question, pour publier des images, d'un espace d'hébergement.
Il en existe un sur le Net, gratuit, anonyme, et sans vraiment de contraintes.

Le site :
http://www.imageshack.us/

L'aide en français :
http://www.imageshack.us/faq-french.php

Vous pouvez déposer autant d'images que vous le souhaitez, chacune devant avoir une taille inférieure à 850Ko.
Vous pouvez déposer des images de type .jpg, .jpeg, .gif, et .png.
Les images qui ne sont plus consultées depuis 365 jours sont effacées.

Dès que l'image est envoyée (ex. TEST.JPG), la page renvoie 4 liens de ce style (les valeurs réelles sont différentes)

1. Adresse de l'image :
http://img14.imageshack.us/img14/8469/TEST.JPG

2. Lien en PHP  (utilisé par certains sites)
http://img14.imageshack.us/my.php?loc=img14&image=TEST.JPG

3. Lien en HTML pour une page web, dans un blog (basculer l'éditeur en mode HTML)
< img src="http://img14.imageshack.us/img14/8469/TEST.JPG"
alt="Image Hosted by ImageShack.us" /></font />

4. Lien en BbCode (utilisé par certains forums)
[img]http://img14.imageshack.us/img14/8469/TEST.JPG[/img]

Je suis moi aussi confronté au besoin de dissimuler certaines données.
Il existe plusieurs solutions.

1. En local (à la maison) :
créer un disque dur crypté, qui ne reste visible que de son propriétaire.
Le programme gratuit DEKART (vous le trouverez ici : http://www.gratilog.net/securite2.htm) permet cela.
Dès que l'on donne le mot de passe, le disque dur apparaît. Il est utilisable comme n'importe quel disque.
Et l'on peut même crypter ainsi une disquette.
Une fois le disque "refermé", c'est un simple fichier anodin sur votre disque dur.

2. Crypter un fichier unique :
Plusieurs solutions dont une assez simple et gratuite : SECURITY BOX (ici : http://www.gratilog.net/securite1.htm)

3. Disque virtuel (via internet) :
Il faut disposer d'un espace, chez un hébergeur par exemple, où l'on peut stocker des textes, photos, programmes.
La solution la plus simple et la plus complète actuellement : YAHOO.
- ouvrir un compte email gratuit.
le compte dispose de :
- un espace de 100 Mo pour les messages et leurs pièces jointes
- un agenda permettant de planifier les rendez-vous
- un carnet d'adresses (partageable) pour gérer les contacts
- un espace de 30 Mo pour stocker les images (photos, dessins)
- un espace de 30 Mo pour stocker tout type de fichier (textes, programmes, documents divers)
et lorsque la place manque... on ouvre un second compte email....
Et pas besoin de stocker sur le disque dur... utile depuis le bureau...

4. Utiliser un support externe.
Outre la disquette (capacité limitée quand même), la clé USB est très en vogue.
De 16Mo à 2Go de données (un petit disque dur), c'est le support idéal.
Il en existe même maintenant en forme de stylo, de montre, de couteau suisse, et de... bâton de rouge à lèvres !
Idéal pour une femme... et très discret !
Vous trouverez plein de clés sur http://www.rue-montgallet.com/
___________________
Charmeur, James Bond