[MUSIC] So we've created our first hypertext website with connections between three different pages and you've seen how you can create a basic nav bar. But, what we're gonna do now is learn about a few more useful HTML tags that you're gonna see on every single page more or less. So, the first one we're gonna find out about is the img tag which allows us to imbed images in our site. So, let's go into the code. So what I'd like to do is on my About Me page I would like to have some sort of image to maybe show a picture of what I look like. Let's see if I can find that, so I'm editing aboutme.html. And in my folder here, I've actually got a file called myk.png, where I look a bit strange. But that's okay, its the Internet, and I'm going to just look at that. So that's myk.png. Okay? So png is the file extension, that means it's an image file unlike the HTML files. And so normally if you're working in a word processor, you just get that image file and drop it in. Right? You drag and drop it, but we can't do that in HTML. What we have to do is make our pages out into lots of different pieces. So, yeah, we have the HTML file and if we want to use an image file on that page we actually have to use a tag and pull the image in with a tag. And as I said earlier it's the img tag. So, let's do that. [SOUND] img, okay. And normally an image tag, it doesn't actually have any text inside it. You don't put any text inside an image tag. So we can use a shorthand. We don't have to have this closed tag here. We can just put that in, like that, at the end of the tag. And that sort of opens and closes it in one go. And you notice I've put an src attribute in here. And this is how I tell the browser where to load the image from. So it's called myk.png. And a top tip here is that, don't put spaces in your file names. So if you really want several words in a file name, put underscores in. So, let's say it was called myk_picture. [SOUND] You wouldn't write, you wouldn't do it like that. You'd have to have, you'd always put underscores in instead. But that's okay. I don't need that for now. I'm just gonna call it myk. And let's save that and go back to the browser and go to the About Me page. And you can see that now, oh dear, I've got sort of a giant image, which isn't really what I was after. So what I can do is I can put another attribute in to set the size of the image. So, let's say we want the width of 50% like that. You can see now the browser has cleverly set the width of the image to precisely 50% or half of the width of the whole page. So as I kind of make the page wider you can see that it's actually automatically changing the size of the image to reflect that 50%. Okay. So I've embedded an image. Great. And it's automatically resizing it for me. Which is what you might call Responsive. So that's our very first step into responsive web design. The idea that depending on the size of the image, the page that you're looking at, depending on the size of the Window, the page adapts to that size. We could also hardcode it. We could say, nope I want it to be 150 pixels, and that's it. And then you'll see it stays the same size regardless of how wide the window is. But I quite like the responsive feel of it. So I'm gonna stick it to 50%. Okay, and then maybe below the image I'd put some sort of caption. As a sort of third level heading. This is me looking the other way. Right? So we just put a little caption under there. You can see underneath there is a little caption. Well we can actually do something clever here. We can actually turn an image into a link. So what I could do is put a name tag around the image. So if I just format it out nicely, so that it's really obvious what's going on. So, there is my image tag and then I do end of a there. I've now turned the image into link. Because I need to tell it where to go. Well, maybe it could go straight to it's image file itself. So that link is just gonna go straight to myk png. So what that does. Okay, and zooming in again, lets just check that mouse pointer. So that's the normal mouse pointer, now go over here you can see it turns into some clickable thing, mouse pointer. You'll see the bottom of the browser window as well, it is actually popping up information about where that link is gonna go. So, let's click on it and you can see now it's just showing the image file, it's not showing the HTML anymore. So, I can use my browser back button to get back out. Okay, so I've used the img tag. Now another tag I wanted to show you about is the tags that we can use for listing. So, quite often on web pages, we want to create lists of things. So, I don't know if it's the most popular type of webpage on the net. But you've certainly would've come across the best five Coursera web program or MOOCS for example. Or maybe the best five pictures of funny animals, or whatever it is that people look at on the Internet. And so how do we create these kinds of lists of things? Well, I'm gonna go to the contact page and that seems like a sensible place where we might have a list of things And so there is different ways of creating lists. You've got ordered lists, OL. So, let's see how that looks. And again, we use that concept of one tag being inside another tag. Okay, so we can do that. And so 133, my street. Here is my address. [SOUND] Save that. And then here we go to the contact page. So you can see it's put a one. If I put another thing there. [SOUND] My town. And I can add another one. [SOUND] My nation. So you can see that there we've created sort of a list. And the browser again has automatically done some stuff for me. So it's obviously automatically selected the font, but it's also indented this list slightly. So it's pushed it in a bit and it's automatically created a one, two, three. Another type of list is the Unformatted List. And let's just see how that looks. So it's an un-ordered list. And UL gives you bullet points as you can see there. Instead of having numbers in there, I've got bullet points and you can see, that the browser again has indented it and it's created this special circular icon to indicated a bullet point. And I didn't have to do any of that, that's with the browser interpreting it for me. There's one more called Descriptive List, Description List. At which you can go and look at yourself and find out about. In fact, we're gonna see it in the later lesson. So, that's it. So we've just seen how to use some other types of tag, we used the image tag and we used two types of list tags. And you've seen that we can put one tag inside another tag [MUSIC]
