[MUSIC PLAYING] DAVID J. MALAN: All right,
this is CS50 and this is lecture 6 and as you
may recall, today we begin to transition away from
this low-level world of C and command line programming
into to a domain that's probably a little more familiar,
that of the web, and yet all the ideas that we've been exploring
thus far like functions and loops and conditions and so forth
are still going to be relevant. It's just we're going to start using
slightly different syntax and the user interface, or UI, is now going
to be your browser instead of a black and white terminal window
with just a simple textual prompt, but how did we get here? Well, recall that we've
looked recently at structs and what was nice about structs
in C was that we had the ability to make our own custom data types
and to kind of encapsulate together related data, and that
became pretty powerful when it came time for forensics to
actually manipulate bitmap files or JPEGs, and even though this
struct is way more complicated than a student structure,
at the end of the day it's just individual data types
that are all somehow interrelated, and by putting them in a struct
you can move them all around and copy them and save them all
together as you might have done as well, but then most recently did we
introduce a somewhat fancier structure, which is still the same idea. It's got like one or
more things inside of it, but now, more powerfully,
one of those things had this star or asterisk, which gave
us, of course, a pointer or an address, but what was so powerful about
this simple idea and this seemingly simple symbol is that now we can kind
of stitch together in our computer's memory any kind of structure we want. It doesn't have to just be one entity. It can somehow be linked
to another and you can keep linking these structures
together as well, and this of course was an improvement on perhaps our
simplest of data structures early on, an array or a list,
but of course, as soon as you have pointers can you
begin to link things together until we got something like this
and perhaps now with the dictionary implementation you yourself might be
exploring a linked list, a hash table, a [? try ?] or some variant in between. And then lastly, there was this
painting of a picture, whereby this is your computer's memory
put a little more descriptively, and this is germane only
insofar as your computer uses different chunks of memory differently. All of your function calls
end up using the stack. All of your users of
malloc and its cousins end up using the heap, and then
of course there's this up here, and what was the text segment,
which we didn't really dwell on? What was the text segment all about? Text-- you're being volunteered. Yes, what's the text segment? AUDIENCE: Files information? DAVID J. MALAN: Files information, yeah. Specifically, the 0s and 1s
that compose the actual program. So when you compile your source
code, like hello.c, into 0s and 1s, those end up getting stored
in this location in memory while the program is running. So long-term they're stored on disk or
your hard drive or whatever's inside of the computer or the server so that
the files persist even when the power goes off or you walk
away from the keyboard, but as soon as you double click a
program on your Mac or PC or as soon as you do ./hello or
some command like that, those same 0s and 1s get loaded
into your computer's RAM, the picture we keep showing, and that's
where they live while they're in use by your Mac or PC or the actual server, but thus far we've been running all
of these programs with something like ./hello or some similar command and
running them just in the so-called terminal window. But you are probably
most familiar, certainly with more graphical apps
on your phones these days and any time you visit a
web browser on your phone or on your desktop or laptop, you're
still interacting with a program. It's just that program is not
only running on your Mac or PC. Your browser is, like Chrome
or Edge or Firefox or Safari or whatever it is you use. That's running on your
Mac or PC, but what you're communicating with
is a program elsewhere, somewhere else on the internet and
those programs are called web servers. A web server is just a piece of
software that some human or humans wrote and their purpose in life
is to serve web pages. When you request the
homepage of Facebook, there is a server out there,
a program someone wrote, that essentially spits out the 0s and
1s that compose Facebook's homepage, but nicely enough, those 0s and
1s are not written as 0s and 1s by Facebook engineers. They're actually written as
something a little more English-like, a little more familiar, and it's
not even programming code, per se. It's what's called markup language,
and we'll soon see that and more today. So we've gone from compiling
your code and running it like this to actually doing
that in a web-based environment, but of course, when you're running your
own programs in CS50 IDE down here, you're actually using
another piece of software that fills the screen, CS50IDE, a.k.a. Cloud9, which is the program essentially
running somewhere in the cloud. And we'll start to make this
distinction and through examples will the distinction among these
different types of software begin to make sense, but where is
something like CS50IDE running? Where is Facebook running? Where is Google.com running? Well, back in 1998, Google.com
was running on this. This was Larry and Sergey, the founders
of Google's, very first implementation, apparently, of their
first rack of servers. So servers are generally stored
literally in a rack like this. It's usually like 19
inches wide by convention and you just stack computer on top
of computer on top of computer, but things were very bare
bones back in the day of Google and so there weren't
even plastic or metal cases around a lot of their computers. They were trying to minimize cooling,
minimize cost, presumably, and cram as much hardware into that
footprint as they could, and so you actually see a
lot of the wires and hardware kind of sticking out, and this
is on display now out west. Of course these days, fast forward
just a decade or two, and this is one of Facebook's data centers
where it's the exact same idea, but much fancier, much prettier,
much better lit servers, but who serve, at the end of
the day, the exact same role. There are bunches of servers
around the world that are just sitting there waiting
for you on the internet to make a request for a
homepage, for an email, for any other type of
information so that it ends up getting sent from server to client. And in fact, if you've ever thought
about those words server and clients, which is probably the
lesser used of the two, but a server-client relationship is what
you have when you go into a restaurant, and you ask the waiter or
waitress for something to eat. He or she brings something back
to you, thereby serving you, the client, and the relationship on
the web is pretty much the same thing. We are the clients. Our browsers are the
clients and out there are servers like these who are
serving up content and information, such as on Facebook. So let's consider how all
this data even gets to us. So odds are, these days, if you want
to visit Facebook.com on your laptop or desktop or phone without
using the app, you probably just type in Facebook.com and hit Enter. If you're a little older
school or literally older, you might just actually type out
the entirety of www.Facebook.com. Both work and there are technical
reasons for that related to the topic we'll talk about today,
but both of these work just because Facebook has
configured their website to work in either of those addresses. Now, as an aside, why are so many
websites therefore prefixed with "www" if both of them actually work? Like, why have both? It seems just like
redundant to type "www." if it's implied by Facebook.com. Yeah, what do you think? AUDIENCE: Is the "www" required? DAVID J. MALAN: Is it required? Nope, not required. Not required. Yeah? AUDIENCE: Is it to identify that
it's part of the World Wide Web? DAVID J. MALAN: Kind of, yeah. It's to identify that it's
part of the World Wide Web and no one really says
World Wide Web these days. We of course just say web, but back in
the day and back in my day, frankly, it wasn't obvious to
a lot of human beings what Facebook.com might actually
even mean, irrespective of the fact that it didn't exist at some point. And so there was this sort
of signal to the world whereby you just started prefixing
domain names with "www" just to make super clear to
users, oh, this is a website! This is one of those things
on the internet or the like, and also back in the
day, there were also different services that have
fallen into disuse these days, like FTP was quite popular
and Gopher, we used it when I was here and other such things. And so "www" was just an arbitrary
prefix that just kind of said what it is, but these days we humans pretty much
know what a .com is and .net and .edu, but even that kind of road is
changing again because there's dozens, hundreds of top-level domains. It's not just .com and
.edu and others now. I mean, there's hundreds
of these things out there and so it might even be
non obvious to this day. So some people, therefore, go really
all the way in and type out http:// and then the address
that they want to visit, but odds are most of us don't do this
because our browsers just help us out and prefix that, but that's
where our focus will be today. Like, this actually has
significance because it specifies what protocol or language,
what convention your computer, your laptop should use when
talking to that server's address, and actually, if you want the
communications to be secure, odds are your typing or your
browser is doing it for you. Adding an s there, denoting secure
or encrypted a la Caesar and Vigenere from some weeks ago and
technically your browser is also probably adding
a trailing slash even if it's not shown to you, which denotes
you want the root of the server, like the default homepage
or something else. In fact, maybe you do
want something else. You don't want just Facebook's
website, you want Mark's page, and so you could specifically /zuck
or whatever the username actually is. So this is a very long way of
saying all this kind of stuff that we type or autocomplete and
take for granted these days actually has some very fundamental
meanings, all of which make possible the entirety of the web. So what actually goes on with HTTP
and what does that actually mean? So HTTP is a protocol. It is a set of conventions
that dictate how a computer client, like a browser on your
Mac or PC, talks to a web server, and it's a protocol in the sense
that it's not a language, per se. It's really just a set
of conventions and so like this is kind of an arbitrary
and awkward human convention. Hello, I'm David. AUDIENCE: I'm Kara. DAVID J. MALAN: Kara, so Kara
and I just introduced ourselves. I extended my hand and she
kind of knew instinctively that it would be awkward not to
shake my hands or to shake my hand and so we exchanged
pleasantries and said hello. So this is just kind of
a silly human convention whereby we've agreed sort
of socially in advance how to greet each other in that way. So HTTP is pretty much the
same thing, but in this case you're not actually physically
doing something like that. You're kind of sending a
message from client to server. You're putting a sort of handwritten
note into an envelope this, addressing it somehow and then sending
it off on the internet for Kara or for Facebook.com or
Google.com to actually receive, and then when Google or Facebook
or Kara receives that note, reads and sees what I want,
the server or the human responds in some according way. So what then goes
inside of this envelope? Well it turns out that
when a web browser, like Chrome or Edge or Firefox,
Safari, make a request, the message they put inside of one
of those envelopes, albeit virtually, is literally this text. It's like if I had it written down on a
piece of paper literally GET / HTTP/1.1 Host: www.facebook.com
and then the "..." just means there's other stuff in there,
but it's less fundamentally interesting right now. So what's this all mean? GET is just a verb and it
kind of says what it means. Go get something from the server. HTTP/1.1 mentions the version of HTTP
that I am using or the human convention that Kara and I were
actually implementing there, and so 1.1 tends to be the one most
in use these days, and then /, again, it's just like the default identifier
for the homepage of a website, the default page that you see in
the absence of typing something like and /zuck or some other suffix. Host: Is the same thing as whatever's
on the outside of the envelope. So if I'm sending a message
to www.Facebook.com, I'm just making super clear inside of
the envelope which server should expect this request just in case there
are multiple websites running on the same physical server, which is
possible for economic and performance reasons these days. So alternatively, if I were trying
to visit Mark Zuckerberg's homepage, the request in that envelope's
going to look almost the same, but I'm going to be more precise. /zuck instead of just /. Meanwhile, if I'm requesting
something from Yale's homepage, the request would look like
this, or from Harvard's web page, the request would look
like this and so forth. So once Harvard or Yale
or Facebook w actually received the request in that
envelope, opened it up, look at it, how do they decide how to respond? Well at the end of the
day, I'm probably expecting to get back from the web
server some kind of, excuse me, web page whereby I want to
see my news feed on Facebook or I want to see the
search page on Google or I want to see Harvard's
homepage, Yale's homepage or whatever it actually is. So there's a lot of information
probably packed into that envelope, but there's also a
conventional, a standard, response that looks literally like this. So at the very top, for instance, of
the "letter" that comes back from Google or Facebook is a message like this. Got it. I'm speaking HTTP version 1.1 also. Everything is OK and 200. We'll come back to
that in second and then the type of content
inside of the envelope, if I keep digging
deeper into it, is going to be text, but more
specifically, HTML, and we're going to focus on that today too. HTML, Hypertext Markup Language. This is going to be the language in
which web pages themselves are written. Then there's usually some
other stuff and way down there is the actual contents of Yale's or
Harvard's or Facebook's homepage, but let's zoom in on
this for just a moment. 200, odds are you've never seen or
cared to see this kind of number before, but have you ever used the
web and requested a web page and seen some number that for some
reason keeps popping up in your life? AUDIENCE (IN UNSION): 404. DAVID J. MALAN: Yeah, 404. It's just kind of a weird thing
that many of us in the room know 404 even if we're not
necessarily technophiles and know what HTTP is, but it turns
out that in these envelopes coming back from servers sometimes are
not just 200 OK, but instead-- dammit, typo. This would be much more effective
if I said it's not this. It's not found. So inside of the envelope is 404
not found, which means exactly that. The file was not found that
you were actually seeking. You mistyped the URL,
the page was deleted. Somewhere or other, there was
some kind of typographical error and it turns out there's a lot
of the status codes in HTTP and there are even more
than these, but these are the ones we might
see the most commonly. 200 OK means all is indeed well. 404 means not found. 403 forbidden might be
if you've not logged in or don't have the right access
in order to access some folder or file on some website. This is really bad and we'll get to
know this over the coming weeks as we ourselves start implementing
code on a server. 500 internal server error, if you will,
shall be our new segmentation fault, but hopefully not too frequently. It means something is wrong
in the code on the server. This was an April Fools' joke
back in 1998 I believe, yeah. So April Fools', some humans decide it
would be funny to announce to the world that there's yet another code,
which is 418 I'm a Teapot, which kind of comes up from time to time
in actual code and then there's this one-- 301 Moved Permanently. It's kind of a scary sounding
thing, as though a website just kind of up and left and went elsewhere,
but it's a powerful mechanism in the following way. If a server inside of
one of these envelopes responds with a response
like this, there tends to be one other piece
of information at least. So if I visit a website
like http://harvard.edu, I might get back in the response
from Harvard's web server this answer, 301 Moved Permanently. Like where the heck did Harvard go? Well you can see the location
based on this other line and all of these things
collectively moving forward we're just going to call HTTP headers. Anytime you see a word
and a colon, that's an HTTP header with a name
and a value and the first one ones a little anomalous
in that there's no colon, but that's the only
one without the colon. So location colon
http://www.harvard.edu. Well what's going on? Well, if I actually visit Harvard's
homepage exactly as follows, let's take a look at what happens. I'm going to go to
http://harvard.edu, Enter. And notice there's a whole bunch of more
stuff happening on the screen thanks to what's called autocomplete, which
is a feature of Chrome or my browser. It has nothing to do
with the topic at hand. This is just Chrome trying to be
helpful today as on your computer too and suddenly, even though I tried
to go to http://hardvard.edu, , where did I clearly end up? HTTPS, so they added the s somehow
and what else has it added? [VARIOUS ANSWERS FROM AUDIENCE] DAVID J. MALAN: Yeah, the web. The www prefix was added. So this is not sort of all
that important to the user like I got to my destination somehow
but the reason for that is as follows. I'm going to go ahead and
open up, in the IDE actually, just a terminal window here and I'm
going to use a new program called Curl for connect to a URL
://harvard.edu, Enter. And I get back some cryptic looking
things and that's actually HTML, and we're going to come back
to this in just a moment because it turns out there's two
parts to the messages coming back. There's the headers and then there's the
content, and we're seeing the content. So more on that in a bit. I want to look a little higher up in
the response and literally just look at the headers, and to do that-- and
you would only know this from reading the documentation-- -I means show me just the
headers that are coming back. So here now we see the
headers coming back and you'll see indeed we got
back a 301 Moved Permanently, and then there's some other stuff
we haven't really focused on, but at the bottom is something we have-- location, which says to the
browser go to this URL instead. All right, so let me do that. Let me save time and just copy paste
this and then do curl -I of this, Enter, and pretend to be a browser
requesting that page now, but now where are they trying to send me? HTTPS. So this suggests via some
mechanism, some human at Harvard decided one, uh-uh. We're not going to be
called like harvard.edu. We shall be www.hardvard.edu
for whatever reason and then they also decided that if a
user visits us using HTTP, which is not encrypted, not secure, we're going
to forcibly tell them to come back via secure channel, and we won't
dwell today on how that's implemented, but much like in Caesar or Vigenere
where was a way to encrypt or scramble information, browsers
can do that too and it's implied by using the HTTPS
instead of just HTTP. All right, so let's actually
visit this one more time. Let me go ahead and
highlight that location. curl -i of that address and now an
overwhelming amount of information coming back, and that's why I kept
putting the ...'s, but the juicy stuff is at the top. Now everything is 200 OK and
indeed, if I run it without -I so I see the contents
of the envelope, it's like looking deeper
inside of the envelope, now I actually see a lot more
content, which collectively composes Harvard's
homepage, and it turns out we can see this even in Chrome. Let me go over to my browser again
and if you've not done this before, it turns out that you can go
to your View menu, Developer, and go to Developer Tools-- and we'll
do this in upcoming problem sets-- and I can go here and see a whole
bunch of features, only a couple of which we might look at today. Specifically, I'm going to
click on this Network tab. So to be clear, Developer Tools in
Chrome still shows me the homepage, but it kind of dedicates
part of the screen to these special developer tools that
make it easy to understand and actually create websites. So eventually we'll
start using this ourself, but what's nice about the Network
tab is that you can sniff or monitor all of the requests going
back and forth between browser and server in the so-called envelopes. So I'm going to hit a little
Clear symbol here first just to get a clean slate. I'm going to click preserve log so
I can actually see what's happening and now I'm going to go ahead-- actually, I'm going to
go ahead and do this. http://harvard.edu, so the sort of
incorrect version that I'm going expect the browser to fix for me. I hit Enter. A whole bunch of stuff is
flying across the screen and in fact if we zoom
in on this, you can see that just visiting
Harvard's home page requires 85 envelopes it would seem
going back and forth with pieces of the webpage and we'll see soon
with some of those pieces are, but it's not just one file coming back. It's bunches of files. Maybe images, maybe fonts,
or some other things too, but I'm going to scroll
up in this output and now notice the story
that's been told here too. So the very first request,
which I can hover over and see, came back with a 301, which we
now know is Moved Permanently, or it's a redirect. Then if I hover over
the second one, you'll see that it's a slightly more precise
URL, www, but still with HTTP. So that got redirected and then lastly,
if we look at the third line here, this is the one we
ultimately ended up at and indeed it comes back 200, as do
bunches of other results thereafter, and we'll see what those
200s actually mean. Now, you can do a
little better than this and it's perhaps fitting that our
friends down the road indeed did. Let me go back to the IDE. Let me go ahead and clear this and
instead of curling harvard.edu, let me do http://yale.edu
and ask the question, what would be a better approach--
knowing these ingredients that we now have of how redirects work. How could Harvard do better in terms
of getting the user to the address that we intend them to be at? Yeah. AUDIENCE: By not forcing
like, two redirects? DAVID J. MALAN: Yeah, by not
forcing two redirects, right? Even if some of this
material is new, we've long talked now about
correctness and design and style and we've seen some messy style on
the screen and that's fine for now. More on that later. It seems to be correct
because it's working, but it feels like it
could be better designed because why make one request
then make another request just to fix the first request then
make a third request just to fix the second request? Why not combine them? And, as it turns out, someone down
the road had that same intuition and so we visit yale.edu with
just HTTP and without the www, they, in one fell swoop,
actually redirect us to the right place in this case. So, with that said, it's
perhaps fitting that just a few years, well,
some years ago now, you might have tried to visit
this particular address, and this is something I
can only do in Cambridge. If I go ahead and open a new browser
and go to http:// shall we say safetyschool.org and hit
Enter if you've never been. Oh, interesting! [STUDENTS LAUGH] DAVID J. MALAN: And apologies
for those of you tuning in online live from New Haven. So how is this possibly working? It's actually a very simple heuristic. If instead of selecting Yale or
Harvard or any other address, if I literally do like safetyschool.org,
we can wrap our mind around what's going on underneath the hood
safetyschool.org has moved permanently to New Haven it would seem, but it's via
this very simple mechanism that someone back in 2000 registered
this domain name, and so actually as I was looking
this up in the history last night, I was amused to find that whoever bought
the domain has been paying for this domain name now for 17 years for this
joke annually, but it's well worth it, but I think it would be-- [STUDENTS LAUGH] DAVID J. MALAN: But I
think it's only fair now, it's only fair if we take
a look at another one too. It turns out that if you visit
harvardsucks.org, that one has also redirected, this time to www. So let's follow this little
breadcrumb. curl -I harvardsucks.org, and this one's OK. So that means something
lives at harvardsucks.org and it does not as cleverly
redirect to harvard.edu, but to introduce this,
let me actually introduce a friend of ours who's now very
awkwardly visiting from New Haven today. Hi Natalie. Do you want to come on up and
say hello for just a moment? So this is Natalie, who is our head
of the class with Benedict Brown and [? Anushri ?] and with
[? Staleos ?] in New Haven. If you'd like to say a quick hello? Hi, Hi, everyone. DAVID J. MALAN: So nice to have
you here today and as you know-- do you want to make mention of
what we're about to see here? What happened back in 2004
just a few years later? AUDIENCE: We did a
prank back, basically. DAVID J. MALAN: OK, so perfect set-up. Thank you very much. Hello to Natalie. Let me go ahead and hit
play on three minutes that are kind of hard
to justify academically, but it's perhaps one of the best
pranks that's ever been played. Long story short, our
friends down the road got together with a few of themselves
just before Harvard Yale, which was to be at Harvard
that year and actually mapped out using software,
a sort of grid system that lined up with all of the
seats in the Harvard stadium, whereby you assume that a human
each takes up some amount of space, and then they used special
software to figure out how they might spell something
out in the audience in a way that would be readable to the opponents,
the Yalies, on the other side. So if we could dim the
lights for this look back at yesteryear and a
slight use of software. [MUSIC PLAYING] - All the way at the top. - This is for you Yale. We love you Yale. - We're here to cheer for Harvard. - Yeah! Let's go Harvard! - Yeah, Harvard! - Take the top one and pass it down. - It's not going to say
something like Yale sucks is it? - It says Go Harvard. - We're nice. - You see that shit? Look at them, they have the paper! It's gonna happen! It's actually gonna happen! I can't [BLEEP] believe this. - What do you think of Yale? - They don't think good! - It may be a complete
mess, I don't know. - Does everyone have it? Does everyone have their stuff? - The probability that it's
gonna be legible is very small. - It's gonna happen! It's gonna happen! - It's too complicated. - Look, look at all the signs. - I know but it's too complicated. - Uh, what houses are you guys in? That's not a real house. - Ho-fo? - Yeah. You guys aren't from Harvard are you? - No, fo-ho. Pforzheimer! - Yeah, but he said ho-fo. - Let's just make sure everyone has it. - Well she's probably drunk. - Are all the cards disributed? - Almost! [APPLAUSE] [CHEERING] - Hold up your signs! - They [BLEEP] did it! [CROWD CHANTING "YOU SUCK!"] - They [BLEEP] did it! They [BLEEP] did it! [CROWD CHANTING "YOU SUCK!"] - What do you think of Yale sir? - They suck! - One more time! - One more time! - Oh and there it goes again! [CROWD CHANTING "HARVARD SUCKS!"] [END PLAYBACK] DAVID J. MALAN: All
right, we've been talking about what goes on
inside of this envelope, but what goes on on the outside? So when you hand off this envelope
from your laptop or your phone to the internet, how does it
actually get to its destination? Well you've probably heard this
acronym IP, or internet protocol, and it turns out that every computer
on the internet and every phone in this room and any very laptop
in this room has a unique address. That unique address is known as an IP
address and it's much like the address of a building in the real world, like
the Science Center might be a 1 Oxford Street Cambridge, Mass 02138, USA. Down the road is the CS building. 33 Oxford Street
Cambridge, Mass 02138, USA. So those long strings
uniquely identify buildings in the world for the
mail service and the like and similarly do IP addresses uniquely
identify computers on the internet. These addresses are much
more succinct though. They're not long strings they're instead
just numbers that have four parts and each of those numbers within the
IP address are a value from 0 to 255. So the lowest IP address is all
zeros and the biggest IP address is all 255s with some constraints. You can't quite use
all of those numbers. So just as a sort of quick teaser,
if the smallest number is 0 and the biggest number for each of
these sections of the IP address is 255, how many bits are being used
for each of those four numbers? AUDIENCE: 8. DAVID J. MALAN: Yeah, 8. So remember like 8 bits gives you 2
times 2 times 2 times 2 times 2 times 2 times 2 times 2, which is 256, and
indeed we have 256 total values from 0 on up to 255. So an IP address is 8 plus 8
plus 8 plus 8, or 32 bits total, or, just come really full circle
with week zero, if you have 32 bits, roughly how high can you count? Like what's 2 to the 32 power? Yeah, it's roughly 4 billion. So, long story short, the implication
of this very simple definition is that apparently there can only be,
in this model, four billion computers, phones, refrigerators, internet of
things, devices on the internet at once if they do all need an
IP address that's unique. So I've been telling a
slight white lie in that they don't have to all technically
be unique because there's ways we can share
addresses, and it turns out there's even bigger addresses these
days that aren't just 32 bits but 128 bits, which is just massive and daresay
unpronounceable how big that number is. So we've gotten ahead of this issue, but
you'll find that in a lot of locations, companies and internet service providers
like Comcast and Verizon and the like and campuses like Harvard and Yale,
you can notice that they tend to follow patterns, like many of the IP
addresses here at Harvard start with 140.247.something.something or 128.103. Down the road in New
Haven, a lot of the IP addresses there start
with 130.132 or 128.36, which is not at all interesting to
the humans who are using these IP addresses, but it is useful to
the servers or the devices that are actually routing these
envelopes from one place to another. Meanwhile, in our homes and even
sometimes on campus these days, there are also what are called
private IP addresses, which are numbers within
these ranges, and this has been a solution so that when
you sign up for Verizon or Comcast back home or your parents
do for internet service, you technically only get one IP address
from your internet service provider. That's what you're paying for per
month, but thanks to something called network address translation
and other technologies, you can actually give all
of your siblings and parents and family members or roommates in the
household their own unique address. It's just private in the sense that
no one else on the outside world can access it unless you
initiate the connection. So this is generally why
at home you can reach any website you want any service
on the internet that you want, but you can't have like
random people necessarily trying to get into your
laptop or your device at home because there's a device, a home router,
that translates these private addresses into otherwise public addresses,
but for now the takeaway really is just that every computer on
the internet has an IP address, and if you've ever poked around your
Mac, like under System Preferences, you can actually see this. So I've just pulled up a screenshot here
of a network control panel on Mac OS and if you look roughly
there on your own Mac, you should see that your
IP address is something. It will completely vary by
person and by geography, but you'll see your IP address there. On Windows, at least Windows
10, you can see your IP address under Settings here as highlighted here. So this has a very different
address, but that's just because this person was on
a different network all together. So, where did these IP
addresses come from? Well back in the day
someone would literally come to your home to set up your
Comcast or your Verizon internet service and he or she would like type in
these numbers into your Mac or PC and then leave, and you would
have one computer on the internet. These days it's a lot more dynamic. You don't need someone coming by. That certainly doesn't scale very
well because there's other protocols. HTTP is this protocol we talked
about earlier about web pages, but there's other protocols like Dynamic
Host Configuration Protocol, which is a mouthful but it just means that our
Macs, our PCs, Android phones, iPhones and the like, if they speak
this protocol, when you first turn on your phone or boot
up your laptop it knows, if it has support for this protocol,
to just announce to the internet, hello world. I'm awake. What should my IP address be? This just kind of broadcast message
and if Harvard or Yale or Comcast or Verizon or wherever
you are in the world has a DHCP server whose purpose in life
is just to listen for those hellos, that server should respond using the
same protocol with your actual IP address, and it figures out which one
to give you based on and available pool of numbers typically. So that's how you might
get this but there's other things in these control panels. In fact, if we look a little lower
on Windows, there's DNS servers too. Domain Name System. Another acronym and a bit of a mouthful,
but you can also see this on Mac OS/2 if you actually click Advanced
and actually take a look. Here, for instance, there's mention of
something else altogether, a router. So there's lots of different
addresses going on here and lots of different servers. So how do these all piece together? Well, DNS is an interesting
one in that it's going to be the one that translates
domain names to IP addresses, right? None of us ever probably visits
http:// and then a number, right? Like, we visit facebook.com,
google.com or the like, but that's because our computers knows
how to translate one to the other. So in fact if I do this command,
nslookup for name server look up and then I type in something like
google.com, I'm asking the computer, in this case, the IDE, what is
the IP address of google.com. I know it as the human as
google.com, but the internet knows it by its numeric unique address, and
it turns out Google has several, and even this is a bit of a white
lie because they have thousands, but the ones that my
computer is being told to use is, for instance, this one or this
one or any of these other addresses. So let me see what
actually happens here. If I highlight that address and open up
a browser and go to http:// and that IP address and hit Enter, notice
it actually seemed to work. Well, why is that? It's a little hard to see
it in Chrome, but let's go ahead and open up the Inspect tab
and go to Network just like before. Let me click Preserve Log so
that it saves everything here, and I could be using curl. So the curl was just
the simpler version. Now I'm using the more
familiar graphical version. Let me go ahead and do that again and go
to http:// and that IP address and hit Enter. A whole bunch of stuff flew by
even just for Google's homepage, but notice what happened. On that very first-- whoops-- request, if I hover over it, I see
http:// and then the number that I typed in, but it's a 301
because, what was the response? We can actually see these responses. Let me click on the status code
here, or the row, go to Headers and notice here, if we zoom
in, we'll see that Google responded with this location. So someone at Google
just decided, OK, fine. You figured out one of our IP addresses. That's great, but we don't want
you to see that in the URL. It's bad for branding. We don't want you to
bookmark an IP address because it might change later on. So we're using the same
mechanisms as before, but that's how we might do the
lookup and we can see the same thing for any number of websites. Here we go nslookup of harvard.edu
and we get back just a couple here. If I do the same on Yale, I'm going
to get back different IP addresses. Yale has even more in
this case and so this is how the computer's figuring
out to where to send the data. So what goes on this
envelope then, it's going to be not facebook.com
harvard.edu or yale.edu, it's actually going to be
the address like 1.2.3.4 or whatever the actual IP address is
of the server I'm trying to send to. Now, of course, I expect a
response from the server. I want to get back my
news feed or I want to get back Harvard or Yale's homepage. So what more should I probably
put on this virtual envelope, just intuitively? Yeah. AUDIENCE: Your own IP address? DAVID J. MALAN: What's that? AUDIENCE: Your own IP address. DAVID J. MALAN: My own IP address, yeah. So just like in the human
world, just in case something goes wrong with the post office, I
might put my own address, 5.6.7.8, and actually put that on the envelope so
that if something goes wrong or, better yet, if something goes right and
they're ready to give me a 200 OK, it can actually come back to
me because they know from which address this thing actually came from. So who is it or what is it
that's doing all of this routing? Well it turns out there's servers
on the internet called quite simply routers, otherwise known as
gateways, which is just a synonym, and they're kind of artistically
pictured here as just dots across the world, and there's
hundreds, thousands, tens of thousands of routers. Odds are you yourself at home,
if you had internet access, have at least one such router
and its purpose in life, again, is to take data from inside your
household and send it to the internet, and then any responses
you get, to send it back to the appropriate
laptop or desktop or phone or smart device that happens
to be in your own home. And we can actually see this too. Let me go ahead and in CS50
IDE, try one other command. I'm going to go ahead and
type traceroute and I'm going to trace the route,
say, to yale.edu from here, or technically from the IDE. So if I hit Enter here, we're
going to see a few lines of output, and if you try this
at home, just realize I've configured my IDE a little
differently to simplify the output. So it looks like there's
five steps between Cambridge and New Haven or technically
the IDE and New Haven, but what are each of these steps? Well between here and Yale, if we
continue that version of the story, there are, it seems, five routers. There are five computers that
have like lots of RAM, big CPUs that can handle a lot
of internet traffic that are figuring out how to
get my envelope from this origin to this router, to this router, to
this router, to this anonymous router, to this one. Sometimes the routers are configured
not to answer these questions from this program traceroute. They sort of keep it
to themselves, and you can see on the right of each of
these IP addresses some numbers. So just take a guess, what do each
of these numbers represent, perhaps? Whats that? No it's okay. AUDIENCE: Milliseconds? DAVID J. MALAN: Milliseconds, yep. So milliseconds that are
measuring what do you think? Time to go, or time to
reach that specific router. So we can kind of infer-- and this is the kind of amazing thing. To get me to New Haven
takes like two plus hours, but to get an email, to get
an envelope with a message takes like 10.597 milliseconds
to get data from here to there, and then hopefully back if
it's a request for a page. Let's do something a
little farther away. So let's do like stanford.edu,
tracing the route here, and already we can see that the
numbers are a little bit higher, and that makes intuitive
sense in that Stanford's a little farther away than New Haven
and it takes as many 41 milliseconds to reach that. If I go even further and I
read like a company's news like cnn.co.jp, which is the top-level
domain for a lot of servers in Japan, you can see a real uptick in just
how many milliseconds it takes, and in fact, there's
something curious here. Why does it take so much more time
to get from router number three to router number four do you think? AUDIENCE: The ocean. DAVID J. MALAN: The ocean, yeah. So there's a really big body of water in
between the US's west coast and Japan's coast, which probably explains why
not just between three and four, but really every router thereafter
is that many milliseconds away. So these aren't cumulative. We're measuring constantly
from here to there, from here to slightly farther,
from here to slightly farther. So it makes sense that
once you cross that ocean, that's kind of the total value
that you're actually going to see, and it's fascinating really. I mean, throughout
the entire world there are not only wireless technologies
today, but very much wire technologies and if we take just
a few seconds, we can see this visualization of so many of the
transoceanic cables that have actually been dropped by big ships that carry
many, many, many, many bits from one coast to another. [VIDEO PLAYBACK] [MUSIC PLAYING] [END PLAYBACK] So, with all of those cables capable of
transmitting data all around the world, it turns out there's
still one more problem. Even if we want to do
something simple like download an internet image
of a cat because there's different types of servers out there. There's my computer here like my laptop. I'm running Mac OS or windows. There's all those servers
in Google's data center and in their racks and
Facebook's and the like and in between all of those
servers there are lots of routers, but it turns out that those
servers in those racks at Google, at Facebook, even at
Harvard and Yale, there are servers that can do multiple
things because technically, even though we humans tend to talk
about servers as being physical devices, a server is, as we started
today, really just a program. It is a piece of software that
someone wrote that, when run, listens for requests on the internet
and responds to those requests, generally by spitting out information,
text or 0s and 1s or, in some cases, cats. So upon receiving an
envelope, then, how is it that a server knows whether it's a
request for a web page or it's an email or it's a chat message or a voice
message or any number of other things? It turns out we need one more piece of
information at least on this envelope. It turns out that the
world has standardized via another protocol called TCP,
Transmission Control Protocol, that you need at least one other
number on these envelopes, and that number corresponds
to the type of service that you're trying to
access or the type of data that you're trying to send or receive. So, for instance, 22 is for
something called SSH, Secure Shell. This is something that most CS majors
might use, but most people in the world wouldn't use this because
it's entirely command line and it allows you to connect
securely to some remote server without using something like a browser,
but all of us generally do use browsers and HTTP, it turns out, all this time
has had a unique number associated with all of those requests. 80 is the number and if we visited
any URL starting with https, turns out there was a
special number, 443, that humans years ago decided just
uniquely identify encrypted web traffic requests and responses. 587 is used for Simple Mail Transfer
Protocol, which is for email. Excuse me, 53 itself is used for DNS. So if you ever send a
message to a server saying what is the IP address
of google.com, you're using number 53 to identify
whatever machine or software can answer that type of question, and
so we can actually see this too. If I go back to my IDE and I actually
do curl -I https://www.harvard.edu, this of course, worked
before and it was 200 OK, but it also will work if I more
precisely say specifically send this request to TCP port, or number, 80 and-- damnit. Oh, it's wrong because made a
compelling pedagogical mistake. So what did I do wrong? AUDIENCE: Https. DAVID J. MALAN: Yeah, so I kind
of screwed up my numbers here. So I said https, but I meant to
say http if I'm using port 80 or, conversely, if I want to talk
to the secure port which is known, I actually want to say 443,
and that one in fact works, and I can do it again even in Chrome. If I go up to my browser
and go to http://yale.edu/80 and let the redirects
happen, that too will work. It's just browsers, to keep our minds
focused on the website we're actually trying to visit and not distracted
by technical details like :80 or slashes or even
sometimes http itself, just hide that from the URL bar. It's all there. It's all happening, but we humans
are getting a little more comfortable with the internet over the years
so Chrome and other browsers are just starting to hide some of these
lower-level implementation details. So that really means, when I actually
want to send a request to a web server, I should really write
:80 on the envelope to make clear that that's
going to a web server listening on port 80 or maybe 443,
and then, you know what? It turns out, and we won't
dwell too much on the details, even my Mac or your PC also has its own
port number for all of these requests, right? And it would be pretty annoying if you
could only visit one website at a time or you could use Gmail
or Skype but not both at the same time, or Facebook
Messenger or Google Chat but only one at the same time. That would be pretty
limiting, especially when we have all this computing power. So it's also the case
that your own computer, any time you send a
request on the internet, chooses a random or pseudo-random
number to uniquely identify the piece of software on your
computer that's waiting for the reply. So this might be not port 80. This is going to be a
bigger number like 1025, or some large-ish value all
the way up to 65,000, even, or 32,000 that now uniquely
identifies the port on my computer, and that's how your computer can
do multiple things at a time, and when I get the response
those values are just flipped, but there's one more piece. Like cats can be pretty high
quality and videos certainly take up a huge amount of data. Netflix videos and any
streaming videos are taking up a huge amount of
information and it would be pretty annoying to your
neighbors if any time you were watching a movie
on Netflix, you had to be done watching the
movie in order for a neighbor to also watch a video on
his or her computer as well. So it turns out that what
computers also do thanks to IP and TCP is, when they're used together,
they offer one more feature still. It turns out that if I want to
download a picture of a cat, and we have a nice
printed version here, I'm not going to get the whole cat
in the one envelope most likely. This cat or this video
file or whatever it is is actually going to be divided
up into a few different pieces. So this message might get chopped
or fragmented into four pieces. Each of those four pieces now might
go in each of one of these envelopes here, here, and then here
with the third and fourth, and what's nice, though,
about TCPIP is that it provides at least two features for us. One, IP ensures that every computer on
the internet that speaks this protocol has an address. So IP handles the getting of
the data to some destination. TCP, the other half of
this, ensures or guarantees with high probability delivery--
that the data actually gets there. Because as you might have gleaned
from even the animation of all of the transatlantic cables and all
of the interconnections among routers, things can go wrong, right? Routers, it turns out,
can get overloaded. Their buffers can
overflow such that they can't handle all of the traffic
coming into them and in fact, if you try to watch Game of
Thrones, some episode on HBO and you couldn't access it at some point
or [INAUDIBLE] or some tool like that. If they're overloaded,
what does that mean? It just means the server, or the
routers between us and the server, are getting so many darn envelopes
that they just can't keep up and can't hold onto them all at once,
and so sometimes packets do get, so to speak, dropped, both
physically and also digitally, and this means some packet is lost. And so what's nice about the internet
is that when my computer here talks to the nearest Harvard router
that may very well have antennas in a room like this or an access point,
I might send off a packet here and here and let's send this all the
way to the back if you could, but these packets, as you
can see, don't necessarily need to travel the same
[? path ?] because-- what's your name in the second row? AUDIENCE: Monsi. DAVID J. MALAN: Monsi. So Monsi is getting a little busy. So Kara, if you could
route to someone else. This is literally the effect
that happens on the internet. If one router, like Monsi,
gets a little bit busy and her attention is elsewhere or just
has too many packets to deal with, she won't even necessarily
drop it but maybe their path will just
be routed around her, and that's what's nice about having
this mesh network around the internet. Now unfortunately, one of
those packets can get dropped and in fact this is a perfect example. If you want to drop it, drop it. Uh-oh, a packet was dropped! What TCP does for us is the following. Once those envelopes reach
hopefully one specific person-- OK, you are the lucky winner. Whoever, wants to-- how many do we have? Two there? Where did the third go? That's OK. TCP can handle multiple
packets being lost. AUDIENCE: It's over there. DAVID J. MALAN: Oh, and so packets also
don't take the shortest path sometimes on the internet. So what might happen? So let's assume for
the sake of discussion that those packets did make their way
to at least one of our audience members here. He or she, upon receiving
them, would also see not just the origin address
and the destination address. There would also be some notation,
like a memo line on the envelope saying 1 of 4, 2 of 4, 3 of 4, 4 of 4,
so that the recipient can infer from that little hint whether or
not they received all 4 or just, as in this case, a subset
thereof, and in that case, assuming the computer speaks
TCP, it can simply say, hey David, resend me packet
number 1 or packet number 3 or whichever were actually lost. And so together all of this
happens at blazing speeds. 10 milliseconds to do all that
back and forth to New Haven, let alone even faster here
on campus, but those really are the basic principles
and building blocks that are just getting our data
from one place to another. Of course, the real
interesting stuff happens when we dig deeper into this
envelope and look at the contents. Not just the cat as in this case, but
the language, HTML and something else called CSS which we'll
do shortly, but I thought it might be fun, especially on the
heels of our look at forensics, to take a look at just how
sort of presumptuous Hollywood tends to be when presenting us
humans with technical details that now you'll perhaps have an
even better eye for in addition to the age-old "enhance" line. [VIDEO PLAYBACK] - It's a 32-bit IPP4 address. - IP as in internet? - Private network. [? Tamia's ?] private network. [STUDENTS LAUGHING] - She's so amazing. - Oh, Charlie. - It's a mirror IP address. She's letting us watch what
she's doing in real time. [END PLAYBACK] DAVID J. MALAN: OK, so
we'll hold it on this screen here because one, a few of you
laughed when you saw the bogus IP address because the number was what? AUDIENCE: 275. DAVID J. MALAN: 275, which
is too high and that one we could forgive because you don't
want like random people pausing their videos on the internet then
trying to hack into or get access to that URL, but even funnier is
when the hacker is being described as doing this on the screen
as part of their attack. This is like the source code in
a language called Objective-C for some kind of drawing
program, as suggested by the use of crayons in
the code as a variable. So let's pause there and when we come
back in five minutes, we'll take a look at HTML itself. All right, so we're back and we're
about to learn a new language. Though this might feel like
a lot to do in just an hour, this one's a markup language. So it's not a programming
language, which means you're not going to see loops. You're not going to see functions. You're not going to see conditions
or any of the kind of logic that we have built into C and
into Scratch and eventually Python and JavaScript. You're instead going to see just
what are called tags, pieces of English-like syntax that
just tell the browser what to do and what to stop doing. So we're going to see tags that say
start making this text centered. Stop making this text centered. Start making the text bold. Stop making the text bold. So these very deliberate
kind of statements that we're going to express
using something that's code-like, but it doesn't give you logical control. So as such, there's a pretty
small language ahead of us and a lot of what you'll do
when learning HTML is just check an online reference or an
example online or look at the source code of actual web pages to just
figure out how these things are done and today, we will focus
on the fundamentals. So this is perhaps one of
the simplest web pages you can write in a language called HTML. It's a text-based language. All of the tags resemble
some English words and there's a pattern to the kinds
of things that you might type. First of all, if you're using the
very latest version of HTML, which happens to be version 5,
it's been around for a while, you simply start every web page with
this cryptic incantation at the top here. Open bracket, !doctype
HTML female closed bracket, as those things are called. Angled brackets, which you've probably
not had many occasions to type on your keyboard, but
starting soon you will. Then after that, they start a pattern. So HTML > and then all the way at the
bottom is what we'll call the opposite of that tag. If this is a start tag, this will be
an end tag, or if this is an open tag, this will be a close tag, differing
only with this forward slash that's inside of the tag. So this says, hey browser,
here comes a web page. This says, hey browser,
that's it for the web page. Again, this sort of starting
and stopping mentality. Meanwhile, inside of the web
page as denoted by the HTML tag, there are two parts, a head and a body. The head of a web page tends
to contain very little. It's usually just like
the title bar in the tab that we humans see when
you visit a website, and the body is like 95%
percent of the contents of the page, the actual viewport
or the rectangular region that contains actual content. What is that content? Well here in the head
we have a title that's going to be "hello, title"
just because and then in the body of the web
page, this web page, there's going to be "hello, body." That's it. That's HTML. If you save this text in a
file, open it in a browser, you will see a really lame web page
that says hello title and hello body, but that's a web page using
HTML tags as they're called. Anything in these angled
brackets are tags. So I can actually see this
pretty clearly even on my Mac and you could do this
on your PC as well. I've opened up TextEdit and I've
configured it to be simpler than the default, so know that I've
done a little something in advance, but you could use notepad on Windows
or any other number of other programs, even Microsoft Word if you save it
in the right way or Google Docs, but let me go ahead and just recreate
this as !DOCTYPE html, open bracket, html, and just to kind
of remember to do things, I'm going to tend to get ahead of
myself and sort of start and finish the thought and then dive in inside. Let me go ahead and do head
here, close head tag here, and I'm indenting, just for good
measure, one, two, three, four tabs, though so long as you're
consistent the browser will be perfectly content, as will we. hello, title, title, open bracket,
open bracket body, closed bracket body, and then hello, body. So that's it. I've just typed out the
exact same thing as before. Let me go ahead and save this
as not hello.txt or certainly not hello.c but
hello.html by convention. I'm going to hit Save. Mac OS is kind of warning me that this
is text, not something called HTML, but I know what I'm doing and
I'm going to say use HTML, and now I have a file called hello.html,
and if I go to my desktop, here in fact it is. And if I double click on it, there, in
fact, is that pretty simple web page and if I actually reveal
the tab, there it is. Hello, title in the very top tab of
the page and once I get rid of that do I see the body again. So that's it for HTML at least
in terms of its basic structure, but there are some other features
that we can take advantage of as well, and let's actually tease these apart. Notice, first of all, that
there is indeed this symmetry. What is opened is almost always
closed as well in the opposite order. Just as head here and
title here, and then followed by body and then
the contents therein, but because there is this
structure, you can actually think about this in a relation
to the past couple of weeks when we've talked about data structures. I would argue that this
HTML on the left is kind of equivalent to
this tree on the right, and we didn't spend a huge amount
of time talking about trees, and even when we did we used
them for algorithmic reasons like a binary search tree to
search data pretty efficiently, but if you think about it, here
is the document, which I'm just drawing with this shape
here kind of arbitrarily and it has one child like the
entire page as I'm drawing it, which is the HTML tag here. The HTML tag has two children,
so to speak, to borrow our language from our data structures. So head and body from left to right. Head has a child called title and
then title has a child of some sort, even though it's just raw text. It's not another tag
with angled brackets, just as body has its own
content there, just hello, body. So that hierarchy and the deliberate
indentation, which is there just for us humans-- the browser does
not care about whitespace-- lends itself to an
implementation in memory, and so long story short, when
your browser receives an envelope, inside of which are not just those
HTTP headers, outside of which are not just the IP
address and TCP port, but inside of which is a text
file containing HTML like that, all the browser does is
load that file into memory, read it top to bottom, left
to right and essentially build a tree structure in memory so
that it knows how to represent it underneath the hood, so to speak. And in fact, you've
seen HTML all around you even if you've just never looked
underneath the hood, as we say. In fact, if I go to
like harvard.edu and let the redirects happen in the usual way,
let me go ahead and inspect the page. This is another way in
Chrome and in other browsers to get at the developer tools. You can control click or right click
on the web page and choose Inspect. That opens up the same tab. Previously, we used the network
panel, but if I click on Elements you can actually see all of the
HTML that composes Harvard's page, and it looks beautiful here. It's nicely color-coded. It's prettily indented. I can dive in deeper
with all of these arrows, but that's probably not
how the humans made it because if I also right click or control
click and choose View Page Source, and you can do this in
any browser as well, here is the mess that actually
came back from Harvard's server. This is HTML and my
god, like, it's a lot. I see no indentation, so
style 0 here, but that's OK because it's a browser reading it. It's not a human in
this case and similarly, if we visit something like yale.edu, and
let's go ahead and open up their page source, it's similarly going to be
kind of overwhelming and a lot of it, but rest assured that even though
these web pages might look really, really sophisticated-- like, my god,
we've never written a C program with 500 plus lines of code-- a lot of this stuff is
generated, and in fact, one of the challenges of pset7 and
pset8 when we explore web programming is going to be not to write hundreds
of lines of HTML, which would just get mind numbing quickly, but
to write a few lines of Python or a few lines of JavaScript that
programmatically, like with loops, generates all of the
structure of your web page. So if it's like a web page of
photos like a Facebook photo album, Facebook doesn't have people writing
out thousands of lines of HTML code every time you upload a photo. They have code in PHP
or some other language that has a for loop that iterates
over all of the photos you've uploaded and spits out the same HTML but
different image for each of the photos you've uploaded, and that's where
web programming comes into play. You're not writing the
HTML, you're generating it by actually writing programs. So today we set the
stage for that capability but first we just need a
framework for actually doing this. So rather than use,
now, my local Mac, which is kind of lame because I can open the
web page but no one else in the world can access it, and in fact,
if we do that again, you'll notice here, if I double click on
hello.html and open the URL bar, it's curiously clearly
not on the internet. Like, it's not http, it's not
https, it's literally file://, which just means it's a
file on my local computer. So none of you could reach
that because of course this user jharvard on my laptop
exists only on my local Mac. So fortunately we have a web-based
IDE with which to put stuff on the internet, but there's a catch. The IDE itself, recall, is
a web application, right? It's code that friends at Amazon
wrote and that we added to that runs on a server somewhere and, as we'll
see, somewhat in your browser too, but more on that when we
talk about JavaScript, but CS50 IDE already has a URL like
https://cs50.io or https://ide.cs50.io slash whatever your username is. So we're already using port 80
or maybe 443 for the IDE itself. So how in the world could you
write web pages in the IDE and then serve them on the
internet if the IDE itself is already using the standard port? Well fortunately you can
write on the envelopes, when trying to access your own web
pages, a hardcoded TCP port number. It doesn't have to be 80,
it doesn't have to be 443. Those are just the defaults. If I want to actually
visit pages in my IDE, I can just run a web server
on a different port number, like 8,080 by convention
or 8,081, 8,082. Just a pretty big number that odds are
no one else is using on some system. So let's see this as follows. Let me go ahead and in the
IDE here create a new file. I'm going to call it
hello.html and I'm just going to go into that text
file, whoops, which I closed. Let me go ahead and just
grab the code that we've been using here, which is
right here, go back to the IDE, paste it into the text file here,
click Save, and now I have in the IDE a file called hello.html, and
indeed if I look at the file browser and I look on the left-hand side,
there, in addition to the sample code, is hello.html, but if I double
click this file it's not very useful because it's going
to open the editor, which is not like a web page. It's the source code for my web page. So I actually now need
to run a program that serves this file just like Facebook
does, just like Google and Harvard and Yale do, and I'm going to do this
literally by running http-server, and I'm going to say on port 8080. So -p in this particular
program means port and I'm just going to say, hey CS50
IDE, start a program called httpserver whose purpose in life is to listen
for requests on the internet, but specifically on that port number,
and serve up whatever requests come in. So I've gone ahead and hit Enter here. Starting up httpserver. It tells me the long URL
that this is available at. Your URL will be a little
different with your username and if I open this now in another tab,
it's a little cryptic at first glance. I'm just seeing the index or contents
of my directory and in there is like a secret .c9 for Cloud9 directory. Don't delete that or change that. That just has metadata
related to the IDE. Source6 I downloaded earlier and you
can too from the course's web site, but there's hello.html,
and on the left-hand side here, you'll see some
cryptic looking permissions. This has to do with who can read
and who can write your files, but for today all I care
about is that the file exists. So now, like a user on the internet,
I'm going to go to here, click on it, and viola! There is my actual web page. So notice, the URLs are very similar. Here I am on cs50.io
and here I am on cs50.io even though your user names
will of course be different, but the IDE is running
on the default port, 443. I'm now temporarily
serving up my HTML files using port 8080 just
because and so that's how a server can do multiple
things and how you can do multiple things on the server at once. So let's do something else besides that. Let me actually introduce a
few other fundamentals that might be handy when writing HTML
and let's go ahead and do this. Let me go ahead and create a
new file and we'll call this one paragraphs.html, and let me go ahead and
just name this like paragraphs and down here I'm going to have
some paragraphs of text, and I don't really know what I want
to say so I'm going to Google some-- so standard Latin-like text. Oh, I want like three paragraphs of
Latin-like text and so here we go. Then there's a random
website that just generates placeholder text in faux Latin. So, Paste. There are my three paragraphs. I'll be a little nice
and tidy and indent them so it looks at least
somewhat nicely styled. Save the file and now let me go back
to the URL I was at a moment ago. Now notice I have two files being
served by this HTTP server program. Click paragraph-- oh. OK, one, Chrome thinks
the page is in Latin. [STUDENTS LAUGH] Actually, soccer inferior
element estate planning time. Tomorrow soss quiver before as the-- that does sound like the
Latin I learned years ago. All right, so Show Original. So the point is not to focus on
the Latin, but the apparent bug. Like, what's it not doing that maybe
you thought it should a second ago? AUDIENCE: No indentation. DAVID J. MALAN: Yeah, there's no
indentation and also there's no what? There's no break. I mean this is one big
Latin-like paragraph. It's not three. Well this is simply because a browser
only does what you tell it to do. Let me go ahead and shrink this
window and, as an aside, what you're seeing here, all this mess in
the bottom terminal window, as the httpserver program is running,
it is logging all of the HTTP requests that come in from browsers just so
you can kind of debug or diagnose, but we're going to just
ignore that for now and let this thing run down
here in the background. But if I want paragraphs I need
to be a little more pedantic and actually say, hey browser, make a
paragraph with what's called the p tag, and let me go ahead now and indent
even though the indentation clearly doesn't matter. It's just to keep my code nice and tidy. So, hey browser, start a paragraph. Here's the text. Hey browser, stop the paragraph. Same thing here. Let me go ahead and start a paragraph. Then let me go ahead
and stop the paragraph. Notice the IDE is trying to be helpful. This is not helpful. This is not a password, but it's
trying to autocomplete my thoughts. That's fine. I'm just going to ignore it. Then let me go ahead and
close the paragraph and save. So it's a little more verbose, but
anything in the tags the human is not going to see, but when you reload the
page, as with command or control+R, or if you go up here by
clicking the reload icon, whatever it looks like in your browser. Now I have three Latin-like paragraphs. So it's a little more deliberate here. So that's all fine and good, but
the web is kind of more interesting when you can actually link to things. So let's actually do that instead. Let me go ahead and create a new
file called, let's say, link.html. Go ahead and paste this here and
say we'll name the title link. Let me get rid of all of this
just so I have some placeholder and I can say something
like "Hello, world! My favorite school is..." and just to play it safe
today, "stanford.edu." Save, reload, click
link.html and nothing. So here too it looks like a domain
name and it certainly is, and frankly, all of us now are probably conditioned
in tools like Slack and Gmail and other tools and Facebook that just
kind of figure out that, oh, if something looks like a
domain name, make it a link, but that's because someone at Facebook,
someone at Google knows HTML and knows how to use if conditions
and elses and just says, oh, if a string that the human has typed
in looks like a domain name ending in .edu, make it a link. But how do you make it a link? We can now do this manually. It turns out you need an
anchor tag abbreviated as a and then I'm going to close the
anchor tag at the end of the text that I want to anchor a link
to, but this isn't enough. I need to be ever so explicit as
to where I want this link to go, and so it turns out HTML also
supports what are called attributes. So tags are the things
in angled brackets. Attributes are also inside
those angled brackets, but they come after the tag's
name, and they just going to modify the behavior of the
tag, and it makes sense here to need to modify the
behavior because 20, 30 years ago when HTML was
invented, we didn't make up a tag that leads to stanford.edu. We made up a more generic tag
that anchors to some destination, and so here I can now do
www.stanford.edu, save the file, and notice, this is like saying
to the browser, hey browser, here comes a link or hyperlink
to Stanford's web site, and then the end here it says hey
browser, that's it for the link, and thankfully it's not super verbose. You don't have to repeat
the attribute at the end. You just repeat the
tag's name, otherwise you'd be typing the same
thing again and again. If I now go back here and reload the
page as with command or control+R, now it becomes the familiar
and blue underlined link, and if I click on that,
notice first it's super small. You can see where the link
is actually going to lead, and so if I click on this we'll
see Stanford's website and voila. So now we've visited their page as well,
but there's an interesting side note here, and if you want to kind of think
about things called phishing attacks or frankly, Harvard once in a
while and Yale once in awhile will email out warnings like
"beware of this phishing attack." P-H-I-S-H-I-N-G. This is when people on
the internet generally send you emails or some kind
of spam trying to trick you into visiting a phony website to harvest
your usernames, passwords, credit card numbers and whatnot, and honestly,
most of those phishing attacks boil down to this
10-line example of HTML because what's to stop me from
saying something like "Hello, world! Confirm your password at..." and then we'll say like
paypal.com and then over here, I can change this
to like davidsphishingsite.com, which hopefully doesn't exist. One year I went to badplace.com and-- anyhow, so-- [STUDENTS LAUGHING] Here I've gone ahead and saved the file,
reloaded, and the link is indeed blue, but before I click on it,
only the most estute of users is going to even bother
checking the bottom left hand corner to see where they're
about to be whisked away to and even most of us in
this room, myself included, are not so paranoid
that we're constantly checking those kinds of things. Odds are, if I get an
email like this, oh my god, my accounts been compromised. I've got to go confirm my password
for PayPal to protect my money. You might very well
just follow the link, but of course it can go anywhere you
want just via this very basic building block, but this is just one
way you can vet actually what's going on underneath the
hood, but of course the internet is more interesting
than just text alone. Let me go ahead and open up
an example that I whipped up in advance here using image.html
and we'll see another tag here. So here is another opportunity
to use an attribute and one that's also not
necessarily visible to the user. So here's an image tag. Humans years ago decided to be succint. It's img > for image, just
like it's just a > for anchor. The source, src, of which is
going to be that file, dan.jpeg, which I downloaded in advance
from the URL up above, and in fact, this is gray in the cs50
IDE because it's syntax highlighting it just like in C. This is
what's a comment in HTML. So if you want to make notes
to yourself or to viewers, some sentence or like
a citation like this, you can use an HTML comment by doing
! // // > and you can write anything between those things-- for
the most part-- that you want. So just like in C do we have the //. So here's the source
of this image and this is like an alternative explanation of
it, alt. Why might this be compelling? I want to show the image to a user. Yeah? AUDIENCE: Is it for like if
they hover their mouse over it, they can see what's happening. DAVID J. MALAN: Yeah,
so a couple of reasons. If you hover over the image you can
actually see some descriptive text. So like Handsome Dan
here, like Yale's mascot. If the user has trouble
seeing or is blind, you might need a screen
reader to actually tell you what it is that's on
the screen, and it's not obvious from dan.jpeg
what that could be, but if you have this
alternative text, a computer can recite verbally Handsome
Dan, which might then jog the person's memory as to what
it is that actually on the screen. Or if you have a really
slow internet connection, sometimes you'll see a
placeholder for an image that just says what it is before
the image actually downloads. So being mindful of
these kinds of things will just make, ultimately,
your websites more accessible, and indeed if I go to this one now
and go into my source6 directory where we have even more examples
at our disposal and go to Image 6, here is their adorable Handsome
Dan as of this past year. So there's an image. We can kind of do funky
things now with nesting. So this is not all that interesting
because it doesn't go anywhere, but I could just combine these ideas. I could do a href = http://www.yale.edu
or, because I don't want the user to bother getting redirected,
I could just proactively make it secure because I know Yale
supports that per earlier, and I can nest these tags like this. Now if I go here, reload,
it still looks the same but notice my cursor changes to like a
pointer, and if indeed I click on that, now the image leads to Yale's web
site, but I skimmed over something. One of these is not like the other. What detail have I
kind of not mentioned? Yeah. AUDIENCE: The image file
closes within itself. DAVID J. MALAN: Yeah, the image tag
kind of closes in and of itself, and so there are some of
these anomalies within HTML where there really isn't a notion
of, like, start doing something and then eventually
stop doing something. Like, an image is either
there or it's not. Like, you can't kind of put
something in between it conceptually, and so some of these tags in
HTML are what are called empty. Like, they should not have
anything after the open tag or before the close tag. So if you wanted to be really sort
of precise you could say this, but you should not put
anything where my cursor now is because it would make no sense to
try to put something inside of an image, but this is just kind of lame to
have this unnecessary verboseness. So you can just put the slash in
there and technically in HTML5 you don't even need the slash in
this case, but at least this way, and I think for pedagogical purposes,
doing it, even for empty tags, makes sure and makes more clear
visually, when and that your tags are balanced. So that's the only
anomaly there and then there's bunches of others which we
can fly through really quickly here. So if I go back to our examples
here, I whipped up headings.html. So if you want to do
something like this if you're writing like a book or a website
that has like chapters and sections and subsections and so
forth, HTML lets you easily format things as big and
bold, slightly smaller and bold, slightly smaller and bold, and so
forth by using the h1 through h6 tags. So if I go into headings, this
is how I made this web page. I simply have h1, h2, h3, h4
opened and closed and that's it. So any time you're reading
some kind of online text, odds are they're using one or more
of these tags to format the page. If we look at another example in here,
we have something like list.html. Lists are not uncommon on the internet,
you'll never believe number three, and here's how you might do something
with a bulleted list by just marking up three words-- foo, bar and baz-- and the HTML for this,
if I open up list.html, simply looks a little more verbose
in that we need a parent element so to speak, borrowing
our tree terminology, but here we have an unordered
list, or ul, each of which has one or more list
items, or li, each of which open and close foo, bar and baz. And if I really want it
numbered, I can also do this. I can change unordered list to ordered
list, ol, reload and now the browser figures out the numbering for me,
which is nice if you have lots of data and you don't want to deal with
actually laying it out yourself. Meanwhile, we can go one or two
steps further before we actually get to something functional. Here is kind of the
most complicated of all, but it too just kind of
tells the browser what to do. So before we look at the result, this
says, hey browser, here comes a table, like tabular data. Rows and columns like Excel
or Google Spreadsheets. Hey browser, here comes
a table row, or tr. Hey browser, within that row,
here comes some table data, a.k.a. a cell or column. Here comes another cell. Here comes another cell. So that's one, two,
three cells in a row. Hey browser, here
comes three more cells. Hey browser, here
comes three more cells. Hey browser, here comes three
more cells and if we actually render this in the browser, you can
see the layout of a sort of old school phone pad on your phone. It's not very pretty, it's
not very well formatted, but if we zoom in you really do see
that it is lined up in rows and columns as I sort of verbally implied, but
this is all very kind of underwhelming. Like, Google is cool
because you can go to it and you can actually search for cats
and find lots of cats on the internet, but how is it that this actually works? So, aww, bad news today. OK, so we'll just zoom in on this one. OK, so let's try to focus
on the pedagogy here-- of cats-- as follows. Let me go ahead and focus on really the
URL, which is kind of long and cryptic, but let me just throw away honestly
anything that kind of looks confusing or I don't understand. I have no idea what source means
so I'm going to get rid of that. I have no idea what
the rest of this means. I'm going to get rid of that and I'm
going to try to distill-- granted, with some foresight because I
knew how Google works here-- I changed the URL to something
much, much, much simpler. Cats,f where it's
www.google.com/search?q=cats. It seems that, somehow or
other, Google's behavior is controlled by information
that's conveyed in the URL, and it's not just that I'm searching. It's that I'm searching for cats. So in fact, on a whim, I'm going
to search for dogs instead and hit Enter, and indeed a few things change. We have all these dog images
appear here on the right. We have the text
pre-populated up here and we can search for any
number of other things here, like Harvard
Yale prank 2004, Enter, and there you have a Wikipedia
article on the video we saw earlier. So it seems that you can
parameterize the behavior of Google just by understanding
how this URL works. So here is kind of the path
that's being requested, the file or folder or whatever that is. A question mark says, hey
browser, or hey server, rather, here come some HTTP parameters. Some inputs from a human who's either
filled out a form or apparently is kind of hacking the URL bar here,
and then the name of the parameter comes next. q, meaning query, and this
is what Larry and Sergey decided years ago for their search
box, an equals sign, and then whatever it
is the human typed in. Now it got a little funky here quickly. Now you see %20. That is the web's way
of encoding a space so that it's not a physical space,
it's all one contiguous string. So it's just one contiguous string for
the server to actually look at or read, and so why is this useful? Well it turns out I can
leverage this information and kind of implement my
own Google pretty easily. Let me go ahead and go into search.html,
one of the other examples I whipped up, and you'll see another tag all together. Inside of the body of this
page is an HTML form tag, and the form tag takes a
couple of attributes I know. One is action, which
is the URL to which you want to send the form's
information, and the other is the method that you want to use. Now it's a little inconsistently
lowercased here just because, but we did see that verb before. Where? Where did we see this verb? This was like the somewhat arcane
message that was going, supposedly, inside one of these envelopes when
we said GET in all caps /http1.1 and so forth. So it seems that if you
want, as the web developer, to create an HTML form that has text
boxes and maybe checkboxes and dropdown menus and so forth that submits its
information when the user clicks Enter or a button to this address, and you
want it to go inside of a virtual envelope using that GET verb, you
literally just say method=GET. And then down here I seem to have
two inputs, one of whose names is q, the type of which is a
text box, and the other of which is a submit type, whatever that
is, the value of which is search. Now you would only know what these
things mean by seeing them demoed or looking at some online reference, but
if we pull this up to see the results we have a super simple-- and I'll zoom in-- very, very simple
version of Google, right? It don't even have the logo, but it does
have, I claim, all of the functionality because watch what happens if I type in,
for instance, whoops, birds and click Search. Oh my god, I implemented Google
with just like 15 lines of code, but not really, right? Like, I've implemented
the front end of Google, which I got to start Googling
these things in advance OK, uh, these are very sad stories. [STUDENTS LAUGH AT MORBID NEWS
HEADLINES] DAVID J. MALAN: OK, so the point though
is, the point-- look up, look up. The point is that the
URL is what I generated. So using those HTML tags coupled
with the human's cooperation and actually clicking
a button did I then generate this URL, whisk
the user away from the IDE to google.com, where Google
is handling the back end, like all of the hard work,
actually checking their database, rendering the HTML, but
I made the front end, the user interface via which you can
actually interact with Google's search engine there. And it boils down to just
these basic heuristics, but of course this is a pretty
ugly search engine, right? Black and white text box, a
gray button and that's it. Like, even Google, simple though it
is, has a little bit of style and color to it and things are centered
and kind of spaced differently. So there's an art to this
ultimately and indeed being a web designer in
itself is a profession and in fact, you'll find in
industry that some people are good at front end design. Some people are bad at it. I'm among the ones worse. Like, my web pages look like that
search box just a moment ago, but some people really prefer the
non-graphical stuff, the back-end, the database stuff, and indeed one of
the takeaways over the next few weeks will be for you to figure out for
yourselves if you like any of this at all certainly, but also
like what your preferences are. And you might hear terms
in industry these days like front-end developer,
back-end developer. That just means do you work on what
the user sees in their browser or app or do you work on the back-end,
the database stuff that's really important and
sometimes quite difficult, but that the user doesn't
interact with directly. Or are you a full-stack
developer, which means you just do all of this, which
all of you from CS50 are effectively, albeit after just
one or so semesters of background. So how do we start, though,
to make things prettier? Well it turns out that HTML, for the
most part, is just a markup language. It's for structuring a web page
and semantically tagging things, and by semantically
tagging things I mean like, hey browser, here's
the head of my page and that's a concept, semantically. Hey browser, here's the body
of my page, and that too is a concept, semantically. I didn't say anything about bold
facing or font size or colors or all this stuff that's important
for a good user experience, or UX, but that can be decoupled
from HTML, and in fact, one of the challenges as you
learn HTML for the first time is to try to make your way through
various online resources and references will sometimes combine these ideas. So, again, today we'll focus not just
on correctness, getting things to work, but design as well. So here, for instance,
is a super simple web page for someone named
John Harvard that has a header and a main part and a footer,
and header is distinct from head. It's sort of poorly named here. Head of the web page is just the tab
bar and other such things up top, but semantically you might have
a page with like three parts. Like the header, like the title
on the body of the page itself, like the main part where
the actual contents are, and then a footer like a copyright
symbol or something like that. So this might be a general
division of a page, but notice I've styled
it a little differently. Let me go ahead and open this up in
a browser as I did just a moment ago and go to, sorry, I'm going back
through my entire internet history here. Let's go ahead and open this up
just as we did before at this URL so that we can go ahead
and open up CSS0.html. Notice that, oh, this is already
marginally better than the pages we've looked at before if only because
it's centered, which is a step forward from everything just being left. The first line is a little bigger. The second line is kind of medium
and the bottom line is the smallest. So there's a little bit of style
here, but not all that much. So how did I actually do this? Well take a look at the code here. I have added, now, a style
attribute to several of my tags. So the header, the main
and the footer really aren't styled in any specific way. They're just a way of
telling the browser this is the important stuff
for the title, this is the important stuff
for the main part, this is the important
stuff for the footer, but the stylization or aesthetics
come from this yellow text here, thanks to the IDE
syntax highlighting it, and notice this text
follows a different pattern. Up until now, we've been using
angled brackets and words and equals signs and quotes. Now, inside of those quotes,
we also have another pattern when you're using this second
of two languages today, CSS. fontsize:large is the stylization for
this particular element's content. Text align should be center. These are two CSS properties. CSS, cascading style sheets, and
we'll see what that means in a moment, but this is just how you configure
the style of those elements, and indeed that's why one is a little
bigger and then a little smaller and then even smaller because, notice,
I did fontsize:large, fontsize:medium, fontsize:small. All right, but as we've often done,
let's iteratively improve upon this. Even if you've never
seen HTML or CSS before, there's some poor design
manifest in this simple example. What might you say seems wrong or
seems a little copy paste-like? Yeah. AUDIENCE: They're all
centered [INAUDIBLE].. DAVID J. MALAN: Yeah,
they're all centered and I literally like copied and pasted
that CSS property, its key value pair, its name and
value, again and again and again, but remember
the hierarchy of HTML and the DOM, Document Object Model,
the tree we drew a little bit ago. All of these elements--
header, main, and footer-- have a parent element called what? AUDIENCE: Body. DAVID J. MALAN: Yeah, body. So one level higher,
which is indented this way or in the tree is higher up in that
family tree-like drawing, all of these are children of body. So why don't I just move or
factor out text align center into the elements above it? And herein lies the cascading of CSS. Cascading style sheets means that
if you have a property up here, it will cascade down to all of the
children and descendants below it and it means another thing, too. You can even override
these properties somehow, but we'll see that before long. So if I go ahead now
and open up CSS1.html, notice that I did
exactly that improvement. The code's a little tighter now. It's fewer characters,
easier to maintain because now if I want to change
it to left or right or center, I change it one place, not three. And so this is kind of consistent with
some of our design takeaways from C and indeed, if I visit this page,
CSS1.html, it looks the same, but it's better design
underneath the hood. But we can do a little better still. If I open up CSS2.html,
notice that I've done this. I rather like this design now
because it's even more succinct. I'm not using the style
attribute anymore. I'm using a different
attribute called class, and class is kind of a way to define-- much like a struct in C lets you define
your own data types, a class in CSS allows you to define a name for
a whole bunch of properties, and so here I just said let's call
this class large, medium, and small, and I don't know what
those mean, and frankly I might be working with a friend
who's much better at design than I am so I'm going to let him or
her actually define these meanings. I'm just going to kind of tag
things in this way semantically, but if we scroll up in this file, you'll
see that for now I have no such friend, and so I implemented it myself,
and here's, for the first time, one other thing in the head of the page. Up until now, we've just had
the title, but it turns out you can have a style tag. Not just an attribute, but
a style tag inside of which, it's a little cryptic at first glance,
but there's some pattern here, clearly. You have all of those properties,
but the new syntax here is that if you want to define
a word called centered, you literally do a period
and then the word centered. If you want a word like
large, you say .large. So it's similar in spirit, though not
quite the same as like typedef in C, but you say .center,
.large, .medium, .small. You use our old friends curly braces,
which we will only see in CSS, and this just defines
one or more properties to be associated with that new keyword. And so, if we scroll
down here to the bottom, you'll see that I centered the body. I made large the head, medium
the main, and small the footer, and the result is going
to be exactly the same. Very underwhelming, but
again, marginally better design because now we are just one
step away of really improving this. If I do finally have
that friend, it's not going to be very easy to
collaborate, ultimately, if we're both working on the
same file and moreover, it seems unnecessary to
introduce these semantics. Like, why do I have to have tags
like header and main and footer and classes called large and
medium and small and centered? Like, why don't I leverage the
names of these tags themselves? And this is where HTML
can be pretty powerful. Notice I've simplified
some of my CSS up top. I've dropped the period,
which was like typedef. Like, give me something called large,
give me something called medium. Now I'm just saying literally a word,
but those words are identical to what? AUDIENCE: The tags. DAVID J. MALAN: The tags themselves. So preexisting tags, if I just
mention them by name without a period, which gives me a new name-- I just mention the body, the
header, the main and footer, and then, inside of the curly
braces, define my properties, now I can just stylize the actual
tags as they exist in my page, and this now looks like really
readable, maintainable HTML. There is no aesthetics associated
with the markup language here, but rather there's useful tag
names that come with HTML-- you can't just make up your own tags. They're in, sort of, the documentation,
but now it's just much more readable, and this might look different on my
phone or your phone or your laptop, but my friend who's good at
stylization can figure out how to style all of these things, and
better yet, he or she doesn't even need my file. In the fifth example here,
notice that's it for the page. We've gotten rid of the big style tag
and replaced it apparently with what? AUDIENCE: Href, a link? DAVID J. MALAN: Yeah, link href,
which is a horrible, horrible name because it's not like a link
in the page and hyperreference was already used for a link in a page,
but this is what we're stuck with. This just says, hey browser,
include this CSS file that is elsewhere on the server. The name of this file
is arbitrarily CSS4.css because this is our fifth
example here-- zero index. The relationship of
this file to this page is that it's a style sheet, which is
just a list of aesthetics or properties that should characterize its layout
and indeed, if I open up CSS4.css, I just copied and pasted
everything in there, but this is nice now in
principle, even though we're just creating work for ourselves
today, because now I can share this file with someone else. He or she can work on it on their own. Then we can merge our work together
because my work's in the HTML file. Their work's in the CSS file. Better still, if we're making a whole
website that has a dozen pages or 100 pages, consider this. Just like in a C header
file, I can include bitmap.h in all sorts of programs. Similarly can I include
CS4.css in all of my web pages. So if I want to change the
font size or the layout or whatever in all of my website
all at once, I change in one place, not in every darn web page that might
have been created by me or by someone else, and so there's just that
maintainability to it too, but we can do even better than
that because even the CSS we're looking at here is only so
good, and what's really nice is if we go to bootstrap-- let
Google tell me where to go. We're safe. OK, so Bootstrap is a library--
formerly from Twitter, now a much larger community-- that's
a whole bunch of CSS libraries. So just as in C, we have code and
functions that other people wrote. So in the world of web
development do we have code that other people wrote and we
use that for JavaScript and Python, but even for aesthetics are
there sites like Bootstrap and other popular things that
allow us to make our sites prettier and build them more quickly
without having to reinvent wheels. So for instance, if I go down to let's
say Content and I go to Typography and skim through here, you'll
indeed see like h1, h2 and h3, but if you want things even bigger than
that there's like a display heading. There's this fancy version,
which has a fancy display heading with some faded secondary text. So pretty marginal, but I don't have to
figure out how to do that now myself. If I want to actually have tables,
I can do much prettier tables than I did with my little old
school phone pad a moment ago. Like I can make things different colors. I can shade the columns like this and
in fact, you can do even fancier things. If I go ahead and open
up a web page and go to our big board for
speller.cs50.net, you'll see that this is a pretty good
looking table as tables go. Certainly much better than
the one before, but that's because we're using
the Bootstrap library, and even more compelling
than the aesthetics are that suppose that you visit
speller.cs50.net on your phone, it starts to get pretty ugly
once your window gets smaller, but notice stuff can
just disappear magically when you're on a mobile
device or, in this case, simulating it by using just
a smaller browser window. So using CSS and the aesthetic
power that it provides, we can also dynamically change our
files to just render differently on different devices, and then
lastly, let me open up, for instance, this under Components. This is where the really juicy stuff is. If you want fancy alerts to yell at
the user or say everything is OK, you get nice little
colored boxes like this. The forms are much prettier. I mean, already this looks much
more like the web you and I use and not the mess of a form
that I created a moment ago and long story short,
just like in C it's pretty easy to include these things
in your own site, so can I do this. Let me go ahead and open up
form0.html, and this is literally an approximation of the very
first web application I made, even before web application
was a phrase, in 1997. I had taken CS50 and CS51. I hadn't learned web stuff at the time. I just kind of taught
it to myself and learned from some friends and
the first thing I did was build an interactive website
via which first years could register for intramural sports because literally
that year in 1996 it was paper-based. You'd walk across the yard, open
up Wigglesworth, one of the dorms, slide a piece of paper--
old school-- under the door and you were registered for a sport. We could do better even in 1997,
and so we did it with the web, and so this form0 back in the day looked
a little something ugly like this, but there's a text box where
you could type in your name and then there's the dorm
where you could select Matthew. So I could actually do David Malan
and Matthews and then click Register, but we don't yet have the
ability to make backbends yet. So this form goes nowhere
for today, but you at least get these kinds of aesthetics, which
are kind of 1997 aesthetics, literally. But if we go into this
other example, form1.html, it looks pretty, pretty better now. It's maybe a little big in retrospect,
looking at the display font, but all I've done is now use this
Bootstrap library, and notice, it's a little hard to see
on the projector here, but everything's kind
of like nicely outlined. There's like Mark Zuckerberg
sample text there which we can override by actually typing
in our own email address here. We have a prettier looking box, a
prettier looking button, and that's just because if we
open up, as down here, form1.html, notice that
in addition to my HTML down below and in addition
to a couple of other things that I've added to make things
more mobile-friendly in particular, I just added this. I read the documentation
on getbootstrap.com and I went ahead and added
Bootstrap's library to my own code in order to have access
to its actual features, and then down here, it's a little
overwhelming at first glance, but I just followed the directions. There's something called div in
HTML for a division of the page. It means give me this
invisible rectangular region. The class I associated with
it is called form group. I didn't make this word up. This comes from Bootstrap. I just did what they told me to do. I then have a label, which
makes things more accessible and you can click in different places. I have another class here
but long story short, I just read the documentation
because I know what tags are, I know what attributes are. I know a little bit of CSS
now and I know how HTTP works, and so really I have enough building
blocks in order to work on this myself. So that then is CSS and there's one
last detail I thought I'd show us here. In all of these John Harvard
examples, as in just a moment ago, we had something like
this at the very bottom. This {} ampersand #169;. What was that rendering as, if
you notice, in the web page? AUDIENCE: Copyright. DAVID J. MALAN: Yeah,
the copyright symbol. There is, on my US keyboard,
no copyright symbol. So you need kind of a
pattern of characters with which to represent those in HTML. So just like we have /n and other
special escape characters in C, you have what are called HTML entities
in HTML that you would only know from reading the documentation, but
that's the copyright symbol, but I thought it was rather timely to
point that out because just yesterday or this morning, Apple announced that
with the very new version of iOS that you can soon download, they added even
more damn Emojis to the Emoji character set. So these are certainly
in vogue these days and not only do we see, now, a way to
represent special characters that you couldn't otherwise type using
HTML, it turns out all this time that Emojis are actually
just characters, chars, but they're not 8 bits. Recall that C as we've
been using it uses ASCII, which uses only 7 or 8
bits total and Emojis, my god. There's so many of them right
now and we need more than 8 bits to represent them, and thus was
born something called Unicode. Well, that is not why
Unicode was invented, but this is what Unicode is now being
used for because these emojis are simply like ASCII characters but
multiple bytes, generally two bytes, maybe three bytes, and in
fact, if you go on unicode.org, you can see that if the number in hex
1F600 represents the grinning face, which happens to be implemented
differently by different companies on different devices,
but if in closing here, I open up this same file and I change
this to 1F600 in hex, 1-F-6-0-0, save, and I go back to my browser
and I go back to CSS0, now we have a very
happy web page for you. So that's it for today. I'll stick around for questions
and we'll see you next time.
