Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,619 --> 00:00:02,854
Welcome back.
2
2
00:00:02,854 --> 00:00:04,470
In this video, I'm going to show you
3
3
00:00:04,470 --> 00:00:07,072
how to include images in your webpage
4
4
00:00:07,072 --> 00:00:09,905
and also what HTML attributes are.
5
5
00:00:13,212 --> 00:00:15,101
So back to our webpage,
6
6
00:00:15,101 --> 00:00:17,813
where we want to include some images.
7
7
00:00:17,813 --> 00:00:22,620
But before we can do that, we need some images, right?
8
8
00:00:22,620 --> 00:00:26,141
Okay so I will just head here to Google Chrome
9
9
00:00:26,141 --> 00:00:28,537
and type html5,
10
10
00:00:28,537 --> 00:00:33,414
'cause that's the language we're using.
11
11
00:00:33,414 --> 00:00:35,747
And I like this one,
12
12
00:00:36,614 --> 00:00:39,114
so I will save the image
13
13
00:00:40,033 --> 00:00:43,600
right into our project folder
14
14
00:00:43,600 --> 00:00:45,600
and call it logo.
15
15
00:00:46,604 --> 00:00:48,729
So that's one of the images,
16
16
00:00:48,729 --> 00:00:53,043
and beside that, I also want an image for the author.
17
17
00:00:53,043 --> 00:00:57,298
Now you can, of course, use a photo of yourself,
18
18
00:00:57,298 --> 00:01:01,583
but I will use this very handy website
19
19
00:01:01,583 --> 00:01:04,833
called RandomUser,
20
20
00:01:06,160 --> 00:01:10,451
where you can get random profile pictures.
21
21
00:01:10,451 --> 00:01:12,653
So I will just save this one.
22
22
00:01:12,653 --> 00:01:15,403
I will call it author.
23
23
00:01:18,297 --> 00:01:20,297
Okay.
24
24
00:01:21,763 --> 00:01:24,600
Also, down here,
25
25
00:01:24,600 --> 00:01:28,267
I will just write the name of this gentleman
26
26
00:01:29,346 --> 00:01:31,763
so I don't forget it.
27
27
00:01:33,155 --> 00:01:35,646
Gonzales.
28
28
00:01:35,646 --> 00:01:38,896
Okay so this is the author of our page.
29
29
00:01:40,331 --> 00:01:43,228
Now, to put images on our webpage,
30
30
00:01:43,228 --> 00:01:47,463
we use the img tag, which actually has no closing tag,
31
31
00:01:47,463 --> 00:01:49,809
so it's just img.
32
32
00:01:49,809 --> 00:01:52,416
Yeah, that's right, there are some HTML elements
33
33
00:01:52,416 --> 00:01:56,470
which have only the opening tag and no closing tag,
34
34
00:01:56,470 --> 00:01:59,387
and the img element is one of them.
35
35
00:02:02,742 --> 00:02:05,862
Just going to close this, alright.
36
36
00:02:05,862 --> 00:02:08,362
Now I wanna put the image
37
37
00:02:09,702 --> 00:02:12,740
here between this first paragraph
38
38
00:02:12,740 --> 00:02:15,323
and the secondary header.
39
39
00:02:18,193 --> 00:02:20,360
So <img
40
40
00:02:21,604 --> 00:02:24,509
and then close it.
41
41
00:02:24,509 --> 00:02:26,938
And now we're gonna see element attributes
42
42
00:02:26,938 --> 00:02:29,002
for the first time.
43
43
00:02:29,002 --> 00:02:33,670
Attributes provide additional information about an element.
44
44
00:02:33,670 --> 00:02:37,078
Because now, to indicate which image we want to display,
45
45
00:02:37,078 --> 00:02:40,578
we use the source attribute, which is src.
46
46
00:02:43,155 --> 00:02:45,072
Src.
47
47
00:02:46,955 --> 00:02:49,108
And now, Brackets helps us again
48
48
00:02:49,108 --> 00:02:53,275
and shows all the available files in our project folder.
49
49
00:02:54,145 --> 00:02:58,787
And here, in this place, I want to see the logo image.
50
50
00:02:58,787 --> 00:03:01,931
So I just choose this and hit enter.
51
51
00:03:01,931 --> 00:03:03,598
And, here we go.
52
52
00:03:04,948 --> 00:03:07,867
Now the same thing with the author.
53
53
00:03:07,867 --> 00:03:11,174
Go down here and insert the other image.
54
54
00:03:11,174 --> 00:03:14,887
Okay, <img src
55
55
00:03:14,887 --> 00:03:17,763
and Brackets predicts what we wanna write,
56
56
00:03:17,763 --> 00:03:21,930
so hit return and choose the author.
57
57
00:03:24,296 --> 00:03:27,713
Then close it and now it should be there.
58
58
00:03:29,744 --> 00:03:31,024
Here it is.
59
59
00:03:31,024 --> 00:03:33,057
Now, besides the source attribute,
60
60
00:03:33,057 --> 00:03:37,038
we should also give the img elements an alt attribute,
61
61
00:03:37,038 --> 00:03:39,895
which is an alternative text for the image,
62
62
00:03:39,895 --> 00:03:41,479
if the image cannot be displayed
63
63
00:03:41,479 --> 00:03:44,511
in the browser for some reason.
64
64
00:03:44,511 --> 00:03:48,021
I will just put here some text,
65
65
00:03:48,021 --> 00:03:49,581
and the alt text should be some text
66
66
00:03:49,581 --> 00:03:52,437
which describes the image.
67
67
00:03:52,437 --> 00:03:55,591
In this case, I will type in
68
68
00:03:55,591 --> 00:03:59,508
The HTML5 Logo,
69
69
00:04:01,010 --> 00:04:05,086
and down here, I will say this is the
70
70
00:04:05,086 --> 00:04:06,858
Author photo.
71
71
00:04:06,858 --> 00:04:07,691
Now, as you can see,
72
72
00:04:07,691 --> 00:04:11,154
this text doesn't display on the website.
73
73
00:04:11,154 --> 00:04:13,897
It's really just in case the image
74
74
00:04:13,897 --> 00:04:16,859
cannot be displayed for some reason.
75
75
00:04:16,859 --> 00:04:19,482
So, this was images.
76
76
00:04:19,482 --> 00:04:21,923
I think that now you know
77
77
00:04:21,923 --> 00:04:23,695
how you can display images on your website.
78
78
00:04:23,695 --> 00:04:27,600
It's really easy and straightforward.
79
79
00:04:27,600 --> 00:04:30,527
Next up, we have a lecture about links.
80
80
00:04:30,527 --> 00:04:31,694
See you there!
6304
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.