Voiceover: Welcome back. 2 2
In this video, I'm going to show you 3 3
how to include images in your webpage 4 4
and also what HTML attributes are. 5 5
So back to our webpage, 6 6
where we want to include some images. 7 7
But before we can do that, we need some images, right? 8 8
Okay so I will just head here to Google Chrome 9 9
and type html5, 10 10
'cause that's the language we're using. 11 11
And I like this one, 12 12
so I will save the image 13 13
right into our project folder 14 14
and call it logo. 15 15
So that's one of the images, 16 16
and beside that, I also want an image for the author. 17 17
Now you can, of course, use a photo of yourself, 18 18
but I will use this very handy website 19 19
called RandomUser, 20 20
where you can get random profile pictures. 21 21
So I will just save this one. 22 22
I will call it author. 23 23
Okay. 24 24
Also, down here, 25 25
I will just write the name of this gentleman 26 26
so I don't forget it. 27 27
Gonzales. 28 28
Okay so this is the author of our page. 29 29
Now, to put images on our webpage, 30 30
we use the img tag, which actually has no closing tag, 31 31
so it's just img. 32 32
Yeah, that's right, there are some HTML elements 33 33
which have only the opening tag and no closing tag, 34 34
and the img element is one of them. 35 35
Just going to close this, alright. 36 36
Now I wanna put the image 37 37
here between this first paragraph 38 38
and the secondary header. 39 39
So <img 40 40
and then close it. 41 41
And now we're gonna see element attributes 42 42
for the first time. 43 43
Attributes provide additional information about an element. 44 44
Because now, to indicate which image we want to display, 45 45
we use the source attribute, which is src. 46 46
Src. 47 47
And now, Brackets helps us again 48 48
and shows all the available files in our project folder. 49 49
And here, in this place, I want to see the logo image. 50 50
So I just choose this and hit enter. 51 51
And, here we go. 52 52
Now the same thing with the author. 53 53
Go down here and insert the other image. 54 54
Okay, <img src 55 55
and Brackets predicts what we wanna write, 56 56
so hit return and choose the author. 57 57
Then close it and now it should be there. 58 58
Here it is. 59 59
Now, besides the source attribute, 60 60
we should also give the img elements an alt attribute, 61 61
which is an alternative text for the image, 62 62
if the image cannot be displayed 63 63
in the browser for some reason. 64 64
I will just put here some text, 65 65
and the alt text should be some text 66 66
which describes the image. 67 67
In this case, I will type in 68 68
The HTML5 Logo, 69 69
and down here, I will say this is the 70 70
Author photo. 71 71
Now, as you can see, 72 72
this text doesn't display on the website. 73 73
It's really just in case the image 74 74
cannot be displayed for some reason. 75 75
So, this was images. 76 76
I think that now you know 77 77
how you can display images on your website. 78 78
It's really easy and straightforward. 79 79
Next up, we have a lecture about links. 80 80
See you there!