1
00:00:00,000 --> 00:00:03,864
[MUSIC PLAYING]

2
00:00:03,864 --> 00:00:09,660


3
00:00:09,660 --> 00:00:12,690
DAVID J. MALAN: So by now, you
probably understand how the internet

4
00:00:12,690 --> 00:00:13,560
itself works.

5
00:00:13,560 --> 00:00:17,220
And recall that we've discussed
how payloads, how packets,

6
00:00:17,220 --> 00:00:19,960
are transmitted from points
A to B across the internet.

7
00:00:19,960 --> 00:00:23,760
But we haven't really dived in deep
into what's inside of those packets

8
00:00:23,760 --> 00:00:24,480
just yet.

9
00:00:24,480 --> 00:00:27,090
We did make mention that
inside of those packets,

10
00:00:27,090 --> 00:00:30,300
if they are being sent by
the protocol called HTTP,

11
00:00:30,300 --> 00:00:32,910
is a language called HTML--

12
00:00:32,910 --> 00:00:35,400
a markup language, not
a programming language--

13
00:00:35,400 --> 00:00:38,340
in which web pages are
marked up-- that is, written.

14
00:00:38,340 --> 00:00:40,420
In other words, when
you make a web page,

15
00:00:40,420 --> 00:00:42,086
you have to write in a certain language.

16
00:00:42,086 --> 00:00:44,757
That language is called HTML,
HyperText Markup Language.

17
00:00:44,757 --> 00:00:46,590
And it's not a programming
language, in that

18
00:00:46,590 --> 00:00:49,810
it doesn't have loops and conditions
and functions and so forth.

19
00:00:49,810 --> 00:00:52,330
It's a markup language,
in that it has tags.

20
00:00:52,330 --> 00:00:56,310
Tags that tell the browser how
to display your information.

21
00:00:56,310 --> 00:00:59,580
Tags that tell your browser
how to format information,

22
00:00:59,580 --> 00:01:02,320
and ultimately, how to
render a whole web page.

23
00:01:02,320 --> 00:01:03,850
In fact, let's go ahead and do this.

24
00:01:03,850 --> 00:01:07,340
Let's start right off by
making our very own web page.

25
00:01:07,340 --> 00:01:10,380
But much like with Scratch, where
we had an environment in which

26
00:01:10,380 --> 00:01:12,602
to begin programming,
so with web pages are

27
00:01:12,602 --> 00:01:14,310
we going to need some
kind of environment

28
00:01:14,310 --> 00:01:16,530
with which to create those web pages.

29
00:01:16,530 --> 00:01:18,750
Now, we could, on a Mac, use TextEdit.

30
00:01:18,750 --> 00:01:21,130
We could, on a PC, use notepad.exe.

31
00:01:21,130 --> 00:01:23,130
You could even use something
like Microsoft Word

32
00:01:23,130 --> 00:01:24,300
if you saved it in the right format.

33
00:01:24,300 --> 00:01:26,820
But that would not be generally
the best thing to use,

34
00:01:26,820 --> 00:01:29,190
as in the case of
programming languages, are

35
00:01:29,190 --> 00:01:32,190
their best tools to use for the trade.

36
00:01:32,190 --> 00:01:34,830
And so we're going to use,
in this case, an environment

37
00:01:34,830 --> 00:01:38,400
called CS50 IDE, which is
based on an open source

38
00:01:38,400 --> 00:01:43,770
platform called Cloud9, which is a
web-based IDE, Integrated Development

39
00:01:43,770 --> 00:01:44,650
Environment.

40
00:01:44,650 --> 00:01:45,940
Now, what does that mean?

41
00:01:45,940 --> 00:01:49,290
That means, much like in the scratch
application, where you had a place

42
00:01:49,290 --> 00:01:52,410
to write code and to see code
and to run code, ultimately,

43
00:01:52,410 --> 00:01:54,960
so in CS50 IDE do we
have that same ability.

44
00:01:54,960 --> 00:01:57,660
But rather than programming
with puzzle pieces,

45
00:01:57,660 --> 00:02:01,770
here, we are going to write web
pages using this language HTML

46
00:02:01,770 --> 00:02:04,000
and using, ultimately, my keyboard.

47
00:02:04,000 --> 00:02:07,650
So here's what CS50 IDE looks like
when you first open it up, perhaps.

48
00:02:07,650 --> 00:02:09,900
You'll see, on the left-hand
side, a folder containing

49
00:02:09,900 --> 00:02:11,340
any files that you might have.

50
00:02:11,340 --> 00:02:13,589
And of course, the first
time you use the environment,

51
00:02:13,589 --> 00:02:15,990
odds are you won't have
any files whatsoever.

52
00:02:15,990 --> 00:02:18,420
In the top here, we're going
to have a big area where

53
00:02:18,420 --> 00:02:23,140
we can open up tabs in which to
edit the files, like our HTML files.

54
00:02:23,140 --> 00:02:25,890
And at the bottom, we're going to
have something called a terminal

55
00:02:25,890 --> 00:02:28,650
window, which we won't
necessarily need all the time,

56
00:02:28,650 --> 00:02:30,720
but it's this terminal
window that provides you

57
00:02:30,720 --> 00:02:34,140
with low-level access,
a command line access,

58
00:02:34,140 --> 00:02:36,740
to the underlying computer,
which, in this case,

59
00:02:36,740 --> 00:02:41,490
is a Linux computer running an operating
system specifically called Ubuntu.

60
00:02:41,490 --> 00:02:46,830
And long story short, what you have
in CS50 IDE is a Cloud-based service.

61
00:02:46,830 --> 00:02:49,380
Someone else out there
happens to be running--

62
00:02:49,380 --> 00:02:51,354
in Amazon's Cloud, for
instance-- is running

63
00:02:51,354 --> 00:02:54,270
a whole bunch of servers on which
you will ultimately have an account.

64
00:02:54,270 --> 00:02:56,610
And within that account can
you write files and then

65
00:02:56,610 --> 00:02:59,530
view them on the worldwide web.

66
00:02:59,530 --> 00:03:02,530
So let's make our very first web page.

67
00:03:02,530 --> 00:03:04,630
I'm going to go ahead
and do the following.

68
00:03:04,630 --> 00:03:07,770
I'm going to go ahead and create
a new file by clicking this plus

69
00:03:07,770 --> 00:03:09,250
and saying new file.

70
00:03:09,250 --> 00:03:13,410
I'm going to go ahead save
it as, say, hello.HTML.

71
00:03:13,410 --> 00:03:18,290
And in this file, I'm going to
go ahead and do the following.

72
00:03:18,290 --> 00:03:22,850
Open bracket, exclamation
point, doc type, HTML.

73
00:03:22,850 --> 00:03:26,600
And then down here, I'm going to do
open bracket, HTML, close bracket.

74
00:03:26,600 --> 00:03:28,670
And you'll notice something
fancy just happened.

75
00:03:28,670 --> 00:03:31,550
Even though I only typed
the first half of that line,

76
00:03:31,550 --> 00:03:33,800
the second half magically appeared.

77
00:03:33,800 --> 00:03:37,650
And that's because CS50 IDE, like a lot
of integrated development environments,

78
00:03:37,650 --> 00:03:40,220
will try to finish your thought for you.

79
00:03:40,220 --> 00:03:42,560
It will infer from context
what you're probably

80
00:03:42,560 --> 00:03:45,350
going to type after whatever
it is you just typed

81
00:03:45,350 --> 00:03:47,630
to try to help you type
fewer keystrokes, ultimately.

82
00:03:47,630 --> 00:03:50,600
And indeed, you'll see soon
that this was exactly what I

83
00:03:50,600 --> 00:03:52,100
was going to type ultimately.

84
00:03:52,100 --> 00:03:54,470
But first, I want to type
a few more things, as well.

85
00:03:54,470 --> 00:03:57,200
Inside of this red
tag, so to speak, HTML,

86
00:03:57,200 --> 00:03:59,750
I'm going to do open bracket,
head, close bracket--

87
00:03:59,750 --> 00:04:02,000
it to finish that thought.

88
00:04:02,000 --> 00:04:05,510
And in here, I'm going to do open
bracket, title, close bracket.

89
00:04:05,510 --> 00:04:08,810
And then a simple title
like "hello" comma "world."

90
00:04:08,810 --> 00:04:12,250
I'm going to go ahead, then,
and below this head tag,

91
00:04:12,250 --> 00:04:15,108
do open bracket, body, close bracket.

92
00:04:15,108 --> 00:04:17,149
Again, my thought is
completed and I'm just going

93
00:04:17,149 --> 00:04:18,950
to write, for now, the same thing--

94
00:04:18,950 --> 00:04:19,910
"hello, world."

95
00:04:19,910 --> 00:04:23,215
Now let's tease apart what,
in fact, is going on here.

96
00:04:23,215 --> 00:04:26,090
Well, the very first line of this
file is the so-called document type

97
00:04:26,090 --> 00:04:26,810
declaration.

98
00:04:26,810 --> 00:04:29,750
This is just a simple line that
you can pretty much copy and paste

99
00:04:29,750 --> 00:04:32,750
that just tells the browser,
ultimately, hey, browser,

100
00:04:32,750 --> 00:04:37,580
here comes a web page written in,
specifically, version 5 of HTML.

101
00:04:37,580 --> 00:04:41,600
HTML has been around for some time
now and humans have constantly been

102
00:04:41,600 --> 00:04:43,430
changing it, have been improving it.

103
00:04:43,430 --> 00:04:45,050
And so we're up to the fifth--

104
00:04:45,050 --> 00:04:47,940
we're up to HTML version 5.

105
00:04:47,940 --> 00:04:51,230
And now here, below
that, are a whole bunch

106
00:04:51,230 --> 00:04:54,650
of seemingly red tags,
as I keep calling them,

107
00:04:54,650 --> 00:04:56,820
that are sort of like
directives to the browser.

108
00:04:56,820 --> 00:05:00,080
Each of these tags tells the
browser, really, to start doing

109
00:05:00,080 --> 00:05:01,790
or to stop doing something.

110
00:05:01,790 --> 00:05:06,200
So here on line three, we see
open bracket, HTML, close bracket.

111
00:05:06,200 --> 00:05:09,650
This is like telling the browser,
hey, browser, here comes that web page

112
00:05:09,650 --> 00:05:10,970
that I promised.

113
00:05:10,970 --> 00:05:13,130
And so accordingly, you
might be able to infer now

114
00:05:13,130 --> 00:05:15,590
that on line four,
insofar as it says head,

115
00:05:15,590 --> 00:05:17,780
this is like the file
telling the browser,

116
00:05:17,780 --> 00:05:20,420
hey, browser, here comes
the head of my web page.

117
00:05:20,420 --> 00:05:22,890
The top of my web page.

118
00:05:22,890 --> 00:05:26,900
And then, after that, comes the
body, so the rest of the web page.

119
00:05:26,900 --> 00:05:30,020
So much like we humans have
heads and bodies, top and bottom,

120
00:05:30,020 --> 00:05:34,820
similarly do web pages have heads, which
are generally encompassing the title

121
00:05:34,820 --> 00:05:38,420
bar or the top-most area of the window,
and then the body, which is really

122
00:05:38,420 --> 00:05:40,490
the essence of the page itself.

123
00:05:40,490 --> 00:05:43,410
But within the head, notice
there's something else.

124
00:05:43,410 --> 00:05:45,920
And in fact, the
indentation here implies--

125
00:05:45,920 --> 00:05:47,600
though it's not strictly required--

126
00:05:47,600 --> 00:05:49,730
implies that there's
some kind of hierarchy.

127
00:05:49,730 --> 00:05:52,730
So much like the head of the
page is inside of the HTML page

128
00:05:52,730 --> 00:05:56,960
itself, so is the title inside
of the head of the page.

129
00:05:56,960 --> 00:05:59,117
Now, what is the title of this page?

130
00:05:59,117 --> 00:06:00,950
Well, even if you've
never seen HTML before,

131
00:06:00,950 --> 00:06:03,830
you can probably infer
that the title of this page

132
00:06:03,830 --> 00:06:08,420
is going to be, literally, "hello,
world," our go-to sentence whenever

133
00:06:08,420 --> 00:06:10,220
we need some initial words.

134
00:06:10,220 --> 00:06:13,640
And as for the body of the page,
very, very little going on here.

135
00:06:13,640 --> 00:06:17,220
But here we have, in the body of
the page, just "hello, world."

136
00:06:17,220 --> 00:06:20,340
So at the end of the day, this is
going to be a really simple web page,

137
00:06:20,340 --> 00:06:22,340
but it's going to ultimately
say "hello, world."

138
00:06:22,340 --> 00:06:25,890
Both in the title across
the title bar, the tab,

139
00:06:25,890 --> 00:06:28,460
as well as in the body
of the page itself.

140
00:06:28,460 --> 00:06:31,820
Now, not all of these
tags are like the others.

141
00:06:31,820 --> 00:06:34,580
Some of them say open bracket,
something, close bracket.

142
00:06:34,580 --> 00:06:39,980
But a few of them have open bracket,
forward slash, then the word, then

143
00:06:39,980 --> 00:06:40,900
the close bracket.

144
00:06:40,900 --> 00:06:44,570
So here's a forward slash, forward
slash, forward slash, forward slash.

145
00:06:44,570 --> 00:06:48,770
And notice, as the hierarchy
suggests, these are symmetric.

146
00:06:48,770 --> 00:06:52,490
If HTML is the first tag
that I opened, notice

147
00:06:52,490 --> 00:06:56,200
how it's the last tag that
I closed, so to speak.

148
00:06:56,200 --> 00:06:58,430
Or you might say start and end here.

149
00:06:58,430 --> 00:07:02,120
And so together, everything
between those HTML tags,

150
00:07:02,120 --> 00:07:06,080
open and close, start and end,
is an element-- an HTML element.

151
00:07:06,080 --> 00:07:10,460
And inside of that, of course, are two
elements, head and body, each of which

152
00:07:10,460 --> 00:07:12,770
is defined by a start
tag and an end tag.

153
00:07:12,770 --> 00:07:18,230
And then the head further has this title
element, with its open and close tag.

154
00:07:18,230 --> 00:07:23,210
So not all HTML tags we'll see are going
to work quite as symmetrically as this.

155
00:07:23,210 --> 00:07:24,924
Some of them don't really need end tags.

156
00:07:24,924 --> 00:07:26,840
And we'll see some of
those exceptions, or you

157
00:07:26,840 --> 00:07:28,460
might encounter some more on your own.

158
00:07:28,460 --> 00:07:32,300
But this general paradigm
is really what defines HTML.

159
00:07:32,300 --> 00:07:36,980
It's just some pretty explicit tags
that you don't have to write in red.

160
00:07:36,980 --> 00:07:40,070
This is just CS50 IDE
highlighting, in red,

161
00:07:40,070 --> 00:07:42,820
those tags so that they
stand out vis-a-vis

162
00:07:42,820 --> 00:07:45,680
the actual content, like
"hello, world" of your web page.

163
00:07:45,680 --> 00:07:48,500
But you're pretty much, when
writing HTML, just telling

164
00:07:48,500 --> 00:07:52,720
the browser what to do and telling
the browser when to stop doing that.

165
00:07:52,720 --> 00:07:54,940
Hey, browser, that's it for my title.

166
00:07:54,940 --> 00:07:56,940
Hey, browser, that's it
for the head of my page.

167
00:07:56,940 --> 00:07:58,481
Hey, browser, that's it for the body.

168
00:07:58,481 --> 00:08:01,700
Hey, browser, that's it
for the web page itself.

169
00:08:01,700 --> 00:08:05,030
Now, what is this thing going
to look like, ultimately?

170
00:08:05,030 --> 00:08:09,000
Well, if I open up this file,
not in CS50 IDE, per se,

171
00:08:09,000 --> 00:08:12,560
but in an actual browser, like
Chrome or Safari or Edge or the like,

172
00:08:12,560 --> 00:08:14,446
I'll actually see the following.

173
00:08:14,446 --> 00:08:16,070
Here, for instance, is a Chrome window.

174
00:08:16,070 --> 00:08:19,410
I've opened up hello.html
in this browser window.

175
00:08:19,410 --> 00:08:23,100
And sure enough, notice at the body
of the page, do I see "hello, world."

176
00:08:23,100 --> 00:08:26,250
And at the top of the page
in the tab is the head,

177
00:08:26,250 --> 00:08:30,610
specifically, the title, which of
course, is "hello, world," as well.

178
00:08:30,610 --> 00:08:32,610
But this, of course, isn't
all that interesting.

179
00:08:32,610 --> 00:08:36,159
There truly isn't all that much
going on in this particular example.

180
00:08:36,159 --> 00:08:38,669
So let's actually begin to use
some of the building blocks

181
00:08:38,669 --> 00:08:42,360
that you yourself have seen in
existing web pages on the web

182
00:08:42,360 --> 00:08:45,780
and see if we can spice
things up just a little bit.

183
00:08:45,780 --> 00:08:48,390
So for instance, the first
thing I can think of doing

184
00:08:48,390 --> 00:08:52,080
is maybe writing a web page
that has an image inside of it.

185
00:08:52,080 --> 00:08:55,540
So first, let me go ahead
and create a new file.

186
00:08:55,540 --> 00:08:58,490
And I'm going to call
this one, say, image.html.

187
00:08:58,490 --> 00:09:02,000


188
00:09:02,000 --> 00:09:04,790
And in advance, I've
also had the wherewithal

189
00:09:04,790 --> 00:09:07,640
here to spend a little bit
of time, as I am want to do,

190
00:09:07,640 --> 00:09:10,720
to download a photograph
of a cat from the internet,

191
00:09:10,720 --> 00:09:12,590
which I've called here cat.jpeg.

192
00:09:12,590 --> 00:09:16,700
And my goal at hand now is to spice
up my first web page into my second

193
00:09:16,700 --> 00:09:20,630
by embedding in it this cat
photo, as you might find elsewhere

194
00:09:20,630 --> 00:09:21,500
on the internet.

195
00:09:21,500 --> 00:09:24,140
Now, to speed things up, I'm
going to go ahead and just paste

196
00:09:24,140 --> 00:09:26,030
the contents of that previous page.

197
00:09:26,030 --> 00:09:28,370
I'm going to re-title
this as just Image.

198
00:09:28,370 --> 00:09:32,060
But now, in the body of the page, I want
to have not text, like "hello, world."

199
00:09:32,060 --> 00:09:35,210
I want to actually have
the image of a cat.

200
00:09:35,210 --> 00:09:39,070
And you might be inclined to just
do something first like cat.jpeg,

201
00:09:39,070 --> 00:09:41,370
but of course, that's not
going to put an image there.

202
00:09:41,370 --> 00:09:45,080
That's literally going to put the
letters C-A-T dot J-P-G there,

203
00:09:45,080 --> 00:09:46,530
so I don't want that.

204
00:09:46,530 --> 00:09:51,200
So I probably need some other tag to
say hey, browser, put an image here.

205
00:09:51,200 --> 00:09:52,680
So how might I do that?

206
00:09:52,680 --> 00:09:56,660
Well, it turns out that much like
there's an HTML tag, a head tag, a body

207
00:09:56,660 --> 00:10:00,710
tag, and more, there is an image
tag, though not quite spelled

208
00:10:00,710 --> 00:10:01,640
as you might expect.

209
00:10:01,640 --> 00:10:04,370
Humans like to be succinct, and
so instead of calling it image,

210
00:10:04,370 --> 00:10:06,170
it's just I-M-G.

211
00:10:06,170 --> 00:10:09,560
But this, too, isn't
obvious yet as to how I

212
00:10:09,560 --> 00:10:11,990
should specify what image to put there.

213
00:10:11,990 --> 00:10:15,080
Well, it turns out that HTML
fundamentally supports not

214
00:10:15,080 --> 00:10:18,950
just these tags or elements,
but also attributes thereof.

215
00:10:18,950 --> 00:10:22,660
In other words, you can influence
the behavior of a specific tag

216
00:10:22,660 --> 00:10:27,830
by passing it, essentially, a key
value pair, formatted as attribute

217
00:10:27,830 --> 00:10:30,740
equals quote, unquote, "some value."

218
00:10:30,740 --> 00:10:33,530
And so in this case, it turns
out-- succinctly, again--

219
00:10:33,530 --> 00:10:37,430
that the source of my image--
not spelled source, but S-R-C--

220
00:10:37,430 --> 00:10:43,100
should equal quote, unquote,
as promised, "C-A-T dot J-P-G."

221
00:10:43,100 --> 00:10:46,940
Now, it doesn't quite make
sense to close this tag

222
00:10:46,940 --> 00:10:49,880
and then put something there and then--

223
00:10:49,880 --> 00:10:52,700
rather, to close this
start tag, put some words,

224
00:10:52,700 --> 00:10:54,112
and then close the tag itself.

225
00:10:54,112 --> 00:10:56,570
Because the image is really
either there or it's not there.

226
00:10:56,570 --> 00:10:59,999
There's really no notion,
conceptually, of starting an image,

227
00:10:59,999 --> 00:11:01,790
doing something, and
then ending the image.

228
00:11:01,790 --> 00:11:04,370
You either start and end
the image all at once,

229
00:11:04,370 --> 00:11:05,940
or you don't put it there at all.

230
00:11:05,940 --> 00:11:08,060
And so I don't want to do this.

231
00:11:08,060 --> 00:11:10,460
I, instead, want to tell
the browser, you know what?

232
00:11:10,460 --> 00:11:12,240
This is an empty element.

233
00:11:12,240 --> 00:11:15,480
It has no content, no
children, nested inside of it.

234
00:11:15,480 --> 00:11:20,030
And so I can actually put that
forward slash inside of the open tag,

235
00:11:20,030 --> 00:11:21,710
but at the very end, just like that.

236
00:11:21,710 --> 00:11:24,793
It's not strictly required, but it
should make more clear the fact that we

237
00:11:24,793 --> 00:11:26,180
do indeed have some balance here.

238
00:11:26,180 --> 00:11:29,420
Everything that is opened
is also eventually closed.

239
00:11:29,420 --> 00:11:34,280
So let me go ahead and save this,
go ahead and open my browser again.

240
00:11:34,280 --> 00:11:41,352
And this time, we see, in
image.html, a very grumpy cat.

241
00:11:41,352 --> 00:11:43,810
Now, there are some minor
aesthetics here you might notice.

242
00:11:43,810 --> 00:11:45,750
There's this big white border around it.

243
00:11:45,750 --> 00:11:49,010
And that's just because the browser's
default is often to put a bit of margin

244
00:11:49,010 --> 00:11:49,510
around it.

245
00:11:49,510 --> 00:11:51,010
We can control that if we want.

246
00:11:51,010 --> 00:11:54,160
But at the end of the day,
all this adorable web page

247
00:11:54,160 --> 00:11:57,340
has is an image embedded inside of it.

248
00:11:57,340 --> 00:12:01,750
So what's really going on here now in
the context of the internet itself?

249
00:12:01,750 --> 00:12:05,050
Well, again, CS50 IDE is
in the cloud, so to speak,

250
00:12:05,050 --> 00:12:06,820
and it is running a web server.

251
00:12:06,820 --> 00:12:12,430
And that web server is what's spitting
out these web pages requested via HTTP.

252
00:12:12,430 --> 00:12:19,630
So when I just visited this
page, something slash image.html,

253
00:12:19,630 --> 00:12:23,500
that's like my laptop having sent
one of those virtual envelopes,

254
00:12:23,500 --> 00:12:27,970
inside of which is a message
like, getme image.html, "get"

255
00:12:27,970 --> 00:12:32,290
being that operative, capitalized
word or verb, from our discussion

256
00:12:32,290 --> 00:12:33,970
of the internet itself.

257
00:12:33,970 --> 00:12:38,770
And the response that's coming back from
the web servers, specifically CS50 IDE,

258
00:12:38,770 --> 00:12:44,830
is apparently an HTML file
called, literally, image.html.

259
00:12:44,830 --> 00:12:47,590
And the browser, upon
receiving that file,

260
00:12:47,590 --> 00:12:51,550
is showing me not the text
inside that file, but rather,

261
00:12:51,550 --> 00:12:55,690
because the browser knows that
anytime a file ends in .html,

262
00:12:55,690 --> 00:12:59,530
it should actually parse the file,
read it, top to bottom, left to right.

263
00:12:59,530 --> 00:13:03,580
And then show me the
rendered version of the page,

264
00:13:03,580 --> 00:13:07,840
the visualization of what that
markup is telling the browser to do.

265
00:13:07,840 --> 00:13:10,690
So as before, when the first example
was just telling the browser,

266
00:13:10,690 --> 00:13:15,340
hey, browser, print out "Hello,
world," now, the web page,

267
00:13:15,340 --> 00:13:19,120
image.html, is saying hey,
browser, put an image here,

268
00:13:19,120 --> 00:13:22,570
the source of which
happens to be cat.jpeg.

269
00:13:22,570 --> 00:13:25,930
And again, I uploaded, in
advance, cat.jpeg to the server.

270
00:13:25,930 --> 00:13:28,169
I could have uploaded
any number of photos.

271
00:13:28,169 --> 00:13:30,460
Maybe ones that I took on a
vacation or maybe something

272
00:13:30,460 --> 00:13:33,100
that I found, with
someone's blessing, online.

273
00:13:33,100 --> 00:13:40,430
But the point is that both the HTML
page and that image live on the server.

274
00:13:40,430 --> 00:13:42,400
And so what is the
browser actually doing?

275
00:13:42,400 --> 00:13:43,730
Well, let's do this.

276
00:13:43,730 --> 00:13:47,290
Let me go ahead and open
up Chrome's Inspector,

277
00:13:47,290 --> 00:13:50,860
as you might have seen before, and
then, specifically, the Network tab.

278
00:13:50,860 --> 00:13:53,690
And let me go ahead,
then, and reload the page.

279
00:13:53,690 --> 00:13:58,810
And what you'll see is that three
HTTP requests just happened.

280
00:13:58,810 --> 00:14:03,770
Specifically, if I zoom in here, the
first HTTP request that my browser sent

281
00:14:03,770 --> 00:14:06,670
was for a file called, as
we expected, image.html.

282
00:14:06,670 --> 00:14:09,670
And luckily enough, all
is well, status 200.

283
00:14:09,670 --> 00:14:12,670
And remember, that is the
opposite, so to speak, of 404.

284
00:14:12,670 --> 00:14:14,890
200 means OK, all is well.

285
00:14:14,890 --> 00:14:15,790
So that's good.

286
00:14:15,790 --> 00:14:19,360
And then notice, the browser,
pretty intelligently,

287
00:14:19,360 --> 00:14:23,020
sent a second HTTP request
to the server saying,

288
00:14:23,020 --> 00:14:26,480
hey, browser, get me cat.jpeg, as well.

289
00:14:26,480 --> 00:14:27,100
Why?

290
00:14:27,100 --> 00:14:29,260
Because the HTML referenced it.

291
00:14:29,260 --> 00:14:32,170
And so this is what's nice
about web pages, in general.

292
00:14:32,170 --> 00:14:34,750
You don't have to put
everything in the file itself.

293
00:14:34,750 --> 00:14:38,650
Rather, you can reference
other files, like cat.jpeg,

294
00:14:38,650 --> 00:14:40,090
and others we'll soon see.

295
00:14:40,090 --> 00:14:43,240
And the browser is smart enough
when it parses that HTML file,

296
00:14:43,240 --> 00:14:45,310
reads it top to bottom, left to right.

297
00:14:45,310 --> 00:14:49,240
If it notices the name of
other files or other URLs,

298
00:14:49,240 --> 00:14:51,970
it will automatically
download those, as well,

299
00:14:51,970 --> 00:14:55,400
so that everything can
be displayed all at once.

300
00:14:55,400 --> 00:14:59,650
Now, I don't like the looks of this
last one, this red one-- favicon.ico.

301
00:14:59,650 --> 00:15:02,290
It turns out that there's a
convention on the web such

302
00:15:02,290 --> 00:15:06,460
that if your server has a
file called favicon.ico,

303
00:15:06,460 --> 00:15:09,370
most browsers will
display it to the user.

304
00:15:09,370 --> 00:15:13,870
Typically, in the tab these days,
so that next to the title of the tab

305
00:15:13,870 --> 00:15:16,179
is also some image that
came from the server.

306
00:15:16,179 --> 00:15:17,470
Now, we've not gotten that far.

307
00:15:17,470 --> 00:15:21,160
We've not created our own
custom icon as Harvard.edu

308
00:15:21,160 --> 00:15:22,930
might have a Harvard crest up top.

309
00:15:22,930 --> 00:15:26,200
We have no such file, and
that's to be expected, then,

310
00:15:26,200 --> 00:15:28,320
that we don't get 200 for that request.

311
00:15:28,320 --> 00:15:30,880
We instead see 403,
which means unauthorized,

312
00:15:30,880 --> 00:15:33,910
which is to say the
browser can't find the file

313
00:15:33,910 --> 00:15:36,670
and it also doesn't seem to be
authorized to even access the file.

314
00:15:36,670 --> 00:15:40,400
Because we haven't even created
it in this case, anyway.

315
00:15:40,400 --> 00:15:43,450
And so the browser is just
presumptuously, and in some sense,

316
00:15:43,450 --> 00:15:45,250
incorrectly requesting this file now.

317
00:15:45,250 --> 00:15:47,680
But again, it's become
convention, if not protocol,

318
00:15:47,680 --> 00:15:50,350
to actually look for this file.

319
00:15:50,350 --> 00:15:54,910
So that, in and of itself, not
worrisome at all right now.

320
00:15:54,910 --> 00:15:57,400
Well, let's go ahead and do
a couple of more examples

321
00:15:57,400 --> 00:16:02,770
to see what more HTML can do, besides
just images of cats on the internet.

322
00:16:02,770 --> 00:16:06,220
Let's go ahead and make an example,
this time, involving a link.

323
00:16:06,220 --> 00:16:07,720
Let me make a new file.

324
00:16:07,720 --> 00:16:10,240
I'll call it link.html.

325
00:16:10,240 --> 00:16:13,040
Let me start with the
content that we have here,

326
00:16:13,040 --> 00:16:15,220
just so that we don't
have to retype it all.

327
00:16:15,220 --> 00:16:17,650
We'll rename, or
re-title this page Link.

328
00:16:17,650 --> 00:16:20,530
And instead of having
an image like this,

329
00:16:20,530 --> 00:16:25,840
let me go ahead and create our
own web page that has a hyperlink,

330
00:16:25,840 --> 00:16:28,680
so to speak, to some other web site.

331
00:16:28,680 --> 00:16:31,990
Specifically, let me
go ahead and do this.

332
00:16:31,990 --> 00:16:36,430
Search for "Ahref," quote, unquote.

333
00:16:36,430 --> 00:16:46,660
And now follow along if you could,
https://www.google.com/search?q=cats,

334
00:16:46,660 --> 00:16:52,120
close quote, close bracket, cats period.

335
00:16:52,120 --> 00:16:53,250
So a bit of a mouthful.

336
00:16:53,250 --> 00:16:56,764
And I did know what I wanted to type
there, so I did it pretty quickly.

337
00:16:56,764 --> 00:16:58,930
But let's see if we can
visually parse this and then

338
00:16:58,930 --> 00:17:00,680
look at the result in a web browser.

339
00:17:00,680 --> 00:17:02,710
So in the body of this
page is apparently

340
00:17:02,710 --> 00:17:05,170
the sentence, search for cats.

341
00:17:05,170 --> 00:17:06,430
But what's going on there?

342
00:17:06,430 --> 00:17:08,703
So I have just some
English here, "search for."

343
00:17:08,703 --> 00:17:10,869
And then notice "cats" is
here, and then the period.

344
00:17:10,869 --> 00:17:14,109
But interspersed in that
sentence is some markup.

345
00:17:14,109 --> 00:17:17,660
And so, indeed, we can have
inline markup, inline HTML,

346
00:17:17,660 --> 00:17:20,319
whereby it's interspersed
with actual content or text

347
00:17:20,319 --> 00:17:22,089
that we want to display on the screen.

348
00:17:22,089 --> 00:17:24,109
This tag here here's a new one.

349
00:17:24,109 --> 00:17:27,974
It's the Anchor tab, also
abbreviated as just A, probably

350
00:17:27,974 --> 00:17:29,140
because it's just so common.

351
00:17:29,140 --> 00:17:32,270
This is how you make an
anchor, or a link, in a page.

352
00:17:32,270 --> 00:17:35,000
Href, a little cryptic, but
it means hyper reference.

353
00:17:35,000 --> 00:17:41,380
So this means, to what file or to what
URL should this link refer or go to?

354
00:17:41,380 --> 00:17:44,440
And then the URL in question,
I kind of made this one up

355
00:17:44,440 --> 00:17:47,680
off the top of my head, though
I've used this certainly before.

356
00:17:47,680 --> 00:17:51,610
It turns out that if you search
for cats on Google, essentially,

357
00:17:51,610 --> 00:17:54,400
this is the URL that Google
ends up bringing you to.

358
00:17:54,400 --> 00:17:57,700
And I've deleted some of the
distractions that might otherwise be

359
00:17:57,700 --> 00:18:00,244
the additional parameters in the URL.

360
00:18:00,244 --> 00:18:02,410
But then after the close
quote is the close bracket.

361
00:18:02,410 --> 00:18:05,230
And then in white here, C-A-T-S.

362
00:18:05,230 --> 00:18:09,230
So it turns out, this is how you
make a hyperlink in a web page.

363
00:18:09,230 --> 00:18:11,150
You have the text of the link here.

364
00:18:11,150 --> 00:18:13,480
Cats is going to be what the human sees.

365
00:18:13,480 --> 00:18:18,560
But in the href attribute do you put
the URL to which you want a link.

366
00:18:18,560 --> 00:18:20,600
So there's this duality here.

367
00:18:20,600 --> 00:18:22,600
And now that I've saved
the file, let me go over

368
00:18:22,600 --> 00:18:30,820
to my browser and visit link.html,
and we'll see a super simple web page.

369
00:18:30,820 --> 00:18:33,880
Indeed, it's super small by
default. Up here, search for cats.

370
00:18:33,880 --> 00:18:36,250
But notice, as is the
case in browsers, they

371
00:18:36,250 --> 00:18:40,330
tend to have a default color scheme
and formatting mechanism for links.

372
00:18:40,330 --> 00:18:44,500
In this case, it's blue and underlined,
and so that's very enticing.

373
00:18:44,500 --> 00:18:48,340
Let me go ahead and move
my mouse over the word cats

374
00:18:48,340 --> 00:18:52,490
and click and hold my breath.

375
00:18:52,490 --> 00:18:56,160
And indeed, we have a whole
bunch of cat search results.

376
00:18:56,160 --> 00:18:58,261
So this really is the
essence of the web,

377
00:18:58,261 --> 00:19:00,260
and really, the overarching
purpose, originally,

378
00:19:00,260 --> 00:19:03,180
of the web to hyperlinked
related resources.

379
00:19:03,180 --> 00:19:08,150
And so I can lead the user from one
place to another place on the internet.

380
00:19:08,150 --> 00:19:11,930
In this case, it just happens
to be a destination of cats.

381
00:19:11,930 --> 00:19:13,160
Now, we can do so much more.

382
00:19:13,160 --> 00:19:14,990
And indeed, what's
exciting about HTML is

383
00:19:14,990 --> 00:19:17,780
that, frankly, at this point
in time, we pretty much

384
00:19:17,780 --> 00:19:20,660
know all of the fundamental structures.

385
00:19:20,660 --> 00:19:23,750
There are so many more tags, or
elements, that we've not yet looked at.

386
00:19:23,750 --> 00:19:27,480
We'll take a look at a few more,
but in general, learning HTML

387
00:19:27,480 --> 00:19:30,189
is much the process of
reading up online, looking

388
00:19:30,189 --> 00:19:33,230
at how other web pages are made, and
generally, keeping up with the times

389
00:19:33,230 --> 00:19:36,560
as new features are added and
new versions of the language

390
00:19:36,560 --> 00:19:37,980
have come out over the years.

391
00:19:37,980 --> 00:19:40,820
But what's important is
this fundamental structure

392
00:19:40,820 --> 00:19:44,150
of web pages having a
head and a body, having

393
00:19:44,150 --> 00:19:47,570
tags, specifically-- some of
which can have attributes--

394
00:19:47,570 --> 00:19:50,870
and closing those tags
as is appropriate.

395
00:19:50,870 --> 00:19:53,730
The rest is just building
up our vocabulary.

396
00:19:53,730 --> 00:19:56,510
So let's go ahead and take a look
at a few pre-fabricated examples

397
00:19:56,510 --> 00:19:59,000
that just hint at the
expressiveness of HTML

398
00:19:59,000 --> 00:20:01,854
and some of its additional features.

399
00:20:01,854 --> 00:20:02,690
Voila.

400
00:20:02,690 --> 00:20:05,380
1, 2, 3, 4, 5, 6.

401
00:20:05,380 --> 00:20:08,959
So for some reason, it gets
super small by the end of it,

402
00:20:08,959 --> 00:20:11,000
but indeed, that's the
purpose of these headings.

403
00:20:11,000 --> 00:20:16,430
So much like a text book tends to have
chapters and sections and subsections

404
00:20:16,430 --> 00:20:21,410
and so forth, often which are
typically formatted in decreasing size

405
00:20:21,410 --> 00:20:26,540
to sort of convey their decreasing
status as a section heading, similarly

406
00:20:26,540 --> 00:20:30,920
is H1 through H6 meant to be used
for exactly that kind of purpose,

407
00:20:30,920 --> 00:20:34,175
where H1 is typically big and
bold, as for the start of a chapter

408
00:20:34,175 --> 00:20:39,530
or the title of some document, whereas
H6 is much smaller, but still boldface,

409
00:20:39,530 --> 00:20:42,470
thereby conveying some
semantic meaning, as well.

410
00:20:42,470 --> 00:20:46,560
So what else can we do
with HTML besides this?

411
00:20:46,560 --> 00:20:50,660
Well, let's go ahead and open
up, say, paragraphs.html,

412
00:20:50,660 --> 00:20:53,960
a web page that follows this
same structure, but now has a bit

413
00:20:53,960 --> 00:20:55,740
more content to it?

414
00:20:55,740 --> 00:20:59,270
Specifically, we have the HTML
tag, as before, and the head tag.

415
00:20:59,270 --> 00:21:01,330
This time, though, I've
been a little proactive.

416
00:21:01,330 --> 00:21:02,510
I've added a metatag.

417
00:21:02,510 --> 00:21:05,551
And there's actually a number of
different use cases for these meta

418
00:21:05,551 --> 00:21:06,050
tags.

419
00:21:06,050 --> 00:21:10,130
In this case, it's essentially
making this web page mobile friendly.

420
00:21:10,130 --> 00:21:12,920
It turns out, when you make a
web page, typically, by default,

421
00:21:12,920 --> 00:21:16,010
if you open it up on an
Android phone or an iPhone,

422
00:21:16,010 --> 00:21:17,842
it actually might seem super small.

423
00:21:17,842 --> 00:21:19,550
And not just because
the device is small,

424
00:21:19,550 --> 00:21:21,560
but because the web
page doesn't necessarily

425
00:21:21,560 --> 00:21:25,280
know that it is being viewed
on such a small device.

426
00:21:25,280 --> 00:21:28,880
So via this line here, this
meta tag whose name is Viewport,

427
00:21:28,880 --> 00:21:31,700
can I actually proactively
tell a browser,

428
00:21:31,700 --> 00:21:35,960
as on an Android phone or an iPhone,
to dynamically resize itself somewhat

429
00:21:35,960 --> 00:21:40,220
to make the text bigger, knowing
that the device screen is smaller

430
00:21:40,220 --> 00:21:41,840
than it might usually be.

431
00:21:41,840 --> 00:21:45,680
Now, in the body of this page is
three new elements, all of which

432
00:21:45,680 --> 00:21:47,690
are the same paragraphs.

433
00:21:47,690 --> 00:21:51,140
And again, abbreviated as P,
not paragraph written out.

434
00:21:51,140 --> 00:21:53,300
But indeed, we have an
open tag and a close tag,

435
00:21:53,300 --> 00:21:56,900
inside of which is just some
placeholder Latin text that

436
00:21:56,900 --> 00:21:58,860
has no semantic meeting here.

437
00:21:58,860 --> 00:22:01,370
But it's just a nice
placeholder to show if you

438
00:22:01,370 --> 00:22:05,360
want to have three separate
paragraphs, you can separate them

439
00:22:05,360 --> 00:22:06,650
with these paragraph tags.

440
00:22:06,650 --> 00:22:07,850
Let's take a look.

441
00:22:07,850 --> 00:22:10,850
Inside of paragraphs.html
is this effect here.

442
00:22:10,850 --> 00:22:14,450
You, indeed, see the line
break, as is apparent here,

443
00:22:14,450 --> 00:22:17,330
and you have three of
these things total.

444
00:22:17,330 --> 00:22:19,910
Now, it's worth noting the following.

445
00:22:19,910 --> 00:22:24,980
HTML and browsers, in turn, will only
do what you literally tell them to do.

446
00:22:24,980 --> 00:22:29,600
So if I do not tell the browser to
make three separate paragraphs, as

447
00:22:29,600 --> 00:22:34,100
with this trio of open and close
tags, and if I remove those tags,

448
00:22:34,100 --> 00:22:38,450
go back to this web page and
reload, notice what happens.

449
00:22:38,450 --> 00:22:44,030
In CS50 IDE, I still had those Latin
paragraphs as distinct paragraphs,

450
00:22:44,030 --> 00:22:47,900
such that I hit Enter a couple of times
to give line breaks in between them.

451
00:22:47,900 --> 00:22:51,500
But HTML, and in turn browsers,
take things very literally.

452
00:22:51,500 --> 00:22:54,290
If you don't tell the
browser, put a line break here

453
00:22:54,290 --> 00:22:57,830
or if you don't tell the browser,
make this a full-fledged paragraph,

454
00:22:57,830 --> 00:22:59,280
it's not going to for you.

455
00:22:59,280 --> 00:23:03,380
In fact, it's going to look at
any white space, so to speak,

456
00:23:03,380 --> 00:23:08,190
any tabs, any carriage returns,
any spaces in your web page.

457
00:23:08,190 --> 00:23:11,150
And if you have multiple
such spaces in a row,

458
00:23:11,150 --> 00:23:15,110
the browser is typically, by default,
going to ignore all of that whitespace

459
00:23:15,110 --> 00:23:17,510
except for just one instance of it.

460
00:23:17,510 --> 00:23:19,070
One space, and not two.

461
00:23:19,070 --> 00:23:22,310
One space instead of multiple new lines.

462
00:23:22,310 --> 00:23:24,890
And so here, everything
seems to be blurring together

463
00:23:24,890 --> 00:23:28,430
incorrectly because I haven't
told the browser, literally,

464
00:23:28,430 --> 00:23:29,690
what I want it to do.

465
00:23:29,690 --> 00:23:34,580
However, if I restore those tags as they
once were, save the file, and reload,

466
00:23:34,580 --> 00:23:38,900
now I have back the three
paragraphs, as was intended.

467
00:23:38,900 --> 00:23:41,000
Well, let's take a look
at a couple more examples.

468
00:23:41,000 --> 00:23:45,200
For instance, this one here enlist.html.

469
00:23:45,200 --> 00:23:46,650
This, too, similar structure.

470
00:23:46,650 --> 00:23:48,650
So notice the pattern
that's starting to emerge.

471
00:23:48,650 --> 00:23:50,570
But this time, in the
body of the page, do

472
00:23:50,570 --> 00:23:54,940
I have UL, which succinctly
stands for unordered list.

473
00:23:54,940 --> 00:23:59,530
And inside of which is a whole bunch
of LI Elements, list item, list item,

474
00:23:59,530 --> 00:24:03,220
list item, inside of which
are three arbitrary words

475
00:24:03,220 --> 00:24:06,250
that computer scientists tend to use
when they have nothing else to say.

476
00:24:06,250 --> 00:24:12,110
Foo, bar, and baz, much like x, y, and
z might be used, by default, in algebra.

477
00:24:12,110 --> 00:24:15,490
And so here, we have in
unordered list of three elements

478
00:24:15,490 --> 00:24:17,440
and it's unordered in
the sense that it's

479
00:24:17,440 --> 00:24:19,930
going to be rendered by
default in a browser,

480
00:24:19,930 --> 00:24:23,710
typically with bullets, one after the
other, as opposed to seeing the number

481
00:24:23,710 --> 00:24:26,170
one, then the number two,
then the number three, which

482
00:24:26,170 --> 00:24:27,680
would be an ordered list.

483
00:24:27,680 --> 00:24:32,560
So for instance, if I go ahead
and open this list.html file,

484
00:24:32,560 --> 00:24:35,170
we should see exactly that--

485
00:24:35,170 --> 00:24:37,510
three bullets, foo, bar, and baz.

486
00:24:37,510 --> 00:24:42,460
However, if I proactively go in here and
change this not to an unordered list,

487
00:24:42,460 --> 00:24:47,120
but an ordered list with OL,
and then reload the page,

488
00:24:47,120 --> 00:24:50,830
notice that the browser automatically
handles the numbering for me.

489
00:24:50,830 --> 00:24:52,390
And this is nice as a feature.

490
00:24:52,390 --> 00:24:54,679
Much like Microsoft Word
and Pages and other editors

491
00:24:54,679 --> 00:24:57,220
can do this, too, when you're
writing an essay or a document,

492
00:24:57,220 --> 00:25:00,460
so can a web browser figure out
for you how much data you have,

493
00:25:00,460 --> 00:25:03,740
and then render or
number it accordingly.

494
00:25:03,740 --> 00:25:08,530
Let's look at a slightly more
involved example for a table.

495
00:25:08,530 --> 00:25:10,824
Now, the example at hand
is kind of arbitrary.

496
00:25:10,824 --> 00:25:13,240
So let's actually look at the
result and then work our way

497
00:25:13,240 --> 00:25:16,930
back as to how we did it in table.html.

498
00:25:16,930 --> 00:25:20,195
You might notice on your phone,
you have a keypad, typically,

499
00:25:20,195 --> 00:25:21,070
that looks like this.

500
00:25:21,070 --> 00:25:25,660
1, 2, 3, 4, 5, 6, 7, 8, 9, and then some
symbols, along with 0 at the bottom.

501
00:25:25,660 --> 00:25:29,170
And this is laid out, it would
seem, in rather tabular form.

502
00:25:29,170 --> 00:25:34,220
But how can I get everything to line up
in these four rows and three columns?

503
00:25:34,220 --> 00:25:36,610
Well, I can do this with HTML.

504
00:25:36,610 --> 00:25:38,920
Let's go ahead into
the file itself and see

505
00:25:38,920 --> 00:25:40,850
if we can't read this top to bottom.

506
00:25:40,850 --> 00:25:43,660
So we have the body of the
web pages, as always, inside

507
00:25:43,660 --> 00:25:45,790
of which, now, is a table tag.

508
00:25:45,790 --> 00:25:47,860
So hey, browser, here comes a table.

509
00:25:47,860 --> 00:25:50,470
And then, a little cryptically,
here's how it's laid out.

510
00:25:50,470 --> 00:25:53,230
TR stands for table, row.

511
00:25:53,230 --> 00:25:56,200
So this is like saying, hey, browser,
here comes the first of my rows.

512
00:25:56,200 --> 00:26:00,370
And then, inside of that is
three TD tags, table data.

513
00:26:00,370 --> 00:26:02,800
And this is pretty much
like saying, hey, browser,

514
00:26:02,800 --> 00:26:06,650
here comes three columns, or
cells, really, within a row.

515
00:26:06,650 --> 00:26:08,900
TD1, TD2, TD3.

516
00:26:08,900 --> 00:26:12,880
We can put it at the top-left,
the top-middle, and the top-right.

517
00:26:12,880 --> 00:26:16,150
And then, hey, browser,
that's it for the first row.

518
00:26:16,150 --> 00:26:19,741
This close TR tag means
that's it for the first row.

519
00:26:19,741 --> 00:26:22,240
And of course, right below that
is another TR tag that says,

520
00:26:22,240 --> 00:26:25,300
hey, browser, here comes
another row, a second row.

521
00:26:25,300 --> 00:26:29,260
And that's how we get the 4, 5,
and 6, the 7, 8, and 9, and then

522
00:26:29,260 --> 00:26:31,960
the star, the 0, and the pound sign.

523
00:26:31,960 --> 00:26:35,560
And so the net effect,
to be clear, is this.

524
00:26:35,560 --> 00:26:40,070
So at some point, the nesting
can become a little involved

525
00:26:40,070 --> 00:26:42,070
and the pages are getting
a little more complex.

526
00:26:42,070 --> 00:26:44,260
But again, if you look at
each piece in isolation

527
00:26:44,260 --> 00:26:47,062
and build up this page via
baby steps, so to speak-- much

528
00:26:47,062 --> 00:26:49,770
like in Scratch, where you wouldn't
want to necessarily implement

529
00:26:49,770 --> 00:26:54,700
a whole program all at once, you want to
implement individual features of a web

530
00:26:54,700 --> 00:26:58,090
page one piece at a time--
can you begin to build

531
00:26:58,090 --> 00:27:01,630
up all the more sophisticated examples.

532
00:27:01,630 --> 00:27:03,670
And indeed, let's go there right now.

533
00:27:03,670 --> 00:27:06,670
Thus far, all of these
examples have been very static.

534
00:27:06,670 --> 00:27:10,060
Even the example involving the
link to some Google search results

535
00:27:10,060 --> 00:27:13,000
was kind of sort of dynamic, but
it was someone else's dynamism.

536
00:27:13,000 --> 00:27:15,280
But we can make our web
page even more interactive

537
00:27:15,280 --> 00:27:17,420
than just a blue underlined link.

538
00:27:17,420 --> 00:27:22,030
In fact, the most common UI, or
user interface, mechanism on the web

539
00:27:22,030 --> 00:27:26,380
is probably an HTML form, something
that has a button you can click

540
00:27:26,380 --> 00:27:30,370
or a dropdown menu can choose from,
or a text box that you can type into.

541
00:27:30,370 --> 00:27:32,470
I mean, odds are, most
every day, you use

542
00:27:32,470 --> 00:27:36,400
some aspect of a form, whether
it's to search, whether it's

543
00:27:36,400 --> 00:27:39,340
to submit some information to a
web site, whether it's to log in

544
00:27:39,340 --> 00:27:41,810
or any number of other use cases.

545
00:27:41,810 --> 00:27:45,990
So how can we now, using our
understanding of HTML fundamentals,

546
00:27:45,990 --> 00:27:53,140
reimplement the super simplest front end
interface to something like Google.com?

547
00:27:53,140 --> 00:27:56,220
Can we build our own Google,
but use Google's database

548
00:27:56,220 --> 00:28:00,290
so we don't have to build the
whole thing ourselves from scratch?

549
00:28:00,290 --> 00:28:01,990
Well, I dare say we can.

550
00:28:01,990 --> 00:28:06,615
I'm going to go ahead and create
a new file called search.html.

551
00:28:06,615 --> 00:28:09,490
Just to get me started, I'm going
to paste my original "hello, world"

552
00:28:09,490 --> 00:28:10,310
example in there.

553
00:28:10,310 --> 00:28:13,750
But I'm going to quickly
start to change it as follows.

554
00:28:13,750 --> 00:28:16,000
Inside of the body of
this page, I'm going

555
00:28:16,000 --> 00:28:19,000
to go ahead and use a new
tag altogether called form.

556
00:28:19,000 --> 00:28:23,230
I'm going to specify that this
form has an attribute of action,

557
00:28:23,230 --> 00:28:27,550
where action is going to be where this
form should submit its information.

558
00:28:27,550 --> 00:28:31,800
I know, just from experience, that I
can send information to, for instance,

559
00:28:31,800 --> 00:28:35,770
www.google.com/search.

560
00:28:35,770 --> 00:28:37,990
And the method I want to use--

561
00:28:37,990 --> 00:28:41,770
if you recall from learning a
little something about HTTP--

562
00:28:41,770 --> 00:28:44,140
is that the method I'm
going to use is gets.

563
00:28:44,140 --> 00:28:47,740
A little confusingly here to be written
in lowercase instead of all caps,

564
00:28:47,740 --> 00:28:49,315
but it's one and the same.

565
00:28:49,315 --> 00:28:52,430
That same verb that we've seen
inside of the virtual envelope

566
00:28:52,430 --> 00:28:54,820
sent from a browser to a server.

567
00:28:54,820 --> 00:28:58,000
Now, inside of this form, I'm
going to have a couple of inputs,

568
00:28:58,000 --> 00:29:01,750
one of which is going to have a
name of q because it turns out--

569
00:29:01,750 --> 00:29:04,300
as you might have glimpsed
from that cat example--

570
00:29:04,300 --> 00:29:10,510
turns out that Google search uses an
HTTP parameter, an input in it's URL.

571
00:29:10,510 --> 00:29:12,790
It's called q for query.

572
00:29:12,790 --> 00:29:16,220
The value of which is whatever
the human has typed in.

573
00:29:16,220 --> 00:29:19,520
So it turns out I can do value--

574
00:29:19,520 --> 00:29:20,020
whoops.

575
00:29:20,020 --> 00:29:25,510


576
00:29:25,510 --> 00:29:29,812
And the type of this input,
we'll see, should be text

577
00:29:29,812 --> 00:29:32,020
because it's something the
human is going to type in.

578
00:29:32,020 --> 00:29:33,900
This, as we'll see, is just
going to be a text box.

579
00:29:33,900 --> 00:29:35,860
It does not need a close
tag, per se, so we'll

580
00:29:35,860 --> 00:29:40,360
keep it an empty element with that
slash inside of the very same start tag.

581
00:29:40,360 --> 00:29:42,670
But I'm going to want one other input.

582
00:29:42,670 --> 00:29:44,890
This one is going to
be a different type.

583
00:29:44,890 --> 00:29:47,080
It's going to be a button
whose purpose in life

584
00:29:47,080 --> 00:29:49,900
is to submit the form
by default to a server.

585
00:29:49,900 --> 00:29:54,790
And the value is just going to be, oh,
something like search, and similarly

586
00:29:54,790 --> 00:29:56,290
will I close that one.

587
00:29:56,290 --> 00:30:02,500
If I now save that and open
my browser to search.html,

588
00:30:02,500 --> 00:30:04,610
you'll see it's a
super simple interface.

589
00:30:04,610 --> 00:30:06,190
It's not nearly as nice as Google.

590
00:30:06,190 --> 00:30:09,250
Though, frankly, Google doesn't
have all that much more than this.

591
00:30:09,250 --> 00:30:11,791
They just have a little bit more
formatting and a little more

592
00:30:11,791 --> 00:30:13,330
color and everything is centered.

593
00:30:13,330 --> 00:30:18,250
But I dare say this is the essence of
Google.com's home page, wherein I can

594
00:30:18,250 --> 00:30:20,570
search for most anything on the web.

595
00:30:20,570 --> 00:30:24,190
This is a text box and so I'm
going to move my cursor over that.

596
00:30:24,190 --> 00:30:26,927
And this time, let's make
a more interesting result

597
00:30:26,927 --> 00:30:28,510
so it doesn't all look pre-fabricated.

598
00:30:28,510 --> 00:30:31,300
Let's go ahead and search
for dogs this time.

599
00:30:31,300 --> 00:30:34,000
So I've typed in this
input to the text box.

600
00:30:34,000 --> 00:30:38,080
I'm now going to click the other input,
which, again, is a Submit button.

601
00:30:38,080 --> 00:30:41,340
Click Search, and voila.

602
00:30:41,340 --> 00:30:46,320
I have made a web page that somehow
submits information that the user has

603
00:30:46,320 --> 00:30:47,770
typed in to another web page.

604
00:30:47,770 --> 00:30:52,020
And if I look at the specific URL that
I'm now at, as by going out of full

605
00:30:52,020 --> 00:30:59,040
screen mode, notice that the URL I'm
at is indeed www.google.com/search?q--

606
00:30:59,040 --> 00:31:01,830
for query-- =dogs.

607
00:31:01,830 --> 00:31:04,110
And so this is what's
powerful about understanding

608
00:31:04,110 --> 00:31:07,800
these fundamentals of
HTTP and, now, HTML.

609
00:31:07,800 --> 00:31:11,190
You can begin to reconstruct so many of
the familiar features that we've seen.

610
00:31:11,190 --> 00:31:13,410
And indeed, though there's
a lot more complexity

611
00:31:13,410 --> 00:31:15,750
visually on a web page
like this, you can

612
00:31:15,750 --> 00:31:19,920
start to imagine, perhaps, how Google is
structuring things underneath the hood,

613
00:31:19,920 --> 00:31:23,520
or how your favorite website
is actually built in HTML.

614
00:31:23,520 --> 00:31:26,830
I mean, maybe this is some kind of
paragraph here and another paragraph

615
00:31:26,830 --> 00:31:27,330
here.

616
00:31:27,330 --> 00:31:30,770
These blue links, they lack underlines,
but maybe they're still hyperlinks.

617
00:31:30,770 --> 00:31:32,520
Because I certainly
know, from experience,

618
00:31:32,520 --> 00:31:35,490
I can click on these search results
and end up at other web pages.

619
00:31:35,490 --> 00:31:40,270
So it would seem that there are ways to
customize the aesthetics of a web page

620
00:31:40,270 --> 00:31:44,430
so it doesn't look quite as boring
as all of my own examples thus far.

621
00:31:44,430 --> 00:31:47,250
And now over here, clearly, there's
a whole bunch of image tags,

622
00:31:47,250 --> 00:31:48,090
it would seem.

623
00:31:48,090 --> 00:31:50,640
So here, too, Google's using
some of these same fundamentals.

624
00:31:50,640 --> 00:31:52,727
But they've got a lot of experience.

625
00:31:52,727 --> 00:31:54,810
They've spent a lot of
time laying everything out.

626
00:31:54,810 --> 00:31:59,340
So there's certainly a more
rich user experience here.

627
00:31:59,340 --> 00:32:01,590
But we can learn even
from their experience.

628
00:32:01,590 --> 00:32:06,750
In fact, as before, and let me go to
Chrome's Inspector by right-clicking

629
00:32:06,750 --> 00:32:11,340
or control-clicking on
the web page itself.

630
00:32:11,340 --> 00:32:13,230
And instead of going
to the Network tab, let

631
00:32:13,230 --> 00:32:16,650
me stay on the Elements tab,
which is typically the default.

632
00:32:16,650 --> 00:32:20,760
Now, there's definitely way more tags
and attributes here than we've seen.

633
00:32:20,760 --> 00:32:23,400
But let me go ahead and
just zoom in on this.

634
00:32:23,400 --> 00:32:26,280
And you'll notice what
Chrome and other browsers

635
00:32:26,280 --> 00:32:28,587
are really good at
doing is parsing HTML,

636
00:32:28,587 --> 00:32:30,420
and not only showing
you the web page, as we

637
00:32:30,420 --> 00:32:32,580
were seeing a moment
ago with all the dogs,

638
00:32:32,580 --> 00:32:35,040
but you can also see what's
going on underneath the hood.

639
00:32:35,040 --> 00:32:38,841
And even if Google's HTML
source code, so to speak,

640
00:32:38,841 --> 00:32:41,340
is really a mess and maybe
there's very little indentation--

641
00:32:41,340 --> 00:32:44,880
very little whitespace, such that it
just looks like a big blob of text--

642
00:32:44,880 --> 00:32:48,570
Chrome and other browsers will pretty
print it for you and even syntax

643
00:32:48,570 --> 00:32:51,360
highlight it, so to speak, using
these disparate colors that

644
00:32:51,360 --> 00:32:52,590
aren't in the file itself.

645
00:32:52,590 --> 00:32:55,500
It's just being displayed as such
so that the tags and the attributes

646
00:32:55,500 --> 00:32:57,840
and the text all jump out separately.

647
00:32:57,840 --> 00:33:02,820
And even though Google is a
pretty well-oiled machine,

648
00:33:02,820 --> 00:33:06,540
notice that they, too, just use the
same fundamentals that you, perhaps,

649
00:33:06,540 --> 00:33:07,920
now understand all the better.

650
00:33:07,920 --> 00:33:10,440
HTML tag, head tag, body tag.

651
00:33:10,440 --> 00:33:12,930
Some tags, for sure,
we haven't seen yet.

652
00:33:12,930 --> 00:33:16,560
Div, which is a generic container,
a rectangular region of the page,

653
00:33:16,560 --> 00:33:20,340
called the division, that you can then
style, as we'll see, as you see fit.

654
00:33:20,340 --> 00:33:21,510
No script and script.

655
00:33:21,510 --> 00:33:23,820
This has to do with
actually adding programming

656
00:33:23,820 --> 00:33:25,470
code in a language called JavaScript.

657
00:33:25,470 --> 00:33:27,040
More on that in just a bit.

658
00:33:27,040 --> 00:33:28,820
And then if we scroll
down further, we'll

659
00:33:28,820 --> 00:33:32,450
see more and more content down here.

660
00:33:32,450 --> 00:33:34,740
A lot of divs in their particular page.

661
00:33:34,740 --> 00:33:37,162
But we can zoom in on
any of these elements

662
00:33:37,162 --> 00:33:39,120
and actually see-- for
instance, let's do this.

663
00:33:39,120 --> 00:33:41,940
This second link here,
"Dogs from Animal Planet."

664
00:33:41,940 --> 00:33:45,600
Let me control-click or
right-click on that, click Inspect.

665
00:33:45,600 --> 00:33:49,470
And what's really cool is
that Chrome and other browsers

666
00:33:49,470 --> 00:33:53,230
will immediately jump to
that element in the page.

667
00:33:53,230 --> 00:33:55,490
And notice, we can infer
how this page is structured.

668
00:33:55,490 --> 00:33:57,720
Besides all these divs,
which are just, again,

669
00:33:57,720 --> 00:34:01,110
creating these rectangular
regions, notice here's an H3.

670
00:34:01,110 --> 00:34:04,500
So that's one of those medium-sized
headings that Google is using.

671
00:34:04,500 --> 00:34:06,480
Inside of here is Ahref.

672
00:34:06,480 --> 00:34:09,580
And now notice, this is
kind of a crazy long URL.

673
00:34:09,580 --> 00:34:12,540
But it turns out, if I click that
URL, it's going to redirect me

674
00:34:12,540 --> 00:34:14,340
to "Dogs on Animal Planet."

675
00:34:14,340 --> 00:34:18,630
It doesn't seem to be AnimalPlanet.com,
though, which is a little suspect.

676
00:34:18,630 --> 00:34:21,570
I do see AnimalPlanet.com
here, but notice,

677
00:34:21,570 --> 00:34:24,270
there's all this craziness up front.

678
00:34:24,270 --> 00:34:27,600
Well, it turns out that often,
though not necessarily always,

679
00:34:27,600 --> 00:34:32,310
companies like Google are actually going
to monitor what links you're clicking.

680
00:34:32,310 --> 00:34:37,440
So in a simple world, this href
would just be AnimalPlanet.com/dogs

681
00:34:37,440 --> 00:34:39,060
or whatever the URL is.

682
00:34:39,060 --> 00:34:45,449
But no, this URL, as implied by
this slash at the very beginning,

683
00:34:45,449 --> 00:34:48,900
is actually referring
to Google's own servers.

684
00:34:48,900 --> 00:34:52,909
So even though you might think, OK,
Google knows what I searched for,

685
00:34:52,909 --> 00:34:56,159
but they don't know what I'm clicking
on because they don't have a partnership

686
00:34:56,159 --> 00:34:57,930
with AnimalPlanet.com, perhaps.

687
00:34:57,930 --> 00:34:59,037
Mm-mm.

688
00:34:59,037 --> 00:35:00,870
Even when you click
these Search results are

689
00:35:00,870 --> 00:35:04,320
you sometimes going to find
yourself going back to Google

690
00:35:04,320 --> 00:35:06,330
and then ending up at AnimalPlanet.com.

691
00:35:06,330 --> 00:35:08,850
It just happens so fast, you
don't realize that Google just

692
00:35:08,850 --> 00:35:11,600
logged what you clicked on.

693
00:35:11,600 --> 00:35:13,380
Now, why would they do that?

694
00:35:13,380 --> 00:35:19,230
Why add this intermediate step between
you and the destination you care about?

695
00:35:19,230 --> 00:35:21,030
Well, one, analytics.

696
00:35:21,030 --> 00:35:23,040
Two, making search results better.

697
00:35:23,040 --> 00:35:25,170
Three, advertisements, potentially.

698
00:35:25,170 --> 00:35:28,470
In any of these cases, Google
is gleaning more information

699
00:35:28,470 --> 00:35:31,440
from your behavior because
now, they know they just

700
00:35:31,440 --> 00:35:33,630
showed you 10 results relating to dogs.

701
00:35:33,630 --> 00:35:37,680
If you clicked on the second result
before you clicked on the first result,

702
00:35:37,680 --> 00:35:39,180
maybe the results weren't that good.

703
00:35:39,180 --> 00:35:43,260
Maybe, for subsequent visitors
who also want to search for dogs,

704
00:35:43,260 --> 00:35:47,580
maybe they should start showing the
Animal Planet link first instead

705
00:35:47,580 --> 00:35:50,230
of the actual first link that you saw.

706
00:35:50,230 --> 00:35:52,390
And so here, there can
be a nice feedback loop.

707
00:35:52,390 --> 00:35:55,410
But again, realize there's
a privacy implication.

708
00:35:55,410 --> 00:35:57,870
But by understanding HTML
works, and by understanding

709
00:35:57,870 --> 00:36:00,690
the simplest of tags
and attributes, can you

710
00:36:00,690 --> 00:36:03,600
deduce for yourself, what
is going on and are you,

711
00:36:03,600 --> 00:36:06,905
indeed, comfortable with such yourself?

712
00:36:06,905 --> 00:36:09,760


713
00:36:09,760 --> 00:36:14,260
Now, Google's web page is, of course,
so much more visually interesting

714
00:36:14,260 --> 00:36:16,300
than any of the things
I've done thus far.

715
00:36:16,300 --> 00:36:18,580
And that's in part because
they're better designers,

716
00:36:18,580 --> 00:36:21,970
but also in part because they're
using a language we, ourselves,

717
00:36:21,970 --> 00:36:23,470
have not looked at yet.

718
00:36:23,470 --> 00:36:27,490
It turns out that intermingled in HTML--

719
00:36:27,490 --> 00:36:30,790
in many, if not most, web pages today--

720
00:36:30,790 --> 00:36:34,900
is another language called
CSS, cascading style sheets.

721
00:36:34,900 --> 00:36:36,320
Now, what does this mean?

722
00:36:36,320 --> 00:36:40,210
Well, it turns out that though we
focus on the canonical web page looking

723
00:36:40,210 --> 00:36:41,980
a little something like this--

724
00:36:41,980 --> 00:36:45,250
with tags and attributes
and actual text,

725
00:36:45,250 --> 00:36:48,940
for instance-- it turns out that there's
some other tags we haven't yet seen,

726
00:36:48,940 --> 00:36:51,040
but that Google and others
are certainly using.

727
00:36:51,040 --> 00:36:55,690
One of which is the style tag, which
can go in the head of the web page,

728
00:36:55,690 --> 00:36:57,050
alongside the title.

729
00:36:57,050 --> 00:36:59,650
And it's with this style
tag that you can actually

730
00:36:59,650 --> 00:37:03,100
implement some fancier aesthetics.

731
00:37:03,100 --> 00:37:06,310
You don't have to just go with
the blue, underlined default links

732
00:37:06,310 --> 00:37:08,020
that a browser typically gives you.

733
00:37:08,020 --> 00:37:11,140
You don't have to just go with
big, bold, black text for H1

734
00:37:11,140 --> 00:37:13,750
and small, bold, black text for H6.

735
00:37:13,750 --> 00:37:16,630
You can override those settings, as
well, just like Google apparently

736
00:37:16,630 --> 00:37:18,820
has with their H3 tag.

737
00:37:18,820 --> 00:37:21,880
It turns out, too, you can
also embed these styles

738
00:37:21,880 --> 00:37:24,130
not in the web page itself,
but in a second file.

739
00:37:24,130 --> 00:37:29,120
But we'll get there in just a
moment by way of these examples.

740
00:37:29,120 --> 00:37:33,490
So let me go into CS50IDE,
and let me go ahead

741
00:37:33,490 --> 00:37:40,330
and open up CSS0.html, CSS, again,
denoting cascading style sheets.

742
00:37:40,330 --> 00:37:42,920
And let's take a look at this example.

743
00:37:42,920 --> 00:37:46,720
It's a pretty simple web page
for a guy named John Harvard, who

744
00:37:46,720 --> 00:37:49,060
has three components to his web page.

745
00:37:49,060 --> 00:37:51,580
And there's many different ways
I could implement this page,

746
00:37:51,580 --> 00:37:54,270
but I've tried to mark
things up, so to speak,

747
00:37:54,270 --> 00:37:57,520
in a semantically-compelling
way, in a self-descriptive way.

748
00:37:57,520 --> 00:38:01,750
So this web page, inside of the
body, has three main sections.

749
00:38:01,750 --> 00:38:04,876
One called Header, one called
Main, one called Footer.

750
00:38:04,876 --> 00:38:06,250
And I didn't make those words up.

751
00:38:06,250 --> 00:38:09,544
It turns out, in HTML5, there
are these and yet other tags

752
00:38:09,544 --> 00:38:11,710
that you can use to structure
your page and actually

753
00:38:11,710 --> 00:38:15,070
provide hints to the browser as to
what is the main part of the page.

754
00:38:15,070 --> 00:38:19,510
What is the header of the page, not to
be confused with the head of the page,

755
00:38:19,510 --> 00:38:21,220
and what's the Footer of the page.

756
00:38:21,220 --> 00:38:23,260
These three things--
header, main, footer--

757
00:38:23,260 --> 00:38:29,140
all belong inside of the body of a web
page, as per the definition of HTML.

758
00:38:29,140 --> 00:38:31,854
But notice what I've done,
and it's not great practice,

759
00:38:31,854 --> 00:38:33,520
so we're going to have to clean this up.

760
00:38:33,520 --> 00:38:35,950
But notice, in the header of
my page, I have John Harvard

761
00:38:35,950 --> 00:38:38,170
as the owner of this home page.

762
00:38:38,170 --> 00:38:41,380
In the main portion of the page,
it says, "Welcome to my Home Page."

763
00:38:41,380 --> 00:38:45,130
And at the footer, it's got his
copyright, John Harvard 1636

764
00:38:45,130 --> 00:38:46,090
or whatnot.

765
00:38:46,090 --> 00:38:50,610
Now, what do you see
that's different here?

766
00:38:50,610 --> 00:38:53,560
Well, odds are, a new attribute
is jumping out at you.

767
00:38:53,560 --> 00:38:54,430
Style.

768
00:38:54,430 --> 00:38:56,620
And notice, this is,
indeed, an attribute.

769
00:38:56,620 --> 00:39:01,617
It's not a tag that we saw a moment
ago, foreshadowed in the CSS example.

770
00:39:01,617 --> 00:39:03,950
So we'll come back to the
distinction there in a moment.

771
00:39:03,950 --> 00:39:07,300
But you can perhaps infer what
this style attribute is doing.

772
00:39:07,300 --> 00:39:10,660
As the name suggests, it's
styling the HTML elements,

773
00:39:10,660 --> 00:39:13,520
so it's changing the aesthetics
of it from the default.

774
00:39:13,520 --> 00:39:16,510
And you can probably infer from
this green or yellowish text

775
00:39:16,510 --> 00:39:20,980
that the first header has a font
size of large, whatever that means,

776
00:39:20,980 --> 00:39:23,917
and the text alignment
should be centered.

777
00:39:23,917 --> 00:39:26,500
Meanwhile, the main part of the
page should have a medium font

778
00:39:26,500 --> 00:39:28,660
size, also centered,
and the footer should

779
00:39:28,660 --> 00:39:31,300
have a small font size, also centered.

780
00:39:31,300 --> 00:39:32,830
So let's look at the spoiler.

781
00:39:32,830 --> 00:39:38,360
What is the net effect of
all of these attributes?

782
00:39:38,360 --> 00:39:41,990
Well, it's to create a web page that's
arguably the nicest of the ones we've

783
00:39:41,990 --> 00:39:42,950
done thus far.

784
00:39:42,950 --> 00:39:44,510
Still pretty simple.

785
00:39:44,510 --> 00:39:46,010
But we have here, John Harvard.

786
00:39:46,010 --> 00:39:47,300
It's pretty big.

787
00:39:47,300 --> 00:39:49,310
Welcome to my home page, kind of medium.

788
00:39:49,310 --> 00:39:51,200
Copyright John Harvard
is a little smaller.

789
00:39:51,200 --> 00:39:54,230
So three relative sizes, but
all of them are centered.

790
00:39:54,230 --> 00:39:57,500
So it turns out, what we
have just done and what

791
00:39:57,500 --> 00:40:01,670
you have just seen is an example
of CSS, cascading style sheets.

792
00:40:01,670 --> 00:40:05,930
Specifically, these are CSS
properties, the format of which

793
00:40:05,930 --> 00:40:10,340
is some property name, literally a
colon, and then the value thereof.

794
00:40:10,340 --> 00:40:13,190
And if you want to have multiple
properties, multiple key value

795
00:40:13,190 --> 00:40:16,037
pairs, so to speak, you just
separate them by semi-colons.

796
00:40:16,037 --> 00:40:17,870
And just for good
measure, and for symmetry,

797
00:40:17,870 --> 00:40:19,270
I kept a semi-colon on the end.

798
00:40:19,270 --> 00:40:22,220
It's not strictly necessary, but
this way, all of my properties

799
00:40:22,220 --> 00:40:27,930
has the same structure in all
six of these distinct locations.

800
00:40:27,930 --> 00:40:30,500
So that's kind of nice that
it follows this pattern,

801
00:40:30,500 --> 00:40:34,700
but it's also a little messy in that,
now, I've got HTML, I've got English,

802
00:40:34,700 --> 00:40:35,870
and I've got CSS.

803
00:40:35,870 --> 00:40:38,990
It's all just kind of getting
very sloppy, I would say.

804
00:40:38,990 --> 00:40:41,870
And there's also some
redundancy here, right?

805
00:40:41,870 --> 00:40:48,130
If you take a look at these three
styles, there's a commonality to them.

806
00:40:48,130 --> 00:40:50,950
Text align center, text align
center, text align center.

807
00:40:50,950 --> 00:40:54,610
Wouldn't it be nice if we could
somehow factor that out and not type it

808
00:40:54,610 --> 00:40:56,800
identically three separate times?

809
00:40:56,800 --> 00:40:57,970
Indeed, there is.

810
00:40:57,970 --> 00:41:01,380
If I open up a slightly
different version here,

811
00:41:01,380 --> 00:41:06,130
CSS1 now, notice the page
is structurally the same,

812
00:41:06,130 --> 00:41:08,530
but I've cleaned it up a little bit.

813
00:41:08,530 --> 00:41:10,450
And how have I done that?

814
00:41:10,450 --> 00:41:14,070
Well notice, I'm leveraging
some inheritance, so to speak,

815
00:41:14,070 --> 00:41:18,640
in so far as the body tag
is a parent, so to speak,

816
00:41:18,640 --> 00:41:20,830
of header, main, and footer.

817
00:41:20,830 --> 00:41:24,610
It's a parent conceptually, in
that header, main, and footer

818
00:41:24,610 --> 00:41:31,300
are all inside of that element before
it's closed later on down here.

819
00:41:31,300 --> 00:41:35,970
But aesthetically, too, it's
imperant as per my indentation,

820
00:41:35,970 --> 00:41:37,450
that it's also a child, too.

821
00:41:37,450 --> 00:41:39,350
It's indented inside of the body tag.

822
00:41:39,350 --> 00:41:41,050
Though, again, the browser
doesn't care about indentation.

823
00:41:41,050 --> 00:41:43,660
All this indentation and nice,
pretty spacing is just for us

824
00:41:43,660 --> 00:41:46,000
humans to better visualize things.

825
00:41:46,000 --> 00:41:50,320
But what's key is that I factored out
this commonality up here to a style

826
00:41:50,320 --> 00:41:52,390
attribute on my body tag.

827
00:41:52,390 --> 00:41:56,970
And in so far as that is the parent of
these three children elements-- header,

828
00:41:56,970 --> 00:41:58,480
main, and footer--

829
00:41:58,480 --> 00:42:02,350
that text align center now
applies, by the definition of CSS,

830
00:42:02,350 --> 00:42:04,250
to all of those children.

831
00:42:04,250 --> 00:42:05,950
So I've cleaned things up a little bit.

832
00:42:05,950 --> 00:42:08,110
Now if I want to left align
or right align my text,

833
00:42:08,110 --> 00:42:10,930
I just change it in one
place and not three places.

834
00:42:10,930 --> 00:42:14,290
And that's representative of the
kind of thought process and design

835
00:42:14,290 --> 00:42:15,550
process that goes on.

836
00:42:15,550 --> 00:42:19,570
Never write something three times, let
alone copy/paste something three times,

837
00:42:19,570 --> 00:42:23,920
if you can design it better and factor
that out and write it, for instance,

838
00:42:23,920 --> 00:42:25,510
in just one place.

839
00:42:25,510 --> 00:42:27,200
But we can do better.

840
00:42:27,200 --> 00:42:33,610
In fact, I am not loving how I am now
co-mingling my data, my text in English

841
00:42:33,610 --> 00:42:41,180
here, with my metadata like main and
footer and header, and the stylisation

842
00:42:41,180 --> 00:42:42,790
thereof.

843
00:42:42,790 --> 00:42:46,450
One, this feels messy that
I'm co-mingling my data

844
00:42:46,450 --> 00:42:48,964
with the presentation
of it, so to speak.

845
00:42:48,964 --> 00:42:51,880
Two, it's going to make it harder
for me to work with a colleague, who

846
00:42:51,880 --> 00:42:53,800
has a much better
sense of design than I,

847
00:42:53,800 --> 00:42:56,590
and it would be really
nice if he or she actually

848
00:42:56,590 --> 00:42:58,930
wrote all of the CSS
properties-- deciding

849
00:42:58,930 --> 00:43:02,200
on the font size and the colors
and the spacing and the alignment--

850
00:43:02,200 --> 00:43:06,670
and just let me assume that they will
take care of that much more beautifully

851
00:43:06,670 --> 00:43:08,160
than I could.

852
00:43:08,160 --> 00:43:11,020
And three, it just makes it
really annoying to maintain.

853
00:43:11,020 --> 00:43:14,190
Because now, if I want to change
the aesthetics of my web page,

854
00:43:14,190 --> 00:43:17,130
I have to go searching through my
file, which, for fancier web pages,

855
00:43:17,130 --> 00:43:20,080
it's going to be much longer
than this relatively short file.

856
00:43:20,080 --> 00:43:24,520
And it just doesn't feel very
maintainable, so to speak.

857
00:43:24,520 --> 00:43:27,370
So let me propose CSS2--

858
00:43:27,370 --> 00:43:30,280
our third version, zero
index, to be clear--

859
00:43:30,280 --> 00:43:33,310
where I've done the
following to the HTML.

860
00:43:33,310 --> 00:43:35,230
I've kind of reworked it.

861
00:43:35,230 --> 00:43:39,190
And you'll see that there's no
mention of CSS, per se, now.

862
00:43:39,190 --> 00:43:44,050
Notice, instead, I've introduced a new
attribute, which also exists in HTML5,

863
00:43:44,050 --> 00:43:45,340
called class.

864
00:43:45,340 --> 00:43:50,080
And class is a way of defining
groups of one or more CSS

865
00:43:50,080 --> 00:43:54,780
properties that can apply to any number
of tags or elements in a web page.

866
00:43:54,780 --> 00:43:57,280
So for instance-- and I could've
named these things anything

867
00:43:57,280 --> 00:43:59,770
I wanted, but I came
up with what I think

868
00:43:59,770 --> 00:44:03,910
are pretty compelling, pretty
semantically appropriate

869
00:44:03,910 --> 00:44:05,410
names for these classes.

870
00:44:05,410 --> 00:44:07,990
Body is going to have
a class of centered.

871
00:44:07,990 --> 00:44:09,760
Header is going to
have a class of large.

872
00:44:09,760 --> 00:44:11,426
Main is going to have a class of medium.

873
00:44:11,426 --> 00:44:13,380
Footer is going to
have a class of small.

874
00:44:13,380 --> 00:44:16,750
Again, could have called that foo, bar,
and baz, x, y, z, but none of those

875
00:44:16,750 --> 00:44:18,520
would really be descriptive.

876
00:44:18,520 --> 00:44:22,960
So I've instead invented classes called
centered, large, medium, and small.

877
00:44:22,960 --> 00:44:25,390
And I deliberately chose
large, medium, and small

878
00:44:25,390 --> 00:44:27,460
to line up with the font sizes.

879
00:44:27,460 --> 00:44:30,460
But also, just conceptually, I want
it large, then medium, then small,

880
00:44:30,460 --> 00:44:33,320
so it flows conceptually, as well.

881
00:44:33,320 --> 00:44:36,470
But what is centered, what is large,
what is medium, what are small?

882
00:44:36,470 --> 00:44:39,820
These are words of my own
creation, technically, here.

883
00:44:39,820 --> 00:44:45,650
I need to scroll up to see what
these classes actually look like.

884
00:44:45,650 --> 00:44:50,260
Notice here, now, is that
style tag, not attribute.

885
00:44:50,260 --> 00:44:53,260
In the head of my web
page is a style tag,

886
00:44:53,260 --> 00:44:57,940
inside of which now are four keywords--

887
00:44:57,940 --> 00:45:05,200
.centered, .large, .medium, and .small.

888
00:45:05,200 --> 00:45:06,550
And the dot is deliberate.

889
00:45:06,550 --> 00:45:09,850
So as odd though it
is, the dot signifies

890
00:45:09,850 --> 00:45:12,430
that this is the name of a class.

891
00:45:12,430 --> 00:45:17,260
So class equals quote, unquote
something corresponds to dot something

892
00:45:17,260 --> 00:45:20,680
when defined up here
inside of the style tag.

893
00:45:20,680 --> 00:45:22,930
Now, you can kind of read
what's going on here.

894
00:45:22,930 --> 00:45:26,210
The only piece of new syntax,
really, is these curly braces,

895
00:45:26,210 --> 00:45:29,230
which we have seen in other
programming languages, perhaps.

896
00:45:29,230 --> 00:45:33,400
So .centered has the
following group of properties.

897
00:45:33,400 --> 00:45:36,760
Text align center,
semi-colon, so just the one.

898
00:45:36,760 --> 00:45:40,450
The large class has
a font size of large.

899
00:45:40,450 --> 00:45:43,260
The medium class has
a font size of medium.

900
00:45:43,260 --> 00:45:46,390
And the small class has
a font size of small.

901
00:45:46,390 --> 00:45:47,290
And that's it.

902
00:45:47,290 --> 00:45:51,760
If I now go into this web page
in a browser and open it up,

903
00:45:51,760 --> 00:45:54,980
aesthetically, it's
still exactly the same,

904
00:45:54,980 --> 00:45:59,320
but now it's better designed, arguably.

905
00:45:59,320 --> 00:46:00,220
But you know what?

906
00:46:00,220 --> 00:46:04,960
This creation of classes doesn't
even feel necessary because, notice,

907
00:46:04,960 --> 00:46:08,774
I already have uniquely
identifying words in my web page.

908
00:46:08,774 --> 00:46:10,940
Again, to be fair, this is
a pretty simple web page,

909
00:46:10,940 --> 00:46:12,760
so I'm kind of getting lucky here.

910
00:46:12,760 --> 00:46:17,740
But notice that if I already have
a tag called header that completely

911
00:46:17,740 --> 00:46:21,910
encapsulates John Harvard, and main
already exists, and footer already

912
00:46:21,910 --> 00:46:24,670
exists, this feels kind
of lame that I also

913
00:46:24,670 --> 00:46:28,790
need to come up with three arbitrary,
but descriptive words like large,

914
00:46:28,790 --> 00:46:36,700
medium, and small just to stylize these
tags which already have unique names.

915
00:46:36,700 --> 00:46:40,000
So it turns out that with
CSS, cascading style sheets,

916
00:46:40,000 --> 00:46:44,810
you don't have to use just style
attributes or a style tag with classes.

917
00:46:44,810 --> 00:46:49,480
You can also select, so to speak--
select being an operative word

918
00:46:49,480 --> 00:46:50,960
in the CSS world--

919
00:46:50,960 --> 00:46:54,980
you can also select elements
by way of their name,

920
00:46:54,980 --> 00:46:56,810
not just some class on them.

921
00:46:56,810 --> 00:47:01,210
So in fact, let me go ahead and
do this in our final example here,

922
00:47:01,210 --> 00:47:05,670
or our fourth example here of CSS3.

923
00:47:05,670 --> 00:47:12,030
And you'll see, in this file, that
I've now removed the class altogether.

924
00:47:12,030 --> 00:47:14,720
Now this web page is getting
really, really tight.

925
00:47:14,720 --> 00:47:17,580
I am only using as many
characters or words

926
00:47:17,580 --> 00:47:20,290
as I strictly need to
make this web page happen.

927
00:47:20,290 --> 00:47:23,160
And honestly, just at first
glance, look how much more readable

928
00:47:23,160 --> 00:47:26,940
the page is without these longer lines,
without all the style attributes.

929
00:47:26,940 --> 00:47:29,340
Now the data in the page, the content--

930
00:47:29,340 --> 00:47:32,250
John Harvard, welcome to my web
page, copyright John Harvard--

931
00:47:32,250 --> 00:47:34,260
is really jumping out at you.

932
00:47:34,260 --> 00:47:37,320
And yet, we're still styling it
in fundamentally the same way,

933
00:47:37,320 --> 00:47:39,900
but this time, using
a different selector.

934
00:47:39,900 --> 00:47:42,180
If I scroll up to the
top here, notice now,

935
00:47:42,180 --> 00:47:44,190
I don't have any mention
of the dot, I just

936
00:47:44,190 --> 00:47:48,990
have the word "body," which corresponds
to the HTML tag called Body.

937
00:47:48,990 --> 00:47:51,810
I have the word "header,"
corresponds to the HTML tag header.

938
00:47:51,810 --> 00:47:55,980
And main and footer, the properties
inside of which are exactly the same.

939
00:47:55,980 --> 00:47:59,880
But I haven't introduced
unnecessary overhead of classes.

940
00:47:59,880 --> 00:48:01,470
Classes have value.

941
00:48:01,470 --> 00:48:04,800
They do have value, especially if
you want to reuse them elsewhere

942
00:48:04,800 --> 00:48:06,960
and your web page is more
complicated than mine.

943
00:48:06,960 --> 00:48:10,320
But the key here is that even though
we have all of these building blocks,

944
00:48:10,320 --> 00:48:13,440
we don't want to necessarily
build the biggest web page we can.

945
00:48:13,440 --> 00:48:17,610
It's often compelling to build at
least close to the smallest web page

946
00:48:17,610 --> 00:48:21,060
if that lends itself to better
readability-- just easier for me

947
00:48:21,060 --> 00:48:22,740
to read it and understand it.

948
00:48:22,740 --> 00:48:25,802
If that lends itself to
better maintainability--

949
00:48:25,802 --> 00:48:29,010
if I and a colleague can now collaborate
on this because there are just fewer

950
00:48:29,010 --> 00:48:32,880
distractions, and there's fewer lines
of code to maintain and fewer lines

951
00:48:32,880 --> 00:48:34,920
of code to potentially
make mistakes in--

952
00:48:34,920 --> 00:48:38,100
all of this is pretty compelling.

953
00:48:38,100 --> 00:48:42,090
But what isn't really
compelling is how I'm still

954
00:48:42,090 --> 00:48:48,060
kind of co-mingling my CSS
properties with my HTML.

955
00:48:48,060 --> 00:48:52,890
Indeed, in this and many contexts in the
world of technology, computer science,

956
00:48:52,890 --> 00:48:56,430
and programming, there is this
generally accepted practice

957
00:48:56,430 --> 00:49:00,030
that you want to separate your
data from your presentation.

958
00:49:00,030 --> 00:49:02,280
The contents of this
web page have nothing

959
00:49:02,280 --> 00:49:05,670
to do, fundamentally, with the
bold facing, the font sizing,

960
00:49:05,670 --> 00:49:08,190
the coloring of that actual content.

961
00:49:08,190 --> 00:49:12,200
That should all be kept separate for
any number of reasons, one of which

962
00:49:12,200 --> 00:49:13,950
is just, again, the
maintainability of it,

963
00:49:13,950 --> 00:49:16,540
long-term, and the
cleanliness of the files.

964
00:49:16,540 --> 00:49:20,340
So as per our canonical
example a bit ago,

965
00:49:20,340 --> 00:49:24,330
in CSS4 do we introduce this other
tag that you might have just glimpsed

966
00:49:24,330 --> 00:49:28,380
called Link, which remarkably
confusingly, is not a hyperlink.

967
00:49:28,380 --> 00:49:34,280
It is the way in which you tell
a browser to load another file--

968
00:49:34,280 --> 00:49:39,270
a .css file, typically-- that contains
your CSS properties to be applied

969
00:49:39,270 --> 00:49:40,101
to this file.

970
00:49:40,101 --> 00:49:41,100
So it's not a hyperlink.

971
00:49:41,100 --> 00:49:44,220
That's the Anchor tag,
the A tag, as before.

972
00:49:44,220 --> 00:49:48,510
But the link tag in the head of a
web page allows you to specify this.

973
00:49:48,510 --> 00:49:51,750
An href, which references
the file you want to include.

974
00:49:51,750 --> 00:49:53,910
Again, not link to, but pull in.

975
00:49:53,910 --> 00:49:57,150
And then the relationship,
which is stylesheet.

976
00:49:57,150 --> 00:50:00,700
So theoretically, this link tag could
be used for any number of things,

977
00:50:00,700 --> 00:50:03,262
but we most commonly see
it used for style sheets.

978
00:50:03,262 --> 00:50:05,220
So I've pretty much just
written this verbatim,

979
00:50:05,220 --> 00:50:07,560
and then changed the name of
the file that I've created.

980
00:50:07,560 --> 00:50:11,820
And the file I created in advance,
just to keep things named similarly,

981
00:50:11,820 --> 00:50:13,620
is css4.css.

982
00:50:13,620 --> 00:50:15,900
Let's open that file, css4.css.

983
00:50:15,900 --> 00:50:19,800


984
00:50:19,800 --> 00:50:24,190
And in this file, do you see,
pretty much, the exact same contents

985
00:50:24,190 --> 00:50:27,520
of our previous example,
but no style tag, just

986
00:50:27,520 --> 00:50:33,650
the text of that CSS selector, body,
and its property with the curly braces.

987
00:50:33,650 --> 00:50:36,400
And then the same for
header, main, and footer.

988
00:50:36,400 --> 00:50:40,900
So the end result is,
if I open up css5.html,

989
00:50:40,900 --> 00:50:45,610
just like 0 and 1 and 2 and 3 do
we see exactly the same thing.

990
00:50:45,610 --> 00:50:49,480
But again, the progression here has been
toward better and better, or cleaner

991
00:50:49,480 --> 00:50:54,520
and cleaner, design of the
otherwise correct content.

992
00:50:54,520 --> 00:50:55,180
All right.

993
00:50:55,180 --> 00:50:59,520
So we've only scratched the surface
of the actual tags that exist in HTML,

994
00:50:59,520 --> 00:51:02,410
and the actual properties
that exist in CSS.

995
00:51:02,410 --> 00:51:04,280
But again, we've covered
the fundamentals.

996
00:51:04,280 --> 00:51:06,010
What the structure of
a web page is, what

997
00:51:06,010 --> 00:51:07,910
the structure of a CSS property is.

998
00:51:07,910 --> 00:51:09,880
And so, from here on out,
filling in the blanks

999
00:51:09,880 --> 00:51:13,780
really amounts to looking at an
online reference, a printed book,

1000
00:51:13,780 --> 00:51:17,860
looking at existing web sites, googling
as needed for answers to questions.

1001
00:51:17,860 --> 00:51:20,470
Because what you now
hopefully have in your toolkit

1002
00:51:20,470 --> 00:51:25,600
is a fundamental understanding of what
a web page is, how you can structure it,

1003
00:51:25,600 --> 00:51:29,960
and how you can go off and
continue to add features.

1004
00:51:29,960 --> 00:51:35,350
But at the end of the day, these
pages still, with this tool kit,

1005
00:51:35,350 --> 00:51:37,060
remain pretty static.

1006
00:51:37,060 --> 00:51:39,670
You know, we have kind
of some dynamism, in

1007
00:51:39,670 --> 00:51:42,460
so far as we can send users
to other websites that

1008
00:51:42,460 --> 00:51:46,360
might look much better than mine,
and we can send users input,

1009
00:51:46,360 --> 00:51:49,690
even if something like Google
and like Google's database

1010
00:51:49,690 --> 00:51:54,597
provide more information for the
user from its own search engine.

1011
00:51:54,597 --> 00:51:57,430
But wouldn't it be nice if we could
have a little more interactivity

1012
00:51:57,430 --> 00:51:58,870
on our own website?

1013
00:51:58,870 --> 00:52:01,420
And wouldn't it be nice
if we could make sure

1014
00:52:01,420 --> 00:52:05,650
that the user has typed something
incorrectly before we just blindly send

1015
00:52:05,650 --> 00:52:07,660
it over to some server?

1016
00:52:07,660 --> 00:52:11,980
And it turns out that even though HTML
is not a programming language-- again,

1017
00:52:11,980 --> 00:52:16,090
it's just a markup language that tells
a browser how to render information.

1018
00:52:16,090 --> 00:52:18,700
It doesn't have logical constructs
like loops and conditions

1019
00:52:18,700 --> 00:52:20,110
and variables and more.

1020
00:52:20,110 --> 00:52:23,860
And just as CSS, too, is
not a programming language

1021
00:52:23,860 --> 00:52:28,800
because it, too, lacks those
capabilities, for the most part,

1022
00:52:28,800 --> 00:52:31,350
there's another language
that we can introduce here.

1023
00:52:31,350 --> 00:52:35,880
And indeed, the front end of
the world wide web, so to speak,

1024
00:52:35,880 --> 00:52:38,550
what you and I as
humans see, is typically

1025
00:52:38,550 --> 00:52:41,070
composed these days of
a trio of languages.

1026
00:52:41,070 --> 00:52:45,480
HTML and CSS, and the
third is JavaScript.

1027
00:52:45,480 --> 00:52:49,220
If you've heard of the language
Java, no actual relationship,

1028
00:52:49,220 --> 00:52:51,180
it's simply similarly named.

1029
00:52:51,180 --> 00:52:55,860
But JavaScript is the de facto
standard for web browsers

1030
00:52:55,860 --> 00:52:59,500
when it comes to writing programs
that run not on the server,

1031
00:52:59,500 --> 00:53:04,140
but in the client's computer, so
inside his or her own browser.

1032
00:53:04,140 --> 00:53:08,970
And this is what makes it a little
different from languages like C and C++

1033
00:53:08,970 --> 00:53:12,540
and Java, pretty much, and other
languages, still, like Python and Ruby,

1034
00:53:12,540 --> 00:53:17,790
which are typically-- though not
necessarily-- executed server-side.

1035
00:53:17,790 --> 00:53:22,080
In a browser, JavaScript is the
language to which you have access.

1036
00:53:22,080 --> 00:53:26,820
And so how do we go about writing
programming code in a web page?

1037
00:53:26,820 --> 00:53:30,610
And frankly, why would
we want to do that?

1038
00:53:30,610 --> 00:53:35,920
Well, let me go ahead and
open up this example here.

1039
00:53:35,920 --> 00:53:37,750
Dom0.

1040
00:53:37,750 --> 00:53:40,510
DOM stands for Document Object Model.

1041
00:53:40,510 --> 00:53:43,330
And before we actually get
into how this code works,

1042
00:53:43,330 --> 00:53:45,610
let's look at what this code does.

1043
00:53:45,610 --> 00:53:49,450
In dom0.html is, quite
simply, this form.

1044
00:53:49,450 --> 00:53:52,961
I'm going to go ahead and click Submit.

1045
00:53:52,961 --> 00:53:54,340
Oops, nope.

1046
00:53:54,340 --> 00:53:59,070
I'm going to go ahead and type
in, say, my name and click Submit.

1047
00:53:59,070 --> 00:54:01,850
And oh, my god, it says hello, David.

1048
00:54:01,850 --> 00:54:02,680
That's amazing.

1049
00:54:02,680 --> 00:54:03,560
It's dynamic.

1050
00:54:03,560 --> 00:54:06,210
It literally said what I typed in.

1051
00:54:06,210 --> 00:54:09,580
Well, OK, David wrote the page, so
maybe this isn't all that compelling.

1052
00:54:09,580 --> 00:54:11,620
So let's try another.

1053
00:54:11,620 --> 00:54:16,750
Let me go ahead here and type in,
say, a colleague like Zamyla's name.

1054
00:54:16,750 --> 00:54:17,740
Submit.

1055
00:54:17,740 --> 00:54:18,460
Oh, my god.

1056
00:54:18,460 --> 00:54:21,080
It supports Zamyla, as well.

1057
00:54:21,080 --> 00:54:24,520
Now, maybe I wrote the web page and just
I added support for David and Zamyla.

1058
00:54:24,520 --> 00:54:26,560
But no, this is actually
a generalized solution

1059
00:54:26,560 --> 00:54:31,270
to the problem whereby, much
like I could do in Scratch or C

1060
00:54:31,270 --> 00:54:36,400
or Python or other languages, this
web page is getting user input

1061
00:54:36,400 --> 00:54:40,720
and then producing output
on the screen dynamically.

1062
00:54:40,720 --> 00:54:43,210
It's a little cryptic,
in so far as it displays

1063
00:54:43,210 --> 00:54:45,010
in this ugly pop up on the screen.

1064
00:54:45,010 --> 00:54:47,200
And frankly, the browser
is asking me if it

1065
00:54:47,200 --> 00:54:49,840
wants me to prevent this page
from creating additional dialogs.

1066
00:54:49,840 --> 00:54:54,010
Because you might remember the
yesteryear where the pop-up windows

1067
00:54:54,010 --> 00:54:55,780
were all the rage on the internet.

1068
00:54:55,780 --> 00:54:59,050
And indeed, browsers have gotten smarter
about blocking those and actually

1069
00:54:59,050 --> 00:55:02,680
asking you, hey, wait a minute,
this page is putting up a number

1070
00:55:02,680 --> 00:55:04,140
of prompts-- two, in this case--

1071
00:55:04,140 --> 00:55:06,140
are you sure you want to
let it keep doing this?

1072
00:55:06,140 --> 00:55:07,930
But that's just a
feature of the browser.

1073
00:55:07,930 --> 00:55:10,510
And that window will look
different in Firefox and Chrome

1074
00:55:10,510 --> 00:55:14,110
and Edge and Safari and
other browsers still.

1075
00:55:14,110 --> 00:55:15,830
But how does this work?

1076
00:55:15,830 --> 00:55:19,400
This is just an input and
this is just an input.

1077
00:55:19,400 --> 00:55:23,125
And previously, these inputs
whisked me away to Google.com,

1078
00:55:23,125 --> 00:55:26,680
where I saw a whole bunch
of dogs as search results.

1079
00:55:26,680 --> 00:55:28,630
But now, I'm not going to Google.

1080
00:55:28,630 --> 00:55:30,520
I'm certainly not
seeing any cats or dogs.

1081
00:55:30,520 --> 00:55:33,070
I'm instead seeing David's
name and Zamyla's name

1082
00:55:33,070 --> 00:55:35,480
and anyone else's name that I type in.

1083
00:55:35,480 --> 00:55:37,300
So how is that working?

1084
00:55:37,300 --> 00:55:41,080
How is, somehow, the web page
grabbing the data that I've typed in

1085
00:55:41,080 --> 00:55:42,250
and doing something with it?

1086
00:55:42,250 --> 00:55:47,350
Well, it's doing this by way
of, yes, some HTML in the page,

1087
00:55:47,350 --> 00:55:50,940
but also, now, some JavaScript.

1088
00:55:50,940 --> 00:55:53,950
And to get to this point,
let's introduce the following.

1089
00:55:53,950 --> 00:55:57,490
This is the Document
Object Model, or DOM.

1090
00:55:57,490 --> 00:56:01,780
Which is just a fancy way of saying
this is the family tree like structure

1091
00:56:01,780 --> 00:56:05,860
that you can think of as being
underneath the hood of any web page.

1092
00:56:05,860 --> 00:56:08,770
There has been, since the
start of our examples,

1093
00:56:08,770 --> 00:56:11,080
an implied hierarchy to
all of our web pages.

1094
00:56:11,080 --> 00:56:13,440
Besides the doc type
declaration up top, there

1095
00:56:13,440 --> 00:56:16,060
has been this so-called
root element, HTML,

1096
00:56:16,060 --> 00:56:19,090
inside of which there's always been
two children, head and body, inside

1097
00:56:19,090 --> 00:56:23,070
of which there were zero or
more other children, like title.

1098
00:56:23,070 --> 00:56:25,964
And the indentation
and the nesting implies

1099
00:56:25,964 --> 00:56:27,505
that there is some kind of hierarchy.

1100
00:56:27,505 --> 00:56:33,290
It reads from left to right, but really,
if you flip that around 90 degrees,

1101
00:56:33,290 --> 00:56:36,490
and again, think of HTML as the
head, all of these other tags

1102
00:56:36,490 --> 00:56:39,700
are kind of conceptually
below it, a la a family tree.

1103
00:56:39,700 --> 00:56:42,220
And indeed, if you think of
this being the document itself,

1104
00:56:42,220 --> 00:56:49,300
like the file, the root element of which
is HTML, this thing here, HTML, again,

1105
00:56:49,300 --> 00:56:52,840
has two children, so we can kind
of dangle those off like you would

1106
00:56:52,840 --> 00:56:55,930
a family tree, two
descendants, head and body.

1107
00:56:55,930 --> 00:56:58,930
Body, meanwhile, just as some text--
"hello, world"-- and I've drawn it,

1108
00:56:58,930 --> 00:57:03,970
or circled it with an ellipse here, just
to kind of convey that this content is

1109
00:57:03,970 --> 00:57:04,690
not like this.

1110
00:57:04,690 --> 00:57:08,680
These rectangles are
elements, open and close tags.

1111
00:57:08,680 --> 00:57:13,630
This is just text at the
very leaves of this tree.

1112
00:57:13,630 --> 00:57:16,300
Meanwhile, head does have
another child, title,

1113
00:57:16,300 --> 00:57:19,510
as per the rectangle, in then
it, too, just has some raw text,

1114
00:57:19,510 --> 00:57:21,310
like "hello, world."

1115
00:57:21,310 --> 00:57:26,210
So you can think of, that is to say,
a web page as yes, being hierarchical,

1116
00:57:26,210 --> 00:57:28,120
but also as being a tree.

1117
00:57:28,120 --> 00:57:30,340
And if you recall, among
the data structures

1118
00:57:30,340 --> 00:57:33,820
in a computer scientist's
toolkit, is this thing called

1119
00:57:33,820 --> 00:57:36,531
a tree that can look quite like this.

1120
00:57:36,531 --> 00:57:38,530
And there might be more
than this many children.

1121
00:57:38,530 --> 00:57:40,870
It might have more than
two children still.

1122
00:57:40,870 --> 00:57:44,290
But there's this way of
representing in a computer's memory,

1123
00:57:44,290 --> 00:57:50,570
or ram, exactly what's being sent to the
browser over the internet as just text.

1124
00:57:50,570 --> 00:57:53,560
So upon receiving an
HTML file, when I say

1125
00:57:53,560 --> 00:57:56,400
a browser is reading it top to
bottom, left to right, that is true,

1126
00:57:56,400 --> 00:58:00,640
but it is also building up, in its
own memory, a data structure that

1127
00:58:00,640 --> 00:58:05,710
looks quite like this in RAM, in
memory, so that the browser can

1128
00:58:05,710 --> 00:58:08,840
navigate that web page as needed.

1129
00:58:08,840 --> 00:58:11,020
Now, why might it need
to navigate the web page?

1130
00:58:11,020 --> 00:58:13,630
Well, once you introduce
JavaScript does it

1131
00:58:13,630 --> 00:58:17,680
become really compelling to
be able to look at not just

1132
00:58:17,680 --> 00:58:21,790
the raw text, but the
individual nodes, so to speak,

1133
00:58:21,790 --> 00:58:25,750
the rectangles and ellipses in the tree.

1134
00:58:25,750 --> 00:58:29,590
But we need to introduce
this tag here, the script

1135
00:58:29,590 --> 00:58:33,460
tag, where we can put our JavaScript
code in the head of our web page here.

1136
00:58:33,460 --> 00:58:36,100
But we'll see this can
go in different places.

1137
00:58:36,100 --> 00:58:40,120
Here then, is dom0.html.

1138
00:58:40,120 --> 00:58:46,780
At the very top of the body, notice,
is a tag we've seen once before, form.

1139
00:58:46,780 --> 00:58:50,310
But notice it's got a new attribute
we've not seen, on submit.

1140
00:58:50,310 --> 00:58:52,060
And you can kind of
guess what this means.

1141
00:58:52,060 --> 00:58:54,280
On submit, do the following.

1142
00:58:54,280 --> 00:58:55,690
But what's the following?

1143
00:58:55,690 --> 00:59:00,054
Well, notice that inside of quotes
here is some funky-looking syntax.

1144
00:59:00,054 --> 00:59:02,470
And if you've programmed before,
you might recognize these

1145
00:59:02,470 --> 00:59:05,420
as being a function call
and then a return statement.

1146
00:59:05,420 --> 00:59:06,800
But what does that mean?

1147
00:59:06,800 --> 00:59:10,900
Greet, it turns out, is a
function, an action, a verb.

1148
00:59:10,900 --> 00:59:16,180
It's a puzzle piece like, say, for
instance, in the world of Scratch.

1149
00:59:16,180 --> 00:59:19,730
And return false just means
don't do your default behavior.

1150
00:59:19,730 --> 00:59:23,560
So jumping the gun, what is the default
behavior for a form on the internet?

1151
00:59:23,560 --> 00:59:27,070
Even as we've seen it before and
as you've certainly used it before?

1152
00:59:27,070 --> 00:59:29,680
Well, it's to submit whatever
you've typed in to the server.

1153
00:59:29,680 --> 00:59:32,530
You're registering for a web site,
you click Submit, goes to the server.

1154
00:59:32,530 --> 00:59:34,195
If you're logging into a
web site, you click Submit,

1155
00:59:34,195 --> 00:59:35,320
it should go to the server.

1156
00:59:35,320 --> 00:59:37,820
You're searching for dogs on
the internet, you click Submit,

1157
00:59:37,820 --> 00:59:39,220
it should go to a server.

1158
00:59:39,220 --> 00:59:44,050
By saying return false here, this means,
don't send anything to the server.

1159
00:59:44,050 --> 00:59:47,200
Keep the user locally to our HTML page.

1160
00:59:47,200 --> 00:59:50,000
And that's the goal of this
particular demonstration.

1161
00:59:50,000 --> 00:59:52,450
So what are the inputs for this form?

1162
00:59:52,450 --> 00:59:56,500
Well, one is called name,
and its type is text.

1163
00:59:56,500 --> 00:59:58,269
And the other is of type submit.

1164
00:59:58,269 --> 01:00:01,060
And I've added another attribute
here just to make things prettier,

1165
01:00:01,060 --> 01:00:02,410
called placeholder.

1166
01:00:02,410 --> 01:00:04,240
And this is how you get some gray--

1167
01:00:04,240 --> 01:00:09,370
literally, placeholder-- text that
the user sees kind of as instructions.

1168
01:00:09,370 --> 01:00:12,680
Now, what is greet and
what is going on here?

1169
01:00:12,680 --> 01:00:15,130
Well, let me scroll up to the top.

1170
01:00:15,130 --> 01:00:18,620
But before I do, realize
that per this attribute,

1171
01:00:18,620 --> 01:00:25,000
on submit, when this form is submitted,
the greet function should be called.

1172
01:00:25,000 --> 01:00:27,530
The greet action should be taken.

1173
01:00:27,530 --> 01:00:31,160
The greet puzzle piece, if
you will, should be executed.

1174
01:00:31,160 --> 01:00:34,000
So what is the greet action?

1175
01:00:34,000 --> 01:00:36,550
This is a function that does
not come with JavaScript,

1176
01:00:36,550 --> 01:00:37,960
doesn't come with browsers.

1177
01:00:37,960 --> 01:00:44,290
I invented it up here inside of
this open and close script tag.

1178
01:00:44,290 --> 01:00:49,450
Notice that, per the purple word,
function, greet is indeed a function.

1179
01:00:49,450 --> 01:00:52,840
And now I'm using this built-in
other function called alert.

1180
01:00:52,840 --> 01:00:54,280
This does come with JavaScript.

1181
01:00:54,280 --> 01:00:55,930
This does come with my browser.

1182
01:00:55,930 --> 01:00:57,490
It doesn't create very pretty alerts.

1183
01:00:57,490 --> 01:01:01,250
It's what creates that ugly
dialog window we saw a bit ago.

1184
01:01:01,250 --> 01:01:07,180
But when I say alert, notice this
cryptic-looking string of code.

1185
01:01:07,180 --> 01:01:11,170
And for today's purposes, it
suffices to know the following.

1186
01:01:11,170 --> 01:01:13,586
So quote, unquote, "hello" comma, space.

1187
01:01:13,586 --> 01:01:15,460
Is going to print exactly
that on the screen.

1188
01:01:15,460 --> 01:01:17,950
So quote, unquote, and
whatever's inside is

1189
01:01:17,950 --> 01:01:19,660
going to get displayed on the screen.

1190
01:01:19,660 --> 01:01:21,160
The plus is a little funky here.

1191
01:01:21,160 --> 01:01:23,300
It's not for arithmetic or addition.

1192
01:01:23,300 --> 01:01:25,570
It is for concatenation.

1193
01:01:25,570 --> 01:01:27,550
This is telling the
browser, hey, browser,

1194
01:01:27,550 --> 01:01:32,080
print out the word "hello" comma,
space, and then append to it--

1195
01:01:32,080 --> 01:01:34,930
concatenate onto it-- the following.

1196
01:01:34,930 --> 01:01:36,570
And this one is a little more cryptic.

1197
01:01:36,570 --> 01:01:41,517
document.getElementById quote,
unquote, "name" dot value.

1198
01:01:41,517 --> 01:01:44,350
It's kind of a mouthful, but let's
think about what's going on here.

1199
01:01:44,350 --> 01:01:50,030
Document is a special object, a
special variable-- a global variable,

1200
01:01:50,030 --> 01:01:50,879
if you will--

1201
01:01:50,879 --> 01:01:52,920
inside of which is a whole
bunch of functionality

1202
01:01:52,920 --> 01:01:55,290
that comes for free with your browser.

1203
01:01:55,290 --> 01:01:57,510
Some of that functionality--
another action--

1204
01:01:57,510 --> 01:02:00,870
is called getElementById.

1205
01:02:00,870 --> 01:02:02,270
Well, what does that mean?

1206
01:02:02,270 --> 01:02:06,030
Element-- we've heard this term
before-- refers to an HTML tag,

1207
01:02:06,030 --> 01:02:09,870
or really, the open and the close
tag and everything inside of it.

1208
01:02:09,870 --> 01:02:13,260
Name is in quotes here, so that
probably has some special meaning.

1209
01:02:13,260 --> 01:02:14,470
More on that in a moment.

1210
01:02:14,470 --> 01:02:18,850
And then .value is probably the value
of that element, whatever that means.

1211
01:02:18,850 --> 01:02:20,550
So what is name?

1212
01:02:20,550 --> 01:02:25,090
Well, let me scroll back
down lower in the file.

1213
01:02:25,090 --> 01:02:27,420
And notice what's going on down here.

1214
01:02:27,420 --> 01:02:32,430
I took care earlier,
when defining this input,

1215
01:02:32,430 --> 01:02:35,610
to give it not just a
type and a placeholder,

1216
01:02:35,610 --> 01:02:38,470
but a unique identifier called name.

1217
01:02:38,470 --> 01:02:41,530
Could have called this anything--
foo, bar, baz, x, y, z-- but again,

1218
01:02:41,530 --> 01:02:44,280
none of those are very
descriptive, so I called it name.

1219
01:02:44,280 --> 01:02:48,810
And this is important because
I knew, preemptively, I

1220
01:02:48,810 --> 01:02:52,494
want to be able to get
at that element directly

1221
01:02:52,494 --> 01:02:54,410
and I don't want to
confuse it with any other,

1222
01:02:54,410 --> 01:02:56,730
so I want that identifier to be unique.

1223
01:02:56,730 --> 01:02:58,450
And I want to be able to get its value.

1224
01:02:58,450 --> 01:03:03,060
Its value being whatever the
human typed into that input box.

1225
01:03:03,060 --> 01:03:08,580
And so because I have ID equals name
here, and because I'm saying hey,

1226
01:03:08,580 --> 01:03:12,660
browser, get the element
whose ID is name.

1227
01:03:12,660 --> 01:03:15,150
And then hey, browser, go get its value.

1228
01:03:15,150 --> 01:03:21,270
This is the way that my browser is
dynamically going into the DOM--

1229
01:03:21,270 --> 01:03:23,640
the document, that tree structure--

1230
01:03:23,640 --> 01:03:27,600
finding the element in
that DOM whose ID is name.

1231
01:03:27,600 --> 01:03:31,970
And then looking inside, hey,
browser, what did the user type in?

1232
01:03:31,970 --> 01:03:37,760
And so what comes back is
D-A-V-I-D or Z-A-M-Y-L-A,

1233
01:03:37,760 --> 01:03:40,700
or whatever the human has typed in.

1234
01:03:40,700 --> 01:03:44,510
And that gets, again, concatenated
on to the end of this partial phrase.

1235
01:03:44,510 --> 01:03:46,010
What gets concatenated onto the end?

1236
01:03:46,010 --> 01:03:47,101
Well, here's another plus.

1237
01:03:47,101 --> 01:03:48,850
Here's a quote, unquote
exclamation point.

1238
01:03:48,850 --> 01:03:51,260
So this was just my way of
making the alert friendly.

1239
01:03:51,260 --> 01:03:52,530
Hello, David!

1240
01:03:52,530 --> 01:03:53,900
Hello, Zamyla!

1241
01:03:53,900 --> 01:04:00,470
We have three separate substrings, or
phrases, being concatenated together.

1242
01:04:00,470 --> 01:04:03,500
So hello, comma, space,
whatever the user's name

1243
01:04:03,500 --> 01:04:05,469
is, and then that exclamation point.

1244
01:04:05,469 --> 01:04:07,760
And then some of this other
stuff, like the parentheses

1245
01:04:07,760 --> 01:04:10,551
and the semi-colon, these are just
features of the language itself,

1246
01:04:10,551 --> 01:04:11,330
JavaScript.

1247
01:04:11,330 --> 01:04:14,570
This is some of the syntax that
scratch, for instance, does not have,

1248
01:04:14,570 --> 01:04:18,050
but some languages, like C
and Python and C++ and Java,

1249
01:04:18,050 --> 01:04:21,830
do have some other syntax like
this that is sometimes necessary.

1250
01:04:21,830 --> 01:04:26,960
But for now, let's focus really on one
of the most fundamental ideas, which is

1251
01:04:26,960 --> 01:04:30,680
a browser's programmatic capability--

1252
01:04:30,680 --> 01:04:35,990
ability to do something by programming--
to get at data inside of a web page.

1253
01:04:35,990 --> 01:04:40,160
And it's doing that not by
searching the web pages HTML.

1254
01:04:40,160 --> 01:04:45,560
Because again, the HTML that comes
from server to browser is this.

1255
01:04:45,560 --> 01:04:48,800
There is no mention of David,
there is no mention of Zamyla,

1256
01:04:48,800 --> 01:04:50,480
inside of this file.

1257
01:04:50,480 --> 01:04:53,870
That is dynamically
provided by the human user

1258
01:04:53,870 --> 01:04:56,690
once this web page has been rendered.

1259
01:04:56,690 --> 01:05:03,500
And D-A-V-I-D and Z-A-M-Y-L-A is
this text that ends up being stored

1260
01:05:03,500 --> 01:05:07,640
in the tree structure,
the DOM structure,

1261
01:05:07,640 --> 01:05:13,430
that code like this in a language
called JavaScript allows us to access

1262
01:05:13,430 --> 01:05:15,530
on demand.

1263
01:05:15,530 --> 01:05:22,070
Now, much like we improved,
iteratively, the design of our CSS,

1264
01:05:22,070 --> 01:05:27,560
let's similarly do a bit of that
refinement using JavaScript, as well.

1265
01:05:27,560 --> 01:05:33,710
Let me open up DOM1.html and propose
a somewhat different solution

1266
01:05:33,710 --> 01:05:35,370
to the same problem.

1267
01:05:35,370 --> 01:05:39,770
Notice in this example, I again
have the form element as before.

1268
01:05:39,770 --> 01:05:42,820
But I've also added one
other unique identifier.

1269
01:05:42,820 --> 01:05:45,090
And again, there's different
ways I can do this.

1270
01:05:45,090 --> 01:05:50,090
I have chosen to use IDs,
but two this time, whereby

1271
01:05:50,090 --> 01:05:52,610
I've given my form a unique identifier.

1272
01:05:52,610 --> 01:05:56,940
Again, could call this ID x, y, z,
foo, bar, baz-- anything I want.

1273
01:05:56,940 --> 01:05:59,910
I only have one form in the page,
so I decided to keep things simple,

1274
01:05:59,910 --> 01:06:02,540
and I just uniquely
identified the form as form.

1275
01:06:02,540 --> 01:06:04,800
But even that isn't all that compelling.

1276
01:06:04,800 --> 01:06:06,500
But it's at least specific.

1277
01:06:06,500 --> 01:06:09,950
So now, if I scroll down
to the script element,

1278
01:06:09,950 --> 01:06:15,476
notice that this time, the
script tag is below the form.

1279
01:06:15,476 --> 01:06:16,350
It's not in the head.

1280
01:06:16,350 --> 01:06:19,610
It's actually in the body
toward the very end of my body,

1281
01:06:19,610 --> 01:06:21,330
below the form itself.

1282
01:06:21,330 --> 01:06:25,520
And notice somewhat new syntax here.

1283
01:06:25,520 --> 01:06:28,400
So this line here,
you can perhaps reason

1284
01:06:28,400 --> 01:06:32,330
through what it's doing, although it's
a little bit of a different approach.

1285
01:06:32,330 --> 01:06:35,210
document.getElementById
quote, unquote "form."

1286
01:06:35,210 --> 01:06:38,930
So as before, this just means hey,
browser, give me the HTML element whose

1287
01:06:38,930 --> 01:06:41,630
unique identifier is form.

1288
01:06:41,630 --> 01:06:43,790
So that refers, of
course, to the one form.

1289
01:06:43,790 --> 01:06:45,230
And then, this is a new property.

1290
01:06:45,230 --> 01:06:47,000
Before we used value.

1291
01:06:47,000 --> 01:06:49,490
Now I'm using on submit.

1292
01:06:49,490 --> 01:06:54,860
So it turns out that there is a
property in the world of JavaScript

1293
01:06:54,860 --> 01:07:00,450
associated with an HTML form that
you can access by way of this syntax.

1294
01:07:00,450 --> 01:07:05,670
So this is a way now of
saying hey, browser, associate

1295
01:07:05,670 --> 01:07:09,970
with the on submission of this
form the following function.

1296
01:07:09,970 --> 01:07:14,560
And again, a function is just a
puzzle piece that is a call to action.

1297
01:07:14,560 --> 01:07:15,870
It's just a verb.

1298
01:07:15,870 --> 01:07:18,729
It's a set of instructions
that you want to be executed.

1299
01:07:18,729 --> 01:07:21,270
This function doesn't happen to
have a name, but that's fine.

1300
01:07:21,270 --> 01:07:23,850
The curly brace here and
the curly brace here just

1301
01:07:23,850 --> 01:07:26,916
mean this function is two lines long.

1302
01:07:26,916 --> 01:07:28,040
What does this function do?

1303
01:07:28,040 --> 01:07:29,630
Does the exact same thing.

1304
01:07:29,630 --> 01:07:32,420
Notice this alert line
is exactly the same,

1305
01:07:32,420 --> 01:07:37,040
and notice that I'm returning false
down below here, so as to short circuit

1306
01:07:37,040 --> 01:07:39,170
the submission of any data to a server.

1307
01:07:39,170 --> 01:07:43,140
I'm handling all of this
inside of my current web page.

1308
01:07:43,140 --> 01:07:46,010
So what have I done
that's different now?

1309
01:07:46,010 --> 01:07:50,870
Well, notice, just like I
iteratively improved my CSS,

1310
01:07:50,870 --> 01:07:57,350
and I removed from my HTML any mention
of CSS properties-- which, again,

1311
01:07:57,350 --> 01:08:01,530
just felt like it was getting messy to
co-mingle these multiple languages--

1312
01:08:01,530 --> 01:08:06,860
so have I, with this example, taken
a step of removing from my HTML any

1313
01:08:06,860 --> 01:08:11,030
mention of on submit relegating
this other language--

1314
01:08:11,030 --> 01:08:15,080
JavaScript, this time-- to
be inside of its own tag.

1315
01:08:15,080 --> 01:08:17,210
Previously, it was
the style tag for CSS.

1316
01:08:17,210 --> 01:08:19,370
Now, it's the script tag for JavaScript.

1317
01:08:19,370 --> 01:08:24,330
But I've taken a step toward separating
my data from my presentation,

1318
01:08:24,330 --> 01:08:28,859
and now from my logic or business
logic, my programming code.

1319
01:08:28,859 --> 01:08:33,859
And I've specifically, as an aside,
put the script tag below my form tag.

1320
01:08:33,859 --> 01:08:36,529
Because it turns out, browsers,
as fancy as they might seem,

1321
01:08:36,529 --> 01:08:38,420
are pretty dumb, in that they
only do what they're told,

1322
01:08:38,420 --> 01:08:40,711
and they only do it in the
order in which they're told,

1323
01:08:40,711 --> 01:08:41,960
top to bottom, left to right.

1324
01:08:41,960 --> 01:08:46,430
And so if I were to try to call
this code, whereby I'm associating

1325
01:08:46,430 --> 01:08:50,180
this function with the
submission of this form,

1326
01:08:50,180 --> 01:08:53,060
if I tried to put this
code up here, mm-mm, it

1327
01:08:53,060 --> 01:08:56,029
wouldn't work because the
form doesn't exist yet.

1328
01:08:56,029 --> 01:09:00,649
Only once the browser has read, from the
top, through this portion of the file

1329
01:09:00,649 --> 01:09:04,850
does that form exist in its memory-- in
the DOM, the data structure, the tree

1330
01:09:04,850 --> 01:09:06,020
that it's building up.

1331
01:09:06,020 --> 01:09:09,830
At which point it then
makes sense to associate

1332
01:09:09,830 --> 01:09:13,850
this JavaScript function,
this event handler,

1333
01:09:13,850 --> 01:09:17,580
so to speak, with that
particular element.

1334
01:09:17,580 --> 01:09:18,979
So this was deliberate.

1335
01:09:18,979 --> 01:09:23,359
But again, that's a finer detail
than is fundamentally necessary to,

1336
01:09:23,359 --> 01:09:25,760
perhaps, follow along here.

1337
01:09:25,760 --> 01:09:31,340
But just as we did with CSS, whereby we
completely separated our presentation

1338
01:09:31,340 --> 01:09:36,050
from our data by moving our
CSS to a secondary .css file,

1339
01:09:36,050 --> 01:09:40,880
so can we leverage that same principle
here and completely separate the logic

1340
01:09:40,880 --> 01:09:46,700
of our code from the data that it is
accessing by relegating the contents

1341
01:09:46,700 --> 01:09:52,189
of this script tag, essentially, to
another file, something ending in .js,

1342
01:09:52,189 --> 01:09:53,960
for JavaScript, by convention.

1343
01:09:53,960 --> 01:10:00,500
And indeed, in dom2.html do we have a
file that does exactly that by moving

1344
01:10:00,500 --> 01:10:05,270
to the head of the page, in this
case, the script tag-- dom2.js--

1345
01:10:05,270 --> 01:10:08,810
inside of which is not only those
lines, but a couple of others

1346
01:10:08,810 --> 01:10:12,590
that ensure that even though the script
tag is in the head of my web page

1347
01:10:12,590 --> 01:10:16,430
right now, it is ultimately
going to be executed later,

1348
01:10:16,430 --> 01:10:19,190
once the whole DOM has been rendered.

1349
01:10:19,190 --> 01:10:23,477
Alternatively, we could also move this
script tag to the bottom of the page

1350
01:10:23,477 --> 01:10:23,976
still.

1351
01:10:23,976 --> 01:10:28,170


1352
01:10:28,170 --> 01:10:29,000
All right.

1353
01:10:29,000 --> 01:10:31,760
But this is not a
particularly common case,

1354
01:10:31,760 --> 01:10:34,760
to visit a web page that
asks you to type in your name

1355
01:10:34,760 --> 01:10:38,480
and then it just says, hello, David,
or whatever your name happens to be.

1356
01:10:38,480 --> 01:10:41,300
I mean, typically, when we have
seen programming code being

1357
01:10:41,300 --> 01:10:45,980
used in a browser, it's for pretty
fancy features like actually checking

1358
01:10:45,980 --> 01:10:50,600
that I've typed in all of the fields to
a form when registering for a website

1359
01:10:50,600 --> 01:10:52,850
or making sure, when I am
registering for a website,

1360
01:10:52,850 --> 01:10:55,610
that both of my
passwords actually match.

1361
01:10:55,610 --> 01:10:58,550
And yet other applications
still with JavaScript.

1362
01:10:58,550 --> 01:11:01,010
So let's take a look at
a few other examples,

1363
01:11:01,010 --> 01:11:05,150
these involving actual forms
that are meant to be submitted.

1364
01:11:05,150 --> 01:11:06,960
For instance, here is form0.html.

1365
01:11:06,960 --> 01:11:09,530


1366
01:11:09,530 --> 01:11:13,067
In this case, notice that
I have an HTML form that

1367
01:11:13,067 --> 01:11:14,900
doesn't have an action
or a method because I

1368
01:11:14,900 --> 01:11:17,150
actually, for demonstration
purposes, don't really

1369
01:11:17,150 --> 01:11:18,440
want this to be sent anywhere.

1370
01:11:18,440 --> 01:11:20,450
In fact, there is nowhere
to actually send it

1371
01:11:20,450 --> 01:11:24,440
because I don't have the backend of
a database to store this information.

1372
01:11:24,440 --> 01:11:26,210
All we care about is this front-end.

1373
01:11:26,210 --> 01:11:27,930
And notice I'm asking for a few things.

1374
01:11:27,930 --> 01:11:31,820
The email of the user, their password,
their password again, and then I

1375
01:11:31,820 --> 01:11:34,160
want them to agree to
some terms and conditions.

1376
01:11:34,160 --> 01:11:37,430
And so we'll see a few new
features here of HTML forms.

1377
01:11:37,430 --> 01:11:42,110
Not only do we have a text box, as we've
seen before for their email address.

1378
01:11:42,110 --> 01:11:46,580
Turns out, there's also type equals
password that's still just a text box,

1379
01:11:46,580 --> 01:11:50,900
but if you've ever noticed why
password boxes have bullets or dot dot

1380
01:11:50,900 --> 01:11:54,890
dots instead of seeing your actual
password, just for privacy sake,

1381
01:11:54,890 --> 01:11:57,200
this is how that actually happens.

1382
01:11:57,200 --> 01:12:00,950
This one, too, for the confirmation,
is also of type password.

1383
01:12:00,950 --> 01:12:03,090
But notice, I've given
it a different name.

1384
01:12:03,090 --> 01:12:05,850
The name of the first field
is email, second is password,

1385
01:12:05,850 --> 01:12:07,790
third is confirmation,
but I could have called

1386
01:12:07,790 --> 01:12:09,561
it password two or something else.

1387
01:12:09,561 --> 01:12:11,810
And then, lastly, I agree
to the terms and conditions.

1388
01:12:11,810 --> 01:12:14,270
Notice, it's of type checkbox
so that it's something

1389
01:12:14,270 --> 01:12:15,690
the user can click on and off.

1390
01:12:15,690 --> 01:12:19,190
And I'm just calling that arbitrarily,
but reasonably, agreement.

1391
01:12:19,190 --> 01:12:24,740
And then lastly, I have a Submit button,
whose value or label is register.

1392
01:12:24,740 --> 01:12:27,170
And then, this is very
simplistic formatting.

1393
01:12:27,170 --> 01:12:28,730
I'm just using line breaks.

1394
01:12:28,730 --> 01:12:30,582
BR is the line break element.

1395
01:12:30,582 --> 01:12:32,540
So it doesn't give me a
full-fledged paragraph,

1396
01:12:32,540 --> 01:12:35,090
as would be appropriate
for sentences of text.

1397
01:12:35,090 --> 01:12:38,960
It just makes sure that each of these
things ends up on a new line, the line,

1398
01:12:38,960 --> 01:12:41,710
therefore, being broken with BR.

1399
01:12:41,710 --> 01:12:42,380
All right.

1400
01:12:42,380 --> 01:12:48,240
So what opportunities are there
for validation, so to speak?

1401
01:12:48,240 --> 01:12:51,480
Form validation being the buzzword here.

1402
01:12:51,480 --> 01:12:54,440
And what mistakes, in other
words, might a user make?

1403
01:12:54,440 --> 01:12:56,719
Well, they might not type
in one of these fields.

1404
01:12:56,719 --> 01:12:59,010
And I want them to do something
with all four of these.

1405
01:12:59,010 --> 01:13:02,060
So I could check, did the
user fill out the whole form?

1406
01:13:02,060 --> 01:13:06,170
The user might type their
name or an invalid email

1407
01:13:06,170 --> 01:13:09,264
address because of some typographical
error, they forgot the at sign

1408
01:13:09,264 --> 01:13:11,180
or they misread what
they're supposed to type.

1409
01:13:11,180 --> 01:13:13,160
So maybe there's an error there.

1410
01:13:13,160 --> 01:13:15,350
Password, maybe it's too short.

1411
01:13:15,350 --> 01:13:18,044
Maybe it doesn't have enough
letters or numbers or punctuation

1412
01:13:18,044 --> 01:13:20,210
or all those annoying things
that websites typically

1413
01:13:20,210 --> 01:13:22,010
impose for security's sake.

1414
01:13:22,010 --> 01:13:24,170
Maybe they typed the
password fine the first time,

1415
01:13:24,170 --> 01:13:26,690
but they made a typo the second
time, so they don't match.

1416
01:13:26,690 --> 01:13:29,030
And the website wants to
make sure, when you're

1417
01:13:29,030 --> 01:13:31,460
registering, that you remember
what your password is.

1418
01:13:31,460 --> 01:13:33,980
And if you typed in two
different ways, unclear

1419
01:13:33,980 --> 01:13:36,470
which one should be
your actual password,

1420
01:13:36,470 --> 01:13:37,947
so we might want to check for that.

1421
01:13:37,947 --> 01:13:40,280
And then, of course, because
of our lawyers or whatever,

1422
01:13:40,280 --> 01:13:43,602
we want to make sure that the
user checks that check box.

1423
01:13:43,602 --> 01:13:45,560
And so we want to make
sure that the human took

1424
01:13:45,560 --> 01:13:48,770
that deliberate action of
making an unchecked box

1425
01:13:48,770 --> 01:13:50,780
checked before they click Register.

1426
01:13:50,780 --> 01:13:54,950
So a bunch of juicy opportunities to
actually validate the user's input.

1427
01:13:54,950 --> 01:13:58,040
There are no validations in this file.

1428
01:13:58,040 --> 01:13:59,970
There is no JavaScript in this file.

1429
01:13:59,970 --> 01:14:01,310
This is just HTML.

1430
01:14:01,310 --> 01:14:05,570
So if I click to register the Submit
button on this page, what I typed

1431
01:14:05,570 --> 01:14:10,850
or what I didn't type would get
sent to the server, blank or not.

1432
01:14:10,850 --> 01:14:13,580
So I want to add some
logic to this and I

1433
01:14:13,580 --> 01:14:17,400
want to see how you might go about
implementing this kind of logic.

1434
01:14:17,400 --> 01:14:23,330
So let's look at form one, which is a
addition to this file of the following

1435
01:14:23,330 --> 01:14:24,440
lines.

1436
01:14:24,440 --> 01:14:29,570
Again, the particulars here won't
necessarily matter in great detail.

1437
01:14:29,570 --> 01:14:32,360
Take away from this the
overarching principles

1438
01:14:32,360 --> 01:14:37,220
that we're now applying via this
intersection of JavaScript code

1439
01:14:37,220 --> 01:14:42,170
and the web page's DOM,
Document Object Model, its tree.

1440
01:14:42,170 --> 01:14:44,270
First line of code in
my script tag here is

1441
01:14:44,270 --> 01:14:49,100
to get, from the document, the element
whose ID is form, just as before,

1442
01:14:49,100 --> 01:14:51,710
and it refers to the one
and only form in the page.

1443
01:14:51,710 --> 01:14:55,640
Then I'm doing form.onsubmit, so this is
a little more succinct than last time.

1444
01:14:55,640 --> 01:14:59,720
But you can infer from this, well, if
you have a variable-- as in algebra, x,

1445
01:14:59,720 --> 01:15:01,910
y, or z, but in this
case, it's called form--

1446
01:15:01,910 --> 01:15:07,280
and I'm associating with it's on
submit listener, we'll call it,

1447
01:15:07,280 --> 01:15:10,730
the following function, this
is just a very succinct way

1448
01:15:10,730 --> 01:15:14,600
and JavaScript of saying hey,
browser, when that form is submitted,

1449
01:15:14,600 --> 01:15:18,002
execute the following lines
of code, the function.

1450
01:15:18,002 --> 01:15:19,210
And there's a bunch of lines.

1451
01:15:19,210 --> 01:15:20,501
There's not just two this time.

1452
01:15:20,501 --> 01:15:22,580
It's a dozen or more.

1453
01:15:22,580 --> 01:15:24,110
So what are these lines doing?

1454
01:15:24,110 --> 01:15:26,960
Well, here, you'll find that
each of these chunks of code

1455
01:15:26,960 --> 01:15:28,970
follow pretty similar structure.

1456
01:15:28,970 --> 01:15:35,900
If the forms, email fields value
equals quote, unquote-- so nothing--

1457
01:15:35,900 --> 01:15:38,180
if the user typed in
nothing, alert the user,

1458
01:15:38,180 --> 01:15:40,220
you must provide your email address.

1459
01:15:40,220 --> 01:15:43,586
And then return false to make sure
that the form does not get submitted.

1460
01:15:43,586 --> 01:15:44,960
Now, there's some weirdness here.

1461
01:15:44,960 --> 01:15:46,670
One, parentheses.

1462
01:15:46,670 --> 01:15:48,150
Two, double equal sign.

1463
01:15:48,150 --> 01:15:48,770
Not a typo.

1464
01:15:48,770 --> 01:15:51,260
Long story short, in many
programming languages,

1465
01:15:51,260 --> 01:15:56,150
equal actually means copy a value from
one side of the expression to another.

1466
01:15:56,150 --> 01:15:59,430
Equals equals means check for equality.

1467
01:15:59,430 --> 01:16:01,520
So it just turns out
that the same symbol

1468
01:16:01,520 --> 01:16:05,300
is used for two different things,
so they separated them semantically

1469
01:16:05,300 --> 01:16:08,150
with double, in this case.

1470
01:16:08,150 --> 01:16:10,070
So that's how we check
that these are actually

1471
01:16:10,070 --> 01:16:11,870
typed in his or her email address.

1472
01:16:11,870 --> 01:16:13,040
What if we scroll down here?

1473
01:16:13,040 --> 01:16:17,160
Same kind of validation,
but for a different field.

1474
01:16:17,160 --> 01:16:22,510
If the passwords value is blank, yell at
the user, you must provide a password.

1475
01:16:22,510 --> 01:16:26,550
If the passwords value does not
equal the confirmations value--

1476
01:16:26,550 --> 01:16:31,210
so if those two password-related
text boxes are not the same--

1477
01:16:31,210 --> 01:16:35,680
an exclamation point equals
sign means not equal.

1478
01:16:35,680 --> 01:16:38,550
So there isn't really a way on
your keyboard easily to type

1479
01:16:38,550 --> 01:16:40,450
the equal sign with a slash through it.

1480
01:16:40,450 --> 01:16:43,110
So what most programming
languages do is an exclamation

1481
01:16:43,110 --> 01:16:46,890
point, which typically means
not or invert, equal sign,

1482
01:16:46,890 --> 01:16:48,150
so it does not equal this.

1483
01:16:48,150 --> 01:16:53,460
So if the password does not equal the
confirmation thereof, yell at the user,

1484
01:16:53,460 --> 01:16:57,090
passwords do not match,
and then return false.

1485
01:16:57,090 --> 01:17:01,590
And then down here, lastly, this
one, too, is a little cryptic,

1486
01:17:01,590 --> 01:17:04,940
but it gives you a taste
for what's possible.

1487
01:17:04,940 --> 01:17:10,790
If it is not the case, per the
exclamation point, that the form's

1488
01:17:10,790 --> 01:17:13,650
agreement checkbox is checked--

1489
01:17:13,650 --> 01:17:17,870
which is a Boolean expression, if you
will, as per our time with Scratch--

1490
01:17:17,870 --> 01:17:20,120
if it is not checked,
then yell at the user,

1491
01:17:20,120 --> 01:17:23,100
you must agree to the
terms and conditions.

1492
01:17:23,100 --> 01:17:28,421
And so this represents the checking that
the user has actually checked that box.

1493
01:17:28,421 --> 01:17:30,420
So there's any number of
other things we can do.

1494
01:17:30,420 --> 01:17:34,370
And there's any number of ways we
could implement this same kind of code.

1495
01:17:34,370 --> 01:17:37,700
Indeed, we could use the libraries,
code that other people have written,

1496
01:17:37,700 --> 01:17:41,210
to make this much easier so we don't
have to implement all of this ourself.

1497
01:17:41,210 --> 01:17:43,410
And it turns out we're
still going to have to

1498
01:17:43,410 --> 01:17:46,284
and we're still going to want to
implement these same kinds of checks

1499
01:17:46,284 --> 01:17:48,890
on the server, just in
case a user slips by

1500
01:17:48,890 --> 01:17:51,860
and maybe their browser doesn't have
JavaScript enabled or something.

1501
01:17:51,860 --> 01:17:54,960
We're still going to want to validate
all of this data server-side.

1502
01:17:54,960 --> 01:17:58,490
But for the most dynamic,
immediate experience,

1503
01:17:58,490 --> 01:18:03,060
checking things in the
client using JavaScript code

1504
01:18:03,060 --> 01:18:06,680
allows the user to get an instant
feedback before he or she even clicks

1505
01:18:06,680 --> 01:18:09,770
the submit button and sends the data
to the server, which, especially

1506
01:18:09,770 --> 01:18:11,600
on a mobile device, can take some time.

1507
01:18:11,600 --> 01:18:15,170
It's not nearly as immediate as
actually running some programming

1508
01:18:15,170 --> 01:18:16,580
code in the browser.

1509
01:18:16,580 --> 01:18:20,210
But if all of these
tests pass, notice how

1510
01:18:20,210 --> 01:18:23,780
this last line is return true,
which means hey, browser, submit

1511
01:18:23,780 --> 01:18:25,437
the form to the server.

1512
01:18:25,437 --> 01:18:28,145
And again, I didn't configure this
example with an actual server,

1513
01:18:28,145 --> 01:18:30,110
so it's still not going to go anywhere.

1514
01:18:30,110 --> 01:18:33,630
But it would if we actually
added an action attribute

1515
01:18:33,630 --> 01:18:39,680
and a method attribute to the form
as a result of this return true.

1516
01:18:39,680 --> 01:18:41,960
Now, of course, this might
all look pretty cryptic.

1517
01:18:41,960 --> 01:18:46,400
We've dived in pretty deep
quickly to not only HTML and CSS,

1518
01:18:46,400 --> 01:18:50,660
but now we're using a third language to
actually manipulate that whole world.

1519
01:18:50,660 --> 01:18:54,020
But realize that JavaScript,
though the syntax of it

1520
01:18:54,020 --> 01:18:57,500
might be a bit cryptic at first
glance, and while some of this

1521
01:18:57,500 --> 01:19:00,020
might not have gone
down so easily, realize

1522
01:19:00,020 --> 01:19:03,830
that the ideas that are possible
within this world of JavaScript,

1523
01:19:03,830 --> 01:19:08,660
in this domain of web pages, is really
not all that different from Scratch.

1524
01:19:08,660 --> 01:19:12,080
For instance, recall that in Scratch,
we had this adorable purple puzzle

1525
01:19:12,080 --> 01:19:15,076
piece, by which you could say,
quite simply, "hello, world."

1526
01:19:15,076 --> 01:19:17,700
Well, in JavaScript, as we've
seen, you can still say the same,

1527
01:19:17,700 --> 01:19:18,991
but it's a little more cryptic.

1528
01:19:18,991 --> 01:19:21,830
The syntax is, of course,
textual and not graphical.

1529
01:19:21,830 --> 01:19:25,220
But at the end of the day, the
functionality is essentially the same.

1530
01:19:25,220 --> 01:19:29,560
Alert, open parenthesis, quote, unquote,
"hello, world," close parenthesis,

1531
01:19:29,560 --> 01:19:30,260
semi-colon.

1532
01:19:30,260 --> 01:19:33,770
So again, there's absolutely
some syntactic overhead there.

1533
01:19:33,770 --> 01:19:35,930
There's definitely some
complexity, textually.

1534
01:19:35,930 --> 01:19:38,407
But the idea is exactly the same.

1535
01:19:38,407 --> 01:19:41,240
Recall, too, that in Scratch, if
you wanted to do something forever,

1536
01:19:41,240 --> 01:19:43,730
you might pull out the
forever puzzle piece, inside

1537
01:19:43,730 --> 01:19:46,670
of which might be one or more blocks
that you want to execute forever.

1538
01:19:46,670 --> 01:19:49,490
Well, in JavaScript, we can
implement this same idea

1539
01:19:49,490 --> 01:19:54,047
using this block of code, while
true alert "hello, world."

1540
01:19:54,047 --> 01:19:55,130
Different ways to do this.

1541
01:19:55,130 --> 01:19:57,860
And indeed, alert is really just
for the context of a browser.

1542
01:19:57,860 --> 01:20:01,880
There's other ways to do this in,
say, the context of a terminal window

1543
01:20:01,880 --> 01:20:03,510
or a black and white prompt.

1544
01:20:03,510 --> 01:20:08,077
But in this case, this is the JavaScript
way of saying to do something forever.

1545
01:20:08,077 --> 01:20:10,160
If you, instead, want to
do something not forever,

1546
01:20:10,160 --> 01:20:12,920
but a finite number
of times, like 10, you

1547
01:20:12,920 --> 01:20:17,360
can translate the Scratch blocks
above to the JavaScript code

1548
01:20:17,360 --> 01:20:22,490
below, using keywords like var and
more semi-colons and a less than sign

1549
01:20:22,490 --> 01:20:24,740
and the like, but this
is a so-called for loop,

1550
01:20:24,740 --> 01:20:27,530
as opposed to the earlier
while loop in JavaScript.

1551
01:20:27,530 --> 01:20:31,730
So syntactically, more involved,
but fundamentally, the same idea.

1552
01:20:31,730 --> 01:20:35,630
Meanwhile, if in Scratch, you wanted
to assign a variable like counter,

1553
01:20:35,630 --> 01:20:36,950
initially, the value is 0.

1554
01:20:36,950 --> 01:20:40,880
And then forever just print
it and then increment it by 1.

1555
01:20:40,880 --> 01:20:44,360
In JavaScript, at right, you could
do the same with a bit new syntax,

1556
01:20:44,360 --> 01:20:47,450
combining some of these same ideas.

1557
01:20:47,450 --> 01:20:50,510
And then if you wanted to do
something conditionally in Scratch,

1558
01:20:50,510 --> 01:20:53,470
you might borrow an if else block
and then another if else block,

1559
01:20:53,470 --> 01:20:57,410
so as to nest them inside of each other
to create a three-way fork in the road.

1560
01:20:57,410 --> 01:21:03,460
You can do the same in JavaScript using
some code like that at right there.

1561
01:21:03,460 --> 01:21:07,550
Now, we have only scratched the
surface here of JavaScript 2.

1562
01:21:07,550 --> 01:21:11,360
But much like some of our takeaways
thus far have been with HTML,

1563
01:21:11,360 --> 01:21:14,540
can we mark up a document on
our data for presentation.

1564
01:21:14,540 --> 01:21:18,080
With CSS, can we stylize
that presentation,

1565
01:21:18,080 --> 01:21:23,900
getting the colors and the font size and
the thickness and the positioning just

1566
01:21:23,900 --> 01:21:26,090
the way we want it, just right.

1567
01:21:26,090 --> 01:21:30,380
So with JavaScript can we do all that
and more because with JavaScript do we

1568
01:21:30,380 --> 01:21:35,030
have programmatic access to the
DOM-- the Document Object Model,

1569
01:21:35,030 --> 01:21:37,130
the data structure, the tree--

1570
01:21:37,130 --> 01:21:39,230
that represents that web page in memory.

1571
01:21:39,230 --> 01:21:41,420
And though we have just
used JavaScript here

1572
01:21:41,420 --> 01:21:43,940
for some relatively
simple examples, whereby

1573
01:21:43,940 --> 01:21:46,310
we grabbed the values
from the DOM and we

1574
01:21:46,310 --> 01:21:50,120
checked those values in
order to validate them,

1575
01:21:50,120 --> 01:21:53,690
so could we actually dynamically
change the color of a web page

1576
01:21:53,690 --> 01:21:56,150
or the positioning of
something on a web page,

1577
01:21:56,150 --> 01:21:58,820
or even add new content to a web page.

1578
01:21:58,820 --> 01:22:01,070
Indeed, by way of JavaScript
or other technologies

1579
01:22:01,070 --> 01:22:05,580
like Ajax, which allows you,
with JavaScript, to make

1580
01:22:05,580 --> 01:22:09,100
HTTP requests on the
internet for more data

1581
01:22:09,100 --> 01:22:12,200
so that you can then embed
more data on your web page.

1582
01:22:12,200 --> 01:22:14,720
For instance, if you've
ever used Facebook Messenger

1583
01:22:14,720 --> 01:22:17,720
and you're noticing that you get a
chat message and another chat message

1584
01:22:17,720 --> 01:22:20,150
and another chat message
from one or more friends,

1585
01:22:20,150 --> 01:22:22,450
you're still staying
on the same web page.

1586
01:22:22,450 --> 01:22:25,330
You don't have to reload the page
in order to see your new messages.

1587
01:22:25,330 --> 01:22:27,110
They just dynamically appear.

1588
01:22:27,110 --> 01:22:30,710
That is because Facebook is using
JavaScript that's constantly

1589
01:22:30,710 --> 01:22:34,320
running, as in a forever loop, and
it's constantly asking the server,

1590
01:22:34,320 --> 01:22:35,570
does David have more messages?

1591
01:22:35,570 --> 01:22:36,820
Does David have more messages?

1592
01:22:36,820 --> 01:22:40,040
And if so, it injects them
dynamically onto the page

1593
01:22:40,040 --> 01:22:44,300
by manipulating the DOM
for Facebook's own site.

1594
01:22:44,300 --> 01:22:47,270
Similarly, if you're a Google
Chats user or Google Hangouts

1595
01:22:47,270 --> 01:22:49,140
and you're getting
dynamic output that way,

1596
01:22:49,140 --> 01:22:52,430
similarly as JavaScript,
creating that dynamic experience.

1597
01:22:52,430 --> 01:22:56,510
If you use Google Maps or Bing Maps or
any number of mapping tools, whereby

1598
01:22:56,510 --> 01:22:59,150
you initially see maybe
your location in the world,

1599
01:22:59,150 --> 01:23:02,570
but you can click and drag and search
for other places around the globe

1600
01:23:02,570 --> 01:23:06,560
and then immediately see
tiles, or map pictures,

1601
01:23:06,560 --> 01:23:10,580
of where those places are in the
world, that is thanks to JavaScript.

1602
01:23:10,580 --> 01:23:14,340
Because, as in the case of
searching and validating a form,

1603
01:23:14,340 --> 01:23:18,254
so are all of those map-based web
sites listening for your textual input

1604
01:23:18,254 --> 01:23:21,170
and, as soon as you hit Enter,
searching their database for the result

1605
01:23:21,170 --> 01:23:23,970
and then updating the contents
of the page in real time,

1606
01:23:23,970 --> 01:23:26,330
sometimes with the
fanciest of animations,

1607
01:23:26,330 --> 01:23:30,320
which are also the result of
JavaScript and perhaps some CSS.

1608
01:23:30,320 --> 01:23:35,390
So it's with this trio of languages,
HTML and JavaScript and CSS,

1609
01:23:35,390 --> 01:23:39,260
ultimately, that you can create
some wonderfully immersive user

1610
01:23:39,260 --> 01:23:43,520
experiences and wonderfully
immersive user interfaces.

1611
01:23:43,520 --> 01:23:48,620
But we haven't necessarily
considered with too much detail

1612
01:23:48,620 --> 01:23:51,110
what kinds of devices users are using.

1613
01:23:51,110 --> 01:23:54,680
We did give some thought to
friendliness on mobile devices,

1614
01:23:54,680 --> 01:23:57,380
at least so far as it
goes with font sizing,

1615
01:23:57,380 --> 01:24:01,220
but we haven't really given any thought
to offline access to data, if that's

1616
01:24:01,220 --> 01:24:02,840
indeed something we want to support.

1617
01:24:02,840 --> 01:24:06,500
We haven't given some
thought to this scalability

1618
01:24:06,500 --> 01:24:10,580
of our websites and our code, so that
if we have not just one user, like me

1619
01:24:10,580 --> 01:24:15,110
here, but 1,000 users or 10,000
users or a million users,

1620
01:24:15,110 --> 01:24:17,330
what are the implications for my server?

1621
01:24:17,330 --> 01:24:19,040
What are the implications for my code?

1622
01:24:19,040 --> 01:24:21,680
If my code is just a little
bit slow, does it now

1623
01:24:21,680 --> 01:24:26,940
begin to feel slow for all of my
users and, in turn, of my customers?

1624
01:24:26,940 --> 01:24:31,430
So now that we have the ability to put
code on the internet and the ability

1625
01:24:31,430 --> 01:24:33,590
to put web pages on
the internet, now we're

1626
01:24:33,590 --> 01:24:35,900
going to have to start
to give some thought as

1627
01:24:35,900 --> 01:24:39,950
to how to put them on the internet
well and in a scalable way,

1628
01:24:39,950 --> 01:24:43,250
in a redundant way, in an available way.

1629
01:24:43,250 --> 01:24:47,060
But for that, we first need
to make a number of choices

1630
01:24:47,060 --> 01:24:50,720
around the languages we use on the
server, the frameworks or libraries

1631
01:24:50,720 --> 01:24:55,600
that we use, and indeed, what
technology stacks we deploy.

1632
01:24:55,600 --> 01:24:57,081