Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Jake Nisenboim
3,374 PointsQuestion about images in HTML
Hi,
So having moved from workspaces to a code editor I noticed a few things.
I had:
< a href="img/TruthPactLogo10.jpg">
<img src="img/TruthPactLogo10" alt="">
Because when I moved, my images would not show directly, but only when clicked on, I was wondering what was going on.
I found out that the image itself was actually ** .png **. The odd thing is it worked despite this while in workspaces. Secondly, I had not .jpg or .png in my img src. Is this an issue?
I also wonder whether I even need the 'a href' tag? I am looking through my notes and can't find anything specific about the 'a href'. I do however have a note on the 'img src' and have .jpg at the end as well.
In any case, I decided to take the 'a href' tag off entirely, while the four other 'a href' tags remained for the other images; and they all started to work !
I put the same line of code back and it still works. I changed the a href to .jpg while it should be .png and it still works. However, if I change the 'img src' to .jpg while it should be .png, the image stops working.
So my question is:
Do I even need the
< a href="img/TruthPactLogo10.png">
why?
I am under the impression the difference is that now I am accessing the files directly rather than through a port on workspaces.
What is the proper way to write the code? And again, do I need the 'a href' and why?
Thank you a ton !
3 Answers
deckey
14,630 PointsHi Jake,
<img src> and <a href> tags and properties are 2 completely separate things, don't confuse the two.
If you want to display an image in a browser, you would go with
<img src='path to image.extension'/>
If that image needs to be a link to something else as well, then you should enclose it in
<a href="http://somesite.com/image1.jpg">
So, combined together, you have an image displayed which is also a link to somesite like this:
<a href="http://somesite.com"><img src="somesitethumbnail.jpg"/></a>
Hope it helps, cheers, Deckey
Jake Nisenboim
3,374 PointsAwesome ! So can I ask one last thing --- why did the videos instruct us to create an anchor element for an image which has no site attached ?
Thank you !
deckey
14,630 PointsHi Jake,
<a> anchor element can point to local path as well, not just http or other protocols
<a href="/images/myimage1.jpg"> Link to myimage1 </a>
would open myimage1.jpg from images folder, ok?
good luck
Ted Sumner
Courses Plus Student 17,967 PointsIt is not uncommon to write the HTML with an href="#" as a space holder. You don't get an error and you don't have to take the time to fill in a path. It is especially helpful when the linked page does not exist yet or you have not settled on the project structure.
Mason Long
5,568 PointsYou have to make the source of the image the name along with .png such as
<a> href= "img/TruthPactLogo10.jpg" <a/>
Jake Nisenboim
3,374 PointsYou are saying that I do need 'a href', why?
And that they both need to be .png --- why if I had no .png and the incorrect (.jpg) while working in workspaces was it working?
Mason Long
5,568 Pointswell , you're anchoring to that certain link , so you'd need one for each separate picture
Jake Nisenboim
3,374 PointsCan you explain what that means? In my about.html I have no 'a href' but it worked and continues to work fine.
Thanks Mason !
Jake Nisenboim
3,374 PointsJake Nisenboim
3,374 PointsPS. I added a space after the < only because otherwise the code would not display.