[MUSIC PLAYING] DAVID MALAN: All right. This is CS50. And this is already Week 8. But this is a CS50 bingo board from one
of your classmates at Yale, Shoshannah, kindly sent this to us. And she's apparently been taking
close notice of certain expressions that I apparently tend
to say quite a bit. Some of which I'm aware
of, but not all of them. And the idea here as she
described it is that if and when I say any of these
expressions on the screen, you can draw a line through that box. And if you get five in a row,
you win a fabulous prize. It seems only fair, then, if we
maybe give away some cookies today if and when I actually do say
five such things in a row. Perhaps it'll be all the more motivation
to keep a rapt ear against everything we're talking about today. So if and when that happens,
feel free to just yell out bingo. And then please see Carter during the
break or after class for adjudication. All right. So today, ultimately though, Week 8
is about the internet and, in turn, how it works and, in fact, how we can
start building software on top of it. So up until now, of course,
we've experimented with Scratch, spent quite a bit of
time with C, only really spent a week plus so far on
Python, and about the same on SQL. But ultimately, we're going
to come full circle next week and tie all of those languages together. But we're going to do it
in the context of the web. And in fact to do that,
we're going to introduce three different languages
today, but only one of which is a proper programming language. The other two are more about
presentation, markup languages, so to speak. And those languages are HTML and
CSS, commonly used in conjunction. Some of you might have done this middle
school, high school even, if you ever made a personal website of sorts. And JavaScript, a
programming language that is very commonly used in
the context of browsers to make interfaces that are
all the more interactive. But it can also be used server side. And what you'll find that
is our goal this week, like last week, like two weeks ago
is really to teach you ultimately how to program, how to
program procedurally and also with elements of
what we'll call functional programming,
object-oriented programming, concepts that you'll explore more if you
pursue more programming or higher level classes. But at the end of the day,
you will exit this class having learned how to
program, particularly in a context that's very much in
vogue nowadays, be it for the web or be it for mobile devices. And all of the ideas thus far
will be applicable as we now begin to build on top of the internet. So what is it? So back in the late '60s and
1970s, it wasn't much of anything. This is an early diagram
depicting a few access points on the West Coast of the
United States, which represents what was originally called ARPANET. And this was a project from
the US Department of Defense to begin to internetwork
computers by enabling them to exchange data using
what's now known as packets, packets of information back and forth. It wasn't too long before East
Coast was eventually connected through MIT, Harvard, and others. And nowadays, fast
forward to present day, just a few decades later,
everything, it would seem, is somehow interconnected,
either with wires or wirelessly. But how do you actually get
data from any of these points to any of these other points or
all of the points that now exist? Well, let me stipulate,
for today's purposes, that the world nowadays
is filled with routers, simply computers, servers whose purpose
in life is to route information from left to right, top to
bottom, geographically, so to speak, to just get
data from point A to point B. But typically, you're not going to have
a direct connection between points A and B. You might have
C, D, E. In other words, you might have many different
servers between you and someone else. So if you have a friend
at Stanford University and you simply send them
an email, well, odds are that email is going to be put inside
what we're soon going to call a packet. And that packet might actually pass
through the hands, so to speak, of any number of routers,
typically more than one or two, but typically fewer
than 30 such routers. And it's up to the IT administrators
of the world to figure out how to route data between these servers. And we have software nowadays that
dynamically figures out the best path. It's not necessarily
a straight line, as it might be in the world of mathematics. But hopefully, it's the fastest way
to get data from point A to point B. So the teaching fellows, thanks to
Zoom, kindly put together in years past a demonstration of this whereby
each of the teaching fellows or TAs that you see on the screen here
consider representing a router, that is a device on the internet
that its purpose in life is to get data, North, South. East, or West, between
two points ultimately. And if we assume that
Phyllis, for instance, wants to send a packet of information
to Brian up here at top left, from bottom right, it turns out that by
design the internet can send that data over any number of routes. It can go up and to the left. It can go left and then up. It can double back a little bit. Again, it's not necessarily
a straight line. And this is a feature, not a bug. The intent of the internet
early on was to be able to route around downed servers. So if one router is overwhelmed,
or if one router is offline, the internet can still adapt dynamically
and just route it some other direction. So here, for instance, is
one representative route that our packets might take. Thanks to the team. [CLASSICAL MUSIC PLAYING] So my thanks to the team. And if you've ever used
Zoom before, you know that you don't often see exactly the
same layout that someone else sees. So it took us forever to
actually get that right. Because no one actually knew to whom
they were necessarily passing it. But if all of those TFs and TAs
represent routers, well, what is it they were handing? What is it that Phyllis
wanted to send to Brian? Well, I've called it
generically a packet. And a packet is a generic term
for some amount of information. But it's kind of analogous to
an envelope in the real world. If you're still in the habit of
sending letters or postal mail, you typically put your information
inside of an envelope such as this. And then you hand it
off to the mail carrier, or you drop it into the mail box. And then humans, in the
case of the Postal Service, actually get it from point A to point B. But odds are it goes through different
cities, different countries, even. So you can think of that as roughly
analogous to these things called routers. But the technical term for what
it is the TFs were just doing is they were implementing a
protocol that we know as TCP/IP. And this is actually
probably a pair of acronyms that you've probably seen,
maybe on your Mac, PC, or phone, even if you haven't really
thought much about it. But this is actually a pair
of protocols, two protocols that the internet generally
uses nowadays and has for some time to get data
from point A to point B. And let's consider each
of these halves so you have a sense of what it is the internet
is doing when you do send an email or do anything else. Well, first, IP stands
for internet protocol. And you've probably even heard this in
popular media, since a lot of humans are indeed familiar
with this notion of IP. And they associate it typically
with IP addresses, as you might. So I'll stipulate for today that
every computer, every internet work device in the world has an IP
address, an internet protocol address similar in spirit to
buildings in the physical world. Here we are at 45 Quincy Street,
Cambridge, Massachusetts, 02138, USA. That is a unique string, theoretically,
that uniquely identifies this building. Similarly, in the world of computers,
we use a simpler mechanism, just numbers of this format that
uniquely represent computers. Now that's a bit of a white lie. Because there's actually a
way to share IP addresses. And within your home, often within
your dorm, or your apartment, you'll actually have what appears to be
the same IP address as your roommates or family members. But for now, let's keep
things simple and assume that every Mac, PC,
and phone in the world has a unique IP address that's
formatted like this, number dot number dot number dot number. Each of these number signs
represents a value between 0 and 255. And even though we haven't played
around with this kind of arithmetic in some time, if each of these
placeholders is 0 through 255, how many bits are being used
to represent each number? Think back to Week 0, Week 1. Yeah, so 8, in fact. 8 bits in total, or 1 byte. So IP addresses are
generally 4 bytes or 32 bits. And the other math we kept doing early
on is if you've got 4 bytes or 32 bits, that's a maximum of 2 to the 32nd
power total number of values. How many IP addresses can you have,
it would seem, maximally in the world? Enough. Actually, not enough would
be a better answer nowadays. But roughly, 4 billion was the
rough math that we typically did anytime 2 to the 32 was involved. But it turns out with all of the
humans, and all of the devices, servers, clients, PCs, Macs, phones,
and everything else, internet of things devices nowadays,
even 4 billion is not quite enough. So the world is gradually in
the process of transitioning from this format, which is
technically IPv4, version 4, to IPv6. And in the world of IPv6, we've
actually bumped things up from 32 bits to 128 bits, which is a crazy number
of possible permutations, 2 to the 128. So you'll gradually see that over time. But those are a lot messier of a
format because there's so much larger. So we'll use the more
commonplace ones IPv4. Now just to get into the weeds
briefly, this is some ASCII art. That is, someone wrote this
up decades ago in a text file to represent the layout
of one of these packets. So think of this as, like, the digital
representation of this here envelope. And even though we won't get into
the weeds of what this represents, up here you just have some values
saying that this is byte 0. This is byte 10. This is byte 20. And this is byte 32, but 0 indexed. So that is to say that this is just
kind of an artist's rendition of a grid of bits, top to bottom, left to right. And what's going to be interesting for
us today is not most of these fields. There's a whole bunch of information
that's encapsulated inside of any one of these packets. But we'll focus initially on these two,
source address and destination address. Maybe the most important
thing IP does is it standardizes what
you put, so to speak, on the outside of these envelopes. It says that every computer is going
to have a unique address of that form, something dot something dot
something dot something. And so just like in the
real world, if I want to send this packet
from Phyllis to Brian, and suppose that Brian's
IP address is a number, like, very simply 1.2.3.4,
what Phyllis would do is put that IP address in
the middle of this envelope, just like you would address
a letter in the real world. But so that Brian could reply to
her, if only to confirm receipt, she's also going to put in
the top left of this envelope, virtually, her own IP address,
which for the sake of discussion is maybe 5.6.7.8. In practice, they won't
be as pretty as that. But it's the general idea. So you have a source address from
which it's coming and a destination | to which it's going. And that's what IP does. It sort of standardizes, in addition
to a bunch of other numbers and values that need to be in this envelope, too. It really just mandates that
computers on the internet minimally provide a source address
and a destination address so that the envelope
can get from point A to point B. But that's not quite enough. Because it turns out, and if you
saw the bloopers from the TFs' Zoom session there, you would see that
it's very common not only for humans to physically drop an
envelope like that, and frankly, even in the
real world, for mail carriers to lose mail occasionally,
undelivered to recipients. And so it turns out that IP alone
is not enough to guarantee delivery because sometimes the packet just
might not get to its destination. More technically, that might happen
because the router is overwhelmed. It only has so much memory. It only has so fast a CPU. And if it's receiving
way too many packets because so many people are on the
internet at some moment in time, well, it might just kind of get
overwhelmed and metaphorically drop certain packets in the
sense that there's just not enough room in its memory
to keep up with the traffic. So the effect for the sender is that
the packet just doesn't get through. And so there's this other protocol,
TCP, that humans typically use in conjunction
with IP via their Macs, PCs, and phones that does a
couple of other things for us. One, it guarantees delivery, or
really "guarantees" delivery. And it does that actually by doing this. It does that by having Phyllis write
on the outside of the envelope not just the source address
and destination address, but also what we'll
call a sequence number. So, for instance, this
would be packet one of two that she might be sending to Brian. So maybe in, like, the memo
field, she could write one of two. And then, if she happens to
send a second packet to Brian, she might write similarly a source
address and destination address. But she might write two out of two. Because now, logically, if
Brian only gets one of these, that sequence number is
enough information for him to know wait a minute, I
need to ask Phyllis to resend number one, or maybe resend number two. If both of them don't get
through, I mean, honestly, that's probably when Phyllis
hits reload or resends the email. But in general, these sequence numbers
help with guaranteeing delivery. But if Phyllis and Brian are each
representing computers in this story, they can be doing different things. They can be doing email, chat, video
conferencing, direct messaging, or any number of services
on the internet nowadays. So TCP gives us one other
feature, namely port numbers. Because when Brian receives
that envelope, assuming he's indeed a computer, how
does he know that what's inside of that envelope is indeed
an email, versus a direct message, versus a little bit of video, versus
sound, versus any other type of media. Ideally, the outside of the envelope
would have a bit of a clue for him that indicates this is
the type of data herein. Or more specifically, this
is the program, really, that should open this envelope, the
email program, the video conferencing program, or whatever else. So what Phyllis would typically do on
the outside of this envelope lastly, in addition to the source
address, destination address, and the memo field, the sequence number,
she would also write a port number. And it turns out two of the most
common port numbers in the world of TCP are these two, 80, which
represents the web. That is to say, something
called HTTP, more on that today, or HTTPS, which most everyone
nowadays probably knows means secure, so it's some kind of
secure version of HTTP. And that number happens to be 443. There's no mathematical
significance of these. They're just kind of arbitrary. But humans decades ago decided
to standardize on these numbers. So what it means for Phyllis is
that on the outside of her envelope, she should generally put a
colon after the destination address and then the number of the port
that she wants to receive this packet. So if she's actually not sending an
email, but maybe making a web request, and Brian is a web server
and Phyllis is a web browser, she would write colon 80. Or if she's using HTTPS securely,
we would change that 80 to a 443. There's other stuff on the
outside of that envelope. In fact, just like with IP, there
might be fields that look like this. But just to give you a sense
of this, which is a TCP packet, you'll see that indeed sequence
numbers are actually really big. They use all 32 bits of this
part of the picture, which is to say that generally
computers are sending way more than one packet or two. They might be sending
dozens, hundreds, thousands even, depending on the size
of the data in question. And there's some other
features therein, including source port and destination port. Destination port is the 80 or
the 443 that I mentioned earlier. But long story short, Phyllis also
gets to pick a source port to uniquely identify this particular request. But more on that another time. For now, just know that TCP
is the pair of protocols that the internet uses
to get data from point A to point B. IP standardizes
how the addresses work. And TCP guarantees delivery
with those sequence numbers and also helps the servers do more
than one thing, helps them multiplex, so to speak, among email,
web, video conferencing by using those port numbers. So at the end of the day, everything,
even now, weeks into the class, it all boils down somehow to zeros
and ones, or in turn, numbers, as we might think of them in this case. Questions on any of these
building blocks thus far? Questions on any of these? No? All right. Well, on the outside of this envelope
are just some arbitrary numbers, 1, 2, 3, 4, 5, 6, 7, 8. That's obviously not what you
and I are in the habit of typing. When we actually visit websites,
for instance, you and I are generally in the habit of
typing harvard.edu, or yale.edu, or google.com, or the like,
otherwise known as domain names. But your Mac, your PC has
to, at the end of the day, address those virtual envelopes, AKA
packets, with actual IP addresses. There is no room for words, letters of
the English alphabet in those pictures that we showed on the screen. It's just 32 bits, here 32 bits here. So it turns out, on the internet,
there's another type of server. That, unlike routers, which route
information from point A to point B, there's another type of server that
are all over the place, frankly, in your home, on campus, in
a company on the internet more broadly, known as DNS servers,
domain name system servers. So what do these things do? This is just a type of server on
the internet whose purpose in life is to answer questions of the form, what
is the IP address for this domain name. So for instance, if you
do pull up your browser on your Mac or PC or
your phone, you type in harvard.edu and hit Enter,
what your device is designed to do is to ask some local DNS server on
campus, on your mobile carrier's network, on your apartment or
dorm's network, what is the IP address of harvard.edu, or yale.edu? Whatever you actually
typed in, hopefully there is a nearby DNS server that will respond
with a numeric address of the form something dot something dot
something dot something. And that's the number
that your computer, your device will actually use on the
outside of that virtual envelope. So you can think of
DNS servers, honestly, as fitting the model that we keep coming
back to, this notion of a dictionary, or a hash table, more specifically,
whereby inside of a DNS server is essentially a dictionary, a two
column spreadsheet or database table, if you will. And in one column are domain names,
harvard.edu, yale.edu, google.com. On the right-hand
side, right-hand column are just the corresponding IP addresses. And that's it. To be technical, if they're not
generally called just domain names, technically, it's a fully
qualified domain name. More on that another time. But domain names as we know them,
generally have different parts. And we'll soon see how to tease
them apart beyond the usual. Questions though, on what DNS
server's purpose in life is or how this might work? No. All right. So how does your Mac, how does
your PC, how does your phone know what these IP addresses are? Well, they don't come from
the manufacturer this way. And there's this whole hierarchy
in the world of DNS servers such that your phone, your
Mac, your PC, will generally ask the nearest DNS server, which is
usually owned by your internet service provider at home, in your apartment, or
by your university or by your company. But it's a hierarchical system. And it's kind of a recursive design. In that if that local DNS
server does not have the answer, it's going to ask someone
bigger, more important than it. If that one doesn't know, it might ask
someone, again, recursively for it. And throughout the world,
there's a finite number of what are called root servers that
essentially know about all the dot coms in the world, all of the
dot edus in the world, all of the dot whatever is in the world. And so someone, at the end of the
day, knows about those systems. And in fact, if you've ever bought, or
in the future might buy a domain name, part of that process is paying someone
to associate an IP address for you with the actual server that
you're going to actually be using. So your final projects, for instance,
in CS50, it's sometimes common for folks to actually buy for personal
use their own domain name for a few dollars a year, typically. So you're sort of renting it
more than you're buying it. But among the steps you'll
go through if you ever do that is to essentially inform the
world what will be the IP address or IP addresses of your particular
domain name that you've bought for, say, that calendar year. All right. So how does all this get started? Well, back in the day, when you
arrived on campus here at Yale, anyone, or in the world, you would
actually configure your Mac or PC to know the IP addresses of your nearest
router, of your nearest DNS server. So literally, someone
would come to your home back in the day when signing
up for internet service and configure your Mac or PC for you. Of course, nowadays I don't remember
anyone really touching my computer recently to configure it for me. It all seems to happen automatically. And indeed, there's this other
type of server now in the world, another solution to a human
made problem known as DHCP. And I think this is among the remaining
acronyms for today, dynamic host configuration protocol. And it's not that intellectually
interesting to memorize that. But what DHCP servers
do is answer questions of the form "what should be my DNS
server and router," quote, unquote. So nowadays, when you turn
on your phone in the morning, if you actually powered
it off, if you open your laptop lid for the first day of
classes or the like, your Mac, your PC, your phone is essentially
broadcasting a Hello, World message, unbeknownst to you, that's just
asking the local network, hey, what IP address should I use for
my DNS server and for my router. And hopefully, Harvard or Yale or
your apartment or your home more generally has a DHCP server
nearby whose purpose in life is just to hand out
answers to that question. And what these DHCP
servers also do is they tell your Mac, your
PC, your phone, what IP address your device should
use because that too is no longer manually configured. So this all just nowadays
happens automatically. And in the case of a campus
like this or at Yale, it's because, at the very
beginning of your visit to campus, you did register somehow. You probably logged in. You authenticated against your
Harvard account or your Yale account. And that is what enabled
the DHCP servers henceforth and forever to recognize
your particular computer and answer those questions for you. All right. So that's it for how the
internet works, at least so far as we are concerned today. We're going to now start
building on top of it. And undoubtedly, the most
popular form of the internet nowadays is something called HTTP. That is the World Wide Web, though most
people don't really say it in long form anymore. But HTTP is just another protocol
that governs how web browsers and how web servers
speak, just like IP is a protocol that governs how computers
address each other on the internet, and how TCP governs how computers
keep track of sequences of packets from point A to point B and also
multiplex among different services using those port numbers. And to be clear, what's a
protocol-- well, in the human world, it's a very common protocol. And I can't reach any of you. But if I were to reach over
and say hi, nice to meet you. You presumably, if we weren't five
feet apart, would extend your hand. We would sort of acknowledge, in
this strange cultural convention. But that's a protocol. I know how to do it. You know how to do it. I'm initiating. You're responding. And that's exactly what's happening
all the time on the internet. You have a client, like me in this
case, that's initiating a request. You have a server, like
you in this case, that's responding to that request. Or analogously, if
you're in a restaurant, you might be the client
sitting down at the table. You want to order food. And there's a server that serves you
that food after you have requested it. So computers, really, on the internet
are implementing that same paradigm. So when it comes very specifically to
the web, which is different, of course, from email and video
conferencing and all of these other services on the
internet, the world wide web uses this protocol,
HTTP, which standardizes what goes inside of
those envelopes in order to allow a web browser to request and
receive information from a web server. So we've talked about really the
lower level details up until now, the outside of the envelope. Let's now look inside of the envelope
when it comes to actual web pages that you might visit or soon
today, you yourselves might design. So HTTP stands for Hypertext Transfer
Protocol, which is another mouthful, but, again, just standardizes how we're
going to get web traffic from point A to point B, from browser
to server and back. HTTPS is literally the
secure version of that. And what that means for today's purposes
is that the connection is somehow encrypted, scrambled using
very fancy mathematics so that it is very, very,
very unlikely that anyone who intercepts your traffic, your
packets between point A and point B will have any idea what is
inside of those envelopes. They might intercept the
packet itself digitally. They might try to open it up. But it's going to look
metaphorically like random zeros and ones on the inside when using HTTPS
because of what's called encryption. But let's look at some canonical URLs. All of us are in the habit of seeing
these and typing these all the time. Well, let's actually tease
apart some of the jargon here. So here is an example URL with
all of the usual components. So here, for instance,
with the yellow slash, this generally means, even
though you rarely type it and you rarely see it nowadays, this
means the default page for the website. Give me the root of the
website, so to speak. So this is to say this
represents a folder, like, the default folder inside of which
is presumably the default web page. And we'll see what that means
more concretely in just a bit. If, though, you're visiting
a more specific URL, we're going to henceforth
call this a path. So slash something is representative of
a path, maybe a file, maybe a folder, just like in the world of
Macs, PCs, and cloud services. Specifically, you might sometimes be in
the habit of visiting an actual file, something like /file.html. Nowadays, this is kind of
very '90s, early 2000s. Nowadays most web servers
hide the file extension, the dot HTML, even if
it's there on the server. It just looks a little messy nowadays. It sort of reveals information
that's not necessary. So very often you won't see dot
HTML, even if there is actually a file ending in that suffix. You might instead see
/folder, with a slash. Maybe not a slash, maybe a
slash, but that generally represents a folder on the server. And sometimes there are, of
course, files in folders. So all of this stuff you're probably
familiar with on Macs and PCs and even Google Drive and the like. Those same semantics exist
in the context of URLs. So there's a mapping between this URL
and something on a hard drive somewhere on some server. All right. What about the other parts? So this is the fully qualified
domain name, so the full domain name. Even though you and I,
when we say domain name, we typically just mean this
example.com, for instance. So technically, the W-W-W is what
we would typically call a host name. A host name is like the name of a
specific server that lives somewhere in that domain. And this is just a human convention. Even though most URLs still probably
start with W-W-W dot something, that's not strictly required. That's just a configuration detail. And historically, this
was just to kind of signal to less technical people in particular,
when you would see a URL in print, that oh, this is a web address. This is an address on
that new world wide web. W-W-W just kind of connotes that. But decreasingly, do you
see websites using this? I mean, some of CS50's own
tools, it's just cs50.dev. It's just CS50.ai. Because most of us are now
conditioned to know that, oh, OK, that's probably a URL, even
though there's no explicit W-W-W. And in fact, even if you type the
W-W-W using tricks that we'll soon see, you can redirect the
user from one to another. Essentially, remove the W-W-W
or add it to the server, to the address bar in their browser. This thing here is called
the top level domain. And many of the domain names
that you and I are in the habit, certainly in the US nowadays, end in
.com, which stands for commercial, .edu stands for educational,
.gov stands for US government. But of course, there's hundreds of
country codes, too, that by convention are two letters. So .uk for the United
Kingdom, .jp for Japan, and two characters for every
other country in the world. But even those have kind of
been used in clever ways. So .tv, for instance, is actually a
country code that's been used by a lot of the English-speaking world
to represent television, for TV shows and the like. .ai, similarly, does not actually
mean artificial intelligence. It's a two character country code that
has been used by the world nowadays to represent AI. .ly for bitly and CS50.ly, too, that's a
country code that allows people like us to essentially buy domain
names in that subdomain. But long story short,
back in the day there only used to be a few of
these top level domains. Now there are hundreds of them. So I do think, over time,
it's going to become a lot less regimented as it seems to be
now as to what URLs actually look like. Lastly, beyond the :// here is
the scheme, or the protocol. And this just means
that this URL is going to be securely accessing the server
thanks to the HTTPS instead of HTTP. Mouthful. But just to get some
vocabulary out there. Questions on these here
URLs that we've probably been taking for granted for years? AUDIENCE: Who approves .edu? DAVID MALAN: Really good
question, who approves .edu. So you have to be in an accredited
educational institution to use .edu. I don't recall the name of the
organization that does this. But it can't be anyone on the internet. You actually have to apply
and be a seemingly legitimate educational institution. That is not true of a
lot of domain names. Anyone can buy a .com. Anyone can buy .org, a .net,
not a .gov, for instance. And then different countries
might have their own policies over who can be in what
domain or subdomain as well. All right. So now that we have
URLs so defined, there's a couple of verbs with which to be
familiar in the context of the web, namely GET and POST. And that is to say,
there's two different ways to request information from a server. That is, there's two different
ways to format requests that go inside of this envelope. And the default, daresay, and the most
common one is just what's called GET, literally the verb,
the English verb get. And we'll see in a moment what
this means exactly concretely. But just know that there's
an alternative that we'll play with over time known as POST. And whereas GET, as the verb suggests,
is all about just getting information, POST, as the verb kind of suggests,
is more about sending information. So POST is used when you
submit a credit card. Because you're sort of sending
potentially sensitive information. POST is used when you upload an
image to a website or the like, but GET is used when you're
just clicking on links and visiting web pages and not really
pushing any information to the server. So for today, we'll
focus primarily on GET. So what does this mean? Inside of this envelope, probably
unbeknownst to you up until now, is our messages that look like this. These are HTTP messages that
are being put automatically in these virtual envelopes for you
by your Mac, your PC, for your phone. So for instance, if you were to
visit HTTPS://www.harvard.edu, you would hit Enter. What your Mac, PC, or
phone is going to do is put a textual message
that looks literally like this inside of a virtual
envelope, address it on the outside to the appropriate IP address
for harvard.edu using your own IP address as the source address, and then
hand it off to some nearest router. But inside of this envelope is
enough information to the server to know what it is you want. So for instance, GET is the verb. So you just want to
get some information. The information you
want to get is /, which I defined earlier as just the
default page on the website. HTTP/2 just means what version
of HTTP we're talking about. You'll see nowadays in the
wild, 1.1, you'll see 2, you'll start to see version 3 over time. But I'll use 2 for all
of my examples here. And you'll see inside
of this envelope, too, what we're going to start calling an
HTTP header, a single line of text that literally tells the server what fully
qualified domain name it's looking for. And this is important only insofar
as nowadays, generally on a server, you might have multiple
websites being hosted. This is not going to be true
probably of Google or of Microsoft or Meta or massive companies like that. But it's definitely going to be
true of smaller enterprises, even places like Harvard that don't
need thousands of web servers, but maybe just a couple,
or maybe just a few. So in this case, this ensures that
when the server receives this packet, it knows to serve up
harvard.edu and not yale.edu or some other website that,
by coincidence, might just be hosted on the same server because
both Harvard and Yale are maybe paying the same cloud provider
to host their websites. So dot dot dot just means
there's other HTTP headers. But notice the colon here is just giving
us yet another one of those key value pairs. The key is HOST. The value is www.harvard.edu. There, again, are those
dictionaries that I claimed we would continue
to see all over the place. What then comes back from the server? If this is what's inside the
message from browser to server, what does the server send back? Ideally, the server
sends back a message that looks like this, an acknowledgment
of what version is being used, a status code, which is going to be
an arcane looking number, like 200. It's going to then have another
HTTP header of its own saying what type of content is
in this envelope, ideally, something called text/html. That is hypertext markup language,
which we're about to see. And then some other stuff. That's what's coming back from
the server to the browser. And we can actually now see this. Let me actually go over to VS Code here. Let me maximize my terminal window
just so we can see more at once. And let me go ahead and
type in this command, curl -I https://www.harvard.edu/,
so a complete URL that's secure, that's got the host name of W-W-W. And curl just means connect to a URL. It's a command line program that comes
with Linux, comes with Mac OS, Windows. You might have to
install it individually. And it just lets me
simulate being a browser,. It's going to let me simulate
sending a packet like this without caring what the
website actually looks like, so no pictures, no images, no text,
no nothing, just what's inside of the envelope in terms
of the server's response. And here's mostly dot dot dot, the
ellipses I raised my hand at earlier? There's a lot of these key value pairs. But if I scroll up to the
top, you'll see that 200 is the status code that came back. And you'll see that the content
type is indeed text/html. And there's a whole lot of
other stuff here, clearly. A lot of this is diagnostic. It reveals information
about the server that might be useful generally to
more technical people than me at this point in the conversation,
or maybe my Mac or my PC or my phone. For now, we can focus
really on just the essence of this response, which is this here. But here's where even these
arcane numbers might start to get a little more familiar, in fact. Suppose that I want to
see this in my browser. Actually, let me do this. Let me go back to VS Code here. Let me open up incognito
mode here, which generally is to give you
private browsing, so to speak. And we'll talk more
about this next week. In incognito mode or private mode, you
have no history, you have no cookies, you have no sessions, terms
we'll define next week. I'm going to use it
again and again today to make sure that my
browser is essentially starting from scratch, freshly, so that
I don't have anything in my history from previous examples. And what I'm going to
do, actually, first is open up, via my browser's
menu, so-called developer tools. These are going to look a
little different in Chrome versus Edge versus Firefox versus
Safari versus other browsers as well. But almost any modern browser,
whatever your favorite is nowadays, has built into it developer tools. And you might have to click a
different button to access it. But these are tools
for developers, like, web developers that want to not
just use the browser to go places, but use the browser to develop their
own websites and web applications. Now there's a whole bunch of tabs here. And I'm going to focus on
the Network tab initially. Essentially, this is like diagnostic
information, kind of like debug50, like a debugger. But it's specific to the web
and the web browser here. So with my developer tools open
and with the Network tab open, I'm going to go up to the URL bar
and type in https://www.harvard.edu/. So the exact same thing that I typed
in curl a moment ago in my terminal, I'm just typing in my browser
like I would normally do. And if I hit Enter, what's
interesting about developer tools, and let me go ahead and drag them
to the top and maximize the window, is you see all of the HTTP requests,
all of the virtual envelopes that just went instantaneously
it would seem back and forth between my Mac here and
Harvard's own web server. And notice it's way more
than a single envelope. It's way more than a single request. Why? For now, assume that each
of those rows of output represents maybe a sound
that was downloaded, a video, an image, some text. There's all sorts of media
in web pages nowadays. And they might actually be
spread across multiple files. Browsers are designed, if
you will, to recursively get all of the media for a single web
page and download it automatically with we humans only typing
the URL itself once. But watch this. At the very top of this
output, I scrolled all the way to the top of my network tab. I'll see a request,
a row that represents my original request for the website. And if I Zoom in here, we'll see
that 200 means apparently OK. So all is well. Here's the contents of the website. But there's a lot. In fact, if I look at the
very bottom of the window, harvard.edu is composed of 91
separate files it would seem. And that's just the
landing page itself, not to mention everything else
we might click on ultimately. But 200, OK, is a good thing. And odds are you've never actually
seen that, because it's, indeed, OK. So let's consider
actually what else could happen when you make these requests. Well, here, for instance,
is a shorter request. Suppose that I omit the W-W-W
just because it's faster to type. And honestly, you and
I are almost always, nowadays I bet, in the habit of just
typing something.com, or something.edu. We don't bother typing the HTTPS,
the so-called scheme or protocol. We probably don't
bother typing the W-W-W. You can probably think
of someone in your life who's very pedantic like that,
typing it out in its full. But you don't need to do that
typically for a couple of reasons. If I, in fact, go back
to VS Code here, let me use curl again to connect
to another URL that's similar, https://harvard.edu. Now notice before I went to W-W-W. And
that's indeed Harvard's preferred URL, if you will. But harvard.edu will still work. But watch what happens when I hit Enter. I'm going to get back the
contents of the virtual envelope that Harvard just sent back to me. But it's not OK. It's not 200 anymore. It's actually this
number here, 301, which actually means something specific. 301 actually means that Harvard's
website moved permanently, so to speak. In other words, Harvard,
Yale, any server can configure itself to redirect
the user to another place if they prefer to canonicalize
on some other URL. So by default for branding
purposes, most websites still probably use www.something.something. So Harvard is, in fact, doing this. And for reasons we'll
talk about next week, there's technical motivations
to do so related to something called cookies and sessions. But for now, that just seems
to be a different status code. But if I now open up another browser
window and I'll do this again in, let's say, how about incognito mode,
just to start fresh with a brand new window. Let me open my developer tools again. Let me go to the URL bar and only
type https://harvard.edu/ Enter. I'm still in my network tab here. And if I scroll to the very
top of this, notice, ah, the top row looks a
little different now. It's not 200 anymore. And I can click on that here. And what I'm now seeing in yellow
is that 301, AKA, moved permanently. So this is to say you've been able to
do this all this time in your browser if you care to. You can see what's going on
underneath the hood, if you will. Check that off, I think. Underneath the hood so as to
just understand what's going on. Now for users, this is not that
useful or intellectually interesting. But for developers, this can be
very useful for understanding things and also diagnosing problems ultimately. So that's just a couple of the status
codes that can come back, not just 200, but perhaps 301. There's also this one now, with which
humans generally are familiar, 404. Well, it turns out 404 is what
happens when a file is not found. So I can simulate that here. Let me go back to VS Code
and my terminal window. Let me do curl -I https://www-- because Harvard prefers
that-- harvard.edu/cats. Let's see if there's a page about
cats within Harvard's website. I'm pretty sure there's not. And so, indeed, when I hit Enter, a
whole lot of output, a lot of HTTP headers. But notice at the top, 404. It's File Not Found. Now what you see in the browser is going
to completely depend on the website. Some websites just display an error
message or a status code number. And that's why you and I have seen
probably in the world 404 messages. Sometimes they're much
more user friendly. Sometimes there are links back
to the home page to help you out. It's entirely up to the server. But that status code indicates
that something has gone wrong. And in fact, there's a whole
bunch of these status codes. Some of which you'll now
start to see in the class. 200's OK. And it's a good thing
if you never see that, because it means everything's working. 404 is not found. 301 is moved permanently. Any of these that start
with 3 relate to redirects. Long story short, there's different
ways to redirect the user from one place to another, as we saw from that
location header a moment ago. 400s are generally bad. It means that the user, the browser
somehow did something wrong. Like, 403 forbidden probably
means you're not logged in. 500 you're going to start
doing next week most likely. 500 is, like, the segfault
of the web, if you will. So there's no pointers
or anything like that. But 500 means that you wrote some
buggy code, as invariably we all will next week. 418 is an April Fool's
joke from years ago. Some servers honor this. But someone wrote up literally
this long technical document proposing a response that says
I'm a teapot for a server, even though it was just a joke
on April 1 some years ago, so sort of geek humor, if you will. So those are then the status
codes that are available to us. Let me show you one other. Has anyone been to this URL here? So you have? All right. So without spoiling
here, let me actually-- well, let me go into
incognito mode here. Someone's pulling it up
on their phone, clearly. Safetyschool.org/ Enter. Oh, my goodness. Another box gets crossed
out today, too, I think. So how is that working? Well, if we actually diagnose this
with curl-- let me go into VS Code, curl -I HTTP-- and it doesn't support
HTTPS because this is an old website-- ://safetyschool.org/ Enter, all this
server does is return an HTTP 301 response with a location that
literally refers us back to yale.edu. And this is amazing. Someone has been paying for
this domain name for decades. And all it does is literally this. Now I know for our friends at
Yale who are watching this, it's not quite fair to poke fun. It turns out Yale got us even better. So later today, we'll turn
the tables a little bit. All right. So let's go ahead and
take a look now at what it is that composes this web
page when it is indeed 200 OK. Let's introduce another language
here, or an actual language called HTML, which is not a programming
language but is a mark up language. Which is to say it's all
about aesthetics, like, mocking up a web page so that you can
see the information you care about. But HTML is not going to have
functions and loops and conditionals and all of that stuff we
talked about in Week 0 It's just about presenting information. So here are some of the
building blocks of HTML. You're about to see really
only two vocabulary words. HTML honestly is the kind of language
that you learn in, like, 30 minutes and then you're just kind of off
and running with online tutorials, documentation, and the like. I still remember years
ago just learning it from a teaching fellow who
kind of gave me a crash course and then you kind of fill
in the blanks yourself because it has relatively few
concepts associated with it. Even though, in fairness,
it can take years to get good at making
pretty websites, today we can get good very quickly at
making functional websites, so that artistic disclaimer. So in the world of HTML, there's really
two concepts, tags and attributes. And those of you who have
played with websites growing up might be familiar with
some of these already. So here is some sample HTML. HTML is just a text-based language. You type it out with your keyboard. Again, it's not a programming language. So you can't call
functions or write logic. But you can mock up a web page. And this web page, for
instance, is quite simply going to say hello, title in
its title bar, or the tab. And then the body of
it, the big white box, it's going to say hello comma body, just
to distill this really into its essence before we make more interesting pages. So what's going on in
this HTML is enough detail that the server can display
the information for it. So in fact, let me go ahead
and reveal this as follows. I'm going to go over to VS Code here. I'm going to create a new file
here called, for instance-- let's just call it hello.html. And I'm going to really quickly whip
up that same web page from memory. So DOCTYPE html html lang equals
quote, unquote "en" close bracket. Open head, open title,
hello comma title. And then down here, open body. And you'll notice I'm actually not
quite as fast as I might seem to be. VS Code is configured to automatically
finish half of my thought for me. So when I open one of these things
that we're about to call tags, VS Code is doing some of
the heavy lifting for me. And in here, I'm going
to do hello comma body. But I think this is the
entirety of the file that I just proposed in
the slide version thereof. So this is clearly now a text file
in my code space within VS Code. How do I actually view
it with a web browser? So if this file were
created on my Mac or PC, I could literally double click it
and Chrome or my default browser would open up and show me this web page. But this file, technically,
is not on my Mac or PC. It's in the cloud. It's in your code space. So all that we need to do is
actually turn on a web server to serve this file to me or to
anyone else in the world, in fact. And the command we're going to run
now is literally called http-server. This is a piece of
software that someone else wrote that we pre-installed
in everyone's code space. And by running this, it starts
a server whose purpose in life is to listen for HTTP requests. And as soon as it receives
one from a browser, be it mine or anyone else's, it will
respond with the contents of that file. So let me go into VS Code here. Let me reopen my terminal window. And I'm going to go ahead and
literally run http-server Enter. And now you'll see a whole
bunch of output, most of which isn't germane to our discussion yet. But here is this URL here. And if I hover over it, I'll
see a little Open URL pop up that I can click on, or on my Mac, I
can Command click on the URL itself, and that will open up in
a new tab this folder. So this is going to look a
little esoteric at first glance. But this is what's called
a directory listing. It's just literally the contents
of the folder that I'm in. So I'm in my Codespaces default folder. I deleted everything from
last week and weeks prior. Your folder will, of course,
have many other things that you've created and kept. I have a Source 8
directory that I downloaded in advance because it's got all of
today's examples made in advance. But there's the file I just created. And there's some other information
here, like the date and time at which I created this file, and so forth. But you'll see that this is just a
web page that lives at this URL here. And this is actually somewhat
specific to Codespaces, the infrastructure we're using. But if I Zoom in up here,
you'll see that I am effectively running my own web server
at this weird looking URL that GitHub dynamically
generated for us, for me. And you'll have a different
unique one as well. You'll see that baked into this
URL is actually a port number. And they're doing some trickery. Normally, I would have to access
this web server at Port 80, or 443, or even 8080. And the reason for this
is because cs50.dev, that is to say Codespaces, the
tool that we're using in the cloud, is obviously itself
already a web server. And it's GitHub's web server that's
listening already on Port 80 and 443. So if I want to run my own web
server on their web server, I just have to pick another port number. And so what you're seeing in
the URL here is a hint of that. By convention, the program I just ran,
http-server, does not try to use 80. It does not try to use 443. It uses 8080 by default. And that's
why you see it in the URL here. And underneath the hood, that virtual
envelope actually contains Port 8080. Because this is not an
official web server. This is not CS50.dev or GitHub.dev. This is little old me trying to serve
up my brand new hello.html file. But the point here is this. When I click on this file, I should
see the results of my hard work. And there is a big white box, otherwise
known as the view port, inside of which are the only words in the
body of my page, hello, body. And if I scroll up further, you'll
see in my tab here hello comma title. So this now maps back
to the code we just saw. Here is the HTML that I just
pulled up in my browser. And it is what told the
browser what to do visually. So let's walk through
this top to bottom. This first line here is what's
called the document type declaration. Honestly, you just copy
paste this nowadays. And it means hey, browser,
I'm using version 5 of HTML. Odds are in some number
of years, this line might change over time to
indicate different versions. But for now, this just means I'm
using the latest version of this HTML language. That's kind of anomaly,
because you're not going to see this exclamation point again. Everywhere else, you're going
to see a lot of less than signs and greater than signs or
angled brackets, so to speak. But they're almost always going
to be symmetric, as follows. This tag here, this is an HTML tag,
says, hey browser, here comes my HTML. And this is what's
known as an attribute. So anything after the name of a
tag is what we'd call an attribute. And attributes can have values. Those values that are associated with
the attributes with an equal sign and typically quotation marks,
single quotes or double quotes, as in this case. So here we, again, have that paradigm
of a dictionary, key, value, pairs. They're everywhere in computing,
even though the syntax obviously keeps changing, whether when we're
in SQL, or Python, or now HTML. This tag at the very bottom now means
hey, browser, that's it for my HTML. So when you see a tag
that looks like another, but starts with a forward slash-- and you do not need to repeat
the attributes, that would just be very annoying to have to
type it here and here, we keep it succinct-- this is what's known
as a close tag, or an end tag that conceptually corresponds to
this start tag or open tag. So they're sort of symmetric. Inside of that are two
children, so to speak. So there's actually a notion of a family
tree-type hierarchy here, or a tree, as we've discussed in data structures. The HTML tag, per the
indentation here, has one child called head and
another child called body. Everything between the
start tag and an end tag here is what's also generically
known as an element. So this is the head element. This is the body element. A bunch of new vocab, but it's not
that intellectually interesting. It's just jargon that we'll use. Here means hey, browser, here
comes the head of my page. So like the very top of
it, which generally for now means just the title bar. In fact, this means, hey, browser,
here comes the title of my page. And then here, notice there's
no more angle brackets. This is literally raw text. And this is why we saw in the actual
gray tab of my browser hello comma title. This means, hey, browser,
that's it for the title. This means, hey, browser,
that's it for the head. Meanwhile, down here, hey, browser,
here comes the body of my main page. Like, 90-plus percent of the page
inside of the so-called viewport, the big rectangular region, hey,
browser, here comes the body. Hey, browser, sir,
that's it for the body. What is in the body? In this super simple case,
literally just hello comma body. That's it. So HTML really is that pedantic. It just tells the
browser start doing this. Stop doing this. Start. Stop. Start. Stop. And that's how it knows
what to do, top to bottom, left to right when actually
reading the code therein. All right. Questions about any of
this here HTML code. And yeah, in front? AUDIENCE: Would browsers be
considered a HTML interpreter? DAVID MALAN: Say that again? AUDIENCE: Would browsers be
considered a HTML code interpreter? DAVID MALAN: Oh, yes. I think that's fair. The question is, can browsers
be considered HTML interpreters? Yes, I don't think people
tend to call it that. Interpretation generally
implies that you're parsing something that's logical
in nature, your functions, loops, conditionals, and so forth. Parser is a term you might
indeed hear much more often. A parser is a piece of
software that analyzes code, analyzes text top to
bottom, left to right, breaks it down into chunks that have
semantic meaning, like the tags, like the attributes, like the
elements that we're talking about and then it displays them, in this case. There's not as much to
interpret in quite the same way. But that's reasonable, nonetheless. Yeah? AUDIENCE: With all
the frameworks, do you think is is worth
learning HTML from scratch or just use a Bootstrap [INAUDIBLE]? DAVID MALAN: Really good question. With all the frameworks
out there, should you bother learning HTML and writing it
from scratch or using frameworks, like something called Bootstrap. Well, we spent a few minutes today
talking about that very framework. But even frameworks like
Bootstrap absolutely assume that something
about HTML, something also about something called CSS, more
on that in a bit, and better still, something about JavaScript. If you really don't want to know
and understand these things, that's when you reach for
like a third party service, like Squarespace nowadays or Wix, where
you really just click and drag and drop and create websites that are, at
the end of the day, still HTML. But the developers at
Wix and Squarespace have automated the process
with a graphical user interface or GUI of letting you create it. But even then, most web developers,
or even just business people who want to create their
own website and they're not programmers themselves
or technical folks, they might still like to know a
little something about HTML, CSS, and JavaScript because then you
can open like the advanced settings and configure things. And indeed, that's a
frustration that you'll tend to feel if you can't quite drop
down conceptually to that level. All right. So just to make this a little more-- to give you more of a
mental model for this, this indentation is
not strictly necessary. Kind of, like, in C, where we
care, where style50 cares, but not Clang, about what your code looks like. Similarly, browsers are pretty tolerant. You can have all of this white space,
all of this pretty indentation. Or you cannot. It's not going to care,
generally, one way or the other. However, this is certainly
much more readable. But we'll see next week as we start
to generate HTML automatically, it's not always important that the
code you generate be pretty printed. But when you're writing in
this format, it absolutely should be when you're collaborating
or submitting to other people. So this, though, is what we would
call a tree representation of this. So here is that hierarchy. So if we think of the whole web page as
what's generally known as a document, that document has a root element
called the HTML element, which it's open HTML tag and its closed tag. It has, as I claim, two children. The head tag has one child title. And then both of those
leaf nodes, or leaves to borrow the family tree vernacular,
have text nodes of hello, title and hello, body, respectively. So this is going to be useful
later today because it turns out, with JavaScript, an actual
programming language, we can start to modify this tree
in the computer's memory or RAM and make the page dynamically
change by essentially creating new HTML on the fly, even
if that didn't come from the server. Case in point, many of you
use Gmail or maybe Outlook. Generally speaking, you
don't have to reload the page to see if you've got new mail. It just magically appears at the
top of the page in kind of a stack. And it just keeps pushing
old mail down, down, down. Well, that's going to be the
result of some JavaScript code updating this tree in memory. And it has the effect of
just dynamically generating more and more HTML that represents
your email's inbox, for instance. All right. So with that said, why don't
we go ahead and actually try this out in a couple of ways. So let me go back to VS Code here. Let me propose to actually
tweak my code here a little bit. So let me go into, let's
see, my VS Code editor here. Let me zoom out. And notice down below,
actually, all this time as I was clicking on hello.html,
my HTTP server program actually is outputting sort
of the logs from a server. It turns out any time you request a
page with a browser from a server, that server is probably logging
a little something about you. One, it's probably
logging your IP address. Two, it's probably logging
the type of browser you're using Chrome, or Safari,
or Edge, or something like that. It's probably logging the operating
system version you're using, be it Windows, or Mac OS, or
Android, or iOS, or the like, and maybe some other
information as well. We won't dwell on this today. But there's a lot of information that
will be logged about you, even if you are in incognito mode or private mode. So more on that next week. And today, unlike all past
lectures, even though by default you see this in your own
code space, you see here a ports tab, which for the most part
is not that useful for us today. But you will see that this
row here mentions HTTP server. Why? Because in my terminal, that
command is still running. It is a server. And it's just there living to serve
now by waiting and waiting and waiting for me to click on more of those links. And every time I do click on a link,
I'll see another line of output here. But it turns out that all this time
in your ports tab of VS Code, you can see all of the TCP ports,
for instance, that are in use. Now generally, you haven't needed any
of those, at least for your own work. But notice that HTTP server is
indeed listening on Port 8080. CS50 has some of its own customizations. And this is a bit of a geek Easter egg. But we presume to use Port 1337,
which perhaps those more comfortable will know what it means. This is like leetspeak. So it actually spells Leet if you're
cool and use a 1, 7, and 2, 3. OK. So anyhow, we chose that port number. But there are some conventions. Next week we're going to actually
start using Port 5,000, which isn't in use at the moment. But long story short, you can see
this stuff underneath the hood. And indeed, we're just
sort of peeling back some of these layers that have
been there now for some time. Well, let's go ahead and do this. I'm going to go ahead and create another
terminal window using my plus icon down here in the console. Notice that at the right-hand side of
my screen, I now have two bash shells. Bash is the name of your prompt, so
to speak, where the dollar sign is. If I click on the first
one, there's HTTP server. It's still running. And I want it to keep running today. But I'd also like to be able to
run more commands in my code space. So I've simply created
a second terminal. And I can go back and
forth by clicking it right. Let me go ahead now and copy hello.html
like that and create a brand new file called-- how about paragraphs.html? And in paragraphs.html, I'm
going to first paste all of that. I'm going to hide my terminal window
now without stopping HTTP server. And I'm going to go ahead and just
create some paragraphs of text. And in fact, let me go ahead
and cheat here real quick. I'm going to go ahead and, in my
other window here secretly, open up a whole bunch of text so that I can
grab some Latin-like text to copy paste. So now I'm back. And all I did was secretly copy
paste a whole bunch of text. I'm going to make a couple of changes
to this file, where I currently have just a title and a body. One, I'm going to rename this to
paragraphs, just so I can keep straight which file is which. And down here, I'm going to go ahead
and paste in a big paragraph of text. This is not actually Latin. It's sort of lorem ipsum text, which
is Latin-like random words that's meant to look like Latin. And typographers historically
used this as sort of placeholders for actual text. But notice this is a pretty
decently long paragraph. And so it's going to make
my web page a bit bigger. So let me go back to my other tab, where
I have hello.html open from before. Let me click back. And now notice, in my directory listing,
I have a new file, paragraphs.html. Let me go ahead and open that up. And voila, there is a
big paragraph of text. Just for fun, let me create
three such paragraphs. So I'm going to cheat temporarily and
just copy and paste two more times. But I'm going to separate
it with a blank line, as you would in, like, Google Docs
or Microsoft Word for paragraphs in English or any language. And I'm going to go
back to my paragraphs. Nothing has changed yet because HTTP,
just like the exercise with Phyllis and Brian, requires that we send
the packets back and forth if we want to get updated content. So I have to click my browser's reload
button, or hit Control R or Command R, depending on your browser or OS,
and notice that when I do that, I definitely get more text. But it just looks like one big
blob, not three separate paragraphs. What might your
intuition be for why that is, even though I've clearly indented
this and given blank lines between? Yeah? AUDIENCE: HTML doesn't
care about the whitespace. DAVID MALAN: Yeah. So HTML doesn't care about
the whitespace or technically, more than one whitespace. I can hit as many Enters as I want. All of them are going to be
ignored except for a single space. It's going to be normalized
to just a single space. In general, this is useful. Because it means I can pretty print
my HTML and indent things visually, even if I don't want the browser
to indent anything manually for me. But here's where we're going
to need some more tags. And it turns out the
simplest fix for this problem is to use the paragraph tag. And for short, it's just
open bracket p close bracket. I'm going to be a little
pedantic, and even though VS Code is being a little annoying because
it's trying to autocomplete my thoughts but I don't want it to
autocomplete just yet, sometimes you have to
fight with the text editor. So these autocomplete features
have upsides and downsides. But I'm going to go ahead
and put a paragraph tag, open and close around
each of these paragraphs. And I'm going to maintain
my indentation, just to keep it visually clean on the screen. And now I'm going to put this one
last close tag on this line here. And so it's a lot more verbose. But notice that it's effectively
telling the browser start a paragraph, end a paragraph, start a paragraph,
end a paragraph, and so forth. So if I go back to my other
tab and I click Reload, now we have some semblance
of what I expected, which is three separate
paragraphs in this case. All right? So that's the p tag, the paragraph tag. P for short, because as you'll
see, many of these tags are abbreviated just because
they're slightly faster to type. Let's do another example. Let me go back to VS Code here. I'm going to copy this text. I'm going to create a new file called-- how about headings.html? And I'm going to paste this, close my
terminal just to give me more room. I'm going to rename the
title to be Headings, just to keep straight which is which. I'm going to delete all of these
paragraphs to make it-- actually, no, let's not do that. Let's keep the paragraphs. But like an academic
paper or a textbook, let's give these chapter headings
or section headings or the like. Well, I could just do
something like this. How about 1? And then down here I could put 2,
and then down here I could put 3. But of course, if I reload this, it's
not really going to look as I-- whoops, if I go back to this directory listing,
open up headings.html, it's fine. It's not super pretty. But it would be nice to give a little
more prominence to these headings. And in fact, there's a
bunch of tags for this. I can use H1, for instance,
for one really big heading. And then let me close the
tag over here and indent. Then down here-- and, again,
whitespace doesn't matter, so I'm going to give myself a little
bit of breathing room just so it's clear which of these is which. For this, maybe it's not
Chapter 2, but Section 2. So let me do H2. And then inside of this, I'm
going to go ahead and do 2. And just to be clear, I don't have
to put these on their own lines. I'm just doing that
to be a bit pedantic. You can technically just do this
and keep everything on one line. But I'll be consistent, at least. But either approach is fine. And then, down here, I'm going
to use maybe a sub subsection. So let me delete this and do h3. I'm just going to write the word three. And then just to be neat, I'm going
to indent everything like this here. So now if I go back to
headings and I reload, I'm going to get some
default formatting. It might not be the
formatting you want, but it looks like it's big and bold,
but in decreasing order. H1 is the biggest. H2 is smaller. H3 is even smaller. And you can go down to h6. And it gets smaller and smaller. And at that point, if you've
got, like, sub sub sub sub subsections of your book or paper,
you're probably organizing it poorly. So they stop at some point there. All right. Well, what else can we do in HTML? These things are omnipresent. Let me copy this HTML and close
that tab, open my terminal, and create a new file,
like, code list.html. And let's make a list of information. Let me just paste that HTML, just
to save some time today, and change my title to list. Let me get rid of all of these
paragraphs, just to simplify things. So now I'm sort of
back to where I began. And then inside of the body of this
page, let me go ahead and make a list, like foo, bar, baz. If you've never heard these
words, these are, like, computer scientists go-to words. A mathematician might choose
x, y, and z by default. CS people tend to go with foo, bar,
and baz for historical reasons. So here's a list of
three arbitrary words. If I go over to my other tab,
go back to my directory listing, there's my new file. Let's click on list.html, same problem. It's a list. But it's not one after the other. Last time, of course, we
fixed this with paragraphs. But you know what'd be nice? To make it a little prettier,
like a bulleted list, which are kind of everywhere these days. So I could try to simulate this. And you might be in the habit
of doing this in some programs. But of course, if I go back
to my other tab, Reload, I'm just sort of making
the problem worse visually. But it turns out-- let me undo that-- there is an
unordered list tag, otherwise known as ul for short, that
I can put all three of these words in an unordered list. Let me go ahead and indent
everything consistently. But to have three items
in this list, I actually need another tag, a list item tag. And I'm going to go ahead and add that
tag there, list item here and there, and then another list item tag here. And here's where it's
a stylistic choice. I could move foo and bar and
baz onto their own lines. But this is going to start to
get excessively tall, like, too much white space. So reasonable people will disagree. But this feels a little
more readable to me. So I'm going to leave it as such. Go back to my other tab. And now when I reload, you get
a nice bulleted list by default. And you see these all over the web. What if I want to have a numbered
list, that is to say, ordered list? Any instincts for changing
these bullets to numbers? So ol is a good instinct. And, indeed, sometimes
HTML makes perfect sense. As in this case, if I change ul to ol, I
don't have to manually number anything. Because when I reload, it's going
to use Arabic numerals automatically for me like this, top to bottom. And what's nice about this is, if I go
in and I insert things in the middle, I don't have to manually
renumber things. The browser is going to
do the counting for me. And if you're doing an
outline, you can actually specify whether you want
1, 2, 3, or A, B, C, or I, double I, triple I, or so forth. There's different numbering
systems you can use. But by default, we get
our decimal numbers here. I'm going quickly. But it's hard to get too excited
about bulleted lists and such. But any questions on
these tags thus far? We'll by design try to
escalate quickly momentarily. All right. So how about just a few other tags to
make things more visually interesting? Let me go ahead here and
cheat by opening up a file that I made in advance that's going to
demonstrate what a table looks like. So here let me open a file that I
brought with me called table.html. And because I brought it with me, I
actually included a comment at the top. And in fact, if you download
today's files from the website, you'll see that they're
generally commented, like our C code and Python code was. It's a little weird. But here is the syntax
for a comment in HTML. It's a less than sign, or open bracket,
then an exclamation point, then dash dash, two hyphens. Then at the very end of the comment,
it's almost the opposite but not quite. It's hyphen hyphen
close bracket instead. Why these symbols? Humans probably decided
years ago that there's no way someone's going to accidentally
type or rather, intentionally type those characters visually. So let's use them for
comment symbols as well. If you really want to type them,
there is a way around that. But here is my table title. And here is just kind of a
little, maybe, guessing game. Here is a table tag with a tr child. And here's the closed child. And then there's a bunch of td tags. So I'll give you tr
stands for table row. td stands for table data,
AKA cell, to borrow language from, like, spreadsheet software. Does anyone want to
guess what this file is going to look like if I open
table.html in my browser? What is this reminiscent of? Yeah? AUDIENCE: Num pad. DAVID MALAN: Yeah. So it's like a numeric
keypad from a phone, for instance, if you're dialing
someone's number manually. So let me actually go to my other tab. Go back to my directory index. There's table.html. And it's not going to look very pretty. But it is structured in
the way I might expect. And in my browser, I'm going
to go ahead and just zoom in. Command plus or Control
plus will generally do this. It does look like it's laid
out tabular in rows and columns with everything very nicely aligned. So that might be useful as we get
to larger and larger data sets. Let me go back to VS Code here. Let me create one more
program, for instance. And how about code image.html? And just to save time,
let me paste that code. And also, let me
secretly copy over a file that I brought with me that
we've seen in the past. Let me close my terminal. I'm going to delete everything
about tables from this file because I'm just saving
time by copying and pasting. But I'm going to rename
the top to image. I'm going to get rid of the comment
because it's no longer applicable. But in the body of this page, I'm going
to link to maybe an image of the Weeks bridge by the river. So I'm going to use an
image tag, img for short. And now, huh, it's obviously not going
to be sufficient to just say image tag. Because what image? So here is where attributes,
again, get useful. This attribute earlier, though
I didn't quite highlight it, seems to indicate that this page
is largely in English, as have been my past ones, the Latin one aside. That attribute on the HTML tag is useful
for browsers that have Google Translate or something similar built in. And also, it's useful for SEO,
search engine optimization. Because when Google and
Bing sort of automatically crawl my web page in the future,
they'll know what language I intend for most of the content to
be in, which might help them index it and keep track of
it for search results. So here, for the image tag, I'm
similarly going to need an attribute. And that attribute is called
source, src for short. And what you put inside of its
quotes for its value, double quotes or single quotes, is the name of
the image that you want to include. And I include it in
advance in my code space, a file called bridge dot ping from Week
4 when we played around with images. And if I go ahead now and go to my
other tab, go back to my directory index and zoom out, you'll see
now not only bridge.png, portable network graphic, which
I manually copied in, but also image.html, which I just created. And voila, here is
that same Weeks bridge. It's a little too big
for my browser window. We'll see in a little bit how
we can fix things like that. But indeed, that's an image
that's now embedded into the page. But notice, if this
image were ever broken, or if I had visual difficulties
such that I might have screen reader software for accessibility
installed, it's generally good practice
to also make sure that pages are accessible as possible. And so some tags have additional
attributes you can include. Like, for an image
here, there's actually an Alt attribute that
specifies alternative text to describe this image. This is what a human
would see if they have a very slow interconnect connection. And before the image downloads,
they can see this alternative text. Or if I'm blind, I
need a screen reader, I could have these words recited to
me verbally by providing this clue. So it's best practice to include
this, like, photo of bridge so that all users can know what they're
looking at, clicking on, or the like, so keeping that in mind, too. All right. Let's do one other piece of multimedia. Let me close these two tabs. Let me open my terminal and open
up a file called video.html. Let me go ahead and copy,
secretly, a file called video.mp4, which is a common video file
format, and close my terminal window and go ahead and paste in
here some HTML from before. But let's now embed a video file, as you
might if making a video-based website. Let me rename this one, too, to video. Let me get rid of the old
comment, which is not applicable. And it turns out videos
are almost as simple. There is a video tag. There is a bunch of different
attributes we can put on that. But I'll come back to that in a moment. But videos, because you might want to
have high resolution, low resolution, depending on people's bandwidth,
because these things can be big, they actually have source children. And confusingly, it's actually
S-O-U-R-C-E, not S-R-C, in this case. And even more annoyingly, it takes
an attribute called source.src. This is not good design. But this is what we're
stuck with, video.mp4. And then the type of this
video, which you could generally look up if the browser doesn't
recognize it, video/mp4. This is what's known as a
content type or mime type. And then, I can actually configure this. And you would only know this by
taking a class, reading a book, looking at an online reference. I can actually add some video
controls to the website, like a Play button, a Pause
button, and all of that. I can mute the video
by default. And so this is just going to modify the
behavior of this video tag. But this is anomalous. For some attributes, it just
doesn't make sense to have values. Because muted, it sort of says
all the information we need. We could do, quote, unquote, "true." But humans decided years
ago not to bother with that. So some attributes do not need value. So you do not need equal
signs or quotation marks. And you would only know this
from, say, documentation. All right. Let me go back to my directory listing. Let me go back here to this here. You'll see that there's now not
only video.mp4, but also video.html. I hope you'll forgive me for this. There's at least no sound. But when I click on this
page, it embeds a video here, which I can then click
on the controls for. And you see some short video file
playing here, albeit without sound. All right. None of that, let me go
back here to my VS Code. And let's play around now with
what the web is really known for, which is hyperlinks. So hypertext markup
language, HTML, is all about linking one site to
another, one page to another. And nothing we've done
thus far is interactive beyond this own video controls. So let me go ahead and do this. Let me go into VS Code here. And let me go ahead and
create the simplest of files that just allows me to click on a link. So let me go ahead and
copy this to save time, open up VS code's terminal window. Code a file called link.html. I'll close my terminal. Paste this code. Rename video to link. Get rid of the actual video tag. And in the body of this page, let's
do something simple like invite people to visit, for instance, Harvard. All right. If I now go to my directory index
and reload, we'll now see link.html. And of course, this doesn't
really do anything useful, because I literally
just used English text. All right. Well, what if I do what
you're in the habit of doing on social media and various
websites, visit harvard.edu. Let me go back to the web page, reload. The text changes. But it's clearly not
automatically linking. I still can't click on this. All right. Well, maybe it needs
to be www.harvard.edu. Let me go back, reload. All right. Still not auto linking. Let me go over here. And maybe it needs https:// and a
slash at the end, like a full URL. Let's go over here, reload. And it's still not working. I can highlight and copy it, but
that's not very user friendly. So what's going on? Well, all of today's social media
sites, when you copy paste a URL, someone at the server
side wrote code, be it in Python or JavaScript
or anything else, to automatically notice
and detect URLs and then wrap them with HTML tags
that actually hyperlink them. So what I actually need
to do here is this. I'm going to introduce an
anchor tag, a for short. The hyper reference attribute
of which is the URL that I want to send the user to, so href for short. I'm going to close the tag. But then, in between the
start tag and close tag, I'm now going to put the text
that I want the human to see. So it's a lot more verbose. But this is what websites
like social media sites are generating automatically for you
when they just detect with a pattern that you have typed something
that indeed looks like a URL. Let me go back to VS Code. Let me go back to this
tab here and reload. And now we actually see a working link. And this is going to be super small. You're not going to be able
to see this quite well. But if you hover over this link,
you'll generally see in most browsers a little clue at the bottom
as to where you're going to be directed before you click there. This can help if you're
a little suspicious and might not want to
click on the actual link. It's small on my screen, but
hopefully more visible on yours. That's not generally the case on
mobile in quite, though, the same way. But notice that this very simple
primitive of anchor tags like this can pretty quickly be
abused, unfortunately. In fact, let me go ahead
here and go back to VS Code. And I could do something
malicious like this, like, actually trick someone into
applying to Harvard instead of Yale by just changing the href to not match
the text that the human is seeing. And if I reload the
page here, you'll see that it looks like I'm going to Yale. But notice, super small,
bottom left-hand of my screen, it still says the real URL. But you can get even more malicious. You can not just say Yale. You could literally say
https://www.yale.edu/. You can make it look like
a real URL, reload it. And now it's really quite malicious. And this is representative of what you
all probably know already as phishing attacks, P-H-I-S-H-I-N-G, whereby
you're being socially engineered. People are trying to dupe
you into clicking something that leads you to your
PayPal account, typically, so that you log into some bogus website. Now you've given them access to your
account and you're out some money. It's this simple because
of, unfortunately, these building blocks of HTML. All right. With that said, any questions on this? No? All right. How about just for one final flourish
before snacks will be served, let me propose to introduce
some final features herein. It turns out, and I'll open
some of these premade already. Let me open up VS Code and open
up a file called meta0.html. This has nothing to do with
Meta, the social media company. It has to do with metadata,
or specifically, meta tag. It turns out that in the head of the
web pages that we've written thus far, we've only had titles. But it turns out there's
actually literally a tag called meta that has a couple of
attributes like name and content. And this one here, it's a little
arcane, but it's very common to copy paste these into
the source code for websites nowadays because essentially,
this makes them mobile friendly. Instead of making the font
some default small size, it will take into account
the width of the phone or the tablet and sort of
scale the font proportionally. So there's some useful accessibility
and user friendly tips like this. There's other use cases
for meta tags like this. Let me open a file called
meta1.html that I made in advance. Here are three meta tags
inside of this file. They're using a property attribute
with a content attribute as well. And this is a little more specific. But nowadays, too, on social
media, when you copy and paste a URL into a message
online and hit Enter, you very often see a
preview of that link. It's sort of automatically generated. It makes a nice pretty
image and some nice fonts. Where does that image come from? Where does that information come from? From these meta tags, any web
page can have meta tags like this so that when this page's
URL is copy pasted into social media sites
or others, those sites know what preview to show to humans. It comes literally from
the values of these tags. So for instance, this would
create some user friendly preview that says CS50, Introduction
to The Intellectual Enterprises of Computer Science and
The Art of Programming. And in this case, it would
show a picture of a cat as the default image for
that particular page. You have full control as a web
developer over those kinds of things. Lastly, when it comes to features
of HTML, let's go ahead and quickly reimplement Google, if we may. So let me go ahead and create a
new file here called search.html. Let me copy paste some
code to save time. Let me go ahead and get
rid of all of these meta tags to make a different
point with this one. Let me get rid of that comment. Change this title to
be, say, search instead. And inside of the body
here, let's do this. I'm going to introduce a form tag. And now in the form tag, I'm going
to create an input, a text input. And let's go ahead and
let's just say that. And now I'm going to
have a button that has, let's say, button, that has a value
of search, so super simple and not yet complete. But let me go to my
directory index and back. Let me open up search.html. And I actually have the
beginnings of a search form, an interactive form for the web. But it doesn't actually
do anything useful yet. But let me do this. Let me go to the actual google.com. Let me search for something
like cats, C-A-T-S. And of course, we're going to
see a whole bunch of cats here. And we're going to see that the
search box was automatically populated at the very top of the page. Now the URL that Google
led me to, even though I started at the very simple
google.com, is actually pretty long. And I'm going to frankly just
delete anything I don't understand. Because I'm going to distill
this URL to just this one here. It turns out that in URLs
you can also put user input in the form of key value pairs. So in any URL, you can
actually have not only a path like we saw earlier, you
can have a path with a key and a value prefixed with
a single question mark. And in fact, if you want to
have two keys and values, you just interpose them
with an ampersand instead. So this is to say there
is a standard way in HTML and really HTTP for sending
input from a browser to a server. And it's generally formatted like this. What this means is actually this. Let me zoom out, close that
tab, and open a brand new one. And let me manually
go to-- and I'll zoom in--
https://wwww.google.com/search?q=dogs. Now it has to be q, because that's
what Larry and Sergey of Google fame decided two decades ago when
they made Google itself. Q stands for query. But they could have called
that key anything they want. I'm going to hit Enter
after zooming out. And what you'll see is that I don't
need google.com to search for me. I can literally go to a URL of all
of the dog search results manually. Now no one's normally going to do that. That makes no sense. But it does suggest how simple
the mechanics of the web are. If you want to pass input to
a server, you suffix the URL with a question mark, key equals value. Key equals value may be separated you
buy these ampersands, as I proposed. So what does this mean? Well, Google really did the hard
part, the back end, the database. They crawled the internet and
found all of these cats and dogs. But I can make the front
end, that is the user interface that still works for it. And I'm going to do this. I'm going to add an
attribute to my form tag that specifies an action attribute of
https://www.google.com/search. And I'm going to specify that the
method I want the browser to use is indeed get. This is inconsistent. I capitalized it as all caps before. In HTML, you actually
do it as lowercase. But that's also the default.
So strictly speaking, I don't even need to specify that. But I will, just to be pedantic. Inside of my input, my
text box, which used to look like this, just
a big white rectangle, I'm going to actually give
it a name of q, because I know that's what Google servers expect. And I'm also going to specify-- eh, just that for now. Let me go back now and reload. And it's going to
still look very simple. But notice this. If I type in cats and click
Search, in just a moment, I'm going to be whisked away
from my own Codespaces URL ending in search.html to, after zooming out and
clicking Search, the actual google.com. Which prepopulates the URL
with q equals cats up top, prepopulates this text
box with the user's input, which is to say, like, the front
end of google.com is trivial, as is most every website. It's as simple as these key value pairs
and things like web forms like that. Now I can make this a little prettier. And just so you've seen it, if I
specified that the type of this input isn't text, which is the
default, but is search, I actually get some nice features. Let me reload this now. And if I start typing in, like,
dogs, now I get this little x to click, which clears it. So a lot of websites have that. It's a little bit of a nicety. If you don't know what you
want the user to type in, you can actually be kind
of explicit for them. And you can add a placeholder
attribute that says query or keywords or whatever you want to show them. If I go back to the
browser and reload, you'll see a grayed out text
that's not actually there. It goes away if I type
in bird, for instance. But it's explanatory,
placeholder text for the user. You'll notice that it wants to
autocomplete cats or bird or dog or anything I've typed before. You can disable that. There is an attribute
called autocomplete whose value can be either on,
which is default, or off, which can be explicitly specified. And notice this, too. When I reload the page, it's actually
annoying in terms of user experience. Before I can search for anything,
I have to move my cursor, I have to click in the text box. And now it has focus, so to speak. It gets highlighted in
some color, usually blue. That's not the best website. Why are you making the users pick up
their mouse or their trackpad just to click on the only thing
they're going to do anyway? So there's another
attribute that's handy, Auto Focus, which will just move
the cursor there for the user. So this is to say, even though
a lot of websites don't do this, there's a lot of functionality
that you can enable by just knowing the language all the more. So with that, we now have
a pretty useful feature. In fact, heck, I can say
this is Google Search, change the value of that button, reload. And now I'll go ahead and type
in birds, Enter, and voila. Now we have a whole
bunch of birds as well. So that's a lot. I think it's definitely
time for a snack. So let's take a 10-minute
break for a snack. And when we come back, we'll
make all of this look prettier. All right. So we are back. And it was brought to my
attention during break that we were pretty darn close
to clearing one of these rows. And I will concede that your
classmates, Darwin and Jude, socially engineered me into saying
one of the remaining squares that they needed. And so I'm sad to say that bingo was
declared during break, which Carter has already confirmed, because
I was tricked into giving a long answer to a short question. So congratulations to those two. I do dare say, too, that whole
bit with safetyschool.org probably isn't going over well in New Haven. So I'm pretty sure we can
check off this box here. However, as promised, in fairness,
since we love them both equally, I thought it only fair to resume now
with a look at perhaps one of the best Harvard-Yale pranks
that was actually on us, with this 2.5-minute glimpse at how our
classmates at Yale pranked Harvard some years back. If we could dim the lights now for this. [VIDEO PLAYBACK] [MUSIC PLAYING] [CHEERING] [BAND MUSIC PLAYING] - All the way at the top
and then you pass it down. [CROWD NOISE] - [INAUDIBLE] this for you, Yale. We love you, Yale. - We're here to cheer for Harvard. - Yeah! Go Harvard! - Go Harvard! - [INAUDIBLE] one and pass it down? - Pass them down. - Great. - It says go Harvard. - We're nice. - You see that [BLEEP]? - Look at them. They have the paper! - It's going to happen. - It's actually gonna happen! - I can't [BLEEP] believe this! - What do you think of Yale? - They don't think good. [LAUGHTER] - It may be a complete mess. I don't know. - Dude, does everyone have it? Does everyone have their stuff? Does everyone have their stuff? - The probability that it's going to
be legible it's very small, though. - I agree. - It's too complicated. - [INAUDIBLE]. - I know. But it's too complicated. - What houses are you guys in? - [INAUDIBLE]. - That's not a real house. - How many extra are there? - Ho-fo. - Yeah. - You guys aren't from Harvard, are you? - Fo-ho. - Pforzheimer. - Yeah, but you said ho-fi. - Just make sure everyone has it. - Well, she's probably drunk. - It looks like they're still passing. Are all the cards distributed? - [INAUDIBLE]. - All right. Let's do it now. [CHEERING] - Hold up your signs! - [BLEEP]. [CHANTING] - You suck. You suck. You suck. You suck. You suck. You [BLEEP]. - Did it. - [BLEEP]. - You suck. You suck. You suck. You suck. You suck. You suck. - What do you think of Yale, sir? - [INAUDIBLE]. - One more time! One more time! - Oh, and there it goes again! [CHANTING] - Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! Harvard sucks! [END PLAYBACK] DAVID MALAN: So fair is fair there. So now back to some HTML. And we will transition momentarily
then to this other language, CSS, by which we can style
things all the more. So there's this feature in HTML
that's actually present in Python, even though we didn't use it yet,
and that's present in JavaScript and, really, most modern languages
known as regular expressions. Which is otherwise
known as regexes, which is a way of using
patterns to validate input or to extract information from strings. And so by that I mean this. Let me go over to VS Code here. Let me go ahead and create a
new file called register.html. I'm going to copy paste some code from
earlier, just to save some keystrokes. And in here, I'm going to go ahead
and change my title to register. And in my code, I'm going to go
ahead and create a very simple form representative of a
registration form now. So in this body, I'm
going to do a form tag. I'm not going to bother sending it to
Google or to any server in particular here. I'm going to give it an input tag with
autocomplete equals off, as before. I'm going to have auto
focus on as before. I'm going to give this form field the
name of email this time instead of q. I'm going to give it a
placeholder of quote, unquote "email," just so that the user
knows what they're supposed to type. And it turns out that browsers have
not only type text or search, but also type email, whereby you can rely on the
browser to ensure that the human has actually typed in an email address. Now I'm going to go
ahead and have a button that this time will be called Register. And now let's go over to my other
tab, reload my directory index. There's register.html. And we'll see a relatively
simple form field now. But it's prompting me to
register with some email address. If I go ahead and sort of type
in just my name and try Register, you'll notice that the browser sort
of yells at me with the built-in error message saying, oh, please include
an at in the email address. And it's pretty good in that if I
do mail an at, but nothing more, which is also not valid, and try
to register, it's telling me still that it's incomplete. So built into browsers is some
defense against incorrect user input in this way. If I finally do type in
malan@harvard.edu and click Register, then the form would be submitted
successfully to the server. If, though, I want to tolerate only
.edu addresses because I'm making an education-themed website
for students in the US, I can actually add another attribute
here, which is actually quite useful, too. I can add a pattern attribute. And inside of its value, I can
put one of these things called a regular expression, or a regex. That is an actual
pattern that the browser should match the user's input against
and make sure it indeed matches. And this is going to
look a little cryptic. But I'm going to go ahead and do this. .+@.+ backslash dot edu. Now this looks a little weird. But it turns out I'm using certain
building blocks that we'll just scratch the surface of today. But it's an incredibly useful and
powerful feature in programming languages more generally. Because in the world
of regular expressions, there are certain patterns
that mean something. And here's a really good
URL of some documentation they're for in the world of the
web and JavaScript, specifically. And here's kind of a short cheat
sheet, some excerpts thereof. It turns out in the world of
regular expressions or patterns, a dot represents any single
character except line terminators, like backslash n. A star or an asterisk
represents 0 or more times. A plus means one or more times. A question mark means 0 or one time. A number inside of curly braces
means n times, or n occurrences. And then two numbers in
curly braces, n comma n, means at least n times, but at
most, m times or occurrences. And then there's a few other, actually. So what does that mean? Well, let me go over to VS Code again. And let me zoom in on
the pattern I used. And it would seem that, in this
case, a dot represents any character. Plus means one or more. So one or more characters to the left
of an sign, then literally the at sign. Then another dot plus means one or more
characters to the right of the at sign. But the whole thing has to end in .edu. But there's this additional
backslash before the last dot. And why might that be, intuitively? Even though I've not said? Because I want a literal dot, a literal
period, not any one character there. So I escape the period
to make it have not special significance per this cheat
sheet, but rather a literal period. So what this means is if I go
actually back to VS Code here and I try to claim to work at like
malan@harvard.com and click Register, that's a valid-looking email address. But when I click Register now. Whoops! Sorry. It went through because I did not
reload the page after making the change. So I screwed up. Let me go back to the register.html URL. Let me reload the page and type in
malan@harvard.com, for instance, and even-- sorry. Let me type in malan@harvard.com. And even though it's a valid-looking
URL, it does not in fact and in .edu. So the browser can defend
against that in this way. But the more important
takeaway for now is that as useful as this is,
as user friendly as this, this is not generally the best
technique for validating user input and protecting against
invalid user input. Why? Browsers can't be trusted. Or more generally,
clients can't be trusted. Why? Because the way HTML works
as we've seen it thus far is that everything is happening
on my own Mac, or your own PC, or your own phone locally. Per the envelope story we told earlier,
your browser is downloading the HTML, reading it top to bottom,
left to right, and then displaying it on your computer. But we've already seen that
my computer, for instance, has built into it these developer tools. And there among the tabs here,
are not just that network tab, let me actually go to the Elements
tab, which we haven't seen previously. In the Elements tab, you actually
will see a pretty, printed version of the same HTML. But what that means is that
you can not only see the HTML, you can actually change it. Now you're not going to be able
to change it on the server. But I can absolutely
change my own copy thereof. So suppose I'm now a
hacker in the story. And I really want to
register for this website, but it's apparently restricted
to people with .edu addresses. I don't have a .edu
address, let me propose. So that's fine. Let me actually go into
the developer tools. Let me just double
click on the attribute there, highlight it, and boom. Now gone is that pattern entirely. The web browser now will let me
register with malan@harvard.com because the developer tools give you
full-fledged access to the underlying HTML. So if I've changed the HTML, the
defense is no longer in place. Now what's the takeaway then
is client-side validation is wonderfully user friendly. But it's not secure. It's not safe. So next week, we'll spend
more time server-side at making sure that even if someone
messes with my HTML or my website, they still can't actually get through
and do anything bad on the server. And this is true in general, too. Let me actually, just for fun, go
to, maybe, let's say, harvard.edu. Let me open up my development tools. And let's see where I might go here. Suppose that I want to
hack into harvard.edu. Well, notice that I'm on
my elements tab and there's a lot of HTML that composes this page. And notice that these triangles indicate
that most of it's been collapsed. But if I expanded them, I could see more
and more of the tags and attributes. But suppose I'm now a hacker. And I want to maybe delete this menu. Notice that you can also
right click or Control click on any element in
a web page, typically. With these developer tools, click
Inspect or some similarly named menu option, and you can actually been
whisked away to the actual HTML tags that implement that
feature of the web page. One, it's wonderfully useful
for learning how things work, teaching yourself new tricks,
and even fixing problems. Here, though, I'm going to
try to use it maliciously. And I'm going to highlight this
tag here, div tag, as it's called. I'm going to delete it. And watch what happens at top right. Gone is the menu. Now, of course, if you go to harvard.edu
right now, the menu is still there. If I reload harvard.edu
the menu is back. So it's only my own local copy. But this does speak
to how you should not trust anything happening client side. Because someone can be
mutating that same code. Now it turns out there's
other patterns that you can use in regular expressions. For instance, these are what
are called character classes. You can, for instance,
specify in square brackets some number of digits or characters
that you want to match against. This is a range of
characters, 0 through 9. So it's effectively the same
thing as that, but easier to type. There are certain shortcuts, backslash
lowercase d means any decimal digit. Backslash capital d means anything
that's not a decimal digit. And dot dot dot, there's
bunches of other patterns. You might use these to maybe validate
a phone number in a web page, if you want it to be formatted in a
certain way, for better or for worse. But long story short,
regular expressions will be, someday, your friend as you try to
solve certain problems with data. As an aside, it does escalate quickly. So this is typically
the regular expression that browsers nowadays use
to validate email addresses. It is way more complicated than . +@.+. Why? Because you can't have @@@.edu. There's certain characters
you don't want to allow. There are certain characters
you do want to allow. So long story short, this is a
much larger regular expression that is more correct when it
comes to valid email addresses. All right. So with that said, there's one tool
with which you should be familiar. And that is at this URL
here, validator.w3.org. And this is a free web service
from the World Wide Web Consortium, which is the group that essentially
standardizes this HTML language. And if you go to their web page,
there's a few different ways to validate your own code. Essentially, check it for
correctness by typing in its URL, otherwise known more generally as a URI,
by uploading a file or by direct input. So just for kicks, for instance,
I'm going to go into VS Code and grab my HTML that I just made. I'm going to go back to validator.w3.org
and paste it into the direct input box and click Check. And it's just a nice handy website
that, if I scroll down, in green, you will hopefully see this,
no errors or warnings to show. So it's a handy feature just to make
sure that at least syntactically your code is correct, even if it's not
behaving the way that you might want. All right. With that said, the second
of today's three languages, and we'll just scratch the
surface ultimately of JavaScript to give you a sense of
its capabilities, but CSS is something that's worth understanding
some of the basic building blocks thereof. So let me propose that there are
some additional terms to know. In the world of CSS, we're, again,
going to have key value pairs. In this world, they're called
properties instead of attributes. Why? It was invented by different people,
but it's the same kinds of ideas. In the world of CSS,
you're going to have ways of specifying different
selectors, as they're called. That is to say we're going
to be able to specify the font size, the color, the
margins and a lot of aesthetics when it relates to tags in our web page. And there's going to be different
ways to select those tags, as we'll soon see. In an HTML page like this, this is our
super simple one with which we began, it turns out that you
can also include a style tag in the head of
the page that has some of your stylistic decisions,
font sizes, colors, margins, and all of those kinds of aesthetics. We'll also see another approach whereby
you can relegate all of that stuff to a separate file, like
styles.css, or something .css. And you can link to it
in the head of the page. Link here does not mean A, like,
ideally our anchor tag before would have been called a link. But it's not. This just means that these two files
are linked in some way conceptually. All right. So that is to say we can use these kinds
of tags now to enhance our own code. So let me propose that we do this. Let me go into VS Code here. Let me go ahead and create
a very, very simple home page for someone like John Harvard by
running code of-- how about home.html? And in home.html, I'm going to
copy paste some of my starter HTML from before. And now in the body of this page,
I'm going to do a few things. I'm going to have a web
page with a paragraph up here that just says John
Harvard as the title thereof. Another paragraph that
says something simple like welcome to my home
page exclamation point. And then, like, a footer at the
bottom and a third paragraph that's a copyright, say,
John Harvard, for instance. So super simple, but representative
of a header, a main part of the page, and a footer thereof. If I go into my other tab and
reload my directory listing, I will see now home.html. And it's going to be
pretty bare bones, right? It's the same text, same font size. It is three separate paragraphs. But let me start to stylize
this a little bit differently. Let me make the top bigger and
bolder, perhaps, or rather, the top bigger and centered and
make this text shrink thereafter. So I'm going to go ahead and do this. It turns out that you can have
not necessarily a style tag, but even more simply, a style
attribute on certain tags, like this. I'm going to add a style attribute
that has a font size of maybe large. And how about a style attribute
here, a font size medium. And then maybe down
here-- oops, close quotes. And then down here-- whoops. Thank you. OK. I owe you some cookies. All right, so style here of font size
small, so relatively simple ideas. And here is just another stupid
syntax for key value pairs. Again, left hand is not
talking to right hand. In CSS, cascading style sheets, which
is the language we're now talking about, it's key colon value. In HTML, it's key equals
quote unquote value. It's just different techniques for
the exact same dictionary-like idea. All right. If I go back to my other tab and reload,
notice that it's a little subtle, but it is large, medium, and small. I didn't center things
yet, so let me do that. It turns out that this
thing collectively is what's called a property. And a property is defined
by a key value pair. If you want to have multiple
properties for key value pairs, in CSS, you separate
them with semicolons. So those are back. And if I want to center the text,
I can do text-align: center. I could now end my thought
with the semicolon. It's not strictly necessary. But I'll keep it just
so that I'm consistent. But it's only necessary
if you have more than one. I'm going to go ahead and
center everything, though. So I'm going to go down here and add
a semicolon after medium, down here and add a semicolon after small. So I align, text-align center, center,
center for all three paragraphs. If I go back to this other
tab and I reload, voila. Now it is, in fact, centered. But here's where we can start to have
a conversation about, maybe, design. So I claim this is correct. But is this perhaps the best design? Well, maybe not. I mean, these aren't really
paragraphs, first of all, semantically. It's not even complete sentences. But there are three different
divisions of the page, right, like, the header up there,
the main part in the middle, and then the footer. So it turns out, and we saw a glimpse
of this in Harvard's source code, there's another tag instead of p for
paragraph called div, for division. And even though this
is actually not going to have much of a
functional effect at first, it's maybe semantically a bit better. Because, again, these
aren't really paragraphs. So if I really want to nitpick, I
do have three divisions of the page. So div is a very common way to give
yourself just a rectangular region of the page to style as you see fit. If I go back now and reload, notice
that it does tighten things up. The paragraph tag gave me some
vertical whitespace for free. So I've lost that. But I could add it back
if I really wanted to. But now, let's come to
this question of design. What's redundant about what I've
done thus far, even if you've never seen CSS before? Yeah? AUDIENCE: [INAUDIBLE]. DAVID MALAN: Yeah. I mean, I had to center all three
divs, which is just sort of stupid, it would seem. Copy paste has generally
not been necessary. Even though I'm doing it to
save time today in general, when the results are copied
and pasted, ultimately, this has not been good practice
in any of our languages. So it turns out I can do this. Let me actually delete this one. And I can keep or get rid of the
semicolon, but I'll get rid of it for parity with our first version. I'm going to get rid of this one, too. And you know what? Here's the C in CSS cascading. It's more like a waterfall effect. And if I go up to a parent
tag here, like, the body is the parent of all three divs, I
could put the style attribute here and say text-align: center there. And that has the effect of
cascading down onto all three of the children that
are nested inside of it. So now it's sort of better
designed because I've only said text-align: center once. If I go back to the web page and reload,
it has no functional impact visually. But it's better design. Because if I want to align
it left, or right, or center, I can change it in one place and
not three independent places. All right. What else might I
change after this here? Well, it turns out that I could do
something a little clearer as well. This copyright symbol? I mean, it's just sort of homemade
with two parentheses and a C. It turns out that there are ways
to get special symbols in HTML. And you can use what are
called HTML entities. You would only know these by looking
them up or memorizing the numbers. But it turns out that number
169 is the special HTML entity for an actual copyright symbol. So let me zoom in here and then reload. And you'll see that the parenthetical
C actually becomes the proper mark for copyright, so marginally useful. Or you could copy paste it
from some other website, for instance, if you didn't know
how to type it on your own keyboard. So that's an HTML entity, another
feature with which to be familiar. But having three divs on a page
isn't necessarily ideal nowadays, especially for search
engine optimization, SEO, for screen readers for accessibility. Because at a glance, I don't
really know which of these divs is the most important. Arguably the footer is
generally for the human reader, like, the least information-bearing
piece of content. So why don't I try to signal as much
to the browser, to the screen reader, to the search engine? So it turns out there are what
are called semantic tags nowadays. Indeed, we're up to version 5 of HTML. And one of the relatively newer features
is, instead of using generic divs, you can actually use
actual names of tags, like header and main and even footer. And here, too, the visual
effect is not going to be any different if
I go here and reload. But there's more semantic
information underneath the hood. So that, again, all of
those different types of services, the browser, the
screen reader, and the like just know a little more about the page. And maybe a screen reader now would
focus on the main part of the page before reciting all of the fine print in
the footer, for instance, to the human. All right. Well, what else could we do here? Well, it would be nice at some point
to be able to reuse these styles. And if I find myself making not one page
but two pages or 10 pages or 100 pages, it's kind of annoying to have to
type out all of the same styles. So wouldn't it be nice to
start to factor this stuff out? Well, I can do that, too. Let me actually go ahead and do this. Let me get rid of this attribute and
this attribute and this attribute. And honestly, too, as I do this,
I would argue that the code looks just a little cleaner now. It's more obvious what is a tag and
what the actual data of the page is, metadata and data, if you will. But I've lost all of my styling. But wouldn't it be nice to
preserve some of the styling by doing what I proposed
earlier, which is using not a style attribute, but a style tag. And indeed, you can put a style
tag in the head of your web page where you can put all of
those same properties. And you need a little more
syntax, a few more keystrokes. But I can say this. If I want to center the
entire body of my page, I can actually do so by
specifying text-align: center;. Here the semi-colons are going
to be generally necessary, especially have you multiple properties. Next I'm going to say header. And inside of these
curly braces, font-size: large, unlike C, where you could
get away with no curly braces if there's a single line,
you do need them in CSS. In the main tag, let's go ahead
and style with font-size: medium. And then in the footer tag, let's go
ahead and style with font-size: small. Now this looks a little worse. Because it just kind of blew
up and it's a lot longer. But it is a step toward
factoring this out. And honestly, when it
comes to web pages, I'm not the best artist in the world. I can make the data display. But friends of mine are certainly
better at making things really pretty and pixel perfect, so to speak. So it's kind of nice if I can isolate
all of the style to one part of my file and all of the content to another. Because maybe I could now
collaborate with someone else. So if I go back to now
the other tab and reload, functionally, no different still. It still looks exactly the same. But I'm starting to make it
a little better designed. And in fact, there's
another way to do this. Suppose that I find myself in the habit
of very often centering text on a page. And honestly, it's
just a little annoying to have to type this out for
every tag that I want centered. Well, I could create what are
called classes as well in CSS. It turns out you can
make up your own words-- but I'm going to choose
some reasonably named ones-- by prefixing them with
a dot or a period. And if I want to call
this set of properties, even though there's just one, centered,
I can literally write .centered there instead. I can write this .large. I can call this .medium. I can call this .small. And what this means now is I
have reusable sets of properties, kind of like containers whereby
anywhere I use the word "centered," it's going to get that one
text-align: center property applied. Anywhere I use quote, unquote
"large," it's going to be made large. And so if I scroll down now here, I do
need to reintroduce another attribute-- but it's a very common one in the
world of HTML now-- that of class. So class equals large. Down here I'm going to
do class equals medium. Down here I'm going to
do class equals small. And it's getting a little more verbose,
but I'm not polluting all of my HTML with the actual styles. I'm just kind of having
this layer of indirection and of abstraction, if you will, on
top of those very specific properties. And then for the body,
I can do the same idea. Class equals centered. And if I go back to my web page here and
reload, still looks exactly the same. But I've kind of centralized
where I can do things. And frankly, I could do
something like this, color: red;. I can package up multiple properties,
go back to the page here, and reload. And now that has applied to everything. So I have a reusable set of properties. Even though centered is
maybe not the best name now, because it also makes things red. But I can come up with
reusable sets of properties. And honestly, one final
flourish here would be let's not assume that
my buddy, whether it's my project partner or a
colleague in the real world, it's kind of stupid to
try to edit the same file. Because invariably we're going
to break things on each other. So I could actually do this. Let me take all of this. And I'll get rid of the red. Let me go ahead and highlight everything
I just did and cut it to my clipboard. I'm going to get rid of
the style tag altogether. But I am going to go into VS Code
and create-- how about a file called home.css, just so I know what's what. And in this file, I'm just going to
literally paste everything I just made. But I'm going to go back
to my home page here. And I'm going to add that other tag I
proposed earlier, link href="home.css", and I need one weird attribute, too. The relationship of this link is that
of quote, unquote "style sheets." And that's just the way it
is according to the tag. And now one last time, if I reload
this page, the red is going to go away. Because I deleted that. But the font sizes and
centering are still there. But what I've done was
introduce some basic building blocks in this language I
claim is called CSS that's going to allow me to now centralize
all of the styling, the aesthetics now of my web page. All right. Let me pause here and see if there
are any questions on these techniques thus far. It's just more key value pairs. Questions on this? No? All right. So here's where things
can get prettier quickly. Let me go ahead now and
close these two tabs. Let me go into a file we created earlier
called link.html, which you'll recall looked a little something like this. And now we can make this web page behave
a little more like the real world. Let me undo the phishing attack and
just literally say Harvard down here. But let me go ahead and start to
style the anchor tag as follows. Previously, this page looked
a little boring like this. The link was blue originally. But because I visited harvard.edu, by
default, the browser changes to purple. Which is fine, but maybe
you don't want that. Maybe we want something that's a
little more crimson, for instance. So let me do this. Let me go into the head
of this link.html page. Let me add a style tag herein. And in there, let me style
the anchor tag as follows. Inside of this anchor tag,
I'm going to do color: red. And let's go ahead and
leave it as such for now. Let me go back to the
link page and reload. And it's going to be a little subtle. But right now it's purple. And now it's definitely red. So I've modified that. Now underlining links is
good for accessibility. But a lot of websites choose to
not underline them and instead underline them when you hover over them. So that is an effect we can achieve,
even though it might not be ideal. But let's at least demonstrate
how websites are doing that. I can specify that this link should
have text decoration of none. Now I would only know that by
having taken a class, read a book, looked at an online reference. The default is underline. But I can override that by saying none. So if I now go back to my page,
reload, it's still going to be red. But it's now not going to be underlined. But notice if I hover over it, it
changes to a little pointer finger if I zoom in here. But it's clearly not
underlining, so that's OK. Because there's another
way of selecting tags here. I can say a:hover. And then inside of this CSS,
I can say text-decoration: underline when the anchor tag is
being hovered over with the cursor. If I go back to my tab here and
reload, still looks the same. But watch as my mouse gets close. It now underlines, as
a lot of websites do. So it's a relatively simple idea. It's not as compelling
on mobile, especially, because it doesn't do anything
if you hover your finger over the glass of your phone. But it does work on laptops
and desktops in this way, even though it's perhaps a little
passé now to do this kind of technique. But there's other ways
to select tags on a page. And in fact, let me go
back to this one here. And in this page, let me propose
that you can go in one of two places. Visit Harvard or a href =
https://www.yale.edu/ and then Yale's website. So it's getting a little long. So I'm going to hit Enter. Because the browser won't care
that there's some whitespace. But at least, now I have
two links on the page. If I reload this, you'll
see that both of them are red or crimson,
which isn't quite right. But that's OK. I can actually distinguish
these two somehow. One way to do this would
actually be to add one more HTML attribute that we haven't needed
or used before, that of ID. I can use almost any name
for this ID that I want. And I'm going to say,
quote, unquote, "Harvard" is the unique ID of this link. And the unique ID of this link is
quote, unquote, "Yale," for instance. And what I can now do up here is I'm
going to get rid of this color red. Because I don't want all
anchor tags to be red, but I do want Harvard tags to be red. So I can say #harvard and then
color: red;, and then I can do #Yale and I can say color:
blue;, for instance. The hash symbol here represents an ID. The dot we saw earlier
represents a class. And when you don't have
a symbol before it, it represents literally
the name of the tag. So when I mentioned these
various selectors earlier, type selector is just
the name of the tag. Class selector is the dot. ID selector is the hash. And there's also ways to
select attributes specifically. So if I go back here in VS Code
now, I've added a bunch of CSS here, properties. But if I reload now, one of these should
be red and the other is in fact blue. So in short, just by way of these
style attributes and these style tags, we have a lot more control over how
we can actually stylize our pages. And here's now where
this gets interesting. And you asked about Bootstrap,
a popular framework or library. There do, indeed, in the real world
exist a lot of third party frameworks that a lot of smart people
have just figured out what would make our web pages look prettier. And they've come up with
design patterns for us that make it way easier and way faster
to make pretty looking forms, pretty looking tables, and the like. And one of these products
is indeed called Bootstrap. It's freely available. And you can see its own
documentation at getbootstrap.com. And what I've done in advance is I've
actually prepared some of our past data to actually be formatted
a little more prettily. So let me actually go
back to VS Code here. And I'm going to open up a terminal. And I'm going to cheat and copy a file I
brought with me called phonebook0.html. And if I open this file, you'll
see that it looks like this. It's a big table that has two
columns now called name and number. And I've added some other tags
which are not that interesting, but I didn't need them before. But in this table, there's a table
head and there's a table body. So there's, like, a
special row at the top and then all of the rest of the
data in a CSV or a spreadsheet. And you can probably infer from
this table row, from this table row, from this table row, it kind of
looks like, indeed, a phone book. So if I go back to my browser
here, go into my directory listing and open up phonebook0.html,
it's not the prettiest thing. But it is tabular. And notice that the browser has
automatically put in bold the name, and the number, and
everything's in columns. But it's not very pretty. But what if I do this? Let me actually go into VS Code here. And let me borrow another file I
came with called phonebook1.html. And that file is going
to look a little bit different than the [INAUDIBLE] in that
I've included a link tag in the header. Now I'm not linking to my own CSS. I actually went to getbootstrap.com. I read some of their documentation. And I'm linking now to Bootstrap's
CSS file, which is actually really, really big. And in fact, if I open this file here,
let me actually open this up in a tab, and visit this URL here,
the folks at Bootstrap have written a crazy
amount of properties by defining their own classes
and other such keywords. And you and I and really
anyone on the internet is welcome to use all of this CSS. And the documentation makes
clear what all of this does. A normal person would not need to
read through any of this in that way. But I've included this file
called bootstrap.min.css. And min just means they got
rid of most of the whitespace. And if I now go back to my other
tab and go back to phonebook1.html, it's the exact same data. But thanks to that link tag,
it now looks much prettier. And I didn't have to figure out how
to move things over to the right. I didn't have to figure out
how to draw these gray lines. I didn't have to figure out how to
format things in precisely this way. Bootstrap, wonderfully,
did most of that for me. Now this is still a very static table. It's not interactive. I can't sort by names
or columns or the like. So let's revisit one other program
that we made in advance together. And this one is actually a new
version of the search program. So if I open up this program,
search2.html, and close my terminal window, you'll see that I've borrowed
some of the same content before. Let me go to the essence of it. Here is the form and the
action that I used earlier. But I've added a whole
bunch of classes to it. And this is the essence of
these third party frameworks. They generally create a whole bunch
of classes that you can use and reuse. But they figured out all
of the relevant properties. So for instance, for my
Google search button, I've given it two classes, a
class of button, BTN for short, and button-light. These are not standard
HTML or CSS things. These are Bootstrap names that they
invented, just like I invented center and large and medium and small. I've also specified that there are a
whole bunch of other classes associated with pretty much every tag in this file. So if I zoom out here and go
back to my directory index and open this, the
first version of search. It was super, super simple because
it only contained the HTML form. Let me go ahead and
open up search2.html. And the essence of the
form is exactly the same. Therein is the query at
the bottom of the page. But thanks to CSS, I now have a button
that looks a little more interesting. It's gray and it's rounded. I also have an I'm feeling lucky button,
which will send a different request and show me by default the
very first search result. So in short, the file that I just
opened, even though I made it in advance, it's only 55 lines. And most of that is whitespace. And it did take me a little bit
of time to figure out the classes and read the documentation. But most of the work is done
by this third party framework or library of CSS classes and properties
that someone else made for me. And so as CSS goes, that's
kind of it for the basics. It's just a bunch of more key value
pairs in the form of these properties, whereby you can select elements
of a web page by way of their ID, or classes, or even the names thereof. And here's something
that's kind of neat, too. Let me go to harvard.edu again. Let me go ahead and open up
the inspector, as before, and draw your attention to one final
feature of these developer tools under the Elements tab. So under the Elements tab
here is all of the HTML that composes harvard.edu as of today. But let me go ahead and expand
this right-hand portion. It turns out you can
also see all of the CSS that is being applied to
the website as of now. So for instance, if I go to a
page here-- let's go to Give Now. Might as well. Let's give them a plug here. Under Give Now, let's see
if this is going to go well. Let's go ahead and highlight this part. Suppose they really want to
draw attention to give online. And I right click on that. I choose inspect, as before. And here now, notice
that the developer tools jumped right to the
HTML tag that represents that particular line of text. If I zoom in, it turns
out it's an H1 tag. It's big and bold. Suppose, though, I want
to change its color. Well, if I go over on the right here,
you can see all of the CSS properties that currently apply
to that specific tag. And most of these we haven't even talked
about line, height, margin bottom, font, weight, margin top, and a bunch
of other fairly self-explanatory things. But if I want to experiment, I can
go up here in top and say color: red. And I can literally change that on
the web page live to see how it looks. It's not changing the server. It's just changing my copy. But I can at least make that change. You can do even fancier things
where, if you click computed, you can scroll down and
figure out, OK, wait a minute. It's white right now. That's the same thing as
this, rgb(255, 255, 255). That's the same thing as
ffffff from weeks prior. But I can click this little arrow and it
will even show me where in Harvard CSS that white color comes from. So if it's actually my site I
can actually figure things out and make changes as well. So in short, if you find that you
like the world of web development, in your own browser that
you've had all this time, there's so much darn
functionality built in. And it's just up to you now to
start experimenting with it, exploring what you can
actually do with it. But let us use our final moments today
to introduce you to a final language called JavaScript, which is itself
a proper programming language. And you're about to see
a bunch of syntax that's kind of new, but kind of familiar. And the goal here is not to
teach you JavaScript per se, but to begin to lay the
foundation for you yourselves learning a new language on your own. By the end of CS50, you
will not have learned all that is out there, certainly. And the goal here
ultimately is to help you have a sense with a support
structure in place, be it the humans or the [INAUDIBLE] involved that you
can ask questions of along the way. Let's go ahead and do this. In my directory index, I'm going
to go into the source 8 directory where I've got all of
today's examples ready to go. I'm going to go into VS Code's Explorer,
where I can see all of those files. And in my source 8 directory,
let me go ahead and open up hello version 1 dot HTML. Recall that the last time we played with
hello.html, it was literally just HTML. But here's an example of a
language called JavaScript. And at this page, it's
going to work as follows. If I open hello 1 dot html in my
page, I have a very simple form. Let me zoom in. Let me type in my name, for
instance, D-A-V-I-D, and hit Enter. And voila! This is not a very good user interface. But you can see that this web page
says, quote, unquote, hello, David. So how did I get this
form to trigger a pop up? Well, if I go into VS Code
here, you'll see a web form. But I've added another attribute,
namely an onsubmit attribute. And in the world of
HTML, onsubmit allows you to write a tiny bit of
JavaScript code inside of the quotes that will be executed whenever
the user submits this form. So what this is saying is
call a function called greet and then return false. And what return false means
is that don't actually submit this form to the server,
like keep the user on this page so we can just see a pop up. So what is this greet function? Well, it turns out,
in the world of HTML, there's not only a style tag you
can put in your head of your page, but also a script tag, inside
of which is JavaScript code. The syntax is a little different
from Python and from C. But it's maybe a little
closer to Python. Instead of def last
week or two weeks ago, we'll now use function, literally, to
begin the definition of a function. And if I want to call this
function greet, so be it. JavaScript comes with a
function called alert. And so if I literally do alert,
hello, quote, unquote, and then plus something else, just like in
Python, that's going to concatenate, or join the two things left and right. But here's some functionality
that comes with your browser, too. It turns out, per the notion of
this whole page being a document, you can call
document.queryselector, which allows you to select any of the
tags or elements in the page, specifically you can select
the tag that has an ID of name. So CSS and JavaScript
use the same syntax. If you see hash something, that
is referring to the ID of a tag that you created. If you then, after selecting the
element of HTML with that unique ID, want its value, you just do dot value. So we saw dots a lot in Python and
in C to go inside of structures. You can go inside of that
text box and get its value. So notice here if I
scroll down, not only am I using autocomplete
and autofocus and so forth, I also, for convenience, gave my
input box a unique ID of name. So what's effectively happening
is, when I click Submit, my JavaScript's greet function is
called, it queries for that text box, goes inside of it and gets its value. And then, using this plus
operator, just like in Python, concatenates the two
together and passes them to this alert function for an
underwhelming, but functional alert in the window. All right. How else can we do this? This is generally frowned upon
to use onsubmit in this way. Generally speaking,
the world does not like mixing attributes, rather JavaScript
code with HTML so closely as this. So let me show you
another variant of this, even though it's going to
look a little bit cryptic. But at least it will be representative
of how else you can solve this problem. In hello2.html, we have this code. Notice that at the top of
my body now is the form. But at the bottom of the
body is this script tag. So I've just moved it from
head to the body of the page. Because I'm going to
then instead do this. If I want to tell the browser to
listen for submissions of that form, I can use this fairly cryptic syntax,
but you'll see it again and again over time as follows. Go into the document. Select with this query the form tag. And then call this special function
that comes with the browser called addEventListener. So tell the browser to listen for a
certain type of event for this form. What event do you want to listen for? The submission of the form,
so quote, unquote submit. What do you want to have happen
whenever that event is heard? You want to call this function here. So this is what's known
as an anonymous function. The syntax is a little weird, but
I've not given the function a name. It apparently takes an
argument as input called event, but that's per the documentation. And what these two lines
of code do essentially is they still call the alert function. They still output hello comma space. And they still query
the HTML for the ID name to get the value that
the humans typed in. And then just for good measure,
we prevent the default behavior for any form with this line of code,
just so that it doesn't actually submit anything to the server. It keeps the user actually here. This will be a little scarier,
too, but just so you've seen it. In hello3.html, this is actually
a more common technique. Whereby you can listen for
one other special event. It turns out when you load a web
page, lots of stuff has to happen. It's got to be read top
to bottom, left to right. It's got to download other files, the
images, the sounds, the videos, and so forth. If you want to wait until the whole page
has been read into memory essentially, you can use this event as
well, DOMContentLoaded. That tree we drew earlier is what's
called a DOM, document object model, which is just a fancy way of saying
a tree in the computer's memory that represents the web page. So this is the syntax that
you'll find that people use to tell the browser once the whole
DOM, the whole tree has been loaded, then go ahead and execute this code. And it means that no matter what, the
whole web page will be ready in order before this code is actually executed. And this ensures, for
instance, that even though this script is
at the top of my file and my form is at the bottom
of my file, none of this code will get executed until the whole
DOM is ready, all of the HTML has been read top to
bottom, left to right. All right. Well, let's go ahead and make
this a little more interesting, just to show you some of the
capabilities of JavaScript within a browser nowadays. So if I open up maybe this
one here, background.html. And let me open it up in the browser. And this is going to be super
simple in terms of user interface. But here's a big white viewport,
big body that's just white in color by default. But there's three buttons at top left. And if I click R, it
makes the background red. G makes the background green. And B makes the background blue. What's interesting about this
demo, sort of underwhelming as the user interface is,
is it demonstrates that you can modify CSS using JavaScript. And HTML, CSS, and
JavaScript are therefore very intertwined in the
context of a browser. How? Here's the raw HTML. Here are the three buttons. And I've given them three
separate IDs red, green, and blue, just so I can refer to
the specific button. And notice what I've done here. I've declared a variable
in JavaScript, which uses slightly different
syntax of let as the keyword. Instead of int or char
or string, you can use the keyword let, which
essentially means let me create this variable called body. And this is just how,
using query selector, I can select the body
element from the web page. Because I'm going to use
it three separate times. What do I want to do
three separate times? For instance, this. I want to go into the
document and select whatever element has the unique ID of red. I want to tell the browser to
listen for this event, click. So we saw submit before. You can listen for clicks as well. When the click happens on this button,
I want this function to be called. What does this function do? Something super, super simple-- all it does is it changes the
body's styles, background color to be, quote, unquote red instead. So what's going on here? We didn't see this earlier. But it turns out in
CSS there is actually a CSS property called background-color. And I can see it as follows. Let me reload this page. Open the browser's inspector. Open up elements. And if I hover over
the body here, notice that there's no background
color by default. But if I do in, say, lowercase,
background color colon yellow, it immediately changes
the background to yellow. Unfortunately, in JavaScript, you
can't do background dash color. Why might this be? Yeah? AUDIENCE: [INAUDIBLE]. DAVID MALAN: It thinks
it's minus or subtraction. Right? So I would wager there was a human
at some point in the room designing JavaScript where they
realized like, damn it. We shouldn't have used a hyphen in CSS. Because it's now going to be
misinterpreted as a subtraction operator in JavaScript. So the way the JavaScript world solved
this was whatever has a hyphen in it as background dash color, you
change it in the JavaScript version thereof to be camelcase, so to speak,
whereby there's this hump in the middle with it's a capital C, no hyphen,
instead of a lowercase C instead. And I do this here,
and I do this here so as to essentially listen for a
click on any of those three buttons so that the end result is that it
changes it from red to green to blue based on what I'm clicking. And here's where the developer
tools get kind of cool. Notice at bottom right here,
notice that as I click on this, the CSS of the page at
bottom right is changing to match whatever is happening. So you can really see and understand
what's going on underneath that hood there. All right. We have time for a few
other demonstrations. Back in my day when I learned HTML,
there was a bunch of hideous tags still in circulation. Among them was a blink
tag, which literally, if you used blink and put words in
between its open tag and close tag, you would get text on your
screen just kind of doing this. Even uglier was what was called the
marquee tab, which would actually scroll text across the screen like this. And no self-respecting website tends
to have blinking text or scrolling text in this way. Because it's just tends to be ugly. However, even though the blink
tag is among the few tags that's ever been removed from the
language, you can bring it back with a bit of JavaScript. So here, for instance, is
an example in blink.html. Here's a super simple page. The only thing in the
body is hello, world. But there is a script tag up
in my head of my page here. And let's see what's
inside of this script tag. Well, I've defined on line 8
downward, a function called blink. What does it do? Well. I first declare a variable called body. And I get the body element
using queryselector. I then ask this question. If the body's styles
visibility property, which we haven't talked
about yet is quote, unquote, hidden, then change the
body's styles visibility property to be, quote, unquote, visible. Else, if it's not hidden, that is it's
visible, change it to hidden instead. And here, too, this is another one of
these left-hand, right-hand situations. I do not know why the opposite
of visible is not invisible. It is, instead, hidden. So, again, arguably poor design,
but this is what we have. How is this useful? Well, there turns out. In your browser, there's
a JavaScript function called setinterval that's associated
not with the document per se, but the window, which is another
global variable that you just get automatic access
to in the browser that allows you to call a function,
any number of milliseconds, again and again and again. So if I want my text to blink every
half a second or 500 milliseconds, I just use window.setinterval to
call blink every 500 milliseconds. And notice, it's very important not to
call blink here, as with parentheses, like in C or Python. Because I don't want to call
blink at this moment in time. I just want to inform
the setinterval function of the name of the blink function. So I just pass in the name blink. And if I go back to my directory
listing, I open up blink.html, you'll see what I used to see in
the late '90s, when HTML 1 was all the rage, like at the
beginnings of a ugly websites, including my own personal
home page at the time. My own personal home
page, too, at the time, which is probably findable
somewhere online in the archives, it was back in the days
where you wouldn't just show people the content of your page. You had to click a Enter
button to enter the web page and just really ridiculous. There's a lot of things in tech
that you can do, but should not do. And the world has learned
this as have I, the hard way. All right. Let's do a couple of final
examples that are now representative of what
modern websites do and what you and I take for granted
on web apps and mobile apps alike. For instance, this
feature of autocomplete. Case in point, when I
went to google.com before and I started searching
for cats or dogs or birds, it was trying to finish my
thought and populating a dropdown with a bunch of different suggestions. I can actually do that myself
in JavaScript as follows. Let me open up a file
called large.js, which is a file that I made based
on speller's own dictionary. Recall that we gave you a big list
of words, like 100,000 plus words. I copied those into
this JavaScript file. But I formatted them in what's
called the JavaScript array. So JavaScript has arrays. They're more like Python lists
than they are like C arrays. The syntax is square brackets. Let is my keyword to say
give me a variable called WORDS, which is all caps because
I'm going to use it globally. And here is a 100,000 words from
that dictionary in this file. All right? Now let me close this file
and open up the actual HTML file, autocomplete.html. Let me scroll down to the bottom. And you'll see that in this
page in the body are two things. One, an input, so a text box
so I can start typing words. And then, two, an unordered
list that's empty. So there's no actual list items
in that unordered list initially, but there is a lot of JavaScript. Here's how I'm including
the large dictionary. And here's how I'm
implementing autocomplete. So let me first show you what this does. Let me go back to my directory
index, click on autocomplete.html. I'll zoom in. And if I type in C, I immediately
get an unordered list of all words starting with C. If I type CA, it gets filtered further. But we can't see the difference because
there's so many words starting with CA. CAT, the list is changing. CATS, the list is changing. And notice that if I were to
open my developer tools, what gets really interesting is you can
see this list being made in real time. Let me delete it. Notice that the UL at
bottom left is now empty. But if I type in suddenly CATS, notice
that the triangle appears and there are all of the list items that
my JavaScript code is apparently dynamically creating. And indeed, how do I do this? Well, this one's more of a
mouthful, but here's the idea. I used a queryselector function
to get that input text box. I then add a listener to that input,
listening for what's called key up. It turns out you can listen
for the finger going down or the finger going up. So I'm waiting until the user lifts
their finger off the keyboard, AKA, key up. When it hears that event,
it should do the following. It's going to create a variable, a temp
variable called HTML equal to quote, unquote nothing. In JavaScript, as an aside,
you can use single quotes or double quotes for whatever reasons
stylistically, JavaScript programmers tend to use single quotes. I can then say if that input has
a value, because the humans typed in one or more letters,
then iterate over all of the words in the dictionary. And we've not seen of before,
but it's Javascript's equivalent of Python's for loop. If that word starts with whatever the
input value is, go ahead and add-- that is concatenate to the
HTML variable and open tag LI. Then, whatever the word is, using this
JavaScript specific syntax, and then close the tag. And then lastly, using
queryselector, grab the UL tag, go into its inner HTML,
so to speak, inside of it, and change it to be this
HTML I just created. And so in this way, using
JavaScript, I can dynamically add to and subtract from the HTML in the page. There are so many other events here,
too, clicking, submitting, key up, dragging, and dropping, and so forth. This is just some of the events that web
pages and mobile apps can listen for. But we'll do one final one, which
speaks to the power of browsers nowadays and even the implications for privacy. If I go into
geolocation.html, it turns out you can figure out where in the world a
user is with, like, three lines of code nowadays, assuming they've
turned on location services and opted in on their device. Here, albeit cryptically,
is a final global variable that comes with browsers
today called navigator. It has a geolocation
object associated with it, which comes with a function
called getCurrentPosition. You can then specify or figure out
the user's latitude and the user's longitude. And all I'm going to do is
write these to the screen so I can see this demonstration live. So our very final demonstration
here of JavaScript is going to be this one here for
geolocation to show you how easy and how invasive even code can be
if I click on geolocation and wait. There are my GPS coordinates,
latitude and longitude. And to confirm as much roughly,
let's go ahead and open up a browser, paste in those coordinates, click on the
Google Maps result that comes up first. Zoom in, in, turn on satellite mode. And in-- and I'm not quite in
that corner of the building. But I'm presumably close to an access
point that Google has known about and associates with my GPS coordinates. It's that easy when you actually use
something like Uber or Lyft or the like to figure out where the user is by
just asking their browser via code like this. So that's it for HTML,
CSS, and JavaScript. In the problem set, you'll
explore all of these. One more lecture to go in which
we'll combine all of these. But until then we'll see you next time. [MUSIC PLAYING] Buffering, OK. Josh, nice. [INAUDIBLE], oh! [LAUGHING] [INAUDIBLE] No, oh, wait. That was amazing, Josh. Sophie! [LAUGHTER] Amazing. That was perfect. [INAUDIBLE] [LAUGHTER] I think I-- [INAUDIBLE] AUDIENCE: [INAUDIBLE]. DAVID MALAN: Guy. That was amazing. Thank you all. AUDIENCE: Good. [APPLAUSE]
