WEBVTT
X-TIMESTAMP-MAP=LOCAL:00:00:00.000,MPEGTS:900000

00:00:00.000 --> 00:01:17.540
[MUSIC PLAYING]

00:01:17.540 --> 00:01:18.980
SPEAKER 1: All right.

00:01:18.980 --> 00:01:23.030
This is CS50, and this
is already week 8.

00:01:23.030 --> 00:01:25.513
And if we think back to
the past several weeks now,

00:01:25.513 --> 00:01:28.430
recall that things started pretty
interestingly, pretty interactively,

00:01:28.430 --> 00:01:30.857
in like week 0, when
we were using Scratch,

00:01:30.857 --> 00:01:33.440
because with Scratch we had a
GUI, a graphical user interface.

00:01:33.440 --> 00:01:36.980
So even as we explored variables and
loops and conditionals and all of that,

00:01:36.980 --> 00:01:39.892
you had kind of a fun environment
in which to express those ideas.

00:01:39.892 --> 00:01:41.600
And then in week 1,
we sort of took a lot

00:01:41.600 --> 00:01:45.500
of that away, when we introduced C, and
a terminal window, and a command line,

00:01:45.500 --> 00:01:50.180
because now, all of your programs became
very textual, very keyboard-based,

00:01:50.180 --> 00:01:53.240
and gone was the mouse, the
animations, the menus, and so forth.

00:01:53.240 --> 00:01:55.430
And so now, fast
forward to week 8, we're

00:01:55.430 --> 00:01:58.760
going to bring those kinds of
user interface, UI, elements back,

00:01:58.760 --> 00:02:00.320
in the form of web programming.

00:02:00.320 --> 00:02:02.660
And this goes beyond
just laying out websites.

00:02:02.660 --> 00:02:06.878
This will, to this week and next week,
combine elements of the back-end server

00:02:06.878 --> 00:02:09.170
stuff that we've been doing
for the past several weeks,

00:02:09.170 --> 00:02:11.780
using Python, using
SQL, and now introducing

00:02:11.780 --> 00:02:14.780
a couple of other languages,
on the so-called client side,

00:02:14.780 --> 00:02:17.270
on your own Mac, your own PC,
your own phone, that's going

00:02:17.270 --> 00:02:19.280
to talk to those back-end services.

00:02:19.280 --> 00:02:22.580
So indeed, at this end of
CS50, does everything rather

00:02:22.580 --> 00:02:25.940
come together into a user interface
that's just super familiar.

00:02:25.940 --> 00:02:28.760
All of us are on our phones,
desktops, laptops, every day.

00:02:28.760 --> 00:02:32.060
And increasingly, even the mobile
apps that you all are using

00:02:32.060 --> 00:02:36.320
are implemented, not necessarily
in languages like Swift or Java,

00:02:36.320 --> 00:02:38.450
if you're familiar with
those, but with languages

00:02:38.450 --> 00:02:42.360
called HTML, CSS, and JavaScript,
which we'll focus on here today.

00:02:42.360 --> 00:02:47.180
But before we do that, let's provide a
foundation on which these apps can run,

00:02:47.180 --> 00:02:50.630
because indeed, we'll start to look
underneath the hood of how the internet

00:02:50.630 --> 00:02:54.913
itself works, albeit quickly, so that
we have kind of a mental model for where

00:02:54.913 --> 00:02:57.830
all of this code is running, how you
can troubleshoot issues, and how,

00:02:57.830 --> 00:03:00.560
really, ultimately, after
CS50, you can learn, by just

00:03:00.560 --> 00:03:02.965
poking around other actual websites.

00:03:02.965 --> 00:03:04.340
So the internet, we're all on it.

00:03:04.340 --> 00:03:08.910
Literally, right now, what
is it, in your own words?

00:03:08.910 --> 00:03:11.480
What is the internet?

00:03:11.480 --> 00:03:14.180
It's this utility nowadays, that
we all rather take for granted.

00:03:14.180 --> 00:03:15.263
How would you describe it?

00:03:15.263 --> 00:03:16.463
AUDIENCE: Big storage.

00:03:16.463 --> 00:03:18.380
SPEAKER 1: OK, big
storage, and indeed, that's

00:03:18.380 --> 00:03:22.260
how the cloud is described, which is
kind of an abstraction if you will,

00:03:22.260 --> 00:03:25.580
for a whole lot of wires
and cables and hardware.

00:03:25.580 --> 00:03:28.750
And the internet, other
formulations of the term, how else?

00:03:28.750 --> 00:03:30.500
AUDIENCE: Bunch of
data that we can reach.

00:03:30.500 --> 00:03:32.417
SPEAKER 1: OK, a bunch
of data that we can all

00:03:32.417 --> 00:03:36.050
reach, by way of being interconnected
somehow with wires or wirelessly.

00:03:36.050 --> 00:03:38.810
And so really, the internet,
too, is a hardware thing.

00:03:38.810 --> 00:03:42.620
There's a whole lot of servers out
there, that are somehow interconnected,

00:03:42.620 --> 00:03:45.140
via physical cables, via
internet service providers,

00:03:45.140 --> 00:03:47.190
via wireless connectivity, and the like.

00:03:47.190 --> 00:03:49.970
And once you start to have
networks of networks of networks,

00:03:49.970 --> 00:03:51.170
do you get the internet.

00:03:51.170 --> 00:03:54.140
Indeed, Harvard has its own network
and Yale has its own network,

00:03:54.140 --> 00:03:56.495
and your own home probably
has its own network.

00:03:56.495 --> 00:03:58.370
But once you start
connecting those networks,

00:03:58.370 --> 00:04:02.730
do you get the interconnected network
that is the internet as we now know it?

00:04:02.730 --> 00:04:05.360
So there's this whole
alphabet soup that goes

00:04:05.360 --> 00:04:07.610
with the internet, some of
whose acronyms and terms

00:04:07.610 --> 00:04:08.540
you've probably seen before.

00:04:08.540 --> 00:04:10.340
But let's at least peel
back some of those layers

00:04:10.340 --> 00:04:12.560
and consider what some of
the building blocks are.

00:04:12.560 --> 00:04:15.560
So here's a picture of the internet
before it was known as the internet,

00:04:15.560 --> 00:04:17.990
back in 1969, when it
was something called

00:04:17.990 --> 00:04:21.290
ARPANET, from the Advanced
Research Projects Agency.

00:04:21.290 --> 00:04:24.680
And the intent, originally, was just
to Interconnect a few universities here

00:04:24.680 --> 00:04:29.510
in Utah and California, literally
servers, or computers, in each

00:04:29.510 --> 00:04:31.700
of those areas, somehow
interconnected with wires,

00:04:31.700 --> 00:04:33.425
so that people could
start to share data.

00:04:33.425 --> 00:04:36.990
A year later, it expanded to
include MIT and Harvard and others.

00:04:36.990 --> 00:04:40.010
And now fast forward to
today, you have a huge number

00:04:40.010 --> 00:04:43.130
of systems around the world
that are on this same network.

00:04:43.130 --> 00:04:45.650
And, in fact, if I
just pull up a web page

00:04:45.650 --> 00:04:48.110
here, that's sort of
constantly changing,

00:04:48.110 --> 00:04:52.610
a visualization of the internet as
it might now be today, this here,

00:04:52.610 --> 00:04:55.880
in the abstract, all of these
lines and interconnections

00:04:55.880 --> 00:04:59.817
represent just how interconnected
the world is today.

00:04:59.817 --> 00:05:02.900
And it just means that there's all the
more servers, all the more cabling,

00:05:02.900 --> 00:05:06.630
all of the more hardware giving
us this underlying infrastructure.

00:05:06.630 --> 00:05:11.210
But if we focus, really, on just
these nodes, these individual dots,

00:05:11.210 --> 00:05:15.680
whether back in 1970, or now in 2021,
each of these dots you can think of as,

00:05:15.680 --> 00:05:19.193
yes, a server, but a certain type
of server, namely known as a router.

00:05:19.193 --> 00:05:21.110
And a router, as the
name implies, just routes

00:05:21.110 --> 00:05:25.110
data left to right, top to
bottom, from one point to another.

00:05:25.110 --> 00:05:28.940
And so there's all these servers here
on campus at Harvard, on Yale's campus,

00:05:28.940 --> 00:05:32.460
in Comcast's network, Verizon's
network, your own home network,

00:05:32.460 --> 00:05:35.269
you have your own routers out
there, whose purpose in life

00:05:35.269 --> 00:05:38.085
is to take in data and then
decide, should I send it this way,

00:05:38.085 --> 00:05:40.460
or this way, or this way, so
to speak, assuming there are

00:05:40.460 --> 00:05:42.320
multiple options with multiple cables.

00:05:42.320 --> 00:05:45.500
You, in your home, probably have just
one cable coming in or going out.

00:05:45.500 --> 00:05:49.970
But certainly, if you're a place like
Harvard or Yale or Comcast or the like,

00:05:49.970 --> 00:05:53.030
there's probably a whole
bunch of interconnections

00:05:53.030 --> 00:05:55.700
that the data can then
travel across ultimately.

00:05:55.700 --> 00:05:58.790
So how do we get data
among these routers?

00:05:58.790 --> 00:06:01.460
For instance, if you want
to send an email to someone

00:06:01.460 --> 00:06:04.310
at Stanford, in California,
from here, on the East Coast,

00:06:04.310 --> 00:06:08.580
or if you want to visit
www.stanford.edu, how does your laptop,

00:06:08.580 --> 00:06:12.365
your phone, your desktop, actually
get data from point A to point B?

00:06:12.365 --> 00:06:15.920
Well, essentially, your
laptop or phone knows

00:06:15.920 --> 00:06:19.950
when it boots up at the beginning of
the day, what the local router is, what

00:06:19.950 --> 00:06:21.490
the address of that local router is.

00:06:21.490 --> 00:06:24.300
So if you want to send an
email from my laptop over here,

00:06:24.300 --> 00:06:27.510
my laptop is essentially going to
hand it to the nearest Harvard router.

00:06:27.510 --> 00:06:29.520
And then, from there, I
don't know, I don't care

00:06:29.520 --> 00:06:31.062
how it gets the rest of the distance.

00:06:31.062 --> 00:06:33.630
But hopefully, within some
small number of steps later,

00:06:33.630 --> 00:06:36.270
Harvard's router is going to
send it to maybe Boston's router

00:06:36.270 --> 00:06:38.395
is going to send it to
California's router is going

00:06:38.395 --> 00:06:41.580
to send it to Stanford's router, until
finally it reaches Stanford's email

00:06:41.580 --> 00:06:42.180
server.

00:06:42.180 --> 00:06:45.630
And we can depict this, actually,
how about a bit playfully.

00:06:45.630 --> 00:06:47.880
Thankfully, the course's
staff kindly volunteered

00:06:47.880 --> 00:06:52.600
to create a visualization for
this, using a familiar technology.

00:06:52.600 --> 00:06:56.130
So here we have some of our TFs
and TAs and CAs present and past.

00:06:56.130 --> 00:06:59.280
Let me go ahead and full
screen this window here.

00:06:59.280 --> 00:07:02.200
Give me just a moment to
pull it up on my screen here.

00:07:02.200 --> 00:07:06.990
And we'll consider what happens if we
want to send a packet of information

00:07:06.990 --> 00:07:11.310
from one person or router,
namely Phyllis in this case,

00:07:11.310 --> 00:07:14.370
in the bottom right hand corner,
up to Brian, in this case,

00:07:14.370 --> 00:07:15.640
in the top left hand corner.

00:07:15.640 --> 00:07:18.270
So each of the staff members
here represents exactly one

00:07:18.270 --> 00:07:20.860
of these routers on the internet.

00:07:20.860 --> 00:07:25.360
[MUSIC PLAYING]

00:07:48.730 --> 00:07:50.220
[APPLAUSE]

00:07:50.220 --> 00:07:51.420
The applause is appreciated.

00:07:51.420 --> 00:07:53.700
It actually took us a
significant number of attempts

00:07:53.700 --> 00:07:55.290
to get that ultimately right.

00:07:55.290 --> 00:07:58.440
So when, what was it the
staff were all passing here?

00:07:58.440 --> 00:08:01.523
Here we have just, physically, what
it was the staff were passing around.

00:08:01.523 --> 00:08:03.690
So Phyllis started with an
envelope, inside of which

00:08:03.690 --> 00:08:05.760
was that email, presumably,
on the East Coast,

00:08:05.760 --> 00:08:08.945
and she wanted to send it to Brian on
the West Coast, top left hand corner.

00:08:08.945 --> 00:08:11.820
And so she had all of these different
options, different connections,

00:08:11.820 --> 00:08:14.920
between her and point B, namely Brian.

00:08:14.920 --> 00:08:18.480
She could go up, down, in her case, and
then each of those subsequent routers

00:08:18.480 --> 00:08:21.270
could go up, down, left, or right,
until it finally reaches Brian.

00:08:21.270 --> 00:08:23.250
And long story short,
there's algorithms that

00:08:23.250 --> 00:08:26.620
figure out how you decide
to send a packet up, down,

00:08:26.620 --> 00:08:28.470
left, or right, so to speak.

00:08:28.470 --> 00:08:33.525
But they do so by taking an input, and
in the form of input is this envelope.

00:08:33.525 --> 00:08:36.150
And there's at least a couple of
things on the outside of this,

00:08:36.150 --> 00:08:39.090
because all of these routers and,
in turn, all of our Macs and PCs

00:08:39.090 --> 00:08:41.820
and phones these days,
speak something called

00:08:41.820 --> 00:08:44.940
TCP/IP, a set of
acronyms you've probably

00:08:44.940 --> 00:08:47.820
seen somewhere on your
phone, your Mac or PC,

00:08:47.820 --> 00:08:52.230
in print somewhere, which refers
to two protocols, two conventions,

00:08:52.230 --> 00:08:55.003
that computers use to
inter-communicate these days.

00:08:55.003 --> 00:08:55.920
Now what's a protocol?

00:08:55.920 --> 00:08:58.440
A protocol is like a set
of rules, that you behave.

00:08:58.440 --> 00:09:00.900
In healthier times, I might
extend my hand and someone

00:09:00.900 --> 00:09:04.440
like Carter might extend his hand,
thereby interacting with me, based

00:09:04.440 --> 00:09:07.680
on a human protocol of like
literally physically shaking hands.

00:09:07.680 --> 00:09:10.890
Nowadays, we have mask protocols,
whereby what you need to do

00:09:10.890 --> 00:09:12.400
is wear a mask indoors.

00:09:12.400 --> 00:09:15.450
But that, too, is just a set of rules
that we all follow and adhere to,

00:09:15.450 --> 00:09:17.760
that's somewhere
standardized and documented.

00:09:17.760 --> 00:09:20.520
So computers use protocols
all the time to govern

00:09:20.520 --> 00:09:23.430
how they are sending information
and receiving information.

00:09:23.430 --> 00:09:28.290
And TCP and IP are two such protocols
that standardize this as follows.

00:09:28.290 --> 00:09:31.020
What TCP/IP tells someone
like Phyllis to do,

00:09:31.020 --> 00:09:34.960
if she wants to send an email to Brian,
is put the email in a virtual envelope,

00:09:34.960 --> 00:09:35.710
so to speak.

00:09:35.710 --> 00:09:40.890
But on the outside of that virtual
envelope, put Brian's unique address.

00:09:40.890 --> 00:09:44.940
And I'll describe this as destination
on the middle of the envelope,

00:09:44.940 --> 00:09:47.820
just like in our human world,
you would write the destination

00:09:47.820 --> 00:09:49.140
address on the envelope.

00:09:49.140 --> 00:09:53.010
And then she's going to put her own
source address in the top left hand

00:09:53.010 --> 00:09:55.559
corner, just like you, the
sender, would put your own source

00:09:55.559 --> 00:09:56.980
address in the human world.

00:09:56.980 --> 00:10:00.240
But, instead of these addresses
being like something Kirkland Street,

00:10:00.240 --> 00:10:04.950
Cambridge, Massachusetts 02138, USA,
you probably know that computers

00:10:04.950 --> 00:10:09.450
on the internet have unique addresses
of their own, known as IP addresses.

00:10:09.450 --> 00:10:12.000
And an IP address is
just a numeric identifier

00:10:12.000 --> 00:10:15.270
on the internet, that allows
computers, like Phyllis and Brian,

00:10:15.270 --> 00:10:18.240
to address these envelopes
to and from each other.

00:10:18.240 --> 00:10:20.550
And you've probably seen
the format at some point.

00:10:20.550 --> 00:10:24.120
Typically, the format of IP
addresses is something dot something

00:10:24.120 --> 00:10:26.070
dot something dot something.

00:10:26.070 --> 00:10:28.680
Each of those somethings,
represented here with a hash symbol,

00:10:28.680 --> 00:10:33.660
is a number from 0 through 255.

00:10:33.660 --> 00:10:36.720
And, based on that little
hint, if each of these hashes

00:10:36.720 --> 00:10:40.440
represents a number from 0
to 255, each of those hashes

00:10:40.440 --> 00:10:43.350
is represented with
how many bytes or bits?

00:10:43.350 --> 00:10:47.250
Eight bits or one byte, which is to
say, we can extrapolate from there,

00:10:47.250 --> 00:10:50.880
an IP address must use
32 bits or 4 bytes,

00:10:50.880 --> 00:10:54.450
if we rewind now to some of the
primitives we looked at in week 0.

00:10:54.450 --> 00:10:56.800
And what that means is,
at least at a glance,

00:10:56.800 --> 00:11:00.962
it looks like we have 4 billion some
odd IP addresses available to us.

00:11:00.962 --> 00:11:02.670
Now, unfortunately,
there's a huge number

00:11:02.670 --> 00:11:05.580
of humans in the world these days,
all of whom have, many of whom

00:11:05.580 --> 00:11:09.030
have multiple devices, certainly
in places like this, where you have

00:11:09.030 --> 00:11:12.783
a laptop, and a phone, and you have
other internet of things-type devices,

00:11:12.783 --> 00:11:14.200
all of which need to be addressed.

00:11:14.200 --> 00:11:16.140
So there's another type
of IP address that's

00:11:16.140 --> 00:11:17.820
starting to be used more commonly.

00:11:17.820 --> 00:11:20.220
This is version 4 of IP.

00:11:20.220 --> 00:11:23.040
There's also version 6
which, instead of 32 bits,

00:11:23.040 --> 00:11:27.360
uses 128 bits, which gives us a
crazy number of possible addresses

00:11:27.360 --> 00:11:31.680
for computers, so we can at least handle
all of the additional devices we now

00:11:31.680 --> 00:11:32.620
have today.

00:11:32.620 --> 00:11:35.580
So this is to say, what ultimately
is going on this envelope

00:11:35.580 --> 00:11:39.750
is the destination address, that is
Brian's IP address, and the source

00:11:39.750 --> 00:11:43.830
address, that is Phyllis's IP address,
so that this packet can go from point A

00:11:43.830 --> 00:11:46.860
to point B, and if need
be, back, by just flipping

00:11:46.860 --> 00:11:48.450
the source and the destination.

00:11:48.450 --> 00:11:53.460
But on the internet, you presumably know
that there's not just email servers.

00:11:53.460 --> 00:11:57.000
There's web servers, there's chat
servers, video servers, game servers.

00:11:57.000 --> 00:12:00.000
Like there's all of these different
functions on the internet nowadays.

00:12:00.000 --> 00:12:02.580
And so, when Brian
receives that envelope,

00:12:02.580 --> 00:12:09.240
how does he know it's an email, versus
a web page, versus a Skype call,

00:12:09.240 --> 00:12:11.430
versus something else altogether.

00:12:11.430 --> 00:12:14.580
Well, it turns out that we
can look at the other part

00:12:14.580 --> 00:12:18.090
of this acronym, the TCP in TCP/IP.

00:12:18.090 --> 00:12:20.980
And what TCP allows us
to do, for instance,

00:12:20.980 --> 00:12:22.630
is specify a couple of things.

00:12:22.630 --> 00:12:27.600
One, the type of service whose
data is in this envelope, that is,

00:12:27.600 --> 00:12:30.690
it does this with a numeric identifier.

00:12:30.690 --> 00:12:35.460
And I'm going to go ahead and write down
a colon, and the word port, P-O-R-T.

00:12:35.460 --> 00:12:39.030
And I'm going to write that in the
source address, too, colon and port.

00:12:39.030 --> 00:12:41.190
So technically, now,
what's on this envelope

00:12:41.190 --> 00:12:43.920
is not just the addresses,
but also a unique number

00:12:43.920 --> 00:12:48.990
that represents what kind of service
is being sent from point A to point B,

00:12:48.990 --> 00:12:52.600
whether it's email, or web traffic,
or Skype, or something else.

00:12:52.600 --> 00:12:57.150
These numbers are standardized, and here
are just two of the most common ones,

00:12:57.150 --> 00:13:00.000
not even in the context of email,
but in the context of the web.

00:13:00.000 --> 00:13:02.940
Port 80 is typically used
whenever an envelope contains

00:13:02.940 --> 00:13:07.170
a web page, or a request
therefor, or the number 443,

00:13:07.170 --> 00:13:11.010
when that request is actually
encrypted, using that thing you probably

00:13:11.010 --> 00:13:15.000
know, in URLs, known as HTTPS,
where the S literally means secure.

00:13:15.000 --> 00:13:16.890
More on what the HTTP means later.

00:13:16.890 --> 00:13:20.763
If it's email, the number
might be 25 or 465, or 587.

00:13:20.763 --> 00:13:23.680
These are the kinds of things you
Google if you ultimately care about.

00:13:23.680 --> 00:13:28.080
But if you've ever had to configure,
like, Outlook or even Gmail

00:13:28.080 --> 00:13:30.480
to talk to another account,
you might very well

00:13:30.480 --> 00:13:34.710
have seen these numbers, by typing
in something like SMTP.Gmail.com

00:13:34.710 --> 00:13:37.700
and then a number, which is only to
say these numbers are omnipresent.

00:13:37.700 --> 00:13:39.450
But they're typically
not things you and I

00:13:39.450 --> 00:13:42.390
have to care about, because
servers and computers nowadays

00:13:42.390 --> 00:13:44.620
automate much of this process.

00:13:44.620 --> 00:13:49.020
But that's all it takes, ultimately, for
Phyllis to get this message to Brian.

00:13:49.020 --> 00:13:50.850
But what if it's a really big message?

00:13:50.850 --> 00:13:54.160
If it's a short email, It might
fit perfectly in one single packet,

00:13:54.160 --> 00:13:54.750
so to speak.

00:13:54.750 --> 00:13:58.050
But suppose that Phyllis wants
to send Brian a picture of a cat,

00:13:58.050 --> 00:14:00.390
like this, or worse, a video of a cat.

00:14:00.390 --> 00:14:04.620
It would be kind of inequitable
if no one else could do anything

00:14:04.620 --> 00:14:06.870
on the internet, just
because Phyllis wants

00:14:06.870 --> 00:14:10.410
to send Brian a really big picture,
a really big video of a cat.

00:14:10.410 --> 00:14:14.160
It would be nice if we could kind
of time-share the interconnections,

00:14:14.160 --> 00:14:17.338
across these routers, so that
we can give a little bit of time

00:14:17.338 --> 00:14:19.380
to Phyllis, a little bit
of time to someone else,

00:14:19.380 --> 00:14:22.588
a little bit of time to someone else,
so that eventually, Phyllis' entire cat

00:14:22.588 --> 00:14:23.700
gets through the internet.

00:14:23.700 --> 00:14:29.280
But in terms of fairness, she
doesn't monopolize the bandwidth

00:14:29.280 --> 00:14:31.650
of the network in question.

00:14:31.650 --> 00:14:35.790
And this, then, allows us to
do one other feature of TCP/IP,

00:14:35.790 --> 00:14:38.880
which is fragmentation,
where we can temporarily,

00:14:38.880 --> 00:14:41.760
and Phyllis's computer would
do this automatically, fragment

00:14:41.760 --> 00:14:45.390
the big packet in question,
or the big file in question,

00:14:45.390 --> 00:14:50.370
and then use, not just a single
envelope, but maybe a second, a third,

00:14:50.370 --> 00:14:52.178
and a fourth, or more.

00:14:52.178 --> 00:14:53.970
If we do that, though,
we're probably going

00:14:53.970 --> 00:14:57.840
to need one other piece of information,
just logically, on these envelopes.

00:14:57.840 --> 00:15:01.140
Like, if you were implementing this,
chopping up this picture of a cat

00:15:01.140 --> 00:15:04.110
into four parts, like,
intuitively, what might you

00:15:04.110 --> 00:15:07.720
want to put virtually on the
outside of this envelope now?

00:15:07.720 --> 00:15:08.220
Yeah.

00:15:08.220 --> 00:15:09.067
AUDIENCE: The order.

00:15:09.067 --> 00:15:10.650
SPEAKER 1: The order of them, somehow.

00:15:10.650 --> 00:15:14.280
So probably something like part
one of four, part two of four,

00:15:14.280 --> 00:15:15.970
part three of four, and so forth.

00:15:15.970 --> 00:15:18.600
So I'm going to write one more thing
in like the memo line of the envelope

00:15:18.600 --> 00:15:19.110
here.

00:15:19.110 --> 00:15:21.360
I put some kind of
sequence number, that's

00:15:21.360 --> 00:15:24.000
just a little bit of a
clue to Brian, to know

00:15:24.000 --> 00:15:25.980
in what order to
reassemble these things.

00:15:25.980 --> 00:15:29.010
And even more powerfully
than that, this actually

00:15:29.010 --> 00:15:33.060
gives us this simple primitive of
just using INTs on these envelopes,

00:15:33.060 --> 00:15:34.260
in these packets.

00:15:34.260 --> 00:15:39.690
If Brian receives envelopes like these,
with numbers like these in the memo

00:15:39.690 --> 00:15:43.500
field, what other feature
does TCP apparently

00:15:43.500 --> 00:15:46.350
enable Brian and Phyllis to implement?

00:15:46.350 --> 00:15:48.090
This is a bit subtle.

00:15:48.090 --> 00:15:50.420
But it's not just the
ordering of the packets.

00:15:50.420 --> 00:15:54.510
What else might be useful about
putting numbers on these things,

00:15:54.510 --> 00:15:56.797
might you think?

00:15:56.797 --> 00:15:57.880
What might be useful here?

00:15:57.880 --> 00:15:58.996
Yeah, in back.

00:15:58.996 --> 00:16:00.740
AUDIENCE: How about if you like missed.

00:16:00.740 --> 00:16:02.660
SPEAKER 1: If you missed something
that was intended to be sent,

00:16:02.660 --> 00:16:03.660
if I heard that correct.

00:16:03.660 --> 00:16:07.918
So short answer, exactly, yes, TCP,
because of this simple little integer

00:16:07.918 --> 00:16:10.460
that we're including, can quote
unquote "guarantee" delivery.

00:16:10.460 --> 00:16:10.970
Why?

00:16:10.970 --> 00:16:14.150
Because if Brian receives one
out of four, two out of four,

00:16:14.150 --> 00:16:16.370
four out of four, but
not three out of four,

00:16:16.370 --> 00:16:20.210
he now knows, predictably, that
he needs to ask Phyllis, somehow,

00:16:20.210 --> 00:16:21.720
to resend that packet.

00:16:21.720 --> 00:16:25.610
And so this is why pretty much
always, if you receive an email,

00:16:25.610 --> 00:16:28.220
you either receive the whole
thing, or nothing at all.

00:16:28.220 --> 00:16:31.550
Like sentences and words and
paragraphs should never really

00:16:31.550 --> 00:16:33.170
be missing from an email.

00:16:33.170 --> 00:16:35.287
Or if you download a
photograph on the web,

00:16:35.287 --> 00:16:37.370
it shouldn't just have a
blank hole in the middle,

00:16:37.370 --> 00:16:40.460
just because that packet of
information happened to be lost.

00:16:40.460 --> 00:16:44.660
TCP, if it is the protocol being used to
transmit data from point A to point B,

00:16:44.660 --> 00:16:48.600
ensures that it either all gets there,
or ultimately, none of it at all.

00:16:48.600 --> 00:16:51.920
So this is an important property,
but, just as a teaser there's

00:16:51.920 --> 00:16:53.120
other protocols out there.

00:16:53.120 --> 00:16:56.540
There's something called UDP,
which is an alternative to TCP,

00:16:56.540 --> 00:16:58.280
that doesn't guarantee delivery.

00:16:58.280 --> 00:17:01.880
And just as a taste of why you might
ever not want to guarantee delivery,

00:17:01.880 --> 00:17:07.175
maybe you're watching like a streaming
video, like a sports event online.

00:17:07.175 --> 00:17:09.050
You probably don't
necessarily want the thing

00:17:09.050 --> 00:17:12.285
to buffer and buffer and buffer, just
because you have a slow connection,

00:17:12.285 --> 00:17:14.160
because you're going to
start to miss things.

00:17:14.160 --> 00:17:16.280
And then you're going to be the
only one in the world watching

00:17:16.280 --> 00:17:19.658
the game that ended 20 minutes ago, when
everyone else is sort of up to speed.

00:17:19.658 --> 00:17:21.950
Similarly for a voice call,
it would be really annoying

00:17:21.950 --> 00:17:23.750
if our voice is constantly buffered.

00:17:23.750 --> 00:17:26.487
So UDP might be a good
protocol for making sure

00:17:26.487 --> 00:17:29.570
that, even if the person on the other
end sounds a little crappy, at least

00:17:29.570 --> 00:17:30.800
you can hear them.

00:17:30.800 --> 00:17:33.590
It's not pausing and
resending and resending,

00:17:33.590 --> 00:17:37.770
because that would really slow down
that sort of human interaction.

00:17:37.770 --> 00:17:40.670
So, in short, IP handles the
addressing of these packets,

00:17:40.670 --> 00:17:44.150
and standardizes numbers that every
computer, your own included, gets,

00:17:44.150 --> 00:17:48.350
and TCP handles the standardization
of like what services

00:17:48.350 --> 00:17:54.470
can be used, between points A and
point B. All right, this is great,

00:17:54.470 --> 00:17:58.460
but presumably, when Phyllis
sends a message to Brian,

00:17:58.460 --> 00:18:00.590
she doesn't really know
and probably shouldn't

00:18:00.590 --> 00:18:02.720
care what his IP address is, right?

00:18:02.720 --> 00:18:05.300
These days it's, like, I don't
know most of the phone numbers

00:18:05.300 --> 00:18:06.470
that my friends have.

00:18:06.470 --> 00:18:08.422
I instead look them up in some way.

00:18:08.422 --> 00:18:10.880
And, indeed, when you visit a
website, what do you type in?

00:18:10.880 --> 00:18:13.857
It's typically not something
dot something dot something dot

00:18:13.857 --> 00:18:16.107
something, where each of
those somethings is a number.

00:18:16.107 --> 00:18:17.990
What do you typically
type in to a browser?

00:18:17.990 --> 00:18:19.430
So a domain name, right?

00:18:19.430 --> 00:18:23.839
Something like Stanford.edu,
Harvard.edu, Yale.edu, gmail.com,

00:18:23.839 --> 00:18:25.880
or any other such domain name.

00:18:25.880 --> 00:18:28.430
And so, thankfully,
there's another system

00:18:28.430 --> 00:18:33.359
on the internet, one more acronym for
today, called DNS, domain name system.

00:18:33.359 --> 00:18:37.550
And pretty much every network on the
internet, Harvard's, Yale's, Comcast's,

00:18:37.550 --> 00:18:41.647
your own home network, somewhere,
somehow has a DNS server.

00:18:41.647 --> 00:18:43.730
You probably didn't have
to configure it yourself.

00:18:43.730 --> 00:18:48.150
Someone else did, your campus, your
job, your internet service provider.

00:18:48.150 --> 00:18:51.920
But there is some server connected
somehow to the network you're on,

00:18:51.920 --> 00:18:56.510
via wires or wirelessly, that just
has a really big table in its memory,

00:18:56.510 --> 00:18:59.480
a big spreadsheet, if you
will, or, if you prefer,

00:18:59.480 --> 00:19:03.800
a hash table, that has at least
two columns of keys and values

00:19:03.800 --> 00:19:04.620
respectively.

00:19:04.620 --> 00:19:06.050
Where on the left hand
side is what we'll

00:19:06.050 --> 00:19:08.070
call domain name,
something like Harvard.edu,

00:19:08.070 --> 00:19:12.710
Yale.edu, an IP address on the
right hand side, that is to say,

00:19:12.710 --> 00:19:17.420
a DNS server's purpose in life
is just to translate domain names

00:19:17.420 --> 00:19:18.705
to IP addresses.

00:19:18.705 --> 00:19:21.080
And vice versa, if you want
to go in the other direction,

00:19:21.080 --> 00:19:25.880
and technically, just to be precise, it
translates fully qualified domain names

00:19:25.880 --> 00:19:27.240
to IP addresses.

00:19:27.240 --> 00:19:29.250
And we'll see what those
are in just a moment.

00:19:29.250 --> 00:19:31.460
But again, all of this just
kind of happens magically

00:19:31.460 --> 00:19:33.210
when you turn on your
phone or your laptop

00:19:33.210 --> 00:19:37.100
today, because all of these things
are pre-configured for us nowadays.

00:19:37.100 --> 00:19:42.560
So how can we actually start to
see some of these things in action?

00:19:42.560 --> 00:19:48.720
Well, let's go ahead and poke around,
for instance, at a couple of URLs here.

00:19:48.720 --> 00:19:52.340
Let's see what we can actually do
now with these basic primitives.

00:19:52.340 --> 00:19:56.480
If we now have the ability to
move data from point A to point B,

00:19:56.480 --> 00:19:59.060
and what can be in that envelope
could be, yes, an email,

00:19:59.060 --> 00:20:01.820
but today, onward, it's really
going to be web content.

00:20:01.820 --> 00:20:04.010
There's going to be content
that you're requesting,

00:20:04.010 --> 00:20:05.392
like give me today's home page.

00:20:05.392 --> 00:20:07.100
And there's content
you're sending, which

00:20:07.100 --> 00:20:09.320
would be the contents of
that actual home page.

00:20:09.320 --> 00:20:14.450
And so, just to go one level deeper,
now that we have these packets that

00:20:14.450 --> 00:20:18.410
are getting from point A to
point B using TCP/IP, let's

00:20:18.410 --> 00:20:23.030
put something specific inside of them,
not just an email and a bunch of text,

00:20:23.030 --> 00:20:27.958
but something called HTTP, which
stands for hypertext transfer protocol.

00:20:27.958 --> 00:20:29.750
You've seen this for
decades now, probably,

00:20:29.750 --> 00:20:33.140
in the form of URLs, so much so that you
probably don't even type it nowadays.

00:20:33.140 --> 00:20:35.330
Your browser just adds
it for you automatically,

00:20:35.330 --> 00:20:38.910
and you just type in Harvard.edu,
or Yale.edu, or the like.

00:20:38.910 --> 00:20:42.200
But HTTP is just a final
protocol that we'll

00:20:42.200 --> 00:20:46.220
talk about here, that just
standardizes how web browsers and web

00:20:46.220 --> 00:20:48.420
servers inter-communicate.

00:20:48.420 --> 00:20:51.410
So this is a distinction now
between the internet and the web.

00:20:51.410 --> 00:20:53.810
The internet is really like
the low-level plumbing,

00:20:53.810 --> 00:20:56.900
all of the cables, all of a
technology that just moves packets

00:20:56.900 --> 00:21:01.130
from left to right, right to left, top
to bottom, that gets data from point A

00:21:01.130 --> 00:21:05.750
to point B. You can do anything you
want on top of that internet nowadays,

00:21:05.750 --> 00:21:09.930
email and web and video and chat
and gaming, and all of that.

00:21:09.930 --> 00:21:13.460
So HTTP, or the web,
is just one application

00:21:13.460 --> 00:21:17.503
that is conceptually on top of,
built on top of the internet.

00:21:17.503 --> 00:21:19.670
Once you take for granted
that there is an internet,

00:21:19.670 --> 00:21:21.260
you can do really
interesting things with it,

00:21:21.260 --> 00:21:23.750
just like in our physical world,
once you have electricity,

00:21:23.750 --> 00:21:26.750
you can just assume you can do really
interesting things with that, too,

00:21:26.750 --> 00:21:28.910
without even knowing
or caring how it works.

00:21:28.910 --> 00:21:32.610
But now that you'll be
programming for the web,

00:21:32.610 --> 00:21:35.940
it's useful to understand how
some of these things indeed work.

00:21:35.940 --> 00:21:40.010
So let's take a peek at the
format of the things that

00:21:40.010 --> 00:21:41.210
go inside of these messages.

00:21:41.210 --> 00:21:43.730
These days, it's usually
actually HTTPS that's

00:21:43.730 --> 00:21:45.980
in play, where, again,
the S just means secure.

00:21:45.980 --> 00:21:50.900
More on that later, but the HTTP is
what standardizes what kinds of messages

00:21:50.900 --> 00:21:52.280
go inside of these envelopes.

00:21:52.280 --> 00:21:56.090
And wonderfully, it's just
textual information, typically.

00:21:56.090 --> 00:22:00.800
There is a simple text format
that humans decided on years ago,

00:22:00.800 --> 00:22:04.250
that goes inside of these
envelopes, that tells a browser how

00:22:04.250 --> 00:22:08.570
to request information from a server,
and how to respond from the server

00:22:08.570 --> 00:22:10.200
to that client with information.

00:22:10.200 --> 00:22:16.400
So here's, for instance, a canonical
URL, https://www.example.com.

00:22:16.400 --> 00:22:18.170
What might you see at the end of this?

00:22:18.170 --> 00:22:19.638
You might sometimes see a slash.

00:22:19.638 --> 00:22:22.430
Browsers nowadays kind of simplify
things and don't show it to you.

00:22:22.430 --> 00:22:25.580
But slash, as we'll see, just
represents like the default

00:22:25.580 --> 00:22:28.460
folder, the root of the
web server's hard drive,

00:22:28.460 --> 00:22:29.885
like whatever the base is of it.

00:22:29.885 --> 00:22:35.990
It's like C colon backslash on
Windows, or it's my computer on Mac OS.

00:22:35.990 --> 00:22:38.240
But a URL can have more than that.

00:22:38.240 --> 00:22:40.790
It can have slash path,
where path is just a word,

00:22:40.790 --> 00:22:44.360
or multiple words, that sort of
describe a longer part of the URL.

00:22:44.360 --> 00:22:46.880
That path could actually be
a specific file, we'll see,

00:22:46.880 --> 00:22:49.070
like something called file.html.

00:22:49.070 --> 00:22:52.490
More on HTML in just a bit, or
it can even be slash folder,

00:22:52.490 --> 00:22:56.720
maybe with another slash, or
maybe it can be /folder/file.html.

00:22:56.720 --> 00:23:00.890
Now these days Safari, and even Chrome
to some extent, and other browsers,

00:23:00.890 --> 00:23:04.430
are in the habit of trying to hide
more and more of these details

00:23:04.430 --> 00:23:06.170
from you and me.

00:23:06.170 --> 00:23:08.930
Ultimately, though, it'll
be useful to understand

00:23:08.930 --> 00:23:12.620
what URLs you're at, because
it maps directly to the code,

00:23:12.620 --> 00:23:14.450
that we're ultimately going to write.

00:23:14.450 --> 00:23:17.090
But this is only to say that
all this stuff in yellow

00:23:17.090 --> 00:23:22.130
refers to, presumably, a specific
file and/or folder on the web

00:23:22.130 --> 00:23:24.022
server, on which you're programming.

00:23:24.022 --> 00:23:24.980
All right, what's this?

00:23:24.980 --> 00:23:29.810
Example.com, this is the domain
name, as we described it earlier.

00:23:29.810 --> 00:23:32.430
Example.com is the
so-called domain name.

00:23:32.430 --> 00:23:37.340
This whole thing, www.example.com,
is the fully qualified domain name.

00:23:37.340 --> 00:23:41.240
And what the WW is referring
to is specifically the name

00:23:41.240 --> 00:23:44.100
of a specific server in that domain.

00:23:44.100 --> 00:23:48.650
So back in the day, there was
a www.example.com web server.

00:23:48.650 --> 00:23:52.250
There might have been a
mail.example.com mail server.

00:23:52.250 --> 00:23:55.310
There might have been a
chat.example.com chat server.

00:23:55.310 --> 00:24:00.140
Nowadays, this hostname, or
subdomain, depending on the context,

00:24:00.140 --> 00:24:02.390
can actually refer to a whole
bunch of servers, right?

00:24:02.390 --> 00:24:05.600
When you go to www.facebook.com,
that's not one server,

00:24:05.600 --> 00:24:07.460
that's thousands of servers nowadays.

00:24:07.460 --> 00:24:09.440
So long story short,
there's technology that

00:24:09.440 --> 00:24:11.930
somehow get your data
to one of those servers,

00:24:11.930 --> 00:24:15.300
but this whole thing is what we
meant by fully qualified domain name.

00:24:15.300 --> 00:24:17.630
This thing here, hostname,
in the context of an email

00:24:17.630 --> 00:24:20.510
address it might alternatively
be called a subdomain.

00:24:20.510 --> 00:24:23.870
This thing here, top
level domain, you probably

00:24:23.870 --> 00:24:27.230
know that dot com means commercial,
although anyone can buy it these days.

00:24:27.230 --> 00:24:29.570
Dot org is similar, dot net.

00:24:29.570 --> 00:24:32.990
Some of them are a bit restricted,
dot mil is just for the US military,

00:24:32.990 --> 00:24:35.520
dot edu is just for accredited
educational institutions.

00:24:35.520 --> 00:24:39.020
But there are hundreds, if
not more, top level domains

00:24:39.020 --> 00:24:41.510
nowadays, some more popular than others.

00:24:41.510 --> 00:24:45.350
CS50's tools, for instance, use CS50.io.

00:24:45.350 --> 00:24:47.990
IO sort of connotes input-output.

00:24:47.990 --> 00:24:52.940
It actually belongs, though, to
a small island nation, a country,

00:24:52.940 --> 00:24:59.175
whose country code is .io, and you see
other two letter top level domains that

00:24:59.175 --> 00:25:00.050
are country specific.

00:25:00.050 --> 00:25:04.208
Indeed, it's something.uk,
something.jp, and the like typically

00:25:04.208 --> 00:25:05.000
refer to countries.

00:25:05.000 --> 00:25:07.850
But some of them have been
rather co-opted, .tv as well,

00:25:07.850 --> 00:25:10.740
because they have these
meanings in English as well.

00:25:10.740 --> 00:25:12.800
Lastly, this is what
we'll call the protocol.

00:25:12.800 --> 00:25:16.850
That specifies how the server uses
this URL to get data from point A

00:25:16.850 --> 00:25:20.160
to point B. So what is
inside of this envelope?

00:25:20.160 --> 00:25:22.430
Let's now start poking
around a little bit more.

00:25:22.430 --> 00:25:24.020
What is inside of this envelope?

00:25:24.020 --> 00:25:27.590
It's essentially, for our
purposes today, one of two verbs,

00:25:27.590 --> 00:25:29.600
either GET or POST.

00:25:29.600 --> 00:25:32.420
And if any of you have dabbled
with HTML or made your own website,

00:25:32.420 --> 00:25:34.378
you might have seen some
of these terms before.

00:25:34.378 --> 00:25:38.510
But these two verbs describe
just how to send information

00:25:38.510 --> 00:25:40.760
from you to the server.

00:25:40.760 --> 00:25:42.980
Long story short, more
on this next week,

00:25:42.980 --> 00:25:47.280
GET means put any user input
in the URL, POST means hide it,

00:25:47.280 --> 00:25:50.450
so that things you're searching for,
credit card numbers you're typing in,

00:25:50.450 --> 00:25:53.442
usernames and passwords you're
inputting, don't show up in the URL,

00:25:53.442 --> 00:25:55.400
and are therefore visible
to anyone with access

00:25:55.400 --> 00:25:57.480
to your computer and
your search history,

00:25:57.480 --> 00:26:01.610
but rather they're somehow provided
elsewhere, deeper into that envelope.

00:26:01.610 --> 00:26:04.100
But for now, we'll focus
almost entirely on GET,

00:26:04.100 --> 00:26:07.550
which is perhaps the most common
one that we're always going to use.

00:26:07.550 --> 00:26:09.060
And what we're going to do is this.

00:26:09.060 --> 00:26:11.270
Let me switch over just
to a blank screen here.

00:26:11.270 --> 00:26:14.990
And if we assume that little
old me is this laptop here,

00:26:14.990 --> 00:26:20.000
and I'm connected to the cloud, and
in that cloud is some server that I

00:26:20.000 --> 00:26:23.990
want to request the web page
of, Harvard.edu or Yale.edu,

00:26:23.990 --> 00:26:26.790
it's really going to
be a two-step process.

00:26:26.790 --> 00:26:31.700
There's going to be a request,
that goes from point A to point B,

00:26:31.700 --> 00:26:33.560
and then, hopefully,
the server that hears

00:26:33.560 --> 00:26:37.820
that request is going to reply with
what we'll typically call a response.

00:26:37.820 --> 00:26:40.850
And other terms that are
relevant here, is my laptop

00:26:40.850 --> 00:26:44.450
is the so-called client,
Harvard.edu, Yale.edu, whatever

00:26:44.450 --> 00:26:46.160
it is, is the so-called server.

00:26:46.160 --> 00:26:49.250
And just like in a restaurant, where
you might request something to eat,

00:26:49.250 --> 00:26:50.900
the server might bring it to you.

00:26:50.900 --> 00:26:53.180
It's, again, that kind of
bidirectional relationship.

00:26:53.180 --> 00:26:58.190
One request, one response, for
each such web page we request.

00:26:58.190 --> 00:27:01.850
All right, so what's inside these
envelopes, and what do we actually see?

00:27:01.850 --> 00:27:04.820
Well, this arrow, this line I
just drew from left to right,

00:27:04.820 --> 00:27:09.110
representing the request, technically
looks a little more like this.

00:27:09.110 --> 00:27:11.840
When you visit a web
page, using your browser,

00:27:11.840 --> 00:27:15.260
on your phone, laptop, or desktop,
what's going inside that envelope,

00:27:15.260 --> 00:27:18.602
and the textual message your Mac or PC
or phone is automatically generating,

00:27:18.602 --> 00:27:20.060
looks a little something like this.

00:27:20.060 --> 00:27:23.920
The verb GET, the URL, or rather
the path that you want to get,

00:27:23.920 --> 00:27:26.750
slash represents the
default page on the website.

00:27:26.750 --> 00:27:31.490
HTTP/1.1 is just some mention of
what version of HTTP you're speaking.

00:27:31.490 --> 00:27:35.030
Now we're up to version 2, and
version 3, but 1.1 is quite common.

00:27:35.030 --> 00:27:39.620
And the envelope contains some
mention of the host that was typed in,

00:27:39.620 --> 00:27:41.310
the fully qualified domain name.

00:27:41.310 --> 00:27:46.140
This is because single servers can
actually host many different websites.

00:27:46.140 --> 00:27:49.820
If you're using Squarespace or Wix or
one of these popular hosting websites

00:27:49.820 --> 00:27:53.090
nowadays, you don't get your own
personal server, most likely.

00:27:53.090 --> 00:27:56.460
You're on the same server as
dozens, hundreds of other customers.

00:27:56.460 --> 00:28:00.050
But when your customers,
your users' browsers,

00:28:00.050 --> 00:28:04.280
include a little mention of your
specific, fully qualified domain

00:28:04.280 --> 00:28:06.650
name in the envelope,
Squarespace and Wix just

00:28:06.650 --> 00:28:10.250
know to send it to your web page or
my web page or some other customer

00:28:10.250 --> 00:28:10.950
altogether.

00:28:10.950 --> 00:28:12.840
Dot dot dot, there's
some other stuff there.

00:28:12.840 --> 00:28:16.340
But that's really the essence
of what's in these requests.

00:28:16.340 --> 00:28:20.120
Hopefully, then, when your browser
requests this web page from the server,

00:28:20.120 --> 00:28:21.170
what comes back?

00:28:21.170 --> 00:28:25.760
Well, hopefully, a response
that looks like this, HTTP/1.1,

00:28:25.760 --> 00:28:29.630
so the same version, some
status code, like a number 200,

00:28:29.630 --> 00:28:33.830
and then literally a short phrase like
OK, which means exactly that, like, OK,

00:28:33.830 --> 00:28:35.490
this request was satisfied.

00:28:35.490 --> 00:28:38.870
Then it contains some other
information, like the type of content

00:28:38.870 --> 00:28:39.680
that's coming back.

00:28:39.680 --> 00:28:41.597
And we'll see that this,
too, is standardized.

00:28:41.597 --> 00:28:45.740
Text/HTML means here comes some
HTML, which is just a text language.

00:28:45.740 --> 00:28:51.950
It could instead be image/jpeg
or Image/png, or video/mp4,

00:28:51.950 --> 00:28:55.790
there are these different content
types, otherwise known as MIME types,

00:28:55.790 --> 00:28:58.520
that uniquely identify types
of files, that come back,

00:28:58.520 --> 00:29:01.130
similar in spirit to file
extensions, but a little more

00:29:01.130 --> 00:29:03.040
standardized this way.

00:29:03.040 --> 00:29:04.790
Then there's some more
stuff, dot dot dot.

00:29:04.790 --> 00:29:09.650
But in general, what you see here, are
a familiar pattern, keys and values.

00:29:09.650 --> 00:29:13.460
These keys and values are
otherwise known as HTTP headers.

00:29:13.460 --> 00:29:17.900
And your browser has been sending
these every time you visit a website.

00:29:17.900 --> 00:29:20.230
And, indeed, we can see
this right now ourselves.

00:29:20.230 --> 00:29:24.230
Let me go over, in just a
second, to Chrome on my computer,

00:29:24.230 --> 00:29:27.360
though you can do this kind of
thing with most any browser today.

00:29:27.360 --> 00:29:32.450
I'll go ahead and visit
HTTP://Harvard.edu, Enter.

00:29:32.450 --> 00:29:35.267
And, voila, I'm at Harvard's
home page for today.

00:29:35.267 --> 00:29:36.350
The content often changes.

00:29:36.350 --> 00:29:38.790
But this is what it
looks like right now.

00:29:38.790 --> 00:29:41.810
Well, I typed in the URL, but
notice it changed a little bit.

00:29:41.810 --> 00:29:44.820
It actually sent me to
HTTPS and added the www,

00:29:44.820 --> 00:29:46.490
even though I didn't type that.

00:29:46.490 --> 00:29:50.510
But it turns out we can poke around
at what my browser is actually doing.

00:29:50.510 --> 00:29:51.620
Let me open another page.

00:29:51.620 --> 00:29:54.350
I'm going to start to use incognito
mode this time, not because I

00:29:54.350 --> 00:29:56.308
care that people know
I'm visiting Harvard.edu,

00:29:56.308 --> 00:30:00.280
but because it throws away
any history that I just did.

00:30:00.280 --> 00:30:02.780
So that every request is going
to look like a brand new one,

00:30:02.780 --> 00:30:05.238
and that's just useful
diagnostically, because we're always

00:30:05.238 --> 00:30:06.590
going to see fresh information.

00:30:06.590 --> 00:30:09.890
My browser is not going to remember
what I previously already requested.

00:30:09.890 --> 00:30:13.250
But I'm going to go
up to View, developer,

00:30:13.250 --> 00:30:16.850
developer tools, which is something
that all of you have, if you use Chrome.

00:30:16.850 --> 00:30:19.460
And there's something
analogous for Firefox and Edge

00:30:19.460 --> 00:30:21.440
and Safari and other browsers.

00:30:21.440 --> 00:30:24.110
Developer tools is going to
open up these tabs down here.

00:30:24.110 --> 00:30:27.318
I don't really care what's new, so I'm
going to close the bottom thing there.

00:30:27.318 --> 00:30:29.990
And I'm going to hover over the
Network tab for just a moment.

00:30:29.990 --> 00:30:35.060
And now I'm going to go and
say HTTP://Harvard.edu, so

00:30:35.060 --> 00:30:36.230
the shorter version.

00:30:36.230 --> 00:30:39.830
I'm going to hit Enter,
and a whole bunch of stuff

00:30:39.830 --> 00:30:41.150
just flew across the screen.

00:30:41.150 --> 00:30:42.410
And it's still coming in.

00:30:42.410 --> 00:30:47.510
And if I zoom in down here, my God,
visiting Harvard.edu, still going,

00:30:47.510 --> 00:30:51.890
is downloading, what 17, 18,
19 megabytes, 20 megabytes,

00:30:51.890 --> 00:30:56.990
millions of bytes of information,
over 111 HTTP requests.

00:30:56.990 --> 00:30:59.870
In other words, a bit of a
simplification, but my browser,

00:30:59.870 --> 00:31:03.500
unbeknownst to me, sent one
envelope initially with the request.

00:31:03.500 --> 00:31:05.420
Then the server said,
OK, by the way, there's

00:31:05.420 --> 00:31:09.050
110 other things you need, 112
other things you need to get.

00:31:09.050 --> 00:31:13.250
So my computer went back and forth,
requesting even more content for me.

00:31:13.250 --> 00:31:14.000
Why?

00:31:14.000 --> 00:31:17.390
Well, inside of Harvard's web
page is a whole bunch of images,

00:31:17.390 --> 00:31:20.150
and maybe sound files and
videos and other stuff,

00:31:20.150 --> 00:31:22.550
that all need to be
downloaded and to compose

00:31:22.550 --> 00:31:23.970
what is ultimately the web page.

00:31:23.970 --> 00:31:26.690
But I don't care about like
100 plus of these things.

00:31:26.690 --> 00:31:28.970
Let's focus on the very first one first.

00:31:28.970 --> 00:31:31.520
The very first request
I sent was up here.

00:31:31.520 --> 00:31:34.580
And I'm going to click on this
row, under the Network tab.

00:31:34.580 --> 00:31:37.310
And then I'm going to see a
bit of diagnostic information.

00:31:37.310 --> 00:31:40.550
To an average person using the
web, they needn't care about this,

00:31:40.550 --> 00:31:43.100
just as you probably didn't
care about it until right now.

00:31:43.100 --> 00:31:44.810
And even then, perhaps not.

00:31:44.810 --> 00:31:48.800
But if I scroll down to
request headers, you will see,

00:31:48.800 --> 00:31:52.760
if I click View source, literally
everything that was in the request

00:31:52.760 --> 00:31:55.090
my Mac just sent to Harvard.edu.

00:31:55.090 --> 00:32:00.290
Two of the lines are familiar,
get/http1.1, host:harvard.edu,

00:32:00.290 --> 00:32:03.750
and then other stuff that, for now,
it's not that interesting for us.

00:32:03.750 --> 00:32:07.190
But let's look at the response
that came back from the server.

00:32:07.190 --> 00:32:12.230
I'm going to scroll up now and
see response headers, view source.

00:32:12.230 --> 00:32:13.610
And this is interesting.

00:32:13.610 --> 00:32:15.020
It is not OK.

00:32:15.020 --> 00:32:17.840
There's no 200, there's no word OK.

00:32:17.840 --> 00:32:21.920
Curiously, harvard.edu
has moved permanently.

00:32:21.920 --> 00:32:22.762
What does that mean?

00:32:22.762 --> 00:32:24.470
Well, there's a whole
bunch of stuff here

00:32:24.470 --> 00:32:25.928
that's not that interesting for us.

00:32:25.928 --> 00:32:28.590
But this line, location, is interesting.

00:32:28.590 --> 00:32:32.360
This is an HTTP header, a
standardized key value pair,

00:32:32.360 --> 00:32:36.110
that's part of the HTTP
protocol, that is, conventions.

00:32:36.110 --> 00:32:38.690
And if I highlight just
this one, it's telling me,

00:32:38.690 --> 00:32:42.230
mm-mmm, Harvard is not
at HTTP://Harvard.edu,

00:32:42.230 --> 00:32:48.050
Harvard's website is now, and perhaps
forever, at HTTPS://www.harvard.edu.

00:32:48.050 --> 00:32:51.440
So what's the value here?

00:32:51.440 --> 00:32:54.450
Probably someone at Harvard wants
you to use a secure connection.

00:32:54.450 --> 00:32:56.900
So they redirected you
from HTTP to HTTPS.

00:32:56.900 --> 00:33:01.200
Maybe the marketing people want you to
be at www instead of just Harvard.edu.

00:33:01.200 --> 00:33:01.700
Why?

00:33:01.700 --> 00:33:04.158
Just to standardize things,
but there are technical reasons

00:33:04.158 --> 00:33:07.250
to use a hostname, and not
just the raw domain name.

00:33:07.250 --> 00:33:10.140
And all this other stuff is sort
of uninteresting for our purposes,

00:33:10.140 --> 00:33:15.170
now, because a browser that
receives a 301 response knows,

00:33:15.170 --> 00:33:20.270
by design, by the definition of HTTP,
to automatically redirect the user.

00:33:20.270 --> 00:33:23.873
And that's why, in my browser, all of
this happened in like a split second,

00:33:23.873 --> 00:33:26.540
because I didn't really know or
care about all of those headers.

00:33:26.540 --> 00:33:30.290
But that's why and how I
ended up at this URL here.

00:33:30.290 --> 00:33:33.650
My browser was told to go
elsewhere via that new location.

00:33:33.650 --> 00:33:36.200
And the browser just
followed those breadcrumbs,

00:33:36.200 --> 00:33:38.930
if you will, at which point it
downloaded all of the other images

00:33:38.930 --> 00:33:43.370
and files, and so forth, that
compose this particular page.

00:33:43.370 --> 00:33:44.447
Well, let me zoom out.

00:33:44.447 --> 00:33:46.280
And let me actually go
into VS Code, if only

00:33:46.280 --> 00:33:49.405
because it's a little more pleasant to
do things in just a terminal window,

00:33:49.405 --> 00:33:53.010
without actually using
a full-fledged browser.

00:33:53.010 --> 00:33:55.190
So now let's just use
an equivalent program.

00:33:55.190 --> 00:33:58.160
It's called Curl, for
connecting to a URL, that's

00:33:58.160 --> 00:34:01.070
going to allow me to play with
websites and just see those headers,

00:34:01.070 --> 00:34:03.680
without bothering to download
all the images and text

00:34:03.680 --> 00:34:05.120
and so forth from the website.

00:34:05.120 --> 00:34:07.710
It's going to allow me to
do something like this.

00:34:07.710 --> 00:34:14.750
Let me go ahead and run, for instance,
Curl-I-xget, which is just the command

00:34:14.750 --> 00:34:18.380
line arguments that says
simulate a GET request textually,

00:34:18.380 --> 00:34:19.640
as though you're a browser.

00:34:19.640 --> 00:34:24.470
And let's go to
HTTP://Harvard.edu Enter.

00:34:24.470 --> 00:34:27.642
Now, by way of how Curl, works,
I'm just seeing the headers.

00:34:27.642 --> 00:34:29.600
It didn't bother downloading
the whole website.

00:34:29.600 --> 00:34:32.600
And you see exactly the same
thing, 301 moved permanently.

00:34:32.600 --> 00:34:35.370
Location is, indeed, this one here.

00:34:35.370 --> 00:34:37.010
So that's kind of interesting.

00:34:37.010 --> 00:34:38.690
But let's follow it manually now.

00:34:38.690 --> 00:34:41.490
Let's now do what it's telling me to do.

00:34:41.490 --> 00:34:46.190
Let's go to the location, with
HTTPS and the www and hit Enter.

00:34:46.190 --> 00:34:50.210
And now, what's a good
sign with this output?

00:34:50.210 --> 00:34:51.470
Most of it's irrelevant.

00:34:51.470 --> 00:34:52.640
AUDIENCE: Migrate?

00:34:52.640 --> 00:34:55.550
SPEAKER 1: 200 OK, that
means I'm seeing, presumably,

00:34:55.550 --> 00:34:59.030
if I were using a real browser,
the actual content of the web page.

00:34:59.030 --> 00:35:02.720
Looks like Harvard's version of HTTP
is even newer than the one I'm using.

00:35:02.720 --> 00:35:04.860
It's using HTTP version
2, which is fine.

00:35:04.860 --> 00:35:08.420
But 200 is indeed indicative
of things being OK.

00:35:08.420 --> 00:35:11.630
Well, what if I try
visiting some bogus URL,

00:35:11.630 --> 00:35:18.140
like Harvard.edu, when this file does
not exist, something completely random,

00:35:18.140 --> 00:35:21.140
probably doesn't exist, and hit Enter.

00:35:21.140 --> 00:35:24.800
What do you see now, that's perhaps
familiar, in the real world?

00:35:24.800 --> 00:35:25.797
Yeah.

00:35:25.797 --> 00:35:26.989
AUDIENCE: Error 404.

00:35:26.989 --> 00:35:28.429
SPEAKER 1: Yeah, error 404.

00:35:28.429 --> 00:35:30.409
All of us have seen
this probably endlessly,

00:35:30.409 --> 00:35:33.110
from time to time, when you
screw up by mis-typing a URL,

00:35:33.110 --> 00:35:35.030
or someone deletes the
web page in question.

00:35:35.030 --> 00:35:38.030
But all that is is a
status code that a browser

00:35:38.030 --> 00:35:41.330
is being sent from the server,
that's a little clue as to what

00:35:41.330 --> 00:35:44.192
the actual problem is,
underneath the hood.

00:35:44.192 --> 00:35:45.900
So instead of getting
back, for instance,

00:35:45.900 --> 00:35:49.010
something like OK, or moved permanently,
what I've just gotten back, quite

00:35:49.010 --> 00:35:51.710
simply, is 404 not found.

00:35:51.710 --> 00:35:55.520
Well, it turns out there's
other types of status codes

00:35:55.520 --> 00:35:59.020
that you'll start to see over time,
as you start to program for the web.

00:35:59.020 --> 00:36:00.190
200 is OK.

00:36:00.190 --> 00:36:01.690
301 is moved permanently.

00:36:01.690 --> 00:36:05.230
302, 304, 307 are all similar in spirit.

00:36:05.230 --> 00:36:08.590
They're related to redirecting the
user from one place to another.

00:36:08.590 --> 00:36:12.610
401, 403, unauthorized or forbidden.

00:36:12.610 --> 00:36:14.830
If you ever mess up
your password, or you

00:36:14.830 --> 00:36:16.943
try visiting a URL you're
not supposed to look at,

00:36:16.943 --> 00:36:19.360
you might see one of these
codes, indicating that you just

00:36:19.360 --> 00:36:21.250
don't have authorization for those.

00:36:21.250 --> 00:36:25.480
404 not found, 418, I'm a
teapot, was an April Fool's joke

00:36:25.480 --> 00:36:27.880
by the tech community years ago.

00:36:27.880 --> 00:36:29.140
500 is bad.

00:36:29.140 --> 00:36:31.090
And, unfortunately,
all of you are probably

00:36:31.090 --> 00:36:34.780
on a path now to creating
HTTP 500 errors, once,

00:36:34.780 --> 00:36:36.923
next week, we start writing
code, because all of us

00:36:36.923 --> 00:36:37.840
are going to screw up.

00:36:37.840 --> 00:36:41.440
We're going to have typos, logical
errors, and this is on the horizon,

00:36:41.440 --> 00:36:45.850
just like segfaults were in the world of
C, but solvable with the right skills.

00:36:45.850 --> 00:36:49.062
503 service unavailable, means
maybe the server is overloaded,

00:36:49.062 --> 00:36:50.020
or something like that.

00:36:50.020 --> 00:36:51.530
And there's other codes there.

00:36:51.530 --> 00:36:54.820
But those are perhaps some
of the most common ones.

00:36:54.820 --> 00:36:58.450
Has anyone, we can get away with
this here, less so in New Haven,

00:36:58.450 --> 00:37:02.780
has anyone ever visited
SafetySchool.org?

00:37:05.350 --> 00:37:12.190
HTTP://SafetySchool.org,
dare we do this, Enter.

00:37:12.190 --> 00:37:13.570
Oh, look at that.

00:37:13.570 --> 00:37:14.740
Where did we end up?

00:37:14.740 --> 00:37:15.610
[LAUGHTER]

00:37:15.610 --> 00:37:17.374
OK, so--

00:37:17.374 --> 00:37:21.070
[APPLAUSE]

00:37:21.070 --> 00:37:23.860
--so this has been like a
joke for like 10 or 20 years.

00:37:23.860 --> 00:37:26.620
Someone out there has been
paying for the domain name,

00:37:26.620 --> 00:37:30.010
safetyschool.org, just for
this two second demonstration.

00:37:30.010 --> 00:37:32.350
But we can now infer, how did this work?

00:37:32.350 --> 00:37:35.260
The person who bought that domain
name and somehow configured

00:37:35.260 --> 00:37:39.310
DNS to point to their web server,
the IP address of their web server,

00:37:39.310 --> 00:37:41.680
what is their web server
presumably spitting out,

00:37:41.680 --> 00:37:44.830
whenever a browser requests the page?

00:37:44.830 --> 00:37:46.780
What status code, perhaps?

00:37:46.780 --> 00:37:48.020
Well, we can simulate this.

00:37:48.020 --> 00:37:50.710
Let me go over to VS Code.

00:37:50.710 --> 00:37:52.030
Let me go back over here.

00:37:52.030 --> 00:37:53.720
Let me increase my terminal window.

00:37:53.720 --> 00:38:02.080
Let me do Curl-I-xget
HTTP://safetyschool.org Enter,

00:38:02.080 --> 00:38:03.820
and that's all this website does.

00:38:03.820 --> 00:38:06.130
There's not even an
actual website there.

00:38:06.130 --> 00:38:08.650
No HTML, no CSS languages
we're about to see.

00:38:08.650 --> 00:38:13.510
It literally just exists on the
internet to do that redirect there.

00:38:13.510 --> 00:38:17.170
In fairness, there are others.

00:38:17.170 --> 00:38:19.420
Let me actually do another one here.

00:38:19.420 --> 00:38:23.320
Instead of safetyschool.org,
turns out someone,

00:38:23.320 --> 00:38:29.380
some years ago, bought
HarvardSucks.org Enter.

00:38:29.380 --> 00:38:33.880
And when we do this, you'll see that,
oh, they don't need us to be secure,

00:38:33.880 --> 00:38:35.620
but I do need the www.

00:38:35.620 --> 00:38:38.620
Let's do this one, Enter.

00:38:38.620 --> 00:38:40.570
That one is not found.

00:38:40.570 --> 00:38:42.593
This demo actually
worked for so many years.

00:38:42.593 --> 00:38:45.010
But someone has stopped paying
for the Squarespace account

00:38:45.010 --> 00:38:46.480
recently, apparently.

00:38:46.480 --> 00:38:47.382
So--

00:38:47.382 --> 00:38:50.280
[APPLAUSE]

00:38:50.280 --> 00:38:55.920
OK, so, fortunately, we
did save the YouTube video

00:38:55.920 --> 00:38:57.480
to which this thing refers.

00:38:57.480 --> 00:39:00.063
And so, just to put this
into context, since it's

00:39:00.063 --> 00:39:02.230
been quite a few years,
Harvard and Yale, of course,

00:39:02.230 --> 00:39:04.080
have this long-standing rivalry.

00:39:04.080 --> 00:39:06.700
There is this tradition
of pranking each other.

00:39:06.700 --> 00:39:10.630
And, honestly, hands down, one of the
best pranks ever done in this rivalry

00:39:10.630 --> 00:39:12.870
was by Yale to Harvard.

00:39:12.870 --> 00:39:14.550
It's about a three-minute retrospective.

00:39:14.550 --> 00:39:16.883
It's one of the earliest
videos, I dare say, on YouTube,

00:39:16.883 --> 00:39:19.320
so the quality is
representative of that.

00:39:19.320 --> 00:39:22.210
But let me go ahead and
full screen my page here.

00:39:22.210 --> 00:39:26.700
And what used to live at
HarvardSucks.org is this video here.

00:39:26.700 --> 00:39:29.546
If we could dim the lights
for about three minutes.

00:39:29.546 --> 00:39:30.213
[VIDEO PLAYBACK]

00:39:30.213 --> 00:39:52.799
[MUSIC PLAYING]

00:39:52.799 --> 00:39:57.783
[CHEERING]

00:39:57.783 --> 00:39:59.700
- Actually we're going
all the way to the top.

00:39:59.700 --> 00:40:01.496
And you pass it down.

00:40:01.496 --> 00:40:03.790
- This is for you, Yale.

00:40:03.790 --> 00:40:04.950
- We love you, Yale.

00:40:04.950 --> 00:40:08.130
- We're here to trip up Harvard.

00:40:08.130 --> 00:40:08.910
- Go Harvard!

00:40:08.910 --> 00:40:10.558
- Go Harvard!

00:40:10.558 --> 00:40:12.210
- Pass from the top one, pass it down.

00:40:12.210 --> 00:40:13.523
- Pass them down.

00:40:13.523 --> 00:40:16.630
- It's nice to say the ERA sucks.

00:40:16.630 --> 00:40:18.800
- Let's go Harvard.

00:40:18.800 --> 00:40:20.150
- Where does?

00:40:20.150 --> 00:40:21.592
- You see that [BEEP]?

00:40:21.592 --> 00:40:23.540
Where they're passing.

00:40:23.540 --> 00:40:26.210
It's going to have to happen.

00:40:26.210 --> 00:40:28.840
- It's actually going to happen.

00:40:28.840 --> 00:40:30.260
I can't [BEEP] believe this.

00:40:30.260 --> 00:40:32.320
- What do you think of Yale?

00:40:32.320 --> 00:40:34.080
- They don't think good.

00:40:34.080 --> 00:40:34.580
- Hah-hah.

00:40:37.142 --> 00:40:38.350
- Because they don't have it.

00:40:38.350 --> 00:40:39.660
Doesn't run out of stuff.

00:40:39.660 --> 00:40:39.780
- OK.

00:40:39.780 --> 00:40:40.822
- Is there another stuff?

00:40:40.822 --> 00:40:44.150
- Probably that's going
to be legible, very small.

00:40:44.150 --> 00:40:44.650
- Garbage.

00:40:47.434 --> 00:40:48.362
- I know, but--

00:40:48.362 --> 00:40:49.610
- Well, what houses?

00:40:49.610 --> 00:40:51.320
- Says, are we in boats now?

00:40:51.320 --> 00:40:52.070
- How many extras?

00:40:52.070 --> 00:40:53.195
- How many extra are there?

00:40:53.195 --> 00:40:53.910
- Sometimes.

00:40:53.910 --> 00:40:56.760
- Yeah.

00:40:56.760 --> 00:40:57.754
[CHEERING]

00:40:57.754 --> 00:40:58.254
- OK.

00:40:58.254 --> 00:40:59.712
- You guys are from Harvard, right?

00:40:59.712 --> 00:41:00.500
- No, vote for.

00:41:00.500 --> 00:41:01.130
Full timer.

00:41:01.130 --> 00:41:02.420
- Yeah, these are '05s.

00:41:02.420 --> 00:41:03.848
- Just make sure everyone has one.

00:41:03.848 --> 00:41:04.931
- They're probably crummy.

00:41:04.931 --> 00:41:05.848
- We're still passing.

00:41:05.848 --> 00:41:06.880
- All the cards needed.

00:41:06.880 --> 00:41:07.214
- Oh, no.

00:41:07.214 --> 00:41:07.714
My bad.

00:41:07.714 --> 00:41:08.900
- Yeah.

00:41:08.900 --> 00:41:11.570
All right, cue it up.

00:41:11.570 --> 00:41:12.560
[CHEERING]

00:41:12.560 --> 00:41:13.550
Go, Harvard.

00:41:18.500 --> 00:41:22.460
[APPLAUSE]

00:41:22.460 --> 00:41:24.935
- Hold up your signs.

00:41:24.935 --> 00:41:26.920
[BEEP]

00:41:26.920 --> 00:41:27.640
- You suck.

00:41:27.640 --> 00:41:27.880
You suck.

00:41:27.880 --> 00:41:28.200
You suck.

00:41:28.200 --> 00:41:28.840
You suck.

00:41:28.840 --> 00:41:29.670
You suck.

00:41:29.670 --> 00:41:30.390
You suck.

00:41:30.390 --> 00:41:31.057
You suck.

00:41:31.057 --> 00:41:31.971
You suck.

00:41:31.971 --> 00:41:32.885
You suck.

00:41:32.885 --> 00:41:34.100
You suck.

00:41:34.100 --> 00:41:35.060
You suck.

00:41:35.060 --> 00:41:35.950
You suck.

00:41:35.950 --> 00:41:36.670
You suck.

00:41:36.670 --> 00:41:37.650
You suck.

00:41:37.650 --> 00:41:38.940
You suck.

00:41:38.940 --> 00:41:39.440
[SCREAMING]

00:41:39.440 --> 00:41:42.700
- What do you think of Yale, sir?

00:41:42.700 --> 00:41:45.184
- Going to be, do one more time.

00:41:45.184 --> 00:41:46.636
- One more time.

00:41:46.636 --> 00:41:48.088
One more time.

00:41:48.088 --> 00:41:52.450
[SCREAMING]

00:41:52.450 --> 00:41:54.665
- Oh, there it goes again.

00:41:54.665 --> 00:41:55.165
- Oh.

00:42:00.500 --> 00:42:01.470
- Harvard sucks.

00:42:01.470 --> 00:42:02.440
Harvard sucks.

00:42:02.440 --> 00:42:03.410
Harvard sucks.

00:42:03.410 --> 00:42:04.865
Harvard sucks.

00:42:04.865 --> 00:42:05.835
Harvard sucks.

00:42:05.835 --> 00:42:06.805
Harvard sucks.

00:42:06.805 --> 00:42:08.280
Harvard sucks.

00:42:08.280 --> 00:42:12.620
[END PLAYBACK]

00:42:12.620 --> 00:42:17.030
SPEAKER 1: All right, so thanks to
our friends at Yale for that one.

00:42:17.030 --> 00:42:20.938
Let's go ahead here and consider, in
just a moment, what further is deeper

00:42:20.938 --> 00:42:22.730
down inside of the
envelope, because we now

00:42:22.730 --> 00:42:28.010
have the ability to get data from,
oh, OK, YouTube autoplay again.

00:42:28.010 --> 00:42:29.150
Got to stop doing that.

00:42:29.150 --> 00:42:33.890
Let's consider for just a moment
that, let's consider for just a moment

00:42:33.890 --> 00:42:37.460
that we now have this ability to
get data from point A to point B.

00:42:37.460 --> 00:42:41.298
And we have the ability to
specify in those envelopes what

00:42:41.298 --> 00:42:42.590
it is we want from the website.

00:42:42.590 --> 00:42:44.000
We want to get the home page.

00:42:44.000 --> 00:42:45.740
We want to get back the HTML.

00:42:45.740 --> 00:42:47.055
But what is that HTML?

00:42:47.055 --> 00:42:50.180
In fact, we don't yet have the language
with which the web pages themselves

00:42:50.180 --> 00:42:52.302
are written, namely HTML and CSS.

00:42:52.302 --> 00:42:54.510
But let's go ahead and take
a five minute break here.

00:42:54.510 --> 00:42:57.990
And when we come back, we'll
learn those two languages.

00:42:57.990 --> 00:42:59.880
All right, we are back.

00:42:59.880 --> 00:43:02.180
So we've got three
languages to look at today.

00:43:02.180 --> 00:43:04.640
But two of them are not
actually programming languages.

00:43:04.640 --> 00:43:08.960
What makes something a programming
language, like C or Python and SQL,

00:43:08.960 --> 00:43:12.280
is that there are these constructs via
which you can express conditionals.

00:43:12.280 --> 00:43:14.780
You might have variables, you
might have looping constructs.

00:43:14.780 --> 00:43:17.150
You have the ability,
ultimately, to express logic.

00:43:17.150 --> 00:43:20.720
HTML and CSS aren't so much about
logic as they are about structure,

00:43:20.720 --> 00:43:22.250
and the aesthetics of a page.

00:43:22.250 --> 00:43:25.070
And so we're going to create
the skeleton of a web page using

00:43:25.070 --> 00:43:26.998
this pair of languages, HTML and CSS.

00:43:26.998 --> 00:43:28.790
And then toward the
end of the today, we'll

00:43:28.790 --> 00:43:30.680
introduce an actual
programming language,

00:43:30.680 --> 00:43:34.040
that actually is pretty similar
in spirit and syntactically

00:43:34.040 --> 00:43:37.910
to both C and Python, but that's going
to allow us to make these web pages not

00:43:37.910 --> 00:43:42.060
just static, things that you look at,
but interactive applications as well.

00:43:42.060 --> 00:43:46.580
And then next week again, in week 9,
will we reintroduce Python and SQL,

00:43:46.580 --> 00:43:50.060
tie all of this together, so that you
can actually have a browser or a phone

00:43:50.060 --> 00:43:53.030
talking to a back-end
server, and creating

00:43:53.030 --> 00:43:56.960
the experience that you and I now take
for granted for most any app or website

00:43:56.960 --> 00:43:57.620
today.

00:43:57.620 --> 00:43:58.995
Well, let's go ahead and do this.

00:43:58.995 --> 00:44:02.210
Let's quickly whip up something
in this language called HTML.

00:44:02.210 --> 00:44:03.410
I'm in VS Code here.

00:44:03.410 --> 00:44:07.910
I'm going to go ahead and create a
file quite simply called, Hello.html.

00:44:07.910 --> 00:44:11.300
The convention is typically to
end your file names in dot html.

00:44:11.300 --> 00:44:13.592
And I'm going to go ahead
and bang this out real quick.

00:44:13.592 --> 00:44:16.650
But then we'll more slowly step
through what the constructs are herein.

00:44:16.650 --> 00:44:21.290
So I'm going to say doctype
html open bracket html,

00:44:21.290 --> 00:44:25.880
and then notice I'm going to do open
bracket slash html close bracket.

00:44:25.880 --> 00:44:29.480
And I'm leveraging a feature of VS
Code and programming environments more

00:44:29.480 --> 00:44:31.410
generally, to do a bit of autocomplete.

00:44:31.410 --> 00:44:34.640
So you'll see that there's this symmetry
to much of what I'm going to type,

00:44:34.640 --> 00:44:36.440
but I'm not typing all of these things.

00:44:36.440 --> 00:44:41.420
VS Code is automatically generating the
end of my thought for me, if you will.

00:44:41.420 --> 00:44:45.320
Let me go ahead and
say, Open the head tag.

00:44:45.320 --> 00:44:46.640
Open the title tag.

00:44:46.640 --> 00:44:48.740
I'll say something cute
like, Hello, title.

00:44:48.740 --> 00:44:51.470
And then down here, I'm going to
create the body of this web page

00:44:51.470 --> 00:44:53.270
and say something like Hello, body.

00:44:53.270 --> 00:44:57.050
And let me specify at the very top,
that all of this is really in English,

00:44:57.050 --> 00:44:58.400
Lang equals en.

00:44:58.400 --> 00:45:04.370
So at this moment, I have a file in my
VS Code environment called Hello.html.

00:45:04.370 --> 00:45:07.292
VS Code as we're using it,
of course, is cloud-based.

00:45:07.292 --> 00:45:09.500
We're using it in a browser,
even though you can also

00:45:09.500 --> 00:45:11.600
download it and run it on a Mac and PC.

00:45:11.600 --> 00:45:14.300
So we are in this weird
situation where I'm

00:45:14.300 --> 00:45:16.580
using the cloud to
create a web page, and I

00:45:16.580 --> 00:45:21.590
want that web page to also live in
the cloud, that is, on the internet.

00:45:21.590 --> 00:45:24.890
But the thing about VS
Code, or really any website

00:45:24.890 --> 00:45:28.550
that you might use in a browser, by
default that website is using probably

00:45:28.550 --> 00:45:33.170
TCP port number 80 or
TCP port number 443,

00:45:33.170 --> 00:45:35.870
which is HTTP and HTTPS respectively.

00:45:35.870 --> 00:45:38.720
But here I am, sort of
a programmer myself,

00:45:38.720 --> 00:45:43.050
trying to create my own
website on an existing website.

00:45:43.050 --> 00:45:44.540
So it's a bit of a weird situation.

00:45:44.540 --> 00:45:47.030
But that's OK, because
what's nice about TCP

00:45:47.030 --> 00:45:51.380
is that you and I can just pick port
numbers to use and run our own web

00:45:51.380 --> 00:45:53.120
server, on a web server.

00:45:53.120 --> 00:45:55.610
That is, we can control
the environment entirely,

00:45:55.610 --> 00:46:01.520
by just running our own web server
via this command, HTTP-server,

00:46:01.520 --> 00:46:02.540
in my terminal window.

00:46:02.540 --> 00:46:05.253
This is a command that we
preinstalled in VS Code here.

00:46:05.253 --> 00:46:06.920
And you'll notice a pop-up just came up.

00:46:06.920 --> 00:46:09.650
Your application running
on port 8080 is available.

00:46:09.650 --> 00:46:12.980
That's a commonly used TCP port
number, when 80 is already used,

00:46:12.980 --> 00:46:15.740
and 443 is already used,
you can run your own server

00:46:15.740 --> 00:46:18.330
on your own port, 8080 in this case.

00:46:18.330 --> 00:46:22.400
I've opened that tab in advance, and
if I go into another browser tab here,

00:46:22.400 --> 00:46:26.060
here I see a so-called directory
listing of the web server I'm running.

00:46:26.060 --> 00:46:28.130
So I don't see any of my other files.

00:46:28.130 --> 00:46:31.160
I don't see anything
belonging to VS Code itself.

00:46:31.160 --> 00:46:34.370
I only see the file that I've created
in my current directory, called

00:46:34.370 --> 00:46:35.660
Hello.html.

00:46:35.660 --> 00:46:40.040
And so if I click on this file
now, I should see Hello, body.

00:46:40.040 --> 00:46:41.120
I don't see the title.

00:46:41.120 --> 00:46:43.070
But that's because the
title of a web page

00:46:43.070 --> 00:46:45.507
nowadays is typically
embedded in the tab.

00:46:45.507 --> 00:46:47.840
And if I'm full screen in my
browser, there are no tabs.

00:46:47.840 --> 00:46:49.460
So let me minimize the window a bit.

00:46:49.460 --> 00:46:53.840
And now you can see just in this
single browser window, in my own URL

00:46:53.840 --> 00:46:56.190
here, that Hello, body, is
in the top left hand corner.

00:46:56.190 --> 00:46:58.610
And if I zoom in, there's Hello, title.

00:46:58.610 --> 00:47:00.080
So what have I done here?

00:47:00.080 --> 00:47:05.300
I have gone ahead and created
my own web page in HTML,

00:47:05.300 --> 00:47:08.660
in a file called Hello.html.

00:47:08.660 --> 00:47:13.060
And then I have opened up
a web server of my own,

00:47:13.060 --> 00:47:15.400
configured it to listen
on TCP port 8080,

00:47:15.400 --> 00:47:18.790
which just says to the internet, hey,
listen for requests from web browsers,

00:47:18.790 --> 00:47:22.420
not on the standard port number,
80 or 443, listen on 8080.

00:47:22.420 --> 00:47:26.290
And this means I can develop a website
using a web-based tool, like this one

00:47:26.290 --> 00:47:28.660
here, which is
increasingly common today.

00:47:28.660 --> 00:47:32.500
All right, so now let's consider
what it is I actually just typed out.

00:47:32.500 --> 00:47:36.700
HTML is characterized really by just
two features, two vocab words, tags

00:47:36.700 --> 00:47:37.540
and attributes.

00:47:37.540 --> 00:47:40.780
Most of what I just typed were tags,
but there was at least one attribute

00:47:40.780 --> 00:47:41.540
already.

00:47:41.540 --> 00:47:45.680
Here's the same source code that I
typed out in HTML, from top to bottom.

00:47:45.680 --> 00:47:46.930
Let's consider what this is.

00:47:46.930 --> 00:47:50.440
The very first line of
code here, doctype html,

00:47:50.440 --> 00:47:51.700
is the only anomalous one.

00:47:51.700 --> 00:47:55.330
It's the only one that starts with
an open bracket, a less than sign,

00:47:55.330 --> 00:47:56.590
and an exclamation point.

00:47:56.590 --> 00:47:59.200
There's no more exclamation
points thereafter, for now.

00:47:59.200 --> 00:48:02.650
This is the document type declaration,
which is a fancy way of saying,

00:48:02.650 --> 00:48:04.240
it's just got to be there nowadays.

00:48:04.240 --> 00:48:06.782
It's like a little breadcrumb
at the beginning of a file that

00:48:06.782 --> 00:48:11.830
says to the browser, you are about to
see a file written in HTML version 5.

00:48:11.830 --> 00:48:14.808
That line of code has changed
over time, over the years.

00:48:14.808 --> 00:48:17.350
The most recent version of it
is nice and succinct like this,

00:48:17.350 --> 00:48:20.380
and it's just a clue to the
browser as to what version of HTML

00:48:20.380 --> 00:48:22.690
is being used by you, the programmer.

00:48:22.690 --> 00:48:24.590
All right, what comes after that?

00:48:24.590 --> 00:48:27.400
Well, after that, and I've
highlighted two things in yellow,

00:48:27.400 --> 00:48:30.250
this is what we're going to
start calling an open tag,

00:48:30.250 --> 00:48:34.720
or a start tag, open bracket HTML
then something, close bracket,

00:48:34.720 --> 00:48:36.800
is the so-called start or open tag.

00:48:36.800 --> 00:48:39.550
Then the corresponding close
or end tag is down here.

00:48:39.550 --> 00:48:40.900
And it's almost the same.

00:48:40.900 --> 00:48:44.060
You use the same tag number, you
use the same angled brackets.

00:48:44.060 --> 00:48:46.930
But you do add a slash, and
you don't repeat yourself

00:48:46.930 --> 00:48:49.840
with any of the things
called attributes,

00:48:49.840 --> 00:48:51.580
because, what is this thing here?

00:48:51.580 --> 00:48:54.700
Lang equals quote unquote
"en," means the language

00:48:54.700 --> 00:48:57.440
of my page is written
in the English language.

00:48:57.440 --> 00:49:00.580
The humans have standardized
two and three letter codes

00:49:00.580 --> 00:49:03.260
for every human language, right now.

00:49:03.260 --> 00:49:06.940
And so this is just a clue to the
browser for like automatic translation

00:49:06.940 --> 00:49:10.210
and accessibility purposes,
what language the web page

00:49:10.210 --> 00:49:11.140
itself is written in.

00:49:11.140 --> 00:49:14.470
Not the tags, but the words, like
Hello, title and Hello, body,

00:49:14.470 --> 00:49:16.990
which while minimalist,
are indeed in English.

00:49:16.990 --> 00:49:19.950
So when you close a tag, you close
the name of it with the slash

00:49:19.950 --> 00:49:20.920
and the angle brackets.

00:49:20.920 --> 00:49:23.128
You don't repeat the attribute.

00:49:23.128 --> 00:49:25.670
That would just be annoying to
have to type everything again.

00:49:25.670 --> 00:49:26.837
But notice the pattern here.

00:49:26.837 --> 00:49:28.070
It's new syntax.

00:49:28.070 --> 00:49:31.360
But this is another example of
key value pairs in computing.

00:49:31.360 --> 00:49:35.440
The key is Lang, the
value is E-N for English.

00:49:35.440 --> 00:49:37.990
The attribute is called
Lang, the value is

00:49:37.990 --> 00:49:41.950
called, it is E-N. So again,
it's just key value pairs,

00:49:41.950 --> 00:49:43.360
in just yet another context.

00:49:43.360 --> 00:49:45.490
Probably the browser's using a
hash table underneath the hood,

00:49:45.490 --> 00:49:48.615
to keep track of this stuff, like a
two column table, with keys and values.

00:49:48.615 --> 00:49:52.100
Again, humans keep using the same
paradigm in different languages.

00:49:52.100 --> 00:49:53.540
What's inside of that?

00:49:53.540 --> 00:49:56.050
The nesting is important
visually, not to the computer,

00:49:56.050 --> 00:49:58.300
but to us, the humans,
because it implies

00:49:58.300 --> 00:49:59.780
that there's some hierarchy here.

00:49:59.780 --> 00:50:03.590
And, indeed, what is inside
of the HTML tag here?

00:50:03.590 --> 00:50:06.700
Well, we have what
we'll call the head tag.

00:50:06.700 --> 00:50:10.060
The head tag says, hey, browser,
here comes the head of the page.

00:50:10.060 --> 00:50:12.327
And then the body tag
says, hey, browser,

00:50:12.327 --> 00:50:13.660
here comes the body of the page.

00:50:13.660 --> 00:50:17.710
The body is like 99% of the user's
experience, the big rectangular window.

00:50:17.710 --> 00:50:21.340
The head is really just the address
bar and other such stuff at top,

00:50:21.340 --> 00:50:24.100
like the title that we saw a moment ago.

00:50:24.100 --> 00:50:28.540
Just to introduce the vernacular,
then, the HTML tag, otherwise known

00:50:28.540 --> 00:50:33.010
as an element, has two children,
the head child and the body child,

00:50:33.010 --> 00:50:35.770
which is to say that head
and body are now siblings.

00:50:35.770 --> 00:50:38.920
So you can use the same kind of
family tree terminology that we used,

00:50:38.920 --> 00:50:41.230
when talking about trees, weeks ago.

00:50:41.230 --> 00:50:45.610
If we look at the head tag, how
many children does it seem to have?

00:50:45.610 --> 00:50:48.400
I'm seeing one, and,
indeed, at least if we

00:50:48.400 --> 00:50:52.660
ignore all the white space, the
spaces or tabs or new line characters,

00:50:52.660 --> 00:50:54.880
there's just one child, a title element.

00:50:54.880 --> 00:50:58.840
And an element is the terminology that
includes the start tag and the end tag,

00:50:58.840 --> 00:51:00.230
and everything in between.

00:51:00.230 --> 00:51:02.050
So this is the title element.

00:51:02.050 --> 00:51:05.620
And the title element has one
child, which is just pure text,

00:51:05.620 --> 00:51:07.600
otherwise known as a text node.

00:51:07.600 --> 00:51:10.720
Recall, node, from our discussions
of data structures weeks ago.

00:51:10.720 --> 00:51:14.770
If we jump then to the body, which
is the other child of the HTML tag,

00:51:14.770 --> 00:51:18.730
it too has one child, which is just
another chunk of text, a text node,

00:51:18.730 --> 00:51:21.100
that says, quote unquote "Hello, body."

00:51:21.100 --> 00:51:24.850
What's nice about this indentation,
even though the browser technically

00:51:24.850 --> 00:51:29.120
is not going to care, is that it
implies this kind of structure.

00:51:29.120 --> 00:51:32.710
And this is where we connect,
like weeks 5 and now weeks 8, here

00:51:32.710 --> 00:51:37.090
is the tree structure we began to
talk about, even in our world of C.

00:51:37.090 --> 00:51:39.393
It's not a binary tree,
even though this one happens

00:51:39.393 --> 00:51:40.810
to have no more than two children.

00:51:40.810 --> 00:51:44.770
It's an arbitrary tree that can
have 0 or any number of children.

00:51:44.770 --> 00:51:47.650
But if we have a special node
here that refers to the document,

00:51:47.650 --> 00:51:50.890
the root node, so to speak, is
HTML, drawn with a rectangle

00:51:50.890 --> 00:51:52.480
here, just for discussion's sake.

00:51:52.480 --> 00:51:55.330
It has two children, head
and body, also rectangles.

00:51:55.330 --> 00:51:58.660
Head has a title child,
and then it and body

00:51:58.660 --> 00:52:01.670
have text nodes, which I've
drawn with ovals instead.

00:52:01.670 --> 00:52:05.110
Which is only to say that when your
browser, Chrome, Safari, whatever,

00:52:05.110 --> 00:52:07.570
downloads a web page,
opens up that envelope,

00:52:07.570 --> 00:52:10.580
and sees the contents that
have come back from the server,

00:52:10.580 --> 00:52:14.030
it essentially reads the
code that someone wrote,

00:52:14.030 --> 00:52:16.440
the HTML code, top to
bottom, left to right,

00:52:16.440 --> 00:52:20.210
and creates in the browser's
memory, in your Mac or your PC

00:52:20.210 --> 00:52:24.050
or your phone's memory or RAM,
this kind of data structure.

00:52:24.050 --> 00:52:25.940
That's what's going on
underneath the hood.

00:52:25.940 --> 00:52:28.400
And that's why aesthetically,
it's just nice, as a human,

00:52:28.400 --> 00:52:31.610
to indent things stylistically,
because it's very clear then

00:52:31.610 --> 00:52:36.510
to you, and to other programmers,
what the structure actually is.

00:52:36.510 --> 00:52:39.920
So that's it for like
the fundamentals of HTML.

00:52:39.920 --> 00:52:42.260
We'll see a bunch of tags
and a bunch of examples now.

00:52:42.260 --> 00:52:44.490
But HTML is just tags and attributes.

00:52:44.490 --> 00:52:47.240
And it's the kind of thing that
you look them up when you need to.

00:52:47.240 --> 00:52:48.950
Eventually, many of them get ingrained.

00:52:48.950 --> 00:52:51.747
I constantly check the reference
guides or stack overflow

00:52:51.747 --> 00:52:54.080
if I'm trying to figure out,
how do I lay something out.

00:52:54.080 --> 00:52:55.872
It's really just these
building blocks that

00:52:55.872 --> 00:52:58.940
allow you to assemble the
structure of a web page.

00:52:58.940 --> 00:53:02.360
This one is being super simple,
but it's just tags and attributes.

00:53:02.360 --> 00:53:04.910
Any questions on this
framework, before we

00:53:04.910 --> 00:53:09.297
start to add more tags, more
vocabulary, if you will?

00:53:09.297 --> 00:53:10.130
In the middle, yeah.

00:53:10.130 --> 00:53:13.110
AUDIENCE: What would happen
if we put the title tag?

00:53:13.110 --> 00:53:16.900
SPEAKER 1: If we put the hello tag
around body, that's a good question.

00:53:16.900 --> 00:53:17.560
Let's try it.

00:53:17.560 --> 00:53:24.060
So let me actually go to this,
and say open bracket title,

00:53:24.060 --> 00:53:27.270
whoops, sometimes you don't want
it to finish your thought for you.

00:53:27.270 --> 00:53:28.410
But it did that time.

00:53:28.410 --> 00:53:30.840
I've gone ahead and changed the file.

00:53:30.840 --> 00:53:34.170
Let me go and open up, give me a
second to open my terminal window,

00:53:34.170 --> 00:53:38.220
and go back to the URL that has my page.

00:53:38.220 --> 00:53:40.440
Give me a second.

00:53:40.440 --> 00:53:42.000
There's my Hello.html.

00:53:42.000 --> 00:53:43.570
Let me zoom in on this.

00:53:43.570 --> 00:53:44.970
Let me zoom in on this.

00:53:44.970 --> 00:53:49.700
And let me go ahead now
and click on Hello.html.

00:53:49.700 --> 00:53:53.160
And in this case, it looks like
we don't actually see anything.

00:53:53.160 --> 00:53:54.440
So the browser is hiding it.

00:53:54.440 --> 00:53:57.860
Technically speaking, browsers
tend to be pretty generous.

00:53:57.860 --> 00:54:00.140
And half the time, when
you make mistakes in HTML,

00:54:00.140 --> 00:54:01.910
it will display, it might display--

00:54:01.910 --> 00:54:03.245
not display as you intend it.

00:54:03.245 --> 00:54:06.830
It might not display the same on
Macs or PCs or Chrome or on Firefox.

00:54:06.830 --> 00:54:09.020
There is a tool, though,
that we'll see, that

00:54:09.020 --> 00:54:10.850
can help answer this question for you.

00:54:10.850 --> 00:54:14.840
For instance, if I go
to Validator.w3.org,

00:54:14.840 --> 00:54:16.880
W3 is the World Wide
Web Consortium, a group

00:54:16.880 --> 00:54:19.040
of people that standardize
this kind of stuff,

00:54:19.040 --> 00:54:21.440
I can click on Validate
by direct input, and just

00:54:21.440 --> 00:54:25.220
copy paste my sample HTML into
this box, and click Check.

00:54:25.220 --> 00:54:27.860
And I should see,
hopefully, that indeed, it's

00:54:27.860 --> 00:54:29.480
an error, what you proposed that I do.

00:54:29.480 --> 00:54:31.552
The browser just did its
best to do something,

00:54:31.552 --> 00:54:34.760
which was to show me nothing at least,
rather than the incorrect information.

00:54:34.760 --> 00:54:38.300
But if I revert that change, and
let me undo what we just did,

00:54:38.300 --> 00:54:43.220
let me copy my original code back
into this text box, and click Check,

00:54:43.220 --> 00:54:45.640
now you can see, conversely,
my code is now correct.

00:54:45.640 --> 00:54:47.390
And there's automated
tools to check that.

00:54:47.390 --> 00:54:49.682
But we'll encourage you, for
problem sets and projects,

00:54:49.682 --> 00:54:52.640
to use that particular manual tool.

00:54:52.640 --> 00:54:55.430
All right, so let's go ahead
and enhance this a little bit

00:54:55.430 --> 00:54:57.380
by introducing a whole
bunch of tags, just

00:54:57.380 --> 00:54:59.760
to give you a sense of some
of the building blocks here.

00:54:59.760 --> 00:55:05.100
So I'm going to go ahead and create
a new file called Paragraphs.html.

00:55:05.100 --> 00:55:08.100
And I'm just going to do a bunch of
copy/paste just to start things off,

00:55:08.100 --> 00:55:11.240
so I'm not constantly typing all
this darn stuff again and again,

00:55:11.240 --> 00:55:13.220
because I want everything
to be the same here,

00:55:13.220 --> 00:55:16.250
except I'm going to change my title
to be Paragraphs for this demo.

00:55:16.250 --> 00:55:19.837
And inside of the body, I need a
whole bunch of paragraphs of text.

00:55:19.837 --> 00:55:21.920
And I don't really want
to come up with some text.

00:55:21.920 --> 00:55:25.490
So let me go to some random website
here and grab lorem ipsum text,

00:55:25.490 --> 00:55:28.860
which if you're involved in like
student newspaper or just design,

00:55:28.860 --> 00:55:32.390
this is placeholder text, kind of looks
like Latin, but technically isn't.

00:55:32.390 --> 00:55:35.930
Here, though, I have a handy way of
just getting three long paragraphs

00:55:35.930 --> 00:55:37.610
in something that looks like Latin.

00:55:37.610 --> 00:55:39.820
And I've put those,
notice, inside of the body.

00:55:39.820 --> 00:55:40.820
And they're indeed long.

00:55:40.820 --> 00:55:43.920
Look how long the
made-up words here are.

00:55:43.920 --> 00:55:50.060
So let me go now into
my browser tab here.

00:55:50.060 --> 00:55:54.110
Let me reload this page, and you'll
see two files have now appeared,

00:55:54.110 --> 00:55:56.810
Paragraphs.html, which is
my new one, and Hello.html.

00:55:56.810 --> 00:56:02.160
Let me click on Paragraphs.html,
and what clearly seems to be wrong?

00:56:02.160 --> 00:56:02.660
Yeah.

00:56:02.660 --> 00:56:03.980
AUDIENCE: One paragraph.

00:56:03.980 --> 00:56:06.980
SPEAKER 1: Yeah, it's obviously one
massive paragraph, instead of three.

00:56:06.980 --> 00:56:11.570
So that's interesting, but it's just a
little hint as to how pedantic HTML is.

00:56:11.570 --> 00:56:12.950
It will only do what you say.

00:56:12.950 --> 00:56:16.220
And each of these tags tells the
browser to start doing something,

00:56:16.220 --> 00:56:19.610
and then maybe stop doing something,
like, hey, browser, here comes my HTML.

00:56:19.610 --> 00:56:21.485
Hey, browser, here comes
the head of my page.

00:56:21.485 --> 00:56:24.020
Hey, browser, here comes the
title of my page, Hello, title.

00:56:24.020 --> 00:56:25.850
Hey, browser, that's it for the title.

00:56:25.850 --> 00:56:28.470
That's it for the head,
here comes the body tag.

00:56:28.470 --> 00:56:31.220
So it's kind of having this
conversation between the browser,

00:56:31.220 --> 00:56:34.280
between the HTML and the browser,
doing literally what it says.

00:56:34.280 --> 00:56:36.530
So if you want a
paragraph, you're probably

00:56:36.530 --> 00:56:39.290
going to want to use
the P tag for paragraph.

00:56:39.290 --> 00:56:42.450
And I'm going to go ahead
and add this to my code.

00:56:42.450 --> 00:56:45.200
I'm going to keep things neat,
even though the browser won't care,

00:56:45.200 --> 00:56:46.880
by indenting things here.

00:56:46.880 --> 00:56:50.840
Let me create another paragraph
tag here, and close it

00:56:50.840 --> 00:56:53.330
right after that one,
indenting again, and I'm

00:56:53.330 --> 00:56:55.040
keeping everything nice and orderly.

00:56:55.040 --> 00:56:57.210
Let me do one more here.

00:56:57.210 --> 00:57:02.700
Let me indent that, and then let me
add it to the end of my page here.

00:57:02.700 --> 00:57:06.480
So again, a little tedious, but now I
have three paragraphs of text that say,

00:57:06.480 --> 00:57:07.910
hey, browser, start a paragraph.

00:57:07.910 --> 00:57:09.530
Hey, browser, stop that paragraph.

00:57:09.530 --> 00:57:11.490
Start, stop, and so forth.

00:57:11.490 --> 00:57:13.770
Let me go back to the
browser window here.

00:57:13.770 --> 00:57:17.300
Let me hit Command R or
Control R to reload the page.

00:57:17.300 --> 00:57:20.540
And voila, now I have three
cleaner paragraphs, all right?

00:57:20.540 --> 00:57:22.370
So there's a P tag for paragraphs.

00:57:22.370 --> 00:57:24.380
So now we have that
particular building block.

00:57:24.380 --> 00:57:27.647
What if I want to add, for instance,
some headings to this page?

00:57:27.647 --> 00:57:29.480
Well, that's something
that's possible, too.

00:57:29.480 --> 00:57:32.960
Let me go ahead and create a
new file called Headings.html.

00:57:32.960 --> 00:57:35.720
Let me copy and paste
that same code as before.

00:57:35.720 --> 00:57:39.830
But now, let's preface each
paragraph with maybe H1.

00:57:39.830 --> 00:57:42.290
And I'm going to just
write the word one.

00:57:42.290 --> 00:57:45.260
And here I'm going to say H2, two.

00:57:45.260 --> 00:57:48.380
And down here I might say H3, three.

00:57:48.380 --> 00:57:52.993
So this is another tag,
another three tags, H1, H2, H3.

00:57:52.993 --> 00:57:55.160
As you might have inferred
by the file name I chose,

00:57:55.160 --> 00:57:59.150
this just gives you headings, like in
a book, different chapters or sections

00:57:59.150 --> 00:58:01.220
or subsections, or in
an academic paper, you

00:58:01.220 --> 00:58:03.990
have different hierarchies to
the text that you're writing.

00:58:03.990 --> 00:58:08.270
So now that I've added an H1 tag,
and the word one, H2 tag, the word

00:58:08.270 --> 00:58:11.300
two, H3 tag and the word three,
let's go back to the browser,

00:58:11.300 --> 00:58:16.040
reload the page again,
and voila, once the page

00:58:16.040 --> 00:58:20.960
reloads, I'll do it with the
manual button, reload the page.

00:58:20.960 --> 00:58:23.640
Oh, what am I doing wrong?

00:58:23.640 --> 00:58:24.140
Yeah.

00:58:24.140 --> 00:58:25.432
AUDIENCE: Not in headings file.

00:58:25.432 --> 00:58:27.390
SPEAKER 1: Right, I'm
not in the headings file.

00:58:27.390 --> 00:58:28.710
So let me go back a page.

00:58:28.710 --> 00:58:30.230
Now there's Headings.html.

00:58:30.230 --> 00:58:31.410
Let me click on that.

00:58:31.410 --> 00:58:33.110
OK, now we see some evidence of this.

00:58:33.110 --> 00:58:34.730
Again, it's nonsensical content.

00:58:34.730 --> 00:58:37.790
But you can kind of see that
H1 is apparently big and bold,

00:58:37.790 --> 00:58:40.730
H2 is slightly less big, but still bold.

00:58:40.730 --> 00:58:42.560
H3 is the same but a little smaller.

00:58:42.560 --> 00:58:44.175
And it goes all the way down to H6.

00:58:44.175 --> 00:58:46.550
After that, you should probably
reorganize your thoughts.

00:58:46.550 --> 00:58:48.440
But there are six
different hierarchies here,

00:58:48.440 --> 00:58:52.640
as you might use for chapters, sections,
subsections, and so forth, all right?

00:58:52.640 --> 00:58:56.870
So those are headings, as an
HTML tag, in our vocabulary.

00:58:56.870 --> 00:59:03.710
What's a common thing, too, well, let
me go to VS Code again, let me go ahead

00:59:03.710 --> 00:59:08.660
and get some boilerplate here,
create a file called List.html.

00:59:08.660 --> 00:59:11.450
Let's create a simple
list inside of my body,

00:59:11.450 --> 00:59:14.330
and I'll give this a title of List.

00:59:14.330 --> 00:59:17.340
And let me fix the title of this
one to be Headings, as well.

00:59:17.340 --> 00:59:22.980
So in List.html, suppose I want to have
a list of things, foo, bar, and baths,

00:59:22.980 --> 00:59:24.980
they're like a computer
scientist's go-to words,

00:59:24.980 --> 00:59:27.110
just like a mathematician might say xyz.

00:59:27.110 --> 00:59:29.930
Foo, bar, baths is in List.html.

00:59:29.930 --> 00:59:33.800
Let me go back to my
browser, hit the Back button.

00:59:33.800 --> 00:59:37.730
There's List.html, and, hopefully,
I'll see foo, bar, and baths, one

00:59:37.730 --> 00:59:41.700
on each line like a nice little
list, but, of course, I do not.

00:59:41.700 --> 00:59:42.770
And this is not English.

00:59:42.770 --> 00:59:44.810
Chrome thinks it might be Arabic.

00:59:44.810 --> 00:59:48.557
But that's curious, too,
because the Lang attribute

00:59:48.557 --> 00:59:49.640
should be overriding that.

00:59:49.640 --> 00:59:51.832
So Google is trying to override it.

00:59:51.832 --> 00:59:53.540
All right, what's the
obvious explanation

00:59:53.540 --> 00:59:56.570
why we're seeing foo, bar, and
baths on the same line, and not

00:59:56.570 --> 00:59:57.740
three separate ones?

00:59:57.740 --> 00:59:59.150
AUDIENCE: We didn't tell it.

00:59:59.150 --> 01:00:00.817
SPEAKER 1: We didn't tell it to do that.

01:00:00.817 --> 01:00:03.080
So we need paragraph tags,
or maybe something else.

01:00:03.080 --> 01:00:04.730
Turns out there is something else.

01:00:04.730 --> 01:00:08.780
There is a UL tag, for an
unordered list in HTML,

01:00:08.780 --> 01:00:12.405
inside of which you can
have LI tags, for list item,

01:00:12.405 --> 01:00:14.030
inside of which you can put your words.

01:00:14.030 --> 01:00:17.670
So there's my foo, there's
my bar, there's my baths.

01:00:17.670 --> 01:00:20.480
And, again, notice that VS Code
is finishing my thought for me.

01:00:20.480 --> 01:00:25.220
But notice the hierarchy, open
UL, open LI, close LI, open LI,

01:00:25.220 --> 01:00:28.580
close LI, open LI, close LI, close UL.

01:00:28.580 --> 01:00:30.950
So it's sort of done
in reverse order here.

01:00:30.950 --> 01:00:36.980
Let me go back to my browser, reload
the same page, List.html, and voila,

01:00:36.980 --> 01:00:40.190
a default bulleted list, that
still seems to be in Arabic.

01:00:40.190 --> 01:00:41.960
What if I want this list to be numbered?

01:00:41.960 --> 01:00:43.610
Well, you can probably guess.

01:00:43.610 --> 01:00:47.180
If you don't want an unordered list, but
an ordered list, what tag should I use?

01:00:47.180 --> 01:00:48.470
AUDIENCE: OL.

01:00:48.470 --> 01:00:50.450
SPEAKER 1: OL, sure, so let's try that.

01:00:50.450 --> 01:00:53.120
Not always that easy as just
guessing, but in this case,

01:00:53.120 --> 01:00:54.870
OL is going to do the trick.

01:00:54.870 --> 01:00:56.390
Let me go back to my other browser.

01:00:56.390 --> 01:00:59.473
Let me reload the page, and now it's
going to automatically number for me.

01:00:59.473 --> 01:01:01.920
It's a tiny thing, but
this is actually useful

01:01:01.920 --> 01:01:04.260
if you have a very long
list of data, and maybe you

01:01:04.260 --> 01:01:06.420
might add some things in the
middle, the beginning, or the end.

01:01:06.420 --> 01:01:08.753
It would just be annoying to
have to go and renumber it.

01:01:08.753 --> 01:01:11.580
The computer is doing it
for us by, instead, just

01:01:11.580 --> 01:01:13.960
numbering from top to bottom here.

01:01:13.960 --> 01:01:16.020
All right, what about
another type of layout,

01:01:16.020 --> 01:01:18.767
not just paragraphs, not just
lists, but what about tabular data?

01:01:18.767 --> 01:01:20.850
You've got some research
data you want to present,

01:01:20.850 --> 01:01:24.142
some financial data you want to present,
a phone book that you want to present.

01:01:24.142 --> 01:01:27.030
How might we go about laying
out data, a la a table?

01:01:27.030 --> 01:01:30.030
Well, let me create a
file called Table.html,

01:01:30.030 --> 01:01:32.730
and I'll just copy paste
where we started earlier.

01:01:32.730 --> 01:01:35.100
Let me start to close
some of these other files.

01:01:35.100 --> 01:01:38.497
And in Table.html, this is
going to be a bit more HTML,

01:01:38.497 --> 01:01:40.080
but I'm going to go ahead and do this.

01:01:40.080 --> 01:01:44.400
Table and close table, tables
can have table headings.

01:01:44.400 --> 01:01:49.690
So T head is the name of that tag, and
tables can have T bodies, table bodies.

01:01:49.690 --> 01:01:50.970
So I'm going to add that tag.

01:01:50.970 --> 01:01:53.428
And this is a common technique,
sort of start your thought,

01:01:53.428 --> 01:01:56.530
finish your thought, and then go
back and fill in what's in between.

01:01:56.530 --> 01:01:58.110
What do I want to put in this table?

01:01:58.110 --> 01:02:02.200
How about a bunch of names and numbers.

01:02:02.200 --> 01:02:06.160
So, for instance, like left
column name, right column number.

01:02:06.160 --> 01:02:09.450
So let's create a table row,
with what's called the TR tag.

01:02:09.450 --> 01:02:14.190
Let's create a table heading with
the TH tag, and let's say name here.

01:02:14.190 --> 01:02:18.070
Let's create another table
heading called number here.

01:02:18.070 --> 01:02:21.420
And all of that, to be
clear, is in one table row.

01:02:21.420 --> 01:02:25.140
Meanwhile, in the table body,
let me create another table row,

01:02:25.140 --> 01:02:26.910
but this time, it's not a heading.

01:02:26.910 --> 01:02:28.390
Now I'm in the guts of my table.

01:02:28.390 --> 01:02:31.980
Let's do table data, which is synonymous
with like the cell of the table,

01:02:31.980 --> 01:02:34.680
in like an Excel spreadsheet
or Google spreadsheet.

01:02:34.680 --> 01:02:37.530
In this TD, I'm going to
say like Carter's name,

01:02:37.530 --> 01:02:43.290
and then lets grab Carter's number
from our past demo, 617-495-1000.

01:02:43.290 --> 01:02:47.020
Then let's put me into the mix, and
I'll go ahead and copy paste here,

01:02:47.020 --> 01:02:48.150
which often is not good.

01:02:48.150 --> 01:02:51.270
But we'll see that there's a lot
of shared structure with HTML.

01:02:51.270 --> 01:02:57.580
Let me go ahead and do mine,
949-468-2750, and now save this page.

01:02:57.580 --> 01:03:00.000
So we're getting to be
a lot of indentation.

01:03:00.000 --> 01:03:03.520
I'm using four spaces by default.
Some people use two spaces by default.

01:03:03.520 --> 01:03:06.000
So long as you're consistent,
that's considered good style.

01:03:06.000 --> 01:03:08.790
But let me go back to my
browser here, and hit back.

01:03:08.790 --> 01:03:11.040
That then brings me to my
directory listing again.

01:03:11.040 --> 01:03:14.370
Here's Table.html, and this
is not that interesting yet.

01:03:14.370 --> 01:03:17.340
But you can see that there's
two columns, name and number.

01:03:17.340 --> 01:03:22.110
Because it's a table heading, TH,
the browser made it boldfaced for me.

01:03:22.110 --> 01:03:25.920
In there, in the table, are two
rows below that, Carter and David.

01:03:25.920 --> 01:03:29.070
It's a little, oh, I forgot my
number one, sorry about that.

01:03:29.070 --> 01:03:32.005
One and one, it's not the
prettiest table, right?

01:03:32.005 --> 01:03:33.880
I feel like I kind of
want to separate things

01:03:33.880 --> 01:03:35.963
a little more, maybe put
some borders or the like.

01:03:35.963 --> 01:03:40.090
But with HTML alone, I'm really
focusing on the structure alone.

01:03:40.090 --> 01:03:41.710
So we'll make this prettier soon.

01:03:41.710 --> 01:03:45.140
But for now, this is how you
might lay out tabular data.

01:03:45.140 --> 01:03:47.890
All right, let me pause here just
to see if there's any questions.

01:03:47.890 --> 01:03:50.220
But, again, the goal right now
is just to kind of throw at you

01:03:50.220 --> 01:03:53.610
some basic building blocks, that, again,
can be easily looked up in a reference.

01:03:53.610 --> 01:03:57.480
But we're going to start
stylizing these things soon, too.

01:03:57.480 --> 01:03:58.350
Yeah, in the middle.

01:03:58.350 --> 01:03:59.500
AUDIENCE: How to indent?

01:03:59.500 --> 01:04:01.195
SPEAKER 1: How do you indent paragraphs?

01:04:01.195 --> 01:04:02.070
Really good question.

01:04:02.070 --> 01:04:03.630
For that, we'll probably
going to want something

01:04:03.630 --> 01:04:05.117
called CSS, Cascading Style Sheets.

01:04:05.117 --> 01:04:07.200
So let me come back to
that, in just a little bit.

01:04:07.200 --> 01:04:10.590
For the stylization of these things,
beyond the basics, like big and bold,

01:04:10.590 --> 01:04:13.980
we're going to need a
different language altogether.

01:04:13.980 --> 01:04:16.980
All right, well, let's
now create what the web

01:04:16.980 --> 01:04:21.510
is full of, which is like
photographs and images and the like.

01:04:21.510 --> 01:04:26.640
Let me go ahead and create a new file
called Image.html, and let me go ahead

01:04:26.640 --> 01:04:29.590
and change the title
here to be, say, Image.

01:04:29.590 --> 01:04:32.997
And then, in the body of this page,
let's go ahead and put an image.

01:04:32.997 --> 01:04:35.580
The interesting thing about an
image is that it's actually not

01:04:35.580 --> 01:04:39.060
going to have a start tag and an end
tag, because that's kind of illogical.

01:04:39.060 --> 01:04:42.090
Like, how can you start an image
and then eventually finish it?

01:04:42.090 --> 01:04:43.710
It's either there or it isn't.

01:04:43.710 --> 01:04:46.350
So some tags do not have end tags.

01:04:46.350 --> 01:04:52.890
So let me do image, IMG,
source equals Harvard.jpeg.

01:04:52.890 --> 01:04:55.710
And let me go ahead, and,
in my terminal window,

01:04:55.710 --> 01:04:58.110
I actually came with a photo of Harvard.

01:04:58.110 --> 01:05:01.560
Let me grab this for just a second.

01:05:01.560 --> 01:05:04.980
Let me grab Harvard.jpeg and
put it into my directory,

01:05:04.980 --> 01:05:07.630
pretend that I downloaded
that in advance.

01:05:07.630 --> 01:05:10.230
And so I'm referring
to now a file called

01:05:10.230 --> 01:05:15.840
Harvard.jpeg, that apparently is in
the same folder as my Image.html file.

01:05:15.840 --> 01:05:19.020
If this image were on the
internet, like Harvard server,

01:05:19.020 --> 01:05:25.210
I could also say like
HTTPS://www.Harvard.edu/FolderName,

01:05:25.210 --> 01:05:29.370
whatever it is, /Harvard.jpeg, but
if you've in advance uploaded a file

01:05:29.370 --> 01:05:32.580
to your own, the Scode environment,
like I did before class,

01:05:32.580 --> 01:05:35.880
by dragging and dropping this
whole file, this photo of Harvard,

01:05:35.880 --> 01:05:39.210
you can just refer to it
relatively, so to speak.

01:05:39.210 --> 01:05:42.330
This would be the same thing
as saying ./Harvard.jpeg,

01:05:42.330 --> 01:05:45.750
go to the current directory and
get the file called Harvard.jpeg.

01:05:45.750 --> 01:05:47.670
But that's unnecessary to type.

01:05:47.670 --> 01:05:51.270
For accessibility purposes, though,
for someone who's vision-impaired,

01:05:51.270 --> 01:05:54.930
it's ideal if we also give this
an alternative text, something

01:05:54.930 --> 01:05:58.830
like Harvard University,
in the so-called Alt tag,

01:05:58.830 --> 01:06:01.140
and this is so that
screen readers will recite

01:06:01.140 --> 01:06:03.390
what it is the photo is,
for folks who can't see it.

01:06:03.390 --> 01:06:05.880
And if you're just on a slow
connection, sometimes you'll

01:06:05.880 --> 01:06:07.860
see the text of what
you're about to see,

01:06:07.860 --> 01:06:11.410
before the image itself downloads,
especially on a mobile device.

01:06:11.410 --> 01:06:16.050
So let's now go back to my open browser
tab, and let's look in the directory.

01:06:16.050 --> 01:06:20.340
I now have Harvard.jpeg, which I
downloaded in advance, and Image.html.

01:06:20.340 --> 01:06:24.060
Let me click on Image.html,
and here we have

01:06:24.060 --> 01:06:28.980
a really big picture of Memorial
Hall, the building we're currently in.

01:06:28.980 --> 01:06:33.570
Suffice it to say I should probably fix
this and maybe make it only so wide.

01:06:33.570 --> 01:06:37.080
But to do that, we're going to probably
want to use this other language, CSS.

01:06:37.080 --> 01:06:40.650
There are some historical
attributes that you can still

01:06:40.650 --> 01:06:43.092
use to control width and
height, and so forth.

01:06:43.092 --> 01:06:45.300
But we're going to do it
the better way, so to speak,

01:06:45.300 --> 01:06:47.850
with a language designed for just that.

01:06:47.850 --> 01:06:49.290
How about a video, though.

01:06:49.290 --> 01:06:54.210
I also came prepared with,
let me grab another file here,

01:06:54.210 --> 01:06:59.590
let me grab a file called
Halloween.mp4, which is an MPEG file.

01:06:59.590 --> 01:07:06.630
And let me go ahead and change this
now to be a file called Video.html.

01:07:06.630 --> 01:07:08.400
I'll change my title to be Video.

01:07:08.400 --> 01:07:11.790
And let's go ahead and now
introduce another tag, a video tag,

01:07:11.790 --> 01:07:16.980
open bracket video, and then let me go
ahead and close that tag proactively.

01:07:16.980 --> 01:07:21.270
And then inside of the video tag,
you can say the source of the video

01:07:21.270 --> 01:07:26.310
is going to be specifically
Halloween.mp4, the type of this file,

01:07:26.310 --> 01:07:31.320
I know, is Video/mp4, because I looked
up its content type or MIME type.

01:07:31.320 --> 01:07:33.510
And the video tag actually
has a few attributes.

01:07:33.510 --> 01:07:35.520
I can have this thing autoplay.

01:07:35.520 --> 01:07:37.200
I can have it loop forever.

01:07:37.200 --> 01:07:40.410
I can mute it, so that there's no
sound, which is necessary nowadays.

01:07:40.410 --> 01:07:45.190
Most browsers, to prevent ads, don't
autoplay videos, if they have sound.

01:07:45.190 --> 01:07:48.390
So if you mute your video, it
will autoplay, but presumably not

01:07:48.390 --> 01:07:49.410
annoy users.

01:07:49.410 --> 01:07:53.740
And let me set the width of this thing
to be like, oh, 1280 pixels wide.

01:07:53.740 --> 01:07:55.390
But I can make it any size I want.

01:07:55.390 --> 01:07:59.100
So I know this just from having
looked up the syntax for this tag.

01:07:59.100 --> 01:08:00.930
But notice one curiosity.

01:08:00.930 --> 01:08:03.630
Sometimes attributes don't have values.

01:08:03.630 --> 01:08:04.860
They're empty attributes.

01:08:04.860 --> 01:08:08.195
They're just single words,
autoplay, loop, muted,

01:08:08.195 --> 01:08:10.320
and that kind of makes
sense for any attribute that

01:08:10.320 --> 01:08:12.150
really does what it says.

01:08:12.150 --> 01:08:15.180
Like, it doesn't make sense
to say muted equals something.

01:08:15.180 --> 01:08:16.530
Like it's either muted or not.

01:08:16.530 --> 01:08:18.130
The attribute is there or not.

01:08:18.130 --> 01:08:20.170
Similarly, for these others, as well.

01:08:20.170 --> 01:08:23.790
So let me go back to my other browser
tab, reload the directory listing.

01:08:23.790 --> 01:08:27.930
There is both my mp4
and also Video.html,

01:08:27.930 --> 01:08:30.010
which is the web page that embeds it.

01:08:30.010 --> 01:08:33.600
And this is actually a video that was
just on Harvard's website yesterday,

01:08:33.600 --> 01:08:34.750
and it was amazing.

01:08:34.750 --> 01:08:39.030
So we included it in this demo here.

01:08:39.030 --> 01:08:45.600
This is the video that was on
Harvard.edu last night, same photo.

01:08:45.600 --> 01:08:47.818
But you can see here that
an image alone probably

01:08:47.818 --> 01:08:49.110
would not have the same effect.

01:08:49.110 --> 01:08:52.303
This is actually a movie, a small
video file that's now looping.

01:08:52.303 --> 01:08:55.470
Now there's some artifacts here, like
there's a white border around the top.

01:08:55.470 --> 01:08:57.303
I feel like it'd be
nice to fill the screen.

01:08:57.303 --> 01:09:01.840
But again, we'll come back to a language
that can allow us to do exactly that.

01:09:01.840 --> 01:09:04.080
Well, it's not just
videos like this, that you

01:09:04.080 --> 01:09:05.790
might want to put into a web page.

01:09:05.790 --> 01:09:10.092
Let me create another
file called iFrame.html.

01:09:10.092 --> 01:09:13.050
If you've ever poked around with, if
you have your own YouTube account,

01:09:13.050 --> 01:09:16.373
or if you had your own blog or
WordPress site, or Wix or Squarespace,

01:09:16.373 --> 01:09:18.540
you might have been in the
habit of embedding videos

01:09:18.540 --> 01:09:21.480
in websites, using like
embedded YouTube players.

01:09:21.480 --> 01:09:25.170
Well, this is possible, too, using
what's called an inline frame,

01:09:25.170 --> 01:09:26.220
an iFrame.

01:09:26.220 --> 01:09:29.340
And an iFrame is just a tag
that is literally iFrame.

01:09:29.340 --> 01:09:32.768
It has source equals,
and then a URL, and if it

01:09:32.768 --> 01:09:36.060
happens to be a YouTube video, there's
a certain URL format you need to follow,

01:09:36.060 --> 01:09:37.620
per YouTube's documentation.

01:09:37.620 --> 01:09:45.460
So you might do www.youtube.com, embed,
and then here's an ID of a video.

01:09:45.460 --> 01:09:51.000
So this is essentially what we do, if
we want to embed CS50's own lecture

01:09:51.000 --> 01:09:54.210
videos, in the course's website, or
the video player does literally this.

01:09:54.210 --> 01:09:57.720
If I want to allow full screen,
I can add this attribute, too,

01:09:57.720 --> 01:10:00.470
that I know exists, by just
having checked the documentation.

01:10:00.470 --> 01:10:04.529
And if I now go back to my browser
here, reload my directory listing,

01:10:04.529 --> 01:10:05.847
there's iFrame.html.

01:10:05.847 --> 01:10:07.680
It's not going to fill
the screen, because I

01:10:07.680 --> 01:10:09.569
haven't customized the aesthetics yet.

01:10:09.569 --> 01:10:13.920
But it does seem to embed a tiny little
video there for you to play with later,

01:10:13.920 --> 01:10:14.529
if you'd like.

01:10:14.529 --> 01:10:17.609
So we could change the width, change
the height, get rid of that margin,

01:10:17.609 --> 01:10:18.279
and so forth.

01:10:18.279 --> 01:10:22.979
But an iFrame is a way of embedding
someone else's web page in your web

01:10:22.979 --> 01:10:25.770
page, if they allow
it, so as to create all

01:10:25.770 --> 01:10:29.460
the more of an interactive experience
for them on, say, your site.

01:10:29.460 --> 01:10:32.460
All right, well, the web is, of
course, known for things like links.

01:10:32.460 --> 01:10:35.880
Let's go ahead and create
a file called Link.html.

01:10:35.880 --> 01:10:39.390
And if we want to create a web page that
actually links from itself somewhere

01:10:39.390 --> 01:10:43.909
else, let's go ahead and do this,
something very simple like visit

01:10:43.909 --> 01:10:45.288
Harvard.edu period.

01:10:48.359 --> 01:10:51.990
Now, in like Facebook, Instagram, a lot
of websites nowadays, if you just type

01:10:51.990 --> 01:10:54.660
in a domain name, or a
fully qualified domain name,

01:10:54.660 --> 01:10:56.580
it automatically becomes a link.

01:10:56.580 --> 01:10:59.970
That's because those websites have
code in them that automatically

01:10:59.970 --> 01:11:04.359
detects something that looks like a
URL, and turns it into a proper link.

01:11:04.359 --> 01:11:06.260
HTML itself does not do that for you.

01:11:06.260 --> 01:11:10.630
And so if I go back to my web
page here, click on Link.html,

01:11:10.630 --> 01:11:13.660
if you type visit
Harvard.edu period, that's

01:11:13.660 --> 01:11:15.400
all you're literally going to see.

01:11:15.400 --> 01:11:19.000
But instinctively, even if you've
never written HTML before, what should

01:11:19.000 --> 01:11:23.135
we probably do here
to solve this problem?

01:11:23.135 --> 01:11:24.760
What could we do to solve this problem.

01:11:24.760 --> 01:11:26.052
What do I probably want to add.

01:11:26.052 --> 01:11:26.614
Yeah.

01:11:26.614 --> 01:11:28.270
AUDIENCE: Surround your--

01:11:28.270 --> 01:11:31.510
SPEAKER 1: Yeah, so I want to surround
the URL with some kind of link text.

01:11:31.510 --> 01:11:34.093
And you wouldn't necessarily
know this until someone told you,

01:11:34.093 --> 01:11:37.150
or you looked it up, but the tag for
creating a link is somewhat weirdly

01:11:37.150 --> 01:11:39.640
called the A tag for anchor.

01:11:39.640 --> 01:11:43.060
It has an attribute called
HREF for hyper-reference,

01:11:43.060 --> 01:11:46.600
which is like a link in
the virtual world to a URL.

01:11:46.600 --> 01:11:49.690
So let me type in Harvard's
full and proper URL here.

01:11:49.690 --> 01:11:51.910
Then I'm going to close the tag.

01:11:51.910 --> 01:11:57.220
And then I can still say Harvard.edu,
and make that what the human sees.

01:11:57.220 --> 01:12:02.770
But the place they're going to go
should be a full URL protocol and all,

01:12:02.770 --> 01:12:04.780
HTTP or HTTPS, and all.

01:12:04.780 --> 01:12:07.090
Now if I go back here
and reload the page,

01:12:07.090 --> 01:12:09.130
now it automatically gets underlined.

01:12:09.130 --> 01:12:10.900
It happens to be purple by default. Why?

01:12:10.900 --> 01:12:13.100
Because we visited
Harvard.edu a few minutes ago.

01:12:13.100 --> 01:12:16.450
So my browser, by default, is indicating
in purple that I've been there before.

01:12:16.450 --> 01:12:18.400
But now I have a link
that I can click on,

01:12:18.400 --> 01:12:22.690
and if I hover over it but don't click,
you'll see that, in most browsers,

01:12:22.690 --> 01:12:26.650
there's a little clue as to where
you will go if you click subsequently

01:12:26.650 --> 01:12:27.820
on this link.

01:12:27.820 --> 01:12:29.890
And without going too
far down a rabbit hole,

01:12:29.890 --> 01:12:33.280
but to tie together our discussion
of cybersecurity recently,

01:12:33.280 --> 01:12:36.670
what if I were to do
something like this.

01:12:36.670 --> 01:12:41.140
Right now you have the beginnings
of a phishing attack of sorts,

01:12:41.140 --> 01:12:46.090
P-H-I-S-H-I-N-G, whereby you can
create clearly a web page, or, heck,

01:12:46.090 --> 01:12:50.350
even an email using HTML, that tells
the user they're going to go one place,

01:12:50.350 --> 01:12:53.420
but they're really going to
go someplace else altogether.

01:12:53.420 --> 01:12:55.930
And that is the essence of
phishing attacks these days.

01:12:55.930 --> 01:12:59.260
If you've ever gotten a bogus
email pretending to be from PayPal

01:12:59.260 --> 01:13:01.720
or your bank or some
other website, odds are

01:13:01.720 --> 01:13:04.240
they've just written HTML
that says whatever they want,

01:13:04.240 --> 01:13:07.850
but the underlying tags might
do something very different.

01:13:07.850 --> 01:13:10.600
And so having the instinct to look
in the bottom left hand corner,

01:13:10.600 --> 01:13:14.020
or be a little suspicious when you're
just told blindly to click on a link,

01:13:14.020 --> 01:13:17.410
it's this easy to socially
engineer people, that is,

01:13:17.410 --> 01:13:22.150
deceive them, by just saying one
thing and linking to another.

01:13:22.150 --> 01:13:26.380
Well, what if I want to link my page
to another page I already created?

01:13:26.380 --> 01:13:29.230
Well, if I want to link
to that photo of Harvard,

01:13:29.230 --> 01:13:32.530
I can just do HREF = equals quote
unquote and the name of a file,

01:13:32.530 --> 01:13:35.930
in my same account, that
is itself a web page.

01:13:35.930 --> 01:13:39.490
So this is how you can create
relative links, multi-page web

01:13:39.490 --> 01:13:42.080
pages, multi-page websites, yourself.

01:13:42.080 --> 01:13:45.460
So if I now reload this
page, hover over Harvard.edu,

01:13:45.460 --> 01:13:49.000
you'll see in the bottom left
hand corner a very long URL.

01:13:49.000 --> 01:13:51.910
But that's because I'm in code
spaces right now, VS Code,

01:13:51.910 --> 01:13:55.570
and it's appending automatically
to the end of my current URL

01:13:55.570 --> 01:13:57.755
the file name, Image.html.

01:13:57.755 --> 01:13:58.630
But this should work.

01:13:58.630 --> 01:14:01.060
When I click on this, I
go immediately to that

01:14:01.060 --> 01:14:04.960
file we created earlier, with a
crazy, big version of the image.

01:14:04.960 --> 01:14:07.630
But that's just a way
that one page on a website

01:14:07.630 --> 01:14:11.530
can link to another page on a website.

01:14:11.530 --> 01:14:15.520
Let's do one other thing here,
making things more responsive,

01:14:15.520 --> 01:14:18.430
because, in fact, that wasn't a
particularly responsive website.

01:14:18.430 --> 01:14:21.510
Responsive means responding to the
size of the user's device, which

01:14:21.510 --> 01:14:24.010
is so important when someone
might be on a screen like this,

01:14:24.010 --> 01:14:25.840
or on a screen like this these days.

01:14:25.840 --> 01:14:30.700
There are special tags we can use to
tell the browser to modify its display,

01:14:30.700 --> 01:14:32.080
based on the hardware.

01:14:32.080 --> 01:14:36.190
So let me create a file
called Responsive.html.

01:14:36.190 --> 01:14:39.940
I'm going to copy/paste some starting
point here, call this title Responsive.

01:14:39.940 --> 01:14:44.560
And let me go ahead and just grab, let
me grab some of that lorem ipsum text

01:14:44.560 --> 01:14:50.150
from before, just so that we have a
sizable paragraph to play with here.

01:14:50.150 --> 01:14:53.980
And let me go ahead and
grab this text here.

01:14:53.980 --> 01:14:57.440
And I'm just going to paste
this into the body of this page.

01:14:57.440 --> 01:14:58.220
And that's it.

01:14:58.220 --> 01:15:01.570
So I just have a big paragraph,
at the moment, inside of my body.

01:15:01.570 --> 01:15:03.340
Let me go back to my browser.

01:15:03.340 --> 01:15:06.430
Let me open up this file,
called Responsive.html,

01:15:06.430 --> 01:15:09.250
to make the point that
it is not yet responsive.

01:15:09.250 --> 01:15:11.590
Let me go ahead and
click on Responsive.html.

01:15:11.590 --> 01:15:12.770
That looks fine.

01:15:12.770 --> 01:15:16.190
But here's another trick you can do,
using Chrome or Edge or other browsers

01:15:16.190 --> 01:15:16.690
these days.

01:15:16.690 --> 01:15:18.730
You can pretend to be another device.

01:15:18.730 --> 01:15:23.140
Let me go to View, developer,
developer tools again.

01:15:23.140 --> 01:15:25.588
Last time we used this to
use the Network tab, which

01:15:25.588 --> 01:15:28.630
was kind of interesting, because we
could see what the underlying network

01:15:28.630 --> 01:15:29.630
traffic is.

01:15:29.630 --> 01:15:32.920
But notice, we can also click on
this icon, in Chrome, at least,

01:15:32.920 --> 01:15:34.960
that looks like a mobile phone.

01:15:34.960 --> 01:15:40.007
I can turn my laptop into what looks
like a mobile device by clicking this.

01:15:40.007 --> 01:15:43.090
I'm going to click the dot dot dot
menu over here, and just move the dock.

01:15:43.090 --> 01:15:45.310
Instead of on the bottom,
where it might be by default,

01:15:45.310 --> 01:15:47.090
I'm going to move it
to the right hand side.

01:15:47.090 --> 01:15:49.120
So that now on the left,
you see what looks more

01:15:49.120 --> 01:15:50.890
like the shape of a vertical phone.

01:15:50.890 --> 01:15:53.650
And, in fact, if I go
to my dimensions here,

01:15:53.650 --> 01:15:57.550
I'll choose something like
iPhone X, so a few years back.

01:15:57.550 --> 01:16:01.470
Here's what that same website might
look like on an iPhone X. You know,

01:16:01.470 --> 01:16:05.130
that looks pretty damn
small, to be able to read it.

01:16:05.130 --> 01:16:07.650
And that's because the
website has not automatically

01:16:07.650 --> 01:16:11.580
responded to the fairly narrow
dimensions of the iPhone

01:16:11.580 --> 01:16:13.780
in question, or Android
device, or whatnot.

01:16:13.780 --> 01:16:15.220
So let me go ahead and do this.

01:16:15.220 --> 01:16:17.200
Let me go back into my code.

01:16:17.200 --> 01:16:20.190
And let me go into the head of
the page, and for the first time,

01:16:20.190 --> 01:16:21.958
add another tag up here.

01:16:21.958 --> 01:16:24.000
This word is now all over
the internet, but there

01:16:24.000 --> 01:16:26.940
is a metatag that is
called, that allows you

01:16:26.940 --> 01:16:30.818
to specify the name of some kind
of configuration detail here,

01:16:30.818 --> 01:16:31.860
or property, if you will.

01:16:31.860 --> 01:16:34.890
Viewport is the technical term
for the rectangular region

01:16:34.890 --> 01:16:36.550
that the human sees in a browser.

01:16:36.550 --> 01:16:39.300
It's essentially the body of the
page. but only the part the human

01:16:39.300 --> 01:16:40.860
is currently seeing.

01:16:40.860 --> 01:16:43.560
And you can specify the
content of the viewport

01:16:43.560 --> 01:16:45.570
should have an initial scale of 1.

01:16:45.570 --> 01:16:47.460
So it shouldn't be zoomed in or out.

01:16:47.460 --> 01:16:50.100
And the width that the
browser should assume

01:16:50.100 --> 01:16:52.620
should be equal to the device's width.

01:16:52.620 --> 01:16:55.530
These are sort of magical statements
that you just have to know

01:16:55.530 --> 01:16:59.580
or copy/paste or transcribe, that
just express, to the browser,

01:16:59.580 --> 01:17:03.420
assume that the width of the page is the
same thing as the width of the device.

01:17:03.420 --> 01:17:07.260
Don't assume the luxury of a
big laptop or desktop computer.

01:17:07.260 --> 01:17:12.240
Now, making only that change, let
me go back to my pretend iPhone

01:17:12.240 --> 01:17:14.490
here, using Chrome's developer tools.

01:17:14.490 --> 01:17:17.040
Let me reload the page.

01:17:17.040 --> 01:17:22.530
And now, it's not very effective on this
screen, if I were showing you this on,

01:17:22.530 --> 01:17:24.240
is there--

01:17:24.240 --> 01:17:25.510
well, there we go.

01:17:25.510 --> 01:17:26.680
Let's do this.

01:17:26.680 --> 01:17:27.310
There we go.

01:17:27.310 --> 01:17:32.160
So if I zoom in to 100%, this would be
on an actual physical device, much more

01:17:32.160 --> 01:17:34.180
readable than it would
have been a moment ago,

01:17:34.180 --> 01:17:36.847
even though I realized that demo
was not necessarily persuasive.

01:17:36.847 --> 01:17:38.640
But it's as simple as
telling the browser

01:17:38.640 --> 01:17:42.610
to resize the thing to
the width of the page.

01:17:42.610 --> 01:17:45.780
All right, let me pause here to see
if there's any questions, because that

01:17:45.780 --> 01:17:47.400
feels like enough HTML tags.

01:17:47.400 --> 01:17:49.120
We'll add just a couple of more in.

01:17:49.120 --> 01:17:51.210
But for the most part,
like HTML tags are

01:17:51.210 --> 01:17:55.050
things you Google and figure out over
time, just to build up your vocabulary.

01:17:55.050 --> 01:17:57.990
The basic building blocks
are tags, attributes.

01:17:57.990 --> 01:17:59.460
Some attributes have values.

01:17:59.460 --> 01:18:00.270
Some do not.

01:18:00.270 --> 01:18:03.983
And that's sort of the
structure of HTML in essence.

01:18:03.983 --> 01:18:05.400
Questions on any of these, though.

01:18:05.400 --> 01:18:06.138
Yeah.

01:18:06.138 --> 01:18:07.770
AUDIENCE: Do attributes have an order?

01:18:07.770 --> 01:18:09.420
SPEAKER 1: Do attributes have an order?

01:18:09.420 --> 01:18:12.510
No, attributes can be in any
order, from left to right.

01:18:12.510 --> 01:18:15.510
I tend to be a little nit-picky,
and so I alphabetize them,

01:18:15.510 --> 01:18:18.725
if only because then I can easily
spot if something's missing,

01:18:18.725 --> 01:18:20.100
if it's not there alphabetically.

01:18:20.100 --> 01:18:25.760
Most people on the internet
don't seem to do that.

01:18:25.760 --> 01:18:26.990
Yeah, in the middle.

01:18:26.990 --> 01:18:27.770
Version.

01:18:27.770 --> 01:18:28.610
Yeah, good question.

01:18:28.610 --> 01:18:30.620
I mentioned that HTML
is starting to replace

01:18:30.620 --> 01:18:32.660
other languages for user interfaces.

01:18:32.660 --> 01:18:34.100
And it's not just HTML alone.

01:18:34.100 --> 01:18:37.910
It's HTML with CSS, with JavaScript,
both of which we'll get a taste of here

01:18:37.910 --> 01:18:39.020
today.

01:18:39.020 --> 01:18:41.720
That rather has been the
trend for portability,

01:18:41.720 --> 01:18:44.390
and the ability for companies,
for individual programmers,

01:18:44.390 --> 01:18:46.760
to write one version
of an app and have it

01:18:46.760 --> 01:18:50.900
work on Android devices and iPhones
and Macs and PCs, and the like.

01:18:50.900 --> 01:18:52.160
It is very expensive.

01:18:52.160 --> 01:18:55.220
It is very time-consuming to
learn a language like Java

01:18:55.220 --> 01:18:58.130
and write an Android app, learn
another language called Swift

01:18:58.130 --> 01:19:00.800
and make an iOS app, not to
mention make them look and behave

01:19:00.800 --> 01:19:02.932
the same, not to
mention fix a bug in one

01:19:02.932 --> 01:19:04.640
and then remember to
fix it in the other.

01:19:04.640 --> 01:19:08.870
I mean, this is just very painful
and time-consuming and costly.

01:19:08.870 --> 01:19:13.160
So this standardization on
HTML, CSS, and JavaScript,

01:19:13.160 --> 01:19:17.240
even for mobile apps and web apps,
has been increasingly compelling,

01:19:17.240 --> 01:19:19.820
because it solves problems like that.

01:19:19.820 --> 01:19:23.660
All right, so let's go ahead and now do
something that's finally interactive.

01:19:23.660 --> 01:19:25.970
All of these pages thus
far are really just tastes

01:19:25.970 --> 01:19:28.850
of static content, content
that does not change.

01:19:28.850 --> 01:19:31.800
Well, let's go ahead and do this.

01:19:31.800 --> 01:19:34.820
Let me introduce one other
format of URLs, which looks

01:19:34.820 --> 01:19:36.860
a little something like it did before.

01:19:36.860 --> 01:19:40.260
So slash path, but it could
actually be something like this,

01:19:40.260 --> 01:19:43.820
slash path question
mark, key equals value.

01:19:43.820 --> 01:19:45.830
You might not have noticed,
or cared to notice,

01:19:45.830 --> 01:19:48.450
the URLs in your URL bar every day.

01:19:48.450 --> 01:19:50.090
But these things are everywhere.

01:19:50.090 --> 01:19:53.030
Often when you type into a
search engine like Google

01:19:53.030 --> 01:19:56.300
a search query, whatever you
just typed ends up in the URL.

01:19:56.300 --> 01:19:58.907
When you click on a link that
contains some information,

01:19:58.907 --> 01:20:01.490
there might be a question mark,
and then some keys and values.

01:20:01.490 --> 01:20:04.280
There might be an ampersand
and more keys and values.

01:20:04.280 --> 01:20:06.710
Here, again, is that very
common programming paradigm

01:20:06.710 --> 01:20:08.870
of just associating keys with values.

01:20:08.870 --> 01:20:10.830
We can see this as follows.

01:20:10.830 --> 01:20:15.200
Let me actually go to
google.com, in a browser

01:20:15.200 --> 01:20:19.850
here, and let me search for something
the internet is filled with, cats.

01:20:19.850 --> 01:20:24.290
Enter, notice now that my
URL changed from google.com

01:20:24.290 --> 01:20:27.800
to google.com slash
search question mark,

01:20:27.800 --> 01:20:30.890
Q equals cats, ampersand
and then a bunch of stuff

01:20:30.890 --> 01:20:32.390
that I don't understand or know.

01:20:32.390 --> 01:20:37.310
So let's just delete it for now, and
leave it with the essence of that URL.

01:20:37.310 --> 01:20:38.368
And that still works.

01:20:38.368 --> 01:20:40.910
If I zoom out here, years ago
you would get pictures of cats.

01:20:40.910 --> 01:20:44.930
Now you get videos of the movie.

01:20:44.930 --> 01:20:48.140
And then that top query
there, is Cats a bad movie.

01:20:48.140 --> 01:20:50.630
But we can also, of
course, click on Images.

01:20:50.630 --> 01:20:53.330
And there are the
adorable cat, creepy cats.

01:20:53.330 --> 01:20:56.150
All right, this didn't used to
happen when we searched for cats.

01:20:56.150 --> 01:21:01.730
But anyhow, the point is that the URL
changed to include the user's input.

01:21:01.730 --> 01:21:04.370
And this is such a simple,
but such a powerful thing.

01:21:04.370 --> 01:21:08.630
This is how humans
provide input to servers.

01:21:08.630 --> 01:21:11.550
They don't manually create the
URLs, like I sort of just did.

01:21:11.550 --> 01:21:14.600
But when you fill out a form
on the web and you hit Enter,

01:21:14.600 --> 01:21:17.480
typically the URL suddenly
changes to include

01:21:17.480 --> 01:21:20.360
whatever you typed in,
in the URL, assuming

01:21:20.360 --> 01:21:22.700
the form is using the verb GET.

01:21:22.700 --> 01:21:24.140
That's not ideal.

01:21:24.140 --> 01:21:25.932
If you're typing in a
username, a password,

01:21:25.932 --> 01:21:29.140
a credit card information, because you
don't want the next person to sit down

01:21:29.140 --> 01:21:31.760
at your laptop to see literally
everything you typed in,

01:21:31.760 --> 01:21:33.140
saved in your history.

01:21:33.140 --> 01:21:35.870
So there's another verb, POST,
that can hide all of that.

01:21:35.870 --> 01:21:37.580
And it's just sent a little differently.

01:21:37.580 --> 01:21:40.310
But things like this are
typically sent via GET,

01:21:40.310 --> 01:21:43.730
and what that means underneath the
hood is that your browser is just

01:21:43.730 --> 01:21:47.240
making a request like this, Get/search?

01:21:47.240 --> 01:21:51.560
Q equals, whatever you typed in, the
host that you visited, and so forth.

01:21:51.560 --> 01:21:56.630
And hopefully what comes back is a page
full of search results, including cats.

01:21:56.630 --> 01:22:01.770
And what's interesting here now is, if
I go back to VS Code on my own computer,

01:22:01.770 --> 01:22:08.600
and let me go ahead and create a
file called, how about Search.html.

01:22:08.600 --> 01:22:13.490
In Search.html, I'm going to start
with some copy/paste from before,

01:22:13.490 --> 01:22:14.840
change my title to search.

01:22:14.840 --> 01:22:18.420
And in the body of this page, I'm
going to introduce a form tag.

01:22:18.420 --> 01:22:22.340
And in this form tag, I'm going
to have a couple of inputs.

01:22:22.340 --> 01:22:29.060
And the types of inputs are going to
be text, and the type of the input

01:22:29.060 --> 01:22:32.257
is going to be submit.

01:22:32.257 --> 01:22:34.340
And this isn't that
interesting yet, but let's see

01:22:34.340 --> 01:22:36.230
what is happening in the page itself.

01:22:36.230 --> 01:22:38.570
Let me go back to my directory listing.

01:22:38.570 --> 01:22:40.730
Let me click on Search.html.

01:22:40.730 --> 01:22:43.250
I seem to have the beginning
of my own search engine.

01:22:43.250 --> 01:22:44.360
It's not very interesting.

01:22:44.360 --> 01:22:47.010
It's just a text box
and a submit button.

01:22:47.010 --> 01:22:48.810
But let's finish my thoughts here.

01:22:48.810 --> 01:22:53.720
So let's specifically give
this text box a name of Q,

01:22:53.720 --> 01:22:57.560
which, if you roll back to the late '90s
when Larry and Sergey of Google fame

01:22:57.560 --> 01:23:01.850
created Google.com, Q represented query,
the query that the human's typing in.

01:23:01.850 --> 01:23:05.630
So the name of this
text box shall be text,

01:23:05.630 --> 01:23:09.650
shall be Q. The form is
going to use what method?

01:23:09.650 --> 01:23:11.510
Technically it uses GET
by default, but I'll

01:23:11.510 --> 01:23:14.090
be explicit and say method
equals quote unquote "get."

01:23:14.090 --> 01:23:18.440
Stupidly, it's lowercase in HTML, even
though what's in the envelope is indeed

01:23:18.440 --> 01:23:20.660
uppercase, by convention.

01:23:20.660 --> 01:23:25.300
The action of this form, specifically,
would ideally go to my own server.

01:23:25.300 --> 01:23:28.160
But we don't really have time
today to implement Google itself.

01:23:28.160 --> 01:23:32.750
So we're just going to send the
user's request to google.com/search.

01:23:32.750 --> 01:23:34.960
So I'm creating a form,
the action of which

01:23:34.960 --> 01:23:39.520
is to send the data to Google's slash
search path, using the GET method.

01:23:39.520 --> 01:23:44.830
It's going to send an input called Q,
whenever I click this Submit button.

01:23:44.830 --> 01:23:47.890
Let me go back to the
browser, reload the page.

01:23:47.890 --> 01:23:52.720
Nothing seems to have changed yet,
but, if I search for, let me zoom out,

01:23:52.720 --> 01:23:54.160
so we can see the URL bar.

01:23:54.160 --> 01:23:57.760
Right now I'm in Search.html.

01:23:57.760 --> 01:24:01.090
If I zoom out and search for
cats now and click Submit,

01:24:01.090 --> 01:24:03.070
I'm whisked away to google.com.

01:24:03.070 --> 01:24:06.760
But notice that the URL is
parameterized, with those key value

01:24:06.760 --> 01:24:08.380
pairs, that key value pair.

01:24:08.380 --> 01:24:10.240
And I get back a whole
bunch of cat results.

01:24:10.240 --> 01:24:12.580
And I can very easily now
make this a little prettier.

01:24:12.580 --> 01:24:15.610
Right now, it's not ideal that like
the human has to move their cursor

01:24:15.610 --> 01:24:16.925
and click in the box.

01:24:16.925 --> 01:24:19.300
And it's a little obnoxious
that autocomplete is enabled.

01:24:19.300 --> 01:24:21.100
If I don't want to
search for cats anymore,

01:24:21.100 --> 01:24:25.090
well, according to HTML's documentation,
I can say something like this.

01:24:25.090 --> 01:24:29.170
Autocomplete equals off, to turn
off autocomplete, auto focus

01:24:29.170 --> 01:24:32.330
to automatically put the
cursor inside of that text box.

01:24:32.330 --> 01:24:36.100
If I want some explanatory text, I can
put placeholder text like quote unquote

01:24:36.100 --> 01:24:37.330
"query."

01:24:37.330 --> 01:24:39.460
And now if I go back to
this page and reload,

01:24:39.460 --> 01:24:41.270
now it's a little more user-friendly.

01:24:41.270 --> 01:24:43.450
You see query in kind of gray text.

01:24:43.450 --> 01:24:45.280
The cursor is already
there and blinking.

01:24:45.280 --> 01:24:46.810
I don't have to even move my cursor.

01:24:46.810 --> 01:24:49.930
I can search for dogs now, and you
didn't see any autocomplete at all.

01:24:49.930 --> 01:24:52.720
Hit enter to submit, and
now I'm searching for,

01:24:52.720 --> 01:24:55.640
there we go, adorable dogs, instead.

01:24:55.640 --> 01:24:56.570
So what have I done?

01:24:56.570 --> 01:25:00.660
I've implemented the front end of
Google.com, just not the back end.

01:25:00.660 --> 01:25:02.410
To implement the back
end, we're obviously

01:25:02.410 --> 01:25:05.620
going to need like a really big
database, maybe something like SQL.

01:25:05.620 --> 01:25:09.292
We're going to need some code that like
searches the database for dogs or cats,

01:25:09.292 --> 01:25:10.000
or anything else.

01:25:10.000 --> 01:25:11.900
We're going to need Python
for something like that.

01:25:11.900 --> 01:25:13.720
And in fact, that's the direction
we're steering next week,

01:25:13.720 --> 01:25:15.070
when we implement that back end.

01:25:15.070 --> 01:25:18.400
But today it's all about this front end.

01:25:18.400 --> 01:25:24.490
Or any question, then, about forms,
these URL parameters, before we now

01:25:24.490 --> 01:25:28.488
transition to making things look
a little prettier, with CSS?

01:25:28.488 --> 01:25:31.030
And then we'll end by making
things a little more functional,

01:25:31.030 --> 01:25:33.230
with JavaScript.

01:25:33.230 --> 01:25:35.250
Anything at all?

01:25:35.250 --> 01:25:35.750
No?

01:25:35.750 --> 01:25:38.930
All right, so let's start to answer
a couple of the questions that

01:25:38.930 --> 01:25:44.040
came up, by making these pages a
little more aesthetically interesting.

01:25:44.040 --> 01:25:49.680
Let's go ahead now and introduce to
the mix one other language, as follows.

01:25:49.680 --> 01:25:52.370
Let me go ahead and create
a file called Home.html,

01:25:52.370 --> 01:25:55.100
as though I'm making a home
page for the very first time.

01:25:55.100 --> 01:25:57.770
And in this page, I'm going
to give a title of Home.

01:25:57.770 --> 01:25:59.700
And I'm just going to
have like three things.

01:25:59.700 --> 01:26:04.100
First I'm going to have maybe
a paragraph of text up here

01:26:04.100 --> 01:26:07.130
at the top, that says something
welcoming for my home page,

01:26:07.130 --> 01:26:10.550
like my name, John Harvard, for
instance, or John Harvard's home page.

01:26:10.550 --> 01:26:13.880
Then in the middle of the page,
I'm going to have some text like,

01:26:13.880 --> 01:26:16.790
welcome to my home
page exclamation point!

01:26:16.790 --> 01:26:19.850
And at the bottom of the page, I'm
going to have a final paragraph that

01:26:19.850 --> 01:26:23.480
says something like copyright,
the copyright symbol, John

01:26:23.480 --> 01:26:24.980
Harvard, or something like that.

01:26:24.980 --> 01:26:29.240
All right, so it's like a web page
with three different structural areas,

01:26:29.240 --> 01:26:30.530
made with text.

01:26:30.530 --> 01:26:31.790
This isn't that interesting.

01:26:31.790 --> 01:26:36.230
If I open this page called
Home.html, let me go ahead

01:26:36.230 --> 01:26:39.740
and create three quick paragraphs,
a first paragraph for John Harvard.

01:26:39.740 --> 01:26:43.100
Inside the middle, I'm going to say
something like welcome to my home page

01:26:43.100 --> 01:26:44.040
exclamation point!

01:26:44.040 --> 01:26:46.280
And at the bottom,
whoops, at the bottom,

01:26:46.280 --> 01:26:49.460
a little footer that says
something like copyright,

01:26:49.460 --> 01:26:54.140
a little simple copyright
symbol, and John Harvard's name.

01:26:54.140 --> 01:26:56.173
All right, now let me reload the page.

01:26:56.173 --> 01:26:56.840
And there we go.

01:26:56.840 --> 01:27:01.100
It's a very simple, very underwhelming
web page that has three main sections.

01:27:01.100 --> 01:27:03.997
Let's start to now stylize
this in an interesting way,

01:27:03.997 --> 01:27:06.080
so that it's a little more
aesthetically pleasing.

01:27:06.080 --> 01:27:08.060
First, these aren't really paragraphs.

01:27:08.060 --> 01:27:11.913
They're sort of like areas of the page,
divisions, like the header is up here.

01:27:11.913 --> 01:27:13.580
There's like the main part of my screen.

01:27:13.580 --> 01:27:15.330
And then there's the
footer of my screen.

01:27:15.330 --> 01:27:17.622
So paragraphs isn't quite
right, if these aren't really

01:27:17.622 --> 01:27:18.960
paragraphs of texts.

01:27:18.960 --> 01:27:21.530
I might more properly call
them divs or divisions

01:27:21.530 --> 01:27:25.640
of the page, which is a very commonly
used tag in HTML, which just has

01:27:25.640 --> 01:27:27.930
this generic rectangular region to it.

01:27:27.930 --> 01:27:32.000
It does not do anything aesthetically,
no bold facing, no size changes.

01:27:32.000 --> 01:27:36.410
It just creates an invisible
rectangular region, inside of which

01:27:36.410 --> 01:27:38.150
you can start to style the text.

01:27:38.150 --> 01:27:40.070
Or I can take this one step further.

01:27:40.070 --> 01:27:44.270
There's some other tags in HTML,
known as semantic tags, that literally

01:27:44.270 --> 01:27:46.678
have names that describe the
types of your page, which

01:27:46.678 --> 01:27:49.220
is all the more compelling these
days for accessibility, too,

01:27:49.220 --> 01:27:53.690
for screen readers, for search engines,
because now, a screen reader, a search

01:27:53.690 --> 01:27:56.392
engine can realize that footer
is probably a little fluffy.

01:27:56.392 --> 01:27:58.100
The header might be
a little interesting.

01:27:58.100 --> 01:28:01.010
The main part of the page
is probably the juicy part,

01:28:01.010 --> 01:28:05.570
that I want users to be able to search
for or read aloud, substantively.

01:28:05.570 --> 01:28:08.480
So let's start to stylize
this page somehow.

01:28:08.480 --> 01:28:12.290
Let's introduce a style
attribute in HTML,

01:28:12.290 --> 01:28:16.910
inside of which is going to be
text like this, font size colon

01:28:16.910 --> 01:28:20.660
large, text align colon center.

01:28:20.660 --> 01:28:23.990
On Main, I'm going to add a
style attribute and say font size

01:28:23.990 --> 01:28:27.830
medium, text align center.

01:28:27.830 --> 01:28:31.550
And then on the footer, I'm going
to say style equals font size

01:28:31.550 --> 01:28:36.410
small, text align center.

01:28:36.410 --> 01:28:38.040
What's going on here?

01:28:38.040 --> 01:28:40.400
Well, in blue is the
language we promised,

01:28:40.400 --> 01:28:42.920
called CSS, for Cascading Style Sheets.

01:28:42.920 --> 01:28:46.040
We're not really seeing the
Cascading Style Sheet of it yet.

01:28:46.040 --> 01:28:50.000
But in blue here, notice is
another very common paradigm.

01:28:50.000 --> 01:28:52.670
It's different syntax
now, but how would you

01:28:52.670 --> 01:28:56.270
describe what you're
looking at here in blue?

01:28:56.270 --> 01:29:00.710
This is another example of what
kind of programming convention?

01:29:00.710 --> 01:29:01.598
AUDIENCE: Key value.

01:29:01.598 --> 01:29:03.890
SPEAKER 1: Yeah, it's just
more key value pairs, right?

01:29:03.890 --> 01:29:06.840
It'd be nice if the world standardized
how you write key value pairs,

01:29:06.840 --> 01:29:11.068
because we've now seen equal signs
and arrows and colons and semicolons,

01:29:11.068 --> 01:29:11.610
and all this.

01:29:11.610 --> 01:29:13.818
But it's just different
languages, different choices.

01:29:13.818 --> 01:29:16.930
The key here is font-size,
the value is large.

01:29:16.930 --> 01:29:20.730
The other key is text-align,
the colon, the value is center.

01:29:20.730 --> 01:29:24.450
The semicolon just separates
one key value pair from another.

01:29:24.450 --> 01:29:28.290
Just like in the URL, the ampersand
did, in the context of HTTP.

01:29:28.290 --> 01:29:31.200
The designers of CSS
used semicolons instead.

01:29:31.200 --> 01:29:33.957
Strictly speaking, this
semicolon isn't necessary.

01:29:33.957 --> 01:29:36.540
I tend to include it just for
symmetry, but it doesn't matter,

01:29:36.540 --> 01:29:38.130
because there's nothing after that.

01:29:38.130 --> 01:29:40.110
This is a bit of a weird example.

01:29:40.110 --> 01:29:45.150
This is the co-mingling of
CSS inside of JavaScript.

01:29:45.150 --> 01:29:50.490
So as of now, you can use the CSS
language inside of the quote marks

01:29:50.490 --> 01:29:53.250
in the value of a style attribute.

01:29:53.250 --> 01:29:56.350
We did something a little
similarly last two weeks,

01:29:56.350 --> 01:30:00.840
a week plus ago, when we included
some SQL inside of Python.

01:30:00.840 --> 01:30:03.573
So again, languages can kind
of cross barriers together.

01:30:03.573 --> 01:30:05.490
But we're going to clean
this up, because this

01:30:05.490 --> 01:30:08.407
is going to get messy quickly,
certainly for large web pages, the size

01:30:08.407 --> 01:30:11.020
of Harvard's or Yale's, or the like.

01:30:11.020 --> 01:30:13.180
So let's see what this looks like.

01:30:13.180 --> 01:30:16.950
Let me go back to my browser
window here, reload the page.

01:30:16.950 --> 01:30:18.730
And it's not that different.

01:30:18.730 --> 01:30:23.220
But it's indeed centered, and it's
indeed large, medium, and small text.

01:30:23.220 --> 01:30:24.540
And let me make one refinement.

01:30:24.540 --> 01:30:26.580
The copyright symbol
actually can be expressed,

01:30:26.580 --> 01:30:28.830
but there's no key on
my US keyboard here.

01:30:28.830 --> 01:30:34.710
I can actually magically say
ampersand hash 169 semicolon,

01:30:34.710 --> 01:30:36.975
using what's called an HTML entity.

01:30:36.975 --> 01:30:40.800
It turns out there are numeric
codes, with this weird syntax, that

01:30:40.800 --> 01:30:44.160
allow you to specify symbols that
exist in Macs and PCs and phones,

01:30:44.160 --> 01:30:46.170
but that don't exist on most keyboards.

01:30:46.170 --> 01:30:49.860
If I reload the page now, now
it's a proper copyright symbol.

01:30:49.860 --> 01:30:54.030
So minor aesthetic, but it
introduces us to these HTML entities.

01:30:54.030 --> 01:30:57.480
So even if you've never
seen CSS before, you

01:30:57.480 --> 01:31:00.330
can probably find something
kind of dumb about what

01:31:00.330 --> 01:31:02.010
I did here, like poor design.

01:31:02.010 --> 01:31:06.390
It is correct, if my goal was small,
medium, and large, bottom up, what

01:31:06.390 --> 01:31:10.890
looks like a bad design,
perhaps, even if you've never

01:31:10.890 --> 01:31:12.460
seen this language before.

01:31:12.460 --> 01:31:12.960
Yeah.

01:31:12.960 --> 01:31:13.680
AUDIENCE: Same

01:31:13.680 --> 01:31:15.930
SPEAKER 1: Yeah, I've used
the same style three times,

01:31:15.930 --> 01:31:18.750
like copy/paste, or typing the
exact same thing again and again.

01:31:18.750 --> 01:31:21.030
It has rarely been a good thing.

01:31:21.030 --> 01:31:25.500
Well, here's where we can take
advantage of the design of CSS,

01:31:25.500 --> 01:31:27.930
because it supports what
we might call inheritance,

01:31:27.930 --> 01:31:33.270
whereby children inherit the properties,
the key value pairs of their parents

01:31:33.270 --> 01:31:34.380
or ancestors.

01:31:34.380 --> 01:31:36.280
And what that means is, I can do this.

01:31:36.280 --> 01:31:38.040
Let me get rid of this text align.

01:31:38.040 --> 01:31:39.840
Let me get rid of this text align.

01:31:39.840 --> 01:31:41.040
Let me get rid of this one.

01:31:41.040 --> 01:31:43.950
I could get rid of the semicolon,
too, but I'll leave it for now.

01:31:43.950 --> 01:31:50.310
And let me add all of that style
to the parent element, the body,

01:31:50.310 --> 01:31:55.320
so that it sort of cascades down to the
header, the main, and the footer tags

01:31:55.320 --> 01:31:56.140
as well.

01:31:56.140 --> 01:31:58.260
And let me close my quotes there, too.

01:31:58.260 --> 01:32:02.190
Now, if I go back to my browser
and hit reload, nothing changes.

01:32:02.190 --> 01:32:04.050
But it's a little
better designed, right?

01:32:04.050 --> 01:32:07.410
Because if I want to change the text
alignment to maybe be right aligned,

01:32:07.410 --> 01:32:10.300
I can now reload the page, and
voila, now it's over there.

01:32:10.300 --> 01:32:12.760
I change it in one place, not
in three different places.

01:32:12.760 --> 01:32:15.630
So that would seem to be
marginally better design.

01:32:15.630 --> 01:32:18.250
And could we do this
any more differently?

01:32:18.250 --> 01:32:24.060
Well, it's not that elegant that
it's all just in line with my HTML.

01:32:24.060 --> 01:32:26.430
This generally tends to
be bad practice, where

01:32:26.430 --> 01:32:29.820
you co-mingle your HTML and your
CSS, especially since some of you

01:32:29.820 --> 01:32:32.430
might be really good at laying
out the structure of web pages

01:32:32.430 --> 01:32:35.220
and the content and the data, and you
might have a horrible sense of design

01:32:35.220 --> 01:32:36.630
or just not care about the aesthetics.

01:32:36.630 --> 01:32:38.380
You might work with a
designer, an artist,

01:32:38.380 --> 01:32:41.550
who's much better at all of
these fine tunings aesthetically.

01:32:41.550 --> 01:32:45.730
Wouldn't it be nice if you could work
on the HTML, they could work on the CSS.

01:32:45.730 --> 01:32:47.790
And you don't have to
somehow like literally

01:32:47.790 --> 01:32:49.920
edit the same lines
of code as each other.

01:32:49.920 --> 01:32:53.940
Well, just like we can move
stuff into header files in C,

01:32:53.940 --> 01:32:57.703
or packages in Python, we
can do the same in CSS.

01:32:57.703 --> 01:32:59.620
So I'm actually going
to go ahead and do this.

01:32:59.620 --> 01:33:02.190
Let me get rid of all of
these style attributes,

01:33:02.190 --> 01:33:07.650
and let me now start to practice a
convention of not co-mingling CSS

01:33:07.650 --> 01:33:09.030
with my HTML.

01:33:09.030 --> 01:33:13.860
Let me instead move it into the
head of the page, in a style tag,

01:33:13.860 --> 01:33:15.420
instead of an attribute.

01:33:15.420 --> 01:33:17.820
This is one of the rare
examples where there

01:33:17.820 --> 01:33:20.670
are attributes that have the
same names of tags as vice versa.

01:33:20.670 --> 01:33:23.250
It's not very common,
but this one does exist.

01:33:23.250 --> 01:33:26.700
Here's a slightly different syntax for
expressing the same key value pairs.

01:33:26.700 --> 01:33:30.720
If I want to apply CSS properties,
that is, key value pairs,

01:33:30.720 --> 01:33:35.010
to the header of the page, I say
header, and then I use curly braces,

01:33:35.010 --> 01:33:41.910
and inside of those I say
font-size large, text-align center.

01:33:41.910 --> 01:33:45.940
Then, if I want to apply some properties
to the main section of the page,

01:33:45.940 --> 01:33:50.880
I again do font-size, say, medium,
and then I can do text-align center.

01:33:50.880 --> 01:33:53.430
Then, lastly, on the
footer of the page, I

01:33:53.430 --> 01:33:58.830
can assign some properties like
font-size small, and then text-align

01:33:58.830 --> 01:34:01.340
center semicolon.

01:34:01.340 --> 01:34:04.250
And I don't have to do
anything more in my HTML.

01:34:04.250 --> 01:34:07.680
It all just represents
the structure of my page.

01:34:07.680 --> 01:34:10.122
But, because of this style
tag in the head of the page,

01:34:10.122 --> 01:34:12.080
the browser knows in
advance that the moment it

01:34:12.080 --> 01:34:14.660
encounters a header tag, a
main tag, or a footer tag,

01:34:14.660 --> 01:34:17.870
it should apply those
properties, those styles.

01:34:17.870 --> 01:34:20.840
If I reload the page, other
than it being recentered now,

01:34:20.840 --> 01:34:21.920
there's no other changes.

01:34:21.920 --> 01:34:24.980
All we're doing is sort of
iteratively improving the design here.

01:34:24.980 --> 01:34:28.130
But now everything's
in the top of the file.

01:34:28.130 --> 01:34:30.050
But there's still a bad design here.

01:34:30.050 --> 01:34:34.010
What could I now do
that would be smarter?

01:34:34.010 --> 01:34:36.510
Similar problem to before.

01:34:36.510 --> 01:34:37.010
Yeah.

01:34:37.010 --> 01:34:37.760
AUDIENCE: Create it.

01:34:37.760 --> 01:34:39.740
SPEAKER 1: OK, create a
new file with just the CSS.

01:34:39.740 --> 01:34:40.220
I like that.

01:34:40.220 --> 01:34:41.637
Let's go there in just one second.

01:34:41.637 --> 01:34:43.970
But even as we're here,
there's still a redundancy

01:34:43.970 --> 01:34:45.710
we can probably chip away at.

01:34:45.710 --> 01:34:49.040
Yeah, get rid of the text-align center
in three different places, which

01:34:49.040 --> 01:34:51.410
doesn't seem necessary,
and perhaps someone

01:34:51.410 --> 01:34:57.800
else, if I get rid of text-align center,
what should I add to my style tag

01:34:57.800 --> 01:35:00.800
in order to bring it back, but
apply it to everything in the page?

01:35:00.800 --> 01:35:03.630
And the page, if I scroll
down, looks like this, in HTML.

01:35:03.630 --> 01:35:04.130
Yeah.

01:35:04.130 --> 01:35:05.090
AUDIENCE: The body.

01:35:05.090 --> 01:35:06.600
SPEAKER 1: Yeah, so the body tag.

01:35:06.600 --> 01:35:08.520
So let me go ahead and say body.

01:35:08.520 --> 01:35:11.090
And then in here, put text-align center.

01:35:11.090 --> 01:35:14.090
And that, now, if I reload the
page, has no visual effect,

01:35:14.090 --> 01:35:15.950
but it's just better
design, because now I

01:35:15.950 --> 01:35:18.050
factored out that kind of commonality.

01:35:18.050 --> 01:35:20.330
And so, just to make clear
what we've been doing here,

01:35:20.330 --> 01:35:23.300
these are all, again, CSS
properties, these key value pairs.

01:35:23.300 --> 01:35:26.270
And there's different types
of ways of using them.

01:35:26.270 --> 01:35:28.605
And there's this whole taxonomy.

01:35:28.605 --> 01:35:31.730
What we've been doing thus far are what
we're going to call type selectors,

01:35:31.730 --> 01:35:33.980
where the type is the name of a tag.

01:35:33.980 --> 01:35:36.980
And so it turns out there's
other ways, though, to do this.

01:35:36.980 --> 01:35:39.020
And let's head in this direction.

01:35:39.020 --> 01:35:42.590
Let's go ahead and maybe write
our CSS slightly differently,

01:35:42.590 --> 01:35:44.090
because you know what would be nice.

01:35:44.090 --> 01:35:48.320
I bet, after today, once I start
creating other files for my home page,

01:35:48.320 --> 01:35:50.030
or John Harvard's home
page, I might want

01:35:50.030 --> 01:35:52.550
to have centered text on other pages.

01:35:52.550 --> 01:35:55.820
And I might want to have large
text or medium text or small text.

01:35:55.820 --> 01:35:58.820
It'd be nice if I could reuse
these properties again and again,

01:35:58.820 --> 01:36:01.100
and kind of create my
own library, maybe even

01:36:01.100 --> 01:36:03.620
ultimately putting it
in a separate file.

01:36:03.620 --> 01:36:04.370
So let me do this.

01:36:04.370 --> 01:36:07.850
Instead of explicitly applying
text-align center to the body,

01:36:07.850 --> 01:36:10.910
let me create a new
noun, or an adjective,

01:36:10.910 --> 01:36:13.250
rather, for myself, called centered.

01:36:13.250 --> 01:36:15.830
It has to start with a
dot, because what I'm doing

01:36:15.830 --> 01:36:18.590
is inventing my own class, so to speak.

01:36:18.590 --> 01:36:21.470
This has nothing to do with
classes in Java or Python.

01:36:21.470 --> 01:36:24.080
Class here is this aesthetic feature.

01:36:24.080 --> 01:36:26.780
And, actually, let me rename
these, to be dot large,

01:36:26.780 --> 01:36:29.810
dot medium, and dot small.

01:36:29.810 --> 01:36:33.740
What this is doing for me
is it's inventing new words,

01:36:33.740 --> 01:36:37.040
well-named words, that I
can now use in this file,

01:36:37.040 --> 01:36:40.020
or potentially in other web
pages I make, as follows.

01:36:40.020 --> 01:36:43.130
I can now say, if I want
to center the whole body,

01:36:43.130 --> 01:36:45.440
I can say class equals centered.

01:36:45.440 --> 01:36:48.980
On the header tag, I can
say class equals large.

01:36:48.980 --> 01:36:52.030
On the main tag I can
say class equals medium.

01:36:52.030 --> 01:36:54.440
On the footer tag, I can
say class equals small.

01:36:54.440 --> 01:36:57.200
But let me take this one step further.

01:36:57.200 --> 01:37:00.020
As you suggested, why
don't I go ahead now

01:37:00.020 --> 01:37:03.260
and let me actually get rid
of-- let me grab all of the CSS,

01:37:03.260 --> 01:37:05.120
copy it to my clipboard.

01:37:05.120 --> 01:37:12.170
Let me get rid of the style tag here,
and create a new file called Home.css,

01:37:12.170 --> 01:37:17.240
and let me just save all of that same
text in a separate file ending in .css,

01:37:17.240 --> 01:37:19.430
nothing else, no HTML whatsoever.

01:37:19.430 --> 01:37:22.610
But let me go back to my
Home.html page, and this

01:37:22.610 --> 01:37:25.760
is one of the most annoyingly named
tags, because it doesn't really

01:37:25.760 --> 01:37:33.860
mean what it does, Link HREF
Home.css rel equals stylesheet.

01:37:33.860 --> 01:37:37.100
So ideally we would have used the
link tag for links in web pages,

01:37:37.100 --> 01:37:39.920
but this is link in the
sort of conceptual sense.

01:37:39.920 --> 01:37:43.790
We're linking this file to this other
one, so that they work together,

01:37:43.790 --> 01:37:47.420
using this hyper-reference,
Home.css, the relationship

01:37:47.420 --> 01:37:50.090
of that file to this one
is that of stylesheet.

01:37:50.090 --> 01:37:52.280
A stylesheet is a file
containing a whole bunch

01:37:52.280 --> 01:37:56.390
of stylizations, a whole bunch
of properties, as we just did.

01:37:56.390 --> 01:37:58.430
So here, too, it's
underwhelming the effect.

01:37:58.430 --> 01:38:00.810
If I reload the page, nothing changed.

01:38:00.810 --> 01:38:05.690
But now, I not only have
a better design here,

01:38:05.690 --> 01:38:10.730
because I can now use those same classes
in my second page that I might make,

01:38:10.730 --> 01:38:15.020
my third page, my fourth page, my bio,
my resume page, whatever it is I'm

01:38:15.020 --> 01:38:18.830
making on my website here, I
can reuse those styles by just

01:38:18.830 --> 01:38:23.060
including one line of code, instead of
copying and pasting all of that style

01:38:23.060 --> 01:38:25.650
stuff into file after file after file.

01:38:25.650 --> 01:38:28.130
And heck, if the rest
of the world is really

01:38:28.130 --> 01:38:32.005
impressed by my centered class, and
my large and medium and small classes,

01:38:32.005 --> 01:38:34.880
I could bundle this up, let other
people on the internet download it,

01:38:34.880 --> 01:38:39.290
and I have my own library, my own CSS
library, that other people can use.

01:38:39.290 --> 01:38:41.690
Why should you ever invent
a centered class again,

01:38:41.690 --> 01:38:45.140
if I already did it for you,
stupid and small as this one is.

01:38:45.140 --> 01:38:47.000
But it would be nice
now to package this up

01:38:47.000 --> 01:38:51.720
in a way that's usable
by other people as well.

01:38:51.720 --> 01:38:55.160
So this is perhaps the best
design, when it comes to CSS.

01:38:55.160 --> 01:39:00.410
Use classes where you can, use
external stylesheets where you can,

01:39:00.410 --> 01:39:04.780
but don't use the style attribute
where we began, which while explicit,

01:39:04.780 --> 01:39:10.340
starts to get messy quickly,
especially for large files.

01:39:10.340 --> 01:39:12.425
All right, any questions, then, on this.

01:39:15.170 --> 01:39:17.540
No, all right, so
that's class selectors.

01:39:17.540 --> 01:39:19.940
When you specify dot
something, that means

01:39:19.940 --> 01:39:24.020
you're selecting all of the tags in the
page, that have that particular class,

01:39:24.020 --> 01:39:25.470
and applying those properties.

01:39:25.470 --> 01:39:27.637
So there's a couple of
others here, just to give you

01:39:27.637 --> 01:39:29.240
a taste now of what's possible.

01:39:29.240 --> 01:39:32.880
There's so much more that you can
actually do with HTML and CSS together.

01:39:32.880 --> 01:39:37.310
Let me go ahead and open up a few
examples that I did here in advance.

01:39:37.310 --> 01:39:39.200
Let me go ahead and open up VS Code.

01:39:39.200 --> 01:39:47.310
And let me go ahead and copy
my source eight directory.

01:39:47.310 --> 01:39:50.850
Give me one second to grab the source
eight directory for today's lectures,

01:39:50.850 --> 01:39:55.680
so that I can now go into
my browser, go into some

01:39:55.680 --> 01:39:57.630
of the pre-made examples
in source eight,

01:39:57.630 --> 01:40:01.270
and let me open up paragraphs one here.

01:40:01.270 --> 01:40:04.500
So here's something,
it's a little subtle.

01:40:04.500 --> 01:40:08.100
But does anyone notice
how this is stylized?

01:40:08.100 --> 01:40:10.950
This is just some generic
lorem ipsum text again.

01:40:10.950 --> 01:40:16.780
But what's noteworthy
stylistically, a book might do this.

01:40:16.780 --> 01:40:17.280
Yeah?

01:40:17.280 --> 01:40:18.240
AUDIENCE: They're bigger.

01:40:18.240 --> 01:40:19.740
SPEAKER 1: Yeah, the first
paragraph's a little bigger.

01:40:19.740 --> 01:40:20.130
Why?

01:40:20.130 --> 01:40:22.500
Who knows, it's just a stylistic
thing at the beginning of the chapter.

01:40:22.500 --> 01:40:23.790
The first paragraph is bigger.

01:40:23.790 --> 01:40:24.880
How did we do that?

01:40:24.880 --> 01:40:27.370
Well, we can actually explore
this in a couple of ways.

01:40:27.370 --> 01:40:29.910
One, I can obviously go into
VS Code and show you the code.

01:40:29.910 --> 01:40:33.090
But, now, that we're using Chrome and
we're using these developer tools,

01:40:33.090 --> 01:40:34.380
let's again go into them.

01:40:34.380 --> 01:40:37.470
View developer, developer
tools, and now notice,

01:40:37.470 --> 01:40:41.010
let me turn off the mobile feature,
and let me move the dock back

01:40:41.010 --> 01:40:43.560
to the bottom, just so
that it's fully wide.

01:40:43.560 --> 01:40:45.450
We looked at the Network tab before.

01:40:45.450 --> 01:40:47.880
We looked at the mobile button before.

01:40:47.880 --> 01:40:49.780
Now let me click on Elements.

01:40:49.780 --> 01:40:53.460
What's nice about the Elements tab
is you can see a pretty printed

01:40:53.460 --> 01:40:58.560
version of the web page's HTML,
nicely color-coded, syntax highlighted

01:40:58.560 --> 01:41:02.640
for you, so that you can now henceforth
learn from, look at, the source

01:41:02.640 --> 01:41:06.270
code, the HTML source code, of
any web page on the internet.

01:41:06.270 --> 01:41:09.030
Notice that my own web page
here, it's not that interesting.

01:41:09.030 --> 01:41:11.880
There's a bunch of paragraph
tags of lorem ipsum text.

01:41:11.880 --> 01:41:13.290
But notice what I did.

01:41:13.290 --> 01:41:16.260
The very first one, I gave an ID to.

01:41:16.260 --> 01:41:18.660
This is something that you,
as a web designer, can do.

01:41:18.660 --> 01:41:22.260
You can give an ID attribute
to any tag in a page,

01:41:22.260 --> 01:41:24.030
to give it a unique identifier.

01:41:24.030 --> 01:41:26.760
The onus is on you, not to
reuse the word, anywhere else.

01:41:26.760 --> 01:41:28.740
If you reuse it, you've screwed up.

01:41:28.740 --> 01:41:30.210
It's incorrect behavior.

01:41:30.210 --> 01:41:34.170
But I chose an ID of
first, just so that I

01:41:34.170 --> 01:41:38.080
have some way of referring to the
very first paragraph in this file.

01:41:38.080 --> 01:41:41.380
If I look in the head of the
page, and the style tag here,

01:41:41.380 --> 01:41:44.100
notice that I have hash first.

01:41:44.100 --> 01:41:47.220
So just as I use dot for
classes, the world of CSS

01:41:47.220 --> 01:41:50.550
uses a hash symbol to
represent IDs, unique IDs.

01:41:50.550 --> 01:41:55.530
And what this is telling the browser,
whatever element has the first ID,

01:41:55.530 --> 01:42:00.990
F-I-R-S-T, without the hash,
apply font-size larger to it.

01:42:00.990 --> 01:42:04.350
And that's why the first paragraph,
and only the first paragraph,

01:42:04.350 --> 01:42:05.760
is actually stylized.

01:42:05.760 --> 01:42:08.310
If I actually go into
VS Code now, and let

01:42:08.310 --> 01:42:09.930
me go into my source eight directory.

01:42:09.930 --> 01:42:12.810
Let me open up Paragraphs1.html.

01:42:12.810 --> 01:42:14.430
Here is the actual file.

01:42:14.430 --> 01:42:18.330
If I want to change the color of that
first paragraph to green, for instance,

01:42:18.330 --> 01:42:20.160
I can do color colon: green.

01:42:20.160 --> 01:42:23.670
Let me close the developer
tools, reload the page.

01:42:23.670 --> 01:42:26.380
And now that page is green as well.

01:42:26.380 --> 01:42:27.960
You don't have to just use words.

01:42:27.960 --> 01:42:31.080
You can use hexadecimal.

01:42:31.080 --> 01:42:34.890
What was the hex code for green in RGB?

01:42:34.890 --> 01:42:38.500
Like no red, lots of green, no blue.

01:42:38.500 --> 01:42:42.690
So you could do 00 FF 00, using
a hash, which, coincidentally,

01:42:42.690 --> 01:42:44.940
is the same symbol, but it
has nothing to do with IDs.

01:42:44.940 --> 01:42:48.600
This is just how Photoshop and
web pages represent colors.

01:42:48.600 --> 01:42:49.858
Let's go back here and reload.

01:42:49.858 --> 01:42:52.650
It's the same, although it's a
slightly different version of green.

01:42:52.650 --> 01:42:54.060
This is pure green here.

01:42:54.060 --> 01:42:59.940
If I want to change it to red, that
would be, let's see, RGB FF 00 00,

01:42:59.940 --> 01:43:01.890
and here I can go and reload.

01:43:01.890 --> 01:43:03.740
Now it's first paragraph red.

01:43:03.740 --> 01:43:05.490
This actually gets
pretty tedious quickly.

01:43:05.490 --> 01:43:08.430
Like, if you're a web designer trying
to make a website for the first time,

01:43:08.430 --> 01:43:10.770
it actually might be fun
to tinker with the website,

01:43:10.770 --> 01:43:13.230
before you open up your editor
and you start making changes

01:43:13.230 --> 01:43:14.340
and save and reload.

01:43:14.340 --> 01:43:15.580
That's just more steps.

01:43:15.580 --> 01:43:18.420
So notice what you can
do with developer tools,

01:43:18.420 --> 01:43:20.400
too, in Chrome and other browsers.

01:43:20.400 --> 01:43:23.790
When I highlight over this
paragraph, under the Elements tab,

01:43:23.790 --> 01:43:26.310
notice that, one, it
gets highlighted in blue.

01:43:26.310 --> 01:43:28.523
If I move my cursor, it
doesn't get highlighted.

01:43:28.523 --> 01:43:29.940
If I move it, it gets highlighted.

01:43:29.940 --> 01:43:33.450
So it's showing me what
that tag represents.

01:43:33.450 --> 01:43:36.150
But notice over here on
the right, you can also

01:43:36.150 --> 01:43:39.747
see all of the stylizations
of that particular element.

01:43:39.747 --> 01:43:40.830
Some of them are built-in.

01:43:40.830 --> 01:43:44.370
The italicized ones here at the
bottom means user agent stylesheet.

01:43:44.370 --> 01:43:48.580
That means this is what Google makes
all paragraphs look like by default.

01:43:48.580 --> 01:43:52.240
But in non-italicized
here, you see hash first,

01:43:52.240 --> 01:43:54.250
which is my code, that I just changed.

01:43:54.250 --> 01:43:59.790
And if I want to start tinkering with
colors, I can do like 00 00 FF Enter.

01:43:59.790 --> 01:44:01.020
I changed it to blue.

01:44:01.020 --> 01:44:05.910
But notice, if I go back to VS Code, I
didn't change my original VS Code code.

01:44:05.910 --> 01:44:07.950
This is now purely client side.

01:44:07.950 --> 01:44:09.030
And this is a key detail.

01:44:09.030 --> 01:44:12.090
When I drew that picture
earlier of the browser going,

01:44:12.090 --> 01:44:15.060
making a request to the cloud, the
server in the cloud and the response

01:44:15.060 --> 01:44:18.300
coming back, the browser,
your Mac, your PC, your phone,

01:44:18.300 --> 01:44:22.450
has a copy of all the HTML and
CSS, so you can change it here,

01:44:22.450 --> 01:44:24.473
however you actually want.

01:44:24.473 --> 01:44:26.640
And, for instance, you can
do this with any website.

01:44:26.640 --> 01:44:32.820
Let's go, say, on a field trip
here, to how about Stanford.edu.

01:44:32.820 --> 01:44:35.580
So here's Stanford's
website as of today.

01:44:35.580 --> 01:44:37.950
Let's go ahead here
and let's see, there's

01:44:37.950 --> 01:44:40.450
their admissions page,
campus life, and so forth.

01:44:40.450 --> 01:44:45.090
Let me go ahead and view developer
tools on Stanford's page,

01:44:45.090 --> 01:44:49.050
developer tools, elements,
you can see all of their HTML.

01:44:49.050 --> 01:44:52.030
And notice it's collapsed,
so here is their header.

01:44:52.030 --> 01:44:54.930
Here's their main part, and
I'm using my keyboard shortcuts

01:44:54.930 --> 01:44:58.012
to just open and close the tags,
to dive in deeper and deeper.

01:44:58.012 --> 01:44:59.970
Suppose you want to kind
of mess with Stanford,

01:44:59.970 --> 01:45:02.670
you can actually like right
click on any element of a page,

01:45:02.670 --> 01:45:06.930
or control click, Inspect, and that's
going to jump you automatically

01:45:06.930 --> 01:45:10.870
to the tag in the Elements
tab that shows you that link.

01:45:10.870 --> 01:45:15.690
And notice, if I hover over this
LI, notice Stanford's using a list,

01:45:15.690 --> 01:45:17.730
as an unordered list from left to right.

01:45:17.730 --> 01:45:20.063
But it doesn't have to be a
bulleted list top to bottom.

01:45:20.063 --> 01:45:24.010
They've used CSS to change it to be
a list, from news, events, academics,

01:45:24.010 --> 01:45:26.670
research, health care,
campus admission, about.

01:45:26.670 --> 01:45:29.500
Well, so much for
admission, that's gone.

01:45:29.500 --> 01:45:33.720
So now, if I close developer tools,
now it's gone from Stanford's website.

01:45:33.720 --> 01:45:36.780
But, of course, what have I really done.

01:45:36.780 --> 01:45:39.213
I've just like mutated
my own local copy.

01:45:39.213 --> 01:45:41.130
So this is not hacking,
even though this might

01:45:41.130 --> 01:45:42.755
be how they do it in TV and the movies.

01:45:42.755 --> 01:45:44.500
It's still there if I reload the page.

01:45:44.500 --> 01:45:48.410
But it's a wonderfully powerful way
to, one, just iterate quickly, and try

01:45:48.410 --> 01:45:50.160
different things
stylistically, figure out

01:45:50.160 --> 01:45:52.710
how you want to design
something, and two, just learn

01:45:52.710 --> 01:45:54.190
how Stanford did something.

01:45:54.190 --> 01:45:57.148
So, for instance, if I right click
or control click on admission again,

01:45:57.148 --> 01:46:00.640
go to inspect, and let
me go to the LI tag.

01:46:00.640 --> 01:46:04.020
Let me keep going up, up,
up, up, up to the UL tag.

01:46:04.020 --> 01:46:06.130
There's going to be a lot going on here.

01:46:06.130 --> 01:46:10.080
But notice, they have applied
all of these CSS properties

01:46:10.080 --> 01:46:12.510
to that particular UL tag.

01:46:12.510 --> 01:46:15.720
But notice, here, this is
how, it's something like this.

01:46:15.720 --> 01:46:19.680
And we'd have to read more to learn
how this works, list style type none,

01:46:19.680 --> 01:46:21.930
this is how they probably
got rid of the bullets.

01:46:21.930 --> 01:46:23.490
And what you can do is just tinker.

01:46:23.490 --> 01:46:25.198
Like, all right, well,
what does this do?

01:46:25.198 --> 01:46:26.580
Well, let me uncheck it.

01:46:26.580 --> 01:46:29.910
All right, didn't really change
anything, font weights, uncheck this,

01:46:29.910 --> 01:46:30.730
there we go.

01:46:30.730 --> 01:46:34.380
So now the margin is changed, the
padding around it has changed.

01:46:34.380 --> 01:46:35.610
Let's get rid of this.

01:46:35.610 --> 01:46:37.890
We can just start turning
things on and off, just

01:46:37.890 --> 01:46:39.600
to get a sense of how
the web page works.

01:46:39.600 --> 01:46:41.640
I'm not really learning
anything here so far.

01:46:41.640 --> 01:46:47.610
Let me go to the LI here for, let's
go to the admissions one here.

01:46:47.610 --> 01:46:51.240
Margin, there we go, OK.

01:46:51.240 --> 01:46:54.037
So when there's a
display property in CSS,

01:46:54.037 --> 01:46:57.120
that's apparently effectively changing
things from vertical to horizontal,

01:46:57.120 --> 01:47:00.300
if I turn that off, now Stanford's
links all look like this.

01:47:00.300 --> 01:47:01.530
And there are those bullets.

01:47:01.530 --> 01:47:04.650
So again, just default styles,
that they've somehow overridden,

01:47:04.650 --> 01:47:07.590
and a good web designer
just knows ultimately

01:47:07.590 --> 01:47:10.308
how to do these kinds of things.

01:47:10.308 --> 01:47:12.600
All right, how about a couple
of final building blocks,

01:47:12.600 --> 01:47:13.800
before we'll take one more break.

01:47:13.800 --> 01:47:16.425
And then we'll dive in with
JavaScript to manipulate this stuff

01:47:16.425 --> 01:47:17.580
programmatically.

01:47:17.580 --> 01:47:21.240
Let me go ahead and open up,
how about Paragraphs2 here.

01:47:21.240 --> 01:47:25.440
Let me close this tab, let me go
into Paragraphs2, which is premade.

01:47:25.440 --> 01:47:28.860
And this one looks
the same, except, when

01:47:28.860 --> 01:47:31.470
I go ahead and inspect
this first paragraph,

01:47:31.470 --> 01:47:33.630
notice that I was able
to get rid of the ID

01:47:33.630 --> 01:47:36.010
somehow, which is just
to say, there's many,

01:47:36.010 --> 01:47:38.370
many ways to solve
problems in HTML and CSS,

01:47:38.370 --> 01:47:40.230
just like there is in C and Python.

01:47:40.230 --> 01:47:43.230
Let me look in the head and
the style of the page now.

01:47:43.230 --> 01:47:49.620
This is what we might call
another type of selector,

01:47:49.620 --> 01:47:53.190
that allows us to specify
the paragraph tag,

01:47:53.190 --> 01:47:55.920
that itself happens to
be the first child only.

01:47:55.920 --> 01:47:59.810
So you can apply CSS to a very
specific child, namely first child.

01:47:59.810 --> 01:48:02.495
There's also syntax for last
child, if just the first one

01:48:02.495 --> 01:48:04.120
is supposed to look a little different.

01:48:04.120 --> 01:48:06.240
So, here, I've just
gotten out of the business

01:48:06.240 --> 01:48:09.090
of creating my own unique
identifier and, instead, I'm

01:48:09.090 --> 01:48:11.950
using this type of selector as well.

01:48:11.950 --> 01:48:13.090
Well, what more can we do?

01:48:13.090 --> 01:48:17.880
Let me go into another example
here, called Link1.html,

01:48:17.880 --> 01:48:21.220
and here we have a very simple
page that just says visit Harvard.

01:48:21.220 --> 01:48:23.220
But notice it's purple
by default, because we've

01:48:23.220 --> 01:48:25.080
been to Harvard.edu before.

01:48:25.080 --> 01:48:28.140
Let's see if we can't maybe
stylize Harvard's links

01:48:28.140 --> 01:48:29.620
to be a little different.

01:48:29.620 --> 01:48:34.510
Let me go into Link version
2, now, which looks like this.

01:48:34.510 --> 01:48:36.820
And now Harvard is very red.

01:48:36.820 --> 01:48:37.780
How did I do that?

01:48:37.780 --> 01:48:40.260
Well, let me right click
on it, click Inspect,

01:48:40.260 --> 01:48:41.760
and I can start to poke around.

01:48:41.760 --> 01:48:44.190
It looks like my HTML is
not at all noteworthy.

01:48:44.190 --> 01:48:47.760
It's just very simple HTML,
anchor tag with an HREF.

01:48:47.760 --> 01:48:49.500
So let's look at the style.

01:48:49.500 --> 01:48:50.437
Let me zoom out.

01:48:50.437 --> 01:48:52.270
And we can look at it
in two different ways.

01:48:52.270 --> 01:48:55.230
We can literally look at
the style, contents here,

01:48:55.230 --> 01:48:59.280
or we can look at Chrome's
pretty version of it, over here.

01:48:59.280 --> 01:49:03.330
It looks like my style
sheet, in the style tag,

01:49:03.330 --> 01:49:07.810
has changed the color to be red, and the
text decoration, which is a new thing,

01:49:07.810 --> 01:49:09.930
but it's another CSS property, to none.

01:49:09.930 --> 01:49:12.720
Notice, if I turn that
off, links on the internet

01:49:12.720 --> 01:49:14.640
are underlined by
default, which tends to be

01:49:14.640 --> 01:49:17.400
good for familiarity, for
visibility, for accessibility.

01:49:17.400 --> 01:49:21.960
But, if it's very obvious what
is text and what is a link,

01:49:21.960 --> 01:49:24.870
maybe you change text
decoration to none.

01:49:24.870 --> 01:49:28.950
But maybe, watch this, maybe the
link comes, the line comes back

01:49:28.950 --> 01:49:30.420
when you hover over it.

01:49:30.420 --> 01:49:32.970
Well, let's look at how
I did this in style.

01:49:32.970 --> 01:49:37.920
Notice that I have stylization, and I
put my curly braces on the same line

01:49:37.920 --> 01:49:40.380
here, as tends to be convention in CSS.

01:49:40.380 --> 01:49:42.390
Color is red, text decoration is none.

01:49:42.390 --> 01:49:46.770
But, whenever an anchor
tag is hovered over,

01:49:46.770 --> 01:49:51.690
you can change the text decoration
to be back to the default, underline.

01:49:51.690 --> 01:49:55.060
So, again, just little ways of playing
around with the aesthetics of the page,

01:49:55.060 --> 01:49:56.640
once you understand
that, really, there's

01:49:56.640 --> 01:49:57.900
just different types of selectors.

01:49:57.900 --> 01:49:59.940
And you might have to remind
yourself, look them up occasionally,

01:49:59.940 --> 01:50:01.170
as to what the syntax is.

01:50:01.170 --> 01:50:06.360
But it's just another way of scoping
your properties to specific tags.

01:50:06.360 --> 01:50:10.260
Let's look at version 3 of this
here, which adds Yale to the mix.

01:50:10.260 --> 01:50:15.510
If I go to Link3.html, maybe I
want to have Harvard links red,

01:50:15.510 --> 01:50:16.770
Yale links blue.

01:50:16.770 --> 01:50:18.280
How might I have done this?

01:50:18.280 --> 01:50:20.820
Well, let's right click,
and click Inspect.

01:50:20.820 --> 01:50:25.680
And here we might have two links,
with a couple of techniques,

01:50:25.680 --> 01:50:28.440
just to, again, emphasize, you can
do this so many different ways.

01:50:28.440 --> 01:50:33.870
I gave my Harvard link an ID of
Harvard, my Yale link an ID of Yale.

01:50:33.870 --> 01:50:38.610
In my CSS, if we go to the head
of the page, I then did this.

01:50:38.610 --> 01:50:41.250
The tag with the Harvard ID, a.k.a.

01:50:41.250 --> 01:50:45.480
#Harvard, should be red,
#Yale should be blue,

01:50:45.480 --> 01:50:49.380
and then any anchor tag should
have no text decoration,

01:50:49.380 --> 01:50:52.530
unless you hover over it, at which
point it should be underlined.

01:50:52.530 --> 01:50:56.040
And so, if I hover over Harvard,
it's red underlined, Yale,

01:50:56.040 --> 01:50:57.070
it's blue underlined.

01:50:57.070 --> 01:51:00.070
If I want to get rid of the IDs, I
can do this a slightly different way.

01:51:00.070 --> 01:51:01.350
Let me go into Link4.

01:51:01.350 --> 01:51:04.410
Same effect, but notice,
I got rid of the IDs now.

01:51:04.410 --> 01:51:06.090
How else can I express myself?

01:51:06.090 --> 01:51:07.800
Well, let's look at the CSS here.

01:51:07.800 --> 01:51:10.320
The anchor tag has no text
decoration by default,

01:51:10.320 --> 01:51:11.860
unless you're hovering over it.

01:51:11.860 --> 01:51:13.270
And this is kind of cool.

01:51:13.270 --> 01:51:15.690
This is what we would
call, on our list here,

01:51:15.690 --> 01:51:20.610
an attribute selector, where you
select tags using CSS notation,

01:51:20.610 --> 01:51:22.180
based on an attribute.

01:51:22.180 --> 01:51:25.500
So this is saying, go ahead
and find any anchor tag

01:51:25.500 --> 01:51:30.150
who's HREF value happens to
equal this URL, and make it red.

01:51:30.150 --> 01:51:32.135
Do the same for Yale, and make it blue.

01:51:32.135 --> 01:51:35.260
Now, this might not be ideal, because
if there's something after the slash,

01:51:35.260 --> 01:51:37.410
these equal signs don't
work, because if it's

01:51:37.410 --> 01:51:41.010
a different Harvard or different Yale
link, this is a little too precise.

01:51:41.010 --> 01:51:44.220
So let me look at version
5 here, of Link.html.

01:51:44.220 --> 01:51:47.760
Look at this style, and I
did this a little smarter.

01:51:47.760 --> 01:51:48.750
This is new syntax.

01:51:48.750 --> 01:51:50.760
And, again, just the kind
of thing you look up.

01:51:50.760 --> 01:51:58.350
Star equals means, change any anchor
tag who's HREF contains anywhere in it

01:51:58.350 --> 01:52:03.360
Harvard.edu to red, and do the same
thing for Yale, based on star equals.

01:52:03.360 --> 01:52:04.950
So star here connotes wildcard.

01:52:04.950 --> 01:52:08.460
So search for Harvard.edu or
Yale.edu anywhere in the HREF,

01:52:08.460 --> 01:52:11.460
and if it's there, colorize the link.

01:52:11.460 --> 01:52:15.540
And, again, we could do this all
day long, with diminishing returns,

01:52:15.540 --> 01:52:18.820
to actually achieve the same kind
of stylizations in different ways.

01:52:18.820 --> 01:52:20.923
And as projects just
get larger and larger,

01:52:20.923 --> 01:52:22.840
you just have more and
more decisions to make.

01:52:22.840 --> 01:52:25.560
And so you have certain
conventions you start to adopt.

01:52:25.560 --> 01:52:28.980
And, indeed, if I may,
you have the introduction

01:52:28.980 --> 01:52:31.950
of what are called
frameworks, ultimately.

01:52:31.950 --> 01:52:34.320
If you're a full-time
web developer, or you're

01:52:34.320 --> 01:52:37.698
working for a company doing the same,
you might have internal conventions

01:52:37.698 --> 01:52:38.490
that you adhere to.

01:52:38.490 --> 01:52:42.180
For instance, the company might say,
always use classes, don't use IDs.

01:52:42.180 --> 01:52:45.030
Or always use attribute
selectors, or don't use this.

01:52:45.030 --> 01:52:48.030
And it wouldn't be necessarily
as draconian as that.

01:52:48.030 --> 01:52:50.280
But they might have a
style guide of sorts.

01:52:50.280 --> 01:52:53.250
But, what many people, and
many companies, do nowadays,

01:52:53.250 --> 01:52:57.210
is they do not come up with all
of their own CSS properties.

01:52:57.210 --> 01:53:01.050
They start with something off the shelf,
a framework, typically a free and open

01:53:01.050 --> 01:53:04.590
source framework, that just gives
them a lot of pretty stylizations

01:53:04.590 --> 01:53:07.980
for free, just by using
a third party library.

01:53:07.980 --> 01:53:09.720
And one of the most
popular ones nowadays

01:53:09.720 --> 01:53:11.670
is something called
Bootstrap, that CS50 uses

01:53:11.670 --> 01:53:14.970
on all of its websites,
super-popular in industry as well.

01:53:14.970 --> 01:53:20.970
It's at getbootstrap.com, and this
is just to give you a taste of it,

01:53:20.970 --> 01:53:24.420
a website that documents
the library that they offer.

01:53:24.420 --> 01:53:28.560
And there's so much documentation here,
but let me just go to things like,

01:53:28.560 --> 01:53:30.330
how about components.

01:53:30.330 --> 01:53:33.930
It just gives you, out of the
box, the CSS with which you

01:53:33.930 --> 01:53:35.130
can create little alerts.

01:53:35.130 --> 01:53:37.200
If you've ever noticed
on CS50's website,

01:53:37.200 --> 01:53:39.810
little colorful warnings at
the top of the page, or call

01:53:39.810 --> 01:53:41.670
outs, to draw your attention to things.

01:53:41.670 --> 01:53:42.660
How did we do that?

01:53:42.660 --> 01:53:45.300
It's probably a paragraph
tag or a div tag,

01:53:45.300 --> 01:53:46.920
and maybe we changed the font color.

01:53:46.920 --> 01:53:48.540
We changed the background color.

01:53:48.540 --> 01:53:51.090
Or it's a lot of stuff we could
absolutely do from scratch,

01:53:51.090 --> 01:53:53.555
but, you know what,
why would we reinvent

01:53:53.555 --> 01:53:55.180
the wheel if we can just use Bootstrap.

01:53:55.180 --> 01:53:57.060
So, for instance, let
me just scroll down.

01:53:57.060 --> 01:54:01.660
If you've ever seen on CS50's website
a yellow warning alert like this,

01:54:01.660 --> 01:54:04.350
let me just zoom in on this.

01:54:04.350 --> 01:54:07.080
We are just using HTML like this.

01:54:07.080 --> 01:54:10.050
We're using a div tag, which,
again, is an invisible division,

01:54:10.050 --> 01:54:11.620
a rectangular region of the page.

01:54:11.620 --> 01:54:16.620
But we're using classes called alert
and another class called alert warning.

01:54:16.620 --> 01:54:21.270
Those are classes that the
folks at Bootstrap invented.

01:54:21.270 --> 01:54:23.790
They associated certain
text colors and background

01:54:23.790 --> 01:54:26.850
colors and padding and margin
and like other aesthetics with,

01:54:26.850 --> 01:54:29.220
so all we have to do
is use those classes.

01:54:29.220 --> 01:54:32.250
Role equals alert, just makes clear
to like a screen reader that this

01:54:32.250 --> 01:54:34.320
is an alert, that should
probably be recited,

01:54:34.320 --> 01:54:37.410
and whatever's in between
the open tag and close tag,

01:54:37.410 --> 01:54:39.120
is what the human would see.

01:54:39.120 --> 01:54:41.070
How do you use something like Bootstrap?

01:54:41.070 --> 01:54:42.840
Well, you just read the documentation.

01:54:42.840 --> 01:54:48.080
Under Getting Started, there is a
link tag you copy/paste into your own.

01:54:48.080 --> 01:54:49.040
So let me do this.

01:54:49.040 --> 01:54:53.120
So in Table.html, we had code like this.

01:54:53.120 --> 01:54:55.990
Let me actually read Bootstrap's
documentation really fast.

01:54:55.990 --> 01:54:57.234
And they tell me...

01:54:57.234 --> 01:54:59.350
copy/paste this code.

01:54:59.350 --> 01:55:01.360
I'm going to put this
into the head of my page.

01:55:01.360 --> 01:55:03.790
And it's quite long, but
notice, it's a link tag,

01:55:03.790 --> 01:55:07.660
which I used earlier for my
own CSS file, the HREF of which

01:55:07.660 --> 01:55:10.300
is this CDN link, content
delivery network, that's

01:55:10.300 --> 01:55:13.540
referring to a specific version of
Bootstrap that's available on this day.

01:55:13.540 --> 01:55:17.560
And the file that I'm including
is called Bootstrap.min.css.

01:55:17.560 --> 01:55:21.100
This is an actual file I
can visit with my browser.

01:55:21.100 --> 01:55:24.430
If I open this in a separate
tab, this is the CSS

01:55:24.430 --> 01:55:27.340
that Bootstrap has made
freely available to us.

01:55:27.340 --> 01:55:29.030
Crazy long, no white space.

01:55:29.030 --> 01:55:31.030
That's because it's been
minimized, just to not

01:55:31.030 --> 01:55:33.580
waste space by adding lots
of white space and comments.

01:55:33.580 --> 01:55:37.030
But this contains a whole lot,
hundreds, of CSS properties

01:55:37.030 --> 01:55:40.660
that we can reuse, thanks to
classes that they invented.

01:55:40.660 --> 01:55:44.093
If I want to use some JavaScript
code, I can also copy this script tag.

01:55:44.093 --> 01:55:45.760
But we'll come back to that before long.

01:55:45.760 --> 01:55:49.330
Let me now just make a couple
of tweaks to this table.

01:55:49.330 --> 01:55:52.360
If I go into my browser
from before, this

01:55:52.360 --> 01:55:55.270
is what it looked like previously,
where name and number were

01:55:55.270 --> 01:55:57.895
bold, but centered, and then
Carter and David were on the left,

01:55:57.895 --> 01:55:59.312
and the numbers were to the right.

01:55:59.312 --> 01:56:00.010
It's fine.

01:56:00.010 --> 01:56:03.470
It's not that pretty, but it'd be nice
if it were a little prettier than that.

01:56:03.470 --> 01:56:06.910
So if we add Bootstrap into it,
notice one thing happens first,

01:56:06.910 --> 01:56:08.680
when I reload the page.

01:56:08.680 --> 01:56:12.070
No longer are Chrome's
default styles used.

01:56:12.070 --> 01:56:14.290
Now Bootstrap's default
styles are used, which

01:56:14.290 --> 01:56:17.920
is a way of enforcing similarity
across Chrome, Edge, Firefox,

01:56:17.920 --> 01:56:19.270
Safari, and others.

01:56:19.270 --> 01:56:21.850
Notice it went from a
serif font to a sans serif

01:56:21.850 --> 01:56:23.600
font, and something cleaner like this.

01:56:23.600 --> 01:56:28.030
It still looks pretty ugly, but let
me go into Bootstrap's documentation.

01:56:28.030 --> 01:56:34.120
Let me go under their
content tab, for tables.

01:56:34.120 --> 01:56:36.340
And if I just kind of
start skimming this,

01:56:36.340 --> 01:56:38.200
these are some good
looking tables, right?

01:56:38.200 --> 01:56:42.250
Like, there's some underlining
here, some bolder font.

01:56:42.250 --> 01:56:43.480
There's a dark line.

01:56:43.480 --> 01:56:45.598
If I keep going, ooh,
that's getting pretty, too,

01:56:45.598 --> 01:56:48.640
if I want to have a colorful table,
like I could figure all of this stuff

01:56:48.640 --> 01:56:51.790
out myself if I want
some dark mode here,

01:56:51.790 --> 01:56:55.280
if I want to have alternating
highlights, and so forth.

01:56:55.280 --> 01:56:58.300
There's so many different stylizations
of tables that I could do myself.

01:56:58.300 --> 01:57:02.020
But I care about making a phone book,
not about reinventing these wheels.

01:57:02.020 --> 01:57:06.790
So if I read the documentation closely,
it turns out that all I need to do

01:57:06.790 --> 01:57:10.690
is add Bootstrap's table
class to my table tag,

01:57:10.690 --> 01:57:15.400
and watch with a simple reload, what
my now Table.html file looks like.

01:57:15.400 --> 01:57:17.140
Much nicer, right?

01:57:17.140 --> 01:57:20.200
Might not be what you want, but, my
God, with like two lines of code,

01:57:20.200 --> 01:57:22.070
I just really prettied things up.

01:57:22.070 --> 01:57:24.920
And so here, then, is the value of
using something like a framework.

01:57:24.920 --> 01:57:31.120
It allows you to actually
create much prettier, much more

01:57:31.120 --> 01:57:36.040
user-friendly websites than you might
otherwise be able to make on your own,

01:57:36.040 --> 01:57:38.020
certainly quickly.

01:57:38.020 --> 01:57:41.650
In fact, let's iterate one
more time on one other example,

01:57:41.650 --> 01:57:43.670
before we introduce a bit of that code.

01:57:43.670 --> 01:57:48.500
Let me go ahead and open
up Search.html from before,

01:57:48.500 --> 01:57:53.140
which, recall, looks like this,
and Search.html on my browser

01:57:53.140 --> 01:57:56.320
was this very simple Google search.

01:57:56.320 --> 01:58:00.610
And suppose I want to reinvent
Google.com's UI a bit more.

01:58:00.610 --> 01:58:03.520
Here's a screenshot of
Google.com on a typical day.

01:58:03.520 --> 01:58:07.390
It's got an about link, a store
link, Gmail images, these weird dots,

01:58:07.390 --> 01:58:09.168
sign in, their logo.

01:58:09.168 --> 01:58:10.960
It's not appearing well
on the screen here,

01:58:10.960 --> 01:58:13.660
but there's a big text box in
the middle, and then two buttons,

01:58:13.660 --> 01:58:15.940
Google search, and I'm feeling lucky.

01:58:15.940 --> 01:58:19.660
Well, could I maybe go about
implementing this UI myself,

01:58:19.660 --> 01:58:23.680
using some HTML, some CSS,
and maybe Bootstrap's help,

01:58:23.680 --> 01:58:26.918
just so I don't have to figure out
all of these various stylizations?

01:58:26.918 --> 01:58:28.210
Well, here's my starting point.

01:58:28.210 --> 01:58:33.440
In Search.html, let's go and add
in Bootstrap, first and foremost,

01:58:33.440 --> 01:58:38.150
so that we have access to all of
their classes that are reusable now.

01:58:38.150 --> 01:58:41.540
And let me go ahead and
figure out how to do this.

01:58:41.540 --> 01:58:47.200
Well, just like Stanford's site had
like its NAV navigation bar, using a UL,

01:58:47.200 --> 01:58:50.170
but they changed it from being a
bulleted list to being left to right,

01:58:50.170 --> 01:58:52.130
I bet I can do something
like this myself.

01:58:52.130 --> 01:58:54.370
So let me go into the body
of my page and, first,

01:58:54.370 --> 01:58:58.660
based on Bootstrap's documentation,
let me add a div called

01:58:58.660 --> 01:59:01.450
a div with a class of container fluid.

01:59:01.450 --> 01:59:03.640
Container fluid is
just a class that comes

01:59:03.640 --> 01:59:07.300
with Bootstrap that says, make
your web page fluid, that is,

01:59:07.300 --> 01:59:08.770
grow to fill the window.

01:59:08.770 --> 01:59:10.840
So that way it's going to resize nicely.

01:59:10.840 --> 01:59:13.200
I'm going to go ahead and
fix my indentation here.

01:59:13.200 --> 01:59:14.950
If you haven't discovered
this yet, if you

01:59:14.950 --> 01:59:16.840
highlight multiple lines
in VS Code, you can

01:59:16.840 --> 01:59:18.890
hit Tab and indent them all at once.

01:59:18.890 --> 01:59:21.260
So now, I have all of
that inside of this div.

01:59:21.260 --> 01:59:26.860
Now, just like in Stanford's site, let's
create an unordered list that has maybe

01:59:26.860 --> 01:59:36.370
an LI, called with a class of NAV item,
and then in here, whoops, in here,

01:59:36.370 --> 01:59:46.510
let me go ahead and say, A
HREF=https://about.google,

01:59:46.510 --> 01:59:48.780
which is the real URL
of Google's about page.

01:59:48.780 --> 01:59:50.580
And I'll put the about text in there.

01:59:50.580 --> 01:59:54.720
Then I'm going to close my LI tag
here, and I want to do one other thing,

01:59:54.720 --> 01:59:56.190
because I'm using Bootstrap.

01:59:56.190 --> 01:59:58.200
Bootstrap's documentation,
if I read it closely,

01:59:58.200 --> 02:00:03.450
says to add a class to your links,
called like NAV link, and text dark,

02:00:03.450 --> 02:00:08.520
to make it dark, like black or dark
gray, instead of the default blue.

02:00:08.520 --> 02:00:12.360
All right, so I think I
have now an about link

02:00:12.360 --> 02:00:14.470
in a navigation part of my screen.

02:00:14.470 --> 02:00:17.970
Let me go ahead and
save this and reload.

02:00:17.970 --> 02:00:20.160
All right, so not exactly what I wanted.

02:00:20.160 --> 02:00:23.550
It's a bulleted list, still, so
I need to override this somehow.

02:00:23.550 --> 02:00:26.640
Let me read Bootstrap's
documentation a little more clearly.

02:00:26.640 --> 02:00:28.830
And let me pretend to do
that, for time's sake.

02:00:28.830 --> 02:00:32.490
If I go under content, oops,
if I go under components,

02:00:32.490 --> 02:00:36.610
and I go to Navs and
Tabs, long story short,

02:00:36.610 --> 02:00:39.510
if you want to create a pretty menu
like this, where your links are

02:00:39.510 --> 02:00:41.610
from the left to the
right, just like Stanford,

02:00:41.610 --> 02:00:43.810
I essentially need HTML like this.

02:00:43.810 --> 02:00:46.080
And this is subtle, but
I left off this class.

02:00:46.080 --> 02:00:49.710
I should have added a
class called NAV on my UL.

02:00:49.710 --> 02:00:50.640
So that was my bad.

02:00:50.640 --> 02:00:53.130
Let me go in here and
say add class equals

02:00:53.130 --> 02:00:57.510
NAV, and then again, this class
NAV item, Bootstrap told me to,

02:00:57.510 --> 02:01:00.270
NAV link text dark,
Bootstrap told me to.

02:01:00.270 --> 02:01:06.330
Let me go back to my page here,
reload, and OK, still kind of ugly.

02:01:06.330 --> 02:01:08.970
But at least the About link is
in the top left hand corner,

02:01:08.970 --> 02:01:11.700
just like it should be
in the real google.com.

02:01:11.700 --> 02:01:13.950
Now let me whip up a couple
of more links real fast.

02:01:13.950 --> 02:01:17.280
Let me go and do a little
copy/paste, though I bet next week

02:01:17.280 --> 02:01:19.620
we can avoid this kind of copy/paste.

02:01:19.620 --> 02:01:24.060
Let me change this link
to be Store.google.com.

02:01:24.060 --> 02:01:26.280
The text will be store.

02:01:26.280 --> 02:01:30.750
Let me go ahead and create
another one here for Gmail.

02:01:30.750 --> 02:01:35.490
So this one's going to go
to, officially, how about,

02:01:35.490 --> 02:01:39.450
technically it's www.google.com/gmail.

02:01:39.450 --> 02:01:40.980
Normally it just redirects.

02:01:40.980 --> 02:01:43.140
And let me grab one more of these.

02:01:43.140 --> 02:01:46.500
And for Google Images, and I'm
going to paste this, whoops,

02:01:46.500 --> 02:01:47.850
I'm going to, come on.

02:01:47.850 --> 02:01:49.440
I'm going to put this here, too.

02:01:49.440 --> 02:01:57.060
This is going to be images, and
that URL is IMG.hp, is the URL.

02:01:57.060 --> 02:02:00.090
All right, let me go ahead
and reload the browser page.

02:02:00.090 --> 02:02:01.650
Now it's coming along, right?

02:02:01.650 --> 02:02:03.300
About, store, Gmail, images.

02:02:03.300 --> 02:02:04.865
It's not quite what I want.

02:02:04.865 --> 02:02:06.990
So I'd have to read the
documentation to figure out

02:02:06.990 --> 02:02:11.203
how to maybe nudge one of these
over, to start right aligning it.

02:02:11.203 --> 02:02:12.870
And there's a couple of ways to do this.

02:02:12.870 --> 02:02:17.160
But one way is if I want Gmail to move
all the way over and push everything

02:02:17.160 --> 02:02:26.970
else, I can say that add some margin to
the Gmail list item, margin start auto.

02:02:26.970 --> 02:02:31.530
This is in Bootstrap's documentation, a
way of saying whatever space you have,

02:02:31.530 --> 02:02:33.750
just automatically
shove everything apart.

02:02:33.750 --> 02:02:38.250
And now, if I reload the page
again, now, voila, Gmail and images

02:02:38.250 --> 02:02:39.270
is over to the right.

02:02:39.270 --> 02:02:41.145
All right, so now we're
kind of moving along.

02:02:41.145 --> 02:02:44.230
Let me go ahead and add the
big blue button to sign in.

02:02:44.230 --> 02:02:49.230
So here with sign in, let me go
ahead and, over in my same NAV, yeah,

02:02:49.230 --> 02:02:53.010
so let's go ahead and do one
more LI, class equals NAV item.

02:02:53.010 --> 02:02:56.250
And then, inside of this LI
tag, what am I going to do?

02:02:56.250 --> 02:03:01.920
Turns out there is a class that can turn
a link into a button, if you say BTN,

02:03:01.920 --> 02:03:05.220
for button, and then button
primary, makes it blue,

02:03:05.220 --> 02:03:08.362
the HREF for this one is going
to be https://accounts.goo

02:03:08.362 --> 02:03:12.300
gle.com/service/login, which is
literally where you go if you click

02:03:12.300 --> 02:03:13.440
on that big blue button.

02:03:13.440 --> 02:03:15.750
The role of this link is that of button.

02:03:15.750 --> 02:03:19.050
And then sign in, is going
to be the text on it.

02:03:19.050 --> 02:03:22.553
If I now reload the page, now
we're getting even closer,

02:03:22.553 --> 02:03:23.970
although it looks a little stupid.

02:03:23.970 --> 02:03:26.730
Notice that sign in is way
in the top right hand corner,

02:03:26.730 --> 02:03:30.300
whereas the real google.com has
a little bit of margin around it?

02:03:30.300 --> 02:03:31.830
OK, that's an easy fix, too.

02:03:31.830 --> 02:03:33.870
Let me go back into my HTML here.

02:03:33.870 --> 02:03:35.657
Let me add margin-3.

02:03:35.657 --> 02:03:36.990
This, too, is a Bootstrap thing.

02:03:36.990 --> 02:03:39.510
They have a class called m-something.

02:03:39.510 --> 02:03:42.270
The something is a
number from like 1 to 5,

02:03:42.270 --> 02:03:45.790
I believe, that adds just
some amount of white space.

02:03:45.790 --> 02:03:49.480
So if I reload now, OK,
it's just a little prettier.

02:03:49.480 --> 02:03:51.000
And now let me accelerate.

02:03:51.000 --> 02:03:54.480
Just to demonstrate how I can
take this home, let me go ahead

02:03:54.480 --> 02:03:59.040
and open up my premade
version of this, whereby

02:03:59.040 --> 02:04:02.670
I added to this some final flourishes.

02:04:02.670 --> 02:04:06.090
If I go to Search2.html, I
decided to replace their logo

02:04:06.090 --> 02:04:09.390
with just this out of a
cat, and notice that I

02:04:09.390 --> 02:04:11.473
re-implemented essentially google.com.

02:04:11.473 --> 02:04:13.890
Here's a text box, here's two
buttons, even though they're

02:04:13.890 --> 02:04:15.450
a little washed out on the screen.

02:04:15.450 --> 02:04:18.690
I even figured out how to get dots
that look pretty similar to Google's.

02:04:18.690 --> 02:04:22.230
And if we view source, you can see
how I kind of finished this code.

02:04:22.230 --> 02:04:29.130
If I go to view developer tools, and I
go to elements, and I go into this div,

02:04:29.130 --> 02:04:34.890
and I go into this div, you'll see
that here's an image tag for happy cat.

02:04:34.890 --> 02:04:39.340
And I added some classes there to make
it fluid, and width 25% of the screen.

02:04:39.340 --> 02:04:42.460
If I go into the form tag, this
is the same form tag as before.

02:04:42.460 --> 02:04:44.760
But, notice, I used
button tags this time,

02:04:44.760 --> 02:04:47.480
with button and button light classes.

02:04:47.480 --> 02:04:49.770
And then I stylized
them in a certain way.

02:04:49.770 --> 02:04:53.030
And so in the end result, if I want
to go ahead and search now for birds,

02:04:53.030 --> 02:04:55.790
and click Google search,
voila, I've implemented

02:04:55.790 --> 02:04:58.790
something that's pretty
darn close to Google.com,

02:04:58.790 --> 02:05:01.760
without even touching raw CSS myself.

02:05:01.760 --> 02:05:04.310
And now here's the value,
then, of a framework.

02:05:04.310 --> 02:05:06.620
You can just start to use
off the shelf functionality

02:05:06.620 --> 02:05:08.430
that someone else created for you.

02:05:08.430 --> 02:05:10.910
But if you want to make
refinements, you don't really

02:05:10.910 --> 02:05:13.640
like the shade of blue that
Bootstrap chose, or the gray button,

02:05:13.640 --> 02:05:15.557
or you want to curve
things a bit more, that's

02:05:15.557 --> 02:05:17.930
where you can create
your own CSS file, and do

02:05:17.930 --> 02:05:20.180
the last mile, sort
of fine tuning things.

02:05:20.180 --> 02:05:21.770
And that tends to be best practice.

02:05:21.770 --> 02:05:24.860
Stand on the shoulders of others as
much as you can, using libraries.

02:05:24.860 --> 02:05:27.360
And then if you really don't
like what the library is doing,

02:05:27.360 --> 02:05:30.110
then use your own skills and
understanding of HTML and CSS

02:05:30.110 --> 02:05:33.360
to refine things a bit further.

02:05:33.360 --> 02:05:37.070
But still, after all of that, all of
these examples we've done thus far

02:05:37.070 --> 02:05:39.560
are still static, other
than the Google one,

02:05:39.560 --> 02:05:41.480
which searches on the real Google.com.

02:05:41.480 --> 02:05:43.340
Let's take a final 5
minute break and we'll

02:05:43.340 --> 02:05:47.090
give you a sense of what we can next
do, next week onward, with JavaScript.

02:05:47.090 --> 02:05:48.630
See you in five.

02:05:48.630 --> 02:05:52.190
All right, so I think
it's fair to say, we're

02:05:52.190 --> 02:05:54.628
about to see our very last language.

02:05:54.628 --> 02:05:56.420
Next week and final
projects are ultimately

02:05:56.420 --> 02:05:58.910
going to be about
synthesizing so many of these.

02:05:58.910 --> 02:06:01.850
Thankfully, this language called
JavaScript is quite similar

02:06:01.850 --> 02:06:04.038
syntactically to both C and Python.

02:06:04.038 --> 02:06:06.830
And, indeed, if you can imagine
doing something in either of those,

02:06:06.830 --> 02:06:09.200
you can probably do it in
some form in JavaScript.

02:06:09.200 --> 02:06:11.550
The most fundamental
difference today, though,

02:06:11.550 --> 02:06:14.930
is that when you have written C
code and Python code thus far,

02:06:14.930 --> 02:06:16.187
you've done it on the server.

02:06:16.187 --> 02:06:18.270
You've done it in the
terminal window environment.

02:06:18.270 --> 02:06:21.620
And when you run the code, it's
running in the cloud on the server.

02:06:21.620 --> 02:06:23.930
The difference now today
with JavaScript is,

02:06:23.930 --> 02:06:27.170
even though you're going to write
it in the cloud using VS Code,

02:06:27.170 --> 02:06:31.790
recall that, when a browser gets
the page containing this code,

02:06:31.790 --> 02:06:35.820
it's going to get a copy of the HTML,
the CSS, and the JavaScript code.

02:06:35.820 --> 02:06:40.820
So JavaScript, that we see today, is
all going to be executed in the browser,

02:06:40.820 --> 02:06:44.540
on users' own Macs, PCs, and
phones, not in the server.

02:06:44.540 --> 02:06:47.870
JavaScript can be used on the server,
using an environment called Node.js.

02:06:47.870 --> 02:06:51.560
It's an alternative to Python or
Ruby or Java or other languages.

02:06:51.560 --> 02:06:55.170
We are using it today client
side, which is a key difference.

02:06:55.170 --> 02:06:57.740
So in Scratch, let's
do this one last time.

02:06:57.740 --> 02:07:00.800
If you wanted to create a variable
in Scratch, set encounter equal to 0.

02:07:00.800 --> 02:07:03.140
In JavaScript, it's
going to look like this.

02:07:03.140 --> 02:07:06.050
You don't specify the type,
but you do use the keyword let,

02:07:06.050 --> 02:07:11.390
and there's a few others as well, that
say let counter equal 0 semicolon.

02:07:11.390 --> 02:07:15.440
If you want to increment that
variable by one, you in JavaScript

02:07:15.440 --> 02:07:18.740
could say something like,
counter equals counter plus 1,

02:07:18.740 --> 02:07:21.320
or you can do it more
succinctly, with plus equals,

02:07:21.320 --> 02:07:23.900
or the plus plus is back in JavaScript.

02:07:23.900 --> 02:07:26.930
You can now say counter
plus plus semicolon again.

02:07:26.930 --> 02:07:29.930
In Scratch, if you wanted to
do a conditional like this,

02:07:29.930 --> 02:07:34.550
asking if x less than y, it looks
pretty much like C. The parentheses are,

02:07:34.550 --> 02:07:36.170
unfortunately, back.

02:07:36.170 --> 02:07:39.500
The curly braces here are back, if you
have multiple statements in particular.

02:07:39.500 --> 02:07:43.760
But, syntactically, it's pretty much
the same as it was for if, for if else,

02:07:43.760 --> 02:07:46.310
and even for it's else if else.

02:07:46.310 --> 02:07:49.430
Unlike Python, it's two
words again, else if.

02:07:49.430 --> 02:07:53.155
So quite, quite like C,
nothing new beyond that.

02:07:53.155 --> 02:07:56.030
If you want to do something forever
in Scratch, you'd use this block.

02:07:56.030 --> 02:07:59.540
In JavaScript, you can do it a few
ways, similar to Python, similar to C,

02:07:59.540 --> 02:08:00.980
you just say while true.

02:08:00.980 --> 02:08:04.460
In JavaScript, Booleans are
lowercase again, just like in C.

02:08:04.460 --> 02:08:05.882
So it's lowercase true.

02:08:05.882 --> 02:08:08.090
If you want to do something
a finite number of times,

02:08:08.090 --> 02:08:11.850
like repeat three times,
looks almost like C as well.

02:08:11.850 --> 02:08:16.260
The only difference, really, is using
the word let here, instead of INT.

02:08:16.260 --> 02:08:18.950
And, again, you'll use let to
create a string, or an INT,

02:08:18.950 --> 02:08:21.170
or any other type of
variable in JavaScript.

02:08:21.170 --> 02:08:24.830
The browser will figure out
what type you mean from context.

02:08:24.830 --> 02:08:28.040
In C we would have said INT instead.

02:08:28.040 --> 02:08:31.760
Ultimately, this language, and that's
it for our tour of JavaScript syntax.

02:08:31.760 --> 02:08:34.310
There's bunches of other
features, but syntactically it's

02:08:34.310 --> 02:08:36.650
going to be that accessible,
relatively speaking.

02:08:36.650 --> 02:08:39.380
The power of JavaScript
running in the user's browser

02:08:39.380 --> 02:08:43.040
is going to be that you can
change this thing in memory.

02:08:43.040 --> 02:08:47.240
Think about most any website, that's
at all interesting today, that you use.

02:08:47.240 --> 02:08:49.580
It's typically very
interactive and dynamic.

02:08:49.580 --> 02:08:53.390
If you're sitting in front of Gmail on
a laptop or desktop with the browser tab

02:08:53.390 --> 02:08:55.950
open, and someone sends you
an email, all of a sudden,

02:08:55.950 --> 02:08:59.210
another row appears in your
inbox, another row, another row.

02:08:59.210 --> 02:09:00.530
How is that implemented?

02:09:00.530 --> 02:09:02.520
Honestly, it could be an HTML table.

02:09:02.520 --> 02:09:04.550
Maybe it's a bunch of
divs top to bottom.

02:09:04.550 --> 02:09:07.880
The point, though, is, you don't
have to hit Command R or Control

02:09:07.880 --> 02:09:10.340
R to reload the page to see more email.

02:09:10.340 --> 02:09:13.880
It automatically appears
every few seconds or minutes.

02:09:13.880 --> 02:09:15.560
How is that working?

02:09:15.560 --> 02:09:18.620
When you visit Gmail.com,
you are downloading not just

02:09:18.620 --> 02:09:22.130
HTML and CSS with your
initial inbox, presumably.

02:09:22.130 --> 02:09:24.200
You're downloading some
JavaScript code, that

02:09:24.200 --> 02:09:28.400
is designed to keep talking every
second, every 10 seconds or something,

02:09:28.400 --> 02:09:32.090
to Gmail servers, and they,
then, are using their code

02:09:32.090 --> 02:09:35.300
to add another element, another
element, another element,

02:09:35.300 --> 02:09:40.580
to the existing DOM, document object
model, which is the fancy term for tree

02:09:40.580 --> 02:09:44.660
in memory that represents HTML,
so that the web page can continue

02:09:44.660 --> 02:09:45.860
to update in real time.

02:09:45.860 --> 02:09:47.040
Google Maps, same thing.

02:09:47.040 --> 02:09:49.910
If you click and drag and drag
and drag, your browser did not

02:09:49.910 --> 02:09:53.160
download the entire world to
your Mac or PC by default.

02:09:53.160 --> 02:09:56.300
It only downloaded what's in your
viewport, the rectangular region.

02:09:56.300 --> 02:09:59.300
But when you click and drag, it's
going to get some more tiles up there,

02:09:59.300 --> 02:10:02.510
some more images, some more
images, as you keep dragging, using

02:10:02.510 --> 02:10:05.120
JavaScript, again, behind the scenes.

02:10:05.120 --> 02:10:08.480
So let's actually use JavaScript
to start interacting with pages.

02:10:08.480 --> 02:10:09.788
How can we do this?

02:10:09.788 --> 02:10:12.080
We can put the JavaScript
code in the head of the page,

02:10:12.080 --> 02:10:15.990
in the body of the page, or even
factor it out to a separate file.

02:10:15.990 --> 02:10:16.940
So let's take a look.

02:10:16.940 --> 02:10:21.410
Here is a new version of
Hello.html, that, during the break,

02:10:21.410 --> 02:10:24.590
I just added a form to, because it'd
be nice if this page didn't just

02:10:24.590 --> 02:10:28.280
say Hello, title, Hello, body, it said,
Hello, David, Hello, Carter, Hello,

02:10:28.280 --> 02:10:29.480
whoever uses it.

02:10:29.480 --> 02:10:32.480
I've got a form that I borrowed
from some of our earlier code,

02:10:32.480 --> 02:10:38.690
and that form has an input whose ID is
name, that also has a submit button.

02:10:38.690 --> 02:10:40.380
But there's no code in this yet.

02:10:40.380 --> 02:10:43.410
So let's add a little bit of
JavaScript code as follows.

02:10:43.410 --> 02:10:46.910
Suppose that, when this form is
submitted, I want to greet the user.

02:10:46.910 --> 02:10:48.090
How can I do that?

02:10:48.090 --> 02:10:51.110
Well, let's do it the
somewhat messy way first.

02:10:51.110 --> 02:10:55.160
I can add an attribute called
on submit to the form element,

02:10:55.160 --> 02:11:00.260
and I can say on submit, call the
function called greet, close quotes.

02:11:00.260 --> 02:11:02.360
Unfortunately, this
function doesn't yet exist.

02:11:02.360 --> 02:11:03.577
But I can make it exist.

02:11:03.577 --> 02:11:04.910
But there's another detail here.

02:11:04.910 --> 02:11:08.660
When the user clicks submit, normally
forms get submitted to the server.

02:11:08.660 --> 02:11:10.190
I don't want to do that today.

02:11:10.190 --> 02:11:14.180
I want to just submit the form to
the browsers, keep on the same page,

02:11:14.180 --> 02:11:16.950
and just print to the screen,
Hello, David, or so forth.

02:11:16.950 --> 02:11:19.670
So I'm also going to go
ahead and say, return false.

02:11:19.670 --> 02:11:24.110
And this is a JavaScript way of telling
the browser, even when the user tries

02:11:24.110 --> 02:11:25.640
to submit the form, return false.

02:11:25.640 --> 02:11:27.980
Like, no, don't let them
actually submit the form.

02:11:27.980 --> 02:11:30.170
But do call this function called greet.

02:11:30.170 --> 02:11:34.760
In the head of my page, I'm going to add
a script tag, wherein the language is

02:11:34.760 --> 02:11:37.490
implicitly JavaScript,
and has no relationship,

02:11:37.490 --> 02:11:41.210
for those of you who took APCS with
Java, just a similarly named language,

02:11:41.210 --> 02:11:45.350
but no relation, I'm going to
name a function called Greet.

02:11:45.350 --> 02:11:48.440
Apparently in JavaScript, the
way you create a function is you

02:11:48.440 --> 02:11:51.170
literally say the word
function instead of Def.

02:11:51.170 --> 02:11:53.510
You don't specify a return type.

02:11:53.510 --> 02:11:58.190
And in this function, I could do
something like this, alert quote

02:11:58.190 --> 02:12:01.610
unquote, how about, Hello, there.

02:12:01.610 --> 02:12:05.310
Initially I'm going to keep it simple,
using a built-in function called alert,

02:12:05.310 --> 02:12:06.840
which is not a good user interface.

02:12:06.840 --> 02:12:08.215
There are better ways to do this.

02:12:08.215 --> 02:12:10.190
But we're doing something simple first.

02:12:10.190 --> 02:12:13.040
Let me now go ahead and
load this page again.

02:12:13.040 --> 02:12:16.370
It still looks as simple as before,
with just a simple text box.

02:12:16.370 --> 02:12:17.750
I'll zoom in to make it bigger.

02:12:17.750 --> 02:12:19.280
I'm going to type my name,
but I think it's going

02:12:19.280 --> 02:12:21.050
to be ignored when I click Submit.

02:12:21.050 --> 02:12:22.640
It just says, Hello, there.

02:12:22.640 --> 02:12:24.920
And this is, again, this
is an ugly user interface.

02:12:24.920 --> 02:12:28.190
It literally says the whole
code space URL of the web page

02:12:28.190 --> 02:12:29.390
is saying this to you.

02:12:29.390 --> 02:12:33.265
It's really just meant for simple
interactions like this, for now.

02:12:33.265 --> 02:12:35.390
All right, let's have it
say Hello, David, somehow.

02:12:35.390 --> 02:12:36.840
Well, how can I do this?

02:12:36.840 --> 02:12:41.030
Well, if this element on the
page was given by me a unique ID,

02:12:41.030 --> 02:12:45.140
it'd be nice if, just like in CSS, I
can go grab the value of that text box,

02:12:45.140 --> 02:12:46.280
using code.

02:12:46.280 --> 02:12:47.780
And I actually can.

02:12:47.780 --> 02:12:49.380
Let me go ahead and do this.

02:12:49.380 --> 02:12:53.270
Let me store, in a variable
called name, the result

02:12:53.270 --> 02:12:58.190
of calling a special function
called document.queryselector.

02:12:58.190 --> 02:13:01.490
This query selector function
is JavaScript's version

02:13:01.490 --> 02:13:03.950
of what we were doing
in CSS, to select nodes,

02:13:03.950 --> 02:13:06.770
using hashes or dots or other syntax.

02:13:06.770 --> 02:13:08.250
It's the same syntax.

02:13:08.250 --> 02:13:13.200
So if I want to select the
element whose unique ID is name,

02:13:13.200 --> 02:13:16.520
I can literally just pass, in
single or double quotes, hash name,

02:13:16.520 --> 02:13:18.020
just like in CSS.

02:13:18.020 --> 02:13:20.840
That gives me the actual
node from the tree.

02:13:20.840 --> 02:13:25.010
It gives me one of these rectangles
from the DOM, the document object model.

02:13:25.010 --> 02:13:28.160
If I actually want to get at
the specific value therein,

02:13:28.160 --> 02:13:31.110
I need to go one step
further and say .value.

02:13:31.110 --> 02:13:33.110
So, similar in spirit
to Python, where we

02:13:33.110 --> 02:13:36.020
saw a lot of dot notation, where
you can go inside an object,

02:13:36.020 --> 02:13:38.000
inside of an object,
that's what's going on.

02:13:38.000 --> 02:13:41.900
Long story short, in JavaScript,
there is a special global variable

02:13:41.900 --> 02:13:45.200
called document, that lets you just do
stuff with the document, the web page

02:13:45.200 --> 02:13:45.830
itself.

02:13:45.830 --> 02:13:48.170
One of those functions
is called query selector.

02:13:48.170 --> 02:13:51.590
That function returns to you
whatever it is you're selecting.

02:13:51.590 --> 02:13:54.840
And dot value means go
inside of that rectangle,

02:13:54.840 --> 02:13:58.080
and grab the actual text
that the human typed in.

02:13:58.080 --> 02:14:02.060
So if I want to now say,
Hello, to that person,

02:14:02.060 --> 02:14:04.820
the syntax is a little
different from C and Python.

02:14:04.820 --> 02:14:07.550
I can use concatenation, which
actually does exist in Python,

02:14:07.550 --> 02:14:08.750
but we didn't use it much.

02:14:08.750 --> 02:14:14.180
I can go ahead and say hello,
quote unquote "Hello," plus name.

02:14:14.180 --> 02:14:16.940
All right, now, if I go
back to the browser window,

02:14:16.940 --> 02:14:20.720
reload the page, to get the latest
version of the code, type in David,

02:14:20.720 --> 02:14:23.840
and click Submit, now
I see, Hello, David.

02:14:23.840 --> 02:14:27.230
Not the best website, but
it does demonstrate how

02:14:27.230 --> 02:14:29.640
I can start to interact with the page.

02:14:29.640 --> 02:14:33.020
But let me stipulate that
this co-mingling of languages

02:14:33.020 --> 02:14:34.470
is never a good thing.

02:14:34.470 --> 02:14:36.980
It's fine to use
classes, but using style

02:14:36.980 --> 02:14:39.153
equals quote unquote and
a whole bunch of CSS,

02:14:39.153 --> 02:14:42.320
that was not going to scale well, once
you have lots and lots of properties.

02:14:42.320 --> 02:14:44.480
Same here, once you
have more and more code,

02:14:44.480 --> 02:14:48.270
you don't want to just put your code
inside of this on submit handler.

02:14:48.270 --> 02:14:49.560
So there's a better way.

02:14:49.560 --> 02:14:52.110
Let's get rid of that
on summit attribute,

02:14:52.110 --> 02:14:53.940
and literally never use it again.

02:14:53.940 --> 02:14:56.220
That was for demonstration's sake only.

02:14:56.220 --> 02:14:57.610
And let's do this.

02:14:57.610 --> 02:15:01.470
Let me move the script tag,
actually, just below the form,

02:15:01.470 --> 02:15:05.400
but still inside the body, so
that the script tag exists only

02:15:05.400 --> 02:15:08.290
after the form tag exists, logically.

02:15:08.290 --> 02:15:12.220
Just like in Python, your code is
read top to bottom, left to right.

02:15:12.220 --> 02:15:14.560
And let me now do this.

02:15:14.560 --> 02:15:17.400
Let me define this function
called Greet, and then

02:15:17.400 --> 02:15:22.710
let me do this, document.queryselector,
let me select the form on the page.

02:15:22.710 --> 02:15:24.040
It doesn't have a unique ID.

02:15:24.040 --> 02:15:24.870
It doesn't need to.

02:15:24.870 --> 02:15:28.110
I can just reference it by name, form,
because there's only one of them.

02:15:28.110 --> 02:15:32.220
And let me call this special
function, add event listener.

02:15:32.220 --> 02:15:35.280
This is a function that
listens for events.

02:15:35.280 --> 02:15:38.010
Now this is actually a term
of art within programming.

02:15:38.010 --> 02:15:40.980
Many different languages
are governed by events.

02:15:40.980 --> 02:15:44.460
And pretty much any user interface is
governed by events, especially phones.

02:15:44.460 --> 02:15:49.073
On phones, you have touches, and you
have drags, and you have long press,

02:15:49.073 --> 02:15:51.240
and you have pinch, and all
of these other gestures.

02:15:51.240 --> 02:15:53.520
On your Mac or PC you
have click, you have drag,

02:15:53.520 --> 02:15:56.790
you have key down, key up, as
you're moving your hands up and down

02:15:56.790 --> 02:15:57.670
on the keyboard.

02:15:57.670 --> 02:16:00.930
This is a non-exhaustive
list of all of the events

02:16:00.930 --> 02:16:03.727
that you can listen for in the
context of web programming.

02:16:03.727 --> 02:16:06.060
And this might be a throwback
to Scratch, where, recall,

02:16:06.060 --> 02:16:08.220
Scratch let you broadcast events.

02:16:08.220 --> 02:16:11.550
And we had the two puppets sort of
talking to one another via Events.

02:16:11.550 --> 02:16:15.420
In the world of web programming, game
programming, any human physical device

02:16:15.420 --> 02:16:17.940
these days, they're
just governed by events.

02:16:17.940 --> 02:16:20.770
And you write code that listens
for these events happening.

02:16:20.770 --> 02:16:22.110
So what do I want to listen for?

02:16:22.110 --> 02:16:25.270
Well, I want to add an event
listener for the Submit event.

02:16:25.270 --> 02:16:30.580
And when that happens, I want to
call the Greet function, like this.

02:16:30.580 --> 02:16:32.610
So this is kind of interesting.

02:16:32.610 --> 02:16:36.240
Thank you, I have my Greet
function as before, no changes.

02:16:36.240 --> 02:16:38.760
But I'm adding one
line of code down here.

02:16:38.760 --> 02:16:41.880
I'm telling the browser to
use document.queryselector

02:16:41.880 --> 02:16:43.140
to select the form.

02:16:43.140 --> 02:16:46.360
Then I'm adding an event listener,
specifically for the Submit event.

02:16:46.360 --> 02:16:48.480
And when that happens, I call Greet.

02:16:48.480 --> 02:16:51.270
Notice I am not using
parentheses after Greet.

02:16:51.270 --> 02:16:53.190
I don't want to call Greet right away.

02:16:53.190 --> 02:16:59.700
I want to tell the browser to call
Greet, when it hears this Submit event.

02:16:59.700 --> 02:17:07.800
Now let me go ahead and deliberately,
I think, trip over something

02:17:07.800 --> 02:17:11.820
here, let me type in my name,
David, submit, and there we go.

02:17:11.820 --> 02:17:13.170
All right, Hello, David.

02:17:13.170 --> 02:17:17.040
All right, but let's now make
this slightly better designed.

02:17:17.040 --> 02:17:20.380
Right now, I'm defining a
function Greet, which is fine.

02:17:20.380 --> 02:17:22.360
But I'm only using it in one place.

02:17:22.360 --> 02:17:24.930
And you might recall, we
stumbled on this in Python,

02:17:24.930 --> 02:17:28.020
where I was like, why are we creating
a special function called get value

02:17:28.020 --> 02:17:30.270
when we're only using
it like one line later?

02:17:30.270 --> 02:17:33.650
And we introduced what type of
function in Python the other day?

02:17:33.650 --> 02:17:34.410
AUDIENCE: Lambda.

02:17:34.410 --> 02:17:37.030
SPEAKER 1: Yeah, so lambda
functions, anonymous functions.

02:17:37.030 --> 02:17:39.420
You can actually do this
in JavaScript as well.

02:17:39.420 --> 02:17:43.810
If I want to define a function all
at once, I can actually do this.

02:17:43.810 --> 02:17:47.470
Let me cut this onto my
clipboard, paste it over here.

02:17:47.470 --> 02:17:49.260
Let me fix all of the alignment.

02:17:49.260 --> 02:17:50.790
Let me get rid of the name.

02:17:50.790 --> 02:17:54.480
And I can actually, now, do this.

02:17:54.480 --> 02:17:56.160
The syntax is a little weird.

02:17:56.160 --> 02:17:59.830
But using now just these four
lines of code, I can do this.

02:17:59.830 --> 02:18:03.340
I can tell the browser to add an
event listener for the Submit event.

02:18:03.340 --> 02:18:07.139
And then when it hears that, call
this function that has no name.

02:18:07.139 --> 02:18:09.959
And unlike Python, this function
can have multiple lines,

02:18:09.959 --> 02:18:11.459
which is actually a nice thing.

02:18:11.459 --> 02:18:12.523
It looks a little weird.

02:18:12.523 --> 02:18:14.940
There's a lot of indentation
in curly braces going on now.

02:18:14.940 --> 02:18:19.260
But you can think of this as just
being, run these two lines of code,

02:18:19.260 --> 02:18:21.957
when the form is submitted.

02:18:21.957 --> 02:18:24.540
But if I want to block the form
from actually being submitted,

02:18:24.540 --> 02:18:25.530
I've got to do one other thing.

02:18:25.530 --> 02:18:28.738
And you would only know this from being
told it or reading the documentation.

02:18:28.738 --> 02:18:32.100
I need to do this
function, prevent default,

02:18:32.100 --> 02:18:35.930
passing in this E argument, which
is a variable that represents

02:18:35.930 --> 02:18:37.680
the event, more on
that another time, that

02:18:37.680 --> 02:18:40.290
just allows us to prevent
whatever the default

02:18:40.290 --> 02:18:43.320
handling of that particular event is.

02:18:43.320 --> 02:18:46.590
So long story short, this is
representative of the type of code

02:18:46.590 --> 02:18:49.770
you might write in JavaScript,
whereby you can actually interact

02:18:49.770 --> 02:18:52.230
with your code, the user's actual form.

02:18:52.230 --> 02:18:54.000
And we can do interesting things, too.

02:18:54.000 --> 02:18:57.340
Built into browsers nowadays
is functionality like this.

02:18:57.340 --> 02:19:01.059
So here's a very simple example, that
has just three buttons in it, one red,

02:19:01.059 --> 02:19:02.190
one green, one blue.

02:19:02.190 --> 02:19:04.559
Well, it turns out using
JavaScript, you can control

02:19:04.559 --> 02:19:06.690
the CSS of a page programmatically.

02:19:06.690 --> 02:19:09.090
I can change the background
of the body of the page

02:19:09.090 --> 02:19:14.190
to red, to green, to blue, just by
listening for clicks on these buttons,

02:19:14.190 --> 02:19:16.290
and then changing CSS properties.

02:19:16.290 --> 02:19:19.080
Just to give you a taste of this,
if I view the page's source,

02:19:19.080 --> 02:19:23.520
similar code here, I can
select the red button by an ID

02:19:23.520 --> 02:19:26.250
that I apparently defined
on it, right up here.

02:19:26.250 --> 02:19:29.680
I can add an event listener, this
time not for submit, but for click.

02:19:29.680 --> 02:19:32.007
And when it's clicked, I
execute this one line of code.

02:19:32.007 --> 02:19:34.049
And this one line of code
we haven't seen before,

02:19:34.049 --> 02:19:37.680
but you can go into the body of
the page, its style property,

02:19:37.680 --> 02:19:40.139
and you can change its
background color to red.

02:19:40.139 --> 02:19:42.660
This is one example of
two different groups

02:19:42.660 --> 02:19:44.370
not talking to one another in advance.

02:19:44.370 --> 02:19:47.719
In CSS, properties that have two
words are usually hyphenated,

02:19:47.719 --> 02:19:49.400
like background-color.

02:19:49.400 --> 02:19:52.309
Unfortunately, in JavaScript, if
you do something dash something,

02:19:52.309 --> 02:19:55.950
that's subtraction, which is
logically nonsensical here.

02:19:55.950 --> 02:20:00.740
So in CSS, you can convert
background-color to, in JavaScript,

02:20:00.740 --> 02:20:03.410
background Color, where
you capitalize the C,

02:20:03.410 --> 02:20:05.660
and you get rid of the minus sign.

02:20:05.660 --> 02:20:06.990
What else can we do here?

02:20:06.990 --> 02:20:09.709
Well, back in the day, there
used to be a blink tag.

02:20:09.709 --> 02:20:11.780
And it's one of the
few historical examples

02:20:11.780 --> 02:20:16.490
of a tag that was removed from HTML,
because in the late '90s, early 2000s,

02:20:16.490 --> 02:20:17.930
this is what the web looked like.

02:20:17.930 --> 02:20:19.985
There was a lot of this kind of stuff.

02:20:19.985 --> 02:20:21.860
There was even a marquee
that would move text

02:20:21.860 --> 02:20:23.318
from left to right over the screen.

02:20:23.318 --> 02:20:25.590
And the web was a very ugly place.

02:20:25.590 --> 02:20:28.879
I will admit, my very first web page
probably used both of these tags.

02:20:28.879 --> 02:20:30.350
But how can we bring it back?

02:20:30.350 --> 02:20:33.500
Well, this is a version of the
blink tag implemented in JavaScript.

02:20:33.500 --> 02:20:34.010
How?

02:20:34.010 --> 02:20:39.530
I wrote some code in this example, that
waits every 500 milliseconds to change

02:20:39.530 --> 02:20:43.280
the CSS of the page to be
visible, invisible, visible,

02:20:43.280 --> 02:20:46.700
invisible, because built into
JavaScript is support for a clock.

02:20:46.700 --> 02:20:49.260
So you can just do something
on some sort of schedule.

02:20:49.260 --> 02:20:51.590
Let me go ahead and open up
this example, autocomplete.

02:20:51.590 --> 02:20:53.059
So let me zoom back out.

02:20:53.059 --> 02:20:57.559
In Autocomplete.html, I whipped up as
an example, that has just a text box,

02:20:57.559 --> 02:21:00.290
but I also grabbed the
dictionary from problem

02:21:00.290 --> 02:21:04.520
set 5 speller, so that if I want
to search for something like Apple,

02:21:04.520 --> 02:21:08.300
this searches that 140,000
words, using JavaScript,

02:21:08.300 --> 02:21:11.188
to create what we know in the
world of the web as autocomplete.

02:21:11.188 --> 02:21:12.980
When you start searching
for something, you

02:21:12.980 --> 02:21:15.440
should start to see words
that start with that phrase.

02:21:15.440 --> 02:21:17.973
And sure enough, if I search
for something like banana,

02:21:17.973 --> 02:21:21.140
here's the three variants of bananas
that appear in that file, and so forth.

02:21:21.140 --> 02:21:22.190
How is that working?

02:21:22.190 --> 02:21:25.620
Just JavaScript, when
it finds matching words,

02:21:25.620 --> 02:21:28.670
it's just updating the DOM, the
tree in the computer's memory,

02:21:28.670 --> 02:21:31.730
to show more and more text, or less.

02:21:31.730 --> 02:21:37.970
And for one final example, this is how
programs like DoorDash and Google Maps

02:21:37.970 --> 02:21:39.680
and Uber Eats and so work.

02:21:39.680 --> 02:21:43.850
You have built into browsers today some
fancy APIs, application programming

02:21:43.850 --> 02:21:47.960
interfaces, whereby you can ask for
information about the user's device.

02:21:47.960 --> 02:21:51.410
For instance, here, I wrote a
program, in Geolocation.html, that's

02:21:51.410 --> 02:21:53.257
apparently asking to know my location.

02:21:53.257 --> 02:21:55.340
All right, let me go ahead
and allow it this time,

02:21:55.340 --> 02:21:58.010
if that's something you're
comfortable with on your own device.

02:21:58.010 --> 02:22:01.010
It's taking a moment, because sometimes
these things take a little while

02:22:01.010 --> 02:22:01.890
to analyze.

02:22:01.890 --> 02:22:06.410
But, hopefully, in just a moment, there
are apparently my GPS coordinates,

02:22:06.410 --> 02:22:10.040
and as a final flourish today, for what
you can do with a little bit of HTML

02:22:10.040 --> 02:22:12.410
for your structure, CSS
for your style, and now

02:22:12.410 --> 02:22:17.180
JavaScript for your logic, which we'll
tie in again next week, let me go ahead

02:22:17.180 --> 02:22:19.790
and search Google for
those GPS coordinates.

02:22:19.790 --> 02:22:25.280
Zoom in here on Google Maps,
and if we zoom in, in, in,

02:22:25.280 --> 02:22:26.270
OK, we're pretty close.

02:22:26.270 --> 02:22:29.930
We're not on that street, but
there, oh, there it is, actually.

02:22:29.930 --> 02:22:31.640
There is the marker it had put for us.

02:22:31.640 --> 02:22:33.927
We're indeed here in Memorial Hall.

02:22:33.927 --> 02:22:36.260
So all that with JavaScript,
but the basic understanding

02:22:36.260 --> 02:22:38.060
of the DOM and the
document object model,

02:22:38.060 --> 02:22:40.290
we'll pick up where
we left off next week.

02:22:40.290 --> 02:22:41.300
And now add a back-end.

02:22:41.300 --> 02:22:43.070
See you next time.

02:22:43.070 --> 02:22:44.500
[APPLAUSE]

02:22:44.500 --> 02:23:18.000
[MUSIC PLAYING]