012 HTML Image Elements

By | February 22, 2020

All right. So in the last lesson we looked at how to use each team on lists that were ordered as well as an audit in this lesson. I want to talk about the image element and how we can incorporate images into our Web site. So the image TYG is again a self closing tag so it doesn’t need to be closed. But for the image element just providing an image tag isn’t enough. You also need to specify the source and that’s the source of the image that will be displayed. So that can either be a row so it can fetch it from the internet or it can be a local image that’s included in the same directory as your Web site. So we’re going to look at both types. But the first thing I’m going to do is I’m going to look for an image of myself online and let’s have a look see if there’s any images that are actually me. Oh there we go. So we already found one. So this comes from my Twitter. And you can also really go to your Twitter Facebook and you can right click on the image and simply copy the image address. Now if I paste it here you can see the whole Jarrell of where the image is location. And if I hit enter my browser will fetch that image from that location. So now if I copy this image address or image source and I add it to my website as a HDMI element. So just above my H-1. So just above my name here. I want my image to show up. So I’m going to use the image tag and the source. I’m just going to paste in that your Aurel that I got from earlier on. Now the next attribute here that comes up automatically is the alt or the alternative text. And this is the case for say if a browser can render the image then it will simply display an alternative text to the user to describe what that image was about. So I’ll just put the alt text as Angela profile picture. Now if you’re interested in search engine optimization and getting your website ranking for certain key words this is something that Google looks at to try and figure out what your web page is about. So if you’re making a web page that’s about burrito recipes and you add an alt tags that says finished burrito product image one then it helps Google to index and figure out that maybe your web page is related. When somebody is searching for Perito recipes. All right so let’s hit save and let’s refresh and check it out. And I’ve now incorporated my first image onto my personal web site so you can either look around for an image of yourself on Facebook or Twitter or anywhere that would host it. Alternatively if you can’t find any images of yourself on the web which is probably a good thing you can also create an account on Photobucket and upload your own picture in order to get a role and after you do so you can simply click on the image and right click to copy the image address and paste it into your source between the quotation marks. It will work exactly the same. There we go. Angela is now a box of biscuits crates. Now when my browser looks through this file to see how it should load it up and display it when it comes across this image tag it has to go and ping the servers of Twitter to try and obtain this image. And if it gets permission to download this image then they will grab that image and display it over here. So currently my image is hosted on Twitter’s servers and my browser has to download it from there in order to display it inside my web page. Now what if Twitter goes down what if they die what if nobody wants to send tweets anymore. Well then their service is going to be shut down. And my image will no longer be available for download and you will instead end up or something that looks a little bit like this and you might have come across it in the past when you’ve been loading up Web sites. It means that the image is no longer available or is no longer hosted at the address that specified in the source. So in order to remove our reliance on Twitter we can also put an image into our fold. HTL personal site and refer to it inside source. So let’s go ahead and do that. Now if I go onto my desktop inside wept Veltman inside the folder HVM Bell personal site. I can drag and drop or paste an image of me into this folder and now my index page HTML and my picture could Angela up DNG is in the same folder and I can refer to it inside my code. So instead of using a web address as the source of my image I can simply refer to the file name because they are at the same level so index and changed him an an up PMG at the same high rock level that both inside my site. Now if I had an images folder and I put my image into the then I would have to add a path to get there. So it would be something like this. Now both ways work and you can do it either way you like. And now if you hit save and you go to my site you’ll notice this image change from Square which is what it got from Twitter to circular which is what it got from my local file. And there we go. We’ve managed to brighten up our home page by adding an image of ourselves to the top of it using the image tag. And we’ve started to look at these HMO attributes and you can see that every single HMO element in the MDA reference also has a section on attributes. And we’re really only touching the surface here because there’s other attributes that you can add to the image element or most other elements that you decide to use. And we’re going to be looking at these attributes as we come across them for different age Tamal elements. Now in the next lesson we’re going to be looking at Anca tags and how we can start adding links into our Web site and how we can create new pages that can be linked to from our home page. So for all of that and more I’ll see you on the next lesson.

Leave a Reply

Your email address will not be published. Required fields are marked *