WEBVTT

00:00:00.000 --> 00:00:04.049
hi in this video we'll learn about HTML

00:00:04.049 --> 00:00:07.799
images so we've all seen it web pages

00:00:07.799 --> 00:00:10.019
have images they spice up the web page

00:00:10.019 --> 00:00:12.030
give us something to look at it's very

00:00:12.030 --> 00:00:13.679
common for a web page to have an image

00:00:13.679 --> 00:00:15.599
so how can we add images to our web

00:00:15.599 --> 00:00:16.109
pages

00:00:16.109 --> 00:00:21.359
well introducing the image tag IMG so

00:00:21.359 --> 00:00:23.730
the IMG tag allows us to add images to

00:00:23.730 --> 00:00:26.160
our web pages so let's look at an

00:00:26.160 --> 00:00:29.369
example image tag so there's a couple

00:00:29.369 --> 00:00:31.500
important things to note here first is

00:00:31.500 --> 00:00:33.510
that there's no closing tag kind of like

00:00:33.510 --> 00:00:36.450
PR and HR there's no need for a slash

00:00:36.450 --> 00:00:39.270
image tag because really there's no text

00:00:39.270 --> 00:00:41.040
being annotated by the image tag there's

00:00:41.040 --> 00:00:43.050
nothing to put inside an image tag and

00:00:43.050 --> 00:00:44.670
close it because the image tag isn't

00:00:44.670 --> 00:00:46.770
really doing anything to text it's just

00:00:46.770 --> 00:00:48.300
fetching an image and putting it on the

00:00:48.300 --> 00:00:51.300
page so really it's just simply image

00:00:51.300 --> 00:00:53.550
tag and some attributes now the

00:00:53.550 --> 00:00:55.199
attributes are very important so what

00:00:55.199 --> 00:00:58.410
are the attributes of an image tag first

00:00:58.410 --> 00:01:01.079
off we have the SRC attribute or the

00:01:01.079 --> 00:01:04.080
source attribute the source attribute

00:01:04.080 --> 00:01:06.570
specifies where we should get the image

00:01:06.570 --> 00:01:09.960
from and this is the URL for an image so

00:01:09.960 --> 00:01:11.130
this is where the image tag will

00:01:11.130 --> 00:01:13.590
actually look to grab the image and

00:01:13.590 --> 00:01:16.920
insert it onto your web page we also

00:01:16.920 --> 00:01:19.320
have width and height attributes and

00:01:19.320 --> 00:01:21.689
these can be used to specify the size of

00:01:21.689 --> 00:01:23.580
the image and it's specifying the size

00:01:23.580 --> 00:01:26.189
in pixels now we'll be learning a lot

00:01:26.189 --> 00:01:27.810
more about pixels later on in the course

00:01:27.810 --> 00:01:30.240
but for now just know that pixels are

00:01:30.240 --> 00:01:33.270
the tiny tiny little dots of color on

00:01:33.270 --> 00:01:35.070
your computer screen that when put

00:01:35.070 --> 00:01:37.770
together create the entire image so for

00:01:37.770 --> 00:01:39.479
example I can zoom in really really

00:01:39.479 --> 00:01:41.369
close here and you can see that all of

00:01:41.369 --> 00:01:43.079
these shapes on the screen are really

00:01:43.079 --> 00:01:45.210
made of these tiny tiny little squares

00:01:45.210 --> 00:01:46.860
each of which have a color now each of

00:01:46.860 --> 00:01:49.979
those squares are one pixel to give you

00:01:49.979 --> 00:01:53.100
an idea that first line has a thickness

00:01:53.100 --> 00:01:55.079
of about one pixel the second line has a

00:01:55.079 --> 00:01:56.909
thickness of about 12 pixels and that

00:01:56.909 --> 00:01:58.829
last line has a thickness of about 24

00:01:58.829 --> 00:02:01.170
pixels and pixels are the unit of

00:02:01.170 --> 00:02:03.210
measurement we'll be using to size our

00:02:03.210 --> 00:02:06.990
images let's look at an example so here

00:02:06.990 --> 00:02:09.000
we have an image and we have specified

00:02:09.000 --> 00:02:11.700
the source attribute to pull an image

00:02:11.700 --> 00:02:13.350
from that URL

00:02:13.350 --> 00:02:15.740
and the result is the ACOTA chess logo

00:02:15.740 --> 00:02:19.320
now we can add a width attribute of 100

00:02:19.320 --> 00:02:21.390
pixels and that will shrink the image

00:02:21.390 --> 00:02:23.850
you can see that the height shrunk along

00:02:23.850 --> 00:02:24.360
with it

00:02:24.360 --> 00:02:26.150
so if we only specify width or height

00:02:26.150 --> 00:02:29.370
then the other attribute will scale to

00:02:29.370 --> 00:02:32.580
keep the image the same shape if we

00:02:32.580 --> 00:02:34.950
specify both width and height then the

00:02:34.950 --> 00:02:37.200
image will actually get stretched to fit

00:02:37.200 --> 00:02:39.930
into those dimensions so if we have a

00:02:39.930 --> 00:02:42.090
width of 100 and a height of 600 pixels

00:02:42.090 --> 00:02:43.410
then the image will actually be

00:02:43.410 --> 00:02:46.670
stretched to look really tall