De l’inclusion d’images dans vos billets.

A la demande de Régine, et pour le profit de tous, voici quelques pistes pour inclure des images dans vos billets.
Vous disposez d’images de différentes tailles, que vous avez téléchargé sur des sites spécialisés. A ce propos, savez vous que vous disposez, chez votre fournisseur d’accès internet, d’un espace pour créer vos pages personnelles, donc des pages sans les restrictions dues au Blog, et d’un espace pour stocker vos images sans restrictions de durée.

Les images que j’utilise ici sont stockées sur mon espace personnel. Cette première est d’une taille supérieure à la largeur de l’espace réservé au billet sur le blog. Si vous ne précisez rien, le navigateur (Firefox, Internet Explorer, Safari, Google Chrome….) l’affiche en taille réelle, et, pour nos blogs, vous n’en voyez que la partie gauche. L’instruction est de la forme:
<img src="http://site/dossier/nom_image.jpg"&gt;

Cette image fait 2048 pixels de large; vous n’en voyez qu’une partie (je n’ai pas testé tous les navigateurs). Par contre, si vous la sauvez ou si vous cliquez droit dessus et choisissez Afficher l’image, vous l’aurez aux dimensions originales.

Cette image fait 640 pixels de large; vous la voyez ici en taille réelle.

   

Voici la même image affichée avec les instructions width et height, respectivement largeur et hauteur. Pour des raisons esthétiques, on cherche généralement à garder les proportions à une image, mais certains effets peuvent être obtenus en les faisant varier.

Araignée, face ventrale

Vous aurez noté que mes images sont centrées sur l’écran, effet obtenu comme avec un paragraphe de texte par l’instruction <p align="center">.Tiens… mais voici qu’une image se place à droite de mon paragraphe ! Voici l’instruction telle qu’elle apparaît:

<img style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 20px; border-right-width: 0px" width="160" height="195" alt="Araignée, face ventrale" src="http://pagesperso-orange.fr/famille.casset/Transfert/araignee3r.jpg&quot; align="right" border="0">

Je vais vous détailler tout ça:

  • L’instruction style=" permet de passer toutes les valeurs en une seule fois.
  • Le paramètre border-top-width signifie bordure-haut-largeur et détermine une bordure à l’image, en haut. La valeur est donnée en pixels. (vous comprendrez seuls les paramètres suivants, border-left-width, border-right-width, border-bottom-width quand vous saurez que left signifie gauche, right, droite et bottom, bas.
  • Le paramètre margin définit un espace, une marge, entre l’image et l’environnement. Il est suivi de quatre valeurs, en pixels, représentant successivement le haut, la droite, le bas et la gauche. J’y reviendrai dans les exemples…
  • Le paramètre width représente la largeur affichée de l’image, indépendante de sa largeur réelle. Il est exprimé en pixels.
  • Le paramètre height représente la hauteur affichée de l’image, indépendante, là aussi, de sa hauteur réelle. Il est exprimé en pixels.
  • Le paramètre alt=" est un texte légendant l’image. Il est utile pour certains logiciels destinés au non/mal-voyants qui énoncent vocalement ces mots. C’est également cette légende que vous voyez apparaitre lors d’un arrêt du curseur sur l’image.
  • Le paramètre src=" est l’adresse de l’image; adresse complete en http://&#8230; ou adresse relative ../image.jpg si le fichier se trouve dans le même dossier que la page que l’on affiche.
  • Le paramètre align définit la position de l’image sur la page, à savoir left, right, soit gauche ou droite.
  • Le paramètre border permet de définir une bordure si les instructions border-xxxx-width ne sont pas reconnues par le navigateur.

En gros, si on élimine tout ce qui ne sert pas, on se retrouve avec l’instruction qui suit:
<img style="margin: 0px 10px 0px 20px;" height="195" width="160" src="http://pagesperso-orange.fr/famille.casset/Transfert/araignee3r.jpg&quot; align="right"> qui, je vous le promets, affiche la même image, avec les mêmes caractéristiques.

Allez, progressons… je place une grosse image au centre de ma page par une instruction center et deux petites de chaque coté avec les paramètres right et left de align.

Araignée, face ventrale Araignée, face ventrale

Grosse image araignée

L’alignement des images ne me convient pas… je les voudrai également plus proches. Je vais jouer sur les instructions margin pour changer les marges hautes ainsi que les marges externes. Ces réglages seront bien entendu adaptés à la largeur de l’endroit où elles seront affichées… quelques tâtonnements sont souvent nécessaires.

Araignée, face ventrale Araignée, face ventrale

Grosse image araignée

Et ben voilà…. fin de la leçon. J’espère avoir été utile. Je reste à votre disposition pour des éclaircissements et des exemples.

Publicités
Cet article a été publié dans Informatique. Ajoutez ce permalien à vos favoris.

18 commentaires pour De l’inclusion d’images dans vos billets.

  1. Anita dit :

    Heu !!! t’aurais pas pu nous mettre des brioches là ???Donne pas envie de mettre des imagesLorsque les araignées, ces belles mal aiméesAux figures indécentes et aux croches tranchantesAuront tissé leur nid et et croqué quelques viesIl ne restera rien pour apaiser nos faims…Je préférais le bon pain, même les chaussons … sans les pommesBises quand mêmeSourireAnita

  2. Jean-Jacques dit :

    Finalement, mon cher Fred, tu aurais été un très bon prof! Hein?Quelle pédagogie dans ta démonstration!!! NON, non, j’ te jure! … foi de pro!!!Amicalement,JJS

  3. ♥.҈.҈.♥. Zéphyrine dit :

    Voilà 1/2 heure que j’essaye dans mon blog une mise en page comme celle-ci…mais voilà comme je suis nulle….je n’arrive toujours pas à mettre un commentaire à côté de l’image…Le texte se place et déplace l’image!….Comme je ne m’avoue jamais vaincue, je vais continuer à chercher…Merci pour ton aide Monsieur le Professeur!

  4. Frederic dit :

    @ Anita:Je peux comprendre les réticences face aux araignées. Pour ma part, je les admire comme batisseuses hors pair, détentrices du brevet d’une des matière les plus aboutie du monde, la soie, multiple et exceptionnelle. J’ai, à la maison, des pholcus, dont je veille à ne pas trop déranger les activités car elles me débarrassent des moustiques qui me sont bien plus exécrables.Et…. j’avoue préférer les araignées aux chats. Piéger et déguster quelques insectes m’émeut moins que de vider des nids pour le plaisir de la chasse.Je t’embrasse, jolie poétesse.@JJS:Bizarrement, je pensais à toi au moment où j’émergeais de ma sieste… le Sage de la Montagne, mais j’ai oublié pourquoi. Peut être une prochaine visite vers St Jean de Luz… ou encore ce livre magique sur les 7 vallées des Pyrénées.Je prends ton compliment avec d’autant moins d’humilité qu’il vient d’un professionnel. Mes amitiés à vous deux, chaleureuses :-)@Régine:Bon, ma jolie Régine… je vais te donner des cours particuliers, je pense. Tu as le désir d’apprendre, moi j’aime enseigner, revêts tes socquettes blanches et ta jupe écossaise et n’oublie pas ton cahier !On va faire ça directement sur MSN, ça va souvent plus vite.Je t’envoie également quelques baisers chaleureux (la bise, par moins 7°C, merci bien !!!)

  5. Framboise dit :

    ouais bien sûr ……des araignées … pourquoi pas…!!!et une cigale …non..?…!!!!Biz,Framboise.

  6. Sunsyharrey dit :

    Mon tres cher FredéricRégine et moi savons depuis longtemps inclure les images dans un billet !!Ce que nous voulons faire c’est ,mettre un texte en face d’une imagepas dessous ou en dessus le textemais bien en face…par exemple comme cecihttp://images0.hiboox.com/images/0209/51d2c1383dd439a2459edd98e8d46f87.gifMais là c’est un montage photofiltre et nous ,nousvoudrions le faire en mode htlm !!! est ce possible ???Je ne sais si je l’ai fait alors dans le doute je te presente mesmeilleurs voeux pour 2009 mon cher Fred ainsi qu’a ta famille !Ghislaine

  7. Frederic dit :

    @Framboise:Et une framboise, pourquoi pas ? Je sens que mon choix d’image peut ouvrir une polémique… pour ou contre les vilaines bêtes ?Si il n’y a pas de loup, il n’y a pas de Chaperon Rouge, sans araignées, la nature perds les dentelles dont elle se pare en toute saison.Mais je reste à votre écoute… que souhaitez vous voir ? Boise, Frambiz ;-)@Sunsyharrey (ou Ghislaine "Brioche aux pépites")Ce que je fais, vous pouvez le faire. J’ai donné quelques outils à Régine et je cherche encore ce qu’elle ne fait pas pour que ça fonctionne comme chez moi. Mais nous trouverons.Si tu le souhaites, je ferai des cours moins particuliers à Régine pour que tu puisses en profiter. Mais…. sages, hein, vous deux !!!!Dans le doute… je te fais deux grosses bises saupoudrées de tous mes souhaits de bonheur.

  8. Drop dit :

    J’adore les araignées… Et la légende grecque qui va avec…Bisous !

  9. Sunsyharrey dit :

    Mon cher Fredérix je ne te vois plus dans mon réseauje te relance donc pour une invitation..Passes tu un bon dimanche ?? sans doute que oui…….ici soleil mais froid quand meme !!Ghislaine

  10. ♥.҈.҈.♥. Zéphyrine dit :

    Je viens de refaire mon entête…texte au milieu d’images…mais en fait le texte est créé avec photofiltre…ce qui donne 3 images les unes à côté des autres!…Ca c’est facile mais Ghislaine t’a bien expliqué ce que nous cherchions….Un code comme celui ci…facile à comprendre:<DIV align=center><DIV id=msn style="WIDTH: 738px"><IMG height=554 src="http://votre-image.jpg&quot; width=738 align=right> <DIV style="FLOAT: left; WIDTH: 738px"><P><FONT face="Lucida Handwriting" size=5>Votre texte ici</FONT></P></DIV></DIV></DIV> Ceci pour mettre une image sous un texte!…(je m’en suis servie pour mon poème "le penseur asocial) avec les précisions "votre image ici" et "votre texte ici"….La même chose pour l’image à côté du texte serait bien…si tu trouves!

  11. Frederic dit :

    @Sandy:Une légende avec des araignées… je suis intéressé ! Cette légende peut elle aider à les aimer un peu plus ?Bisous, ma déesse grecque ;-)@Sunsyharrey:Crois bien que ce n’est pas de mon fait… je m’accroche, je m’accroche… mais il semble que, parfois, certaines choses nous échappent. Quand à mon dimanche… je l’ai passé principalement … au lit :-))))@Régine:Ah… une légende grecque aurait elle donné naissance à une autre déesse… du code HTML ?Bien, donc… après quelques tâtonnements, nous sommes arrivés à ce bout de code qui fonctionne:<p><img height="300" src="http://chemin_de_l_image.jpg&quot; width="300" align="right">Votre texte ici, Votre texte ici.</p>Remplissez la partie "texte" et ébaudissez vous de tant de beauté 🙂 Notez en passant la simplicité de mon code, due à la simplicité de la tâche à accomplir. Pour obtenir la même chose que vous, à savoir un texte SUR une image, je serai arrivé au même code que vous (un peu simplifié, il est vrai).A bientôt, ma Régine… je sens que tu vas avoir d’autres questions. <p><font face="Gros_Bisous" size="enorme">Je t’embrasse</font></p>

  12. Drop dit :

    C’est loin tout ça Mon Fred !!J’avais 8 ans quand j’ai commencé à aimer la mythologie grecque…Mais cette histoire m’avait marquée. Je la trouvais terrible car elle mettait en cause la déesse de la sagesse qui là, ne semble pas honorer son titre. Et ressemble plus à Héra dans son comportement (oui mais Héra elle n’avait pas une vie facile avec son Zeus infidèle… Il faut la comprendre… LOL… C’est n’imp’ ce que j’écris…)Merci Wikipédia !"Arachné ou Arachne (en grec ancien Αράχνη / Arákhnê), dans la mythologie gréco-romaine, est une jeune fille originaire de Lydie qui excellait dans l’art du tissage.Intriguée, Athéna se déguisa en vieille femme pour rendre visite à la jeune tisseuse et observer son travail. Arachné prétendit devant la déesse qu’elle était la meilleure tisseuse du monde, meilleure qu’Athéna elle-même. La déesse entra alors dans une grande colère en constatant qu’une simple mortelle pouvait prétendre être aussi adroite qu’elle. Elle révéla à Arachné sa véritable identité et organisa un concours avec la jeune femme. Athéna illustra sur sa toile les divers dieux de l’Olympe tandis qu’Arachné préféra tisser Zeus avec ses nombreuses amantes. Ce fut finalement la fille de Lydie qui gagna. Furieuse, Athéna déchira son ouvrage. Humiliée, Arachné alla se pendre. La déesse, prise de remords, décida d’offrir une seconde vie à Arachné : elle la changea en araignée suspendue à son fil, pour qu’elle puisse à nouveau tisser sa toile."C’est une légende, certes, mais moi elle me plait…Bisous !!

  13. Frederic dit :

    Chacun a droit à une autre chance… c’est la morale que je veux tirer de ça. Elle a été plutôt belle joueuse, cette déesse. Quand à Zeus… je ne voudrais surtout pas ressembler à ce macho ! Moi, je me verrai bien en Hermès… pas le couturier, hein, le facteur :-)Bizzzz toutes et tous

  14. sandrine...petite étoile dit :

    merci pr tte ses astuces ms je finirais demain a lire car là il est tardbises a bientotsandrine

  15. tulipe dit :

    merci pour ses astuces , et ns le faire partager , a bientôt ……bzz

  16. Revelune dit :

    bonsoirintéressant tes explications, et tes ballades donnent envie… lolje te souhaite un bon week-end.amicalement françoise

  17. Mumu la Grenouille dit :

    Eh ben, je reviendrai lire tout ça un matin paske là, c’est un peu tard, une bonne partie de mes neurones sont déjà partis se coucher !

  18. Crevette dit :

    Eh bien! Je ne me souviens de quelle façon je suis arrivée ici mais ça me plait bien! :o))Je peux squatter? Encore plein de choses à lire…Ahahaha

Répondre

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l'aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s