Bonjour,

Je souhaiterais comprendre l'erreur dans mon code :

Sachant que mes images à intégrer se trouve dans le bureau : dossier : "HTMLTEST" puis dans le dossier "CV"

Les images se nomment "versiongrande" et "versionpetite" elles ont toutes les deux le format jpg

Voici ma ligne de code :

<p>
       <a href= "CV/versiongrande.jpg"><img src="CV/versionpetite.jpg" title="Cliquez pour agrandir"/></a>

</p>

Tous vos conseils sont les bienvenus.

Merci à vous

Bonjour,

Manque le alt="" pour ton image...

Sinon le code est bon, le voici en action https://jsfiddle.net/6ph6mwc9/ 

Les erreurs peuvent êtres multiples :

- chemin au fichier incorrecte.

- mauvaise  extension du fichier.

- l'orthographe du fichier images et dossiers.

Si tu as bien tout vérifiée, le mieux serait de poster une capture de ton dossier de travail pour vérifier le chemin d'accès à ton image 

-
Edité par pipelette13 20 octobre 2017 à 18:27:40

Merci pour les informations :

Cependant je n'ai toujours pas trouvé la faille.

Je mets en pj le dossier où se trouve tous les éléments pour caler mon image.

Encore merci pour ton aide. Je débute et ça fait plaisir de voir des gens prêts à transmettre leur savoir

Voici ma ligne de code un peu modifiée :

<p>
      
       <a href="HTMLTEST/CV/versiongrande.jpg"><img src= "HTMLTEST/CV/versionpetite.jpg" alt="portait femme" /></a>
     </p>

-
Edité par ClementineMarcet 21 octobre 2017 à 0:09:02

Su tu parts du fichier Entrainement CV.html, alors le chemin d'accès et direct puisque les images se trouve au même niveau que celui-ci.

<p>
       
       <a href="versiongrande.jpg"><img src= "versionpetite.jpg" alt="portait femme" /></a>
     </p>

Essais ceci, pourquoi ouvrir le dossier HTMLTEST puis CV alors que tu es déjà dedans...

Evites de mettre des caractères d'espace dans tes noms de fichiers, images, dossiers, etc... juste un conseil.

-
Edité par pipelette13 20 octobre 2017 à 19:08:58

-
Edité par AbcAbc6 20 octobre 2017 à 20:52:44

J'ai jetée un oeil sur le cours et effectivement pas un mot la dessus, c'est pourtant un point non négligeable quand on pose les bases du HTML.

Surtout que ce type de problème semble récurent.

Merci  d'avoir pris le temps de me conseiller. 

ça fonctionne !

Je prends note de penser à éviter espaces et accents. Merci beaucoup

J'ai une dernière petite question concernant les images encore. Si je veux créer un site web (je n'en suis pas encore là) et que je veux intégrer des images qui sont sur mon ordi. Comment je fais pour que ces images puissent être lu de n'importe quel ordinateur ?

pipelette13 a écrit:

Su tu parts du fichier Entrainement CV.html, alors le chemin d'accès et direct puisque les images se trouve au même niveau que celui-ci.

<p>
       
       <a href="versiongrande.jpg"><img src= "versionpetite.jpg" alt="portait femme" /></a>
     </p>

Essais ceci, pourquoi ouvrir le dossier HTMLTEST puis CV alors que tu es déjà dedans...

Evites de mettre des caractères d'espace dans tes noms de fichiers, images, dossiers, etc... juste un conseil.

-
Edité par pipelette13 il y a environ 4 heures

Si on peut faire ceci cela veut dire que n'importe qui peux accéder à ton disque dur (photos perso, données, mots de passe de comptes, travail, etc et etc...), bref c'est une intrusion, on peu appeler ça se faire pirater 

Donc NON et heureusement. Il faut héberger tes images sur un serveur web. Tu va donc les uploader (charger chez celui-ci)

Si je clique droit sur mon avatar, puis copier le lien j'obtiens: https://sdz-upload.s3.amazonaws.com/prod/users/avatars/85236911.gif 

Un hébergeur gratuit te permet de mettre en ligne tes images et elles seront ainsi à disposition des visiteurs. Quand tu fais google puis images tu accèdes aux images hébergées sur des serveurs, il te suffit de copier le lien pour les insérer dans une page web, etc... comme je l'ai fait dans mon exemple https://jsfiddle.net/6ph6mwc9/

était ce ta question ?

-
Edité par pipelette13 21 octobre 2017 à 0:24:42

C'est exactement ça.

Merci.

Tu as des hébergeurs gratuits à m'indiquer?

pipelette13 a écrit:

Si on peut faire ceci cela veut dire que n'importe qui peux accéder à ton disque dur (photos perso, données, mots de passe de comptes, travail, etc et etc...), bref c'est une intrusion, on peu appeler ça se faire pirater 

Donc NON et heureusement. Il faut héberger tes images sur un serveur web. Tu va donc les uploader (charger chez celui-ci)

Si je clique droit sur mon avatar, puis copier le lien j'obtiens: https://sdz-upload.s3.amazonaws.com/prod/users/avatars/85236911.gif 

Un hébergeur gratuit te permet de mettre en ligne tes images et elles seront ainsi à disposition des visiteurs. Quand tu fais google puis images tu accèdes aux images hébergées sur des serveurs, il te suffit de copier le lien pour les insérer dans une page web, etc... comme je l'ai fait dans mon exemple https://jsfiddle.net/6ph6mwc9/

était ce ta question ?

-
Edité par pipelette13 hier à 0:24

je n'en ai jamais utilisée :

http://www.commentcamarche.net/faq/1624-choisir-un-hebergeur-gratuit-ou-payant#hebergeurs-gratuits 

https://fr.000webhost.com/ 

Parfois ils mettent de la pub. Toi tu as juste à créer une page web ultras simple, tu y mets tes images à coups de <img  /> sans css. Tu as ainsi le lien de chaque image disponible (http://.....)

Il doit y avoir des sites d'hébergement juste pour les images aussi comme http://www.hostingpics.net/ , si quelqu'un peut donner un conseil sur le choix de l'hébergeur ou d'une application qui ferait la taf..

ps: on peut tricher, mais ce n'est pas très moral  

Tu postes tes images dans ce sujet (sur OC donc). OC les héberges chez amazone (je crois). Elles seront ainsi disponibles de la même manière...

ex de mon sujet ou j'ai postée des captures : https://openclassrooms.com/forum/sujet/creation-delements-html-et-attributs-data?page=1#message-92024935 

Puis clic droit, copier l'adresse de l'image, et voilà : https://user.oc-static.com/upload/2017/10/21/15085982569104_Capture.jpeg 

Bon comme je l'ai dite c'est pas morale, mais je viens d'y penser (esprit tordue parfois )

Autre possibilité, des images sur un compte FaceBook ou Google+. 

-
Edité par pipelette13 22 octobre 2017 à 19:03:42

Avec quelques jours de retard, je te remercie pour ta réponse

Google me semble être une bonne idée. Merci

pipelette13 a écrit:

je n'en ai jamais utilisée :

http://www.commentcamarche.net/faq/1624-choisir-un-hebergeur-gratuit-ou-payant#hebergeurs-gratuits 

https://fr.000webhost.com/ 

Parfois ils mettent de la pub. Toi tu as juste à créer une page web ultras simple, tu y mets tes images à coups de <img  /> sans css. Tu as ainsi le lien de chaque image disponible (http://.....)

Il doit y avoir des sites d'hébergement juste pour les images aussi comme http://www.hostingpics.net/ , si quelqu'un peut donner un conseil sur le choix de l'hébergeur ou d'une application qui ferait la taf..

ps: on peut tricher, mais ce n'est pas très moral  

Tu postes tes images dans ce sujet (sur OC donc). OC les héberges chez amazone (je crois). Elles seront ainsi disponibles de la même manière...

ex de mon sujet ou j'ai postée des captures : https://openclassrooms.com/forum/sujet/creation-delements-html-et-attributs-data?page=1#message-92024935 

Puis clic droit, copier l'adresse de l'image, et voilà : https://user.oc-static.com/upload/2017/10/21/15085982569104_Capture.jpeg 

Bon comme je l'ai dite c'est pas morale, mais je viens d'y penser (esprit tordue parfois )

Autre possibilité, des images sur un compte FaceBook ou Google+. 

-
Edité par pipelette13 22 octobre 2017 à 19:03:42

Bonjour, 

J'ai encore un problème d'intégration d'une image. Je vous mets le début de mon code. J'en suis à la partie où il faut créer son site internet. J'ai choisi d'essayer de créer le mien. Et là je bloque et je ne comprends pas pourquoi mon image ne veut pas apparaitre.

L'idée est que l'image (c'est un logo) soit cliquable et permette un retour à la page d'accueil. le header doit toujours être apparent (mais ça c'est une autre histoire je suppose).

Merci encore pour l'aide à venir

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="Autour de mon jardin.css" />
        <title>Autour de mon jardin</title>
    </head>

    <body>
        <div class="Container">
            
            <header>
                <div class= "titre_principal">
                   
                    <div class="logo">                    
                       	<a href="http://www.Autourdemonjardin.fr"> <img src= ="autourdemonjardinpetit.png" alt="Logo Autour de mon jardin fleur"/>
                       	</a>  
	</div>

Le header a bien une fin, je ne l'ai juste pas mis.

-
Edité par ClementineMarcet 20 novembre 2017 à 16:07:45

Bonjour, ligne 5 pas d'espace dans les noms de fichiers (idem pour les noms de répertoires)

Ligne 16 tu as un double signe égal ce qui devrait te donner une erreur quand tu valides ton code au validateur https://validator.w3.org/

Coucou,

Pour ton image qui est en locale, le chemin doit être incorrect.

Et tu as un erreur ==

<img src= ="autourdemonjardinpetit.png"

Zut déjà dis 

-
Edité par pipelette13 20 novembre 2017 à 16:17:20

Roh merci, c'est là que je vois que je n'ai pas encore l’œil. ça fait 2 jours que je cherche le problème.

Merci Pipelette pour ta réactivité

pipelette13 a écrit:

Coucou,

Pour ton image qui est en locale, le chemin doit être incorrect.

Et tu as un erreur ==

<img src= ="autourdemonjardinpetit.png"

Zut déjà dis 

-
Edité par pipelette13 il y a environ 1 heure

Dis moi tu codes avec quel éditeur, notepad++ ?

Si oui prend en un autre plus aboutit, comme  Atom, Brackets , Visual Studio Code (ou sublime text mais je connais peu celui-ci) etc...

Ces éditeurs analysent un minimum ton code  et t'indiquent ce type d'erreur (étourderie ) , c'est donc très pratique 

Et comme le dit AbcAbc6, utilises fréquemment le validateur https://validator.w3.org/