7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Images

Here I have a image called builder.jpg and we want to be able to display that on our html page. So let's learn how we do that. The first step is of course to open up our directory structure and we wanna place all images as we learned in yesterday's episode. They should all be placed within the images folder, so I will do that now. Now I can close this out, return to my project and you can see that it is in fact being referenced. So now, let's reference that image. And I'm gonna hit Enter a couple of times and we'll paste it right here. We use an image by using the img for image element, because there will never be text within an image that doesn't make sense, just as we did with links and with meta elements, we can self-close it. Let's see what this alone does, though, in the browser. And then come back and refresh and we don't see anything at all and that's because quite naturally there is no reference here so we have an empty image element it should be noted though this may not be the case in all process you will find that in versions of internet explorer it will display a nasty x meaning could not find the image. So you make sure that you aren't referencing empty images or images that do not exist. In this case, let's come back. We can reference an image not by doing href, which you might expect, by doing something called src. That's source, what is the source of this image. That's gonna be equal to a value, and the source is going to be img. forward slash builder. Now let's come back, and if I load the page, now we are referencing that image, as we would hope. We need to do one more thing for this image, though. It is a best practice and you should always do this, provide alternate text for this image, just in case the image is not available or images are turned off by whoever is browsing your website. They need to be able to have some feedback as to what this image represents, and I will simple say construction hat. And now, if I load the page again, you're not gonna see anything, but if I were to turn off images, you would see a little tool tip that said construction hat, and that's really good for screen readers and things of that nature. Now, we can also link to images that are stored on the web. This is common if you use something like. Amazon storage. But there's another way you can do it, and it's important that we go over this. Here's an image on net tuts. I'm gonna right click it, or control click, and choose copy image url. Now, if I come back, I can link to an absolute url, by pasting that in. And if I come back, we can. Change the alternate text to envato and if I load the page as you would expect we are loading that image. So you might think that's really helpful. This is really a big no-no and the reason is we can build a whole website by referencing images that are stored on Nettuts or any website, but the problem is whoever owns Nettuts, us in that case, have to pay the bandwidth for displaying images on your website. And that is not fair. This is what's referred to as hot linking. And it's a bad, bad practice, so please don't do it. If there is an image on the web that you want to use, and you have permission to use it, right click, Save Image As. In this case, we're gonna save it to Learning Images. And we'll call it Envado, and now we can reference it locally, like so, and we're not hotlinking Envado.png. Come back, reload the page, and I am referencing incorrectly, and that's because I forgot to include the folder name. Go into the images folder. Then find it. And now we are getting it. But we are not hot linking and making somebody else pay for our bandwidth. The only thing I wanna caution you is again, if you're going to do this, you must make sure that you have permission to use images and it's not copyrighted. So whether that means emailing whoever owns a website and requesting it, or only using images that specifically allow you to redistribute them and use them anyway you see fit. So again, to include an image we use the image element. We specify a source that references where the image is stored, and then we specify alternate text for when images is turned off. In the next lesson, I'm gonna teach you about divs.

Back to the top