1

00:00:00,000 --> 00:00:02,976

2
00:00:02,976 --> 00:00:09,424

3
00:00:09,424 --> 00:00:11,100
DAVID J. MALAN: Web development.

4
00:00:11,100 --> 00:00:12,976
So you know how the internet works.

5
00:00:12,976 --> 00:00:16,100
And how there's all these computers on
the internet somehow interconnected.

6
00:00:16,100 --> 00:00:20,900
And they support protocols like
TCP/IP, and there's wires and wireless.

7
00:00:20,900 --> 00:00:23,330
And so we have, that is
to say, infrastructure

8
00:00:23,330 --> 00:00:26,810
via which we can get data
to and from computers, or to

9
00:00:26,810 --> 00:00:28,619
and from clients and servers.

10
00:00:28,619 --> 00:00:30,410
Indeed, that's the
relationship we're going

11
00:00:30,410 --> 00:00:34,100
to look at today when we look at web
development, the process of developing

12
00:00:34,100 --> 00:00:34,730
web sites.

13
00:00:34,730 --> 00:00:38,030
And keep in mind, that the web
is just one of many services

14
00:00:38,030 --> 00:00:39,410
that the internet supports today.

15
00:00:39,410 --> 00:00:42,620
The internet, of course, supports
email, and video conferencing,

16
00:00:42,620 --> 00:00:44,510
and all sorts of other applications.

17
00:00:44,510 --> 00:00:48,410
But the web itself is one
specific application, or service,

18
00:00:48,410 --> 00:00:49,577
that runs atop the internet.

19
00:00:49,577 --> 00:00:51,368
In other words, it
assumes that an internet

20
00:00:51,368 --> 00:00:53,180
exists so that we can
get data from point A

21
00:00:53,180 --> 00:00:57,020
to point B. And on top
of that then, do we layer

22
00:00:57,020 --> 00:01:01,180
a whole bunch of functionality that
allows us to click, and browse,

23
00:01:01,180 --> 00:01:03,890
and view information atop the internet.

24
00:01:03,890 --> 00:01:06,320
So let's consider the scenario at hand.

25
00:01:06,320 --> 00:01:09,362
Odds are if you're browsing the
web you're using a web browser.

26
00:01:09,362 --> 00:01:12,320
And on a desktop or laptop, it might
look a little something like this.

27
00:01:12,320 --> 00:01:14,569
On a phone, of course, it
might look a little smaller.

28
00:01:14,569 --> 00:01:17,840
And web browsers can even be found
on home console, gaming consoles,

29
00:01:17,840 --> 00:01:18,890
and the like, these days.

30
00:01:18,890 --> 00:01:22,880
But we'll assume that the essence of
a web browser is something like this.

31
00:01:22,880 --> 00:01:26,060
Atop the browser is a space
to type in an address,

32
00:01:26,060 --> 00:01:29,020
or a URL, or uniform resource locator.

33
00:01:29,020 --> 00:01:32,900
And that's generally something that
starts with HTTP, colon, slash, slash.

34
00:01:32,900 --> 00:01:35,630
Or HTTPS, colon, slash, slash.

35
00:01:35,630 --> 00:01:38,302
And then the address, or the
domain name, of a website

36
00:01:38,302 --> 00:01:39,260
that you want to visit.

37
00:01:39,260 --> 00:01:41,718
And odds are there's a back
button, maybe a forward button,

38
00:01:41,718 --> 00:01:44,660
a reload button, and a few
other features as well.

39
00:01:44,660 --> 00:01:47,610
But what are you doing when you
type in something like example.com

40
00:01:47,610 --> 00:01:52,670
or Google.com or Facebook.com or
any number of other domain names

41
00:01:52,670 --> 00:01:53,940
into a web browser?

42
00:01:53,940 --> 00:01:56,600
Well, you're sending a
request from your computer,

43
00:01:56,600 --> 00:02:02,000
be it a laptop, desktop, or phone,
from your device to some remote server,

44
00:02:02,000 --> 00:02:03,480
point B so to speak.

45
00:02:03,480 --> 00:02:07,200
And that server's purpose in
life is to look at your request,

46
00:02:07,200 --> 00:02:10,789
so to speak, figure out what it is you
want, and then respond to that request

47
00:02:10,789 --> 00:02:11,480
accordingly.

48
00:02:11,480 --> 00:02:16,640
Recall, in fact, when we've sent
requests on the internet for cats,

49
00:02:16,640 --> 00:02:18,020
like this one here.

50
00:02:18,020 --> 00:02:21,270
We send some kind of request
in a virtual envelope,

51
00:02:21,270 --> 00:02:25,190
if you will, and on the outside of that
envelope was the address of the server.

52
00:02:25,190 --> 00:02:30,560
But not the domain name like Google.com,
but rather the IP address and port

53
00:02:30,560 --> 00:02:34,500
number, a TCP port number, and
then my return IP address as well.

54
00:02:34,500 --> 00:02:37,880
And so inside of that envelope is
some kind of request for a very

55
00:02:37,880 --> 00:02:40,040
specific resource, like a cat.
56
00:02:40,040 --> 00:02:42,980
And then in the envelope that
comes back from the server,

57
00:02:42,980 --> 00:02:44,840
from, for instance,
Google Images, is going

58
00:02:44,840 --> 00:02:48,860
to be the cat, itself, in the form
of maybe one, or two, or three,

59
00:02:48,860 --> 00:02:53,210
or more packets, if everything
has been fragmented and sequenced.

60
00:02:53,210 --> 00:02:57,390
But what specifically is inside of this
envelope and where is it coming from?

61
00:02:57,390 --> 00:02:58,550
Well, what is a web server?

62
00:02:58,550 --> 00:03:01,730
A server, it's just a device that
looks a little something like this.

63
00:03:01,730 --> 00:03:03,440
Odds are you don't have
one of these in your home.

64
00:03:03,440 --> 00:03:05,630
Odds are if you have a
computer at home or at work,

65
00:03:05,630 --> 00:03:08,000
it's a more traditional
laptop or desktop.

66
00:03:08,000 --> 00:03:09,840
But this, too, is a computer.

67
00:03:09,840 --> 00:03:12,500
This is a server, it just
happens to be kind of flat.

68
00:03:12,500 --> 00:03:14,330
It's what's called a rack server.

69
00:03:14,330 --> 00:03:18,650
And a rack server is just a server
that has a CPU, and a motherboard,

70
00:03:18,650 --> 00:03:21,710
and RAM, and hard drives,
and other devices as well.

71
00:03:21,710 --> 00:03:25,910
And it just tends to be kind of
squished down into either a 1.5 inch

72
00:03:25,910 --> 00:03:28,610
height, or maybe a three inch
height, or some other multiple,

73
00:03:28,610 --> 00:03:30,770
typically, of 1.5 inches.

74
00:03:30,770 --> 00:03:33,560
And it just slides
into literally a rack.

75
00:03:33,560 --> 00:03:36,470
And this is so that system
administrators, and companies more

76
00:03:36,470 --> 00:03:40,790
generally, can squeeze a lot of these
servers into one small footprint.

77
00:03:40,790 --> 00:03:44,630
So you just stack one on top of the
other, like trays in a cafeteria.

78
00:03:44,630 --> 00:03:46,430
And behind, on the
back of these servers,

79
00:03:46,430 --> 00:03:50,300
are all sorts of ports into which
you can connect wires and cables that

80
00:03:50,300 --> 00:03:52,400
can interconnect all of these devices.

81
00:03:52,400 --> 00:03:56,059
Indeed, if your company
is running a web server,

82
00:03:56,059 --> 00:03:57,850
odds are it doesn't
have just one of these.

83
00:03:57,850 --> 00:04:02,300
Odds are it has one of many of
these inside of a data center,

84
00:04:02,300 --> 00:04:04,220
or some kind of--

85
00:04:04,220 --> 00:04:09,320
perhaps more likely-- a wiring closet
where you actually keep your devices.

86
00:04:09,320 --> 00:04:11,960
This might be a particularly
clean and fancy version.

87
00:04:11,960 --> 00:04:15,410
And behind each of these
doors is tens of, if not
88
00:04:15,410 --> 00:04:19,110
dozens, of servers depending
on their actual size.

89
00:04:19,110 --> 00:04:21,620
So that's what a web server actually is.

90
00:04:21,620 --> 00:04:25,830
But what is it that you're sending
to any one of these web servers?

91
00:04:25,830 --> 00:04:28,880
Well, you're sending a request
inside of this envelope.

92
00:04:28,880 --> 00:04:32,285
And you're sending a request very
specifically for whatever resource

93
00:04:32,285 --> 00:04:33,160
it is you care about.

94
00:04:33,160 --> 00:04:35,493
Maybe it's today's news, maybe
it's some search results,

95
00:04:35,493 --> 00:04:37,790
maybe it is in fact that cat.

96
00:04:37,790 --> 00:04:42,410
And the language in which this request
is written inside of this envelope

97
00:04:42,410 --> 00:04:47,690
is going to be in what's called
HTTP, Hypertext Transfer Protocol.

98
00:04:47,690 --> 00:04:49,820
And this transfer protocol
is really just a set

99
00:04:49,820 --> 00:04:53,240
of conventions to recall that
mandate how a computer speaks

100
00:04:53,240 --> 00:04:56,930
to another computer when it
wants to request information off

101
00:04:56,930 --> 00:04:58,040
of the world wide web.

102
00:04:58,040 --> 00:05:00,260
Meanwhile, if I want to
request a cat specifically,

103
00:05:00,260 --> 00:05:04,132
my request might instead look like
this, where I'm getting /cat.jpeg,

104
00:05:04,132 --> 00:05:06,590
if that's indeed the name of
the file name, and by the way,

105
00:05:06,590 --> 00:05:09,720
I speak HTTP version 1.1.

106
00:05:09,720 --> 00:05:12,770
So that's what's in the request
that I sent to the server,

107
00:05:12,770 --> 00:05:15,150
what is it that comes
back from the server?

108
00:05:15,150 --> 00:05:17,910
Well, odds are, it contains
a bunch of text, and then

109
00:05:17,910 --> 00:05:20,340
the actual response of the
message that are requested.

110
00:05:20,340 --> 00:05:23,250
So specifically, inside of the
envelope that, say, comes back

111
00:05:23,250 --> 00:05:25,950
from Google, if I'm requesting
that particular image,

112
00:05:25,950 --> 00:05:28,500
is going to be a message
that hopefully says

113
00:05:28,500 --> 00:05:32,340
HTTP slash 1.1, which is just
a reiteration of the language

114
00:05:32,340 --> 00:05:35,280
or the protocol being spoken, 200 OK.

115
00:05:35,280 --> 00:05:38,040
Where 200 means literally
everything is OK,

116
00:05:38,040 --> 00:05:41,700
here is satisfaction of
your particular request.

117
00:05:41,700 --> 00:05:43,950
So we actually never
really see this message

118
00:05:43,950 --> 00:05:48,300
because it's inside of this envelope,
or kind of written on the inside in what

119
00:05:48,300 --> 00:05:50,220
are called HTTP headers.
120
00:05:50,220 --> 00:05:54,780
Little lines of text that the server
adds to its envelope that's coming back

121
00:05:54,780 --> 00:05:56,610
to you that contains
information like this

122
00:05:56,610 --> 00:05:58,901
so that the browser knows
whether to show the remaining

123
00:05:58,901 --> 00:06:03,600
contents of the envelope, or to actually
display some kind of error message.

124
00:06:03,600 --> 00:06:07,080
In fact, there's a whole bunch
of these so-called HTTP status

125
00:06:07,080 --> 00:06:10,620
codes that indicate whether the envelope
you're getting back from a web server

126
00:06:10,620 --> 00:06:12,780
is indeed a successful response.

127
00:06:12,780 --> 00:06:15,969
200 OK is one you
almost never really see,

128
00:06:15,969 --> 00:06:17,760
because it means all
is well and so instead

129
00:06:17,760 --> 00:06:19,470
you would actually see the
cat, or your search results,

130
00:06:19,470 --> 00:06:20,820
or something else on the screen.

131
00:06:20,820 --> 00:06:24,750
But you might also see a status
code, or at least your browser might,

132
00:06:24,750 --> 00:06:28,470
that's number 301, or
302, and these indicate

133
00:06:28,470 --> 00:06:31,650
that your browser should actually
redirect you to some other URL,

134
00:06:31,650 --> 00:06:32,970
and we'll see that in a bit.

135
00:06:32,970 --> 00:06:35,590
You might see 304 which
means not modified.

136
00:06:35,590 --> 00:06:37,650
This is actually a
clever mechanism, whereby

137
00:06:37,650 --> 00:06:42,420
a web server to save time,
and save bandwidth, bytes,

138
00:06:42,420 --> 00:06:44,790
it can actually respond to
your request for that cat

139
00:06:44,790 --> 00:06:48,330
and say, uh, David you requested
this cat just a little bit ago,

140
00:06:48,330 --> 00:06:50,310
the cat has not been
modified, I'm not going
141
00:06:50,310 --> 00:06:51,990
to waste time sending it to you again.

142
00:06:51,990 --> 00:06:53,730
You should check your cache.

143
00:06:53,730 --> 00:06:58,590
In other words, browsers will very
often cache files, keep copies of them

144
00:06:58,590 --> 00:07:01,810
after you've requested them, so
if you revisit that same web page,

145
00:07:01,810 --> 00:07:04,860
they don't have to waste time and
bytes actually re-requesting them.

146
00:07:04,860 --> 00:07:08,320
And so the server can indicate you
don't need to re-request this file,

147
00:07:08,320 --> 00:07:10,290
It's not, in fact, been modified.

148
00:07:10,290 --> 00:07:12,630
Meanwhile, if something
kind of goes wrong,

149
00:07:12,630 --> 00:07:15,909
your browser might give
back a 401 or 403 response.

150
00:07:15,909 --> 00:07:17,700
Which indicates that
you're not authorized,

151
00:07:17,700 --> 00:07:19,860
you're forbidden from
accessing the resource.

152
00:07:19,860 --> 00:07:21,870
Maybe you have to log
in via some mechanism

153
00:07:21,870 --> 00:07:24,987
or maybe you're just not allowed
to access that file or directory.

154
00:07:24,987 --> 00:07:27,570
Now, odds are there's at least
one on this list that all of us

155
00:07:27,570 --> 00:07:31,050
have seen all too often, 404 not found.

156
00:07:31,050 --> 00:07:33,690
If you've ever wondered why
your browser sometimes tells you

157
00:07:33,690 --> 00:07:36,810
this fairly cryptic
number 404, that's just

158
00:07:36,810 --> 00:07:40,410
because the folks who
designed HTTP, this protocol,

159
00:07:40,410 --> 00:07:45,420
decided some time ago that the number
404, if a server sends it to a browser,

160
00:07:45,420 --> 00:07:50,100
it's like a numeric code that just says,
whatever you requested is not found.

161
00:07:50,100 --> 00:07:54,370
So I would get back that
number inside of that envelope
162
00:07:54,370 --> 00:08:00,180
if cat.jpeg did not exist on the server,
and therefore could not be found.

163
00:08:00,180 --> 00:08:03,870
Finally, perhaps the worst of
these is 500 internal server error.

164
00:08:03,870 --> 00:08:07,400
This is not your fault. So if you ever
see this, it is not something you did,

165
00:08:07,400 --> 00:08:09,330
it's something the
programmer of the web site

166
00:08:09,330 --> 00:08:14,230
did because he or she did not, in
fact, implement the website correctly.

167
00:08:14,230 --> 00:08:16,950
Now there's any number of other
responses that you might see.

168
00:08:16,950 --> 00:08:20,710
Some of them even a little
more low-level than these,

169
00:08:20,710 --> 00:08:25,620
but those in the world who are
programming, or using APIs, application

170
00:08:25,620 --> 00:08:28,960
programming interfaces, might actually
see more status codes than these.

171
00:08:28,960 --> 00:08:31,560
But these are perhaps the
most common user-facing ones

172
00:08:31,560 --> 00:08:34,590
that you and I might see
when visiting a web site.

173
00:08:34,590 --> 00:08:37,320
So what else is inside of this envelope?

174
00:08:37,320 --> 00:08:40,200
In addition to those
so-called HTTP headers,

175
00:08:40,200 --> 00:08:42,780
those numeric codes
with a few words that

176
00:08:42,780 --> 00:08:45,990
indicate exactly what the
status of this envelope is.

177
00:08:45,990 --> 00:08:49,270
What else, ideally, should
be inside of this envelope?

178
00:08:49,270 --> 00:08:51,750
Well, if it's a cat, like
cat.jpeg, it will literally

179
00:08:51,750 --> 00:08:54,201
be the bytes composing that JPEG.

180
00:08:54,201 --> 00:08:57,450
A whole bunch of zeros and ones that can
be opened in a browser, or Photoshop,

181
00:08:57,450 --> 00:08:59,520
or some other graphics program.

182
00:08:59,520 --> 00:09:02,430
But if it's a request
initially for a web page,
183
00:09:02,430 --> 00:09:07,950
like Google's home page, or
cnn.com, or your Facebook news feed,

184
00:09:07,950 --> 00:09:10,650
or even your Gmail
inbox, where you actually

185
00:09:10,650 --> 00:09:13,290
expect to see, not just
one thing, but many things.

186
00:09:13,290 --> 00:09:17,340
A lot of text, a lot of graphics,
that is, a more proper web page.

187
00:09:17,340 --> 00:09:21,840
Well, how is it that these
web server goes about fitting

188
00:09:21,840 --> 00:09:24,000
all of that information in here?

189
00:09:24,000 --> 00:09:27,750
Well, turns out, what's typically
inside of these responses,

190
00:09:27,750 --> 00:09:31,660
below the HTTP status
code, so to speak, is this.

191
00:09:31,660 --> 00:09:33,990
A language called HTML.

192
00:09:33,990 --> 00:09:38,340
And HTML, or HyperText Markup
Language, isn't a programming language,

193
00:09:38,340 --> 00:09:43,090
because it doesn't give us the ability
to command the computer to do things.

194
00:09:43,090 --> 00:09:47,520
It doesn't have what is called control
flow, like loops, and conditions,

195
00:09:47,520 --> 00:09:49,590
and variables, and other such things.

196
00:09:49,590 --> 00:09:52,530
It rather is a markup language,
in that literal sense.

197
00:09:52,530 --> 00:09:57,060
Whereby you can mark up data
information in your web page,

198
00:09:57,060 --> 00:09:59,490
and tell the browser,
really, how to display it,

199
00:09:59,490 --> 00:10:01,300
how to structure it, how to format it.

200
00:10:01,300 --> 00:10:05,140
So it's kind of like a formatting
language, not a programming language.

201
00:10:05,140 --> 00:10:07,170
And here is perhaps
the simplest web page

202
00:10:07,170 --> 00:10:09,820
that you might write in
this language called HTML.

203
00:10:09,820 --> 00:10:12,190
And even if you've
never seen this before,

204
00:10:12,190 --> 00:10:14,920
odds are your eyes can
notice some patterns.

205
00:10:14,920 --> 00:10:18,580
I see a whole bunch of angled
brackets, as they're called.

206
00:10:18,580 --> 00:10:21,580
I see a whole bunch of
closed-angled brackets.

207
00:10:21,580 --> 00:10:26,620
I see a lot of symmetry, like I see two
mentions of HTML, two mentions of head,

208
00:10:26,620 --> 00:10:30,060
two mentions of body, plus
this thing up here, as well.

209
00:10:30,060 --> 00:10:32,560
And I also see the repeated
phrase, "hello world."

210
00:10:32,560 --> 00:10:36,550
So if you want to guess, you'd
be right in thinking maybe this

211
00:10:36,550 --> 00:10:41,020
is a web page that, quite simply,
says to the user, "hello world."

212
00:10:41,020 --> 00:10:42,790
Now why, actually, is that?

213
00:10:42,790 --> 00:10:47,260
Well, it turns out that a web page does
follow this exact same standard format.

214
00:10:47,260 --> 00:10:51,850
If you want to make a website for users
or customers on the worldwide web,

215
00:10:51,850 --> 00:10:53,450
what does that mean you have to do?

216
00:10:53,450 --> 00:10:58,570
Well, you have to actually implement
the website by writing HTML like this.

217
00:10:58,570 --> 00:11:00,490
And you can use most
any program for this.

218
00:11:00,490 --> 00:11:03,291
On Windows you can use Notepad,
on Mac OS, you can use Textedit.

219
00:11:03,291 --> 00:11:05,290
But the reality is, those
programs aren't really

220
00:11:05,290 --> 00:11:06,880
designed for making web pages.

221
00:11:06,880 --> 00:11:08,860
So there's fancier programs still.

222
00:11:08,860 --> 00:11:12,760
You can use programs like
Atom or Sublime Text, which

223
00:11:12,760 --> 00:11:15,130
are more sophisticated text editors.

224
00:11:15,130 --> 00:11:18,310
And there's even more fancy programs
that even hide a lot of these details

225
00:11:18,310 --> 00:11:22,060
from you and just let you click,
and drag, and drop, and create HTML

226
00:11:22,060 --> 00:11:23,480
without actually understanding it.

227
00:11:23,480 --> 00:11:27,522
But our goal here, is to indeed
understand this underlying language.

228
00:11:27,522 --> 00:11:29,230
But at the end of the
day it's just text.

229
00:11:29,230 --> 00:11:32,110
So, so long as you have
a program, even Microsoft

230
00:11:32,110 --> 00:11:34,900
Word, can you start to make web pages.

231
00:11:34,900 --> 00:11:37,210
Now you wouldn't use
Microsoft Word, necessarily,

232
00:11:37,210 --> 00:11:39,730
since it's going to save it
typically in the wrong format,

233
00:11:39,730 --> 00:11:42,760
but the point is all you need is a
computer with a keyboard and some way

234
00:11:42,760 --> 00:11:44,350
of typing out text.

235
00:11:44,350 --> 00:11:46,660
Now let's consider what's going on here.

236
00:11:46,660 --> 00:11:47,860
Notice the symmetry.
237
00:11:47,860 --> 00:11:50,011
I start the document,
first of all, with this.

238
00:11:50,011 --> 00:11:52,510
Document type declaration, which
is just, kind of, something

239
00:11:52,510 --> 00:11:54,200
you should copy and paste for now.

240
00:11:54,200 --> 00:11:57,730
And it just indicates, hey
browser, here comes a web page

241
00:11:57,730 --> 00:12:00,730
written in HTML version 5, a.k.a.

242
00:12:00,730 --> 00:12:03,850
HTML 5, which is the latest version
of this particular language.

243
00:12:03,850 --> 00:12:07,480
Then, below that, is one of these
open brackets, as we'll call them,

244
00:12:07,480 --> 00:12:10,540
the word HTML, HyperText
Markup Language, then a space,

245
00:12:10,540 --> 00:12:12,700
then Lang equals, quote unquote, "E-N."

246
00:12:12,700 --> 00:12:13,442
what is that?

247
00:12:13,442 --> 00:12:15,400
Well, this is just an
indication to the browser
248
00:12:15,400 --> 00:12:19,000
that the language, the human
language, in which this page is

249
00:12:19,000 --> 00:12:21,100
going to be written, is
going to be E-N, which

250
00:12:21,100 --> 00:12:23,080
is the universal code for English.

251
00:12:23,080 --> 00:12:25,540
And there's two-character,
or even three-character codes

252
00:12:25,540 --> 00:12:28,180
for every spoken language in the world.

253
00:12:28,180 --> 00:12:32,320
Now here, notice, is open
bracket, head, close bracket.

254
00:12:32,320 --> 00:12:34,360
And then, what I'll call
the opposite of this,

255
00:12:34,360 --> 00:12:37,900
open bracket, slash,
head, close bracket.

256
00:12:37,900 --> 00:12:40,810
And so here's the first
instance of some symmetry.

257
00:12:40,810 --> 00:12:42,790
Let's start thinking
about this tag as meaning,

258
00:12:42,790 --> 00:12:44,690
let's open the head of my web page.

259
00:12:44,690 --> 00:12:48,160
Let's think of this tag as,
closing the head of my web page.

260
00:12:48,160 --> 00:12:50,980
Or starting and stopping, however
you want to think about it.

261
00:12:50,980 --> 00:12:54,550
But inside of the head of my web
page is apparently going to be this.

262
00:12:54,550 --> 00:12:57,150
A title, open bracket,
title, close bracket.

263
00:12:57,150 --> 00:13:00,230
Then just some words, hello
world, which could be anything.

264
00:13:00,230 --> 00:13:02,800
And then open bracket,
slash, title, close bracket.

265
00:13:02,800 --> 00:13:06,130
Which is the opposite of
that open tag for title.

266
00:13:06,130 --> 00:13:09,400
Now notice that there's this nesting
I started over here with HTML.

267
00:13:09,400 --> 00:13:12,190
Inside of and indented
inside of that his head.

268
00:13:12,190 --> 00:13:14,950
Then inside of and indented
inside of that is title.
269
00:13:14,950 --> 00:13:17,590
And then just to be
kind of neat about it,

270
00:13:17,590 --> 00:13:20,110
I put the close title tag
here on the same line.

271
00:13:20,110 --> 00:13:22,254
Turns out the browser
won't particularly care.

272
00:13:22,254 --> 00:13:25,420
But this was such a short phrase that
I felt I would just do it on one line.

273
00:13:25,420 --> 00:13:28,219
But I could have put the title on
its own line, and the close title

274
00:13:28,219 --> 00:13:29,260
on its own line, as well.

275
00:13:29,260 --> 00:13:31,970
But more on those kinds
of details in a bit.

276
00:13:31,970 --> 00:13:33,940
And then that's it for the head.

277
00:13:33,940 --> 00:13:36,910
Now I encounter the so-called
body of my page, close body.

278
00:13:36,910 --> 00:13:40,330
Inside of which is, hello world,
with this again, some indentation.

279
00:13:40,330 --> 00:13:42,710
And then lastly, close HTML.

280
00:13:42,710 --> 00:13:47,192
So notice the symmetry
happens in the opposite order

281
00:13:47,192 --> 00:13:48,400
when you're closing the tags.

282
00:13:48,400 --> 00:13:52,360
The first tag I open, so to
speak, is the last tag I closed.

283
00:13:52,360 --> 00:13:54,250
And again, notice the symmetry.

284
00:13:54,250 --> 00:13:56,750
I don't just do one after the other.

285
00:13:56,750 --> 00:13:59,650
And so I'm, indeed, going to
start calling these things tags.

286
00:13:59,650 --> 00:14:03,550
HTML is a tagged-based markup
language, where tag is generally

287
00:14:03,550 --> 00:14:05,920
open bracket, some word, close bracket.

288
00:14:05,920 --> 00:14:08,920
But sometimes these tags have
what we'll call attributes.

289
00:14:08,920 --> 00:14:14,410
Sort of configuration details that allow
us to influence the behavior of a tag.

290
00:14:14,410 --> 00:14:18,730
And this attribute, lang,
short for language, equals E-N,

291
00:14:18,730 --> 00:14:21,850
is a configuration of the body of
the page so that the browser knows.

292
00:14:21,850 --> 00:14:24,580
Or rather, the whole page
so that the browser knows,

293
00:14:24,580 --> 00:14:28,840
oh this HTML file is written in the
human language known as English.

294
00:14:28,840 --> 00:14:32,980
And so this way, Chrome, and
Firefox, and Edge, and other browsers

295
00:14:32,980 --> 00:14:35,625
don't necessarily have to
infer from any of the text

296
00:14:35,625 --> 00:14:37,000
on the page, what language it is.

297
00:14:37,000 --> 00:14:38,958
Because as you may have
noticed, browsers today

298
00:14:38,958 --> 00:14:42,250
might sometimes prompt
you to translate English

299
00:14:42,250 --> 00:14:45,240
to French, or Spanish, or
Japanese, or some other language

300
00:14:45,240 --> 00:14:48,250
if they detect that the web
page is in some other language
301
00:14:48,250 --> 00:14:49,940
that you yourself might not speak.

302
00:14:49,940 --> 00:14:54,250
So this is just making sure that the web
browser knows exactly what language you

303
00:14:54,250 --> 00:14:58,100
intend for this page to be written in.

304
00:14:58,100 --> 00:14:59,330
So that's it.

305
00:14:59,330 --> 00:15:02,890
But what is this page actually
going to look like in the end?

306
00:15:02,890 --> 00:15:06,250
Well, let me go ahead
and open up, on my Mac,

307
00:15:06,250 --> 00:15:09,926
a very simple program called TextEdit.

308
00:15:09,926 --> 00:15:13,050
And I'm going to go ahead and literally
write out this exact same web page.

309
00:15:13,050 --> 00:15:19,680
Open bracket, exclamation point,
doc type, HTML, open bracket HTML,

310
00:15:19,680 --> 00:15:21,132
lang equals English.

311
00:15:21,132 --> 00:15:24,090
And then I'm going to get ahead of
myself here, just so I don't forget.

312
00:15:24,090 --> 00:15:28,560
I'm going to do open brackets,
slash, HTML, to close that tag.

313
00:15:28,560 --> 00:15:30,750
And then I'm going to go
inside of it and do what

314
00:15:30,750 --> 00:15:33,390
I recall being the head of the page.

315
00:15:33,390 --> 00:15:37,260
And let me you go ahead and
preemptively close the head tag.

316
00:15:37,260 --> 00:15:40,530
And now in here I recall there
being a title, so, hello world.

317
00:15:40,530 --> 00:15:41,940
And now close title.

318
00:15:41,940 --> 00:15:46,642
But again, if I really wanted to, I
could put these tags on their own line,

319
00:15:46,642 --> 00:15:47,850
but it's not going to matter.

320
00:15:47,850 --> 00:15:50,770
So I'm just going to leave it
a little tighter, like that.

321
00:15:50,770 --> 00:15:52,590
Now, below the head of my page was what?

322
00:15:52,590 --> 00:15:53,590
The body.

323
00:15:53,590 --> 00:15:55,920
So I'm going to go ahead and
open the body of my page.

324
00:15:55,920 --> 00:15:58,080
Close the body of my page.

325
00:15:58,080 --> 00:16:00,150
And then just redundantly,
put, hello world,

326
00:16:00,150 --> 00:16:02,410
a sort of standard go-to message.

327
00:16:02,410 --> 00:16:06,780
So that's it, all I did was open
up a text editor on my computer,

328
00:16:06,780 --> 00:16:09,930
TextEdit on a Mac, could
be Notepad.exe on Windows,

329
00:16:09,930 --> 00:16:11,700
or any number of other programs.

330
00:16:11,700 --> 00:16:15,930
I haven't yet saved it, but the point
is that this shall be a web page.

331
00:16:15,930 --> 00:16:16,890
I just need to save it.

332
00:16:16,890 --> 00:16:19,470
So let me go ahead to file, save.

333
00:16:19,470 --> 00:16:23,490
Let me go ahead and save it onto
my desktop, for instance, as hello.

334
00:16:23,490 --> 00:16:26,970
And notice, on a Mac, at least,
TextEdit is presumptuously

335
00:16:26,970 --> 00:16:29,280
trying to save it as text
because that's all it is.

336
00:16:29,280 --> 00:16:31,830
But I'm going to go ahead
and override that to .html.

337
00:16:31,830 --> 00:16:35,820
Also common is .htm, But
more common is .html,

338
00:16:35,820 --> 00:16:38,430
and I'm going to go ahead
now and save the file.

339
00:16:38,430 --> 00:16:41,305
Now, TextEdit is going to be
a little obnoxious and say,

340
00:16:41,305 --> 00:16:43,680
you have used the extension
.html at the end of the name,

341
00:16:43,680 --> 00:16:45,990
the standard extension is .txt.

342
00:16:45,990 --> 00:16:48,512
Well, here's where, after
taking a course like this,

343
00:16:48,512 --> 00:16:50,220
you should know better
than the computer.

344
00:16:50,220 --> 00:16:52,680
And even though Apple's
trying to help coax you
345
00:16:52,680 --> 00:16:57,030
toward a more common solution,
nope, we want to use HTML.

346
00:16:57,030 --> 00:17:00,139
Now odds are, Notepad on Windows
won't prompt you in the same way.

347
00:17:00,139 --> 00:17:02,430
But the point is that you
understand better, hopefully,

348
00:17:02,430 --> 00:17:04,822
now what it is we're trying to do.

349
00:17:04,822 --> 00:17:06,780
Because you do want to
save this is a web page.

350
00:17:06,780 --> 00:17:10,440
And it turns out that the standard
file extension to use for a web page is

351
00:17:10,440 --> 00:17:13,410
indeed going to be .html.

352
00:17:13,410 --> 00:17:15,900
And now, all I'm going
to go do is take a look

353
00:17:15,900 --> 00:17:17,730
at my desktop, where I save this file.

354
00:17:17,730 --> 00:17:20,511
And indeed there is a
file called, hello.html.

355
00:17:20,511 --> 00:17:22,260
I'm going to go ahead
and double-click it.
356
00:17:22,260 --> 00:17:27,089
And, voila, the most uninteresting
web page you can imagine.

357
00:17:27,089 --> 00:17:30,610
In fact, let's zoom in on this just
so we can see exactly what's going on.

358
00:17:30,610 --> 00:17:32,250
And there's a few things of note.

359
00:17:32,250 --> 00:17:36,480
So one, notice in the top
corner of my browser's tab

360
00:17:36,480 --> 00:17:38,589
is apparently the title of the web page.

361
00:17:38,589 --> 00:17:40,380
So this is how you can
think of a web page.

362
00:17:40,380 --> 00:17:43,270
It has both the head, which
is the very top of the page,

363
00:17:43,270 --> 00:17:47,160
and then a body, which is like 99%
of the contents of a page, typically.

364
00:17:47,160 --> 00:17:49,590
So the head really is just
this top part, potentially.

365
00:17:49,590 --> 00:17:52,080
Which minimally, for
now, just has a title.

366
00:17:52,080 --> 00:17:54,840
The body of the web page,
meanwhile, is down here.

367
00:17:54,840 --> 00:17:57,640
And that is where all of my
content is ultimately going to go.

368
00:17:57,640 --> 00:17:59,910
But for now, my only
content is, hello world.

369
00:17:59,910 --> 00:18:02,250
Now up here, you see
kind of a funky URL.

370
00:18:02,250 --> 00:18:06,150
It doesn't start with HTTP
or HTTPS because I've not yet

371
00:18:06,150 --> 00:18:09,810
put this file on a server, like
the servers we saw earlier.

372
00:18:09,810 --> 00:18:13,830
Rather, this file literally
lives on my own laptop's desktop.

373
00:18:13,830 --> 00:18:16,620
And so it's in my users
folder, J Harvard folder,

374
00:18:16,620 --> 00:18:18,480
which is my username right now.

375
00:18:18,480 --> 00:18:21,540
And it's desktop, and the
file was called hello.html.

376
00:18:21,540 --> 00:18:25,296
And curiously, the URL
starts with file:///,
377
00:18:25,296 --> 00:18:28,570
which indicates that the file
is indeed local to my computer.

378
00:18:28,570 --> 00:18:30,180
So I've made a web page, yes.

379
00:18:30,180 --> 00:18:33,940
But I haven't put it on a web server.

380
00:18:33,940 --> 00:18:37,140
So no one else on the internet
could actually access this web page

381
00:18:37,140 --> 00:18:40,930
unless they physically walk over to
my Mac here, and pull up this file.

382
00:18:40,930 --> 00:18:45,750
But that's OK, because there do
exist web hosts, as they're called,

383
00:18:45,750 --> 00:18:47,430
and we can certainly go if we want.

384
00:18:47,430 --> 00:18:49,470
And buy our own domain name, ultimately.

385
00:18:49,470 --> 00:18:54,120
And drag and drop these files into
some server elsewhere in the world.

386
00:18:54,120 --> 00:18:57,960
But for now, we'll focus on just
web development on a local computer,

387
00:18:57,960 --> 00:19:00,720
and actually writing the
code that drives them.
388
00:19:00,720 --> 00:19:02,640
So that's the simplest of web pages.

389
00:19:02,640 --> 00:19:06,420
So up until now we've been using
TextEdit, a super simple text

390
00:19:06,420 --> 00:19:08,250
editor for actually writing HTML.

391
00:19:08,250 --> 00:19:11,190
But it's not all that designed
for writing web pages.

392
00:19:11,190 --> 00:19:13,500
And indeed, as we saw when
we tried to save the file,

393
00:19:13,500 --> 00:19:15,990
it also didn't really understand
what it was we're trying to do.

394
00:19:15,990 --> 00:19:18,573
Well, turns out there's better
software out there, still free,

395
00:19:18,573 --> 00:19:21,660
that you can download on a Mac, or
a PC, or other operating systems.

396
00:19:21,660 --> 00:19:25,960
And one such text editor, as these
things are called, is called Atom.

397
00:19:25,960 --> 00:19:28,320
And in fact, if I go
ahead and open up Atom,

398
00:19:28,320 --> 00:19:30,930
after having downloaded it,
and installed it on my Mac,

399
00:19:30,930 --> 00:19:33,120
I'll actually see an
interface quite like this,

400
00:19:33,120 --> 00:19:35,610
that's a little more colorful,
certainly, at first glance.

401
00:19:35,610 --> 00:19:39,300
And it also allows me to open multiple
files at once along the left hand

402
00:19:39,300 --> 00:19:40,080
side, here.

403
00:19:40,080 --> 00:19:42,900
In fact, for today I've
prepared a number of examples

404
00:19:42,900 --> 00:19:45,390
in advance, sort of Julia-Child-style.

405
00:19:45,390 --> 00:19:49,920
And indeed, here is
hello.html, prewritten by me

406
00:19:49,920 --> 00:19:53,350
and opened in this other
program called [? Adam. ?]

407
00:19:53,350 --> 00:19:55,320
Now there's only one
other change I made to it,

408
00:19:55,320 --> 00:19:58,236
but you'll see the color is the most
glaring difference at the moment.
409
00:19:58,236 --> 00:19:59,760
But this isn't in the file, itself.

410
00:19:59,760 --> 00:20:02,730
And indeed, if I open this
hello.html in my browser,

411
00:20:02,730 --> 00:20:04,380
I wouldn't see any of these colors.

412
00:20:04,380 --> 00:20:06,570
The colors are just
here for me, the human,

413
00:20:06,570 --> 00:20:10,970
to better distinguish different
features of this file from others.

414
00:20:10,970 --> 00:20:13,340
So for instance, all my
tags, and angled brackets

415
00:20:13,340 --> 00:20:16,730
are apparently being displayed by
Atom, just on its own, in blue.

416
00:20:16,730 --> 00:20:19,340
All of my text, like hello
world and hello world,

417
00:20:19,340 --> 00:20:20,900
are being displayed in gray.

418
00:20:20,900 --> 00:20:25,405
And then in big green color,
are my attributes values,

419
00:20:25,405 --> 00:20:27,470
so that they really jump out at me.
420
00:20:27,470 --> 00:20:29,420
And now, there's one
other detail in this file

421
00:20:29,420 --> 00:20:31,640
that I didn't type up a moment ago.

422
00:20:31,640 --> 00:20:33,920
And that's these lines here, up top.

423
00:20:33,920 --> 00:20:36,350
Well, turns out that
HTML supports not just

424
00:20:36,350 --> 00:20:38,850
tags that we've been using
to structure the page,

425
00:20:38,850 --> 00:20:40,670
it also supports what
are called comments.

426
00:20:40,670 --> 00:20:44,180
And if you write open bracket,
exclamation point, dash, dash,

427
00:20:44,180 --> 00:20:45,186
and then some words.

428
00:20:45,186 --> 00:20:47,810
And then the opposite of that,
which isn't really the opposite,

429
00:20:47,810 --> 00:20:51,560
because we're missing the exclamation
point, but dash, dash, angle bracket.

430
00:20:51,560 --> 00:20:55,280
You can actually put in your
web page a comment like this,
431
00:20:55,280 --> 00:20:57,510
says hello to the world wide web.

432
00:20:57,510 --> 00:20:59,510
And this is really just
meant for you, later on,

433
00:20:59,510 --> 00:21:03,110
if you forget what this file's for,
there is a sentence reminding you.

434
00:21:03,110 --> 00:21:06,230
But more commonly is it used
for colleagues you might have,

435
00:21:06,230 --> 00:21:09,470
or other people who might look
at your code, your HTML code,

436
00:21:09,470 --> 00:21:12,620
so that they, too, know what you
intend for this web page to do,

437
00:21:12,620 --> 00:21:17,430
without their having to read through
all of the actual code, itself.

438
00:21:17,430 --> 00:21:20,660
So this file would open up
identically in a browser,

439
00:21:20,660 --> 00:21:24,230
but of course it doesn't
really do anything of interest.

440
00:21:24,230 --> 00:21:26,000
All it does is display, hello world.

441
00:21:26,000 --> 00:21:31,190
And the whole web is about linking,
and clicking, and nowadays dragging,

442
00:21:31,190 --> 00:21:33,810
and going all over the world wide web.

443
00:21:33,810 --> 00:21:37,370
How do we take a step toward
that kind of dynamism?

444
00:21:37,370 --> 00:21:39,860
Well, let me go ahead and do this.

445
00:21:39,860 --> 00:21:42,750
Let me go ahead and create a new file.

446
00:21:42,750 --> 00:21:46,370
And as before, I'm going to start
this file with doc type HTML,

447
00:21:46,370 --> 00:21:50,870
open bracket HTML, close HTML.

448
00:21:50,870 --> 00:21:56,350
Let me have the head of the web page,
and then close the head of my web page.

449
00:21:56,350 --> 00:22:00,220
And then my title, which this time--
and notice among Atom's features,

450
00:22:00,220 --> 00:22:03,237
like a lot of text editors
like it, is to actually try

451
00:22:03,237 --> 00:22:04,570
to help you finish your thought.

452
00:22:04,570 --> 00:22:07,630
And here it's prompting me, do
you mean title, and indeed yes,

453
00:22:07,630 --> 00:22:10,780
and I can let it auto complete a
lot of the words I'm going to type.

454
00:22:10,780 --> 00:22:14,200
But for now I'm going to do
Hello comma world, close title.

455
00:22:14,200 --> 00:22:16,210
And indeed let it finish
my thought for me.

456
00:22:16,210 --> 00:22:20,230
Now down here, recall, is
the body of my web page.

457
00:22:20,230 --> 00:22:24,040
And I'm going to go ahead and
close the body of my web page.

458
00:22:24,040 --> 00:22:26,920
And a moment ago, recall,
we had, hello world.

459
00:22:26,920 --> 00:22:29,680
But this shall be our first
example involving links.

460
00:22:29,680 --> 00:22:31,000
So I'm going to re-title this.

461
00:22:31,000 --> 00:22:32,460
I don't want this page
to say, hello world.

462
00:22:32,460 --> 00:22:34,126
I want it to, quite simply, to say link.

463
00:22:34,126 --> 00:22:36,430
Not all that interesting
but the interesting part,

464
00:22:36,430 --> 00:22:37,720
going to be down here.

465
00:22:37,720 --> 00:22:41,500
Suppose that I'm making a web page,
maybe for Harvard, for their home page.

466
00:22:41,500 --> 00:22:44,650
And I want to invite the users
to visit Harvard on the web.

467
00:22:44,650 --> 00:22:50,910
I might say something like,
visit Harvard on the web, period.

468
00:22:50,910 --> 00:22:53,730
Now, of course this is not all
that interesting, because, indeed,

469
00:22:53,730 --> 00:22:59,270
if I open this file in a
browser, I will just see this,

470
00:22:59,270 --> 00:23:00,945
visit Harvard on the web.

471
00:23:00,945 --> 00:23:04,070
And that is not all that interesting,
because what's your user going to do?

472
00:23:04,070 --> 00:23:07,070
Odds are he or she, now, is going to
open up Google, search for Harvard,

473
00:23:07,070 --> 00:23:08,520
and pull up Harvard on the web.
474
00:23:08,520 --> 00:23:10,677
But what if we can help
lead our user there.

475
00:23:10,677 --> 00:23:12,510
So let me actually go
ahead and change this.

476
00:23:12,510 --> 00:23:13,940
Let me open up Atom again.

477
00:23:13,940 --> 00:23:20,070
And let me go ahead and change this
to just say, how about Visit Harvard.

478
00:23:20,070 --> 00:23:24,060
And how do I make Harvard a
link to some other destination?

479
00:23:24,060 --> 00:23:28,400
Well, turns out there are
other tags besides these.

480
00:23:28,400 --> 00:23:33,110
There's the anchor tag,
abbreviated a, and that tag

481
00:23:33,110 --> 00:23:36,840
will actually create a link for us that
looks a little something like this.

482
00:23:36,840 --> 00:23:40,700
So start anchor tag, close anchor
or tag, again abbreviate as just, a.

483
00:23:40,700 --> 00:23:43,619
If I go back to the browser, I
don't see any difference yet.

484
00:23:43,619 --> 00:23:45,410
Indeed, it's still just
says, visit Harvard

485
00:23:45,410 --> 00:23:47,780
the web, but that's because
I've changed and save the file,

486
00:23:47,780 --> 00:23:49,190
but I've not reloaded the browser.

487
00:23:49,190 --> 00:23:51,856
So if I go ahead in Chrome here,
and click reload in any browser

488
00:23:51,856 --> 00:23:54,710
that you might use, similarly
has a reload button, somewhere.

489
00:23:54,710 --> 00:23:55,940
And click, reload.

490
00:23:55,940 --> 00:23:59,540
Indeed, the page has now
changed to match my text file.

491
00:23:59,540 --> 00:24:01,340
But it's still not a link.

492
00:24:01,340 --> 00:24:04,430
And so even though I've
said, put an anchor here,

493
00:24:04,430 --> 00:24:07,760
I actually need to tell the browser
where to anchor this text to.

494
00:24:07,760 --> 00:24:10,850
So it turns out, and you would
only know this from a class,

495
00:24:10,850 --> 00:24:12,790
or reading a book, or
some online reference,

496
00:24:12,790 --> 00:24:16,190
that the anchor tag takes a
whole bunch of attributes.

497
00:24:16,190 --> 00:24:19,325
And, indeed, Atom is trying to
complete my thought here for me.

498
00:24:19,325 --> 00:24:21,200
And I'm actually going
to go ahead and choose

499
00:24:21,200 --> 00:24:24,950
the second of the suggestions,
href, for hyper- reference.

500
00:24:24,950 --> 00:24:28,100
And I'm going to go ahead and
specify this equals, quote unquote,

501
00:24:28,100 --> 00:24:35,630
"http://www.harvard.edu/, Save.

502
00:24:35,630 --> 00:24:38,070
So, now notice, I still have a tag.

503
00:24:38,070 --> 00:24:39,920
It's opened and it's closed.

504
00:24:39,920 --> 00:24:42,600
And, indeed, it has an
attribute now, just as before.

505
00:24:42,600 --> 00:24:44,510
So just for good measure,
let me go ahead now
506
00:24:44,510 --> 00:24:47,632
and make sure the world knows this
is an English version of my page.

507
00:24:47,632 --> 00:24:49,340
So now I have two
attributes on the page.

508
00:24:49,340 --> 00:24:51,980
The first of which modifies the
HTML tag, the second of which

509
00:24:51,980 --> 00:24:53,990
modifies the anchor tag.

510
00:24:53,990 --> 00:24:58,820
And now, this attribute has a hyper
reference, which is an actual URL.

511
00:24:58,820 --> 00:25:02,650
And if I go and reload the browser, now.

512
00:25:02,650 --> 00:25:07,930
Notice the, perhaps familiar,
if dated, blue text that's also

513
00:25:07,930 --> 00:25:10,300
underlined, thereby
signifying, visually,

514
00:25:10,300 --> 00:25:13,166
that this is now a link
to some other page.

515
00:25:13,166 --> 00:25:15,790
And sure enough, and this is
going to be a little small to see,

516
00:25:15,790 --> 00:25:20,750
if I hover over this with my
cursor, notice way down here.

517
00:25:20,750 --> 00:25:23,830
Do you see in your browser's
left-hand corner, most likely,

518
00:25:23,830 --> 00:25:27,160
whether it's Chrome or any
other, the destination URL, that

519
00:25:27,160 --> 00:25:29,380
clicking this link will lead you to.

520
00:25:29,380 --> 00:25:30,460
Let's try it.

521
00:25:30,460 --> 00:25:34,090
Three, two, one, click.

522
00:25:34,090 --> 00:25:35,140
And voila!

523
00:25:35,140 --> 00:25:37,090
I'm now at Harvard's home page.

524
00:25:37,090 --> 00:25:40,270
And indeed, the URL has
changed to be exactly that.

525
00:25:40,270 --> 00:25:42,800
Of course, if I hit back,
I go back to where I was.

526
00:25:42,800 --> 00:25:46,300
But I now have a web page,
that's still not on the internet,

527
00:25:46,300 --> 00:25:48,280
it's still living only
on my own Mac, here.
528
00:25:48,280 --> 00:25:52,480
But that doesn't mean we can't link
to websites on the actual internet,

529
00:25:52,480 --> 00:25:54,200
just as we did.

530
00:25:54,200 --> 00:25:56,320
But what's going on here?

531
00:25:56,320 --> 00:25:57,494
It became purple.

532
00:25:57,494 --> 00:25:58,660
That seems a little strange.

533
00:25:58,660 --> 00:25:59,868
It was blue, now it's purple.

534
00:25:59,868 --> 00:26:00,770
What does that mean?

535
00:26:00,770 --> 00:26:02,478
Well, this is a common
default convention

536
00:26:02,478 --> 00:26:05,067
by browsers to just
indicate to you, the human,

537
00:26:05,067 --> 00:26:06,650
that you've already visited this link.

538
00:26:06,650 --> 00:26:09,520
So especially early on in the
web, when pages might just

539
00:26:09,520 --> 00:26:11,596
be formatted with bunches
and bunches of links,

540
00:26:11,596 --> 00:26:13,720
can get pretty tedious,
and pretty hard to remember

541
00:26:13,720 --> 00:26:15,320
which ones have you visited.

542
00:26:15,320 --> 00:26:18,100
So search engines these days,
and even our own little web site,

543
00:26:18,100 --> 00:26:20,440
might change the color of
links to indicate, visually

544
00:26:20,440 --> 00:26:22,510
to you, which ones you've actually seen.

545
00:26:22,510 --> 00:26:26,200
And it's the browser that's
keeping track of those clicks.

546
00:26:26,200 --> 00:26:29,650
So as an aside, there's an interesting
privacy implication there, right.

547
00:26:29,650 --> 00:26:32,530
The browser is now keeping
track of what links you visited,

548
00:26:32,530 --> 00:26:34,390
just so we can make them purple.

549
00:26:34,390 --> 00:26:36,130
That means some other
human, potentially,

550
00:26:36,130 --> 00:26:37,610
can come sit down at your computer.

551
00:26:37,610 --> 00:26:41,890
And if you've not cleared your cache,
so to speak, and reset your browser,

552
00:26:41,890 --> 00:26:44,170
odds are, realize, some
of that information

553
00:26:44,170 --> 00:26:46,990
might still be accessible, as well.

554
00:26:46,990 --> 00:26:48,580
Let's open another example.

555
00:26:48,580 --> 00:26:52,150
And rather than type this
one out from scratch,

556
00:26:52,150 --> 00:26:57,550
let me go ahead and just open
up image.html, An example I've

557
00:26:57,550 --> 00:26:59,710
put together here, in advance.

558
00:26:59,710 --> 00:27:02,740
Now, notice at the top there's kind
of a spoiler, this is Grumpy Cat.

559
00:27:02,740 --> 00:27:05,980
And more academically,
this demonstrates images.

560
00:27:05,980 --> 00:27:10,030
So indeed, the web is filled with images
on web pages, not just text, certainly.

561
00:27:10,030 --> 00:27:12,550
So what do you notice
that's different here?

562
00:27:12,550 --> 00:27:14,260
With this example.

563
00:27:14,260 --> 00:27:16,990
The comment up top is
certainly different.

564
00:27:16,990 --> 00:27:19,360
But the HTML tag seems the
same, the head is the same.

565
00:27:19,360 --> 00:27:21,568
The title is a little
different, it just says, image,

566
00:27:21,568 --> 00:27:23,420
but that's not really that interesting.

567
00:27:23,420 --> 00:27:26,200
But there's two new things in the body.

568
00:27:26,200 --> 00:27:29,050
One appears in dark gray,
to be an other comment.

569
00:27:29,050 --> 00:27:32,320
And that's just my attribution, so
that I and the rest of the world

570
00:27:32,320 --> 00:27:35,920
knows my citation, for where I
got what you're about to see.

571
00:27:35,920 --> 00:27:41,110
And now notice below that, this
image tag, open bracket, IMG.
572
00:27:41,110 --> 00:27:44,590
So again, the authors of the web
were pretty succinct, early on.

573
00:27:44,590 --> 00:27:48,340
So just like we have a for
anchor, we have IMG for image.

574
00:27:48,340 --> 00:27:51,550
You don't want to spell the whole thing
out, but you can still say, image.

575
00:27:51,550 --> 00:27:56,020
Open bracket, image, Alt equals Grumpy
Cat-- more on that in a moment--

576
00:27:56,020 --> 00:27:58,570
source equals cat.jpeg.

577
00:27:58,570 --> 00:28:00,460
And then notice this curiosity--

578
00:28:00,460 --> 00:28:03,100
slash, close bracket.

579
00:28:03,100 --> 00:28:06,400
So whereas every other tag we've
seen so far has an open bracket,

580
00:28:06,400 --> 00:28:10,990
some word, close bracket, then some
stuff, then open bracket, slash,

581
00:28:10,990 --> 00:28:13,180
that same word, close bracket.

582
00:28:13,180 --> 00:28:16,000
This image tag seems to
be empty, in some sense.
583
00:28:16,000 --> 00:28:19,990
It just has a start tag, but it kind of,
sort of, has an end tag inside of it,

584
00:28:19,990 --> 00:28:20,740
all in one.

585
00:28:20,740 --> 00:28:22,360
And this is actually deliberate.

586
00:28:22,360 --> 00:28:26,770
Because unlike head, and title, and
body, which have the semantics of,

587
00:28:26,770 --> 00:28:30,130
hey browser, here comes my
page's head; hey browser,

588
00:28:30,130 --> 00:28:33,850
here comes my page's title; hey
browser, here comes my page's body.

589
00:28:33,850 --> 00:28:36,539
All of which can eventually stop.

590
00:28:36,539 --> 00:28:38,080
Hey browser, that's it for the title.

591
00:28:38,080 --> 00:28:39,580
Hey browser, that's it for the head.

592
00:28:39,580 --> 00:28:41,950
Hey browser, that's it for
the body of my web page.

593
00:28:41,950 --> 00:28:44,500
Images are kind of there, or not there.

594
00:28:44,500 --> 00:28:47,910
It's not like you can say, hey
browser, here comes an image.

595
00:28:47,910 --> 00:28:51,510
It's just going to be there
all at once, or not at all.

596
00:28:51,510 --> 00:28:53,920
There's no notion, really,
of starting and stopping,

597
00:28:53,920 --> 00:28:55,480
as there is with these other tags.

598
00:28:55,480 --> 00:28:58,210
Which might contain multiple
pieces of information,

599
00:28:58,210 --> 00:29:00,610
or multiple words, or
multiple characters.

600
00:29:00,610 --> 00:29:04,240
So we're going to go ahead and, just
for good measure, close that image tag.

601
00:29:04,240 --> 00:29:06,010
Even though it's not strictly necessary.

602
00:29:06,010 --> 00:29:09,820
By putting the slash
inside of the open tag.

603
00:29:09,820 --> 00:29:13,210
Now you can perhaps guess that
this is going to embed, ultimately,

604
00:29:13,210 --> 00:29:15,970
a cat whose file name is cat.jpeg.

605
00:29:15,970 --> 00:29:19,360
And that happens to be a file that I
downloaded in advance from this URL,

606
00:29:19,360 --> 00:29:23,260
here and then put it in the
same folder as this file,

607
00:29:23,260 --> 00:29:26,500
image.html, just by
dragging it on my hard drive

608
00:29:26,500 --> 00:29:28,030
to where I intend for it to be.

609
00:29:28,030 --> 00:29:32,750
In HTML, I'm specifying, now,
that the source of this image src,

610
00:29:32,750 --> 00:29:37,110
short for source, is going to
be that file name, cat.jpeg.

611
00:29:37,110 --> 00:29:40,960
If that cat lived elsewhere, I could
put the name of the folder it's in,

612
00:29:40,960 --> 00:29:42,100
or folders that it's in.

613
00:29:42,100 --> 00:29:45,730
If it's on the web itself, I
could put http:// something,

614
00:29:45,730 --> 00:29:47,230
and actually give a full path to it.

615
00:29:47,230 --> 00:29:50,000
But I made a copy of this
cat, put it in my same folder.
616
00:29:50,000 --> 00:29:52,060
So I can just describe it by its name.

617
00:29:52,060 --> 00:29:55,029
Alt, meanwhile, is a good
thing for accessibility.

618
00:29:55,029 --> 00:29:57,820
Because for folks who might be
visiting a web page can't physically

619
00:29:57,820 --> 00:30:00,970
see the cat for lack of
sight, they can at least,

620
00:30:00,970 --> 00:30:03,410
using technology like screen
readers, which will actually

621
00:30:03,410 --> 00:30:05,190
read to them the words on the page.

622
00:30:05,190 --> 00:30:07,190
We can describe to them
an alternative version

623
00:30:07,190 --> 00:30:10,850
of this image, that is literally
Grumpy Cat, so that that software can

624
00:30:10,850 --> 00:30:12,920
recite to them, verbally, Grumpy Cat.

625
00:30:12,920 --> 00:30:15,470
So that, even though they,
too, will be disappointed

626
00:30:15,470 --> 00:30:18,650
in what they're seeing upon
visiting my super simple page,
627
00:30:18,650 --> 00:30:22,430
they'll at least know what is there,
based on that alternative text.

628
00:30:22,430 --> 00:30:25,010
So we can have both
side by side, so that we

629
00:30:25,010 --> 00:30:27,830
know what it is we're embedding here.

630
00:30:27,830 --> 00:30:30,620
So, spoiler, let's take
a look at a Grumpy Cat.

631
00:30:30,620 --> 00:30:35,360
Let me go ahead into my
folder, open up image.html.

632
00:30:35,360 --> 00:30:40,040
And voila, there is a very
Grumpy Cat, staring back

633
00:30:40,040 --> 00:30:43,070
at probably very disappointed humans.

634
00:30:43,070 --> 00:30:45,590
All right, so we've
seen now a whole bunch

635
00:30:45,590 --> 00:30:49,860
of basic tags, like body, and HTML,
and head, and title, and so forth.

636
00:30:49,860 --> 00:30:54,750
We've seen a for anchor, and we've
seen image, or IMG, for images as well.

637
00:30:54,750 --> 00:30:57,130
Both of which have some
requisite attributes.

638
00:30:57,130 --> 00:30:59,120
What else can we do in HTML?

639
00:30:59,120 --> 00:31:01,500
Let's go ahead and look
at this example, here--

640
00:31:01,500 --> 00:31:05,300
paragraphs.html-- which has a whole
bunch of seemingly [INAUDIBLE]

641
00:31:05,300 --> 00:31:06,800
text that I just whipped up.

642
00:31:06,800 --> 00:31:09,890
And notice I've got three paragraphs
of text, all three of which

643
00:31:09,890 --> 00:31:10,700
are pretty long.

644
00:31:10,700 --> 00:31:13,640
And so just like a book, I've
formatted things pretty nicely

645
00:31:13,640 --> 00:31:15,800
by hitting Enter a couple
of times, and indenting.

646
00:31:15,800 --> 00:31:18,330
So that it kind of reads
like a chapter in a book.

647
00:31:18,330 --> 00:31:20,780
So again, this is paragraphs.html.

648
00:31:20,780 --> 00:31:26,390
but when I open this page, I actually
get this really long chunk of text.

649
00:31:26,390 --> 00:31:30,474
And in fact, given that it's in
Latin, or fake Latin-like text here,

650
00:31:30,474 --> 00:31:33,140
it's actually not clear where the
paragraphs are supposed to be.

651
00:31:33,140 --> 00:31:35,480
But I do know they're
supposed to be three.

652
00:31:35,480 --> 00:31:38,090
And yet this is just
one big glob of text

653
00:31:38,090 --> 00:31:40,940
with no line breaks actually in there.

654
00:31:40,940 --> 00:31:42,290
So a sanity check.

655
00:31:42,290 --> 00:31:45,110
It turns out that most any browser
allows you to view its source

656
00:31:45,110 --> 00:31:46,394
code in the browser, itself.

657
00:31:46,394 --> 00:31:47,810
You don't even need a text editor.

658
00:31:47,810 --> 00:31:50,226
You can't change it this way,
but you can at least see it.

659
00:31:50,226 --> 00:31:54,200
So generally, you can right click
or control click on a web page.

660
00:31:54,200 --> 00:31:56,660
And choose something like,
view page source, which

661
00:31:56,660 --> 00:31:58,310
is going to show you the actual HTML.

662
00:31:58,310 --> 00:31:59,520
So let's do that.

663
00:31:59,520 --> 00:32:03,440
And sure enough, here is Chrome showing
me the source code for this web page.

664
00:32:03,440 --> 00:32:06,650
And you can see the nice
indentation and the line breaks.

665
00:32:06,650 --> 00:32:10,460
The fact that I have these gaps between
lines here, actually in the file.

666
00:32:10,460 --> 00:32:14,420
And yet, if we look back into the
browsers actual rendering of the page,

667
00:32:14,420 --> 00:32:16,830
all of those line breaks
are being ignored.

668
00:32:16,830 --> 00:32:18,560
So what's going on?

669
00:32:18,560 --> 00:32:21,800
Well, HTML is a pretty literal language.

670
00:32:21,800 --> 00:32:25,280
It is only going to do
what you tell it to do.

671
00:32:25,280 --> 00:32:30,470
Or really, the browser is only going
to do what HTML tells it to do.

672
00:32:30,470 --> 00:32:33,421
So if I've not said, hey
browser, put a paragraph here,

673
00:32:33,421 --> 00:32:35,170
it's not going to
really know what I want.

674
00:32:35,170 --> 00:32:37,670
Because indeed, we've seen
this convention of humans,

675
00:32:37,670 --> 00:32:40,340
like me, having a lot
of carriage returns,

676
00:32:40,340 --> 00:32:43,220
or new lines and files,
or a lot of indentation.

677
00:32:43,220 --> 00:32:47,210
Really, just to keep the page pretty
printed, as I said, nicely formatted.

678
00:32:47,210 --> 00:32:48,710
So it's very human readable.

679
00:32:48,710 --> 00:32:51,380
But computers don't care how
neat your code actually is.

680
00:32:51,380 --> 00:32:53,810
They just need to know top
to bottom, left or right,
681
00:32:53,810 --> 00:32:55,130
what it is they need to do.

682
00:32:55,130 --> 00:32:56,720
Hey browser, here comes web page.

683
00:32:56,720 --> 00:32:57,620
Hey browser, here comes the head.

684
00:32:57,620 --> 00:32:59,090
Hey browser, here comes the title.

685
00:32:59,090 --> 00:33:03,410
They just need these instructions, or
commands, in the form of HTML tags.

686
00:33:03,410 --> 00:33:08,210
So it turns out, that there
are actually tags and HTML that

687
00:33:08,210 --> 00:33:11,060
allow us to address this problem.

688
00:33:11,060 --> 00:33:13,400
We need to be more
explicit with the browser.

689
00:33:13,400 --> 00:33:16,640
And so indeed, what I'm going
to go ahead and do here is open

690
00:33:16,640 --> 00:33:20,120
a paragraph tag, open bracket, p.

691
00:33:20,120 --> 00:33:21,260
And indent that.

692
00:33:21,260 --> 00:33:24,920
And then I'm going to go ahead and
close the paragraph, thereby signifying,

693
00:33:24,920 --> 00:33:26,480
that's it, browser for the paragraph.

694
00:33:26,480 --> 00:33:28,563
Then I'm going to go ahead
and put in another one,

695
00:33:28,563 --> 00:33:30,470
and indent that block
of code inside of it.

696
00:33:30,470 --> 00:33:31,804
Really just to keep things neat.

697
00:33:31,804 --> 00:33:33,886
And then I'm going to go
ahead and close this one.

698
00:33:33,886 --> 00:33:35,950
Then I'm going to go
ahead and open one more.

699
00:33:35,950 --> 00:33:38,210
Indent this final paragraph.

700
00:33:38,210 --> 00:33:40,670
And then down here, I'm going
to go ahead and close this.

701
00:33:40,670 --> 00:33:44,250
And so even though the contents
of the page haven't changed.

702
00:33:44,250 --> 00:33:46,490
I still just have those
exact, three paragraphs.

703
00:33:46,490 --> 00:33:48,990
And I still have some
visual space between them.

704
00:33:48,990 --> 00:33:52,160
Now I have a more emphatic,
semantic, command,

705
00:33:52,160 --> 00:33:56,000
in the form of these p tags saying,
hey browser, start a paragraph,

706
00:33:56,000 --> 00:33:56,870
end a paragraph.

707
00:33:56,870 --> 00:34:00,900
Hey browser, start a new paragraph,
end the paragraph, and so forth.

708
00:34:00,900 --> 00:34:05,060
So if I now go back to my browser,
and reload this same page,

709
00:34:05,060 --> 00:34:08,719
now I get the three paragraphs
that I actually intend.

710
00:34:08,719 --> 00:34:12,230
So on the one hand, HTML is very
tolerant of whitespace, and tabs,

711
00:34:12,230 --> 00:34:13,580
and character--

712
00:34:13,580 --> 00:34:16,190
tab characters, and
the like because that

713
00:34:16,190 --> 00:34:17,947
lends itself to readability of code.
714
00:34:17,947 --> 00:34:20,030
But, of course, it complicates
things in the sense

715
00:34:20,030 --> 00:34:23,659
that we have to be ever more careful
to be super explicit with the browser,

716
00:34:23,659 --> 00:34:25,949
to tell it what we want it to do.

717
00:34:25,949 --> 00:34:27,170
Now what about formatting?

718
00:34:27,170 --> 00:34:30,486
I mean, my god, this page is still no
more interesting than it was before.

719
00:34:30,486 --> 00:34:32,360
Well, let me go ahead
and open up an example.

720
00:34:32,360 --> 00:34:34,526
I did make in advance, as
well called headings.html.

721
00:34:34,526 --> 00:34:38,239
Dot This one doesn't have quite as
many words, but it does have more tags.

722
00:34:38,239 --> 00:34:42,110
It has an H1 tag, an H2
tag, H3, H4, H5 and H6,

723
00:34:42,110 --> 00:34:44,519
which is heading 1 through heading 6.

724
00:34:44,519 --> 00:34:46,310
Now, it turns out
browsers, years ago, just
725
00:34:46,310 --> 00:34:49,730
decided that they would have
some standard tags for headings.

726
00:34:49,730 --> 00:34:55,190
Like the chapters in a page, or the
sections in a book, or the subsections,

727
00:34:55,190 --> 00:34:56,389
or the sub subsections.

728
00:34:56,389 --> 00:34:59,130
Each of which is generally still
prominent, and kind of bold,

729
00:34:59,130 --> 00:35:01,940
typically, by default. But gets a
little smaller, a little smaller,

730
00:35:01,940 --> 00:35:02,940
and a little smaller.

731
00:35:02,940 --> 00:35:06,480
And so indeed, just to give you a sense
of what these things look like, here.

732
00:35:06,480 --> 00:35:10,470
Let me go ahead and open this
up in a browser, Headings.html,

733
00:35:10,470 --> 00:35:14,670
and sure enough, 1, 2, 3, 4, 5, 6.

734
00:35:14,670 --> 00:35:17,856
It's still bold, and you still
see all six of the words,

735
00:35:17,856 --> 00:35:19,230
but they get smaller and smaller.
736
00:35:19,230 --> 00:35:21,730
The idea being, that these
are generally going to headers

737
00:35:21,730 --> 00:35:25,420
atop of text, in like a book,
or chapters, or the like.

738
00:35:25,420 --> 00:35:27,660
So we have those, now, in our tool kit.

739
00:35:27,660 --> 00:35:29,220
Well, what else can we do?

740
00:35:29,220 --> 00:35:32,330
It turns out, if I
open up the list.html,

741
00:35:32,330 --> 00:35:35,260
the browsers also
support automated lists.

742
00:35:35,260 --> 00:35:38,820
So if I want an on unordered
list, with just a whole bunch

743
00:35:38,820 --> 00:35:43,320
of bullets, as is convention, I
can open up UL, close brackets.

744
00:35:43,320 --> 00:35:47,070
And then I can have a whole bunch of
list items, or LI tags, list item.

745
00:35:47,070 --> 00:35:50,450
Foo, bar and baz, where foo,
bar, and baz are just silly words

746
00:35:50,450 --> 00:35:53,850
that computer scientists tend to use
when they need just a placeholder word.

747
00:35:53,850 --> 00:35:57,450
Like in algebra you
have x, and y, and z.

748
00:35:57,450 --> 00:35:59,840
So, then I close each
of these list items.

749
00:35:59,840 --> 00:36:01,230
I close the unordered list.

750
00:36:01,230 --> 00:36:02,550
Let's see what this looks like.

751
00:36:02,550 --> 00:36:07,620
If I go ahead and open up
in a browser, list.html,

752
00:36:07,620 --> 00:36:09,360
I sure enough see foo, bar in baz.

753
00:36:09,360 --> 00:36:13,320
But the browser has very nicely
for me, given me three bullets.

754
00:36:13,320 --> 00:36:15,450
But you know what,
unordered list kind of

755
00:36:15,450 --> 00:36:18,300
suggests that there should be
other types of lists in the world,

756
00:36:18,300 --> 00:36:19,290
like ordered lists.

757
00:36:19,290 --> 00:36:26,556
And sure enough, if I go back into my
text editor, and just change UL to OL,

758
00:36:26,556 --> 00:36:32,190
and then resave my file, go back
to the browser, reload the page,

759
00:36:32,190 --> 00:36:34,600
can you guess what's
probably going to happen?

760
00:36:34,600 --> 00:36:38,570
I've gone from an unordered
list to an ordered list.

761
00:36:38,570 --> 00:36:41,000
Let me go ahead and hit reload.

762
00:36:41,000 --> 00:36:41,576
Aha!

763
00:36:41,576 --> 00:36:43,700
The browser has taken care
of the numbering for me.

764
00:36:43,700 --> 00:36:46,250
So just a marginally
nice feature, but now one

765
00:36:46,250 --> 00:36:49,550
I don't have to think about, because
now it just does the numbering for me.

766
00:36:49,550 --> 00:36:51,890
All right, so what else
might I do on a web page?

767
00:36:51,890 --> 00:36:55,760
Well, let me go ahead
and open up table.html,
768
00:36:55,760 --> 00:37:00,140
which looks a little more
overwhelming, at first glance.

769
00:37:00,140 --> 00:37:04,070
Now, turns out that it's pretty common
on the web to lay out data tabularly.

770
00:37:04,070 --> 00:37:06,620
With rows and columns,
like a spreadsheet.

771
00:37:06,620 --> 00:37:08,600
Well, how do you go about doing that?

772
00:37:08,600 --> 00:37:11,270
Because that's seemingly
such a complex layout.

773
00:37:11,270 --> 00:37:15,300
Well, we can have in our body, a
table tag, as it's called, thankfully.

774
00:37:15,300 --> 00:37:18,320
Another tag that actually
says what it means.

775
00:37:18,320 --> 00:37:20,650
TR, dammit, we're back to cryptic tags.

776
00:37:20,650 --> 00:37:22,550
TR for table row.

777
00:37:22,550 --> 00:37:24,580
Just more succinct than
writing, table row.

778
00:37:24,580 --> 00:37:26,600
TD, table data.
779
00:37:26,600 --> 00:37:31,370
And then down here, close
table row, close table.

780
00:37:31,370 --> 00:37:35,000
And inside of this, a whole bunch
of closed table datas, as well.

781
00:37:35,000 --> 00:37:37,400
So, what is this doing, and how?

782
00:37:37,400 --> 00:37:39,290
Well, if you think
about what a table is,

783
00:37:39,290 --> 00:37:41,900
it's a whole bunch of
rows, one after the other,

784
00:37:41,900 --> 00:37:44,030
one a top the other, on down.

785
00:37:44,030 --> 00:37:47,480
Table data is like columns,
or really cells, in the page.

786
00:37:47,480 --> 00:37:49,910
And so this says, hey
browser, here comes a table.

787
00:37:49,910 --> 00:37:53,340
Hey browser, here comes
the first row in the table.

788
00:37:53,340 --> 00:37:54,590
Hey browser, here's some data.

789
00:37:54,590 --> 00:37:55,640
Hey browser, here's some data.
790
00:37:55,640 --> 00:37:56,890
Hey browser, here's some data.

791
00:37:56,890 --> 00:37:59,670
Hey browser, that's
it for the first row.

792
00:37:59,670 --> 00:38:01,760
So that's one, two,
three pieces of data.

793
00:38:01,760 --> 00:38:05,600
Or really one, two, three columns,
or cells, in that first row.

794
00:38:05,600 --> 00:38:08,425
Hey browser, here comes a
second row, dot, dot, dot.

795
00:38:08,425 --> 00:38:10,550
Hey browser, here comes a
third row, dot, dot, dot.

796
00:38:10,550 --> 00:38:12,716
Hey browser, here comes a
fourth row, dot, dot, dot.

797
00:38:12,716 --> 00:38:15,350
And notice, I was careful to
make sure that each of my rows

798
00:38:15,350 --> 00:38:19,570
has three table data, so that
everything lines up as intended.

799
00:38:19,570 --> 00:38:23,660
And notice, just for fun, I put
some numbers in the middle there,

800
00:38:23,660 --> 00:38:27,920
plus an asterisk, and then a
zero, and then a sharp sign.

801
00:38:27,920 --> 00:38:31,280
And let me go ahead and
open up now, table dot HTML.

802
00:38:31,280 --> 00:38:32,480
And voila!

803
00:38:32,480 --> 00:38:37,250
You'll be very disappointed to see,
the simplest of telephone keypads,

804
00:38:37,250 --> 00:38:40,640
that you might have on your home
phone, or cell phone, these days.

805
00:38:40,640 --> 00:38:43,950
But it's laid out tabularly, with
everything neatly in rows and columns.

806
00:38:43,950 --> 00:38:45,650
And that's just a single
number, but I can actually

807
00:38:45,650 --> 00:38:46,910
do something more interesting.

808
00:38:46,910 --> 00:38:51,560
Actually have words, and phrases,
and more complexity, still.

809
00:38:51,560 --> 00:38:54,500
But my gosh, this is still
just so, so underwhelming.

810
00:38:54,500 --> 00:38:57,800
I mean, we started off with just
hello world, we ramped things up
811
00:38:57,800 --> 00:38:59,702
and we gave ourselves
a link to Harvard.edu,

812
00:38:59,702 --> 00:39:01,910
and then we ramped things
up further with Grumpy Cat,

813
00:39:01,910 --> 00:39:05,120
and then we kind of got into the weeds
of some of these additional tags.

814
00:39:05,120 --> 00:39:06,620
So we have more of a vocabulary now.

815
00:39:06,620 --> 00:39:07,850
More tools in our toolkit.

816
00:39:07,850 --> 00:39:12,770
But how do we actually start to make web
sites a little more dynamic, where they

817
00:39:12,770 --> 00:39:15,140
can, indeed, take input from a user?

818
00:39:15,140 --> 00:39:17,420
Well, for this, let's
first try to figure out

819
00:39:17,420 --> 00:39:19,160
how google.com, itself, works.

820
00:39:19,160 --> 00:39:23,430
And then see if we can't re-implement
a little bit of Google ourselves.

821
00:39:23,430 --> 00:39:29,090
Let me go ahead to Google.com, enter.

822
00:39:29,090 --> 00:39:31,010
And take note of a
couple of things, first.

823
00:39:31,010 --> 00:39:35,410
One, notice at top, that I'm
not at Google.com, per se,

824
00:39:35,410 --> 00:39:37,370
I'm at www.google.com.

825
00:39:37,370 --> 00:39:43,520
And yet, I'm not exactly there,
I'm at www.google.com via https://.

826
00:39:43,520 --> 00:39:47,790
But I didn't type https://.

827
00:39:47,790 --> 00:39:49,880
I didn't type www dot.

828
00:39:49,880 --> 00:39:51,130
I just typed google.com.

829
00:39:51,130 --> 00:39:53,820
So what's actually going on there?

830
00:39:53,820 --> 00:39:59,390
Well, turns out, that the worldwide
web does need to use fully formed URLs

831
00:39:59,390 --> 00:40:02,450
in order to bring you to the right
place, whether it starts with HTTP,

832
00:40:02,450 --> 00:40:06,060
HTTPS, or even file://.

833
00:40:06,060 --> 00:40:08,780
Browsers today, though,
in so far as they're

834
00:40:08,780 --> 00:40:11,990
pretty much used for browsing the
world wide web, takes some liberties.

835
00:40:11,990 --> 00:40:14,870
And so if you just type in
google.com, most browsers

836
00:40:14,870 --> 00:40:19,520
will assume that you
want http://google.com.

837
00:40:19,520 --> 00:40:22,172
Because HTTP, again, is the
protocol that your browser

838
00:40:22,172 --> 00:40:23,630
is going to speak with that server.

839
00:40:23,630 --> 00:40:27,320
As opposed to an email protocol, or
videoconferencing, or chat protocol,

840
00:40:27,320 --> 00:40:30,770
or something else, the browsers just
presumptuously, but pretty reasonably,

841
00:40:30,770 --> 00:40:35,090
by design, are assuming what
protocol it is you want.

842
00:40:35,090 --> 00:40:37,610
Moreover, some browsers
are even helpful when

843
00:40:37,610 --> 00:40:43,190
it comes to this prefix, www, which
is still very common as the subdomain,
844
00:40:43,190 --> 00:40:45,980
or hostname, for web sites.

845
00:40:45,980 --> 00:40:49,910
So that they're not just
Google it's www.google.com.

846
00:40:49,910 --> 00:40:53,120
Really just for branding purposes,
also for some technical purposes,

847
00:40:53,120 --> 00:40:54,830
for some privacy purposes.

848
00:40:54,830 --> 00:40:57,680
But really it's just
convention, for the most part,

849
00:40:57,680 --> 00:41:03,540
for humans to start their web sites
with the prefix www, for world wide web.

850
00:41:03,540 --> 00:41:04,940
But it's not strictly necessary.

851
00:41:04,940 --> 00:41:08,040
But browsers will sometimes,
if google.com, for instance,

852
00:41:08,040 --> 00:41:11,810
didn't lead somewhere, will
presumptuously prepend www you.

853
00:41:11,810 --> 00:41:15,430
Or the server itself will tell you
mm, Mm, mm, don't go to Google.com,

854
00:41:15,430 --> 00:41:18,290
go to www.google.com.
855
00:41:18,290 --> 00:41:23,679
So we can actually see all of this
ambiguity in practice, as follows.

856
00:41:23,679 --> 00:41:26,720
Here, I have, in this black and white
window, a so-called terminal window

857
00:41:26,720 --> 00:41:27,320
on my Mac.

858
00:41:27,320 --> 00:41:30,580
And Windows, and Linux, and other
operating systems have these, too.

859
00:41:30,580 --> 00:41:33,120
And I'm going to run what's
called the command line program,

860
00:41:33,120 --> 00:41:36,410
just because it's enlightening,
here, for our purposes, called cURL.

861
00:41:36,410 --> 00:41:40,540
Which is a program that really
pretends to be a browser.

862
00:41:40,540 --> 00:41:45,040
It actually does send a textual message,
in one of those virtual envelopes,

863
00:41:45,040 --> 00:41:46,000
to a server.

864
00:41:46,000 --> 00:41:49,910
And it shows us what's
coming back in raw form.

865
00:41:49,910 --> 00:41:53,080
So it's not a browser, there's no
URL bar for me to type things into.

866
00:41:53,080 --> 00:41:55,300
I can only type into this
black and white window.

867
00:41:55,300 --> 00:41:58,600
But it's going to let me
send an envelope to a server.

868
00:41:58,600 --> 00:42:02,380
And then get back a response envelope,
and see what's actually inside of it,

869
00:42:02,380 --> 00:42:04,232
without actually rendering the web page.

870
00:42:04,232 --> 00:42:05,690
So I'm going to do this as follows.

871
00:42:05,690 --> 00:42:10,690
Let me go ahead and
cURL Google.com, Enter.

872
00:42:10,690 --> 00:42:13,630
And you'll see that the
following HTML came back,

873
00:42:13,630 --> 00:42:16,332
and it's not even quite like
what we've seen thus far.

874
00:42:16,332 --> 00:42:19,540
It's actually all in capital letters,
which is actually a little dated, right

875
00:42:19,540 --> 00:42:20,890
now, but this is fine.

876
00:42:20,890 --> 00:42:22,800
You'll notice that-- this is weird--

877
00:42:22,800 --> 00:42:25,300
Google has moved, 301 move.

878
00:42:25,300 --> 00:42:28,790
But recall that 301 was one of those
status codes, earlier, that I said,

879
00:42:28,790 --> 00:42:32,200
does mean that the browser
should revisit some other URL.

880
00:42:32,200 --> 00:42:39,560
And indeed, we see this document has
moved to www.google.com with an http://

881
00:42:39,560 --> 00:42:40,720
explicit prefix.

882
00:42:40,720 --> 00:42:42,280
Moreover, let me do this.

883
00:42:42,280 --> 00:42:48,340
Let me rerun this command, with a dash,
capital I, command, line argument.

884
00:42:48,340 --> 00:42:53,170
This shows me not the
body of the response,

885
00:42:53,170 --> 00:42:55,420
but, rather, the HTTP headers.

886
00:42:55,420 --> 00:42:56,920
So notice what's different.

887
00:42:56,920 --> 00:43:02,110
This is what, ultimately, is
inside of the envelope that
888
00:43:02,110 --> 00:43:03,380
came back from Google.

889
00:43:03,380 --> 00:43:04,990
That's ultimately what we care about.

890
00:43:04,990 --> 00:43:07,810
But recall that also
inside of these envelopes,

891
00:43:07,810 --> 00:43:10,060
are one or more HTTP headers.

892
00:43:10,060 --> 00:43:14,740
Among which are the status
code like 200 OK, or 301

893
00:43:14,740 --> 00:43:17,330
moved permanently, as we see here.

894
00:43:17,330 --> 00:43:20,410
So by rerunning this same
command, cURL with dash I,

895
00:43:20,410 --> 00:43:23,860
I get to see really deep
inside of the envelope.

896
00:43:23,860 --> 00:43:26,527
Like what all of these
HTTP headers are, too,

897
00:43:26,527 --> 00:43:29,860
which humans don't normally see, because
they're really just meant for browsers.

898
00:43:29,860 --> 00:43:32,930
But they do, in seeing them, help
us understand what's going on.
899
00:43:32,930 --> 00:43:36,320
So what are the headers that are
coming back in Google's envelope?

900
00:43:36,320 --> 00:43:40,144
Well, HTTP 1.1, 301 Moved Permanently.

901
00:43:40,144 --> 00:43:43,060
That's interesting, Google has, kind
of, packed up and gone elsewhere.

902
00:43:43,060 --> 00:43:43,900
But where?

903
00:43:43,900 --> 00:43:45,050
To a location.

904
00:43:45,050 --> 00:43:47,860
So the second line is
a second HTTP header,

905
00:43:47,860 --> 00:43:50,260
that's tucked somewhere in
that envelope from my browser.

906
00:43:50,260 --> 00:43:53,260
And it says, hey browser,
go to this URL instead.

907
00:43:53,260 --> 00:43:58,360
Don't just go to Google.com, go
to www.google.com using HTTP.

908
00:43:58,360 --> 00:43:58,960
Why?

909
00:43:58,960 --> 00:44:00,790
Just because Google says so.
910
00:44:00,790 --> 00:44:04,330
Their server has been
configured by Google's employees

911
00:44:04,330 --> 00:44:09,310
to redirect users to the URL
that has the www, just because.

912
00:44:09,310 --> 00:44:12,500
Probably, partly for marketing
reasons, partly for technical reasons,

913
00:44:12,500 --> 00:44:14,590
but that is what the server is saying.

914
00:44:14,590 --> 00:44:16,180
There's other information there, too.

915
00:44:16,180 --> 00:44:19,820
The content type of this
message is text, slash, HTML.

916
00:44:19,820 --> 00:44:22,780
Happens to use something called
UTF 8, or Unicode, in this case.

917
00:44:22,780 --> 00:44:23,890
A superset of ASCII.

918
00:44:23,890 --> 00:44:27,700
It happens to say the exact date
and time that this request was sent,

919
00:44:27,700 --> 00:44:29,500
when the response expires.

920
00:44:29,500 --> 00:44:32,020
Indeed notice, Google
is telling us that we
921
00:44:32,020 --> 00:44:36,700
can keep this response in our memory,
in our computers' RAM, for like a month.

922
00:44:36,700 --> 00:44:39,950
And then don't ask me this
question again for a month.

923
00:44:39,950 --> 00:44:42,160
Google is going to just
keep saying the same thing.

924
00:44:42,160 --> 00:44:44,500
And then there's some
lower level technical--

925
00:44:44,500 --> 00:44:48,040
more technical HTTP headers, there,
that we'll wave our hands at, for now.

926
00:44:48,040 --> 00:44:50,200
But my browser might find those helpful.

927
00:44:50,200 --> 00:44:54,670
All right, so if Google is telling me
that it, literally, moved permanently,

928
00:44:54,670 --> 00:44:56,080
per the 301 status code.

929
00:44:56,080 --> 00:44:59,290
And its new location is this URL, here.

930
00:44:59,290 --> 00:45:01,435
Well, let's go to that URL, here.

931
00:45:01,435 --> 00:45:03,226
Let me go ahead and
start over and do cURL.
932
00:45:03,226 --> 00:45:06,170

933
00:45:06,170 --> 00:45:10,900
http://www.google.com, Enter.

934
00:45:10,900 --> 00:45:11,920
Interesting.

935
00:45:11,920 --> 00:45:16,750
So now I've gotten back
a whole, long web page.

936
00:45:16,750 --> 00:45:19,841
That seems to contain,
I don't even know what.

937
00:45:19,841 --> 00:45:22,090
So, turns out, this isn't
HTML email that we're seeing

938
00:45:22,090 --> 00:45:23,506
at the bottom of the screen, here.

939
00:45:23,506 --> 00:45:26,230
This is something called
JavaScript, a programming language

940
00:45:26,230 --> 00:45:29,260
that can actually be
used with HTML and CSS,

941
00:45:29,260 --> 00:45:31,060
in conjunction, to create a web page.

942
00:45:31,060 --> 00:45:35,060
But if I scroll up high enough,
you'll start to see eventually, ah!

943
00:45:35,060 --> 00:45:35,560
Interesting.

944
00:45:35,560 --> 00:45:39,760
You'll start to see some
actual HTML in the page.

945
00:45:39,760 --> 00:45:43,930
And indeed, if I now rerun the
same command, but with dash,

946
00:45:43,930 --> 00:45:46,070
capital I, so I get the headers.

947
00:45:46,070 --> 00:45:49,990
Notice, ah, this time it's 200 OK.

948
00:45:49,990 --> 00:45:53,560
And the server has actually
responded, rather than redirecting me

949
00:45:53,560 --> 00:45:56,110
somewhere else, altogether.

950
00:45:56,110 --> 00:45:59,350
All right so that's what's
deep inside of the envelope.

951
00:45:59,350 --> 00:46:00,790
These HTTP headers.

952
00:46:00,790 --> 00:46:03,700
Let's go back now to a higher
level, to the actual browser

953
00:46:03,700 --> 00:46:05,590
that's making these requests.

954
00:46:05,590 --> 00:46:10,840
And see what URL is being requested,
and what that very first GET request is.

955
00:46:10,840 --> 00:46:14,950
Let me go ahead and search
for my favorite, cats, enter.

956
00:46:14,950 --> 00:46:17,050
And you'll notice at
the top, now, the URL

957
00:46:17,050 --> 00:46:20,440
has changed to be a pretty
long sequence of characters.

958
00:46:20,440 --> 00:46:24,130
And honestly, I don't even know what
most of these characters mean or do.

959
00:46:24,130 --> 00:46:26,950
It's really up to Google
to understand that.

960
00:46:26,950 --> 00:46:30,400
But I do know that I'm looking for
cats and, frankly, sometimes when

961
00:46:30,400 --> 00:46:34,390
I get curious and try to start
poking around on websites.

962
00:46:34,390 --> 00:46:37,540
I might just start tinkering to see
if I can understand what's going on.

963
00:46:37,540 --> 00:46:39,940
So I'm going go ahead and
delete most of the URL.

964
00:46:39,940 --> 00:46:42,670
And then go ahead delete
even more of the URL.
965
00:46:42,670 --> 00:46:49,690
And distill it to just this here
https://www.google.com/search.

966
00:46:49,690 --> 00:46:52,510
And indeed, it seems Chrome,
here, has redirected me

967
00:46:52,510 --> 00:46:57,460
to HTTPS so that the
connection is also secure,

968
00:46:57,460 --> 00:47:01,090
which we did not see with the
command line version of cURL.

969
00:47:01,090 --> 00:47:04,630
So slash, search, question
mark q, equals cats.

970
00:47:04,630 --> 00:47:07,160
Let me hit Enter.

971
00:47:07,160 --> 00:47:10,520
Seems like the exact same
search result. So curiously,

972
00:47:10,520 --> 00:47:14,840
even though Google, upon searching for
cats, previously used a super long URL,

973
00:47:14,840 --> 00:47:19,050
much of which I didn't understand, looks
like that's not strictly all necessary.

974
00:47:19,050 --> 00:47:22,850
And it looks like it is
sufficient information

975
00:47:22,850 --> 00:47:28,170
to get search results on cats, to just
haven't a URL that looks like this.

976
00:47:28,170 --> 00:47:31,670
Now, this is useful because I'm
going to use this information

977
00:47:31,670 --> 00:47:34,730
to make my own search engine.

978
00:47:34,730 --> 00:47:36,860
Let me go ahead and start.

979
00:47:36,860 --> 00:47:39,350
In Atom, let me go
ahead and create a file

980
00:47:39,350 --> 00:47:42,230
that's ultimately called search.html.

981
00:47:42,230 --> 00:47:44,780
let me start it as
usual with a doc type.

982
00:47:44,780 --> 00:47:49,760
Let me then start the body, the web
page, itself, with open bracket HTML.

983
00:47:49,760 --> 00:47:53,180
Let me have a head up
here, and close head.

984
00:47:53,180 --> 00:47:55,340
And then in here, a title.

985
00:47:55,340 --> 00:47:59,330
And I'll go ahead and call this, search,
just so I remember which page is which.

986
00:47:59,330 --> 00:48:02,660
In here is going to be
my body, and close body.

987
00:48:02,660 --> 00:48:05,000
And now I need to introduce a new tag.

988
00:48:05,000 --> 00:48:07,310
This one being in HTML form.

989
00:48:07,310 --> 00:48:11,420
Some kind of text boxes, and maybe check
boxes, and buttons, and radio buttons,

990
00:48:11,420 --> 00:48:14,690
and the like, that will allow me
to actually submit information from

991
00:48:14,690 --> 00:48:16,100
my page to Google's.

992
00:48:16,100 --> 00:48:20,874
And I know from practice that
form takes an action attribute.

993
00:48:20,874 --> 00:48:23,540
Which in this case is going to
be, I'm going to go out on a limb

994
00:48:23,540 --> 00:48:27,260
here, and do www.google.com,
slash search.

995
00:48:27,260 --> 00:48:28,310
And that's it.

996
00:48:28,310 --> 00:48:31,205
And I'm going to use
the method called, GET.

997
00:48:31,205 --> 00:48:34,500
It turns out, that there
are different types

998
00:48:34,500 --> 00:48:36,210
of requests you can make of web pages.

999
00:48:36,210 --> 00:48:38,220
The default, and perhaps
the most common is GET.

1000
00:48:38,220 --> 00:48:41,220
And we've literally seen that keyword
before, here it's written in lowercase.

1001
00:48:41,220 --> 00:48:43,011
But in other contexts
it's written in caps.

1002
00:48:43,011 --> 00:48:47,160
GET me slash HTTP 1.1 was
that earliest message we saw.

1003
00:48:47,160 --> 00:48:51,110
So here, I see a reiteration
of using that method.

1004
00:48:51,110 --> 00:48:56,300
And this is in contrast with post,
and put, and patch, and delete,

1005
00:48:56,300 --> 00:48:58,800
that are also supported,
but not generally used by us

1006
00:48:58,800 --> 00:49:00,420
humans in the same way.

1007
00:49:00,420 --> 00:49:05,220
Inside of this form, I'm going to
introduce one other tag called input.
1008
00:49:05,220 --> 00:49:07,470
I'm going to give this
input a name of q.

1009
00:49:07,470 --> 00:49:10,050
And the type of this
input is going to be text.

1010
00:49:10,050 --> 00:49:10,952
And that's it.

1011
00:49:10,952 --> 00:49:13,410
I'm going to go ahead and open
and close the tag all in one

1012
00:49:13,410 --> 00:49:17,190
fell swoop, because there's really going
to be nothing inside of this input,

1013
00:49:17,190 --> 00:49:18,450
by definition.

1014
00:49:18,450 --> 00:49:21,270
Meanwhile, I'm going to
have one other input type,

1015
00:49:21,270 --> 00:49:23,970
this one's going to
be a submission type.

1016
00:49:23,970 --> 00:49:28,680
And it's value, or the label on
it, is going to be just search.

1017
00:49:28,680 --> 00:49:31,259
So we've not seen some
of these tags before.

1018
00:49:31,259 --> 00:49:33,300
But you can perhaps infer
what's going to happen.

1019
00:49:33,300 --> 00:49:35,910
Here is, hey browser, here comes a form.

1020
00:49:35,910 --> 00:49:38,220
Hey browser, give me
an input of type text.

1021
00:49:38,220 --> 00:49:40,560
Hey browser, give me an
input of type submit.

1022
00:49:40,560 --> 00:49:43,090
And this one, by convention,
is going to be a button.

1023
00:49:43,090 --> 00:49:45,450
So this would seem to give me what?

1024
00:49:45,450 --> 00:49:50,174
This would seem to give me,
if I open up search.html.

1025
00:49:50,174 --> 00:49:52,840
Wow, I have to kind of look all
the way up at the top to see it.

1026
00:49:52,840 --> 00:49:59,220
A super simple text box, a super
simple search button, and that's it.

1027
00:49:59,220 --> 00:50:01,830
But what's magical,
now, about this example,

1028
00:50:01,830 --> 00:50:06,910
and because of the fact that I know a
bit of HTML, now, notice what I can do.
1029
00:50:06,910 --> 00:50:12,790
I can go ahead and zoom out, and
search for cats, and then click Search.

1030
00:50:12,790 --> 00:50:17,820
And even though I've not implemented
a database, let alone a web server,

1031
00:50:17,820 --> 00:50:21,840
let alone a web search engine,
notice that I can just kind of

1032
00:50:21,840 --> 00:50:24,000
punt that detail to Google.

1033
00:50:24,000 --> 00:50:28,470
And notice, voila, so long
as I send users to Google,

1034
00:50:28,470 --> 00:50:30,030
I can get them some cats.

1035
00:50:30,030 --> 00:50:34,620
And lest you think this is sort
of precanned, let me go ahead

1036
00:50:34,620 --> 00:50:36,900
and try start searching for
not just cats, but dogs.

1037
00:50:36,900 --> 00:50:41,040
And see if my same form
works for other animals.

1038
00:50:41,040 --> 00:50:45,100
And indeed, there is the most
adorable dog that comes back as well.

1039
00:50:45,100 --> 00:50:46,350
And notice what's happening.
1040
00:50:46,350 --> 00:50:50,015
My web page, which is just running
on my Mac, is written in HTML,

1041
00:50:50,015 --> 00:50:54,360
it's using an HTML form, with an
action attribute and a specific method.

1042
00:50:54,360 --> 00:50:58,680
And together, the browser is using that
HTML form as sufficient information

1043
00:50:58,680 --> 00:51:00,450
to assemble the URL.

1044
00:51:00,450 --> 00:51:05,160
To which it sends the user, when
you type into that input text box,

1045
00:51:05,160 --> 00:51:07,020
and click that submit button.

1046
00:51:07,020 --> 00:51:12,770
Indeed, we end up at Google.com slash
search, question mark, q equals dogs.

1047
00:51:12,770 --> 00:51:17,580
Where the question mark means, hey
browser, or rather, hey server,

1048
00:51:17,580 --> 00:51:21,420
here come my HTTP parameters,
as they're called.

1049
00:51:21,420 --> 00:51:26,760
These keys and values, a name like
q, a key, and a value like dog.

1050
00:51:26,760 --> 00:51:28,909
So q, my query, equals dogs.

1051
00:51:28,909 --> 00:51:30,700
Turns out you can have
multiple parameters.

1052
00:51:30,700 --> 00:51:34,260
So you might see ampersands, sometimes,
as you might have noticed earlier,

1053
00:51:34,260 --> 00:51:36,060
that before I deleted them.

1054
00:51:36,060 --> 00:51:40,200
But for our purposes today, we
just need this one parameter.

1055
00:51:40,200 --> 00:51:43,860
So, we're not going to focus on
implementing an actual search engine.

1056
00:51:43,860 --> 00:51:47,530
For now, we'll just assume that
someone else will build that for us.

1057
00:51:47,530 --> 00:51:50,880
But let's see if we can, at least,
make our web pages a little prettier,

1058
00:51:50,880 --> 00:51:55,320
or at least pave the way for making
our web sites better designed.

1059
00:51:55,320 --> 00:51:57,480
How to do this.

1060
00:51:57,480 --> 00:52:03,000
Let me go ahead and open up css0.html.

1061
00:52:03,000 --> 00:52:08,060
This is now the first of
a final series of examples

1062
00:52:08,060 --> 00:52:10,220
that introduce another language, still.

1063
00:52:10,220 --> 00:52:14,450
We've been focusing thus far on HTML,
HyperText Markup Language, which

1064
00:52:14,450 --> 00:52:16,820
is all of these tags and attributes.

1065
00:52:16,820 --> 00:52:19,340
And that allows us to
structure our web pages,

1066
00:52:19,340 --> 00:52:22,100
and literally tag
information on our web pages,

1067
00:52:22,100 --> 00:52:25,400
so that we know what goes
where and how to display it.

1068
00:52:25,400 --> 00:52:29,090
But we've seen that browsers
default styling is kind of lame.

1069
00:52:29,090 --> 00:52:32,930
It's just like black and
white, background and text.

1070
00:52:32,930 --> 00:52:37,160
It's big and bold, or small
and bold, for the headings.

1071
00:52:37,160 --> 00:52:39,140
And it's really not
all that interesting.
1072
00:52:39,140 --> 00:52:42,140
I mean, my god, the font is
like Times New Roman by default.

1073
00:52:42,140 --> 00:52:43,500
Can't we do better?

1074
00:52:43,500 --> 00:52:44,480
Well, you can.

1075
00:52:44,480 --> 00:52:48,590
And indeed, with modern web development,
do you have access to not just HTML,

1076
00:52:48,590 --> 00:52:51,950
but also a language called
CSS, Cascading Style Sheets,

1077
00:52:51,950 --> 00:52:56,120
that allow you, in a web page, to kind
of take the styling the last mile.

1078
00:52:56,120 --> 00:52:59,210
To take this structure
from your web page,

1079
00:52:59,210 --> 00:53:01,340
and then tweak it so
that it looks prettier

1080
00:53:01,340 --> 00:53:03,170
and it's laid out
exactly as you want, not

1081
00:53:03,170 --> 00:53:05,210
how the browser is
laying it out by default.

1082
00:53:05,210 --> 00:53:06,350
So how do we do this?
1083
00:53:06,350 --> 00:53:08,450
Here is CSS zero.

1084
00:53:08,450 --> 00:53:11,930
And you'll notice a few new
tags, header, main, and footer.

1085
00:53:11,930 --> 00:53:15,590
Not to be confused with head, which
is the top part of the web page.

1086
00:53:15,590 --> 00:53:18,890
Header is just semantically
the top part of the body.

1087
00:53:18,890 --> 00:53:20,630
Main is the main part of the body.

1088
00:53:20,630 --> 00:53:22,860
Footer is the bottom-most
part of the body.

1089
00:53:22,860 --> 00:53:25,970
But we don't have to use these tags,
we can use other names, as well,

1090
00:53:25,970 --> 00:53:29,010
that you might find in a
reference or online resource.

1091
00:53:29,010 --> 00:53:32,930
But I have three parts of this
page, a header, main, and a footer.

1092
00:53:32,930 --> 00:53:35,450
The first of which says, John
Harvard, second of which says,

1093
00:53:35,450 --> 00:53:39,050
welcome to my home page, last of
which is my copyright symbol, just

1094
00:53:39,050 --> 00:53:41,090
as a little footer on the page.

1095
00:53:41,090 --> 00:53:42,410
But notice what I've done.

1096
00:53:42,410 --> 00:53:45,530
I've added to each of those
tags, header, main, and footer,

1097
00:53:45,530 --> 00:53:46,760
a style attribute.

1098
00:53:46,760 --> 00:53:48,410
Which we've not seen before.

1099
00:53:48,410 --> 00:53:52,730
And my style attribute has, in
green here, a bunch of properties,

1100
00:53:52,730 --> 00:53:53,780
as we'll call them.

1101
00:53:53,780 --> 00:53:56,000
These properties are
not technically HTML,

1102
00:53:56,000 --> 00:53:58,940
these properties are another
language, altogether.

1103
00:53:58,940 --> 00:54:02,990
Thankfully still looks like
English, but notice the formatting.

1104
00:54:02,990 --> 00:54:05,690
It's another key value pair paradigm.
1105
00:54:05,690 --> 00:54:09,760
So we've seen in URLs that we have
HTTP parameters, like q equal search,

1106
00:54:09,760 --> 00:54:12,740
or q equals cats, or q equals dogs.

1107
00:54:12,740 --> 00:54:16,190
Similarly, in CSS, not just
HTTP, do you have this notion

1108
00:54:16,190 --> 00:54:18,294
of keys and values, keys and values.

1109
00:54:18,294 --> 00:54:19,460
But the syntax is different.

1110
00:54:19,460 --> 00:54:22,920
This time, we're going to use colons
and semi-colons to separate things.

1111
00:54:22,920 --> 00:54:28,940
So it turns out, in the language
called CSS, there is a property called,

1112
00:54:28,940 --> 00:54:30,750
font dash size.

1113
00:54:30,750 --> 00:54:31,980
After which, we put colon.

1114
00:54:31,980 --> 00:54:33,930
After which, we put
the font size we want.

1115
00:54:33,930 --> 00:54:38,340
Turns out that CSS, this language,
supports small, and large,
1116
00:54:38,340 --> 00:54:40,350
and a few other words, as well.

1117
00:54:40,350 --> 00:54:45,990
Or you can literally put, like, 16
point, pt; or 24 px, for pixels;

1118
00:54:45,990 --> 00:54:48,250
and a few other measurement
systems, as well.

1119
00:54:48,250 --> 00:54:50,875
But I'm going to go ahead and
still leave it a little relative,

1120
00:54:50,875 --> 00:54:53,130
and just let the browser
figure out what large is.

1121
00:54:53,130 --> 00:54:57,970
Text dash align colon center,
is going to center the text.

1122
00:54:57,970 --> 00:55:00,687
And I've separated these
properties with semi-colons.

1123
00:55:00,687 --> 00:55:02,520
And this last one is
not strictly necessary,

1124
00:55:02,520 --> 00:55:04,930
but I put it there just in
case I add any more later.

1125
00:55:04,930 --> 00:55:08,220
Meanwhile, the main part of my web
page should be medium font size,

1126
00:55:08,220 --> 00:55:09,600
also aligned in the center.

1127
00:55:09,600 --> 00:55:13,680
And then the footer of my web page
should be small, also aligned center.

1128
00:55:13,680 --> 00:55:16,890
So if I go ahead now
and open up css0.html.

1129
00:55:16,890 --> 00:55:22,120
Let's look, all right, it's still
pretty ugly, but it's getting there.

1130
00:55:22,120 --> 00:55:25,890
It's now centered, as I intend, and this
font's a little bit bigger than this,

1131
00:55:25,890 --> 00:55:26,790
than this.

1132
00:55:26,790 --> 00:55:29,700
So it's kind of laid out
hierarchically in that way.

1133
00:55:29,700 --> 00:55:34,770
But notice, I didn't really do
this in the best possible way.

1134
00:55:34,770 --> 00:55:37,470
Looks like there's a
lot of redundancy, here.

1135
00:55:37,470 --> 00:55:40,080
The font size is varying, to be sure.

1136
00:55:40,080 --> 00:55:43,750
But what is not varying?

1137
00:55:43,750 --> 00:55:47,650
Yeah, like text align center, text
align center, text align center.

1138
00:55:47,650 --> 00:55:50,270
That's kind of lame that
I've just copied and pasted

1139
00:55:50,270 --> 00:55:53,810
that all over the place, when
really I'm not leveraging

1140
00:55:53,810 --> 00:55:57,500
the hierarchical nature of HTML, here.

1141
00:55:57,500 --> 00:56:02,180
It turns out that Cascading
Style Sheets, do cascade

1142
00:56:02,180 --> 00:56:03,570
in a couple of different ways.

1143
00:56:03,570 --> 00:56:07,190
One, you can actually have
multiple CSS files, eventually--

1144
00:56:07,190 --> 00:56:08,540
one of which we'll soon see--

1145
00:56:08,540 --> 00:56:11,300
that can override other
such files, and so forth.

1146
00:56:11,300 --> 00:56:14,660
But notice, they also support some
notion of hierarchy, it turns out.

1147
00:56:14,660 --> 00:56:18,050
So if you want the header,
and the main, and the footer

1148
00:56:18,050 --> 00:56:23,250
tags all to be text align center,
well, do they have a common ancestor,

1149
00:56:23,250 --> 00:56:24,020
so to speak.

1150
00:56:24,020 --> 00:56:26,660
If you think of a web page
really like a family tree,

1151
00:56:26,660 --> 00:56:31,176
where the roots of the tree is HTML,
and it has two children, head and body.

1152
00:56:31,176 --> 00:56:33,050
And actually, you know
what, we can see this.

1153
00:56:33,050 --> 00:56:36,740
Consider this HTML, here, which
was that simplest of web pages

1154
00:56:36,740 --> 00:56:39,950
with which we began, you can
actually think of this as kind

1155
00:56:39,950 --> 00:56:42,570
of like a family tree, as follows.

1156
00:56:42,570 --> 00:56:46,970
If you think of the whole document as
being this node, so to speak, up here.

1157
00:56:46,970 --> 00:56:51,020
Below which, is the HTML
tag, or element, as it's more

1158
00:56:51,020 --> 00:56:54,800
generally called, and that HTML element
has two children, head and body.
1159
00:56:54,800 --> 00:56:56,780
And they're children
in the sense that, even

1160
00:56:56,780 --> 00:57:01,130
though they're both inside of the HTML
tag, they're both at the same level.

1161
00:57:01,130 --> 00:57:05,900
Head is kind of alongside body,
body is not inside of head.

1162
00:57:05,900 --> 00:57:09,950
And so, we can draw them on
the same level, conceptually.

1163
00:57:09,950 --> 00:57:12,800
Meanwhile, the head of the
page has a title child.

1164
00:57:12,800 --> 00:57:16,940
And the title tag has a hello
world string inside of it.

1165
00:57:16,940 --> 00:57:19,446
Meanwhile, body has its
own string, hello world.

1166
00:57:19,446 --> 00:57:21,320
And I've drawn these in
different shapes here

1167
00:57:21,320 --> 00:57:23,445
to convey that they're each
a little bit different.

1168
00:57:23,445 --> 00:57:25,370
Document is special,
refers to the whole file.
1169
00:57:25,370 --> 00:57:29,210
But HTML, head, title, and
body are all HTML tags.

1170
00:57:29,210 --> 00:57:33,080
And then these ovals, here, hello
world, hello world, are just text nodes.

1171
00:57:33,080 --> 00:57:37,010
And indeed, this is what a computer
scientist would call a tree.

1172
00:57:37,010 --> 00:57:38,690
Not unlike a family tree.

1173
00:57:38,690 --> 00:57:40,340
And trees have nodes.

1174
00:57:40,340 --> 00:57:43,580
And in this case when a
browser receives a web

1175
00:57:43,580 --> 00:57:46,530
page, in one of those virtual
envelopes, and reads it top to bottom,

1176
00:57:46,530 --> 00:57:47,120
left to right.

1177
00:57:47,120 --> 00:57:51,470
What it's really doing, underneath the
hood, is, thanks to programming code

1178
00:57:51,470 --> 00:57:55,310
that programmers have written
at companies like Google,

1179
00:57:55,310 --> 00:57:57,650
and Microsoft, and others,
they are building up
1180
00:57:57,650 --> 00:58:01,520
in your computer's memory,
or RAM, a treelike data

1181
00:58:01,520 --> 00:58:06,990
structure, that looks, if you were
to draw it, a little bit like this.

1182
00:58:06,990 --> 00:58:13,460
And so notice here, that
head is a child of HTML,

1183
00:58:13,460 --> 00:58:15,890
just his body is a
child of HTML, and title

1184
00:58:15,890 --> 00:58:18,930
is a child of head in the same way.

1185
00:58:18,930 --> 00:58:24,950
So if we go back to the example at
hand, notice the header, and main,

1186
00:58:24,950 --> 00:58:28,560
and footer in this slightly
more involved example,

1187
00:58:28,560 --> 00:58:30,960
are all children of what elements.

1188
00:58:30,960 --> 00:58:35,270
They're are all inside of
the same parent called body.

1189
00:58:35,270 --> 00:58:39,320
Which suggests an opportunity
to factor out, so to speak,

1190
00:58:39,320 --> 00:58:42,140
the CSS property that's
common to all of these.

1191
00:58:42,140 --> 00:58:46,450
And put it on their parent element,
so that it kind of cascades downward,

1192
00:58:46,450 --> 00:58:50,030
atop all of those elements.

1193
00:58:50,030 --> 00:58:51,470
And we can see that here.

1194
00:58:51,470 --> 00:58:57,740
This is css1.html, which is almost the
same, except it's a little narrower.

1195
00:58:57,740 --> 00:59:01,340
Because I removed all of that text
align center and put it, where?

1196
00:59:01,340 --> 00:59:04,680
On the body in its own style tag.

1197
00:59:04,680 --> 00:59:05,720
So this is nice.

1198
00:59:05,720 --> 00:59:08,690
And indeed, this is now what
distinguishes one page from another,

1199
00:59:08,690 --> 00:59:11,720
being better or worse designed.

1200
00:59:11,720 --> 00:59:14,840
Both of these are correct, both of
them achieve exactly the same goal.

1201
00:59:14,840 --> 00:59:17,180
But honestly, this one is a
little easier to maintain.

1202
00:59:17,180 --> 00:59:17,750
Why?

1203
00:59:17,750 --> 00:59:22,029
Because if I open up
css1.html, as I might here,

1204
00:59:22,029 --> 00:59:24,570
you'll notice that I see a whole
bunch of text in the center.

1205
00:59:24,570 --> 00:59:26,486
But if I want to go ahead
and change that, you

1206
00:59:26,486 --> 00:59:30,410
know what, I can just change it
in one place to text align left,

1207
00:59:30,410 --> 00:59:31,550
reload the page.

1208
00:59:31,550 --> 00:59:34,070
And now, it's all the
way over on the left.

1209
00:59:34,070 --> 00:59:38,936
If I go back into the editor and change
it now to right, reload the page.

1210
00:59:38,936 --> 00:59:40,134
Woo.

1211
00:59:40,134 --> 00:59:42,800
That's what it sounds like when
alignment changes on a web page.

1212
00:59:42,800 --> 00:59:45,200
It's now all the way
over here, on the right.

1213
00:59:45,200 --> 00:59:49,220
The key takeaway, though, is that
I can just change it in one place,

1214
00:59:49,220 --> 00:59:50,450
instead of three places.

1215
00:59:50,450 --> 00:59:52,325
And surely, this is a
pretty simple web page.

1216
00:59:52,325 --> 00:59:53,991
There's not all that much content there.

1217
00:59:53,991 --> 00:59:56,480
But in actual web pages
on the internet, is there

1218
00:59:56,480 --> 00:59:58,550
many, many, many more lines of code.

1219
00:59:58,550 --> 01:00:03,290
And so these kinds of design decisions
start to make even more sense.

1220
01:00:03,290 --> 01:00:04,880
And save even more time.

1221
01:00:04,880 --> 01:00:07,850
Indeed, let's consider, now,
an alternative approach still.

1222
01:00:07,850 --> 01:00:10,610
A bad principle at
hand here is this, I am

1223
01:00:10,610 --> 01:00:14,665
co-mingling my web page's
content with the presentation

1224
01:00:14,665 --> 01:00:16,730
thereof, the aesthetics thereof.

1225
01:00:16,730 --> 01:00:19,010
And this, in computer
science, and programming,

1226
01:00:19,010 --> 01:00:21,080
specifically, is generally frowned upon.

1227
01:00:21,080 --> 01:00:23,840
To have your data, like John
Harvard, welcome to my home page,

1228
01:00:23,840 --> 01:00:26,420
the actual content you
care about, intermingled

1229
01:00:26,420 --> 01:00:28,970
all in the same file,
let alone the same lines

1230
01:00:28,970 --> 01:00:32,000
of code, with the
stylization of that data.

1231
01:00:32,000 --> 01:00:35,267
Aligning things in the center, making
the font large, or medium, or small,

1232
01:00:35,267 --> 01:00:36,350
it's just a little sloppy.

1233
01:00:36,350 --> 01:00:38,660
Plus, it makes it harder to collaborate.

1234
01:00:38,660 --> 01:00:42,942
If you are really not good at
web design, the aesthetics of it,

1235
01:00:42,942 --> 01:00:45,650
but you can certainly make HTML,
and you can structure web pages,

1236
01:00:45,650 --> 01:00:49,519
and maybe you're a programmer who can
generate HTML in some other language.

1237
01:00:49,519 --> 01:00:51,810
Well, if you want to collaborate
with someone who's got

1238
01:00:51,810 --> 01:00:56,240
more of an artistic eye, and he or
she is happy to do all of your CSS.

1239
01:00:56,240 --> 01:00:59,510
And take the web site the final
mile, you just got to get it to him

1240
01:00:59,510 --> 01:01:01,850
or her in some structural form.

1241
01:01:01,850 --> 01:01:05,280
Well, it would be nice, frankly,
to put all of the CSS in one place

1242
01:01:05,280 --> 01:01:08,240
so that he or she can
work independently of you.

1243
01:01:08,240 --> 01:01:11,340
So that you're not, literally,
changing the same lines of code.

1244
01:01:11,340 --> 01:01:15,650
So in css2.html, do we
have a step toward that.
1245
01:01:15,650 --> 01:01:18,650
Notice that I've replaced the
style attribute in these lines,

1246
01:01:18,650 --> 01:01:22,920
here, with a new attribute called class.

1247
01:01:22,920 --> 01:01:25,350
And class, I've come up with
arbitrarily, but kind of

1248
01:01:25,350 --> 01:01:28,050
reasonably with three key
words, large, medium, and small.

1249
01:01:28,050 --> 01:01:30,300
I could have called it foo,
bar and bar; x, y and z.

1250
01:01:30,300 --> 01:01:33,390
But I'm choosing words that
describe the kind of class

1251
01:01:33,390 --> 01:01:38,700
that I want to apply to each of
these HTML elements, header, main,

1252
01:01:38,700 --> 01:01:39,540
and footer.

1253
01:01:39,540 --> 01:01:42,870
Indeed, if I scroll up,
notice what's up here now.

1254
01:01:42,870 --> 01:01:48,030
Instead of using style as an attribute,
a curiosity about the style attribute,

1255
01:01:48,030 --> 01:01:51,012
is that it also exists as a style tag.

1256
01:01:51,012 --> 01:01:53,970
And if you have a style tag, it should
go in the head of your web page.

1257
01:01:53,970 --> 01:01:55,800
Which is why I've scrolled up here.

1258
01:01:55,800 --> 01:01:58,140
And now notice I've done
a few different things.

1259
01:01:58,140 --> 01:01:59,640
I have put a few keywords here.

1260
01:01:59,640 --> 01:02:02,040
Centered, large, medium, and small.

1261
01:02:02,040 --> 01:02:04,500
Each of which I very
deliberately started with a dot.

1262
01:02:04,500 --> 01:02:06,570
Kind of looks like a typo, but it's not.

1263
01:02:06,570 --> 01:02:10,770
Turns out the convention in web
development is to use a dot,

1264
01:02:10,770 --> 01:02:13,350
and then a word, when you
want to define your own class,

1265
01:02:13,350 --> 01:02:16,930
your own set of properties with
which to stylize a web page.

1266
01:02:16,930 --> 01:02:19,380
So I have arbitrarily, but
again pretty reasonably,

1267
01:02:19,380 --> 01:02:22,807
I think, come up with some key words,
centered, large, medium, small.

1268
01:02:22,807 --> 01:02:25,140
And put dots in front of them
so that those are classes,

1269
01:02:25,140 --> 01:02:27,750
those are now added to
the browser's vocabulary.

1270
01:02:27,750 --> 01:02:30,840
Specifically, if I use
the centered class,

1271
01:02:30,840 --> 01:02:34,170
it's going to make whatever it's
applied to text align centered.

1272
01:02:34,170 --> 01:02:36,390
If I use the large
class, it's going to make

1273
01:02:36,390 --> 01:02:40,710
the font size of its contents
large; medium, medium; small, small.

1274
01:02:40,710 --> 01:02:43,530
So I've kind of given
myself new puzzle pieces,

1275
01:02:43,530 --> 01:02:49,500
of some sort, new building blocks I can
use to create a more well-designed web

1276
01:02:49,500 --> 01:02:50,130
page.
1277
01:02:50,130 --> 01:02:53,790
Because notice what I've done, not just
in those tags, but even in the body,

1278
01:02:53,790 --> 01:02:57,090
I've now specified that the class
of the body should be centered.

1279
01:02:57,090 --> 01:02:59,760
Use all of the properties
associated with centered.

1280
01:02:59,760 --> 01:03:03,150
The header should be class large,
use all of the properties associated

1281
01:03:03,150 --> 01:03:04,570
with the class large.

1282
01:03:04,570 --> 01:03:07,180
Medium and small, same thing.

1283
01:03:07,180 --> 01:03:11,460
So the end result frankly,
is not all that surprising.

1284
01:03:11,460 --> 01:03:14,760
It looks exactly the same, but
it's better designed at this point.

1285
01:03:14,760 --> 01:03:18,300
Because now my colleague, for
instance, can isolate his or her work

1286
01:03:18,300 --> 01:03:21,570
to just the top of the file,
while I work on the bottom.

1287
01:03:21,570 --> 01:03:24,270
But frankly, even that feels
like it's inviting some trouble

1288
01:03:24,270 --> 01:03:25,650
and we don't have to do that.

1289
01:03:25,650 --> 01:03:28,560
Indeed, we'll soon see we can
factor this out to a separate file.

1290
01:03:28,560 --> 01:03:31,890
But you know, this can be
done even more cleanly.

1291
01:03:31,890 --> 01:03:35,040
Let me show you css3.html.

1292
01:03:35,040 --> 01:03:37,920
And, oh my goodness,
notice what's happened.

1293
01:03:37,920 --> 01:03:41,970
Now I've really whittled down
my HTML code to its essence.

1294
01:03:41,970 --> 01:03:45,080
I'd argue this is much more readable
now, because it literally just says,

1295
01:03:45,080 --> 01:03:48,390
header, main, footer, with no
visual distractions of style

1296
01:03:48,390 --> 01:03:51,540
attributes at all, or
class attributes at all.

1297
01:03:51,540 --> 01:03:54,060
My text in gray, John Harvard,
welcome to my home page,

1298
01:03:54,060 --> 01:03:55,920
and so forth, really jumps out at me.

1299
01:03:55,920 --> 01:03:57,420
And I'm just using fewer characters.

1300
01:03:57,420 --> 01:04:01,176
So beyond the readability of it, just
took less work to write that out.

1301
01:04:01,176 --> 01:04:02,550
But what have I done differently?

1302
01:04:02,550 --> 01:04:05,800
Well, up at top, notice this.

1303
01:04:05,800 --> 01:04:11,330
It turns out that while, yes
CSS and HTML do support classes,

1304
01:04:11,330 --> 01:04:14,340
I don't technically need
them in this context, right.

1305
01:04:14,340 --> 01:04:18,930
Classes are especially useful for larger
web pages where you're reusing styles,

1306
01:04:18,930 --> 01:04:21,540
and you want to give them
names so that you can use them

1307
01:04:21,540 --> 01:04:23,040
as ingredients to your own web page.

1308
01:04:23,040 --> 01:04:27,390
And maybe even share those CSS classes
or ingredients with other people.

1309
01:04:27,390 --> 01:04:32,400
But here, I really just want to text
align center the body of my page.

1310
01:04:32,400 --> 01:04:35,430
I want to make the font
size large for the header,

1311
01:04:35,430 --> 01:04:38,580
the font size medium for main, and
the font size small for footer.

1312
01:04:38,580 --> 01:04:41,970
And so notice the absence of
any periods before these words.

1313
01:04:41,970 --> 01:04:47,604
I can also specify actual tags, or
elements, of my web page by their name.

1314
01:04:47,604 --> 01:04:49,770
I don't need to go to the
trouble of adding classes,

1315
01:04:49,770 --> 01:04:51,660
unless that would be helpful for me.

1316
01:04:51,660 --> 01:04:54,300
I can just distill it as this.

1317
01:04:54,300 --> 01:04:59,460
And modify the aesthetics of my web page
using just those selectors, as they're

1318
01:04:59,460 --> 01:05:00,270
called.

1319
01:05:00,270 --> 01:05:05,310
And indeed, if I open up this,
css3.html, it, too, looks identical.

1320
01:05:05,310 --> 01:05:08,730
But now, I'm going to take it
one step final and further.

1321
01:05:08,730 --> 01:05:15,030
In css4.html, I have really pruned
this file down to its essence.

1322
01:05:15,030 --> 01:05:19,230
And notice here, that there's no
mention even of the style tag,

1323
01:05:19,230 --> 01:05:21,060
up in the header of my web page.

1324
01:05:21,060 --> 01:05:26,790
Rather, in the head of my web pages,
only the title, as we've always seen,

1325
01:05:26,790 --> 01:05:27,960
and also a link tag.

1326
01:05:27,960 --> 01:05:29,910
Which, confusingly
named, has nothing to do

1327
01:05:29,910 --> 01:05:33,630
with blue links you might click in
a web page, those again are anchors.

1328
01:05:33,630 --> 01:05:37,620
But rather link href, so the
attribute is unfortunately

1329
01:05:37,620 --> 01:05:39,150
named the exact same thing.

1330
01:05:39,150 --> 01:05:44,790
But href css4.css, which happens to be
the name of a file in the same folder,
1331
01:05:44,790 --> 01:05:48,060
the relationship to which
is that it's a style sheet,

1332
01:05:48,060 --> 01:05:49,750
and then I'm closing that tag.

1333
01:05:49,750 --> 01:05:54,060
So, here notice, that I am specifying
in the head of my web page, hey browser,

1334
01:05:54,060 --> 01:05:58,530
please link to this other
file called css4.css

1335
01:05:58,530 --> 01:06:02,160
with which I have a relationship
that is that of stylesheet.

1336
01:06:02,160 --> 01:06:06,300
That is to say, hey browser, my
stylesheet is called css4.css.

1337
01:06:06,300 --> 01:06:07,560
And what is in that file?

1338
01:06:07,560 --> 01:06:10,990
Literally, the same thing that
was in the page a moment ago.

1339
01:06:10,990 --> 01:06:14,019
So I factored out all of
those lines from my HTML file,

1340
01:06:14,019 --> 01:06:15,310
and just put them in their own.

1341
01:06:15,310 --> 01:06:17,370
Which is useful for a few reasons.
1342
01:06:17,370 --> 01:06:19,900
One, now my colleague can
go off on his or her own

1343
01:06:19,900 --> 01:06:22,340
and focus entirely on that file.

1344
01:06:22,340 --> 01:06:24,500
Send me, somehow, the
latest version, eventually,

1345
01:06:24,500 --> 01:06:26,390
and we'll merge our work together.

1346
01:06:26,390 --> 01:06:30,560
But two, if I want to use these
same settings in multiple web pages,

1347
01:06:30,560 --> 01:06:34,040
if I want to make them freely
available as open source software,

1348
01:06:34,040 --> 01:06:36,890
I can now isolate all of those
properties, those aesthetics,

1349
01:06:36,890 --> 01:06:38,150
to one file.

1350
01:06:38,150 --> 01:06:40,670
And share it with anyone else
in my company or the world.

1351
01:06:40,670 --> 01:06:42,230
I can even have different themes.

1352
01:06:42,230 --> 01:06:45,860
In fact, if you've ever used software,
or WordPress, or any other kind
1353
01:06:45,860 --> 01:06:48,500
of blogging software that lets
you have standard functionality

1354
01:06:48,500 --> 01:06:51,950
with your account, but it also
lets you change the aesthetics.

1355
01:06:51,950 --> 01:06:54,230
Like maybe you have a green
theme, or a blue theme,

1356
01:06:54,230 --> 01:06:57,650
or a minimalist theme,
or a very 3-D theme,

1357
01:06:57,650 --> 01:06:59,660
or any number of different
aesthetic changes.

1358
01:06:59,660 --> 01:07:02,810
Those are generally implemented in the
form of just different style sheets.

1359
01:07:02,810 --> 01:07:06,209
So a web site like WordPress
might have one of these,

1360
01:07:06,209 --> 01:07:08,000
if everyone has to use
the same aesthetics.

1361
01:07:08,000 --> 01:07:10,257
Or two of these, or 10
of these, or any number,

1362
01:07:10,257 --> 01:07:12,090
or maybe they even let
you make custom style

1363
01:07:12,090 --> 01:07:16,550
sheets to configure your site or
your blog to look exactly as you,

1364
01:07:16,550 --> 01:07:18,230
yourself, intend.

1365
01:07:18,230 --> 01:07:24,920
And so using CSS can we do exactly
that kind of customization.

1366
01:07:24,920 --> 01:07:27,950
So at the end of the
day, web development

1367
01:07:27,950 --> 01:07:29,450
is really about writing code.

1368
01:07:29,450 --> 01:07:32,642
Its code in the language called
HTML, HyperText Markup Language,

1369
01:07:32,642 --> 01:07:34,850
which is really about the
structure of your web page.

1370
01:07:34,850 --> 01:07:37,790
What is the head, what is the
body, and what goes inside of each.

1371
01:07:37,790 --> 01:07:39,860
But then there's CSS,
Cascading Style Sheets,

1372
01:07:39,860 --> 01:07:43,280
that allow you to fine tune the web
page and really control the aesthetics.

1373
01:07:43,280 --> 01:07:46,276
And I've not really made the
prettiest of websites here.
1374
01:07:46,276 --> 01:07:48,650
But it turns out now that you
have these building blocks,

1375
01:07:48,650 --> 01:07:51,410
you know what a tag is, you
know what an attribute is,

1376
01:07:51,410 --> 01:07:53,360
and you've seen some
examples thereof, you're

1377
01:07:53,360 --> 01:07:56,240
really equipped to bootstrap yourself
to learning all the more about web

1378
01:07:56,240 --> 01:07:57,240
development on your own.

1379
01:07:57,240 --> 01:08:00,500
From any number of online resources,
or tutorials, or books, because now

1380
01:08:00,500 --> 01:08:02,990
you just need to build
out your vocabulary.

1381
01:08:02,990 --> 01:08:05,120
You just need to know
what other tags exist,

1382
01:08:05,120 --> 01:08:09,470
what other attributes exist for those
tags, and then you're off and running.

1383
01:08:09,470 --> 01:08:13,160
Indeed, what's important,
ultimately, is these concepts.

1384
01:08:13,160 --> 01:08:15,680
The fact that a web page is
nothing more than a text file

1385
01:08:15,680 --> 01:08:19,819
written in CSS, and HTML, and
maybe some JavaScript, still.

1386
01:08:19,819 --> 01:08:23,420
And that file, while most of
today lived on my own Mac,

1387
01:08:23,420 --> 01:08:27,170
could certainly be dragged and dropped
or somehow uploaded to a server.

1388
01:08:27,170 --> 01:08:33,890
So that it lives not at file:///
slash, but at http or https://.

1389
01:08:33,890 --> 01:08:37,111
And in order to get my
web site on the internet,

1390
01:08:37,111 --> 01:08:39,319
I just need to make sure I
have one of those servers.

1391
01:08:39,319 --> 01:08:42,950
And most of us don't go out
and buy big fancy rack servers,

1392
01:08:42,950 --> 01:08:44,779
let alone have our own data center.

1393
01:08:44,779 --> 01:08:48,740
Rather, we just sign up for free, or
we pay someone a few dollars a month,

1394
01:08:48,740 --> 01:08:52,370
a web host, so to speak, who
does have data centers like that.

1395
01:08:52,370 --> 01:08:53,899
Who does have servers like that.

1396
01:08:53,899 --> 01:08:57,080
And what they create for me
is a username, and a password.

1397
01:08:57,080 --> 01:08:59,479
And they give me, really
just a folder, at the end

1398
01:08:59,479 --> 01:09:02,160
of the day, into which I
can put all of my files--

1399
01:09:02,160 --> 01:09:08,479
.html, .css, .jpep and others, so
that now I can put my work of art

1400
01:09:08,479 --> 01:09:10,850
on the internet at a specific URL.

1401
01:09:10,850 --> 01:09:14,210
And if I go to the trouble,
too, of buying a domain name,

1402
01:09:14,210 --> 01:09:17,090
for a few dollars a year, or a
few dollars every several years.

1403
01:09:17,090 --> 01:09:19,170
And I can figure that
domain name to know about,

1404
01:09:19,170 --> 01:09:23,990
to point at, that web post, and the
IP address, or IP address is thereof.

1405
01:09:23,990 --> 01:09:26,510
Now can I have my own
custom domain name,

1406
01:09:26,510 --> 01:09:30,260
so now I am truly out
there on the worldwide web.

1407
01:09:30,260 --> 01:09:32,300
So all it takes is
these building blocks.

1408
01:09:32,300 --> 01:09:36,229
All it takes is an understanding of HTTP
and how this runs atop of the internet.

1409
01:09:36,229 --> 01:09:40,220
So that ultimately, you can not only
get some pages from the internet,

1410
01:09:40,220 --> 01:09:43,540
you, yourself, can put them there.

1411
01:09:43,540 --> 01:09:46,207