1
00:00:00,000 --> 00:00:00,140

2
00:00:00,140 --> 00:00:03,700
>> PROFESSOR HARLAN: HTML, or HyperText
Markup Language, is the language in

3
00:00:03,700 --> 00:00:04,870
which web pages are written.

4
00:00:04,870 --> 00:00:08,140
Now, it's not a programming language,
because it doesn't allow us to express

5
00:00:08,140 --> 00:00:11,420
logic, like for loops, and while loops,
and conditions and the like.

6
00:00:11,420 --> 00:00:14,690
Rather, it's indeed a markup language
that allows us to specify what a web

7
00:00:14,690 --> 00:00:17,490
page should look like, structurally
and aesthetically.

8
00:00:17,490 --> 00:00:20,210
And it does so by way of
what are called tags.

9
00:00:20,210 --> 00:00:23,470
Let's dive in and make the simplest of
web page, one that simply says, for

10
00:00:23,470 --> 00:00:25,410
instance, hello world.

11
00:00:25,410 --> 00:00:29,940
>> Notice here, in gedit, that I've already
saved the file as hello.html.

12
00:00:29,940 --> 00:00:32,990
And notice down here, in the terminal
window, that I appear to be inside of

13
00:00:32,990 --> 00:00:36,070
a directory called public, which itself
is inside of a directory called

14
00:00:36,070 --> 00:00:39,770
local host, which itself is inside of
a directory called vhosts, which

15
00:00:39,770 --> 00:00:42,850
itself is inside of John Harvard's
home directory.

16
00:00:42,850 --> 00:00:45,850
Now it turns out, because of the way
we've configured the appliance, which

17
00:00:45,850 --> 00:00:49,670
is in as real world a way as possible,
anything inside of this public

18
00:00:49,670 --> 00:00:53,400
directory should, indeed, be accessible
to the whole public via a

19
00:00:53,400 --> 00:00:56,610
web browser, even though, right now,
I'm the only user who's going to be

20
00:00:56,610 --> 00:00:58,340
accessing this web page.

21
00:00:58,340 --> 00:01:03,120
>> Let's now return to hello.html and start
writing some of that language.

22
00:01:03,120 --> 00:01:07,110
First, atop this file, I'm going to
specify open bracket, exclamation

23
00:01:07,110 --> 00:01:10,400
point, DOCTYPE space html.

24
00:01:10,400 --> 00:01:13,930
This line isn't a tag, per se, even
though it does begin with an open

25
00:01:13,930 --> 00:01:18,020
bracket, but it, instead, is a special
one line fragment that specifies to a

26
00:01:18,020 --> 00:01:22,370
browser, here comes a web
page written in HTML.

27
00:01:22,370 --> 00:01:26,920
>> Let's next, on a line of its own,
specify open bracket html, indicating

28
00:01:26,920 --> 00:01:29,890
to the browser that here,
indeed, is that HTML.

29
00:01:29,890 --> 00:01:34,150
Inside of that, let's indent a bit, and
then do head, specifying to the

30
00:01:34,150 --> 00:01:37,470
browser, here comes the head of the
page, which, for now, assume is

31
00:01:37,470 --> 00:01:40,830
essentially the title bar at the very
top of the browser's window.

32
00:01:40,830 --> 00:01:45,500
Let's next specify, inside of that head
tag, that we'll have a title of

33
00:01:45,500 --> 00:01:47,570
something simple like hello.

34
00:01:47,570 --> 00:01:51,550
But now, let's tell the browser
we're done providing a title.

35
00:01:51,550 --> 00:01:56,080
To do that, just as we opened or started
the tag, title, a moment ago,

36
00:01:56,080 --> 00:02:00,250
let's now close or end that tag by
specifying, in effect, the opposite.

37
00:02:00,250 --> 00:02:05,010
>> To express that, we do open bracket,
forward slash, title.

38
00:02:05,010 --> 00:02:07,830
Similarly, now that we're done defining,
for now, the head of this

39
00:02:07,830 --> 00:02:12,340
page, we'll do open bracket slash head,
telling the browser that we're

40
00:02:12,340 --> 00:02:14,710
now done providing the head.

41
00:02:14,710 --> 00:02:18,080
Only one portion now remains, the
so-called body of the web page, which

42
00:02:18,080 --> 00:02:21,120
really constitutes the essence
of any web page.

43
00:02:21,120 --> 00:02:24,780
>> Let's specify that, here, it's
beginning, with open bracket, body,

44
00:02:24,780 --> 00:02:25,600
close bracket.

45
00:02:25,600 --> 00:02:29,080
And let's now write something
like hello comma world.

46
00:02:29,080 --> 00:02:32,930
Feels like this is a good enough web
page, so let's now move to a new line.

47
00:02:32,930 --> 00:02:37,460
Specify open bracket, forward slash,
body, informing the browser that we're

48
00:02:37,460 --> 00:02:38,650
done providing the body.

49
00:02:38,650 --> 00:02:41,120
And similarly, let's now inform
the browser that I'm done

50
00:02:41,120 --> 00:02:43,230
providing a web page.

51
00:02:43,230 --> 00:02:47,120
On a line of its own, we'll do open
bracket, forward slash, html.

52
00:02:47,120 --> 00:02:49,350
>> Now, notice the aesthetics
of this web page.

53
00:02:49,350 --> 00:02:52,290
Even though, technically, it's not
required to provide as much white

54
00:02:52,290 --> 00:02:55,450
space as I did, it's good style, because
the code is, arguably, much

55
00:02:55,450 --> 00:02:56,490
more readable.

56
00:02:56,490 --> 00:03:00,780
Notice, in particular, that when I open
or start a tag, I then indent in

57
00:03:00,780 --> 00:03:02,040
the lines that follow.

58
00:03:02,040 --> 00:03:05,990
And when I close or and the tag, I
close that tag either on the same

59
00:03:05,990 --> 00:03:09,790
line, if it's a fairly short line, or
on a new line in such a way that the

60
00:03:09,790 --> 00:03:14,540
close tag lines up with the open tag,
much like we did in a language like C

61
00:03:14,540 --> 00:03:17,380
with open and close curly braces.

62
00:03:17,380 --> 00:03:20,350
>> Let's now save this file and try
to open it in a web browser

63
00:03:20,350 --> 00:03:21,600
inside of the appliance.

64
00:03:21,600 --> 00:03:24,180

65
00:03:24,180 --> 00:03:30,310
Let's open up Chrome, and let's now
visit http://localhost, which is a

66
00:03:30,310 --> 00:03:34,930
nickname for the appliance
itself, /hello.html.

67
00:03:34,930 --> 00:03:38,230
And notice that I've not actually typed
public, because it's implied

68
00:03:38,230 --> 00:03:42,430
that if visiting this page via a web
browser, you indeed want to access the

69
00:03:42,430 --> 00:03:44,430
contents of that public directory.

70
00:03:44,430 --> 00:03:47,740
But I do want to access, specifically,
hello.html.

71
00:03:47,740 --> 00:03:50,854
So let's now hit Enter
and see what happens.

72
00:03:50,854 --> 00:03:51,710
>> Hm.

73
00:03:51,710 --> 00:03:56,260
I don't have permission to access
/hello.html on this server.

74
00:03:56,260 --> 00:03:57,570
Now, why might that be?

75
00:03:57,570 --> 00:04:01,040
Well, it turns out it's not sufficient
to simply put this file, hello.html,

76
00:04:01,040 --> 00:04:02,560
in that public directory.

77
00:04:02,560 --> 00:04:06,150
We also need to proactively tell the
appliance that we, indeed, want to

78
00:04:06,150 --> 00:04:09,470
allow the whole world, potentially,
to access this file.

79
00:04:09,470 --> 00:04:12,470
To do so, we need to change its
permissions, so to speak, and we can

80
00:04:12,470 --> 00:04:14,600
do that at a command line.

81
00:04:14,600 --> 00:04:20,079
>> Let's type ls -l to get a long listing
of the files in this directory, Enter.

82
00:04:20,079 --> 00:04:22,480
And we see, indeed, hello.html.

83
00:04:22,480 --> 00:04:25,882
But over here on the left,
notice, is an r and a w.

84
00:04:25,882 --> 00:04:29,050
The r, as you might have guessed, means
read, and the w means write, but

85
00:04:29,050 --> 00:04:32,470
the fact there's only one such r and
one such w, all the way over to the

86
00:04:32,470 --> 00:04:36,710
left of those dashes, means that only
the files owner, myself, can actually

87
00:04:36,710 --> 00:04:38,370
read and write this file.

88
00:04:38,370 --> 00:04:41,610
>> We need to toggle at least one other
r to let the whole world read

89
00:04:41,610 --> 00:04:42,810
this file as well.

90
00:04:42,810 --> 00:04:47,320
And to do this, we can do so with the
command, chmod, or change mode.

91
00:04:47,320 --> 00:04:54,030
chmod a, for all, plus r,
space, hello.html Enter.

92
00:04:54,030 --> 00:04:56,970
Nothing seems to have happened, but
that's generally a good thing.

93
00:04:56,970 --> 00:05:02,490
So ls -l again should, hopefully,
yield some additional r's.

94
00:05:02,490 --> 00:05:04,130
>> And indeed, we do see such.

95
00:05:04,130 --> 00:05:08,350
On the left-hand side here now, notice
that I have read and write privileges.

96
00:05:08,350 --> 00:05:10,320
There's another r, and then another r.

97
00:05:10,320 --> 00:05:13,180
Well, it turns out the r in the middle
means my group, which happens to be

98
00:05:13,180 --> 00:05:15,370
students in the appliance,
can also read this file.

99
00:05:15,370 --> 00:05:18,235
But that's largely irrelevant here,
since we're talking about the web and

100
00:05:18,235 --> 00:05:19,850
not the appliance itself.

101
00:05:19,850 --> 00:05:23,420
But that third r all the way on the
right indicates that the whole world,

102
00:05:23,420 --> 00:05:25,920
or all, can read this file.

103
00:05:25,920 --> 00:05:29,290
>> Let's now go back to my browser, reload
the page, and see if I'm no

104
00:05:29,290 --> 00:05:32,050
longer forbidden.

105
00:05:32,050 --> 00:05:36,800
Let's click Chrome's reload icon up
here, or hit Control-R, and there we

106
00:05:36,800 --> 00:05:38,750
have it, hello world.

107
00:05:38,750 --> 00:05:41,248