Adding Images

Craig Blewett
A free video tutorial from Craig Blewett
Activated Academy
4.2 instructor rating • 12 courses • 16,433 students

Lecture description

Images make our webpages come alive. In this lesson we will look at how images can be added with HTML.

Learn more from the full course

HTML Programming For Beginners (THE Easy and Fun 3Hr Course)

A fun and easy introduction to HTML coding and creating your own website

02:32:32 of on-demand video • Updated November 2017

  • The basics of HTML
  • How to use the Sublime HTML editor to code in HTML
  • Create a basic webpage in HTML
  • How to add images to websites
  • How to add embedded videos to websites
  • Using tables to help format your website
  • Hyperlinking images and text
  • Formatting headers
  • Creating multi-page websites
  • Some clever bonus tips and tricks to help you solve your own HTML issues
English [Auto] We'll come back. Our website is coming on. Looking super cool. BUT WE CAN MAKE IT YEAH WE CAN. YES YOU CAN. You convinced yet just that that the SWI TV. Is that what you're going to say. No. OK. But I think our story is a little boring. We've got these cool things and columns to look at how those would maybe be a little nicer center now centering is quite an easy thing to do for whatever reason if you want to send out a piece of text or whatever we're going to censor stuff that's in the column. Remember we've got our road role. And so we've got data Autons which is in that column so he has our first one and that is a paragraph that is made up between the opening and closing piece. Now what we can do is use the send to tag it's really quite simple. Guess what it is you just typed the words into and it's the Santa tag. And you can then just copy that and put it between opening and closing piece. So obviously what we got to do is we've got to do that again for each of them. We're going to stick the Santa tag and so again you can just do Santa and do it service on each of them to be sainted. So they have this little cool shortcut that we can look at later that can help you make this a little bit easier. The moment we just keep one thing at a time since the tag opening and closing. Right. So let's have a look. Nipping across here we go. What would happen. Three to one buying. OK. You get the idea. They have now been centered in each of those columns. Right. So it's not bad not bad not bad. But you know want it gives them much or this is beautiful but you know what would make it more beautiful. I mean I like Z as like as you would be. You know this is cool. You already think you've it. We've got we've got images. So you've got to look at the text below image so if we're going to have like a design like that. We had our takes or image so maybe you know this is a bit boring. I mean these are like this what a v v for the sweater. Is that right with my out. Whatever. You know it just didn't look like that. That was the way the look of. So what do we think we did that like image. It isn't boring it's just. So what would be cool Josh is if we had like a picture of your arms Don Nelson Nelson Mandela An Afghan woman Frank one about each of these so I reckon we can make that rock. So what we're going to do. We're going to find these images. We're going to have to fun those images. OK. So that's the first thing we got to do. So let's go in here across to our friend Google. We've got to go to Google Images search because that's just the easiest place to go and look for images. And it was our first family that we had over there all that Arab world instead. So we want to get an image of that. What would you can do rather than getting a huge gigantic image that too is going to take a long time to load on your site and cause all sorts of issues you can control multiple items. So when you click Tools you'll see a little drop down give you some options and you can choose any size large medium and you can even choose in icon size which is obviously going to be nice and small. So let's go for that. All right let's see. As an interesting little picture all of our Arab future do you like them with these little tongue sticking out here. Right right. So when you found images like what you need to do is you need to get the image address with this image distorter because you right click and you choose Copy image all the major address to your major address. So we're going to need that address because that is where the image is hosted. It has to be hosted somewhere. It's very important. So either you need to upload your image to a place where you can host it. So for example you could hosted in Google Drive Dropbox wherever you like with you paying some hosting but ultimately it needs to be put into. Now you could hosted Lochiel your own web site but then would only work on your computer. But once you publish to the Web people can access your web your you or your local harddrive. So it needs to be hosted online saying are we just using these words. We're just pointing to this image that is stored on someone's web site and we're going to nip across here. Now what we need to do your show is what. Yeah. We I think we put it on the road so we put a rope up. How many rows about the current one Eric and one row you can see it's starting there. So we're going to put in another TR or it has to be ready to put in another right there. Make a beautiful spaces. What we now need. What comes next. Good TVs. OK. So we're going to put on our TVs which is going to be our data so we can essentially end up with three of these here. So we're going to have one of these for that is going to occur about each of the rows below. So they'll be one for each one carry soap opera. So now we've got blank if we look at it at this stage and save that as it's going to look amazing it's going to look like nothing you modernizes it just jumped down a little bit because it is actually a Allegro sitting there but nothing in it right. So what's next how do we insert an image. That's what I want to get. So now with the image this is where we get to at least we have that have images and it's actually fairly easy. So if we just happen in Jeem and you hit TAB this is going to fall. Do you always have to hit the tab. Peter as you can see if we do this you can see the suggestions I'm Jeanne. Hit it. Yeah. I don't have that. It's easier to do this. I'm key to tab. And you see it or info's it's RC ECOs and it's got this little bracket it's waiting for something now. It's all I see is the source that is once in a way is the image store. That's what I was saying a moment ago. You have to inform it as to where the image is stored it has to be stored somewhere. Now all of this is going to be an online web page. The image has to be stored online. So at the moment the ones we are grabbing are stored online on someone's site. So it's basically to put them in there. Yes. Enough with paste. See this is the link to the image. So that's a link to someone's web site with images. And there we go. There is Albert Tawnya. Now just at that point be very careful is the source has to point to an image not to another page or something. Notice that the NBA needs to be an image a giant pig Appian g some sort of image file because if you don't do it right you're not going to get the image. So in fact if we go across who we got next. Nelson let's go and for Nelson. Now some where are you all right. Are we still searching on icon sizes. We're trying to be right now on that something was wrong with that one. Not good. Now watch closely. Foster the I am doing I right click. Not what we doing here is I'm not copying a link address that is different. I'm copying the email address because a link address. And we just show you if I copied that and just copy and paste it so you can see what it looks like is a long thing. It looks like that. There is no dot PMG not no dot J pig. OK we're not doing that. We are copying and image address. I actually want the exact address with the images. There it is. You see it then he with a j peg. So that's what we want the image address. So Josh what are we gonna do in our face. We have it hand paste. Right sir. That's our second one. And then we got to one more how you've got to find all the old Benji from your room or I drop see this next or as you see it on a Sunday because we have trays in Pacific on size all of them will be 2:56 2:56. You notice now say this save me a copy of. We save that we put it in here. Take him instict. Benji. Benji go around Bandys Aaron. Now you notice when you refresh tap you'll see the same size as if we didn't have them back then they wouldn't be the same size. Yeah. So I mean that can make it look a little bit actually. So as you say as you know we've we specifically chose icons sizes which made it nice. Let me just show you. If I had to just go say large zoom find some other size for good old Binjie or and there's Binjie over there now you see that's way. That's 2 7 4 4 by 1 8 9. I actually wouldn't want to image that because it going to really make things a slightly smaller one. But now besides the size what's going to happen is if I had to take that image address and put that in and it's replace what we've got for order for Benji with the new one we're going to replace that little bit take that out and paste the new one in. Take a look at what happens. How beautiful is this going to be beautiful. Is that going to be or not. I see what's happened. That one is really big is taking a long time even to load. It doesn't look nice it's not the same size. So let's come on that all up before we actually have another option and then other Rapture. So you want this image. But like that Seabeck it's not black and white but you want to get images exactly the same sauce. So we just get. You can actually specify the width of your image. So it's going to scale you image to a certain which very same with ECOs then with an inverted commas and I would say 266 I think that's what the other ones were there. Let's check out it go back to work for the band J where I get to Binjie you don't very large to load but so he is he's the rock with style but obviously he had the heart to be different yeah. Because it's everything all the way. If we are to set the highest Well he'd be very good. Here we have a long Bangi here. You can see it's got the same dimensions as guess what it is looking pretty cool. So you can alter it and play with the with items of things so you can add that to the end all to the width of any of these manually and obviously you need to fiddle with the high tech sector. So ideally if you try to make it all look the same you're going to have to try and find images the same or which you can download images and crop them yourself. So we've got three of them we've got to start looking to add. We got out Holbert Nelson and Benjamin. So what we've done unbeknown to people we've got three two rows to together with the three columns controlling this and we've got images that's looking pretty good. Yeah I mean that's when you begin to look like the Web site. Yeah. That's actually looking like we have quite what about of people I know what we need just one last thing. We see a hater at the top. What are you Seth. I say you say. So what will we use. We use the H-1 H-1 hara and we can say something about what it should Crites version of keywords that rock my world aka that. So we say that and here as you guys education quotes around my world now again they Benji's a little bit slow in coming up. The reason Bindi's slow in coming up is what it is just really large. Yeah I think that's the problem with having these cheesing a very large amounts. See ya I don't have to with Beiji. Going back and changing Binjie to a different top. I'm going to say Benji I like those. You can actually even say exactly that's the other option you could choose an image that is a specific size. You know but I am always happy with how Binjie who was specific wasn't not saw's been didn't get too carried away ominously looks pretty miserable there. But anyway let's keep him here. There's not 2:56 one copy the image address you could keep the size in if you like. It's just 266 is probably going to stretch him slightly but it's still human over there. Put that one nothing that's going to be better and we can see how we are looking and rocking out will do a lot better. They are. Benji. Benji fantastic. So there we have it. We can all alter the size of this the size of all of them if you wanted them all slightly smaller and it would be as easy as possible is an easy way if we say we decided we wanted all of these slots for adults who said we want them they're all like 220 and we want to post paste that to 20 like in all of them you know because we're want to repeat it's all over with 220 and they copy paste the easy way to repeat it is to say again we haven't got any in there with something like that. OK. So we hold down. C'mon. You know this is the case as we hear you just go down. C'mon then you see Rooper two curses. If you just keep clicking with while you hold want while you click. You must be homing down come on. So we give you another cursor three fashion curses. Yes sir. Now if we Toppan we say way then that's true. Cohoes. And then we can say a 200 or so 200 ever. We save that and no refresh is here and we got our cat. Wow. That's fantastic. So that was a very cool little techniques. If you want to have something done in multiple places you can have three things you just hold on C'mon and click and all the places that you want it to happen. Right. So there we go. This storm should look pretty impressive. We got a cool web site coming on now. We've got the tanks we've got tables we've got images you've got formatting you've got lists you've got fantastic things happening so well done at this stage you know what I think these people deserve a break. You go out and get a cup of coffee go for a run. I think we need to. I ask around. You're going to have a cup of coffee. See you back on the other side.