WEBVTT FILE





1
00:00:05.810 --> 00:00:12.719
in this video we're going to learn how to create images are using HTML so first

2
00:00:12.719 --> 00:00:19.859
we're gonna create a new file and call it images thoughts HTML and we're gonna

3
00:00:19.859 --> 00:00:29.900
copy the code from the hello world file and change the title to images okay

4
00:00:29.900 --> 00:00:37.260
so first I'm gonna get a picture okay which is we're gonna put inside the HTML

5
00:00:37.260 --> 00:00:43.550
folder first I'm gonna create another folder in there I'm gonna call it images

6
00:00:43.550 --> 00:00:47.930
and I'm gonna place the picture in there okay so now if you go to images inside

7
00:00:51.809 --> 00:01:00.660
the HTML folder you can see the picture in there alright so now we're gonna go

8
00:01:00.660 --> 00:01:08.070
to the body elements and just create a picture or an image so the tag we need

9
00:01:08.070 --> 00:01:18.420
to use for this is image IMG okay and it's say self in closing tag so we just

10
00:01:18.420 --> 00:01:22.939
need to add a few attributes to the tank okay so first we're gonna give it a

11
00:01:27.689 --> 00:01:35.280
source attribute okay so our file is inside the images

12
00:01:35.280 --> 00:01:40.290
folder so I'm just gonna go to the images folder okay and then we're gonna

13
00:01:40.290 --> 00:01:46.860
write a picture dot jpg so the picture at the moment is very big because we

14
00:01:46.860 --> 00:01:53.009
haven't specified any dimensions for the picture in the attributes but to fix

15
00:01:53.009 --> 00:02:02.540
that we're gonna add a width of shauna pixels for example and a height of

16
00:02:02.540 --> 00:02:08.160
hundred fifty pixels okay and also we can add another

17
00:02:08.160 --> 00:02:13.709
attribute is called alts which will just show some texts

18
00:02:13.709 --> 00:02:19.620
okay if the picture doesn't show up so if for any reason the picture doesn't

19
00:02:19.620 --> 00:02:26.760
show up the browser is gonna show this text inset okay so that's how you

20
00:02:26.760 --> 00:02:35.209
creates an image using HTML alright let's add a paragraph after the image

21
00:02:35.209 --> 00:02:45.810
nice picture and now we're going to create another image the difference with

22
00:02:45.810 --> 00:02:50.639
this image is going to be the source of the image at the moments we have used an

23
00:02:50.639 --> 00:02:56.849
image that's inside our project folder okay but now we're going to use another

24
00:02:56.849 --> 00:03:04.560
image which is going to be taken from a server outside ours so again we're gonna

25
00:03:04.560 --> 00:03:16.859
use the image tag okay and the source this time it's gonna be a website so

26
00:03:16.859 --> 00:03:22.560
what we're gonna do we're gonna go to a website we can where we can get some

27
00:03:22.560 --> 00:03:40.560
free pictures I'm gonna go to the free nature stock.com okay and let's get this

28
00:03:40.560 --> 00:03:46.459
first picture from there so we're gonna do just gonna click on the picture and

29
00:03:46.459 --> 00:03:53.060
then click write and then copy image URL [Music]

30
00:04:05.210 --> 00:04:11.190
okay it's been loading it's quite a big picture and now we're gonna add some ice

31
00:04:11.190 --> 00:04:21.030
mutes again so we're gonna set the width to 200 pixels and the height to 120

32
00:04:21.030 --> 00:04:26.310
pixels for example and also we can add an alt attribute

33
00:04:26.310 --> 00:04:29.990
okay let's call it nature