Insertion d'image

Insertion d'image et changement des dimensions

• Directement par un copié / collé depuis une image prise sur le web
• C'est le cas de l'image suivante, trouvée via Google Image, puis une  fois affichée en taille réelle, elle a été copiée puis collée dans le message Blogspot.
• ATTENTION :
• Le collage est simple et sans autre action. C'est à dire :
• pas de retouche de taille
• pas de retouche d'alignement
• pas d'essai de déplacement de l'image

Code html minimal pouvant être associé à l'insertion d'une image

• <img src="emplacement/nom_image">
• C'est le cas de l'image précédente, suite à un collage simple.

Code html général associé à l'insertion d'une image

• <img src="emplacement/nom_image" param1="valeur1" param2="valeur2" ...>

• Exemples de paramètres
• title="Cliquer pour agrandir" .......... légende bulle associée à l'image
• height="200"................ hauteur de l'image en pixels
• width="400" ................ largeur de l'image en pixels
• border="2" ................. bordure de l'image en pixels
• align="left" ................... image positionnée à gauche du texte

• Plus de détails ICI

Redimensionner l'image

• Méthode 1 : Dans le message, sélectionner l'image insérée et agir sur les commandes de taille proposées
• Cela a pour effet de rajouter les paramètres height="..." et width="..." dans le code HTML de l'image.
• C'est le cas ci-dessous, l'image précédente a été demandée en mode "Petit"

• Méthode 2 : après avoir inséré l'image par un simple copié/collé
• Passer en "Modifier le code HTML",
• Rajouter ou modifier le paramètre height=... ou width=...
• SI UN SEUL des paramètres est mentionné, le deuxième est calculé automatiquement en fonction des proportions de l'image d'origine.
• Si les deux paramètres sont mentionnés, il faut veiller à ce que les modifications des deux paramètres se fassent dans le respect des proportions d'origine, sans quoi l'image sera redimensionnée mais surtout déformée.

Alignement de l'image sans déplacement à la souris

• Après un collage simple, on sélectionne l'image et on agit sur les commandes d'alignement proposées
• Cela a pour effet d'encadrer l'image par la balise
  <div style="text-align: valeur;"> et </div>,
  ... avec valeur=left ou center ou right.
• C'est le cas ci-dessous, l'image précédente a été demandée en mode "Centrée"

Autre technique de positionnement

• Après un collage simple, on passe en mode HTML et
• On rajoute le paramètre align="valeur" dans la balise < img src="..." > qui devient
  <img align="valeur" src="...">
• C'est le cas ci-dessous, l'image précédente a été positionnée avec align="right"