• Ajouter une image/photo/logo à un code source HTML

    (misajour le 24 septembre - Corrections diverses)


    Pour insérer une image, on doit utiliser la balise "<img />".
    C'est une balise de type seule (comme "<br />").

    Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

    src : Permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex. : "http://www.site.com/votrimage.png"), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper :
    src="images/votrimage.png"

    alt :alt="Mon image 1"
    Je suis conscient que cela doit vous paraître barbant de mettre un texte alternatif, surtout que ça ne vous semble pas à priori "utile", mais il faut absolument que vous le fassiez. Si vous ne le faites pas, votre page ne sera plus une page XHTML "valide" et votre site sera détecté comme non conforme aux normes.




    L'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se trouve l'image avec un chemin relatif.
    La plus grosse "difficulté" (si on peut appeler ça une difficulté) consistait à choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on a utilisé.



    Exemple d'insertion d'image :


    Code
    :
    HTML

    1 <p>

    2      Voici une photo que j'ai prise lors de mes dernières vacances à Hawaii :<br />
        <img src="images/votrimage.jpg" alt="Ma photo 1" />
    4 <p>

    ATTENTION:

    Evitez à tout prix les accents, majuscules et espaces dans vos noms de fichiers et de dossiers. Voici un chemin qui va poser problème :
    "Images du site/Image toute bête.jpg"
    Il faudrait supprimer les espaces (ou les remplacer par le symbole "_"), supprimer les accents et tout mettre en minuscules comme ceci :
    "images_du_site/image_toute_bete.jpg"
    Sachez donc que si votre image ne s'affiche pas, c'est très certainement parce que le chemin est incorrect ! Simplifiez au maximum vos noms de fichiers et de dossiers et tout ira bien.




    Notez aussi que les images se mettent obligatoirement à l'intérieur d'un paragraphe (<p></p>). Si vous ne le faites pas, comme pour "alt" la page s'affichera peut-être correctement mais elle ne sera alors plus valide.


    Sites dédiés:


    http://www.siteduzero.com/tutoriel-3-13506-0-les-images.html#ss_part_2


    Note:

    Vous avez une précision à apporter ?


    Tags Tags : ,
  • Commentaires

    1
    odd
    Samedi 8 Novembre 2008 à 23:43
    html
    coment je peux ajouter une image en code html a skyrock
    2
    Dimanche 9 Novembre 2008 à 16:07
    ::::::::c) Odd )...
    Sais-tu accéder à la version HTML du "billet" ou du "bloc" sur lequel tu veux ajouter une image ? Si oui, essayes ça: ; Connais-tu le blog Team de l'équipe Skyrock ? ... voilà l'adresse de la page des astuces Skyrock: (Clique sur le Lien URL de ce commentaire)... Je poursuis mes recherches...
    3
    ahmed
    Lundi 28 Janvier 2013 à 01:41
    love
    i love habibi
    4
    Mardi 16 Avril 2013 à 20:51
    mise a jour
    Bonjour, j'aurais bien aimé voir une mise à jour du sujet pour expliquer comment mettre en place un sous-titre aux photos qui apparaît sour la photo. merci
    5
    Vendredi 2 Mai 2014 à 13:12
    fichier HTML sur overblog
    Bonjour, J'ai obtenu plusieurs fichiers HTML avec MapExpert et je voudrais les intégrer à mon blog (Overblog). Ces fichiers contiennent des zones cliquables et sont actifs avec mon navigateur (Firefox). Comment procéder? Merci pour votre aide, Seabird
    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :