[MUSIC] Welcome back to our discussion of HTML. In this lesson we're going to talk a little bit about images and links. As we all know from using the Internet, pages that we visit are frequently full of interesting images and links to information that we find useful, or sometimes just entertaining. So in our last lesson, we looked at adding links, like a link to Google. It could be a link to anywhere else. Also adding text, and how we can work with that text a little bit. In this lesson, I've started with our same template. I've called it html3.html, you could call yours what you like. And I have it saved in a directory as before, where I have a collection of my HTML files I've been working with, my original template, and in this case I also have a file called a PNG file, which is an image. And we'll come back to that in just a moment. So, as we have last time, I have an anchor tag here which begins with an a. It has an href attribute, which is the URL that we want the link to go to. And then we can have any text here that we like that our user will see when they click the link. Now in this case, I actually also have another break tag like the one I showed you last time. Notice that this time, I've got a closing slash in the break tag. Most browsers will recognize the break tag with or without that slash. So, sometimes, you'll see it like this, and other times like this, it has the same effect. Also, these letters could uppercase or lower case, it works both ways. So on line 17 we have an image tag. It works very much like our other tags, it has an attribute. In this case, it's not href. It's source, we abbreviate that with SRC. So when we're reading it, we say source, but the attribute is the src tag. And we give it the name of the image that we would like to show. Now, by default, it will take the image in the same directory as your file. So I have my files here and I have my google.png image here. And if I go recall my file, it was called html3. If I go to open that, and what I'm going to do for a moment is remove these other items so as not to clutter our screen. I'll take those out. So, we just have the image tag. I'll save it. Then open the file, and then we can see here the image tag that I have here on my hard drive, and I can open this tag as well and we'll see it like that. So I got this image by going to a Google site, and downloading the image. You can use any image you like, it can have any name you like. And the image you have here could be an image of you, an image of your business, an image of friends and family. An image of anything that you've taken a picture of or found a picture of on the Internet. And you can show it on a webpage by having it as part of this source attribute, and here we have got google.png. So there are other ways to work with image tags. And notice that by using the break tag here, I forced my image, we'll go back to it, to show up on another line. If I remove that break tag, Like that, then go back, and I have to refresh to see the change. Refresh, notice now it's actually showing alongside the other item. So, that break tag caused it to go to a new line. That means we can use the break tag for now as one of our means of enforcing our layout ideas on a page. What we would like next to each other, and above, and below each other as far as our page elements go. There are other better, and finer grained ways to do that, but for now, the break tag will work. So, let me put back the items that I removed earlier and we'll look at some other ideas with Imagestack. Our images don't have to be locally on our computer, they can instead be somewhere on the Internet. Now, this is a link to an image on the Internet. So, let's try that one. I will for now remove this, we'll just go for this one. Again, we have an img for image and a source, but in this case the source is a URL, I know that because it starts with https. I'm going to save this, go to my page and I'll hit refresh. And there is our image tag, with an image from the Internet. This one is not locally stored for me. This one is at this URL and I can put in any image, any URL, and it would show up here as part of my image tag. So, you don't have to have the images locally. Next. I can put in my last image that I had here, and this one is going to be a bit different. So notice here that this one is an anchor tag which is like we have here on line 13. But also inside this anchor tag and I'm going to select this text to show you my point. Inside this, notice, we have an image tag. So, above here, we had to go to Google. Now, we're actually putting an image tag inside the anchor tag and let me show you what this does. So notice now, we've got the image I have locally, the Google Image, the image that I showed you a moment ago, which is sort on the Internet. And we have that same image but notice now when I go over it, my cursor is changing from an arrow to a little hand, meaning I can click this image. So clicking this image will now take me someplace, this image and this one are just for looking at. This one we can look at but we can also click it. So for instance, let's say you had a picture of friends and if you click that image, you wanted it to go somewhere else. This is how you would accomplish that. You start with an anchor tag, like here on line 27, you, in the href, place the location you want it to go just as you would have done up here on line 13. Then you can, if you want to, have optional text here. This is like our Go to Google here, this is our Go to Google 2, and then in addition to this you put in an image tag in this place before you close the anchor tag. So this allows us to combine both anchor the tag, which is clickable, and an image tag, which is a nice way of decorating our page. So any of this can be taken to our page from last lesson, let's take this one or maybe this one. It's a little easier to see and we can put it below the text we had last time. We'll save it. And now, this was our html2, now modified. And notice that our paragraph text from last time, with our bold text here and our link also now has a Google image. So hopefully this gives you some insight into how to add images and links to your pages. And I'll see you next time.
