1
00:00:00,000 --> 00:00:02,150
>> DAVID MALAN: How about a
web page with an image?

2
00:00:02,150 --> 00:00:05,560
Let's suppose that in, advance, I've
already downloaded a JPEG of an image

3
00:00:05,560 --> 00:00:07,290
from the internet, say, a cat.

4
00:00:07,290 --> 00:00:08,650
The internet is filled with them.

5
00:00:08,650 --> 00:00:10,710
And I've put that into
my public directory.

6
00:00:10,710 --> 00:00:13,030
In this same public directory,
let's create a page called

7
00:00:13,030 --> 00:00:15,630
image.html as follows.

8
00:00:15,630 --> 00:00:18,390
>> I've already gotten things started here
in gedit with some open tags and

9
00:00:18,390 --> 00:00:19,540
some close tags.

10
00:00:19,540 --> 00:00:23,330
Inside of the body then of this page,
let's do open bracket, image--

11
00:00:23,330 --> 00:00:25,640
just img, though, not the full word--

12
00:00:25,640 --> 00:00:27,940
space alt equals.

13
00:00:27,940 --> 00:00:31,400
alt allows me to provide alternate text
for this image, just in case the

14
00:00:31,400 --> 00:00:34,360
user can't actually see the image
I'm about to provide.

15
00:00:34,360 --> 00:00:38,930
So let's simply describe this
image as a Grumpy Cat.

16
00:00:38,930 --> 00:00:42,490
And now let's specify that the
source of this image, src--

17
00:00:42,490 --> 00:00:46,070
so again, not the full
word, just src--

18
00:00:46,070 --> 00:00:50,800
equals quote, unquote, "cat.jpg",
which again, is the file done in

19
00:00:50,800 --> 00:00:54,220
advance I downloaded into
this public directory.

20
00:00:54,220 --> 00:00:58,860
>> Let's now close the quotes and
close the tag as follows.

21
00:00:58,860 --> 00:01:02,650
Consider that for an image, there's
really no notion of starting an image

22
00:01:02,650 --> 00:01:03,710
and stopping an image.

23
00:01:03,710 --> 00:01:05,560
It's either there, or it's not.

24
00:01:05,560 --> 00:01:09,715
So it would feel a little strange to
actually have an explicit close tag or

25
00:01:09,715 --> 00:01:11,250
end tag for this image tag.

26
00:01:11,250 --> 00:01:15,650
So HTML allows us to open and close
the tag simultaneously, simply by

27
00:01:15,650 --> 00:01:19,870
including that forward slash at the
very end of the start tag, still

28
00:01:19,870 --> 00:01:21,880
inside of the angled brackets.

29
00:01:21,880 --> 00:01:24,790
>> Let's now save this file, change
its permissions, and view

30
00:01:24,790 --> 00:01:28,130
it inside of a browser--

31
00:01:28,130 --> 00:01:32,460
chmod a+r image.html.

32
00:01:32,460 --> 00:01:42,090
Let's now open up Chrome and visit
http://localhost/image.html.

33
00:01:42,090 --> 00:01:43,630
A broken image icon--

34
00:01:43,630 --> 00:01:45,020
now, why might that be?

35
00:01:45,020 --> 00:01:48,330
>> Well, let's take a look at the command
line at whether I did indeed put this

36
00:01:48,330 --> 00:01:50,750
file in the public directory.

37
00:01:50,750 --> 00:01:55,960
Let's go back to gedit, into the
terminal window, and do ls -l.

38
00:01:55,960 --> 00:01:57,110
And there's cat.jpg.

39
00:01:57,110 --> 00:01:58,790
>> But look at the file's permissions.

40
00:01:58,790 --> 00:02:02,410
It seems to be the case that only I,
the owner, can read and write this

41
00:02:02,410 --> 00:02:03,460
JPEG at the moment.

42
00:02:03,460 --> 00:02:05,810
We need to similarly give permissions
to the whole world to

43
00:02:05,810 --> 00:02:07,350
this day JPEG as well.

44
00:02:07,350 --> 00:02:08,259
>> Not a problem--

45
00:02:08,259 --> 00:02:12,460
chmod a+r cat.jpg.

46
00:02:12,460 --> 00:02:15,820
Let's confirm that that's correct
with another ls -l.

47
00:02:15,820 --> 00:02:21,350
And indeed now, both cat.jpg and
image.html have read permissions for

48
00:02:21,350 --> 00:02:22,310
the whole world.

49
00:02:22,310 --> 00:02:24,010
>> Let's now go back to the browser.

50
00:02:24,010 --> 00:02:28,560
Let's click reload or Control-R. And
there is, indeed, a grumpy cat.

51
00:02:28,560 --> 00:02:31,019