Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.2 hours
Getstartedhtmlcss
  • Overview
  • Transcript

3.3 Images

The site could really use a logo. In this lesson I'll show you how to add images to your web page via HTML. It is easier than you may think!

3.3 Images

Welcome back. In our last lesson, I mentioned that I intentionally didn't link up the home page because I wanted to show you how to insert images and link those up in this lesson. In between that lesson and this one, I've gone ahead and created a logo.png file and dropped it into the Home folder. Here's a preview of what it looks like. Let's go ahead and insert that into our website now. But before we add our logo, in our last lesson I forgot to copy and paste all of the links that we set up in the contact and other pages and actually paste them into the index page. So right now, we have a broken sidebar that needs to be fixed. So I'm gonna toggle over into my text editor and I'm gonna pull up one of the sidebars that we do have working, like contact.html. I'm just gonna copy and paste over that entire unordered list that makes up the navigation. And I'll just paste it into this unordered list that is broken. So if I paste that in, save it, come back, and refresh, now even my index.html has working links. So I can go to Company Timeline, CEO, About Us, but that Home still needs to be fixed with the logo. So I'm just gonna go back. Now we are on the index.html, and we're ready to insert the logo. So now let's toggle back to our text editor, find where we have the home text, and we're gonna replace that with an image tag, or img. When I hit Tab, autofill gives me the img tag, and let's me fill out the source, which is going to be logo.png. I'm going to go ahead and save that down, toggle back, and refresh, and now we can see the logo has appeared on our site. It's really that easy to add images to your website. But now the question is, can we click on it to get back to the homepage, which we're already on, but if we were on one of these other pages, could we click on it? And right now we can see that the mouse isn't changing into a hand cursor to indicate a link like it does here. And also I can click on this all day long, it's not going to do anything. So let's go ahead and link it up. Let's toggle back to our text editor and we're going to surround the image with a standard anchor tag. So I'll type A, let auto-fill do some magic for me, and we want that to link to index.html. Well, notice that the auto-fill actually put the ending a before the image tag? That's not right. We want to go ahead and get rid of that. And we want the anchor tag to surround the image. So we want the closing a to be on the outside of the image tag. So I'll go ahead and take care of that, save it. We come back to our website. We refresh and now we see that we can click on this. We actually see the hand cursor and it's a very clickable link at this point in time. So congratulations, you've added an image to the website, and you've made it clickable, turned it into a hyperlink. But what happens when we go to the About Us, Company Timeline, any of the other pages, still have that home text there, and that's because we haven't updated the HTML code for any of our other pages. So as a matter of practice, adding images, let's go through a couple of those now, and then we'll copy and paste the rest. So let's take care of the about page. We'll toggle back, we'll open the about page, and we'll do the exact same thing we just did where it's at home. We'll clear that out and the first thing we'll wanna do is add the image. We'll hit Tab to let autofill do its job and give us the source attribute, and we'll type logo.png. We also know that we need to surround this with an anchor tag, so right before the image, we'll type a. Tab to let autofill do its job, and we want to link that to index.html. Once again that closing anchor tag needs to be on the outside of the image, so we'll get rid of it, and then we'll re-add it on the outside of the image tag. We'll save this down, we'll go back over to our page and we'll click the About Us link. And once again our logo appears on the about page as well as on the home page. Let's go ahead and go through and quickly copy and paste that for the rest of these pages. So we'll take care of company timeline, CEO bio, social media, and contact us, but instead of doing the same thing over and over again, it makes more sense just to copy and paste. Let's toggle back to our text editor. And we need to take care of CEO, company, contact us, and social. Let's go ahead and go to the index page which we know has the actual logo and link set up and right here is that actual line of code. So I'm going to highlight that, copy it, and then just to keep things clean I'm going to go ahead and close this particular tab. I'm just going to highlight this for the social page. Paste, save it, and then hit Cmd+W to get that out of the way. Same thing here for the contact page. We're gonna get rid of it by pasting over it. Save it down. That takes care of the contact page. The company page is going to be the exact same thing. Paste it, save it down, clear house. Last but not least the CEO page, paste it, save it down, clear house, and we're back to the about page that we just copied everything from. So let's go ahead and toggle back to the site and do a quick sanity check by refreshing. We're on the homepage now. Let's check the About Us page. There's the logo, company page, logo's there. CEO, check. Social Media, check. Contact Us, check. The image is loading beautifully, and no matter what page we're on it links right back to index.html. So in just a few short videos, we've gone from having a single webpage to having a full blown website with links between all of our pages and pictures on every single page as well. In the next lesson I'll show you how to display data in a clean and organized manner using tables. Thanks for watching!

Back to the top