All right. 1
So in the last lesson we looked at how to use HTML lists that were ordered as well as unordered. 2
In this lesson 3
I want to talk about the image element and how we can incorporate images into our web site. 4
So the image tag is again a self closing tag so it doesn't need to be closed. 5
But for the image element just providing an image tag isn't enough. 6
You also need to specify the source and that's the source of the image that will be displayed. 7
So that can either be a URL so it can fetch it from the internet or it can be a local image that's included 8
in the same directory as your web site. 9
So we're going to look at both types. 10
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 11
a look see if there's any images that are actually me. 12
Oh there we go. 13
So we already found one. 14
So this comes from my Twitter. 15
And you can also go to your own Twitter or your Facebook and you can right click on the image and simply 16
copy the image address. 17
Now if I paste it here you can see the whole URL of where that image is located. 18
And if I hit enter my browser will fetch that image from that location. 19
So now if I copy this image address or image source and I add it to my website as a HTML element. 20
So just above my h1. 21
So just above my name here. 22
I want my image to show up. 23
So I'm going to use the image tag and the source. 24
I'm just going to paste in that URL that I got from earlier on. 25
Now the next attribute here that comes up automatically is the alt or the alternative text. 26
And this is the case for say if a browser can’t render the image then it will simply display an alternative 27
text to the user to describe what that image was about. 28
So I'll just put the alt text as Angela profile picture. 29
Now if you're interested in search engine optimization and getting your web site ranking for certain 30
key words this is something that Google looks at to try and figure out what your web page is about. 31
So if you're making a web page that's about burrito recipes and you add an alt text that says finished 32
burrito product image one then it helps Google to index and figure out that maybe your web page is related 33
when somebody is searching for burrito recipes. 34
All right so let's hit save and let's refresh and check it out. 35
And I've now incorporated my first image onto my personal web site so you can either look around for 36
an image of yourself on Facebook or Twitter or anywhere that would host it. 37
Alternatively if you can't find any images of yourself on the web which is probably a good thing you 38
can also create an account on Photobucket and upload your own picture in order to get a URL and after 39
you do so you can simply click on the image and right click to copy the image address and paste it into 40
your source between the quotation marks. 41
It will work exactly the same. 42
There we go. 43
Angela is now a box of biscuits. Great. 44
Now when my browser looks through this file to see how it should load it up and display it when it comes 45
across this image tag it has to go and ping the servers of Twitter to try and obtain this image. 46
And if it gets permission to download this image then they will grab that image and display it over 47
here. 48
So currently my image is hosted on Twitter's servers and my browser has to download it from there in 49
order to display it inside my web page. 50
Now what if Twitter goes down, what if they die, what if nobody wants to send tweets anymore. 51
Well then their server is going to be shut down. 52
And my image will no longer be available for download and you will instead end up with something that 53
looks a little bit like this and you might have come across it in the past when you've been loading 54
up Web sites. 55
It means that the image is no longer available or is no longer hosted at the address that’s specified 56
in the source. 57
So in order to remove our reliance on Twitter we can also put an image into our folder 58
HTML - Personal Site and refer to it inside our source. 59
So let's go ahead and do that. 60
Now if I go onto my desktop inside Web Development inside the folder HTML - Personal Site 61
I can drag and drop or paste an image of me into this folder and now my index.html and my picture 62
called angela.png is in the same folder and I can refer to it inside my code. 63
So instead of using a web address as the source of my image I can simply refer to the file name because 64
they are at the same level so index.html and angela.png are at the same hierarchical level. They’re both 65
inside my site. 66
Now if I had an images folder and I put my image into there then I would have to add a path to get there. 67
So it would be something like this. 68
Now both ways work and you can do it either way you like. 69
And now if you hit save and you go to my site you'll notice this image change from square which is what 70
it got from Twitter to circular which is what it got from my local file. 71
Now in my case I cropped my image to a circle using Photoshop. 72
But if you wanted to create your own circular image you can use a tool like crop-circle.imageonline.co 73
crop-circle.imageonline.co 74
And here you'll be able to upload an image and crop the part of the image that you're interested and 75
get it as a circle and be able to download it to use it in your website. 76
And there we go. 77
We've managed to brighten up our homepage by adding an image of ourselves to the top of it using the 78
image tag and we've started to look at these HTML attributes and you can see that every single 79
HTML element in the MDN in reference also has a section on attributes and we're really only touching 80
the surface here because there's other attributes that you can add to the image element or most other 81
elements that you decide to use. 82
And we're gonna be looking at these attributes as we come across them for different HTML elements. 83
Now in the next lesson we're going to be looking at anchor tags and how we can start adding links into 84
our website and how we can create new pages that can be linked to from our homepage. 85
So for all of that and more I'll see you on the next lesson.