HTML & CSS for Beginners Part 6: Images

Key Takeaways

hi and welcome to the next part of my series on HTML and CSS for beginners my name is Kevin and today we're looking at putting some pictures on our website so let's go and do that right now [Music] the images are a pretty big part of the web today and without them our pages would be pretty boring so let's see what we can do now image tags are one of the few that don't have a closing tag one of the other ones we've already seen with that is the meta tag up here so when we put our meta tag in you notice I never closed the meta tag other ones include things like BR and Link and yes there is a link but tag but it's not the same as our a tags that we've already looked at we'll worry about that later and there's a few others that don't close but there's not too many and images are one of them and it doesn't close because all the information we need is in the opening tag so let's let's go and put an image in the image tag is nice and simple so I'm gonna I have my first paragraph here right after my first paragraph let's delete that comment that I don't need anymore and put in IMG that's it that's an image tag but there's something missing obviously and it's a little bit like links a link without an href doesn't really do anything cuz it's not actually linking somewhere so an image tag just like this let's save and refresh and it makes a little space but there's nothing there because the browser doesn't know what it's supposed to put there sadly it's not the href attribute again that would be too easy an image it's SRC image source so same idea as before I put my two little quotation marks and we're good to go so the first one I'm going to do I've got this beautiful picture of a sunset right here so I'm gonna come here and do copy image address and um this is somewhere else on the internet so I'm going to take that and I'm gonna paste it right here and I'm gonna save that and hit refresh and there's my sunset so just like my links this is an absolute path this is somewhere else on the internet I don't have a picture of a sunset on my computer anywhere this is on another page that I found if I'm linking somewhere else I need to put the HTTP without that the image will not work properly but what if I have a picture that I took or a picture I have my computer that I want to use well it's a lot like this and as I mentioned early on everything we need has to be in our root folder so I've already gone and saved a picture here and I've put it into my root folder so I have my index that we looked at in the last video we created the page to really quickly and then I have this hamster dot JPEG that I've brought in and just dropped into my first website folder that was on my desktop so let's add that let's go and put this one after my second paragraph so I'll come in here and put IMG SRC and what I want to do now is I want to put my the name of the file so ham ster dot jpg I'm gonna save that I'm gonna refresh and it didn't work and if ever you see this it means it can't find your picture and I always have a little trouble spelling hamster so because I put a P in there hamster instead of hamster let's save that and refresh and there comes my picture so spelling is very very important that's the same for links but it's a little different for links if you're working on a link and you you know say I put Google without the e well it just won't find the page so somebody clicks on it it doesn't go where they were expecting it to with the picture though when you misspell it so like me I like spelling hamster with a P it gives me this little broken image and it doesn't look so good so get rid of that make sure you spell things correctly very important and there's my cute little hamster and the page is looking much better now there's something missing though for an image tag to actually be valid and acceptable code we need to include a second attribute and the next attribute so I'm going to come right after this quotation and I put a space and write alt equals and put my quotation marks alt stands for alternate text it's pretty much a description of your picture so a beautiful sunset and let's come down to my hamster al t is equal to an adorable mr. with no P refresh and it looks exactly the same it doesn't actually change your picture when you include the alt text or alternative tech I'm always just going to call that alt text since we're just writing alt and it's much easier to say so alternative text serves a really important purpose and for an image tag you need to put it for the tag to begin server valid and there's two times where it gets used or maybe more but there's two important times it gets used say someone for some reason it's disabled images on their website or let's say the Internet's really slow for some reason the image just doesn't load or there was a problem they will see the description so that's kind of handy and it's also for people who are using screen readers you know they might have a visual impairment they're visiting the site they can't really see the picture the screen reader is reading all the text and when it gets to a picture it's actually gonna read the alt text some people try and cheat systems a little bit they're using their alt tags for search engine optimization which is a completely other topic but if you're doing your alt text properly it should be a description of the photo you should be able to read this and know what the photo is without actually seeing it you can get very detailed in them a beautiful sunset with orange guy over you know the ocean with some rocks here it would be an adorable hamster on a grey table with a blurry background you know we want to make it as clear as possible for the person who's someone who's visiting the sites you might not be able to see what they're looking at so alt text is something that's important and you should use it properly now another thing that's sort of an important thing with images is you might see them written sometimes like this I'll do it for both of them so a space they're at the end and then with that because there's no closing image tag the image is just an image and it works like that so because there's no closing tag in the old days of HTML 4 and previous you had to put this forward slash in the opening tag just to also let the browser know it was then closing you're closing it without having to add the extra tag with HTML 5 you don't need to do this anymore some people are still into sort of more strict writing of code but it's becoming more standard and it's not necessary html5 is smart enough to know that what's going on so I'm never really gonna be doing it but just you know if you ever do see it with the forward slash close in there and what it's doing and why people are doing it but again if you want to go ahead there's nothing wrong with it it works perfectly fine and if it makes more sense to you awesome but I'm lazy the less keystrokes I have to do the better so I don't bother with it anymore so we've got two pictures on my site now the first one using an absolute path and the second one using a relative path and well that's it and I hope that makes sense if you have any trouble getting images to work on your site for any reason leave a comment below and let me know I'll see if I can help you out hope you like this video like it if you did subscribe if you haven't already and I'll see you next time [Music]