Linking Images

Quick reference

• 00:05 Okay, so in the last video we talked about images, in the video before that
• 00:08 we talked about links, so in this video I wanna talk about linking images.
• 00:12 So we have got our image here but I can't really click on it.
• 00:15 What if I want to click on it and I want it to go somewhere, how do we do that?
• 00:19 Well, it's pretty easy, actually first,
• 00:23 let's, me hiking outside of Las Vegas, save that.
• 00:29 All we need to do is wrap this image in a link.
• 00:32 So we know how to create a link, a href=,
• 00:40 And then close our image tag.
• 00:42 Now where should we point this?
• 00:44 Let's send it external, let's say,
• 00:47 I was hiking at Red Rock Canyon, just outside Las Vegas.
• 00:51 I used to live in Vegas.
• 00:52 Beautiful area if you ever get the chance to go hiking just outside of Vegas.
• 00:57 It's like five mile outside of Vegas, check it out,
• 00:59 Red Rock Canyon, very beautiful.
• 01:01 But anyway, we can post that in there, click save, head back here.
• 01:05 And if we click on this, boom, it goes to Red Rock.
• 01:08 Now I mentioned in an earlier video, remember if we hover over,
• 01:12 we get the title tag there.
• 01:14 I mentioned in an earlier video for a link, we might not want that link
• 01:18 to keep in our same web browser, we might want a pop up in another web browser,
• 01:22 cuz, hey, you are at website, I don't want you to leave my website.
• 01:26 But if you must leave, we are gonna open another browser,
• 01:29 so my website still sticks around, in case you come back later.
• 01:31 To do that we use the target tag.
• 01:33 Whoops, target = _ blank.
• 01:37 So I'm going to save this, come back and hit reload.
• 01:41 Boom, now it opens up in another web browser, so that is cool.
• 01:45 So very, very simple and back before CSS became really popular,
• 01:49 one of the tags you could use was a border tag.
• 01:51 If you save this, we get this purple border because this is a link,
• 01:56 and if we click it, it sort of changes color.
• 02:00 I don't know why you would use that but I thought I would mention it.
• 02:02 These days, CSS handles all those sort of thing.
• 02:06 But one more quick thing to mention about images, we use this title tag.
• 02:10 There's another tag you're going to want to use called alt.
• 02:14 And let's just say, let's do Red Rock Canyon.
• 02:19 Now if we save this and hit reload, now if we
• 02:24 hover our mouse over there, it still says, me hiking outside of Las Vegas.
• 02:27 It doesn't say Red Rock.
• 02:29 If we view the source, we still have this alt tag.
• 02:32 So what is the alt tag?
• 02:33 An alt tag basically if there's some problem, sometimes images don't load,
• 02:39 you might have had an Internet connection problem and the image just didn't load.
• 02:43 When that happens, you'll get a little box that appears, a little outline and
• 02:48 that alt text will show there.
• 02:50 So I think possibly people who are blind,
• 02:53 they have special software that speaks things out as they appear on the web page.
• 02:58 I believe that alt text will be spoken out in those software.
• 03:02 I could be wrong about that but it's always a good idea to use the alt tag,
• 03:06 as well as the title tag for all of your images.
• 03:08 So keep that in mind.
• 03:10 And so, yeah, that's pretty much it, that's linking images.
• 03:14 Images are pretty simple we learned, links are pretty simple,
• 03:16 putting together is even more simple.
• 03:18 So in the next video, I wanna start to talk about tables,
• 03:21 tables are very important part of HTML.
• 03:23 So that's all for this video.

Lesson notes are only available for subscribers.