[ Silence ]
>> Welcome back.
This is CS50 and the start of week 8.
So this animation is all moment ago is actually not a movie.
It's not actually a webpage.
And this webpage is implemented entirely
in a language called JavaScript
and that language called JavaScript supports now,
where increasingly technology called WebGL or Graphics Library
with which you can actually implement fancy things
like this just to either in Ts or scare.
We actually look at the source code for the page
that you just saw playing some music and sound.
This is an example of a language called JavaScrip
that we dive into next week.
So technically it's actually quite similar to see
but you'll see that this person put a good deal of work
into this particular animation.
So it did take some degree of effort.
Anyhow, today is ultimately about pulling back the layers
of the internet in the web and transitioning us from C much
to your pleasure perhaps and transitioning us to PHP,
and HTML, CSS, JavaScript, and SQL ingredients
with which we will dive into the web programming portion
of the course and a lot of the more familiar technologies
that we take perhaps on a daily basis for granted.
So no, that in just a week or two's time you will be able
to put together yourself websites like this which I found
in the internet archives way back machine this morning.
If you go back 10 or so years, I lost quite miserably.
But I thought I would take a screen shot
of this 'cause this is also a wonderful example of how not
to make a website besides-- it's clear what the website was
for perhaps but the silly little icons
where I thought it would be cool to have this guy
in a hood saying "Come in enter," "Click to Enter."
"Click to Enter" is not a cool feature of a website.
Or you probably seen this
on many websites particularly those implemented fairly
and immediately with a technology called flash and,
well, this was me learning how to program in--
for the web way back then and didn't get much better.
Then fast forward to senior year
and this is apparently what my website look
like 'cause I had a Muppets calendar
and I apparently thought it was cool at the time.
So I scan this end and then had my own server running an
operating system called Linux although an older version
than what we're using today
and then I put my professional portfolio of web work and such
up here on this website.
So I think that's the worst of it.
Though I'm thinking, I actually have all the campaign materials
including the posters and the platform so I'm thinking
of running again this year if that is allowed so we shall see.
So the internet is something we certainly take for granted.
I thought we take a quick look though with a teaser.
It's about 50 or so seconds long as to how the internet works
and then we'll start as promise to peel back these layers today
and moving forward this week.
I give you warriors of the net.
[ Video Clip ]
[ Music ]
[ Background Music ]
>> He came with a message.
With a protocol all his own.
[ Music ]
[ Background Music ]
>> He came to a world of cruel firewalls, uncaring routers,
and danger is far worse than death.
He's fast, he's strong, he's TCP/IP
and he's got your address.
Warriors of the Net.
>> So that is how the internet works
and [laughter] we will dive in to more details over the course
of today and this week.
So a couple of quick announcement.
So one, you probably found this and 36 other photos
and now it's time to actually find this up on campus
and photograph, yourself or someone with your--
from your section with them.
The deadline for the scavenger hunt to get
out as many photographs of you and they--
you and them is Monday at noon just before next week's lecture.
So feel free to partake.
And the winning section will get some fabulous price,
the big award.
So this is the [inaudible] that's historically been
associated with problem set 6.
Relates first, this is completely optional.
It's for those who actually want to participate in a competition
of source with your code fairly publically.
So if you go to the course's homepage
as of today you will see that a top of the list
or frankly whole bunch of stuff who took the course last year.
This is not to say that most of you are behind now
but rather this is mostly stuff, those some of your own classmate
who have challenged this so-called big board.
So problem set 6 recall involves implementing the fastest
spell-checker possible and you need to deploy tools
like hash tables or tries or link list.
There're some other fancy data structures.
And once you get your code working you can ran a command
called "check 50" inside the appliance
which will upload your codes to one of our servers.
It will run in the benchmark.
The benchmark is something means to analyze it in terms
of its memory use and its CPU time.
And so which you have here are the top 20 people who since
about 4 a.m. last night have challenge the big board.
I think, my apologize.
Nathan is about to get disqualified because the staff
and I are all quite suspicious that this is not
in fact a legitimate entry 0.150 seconds is order
of magnitude faster than the next most-- the rapid one, Neil.
So either Nathaniel is about to be promoted to staff
or we're going to delete his entry there.
So there are ways to see at this competition but we will--
we are good at detecting such.
So what are you seeing here
on the left-hand column you see how much RAM each
of these folks' programs used.
In my defense I was actually number one last night
around 4 a.m. but I have slept since then using 38 megabytes
of RAM and then if you scroll to the right you'll see
in each column how many seconds where spent
in the load function, the check function size on load
and so forth and if you read the fine print you'll see exactly
how we are benchmarking or codes.
If you'd like to do that anytime before the deadline
by all means feel free to partake.
But certainly don't feel that any bubbles have been burst.
If you don't quite get to the point
of challenging that, it is just for fun.
So the final project expectedly posted later today
on the course's website as the PDF.
It will be very much as predicted in week 0
of the course where this will be an opportunity
on a few weeks time for you
to implement most anything you want, working either solo,
on group of two, or three with classmates.
I will say that historically about 80 plus percent
of the class tackles web-based projects
so even though 80 percent of the class has no idea how
to make web-based projects at this point in time
that is a lack of feature.
We shall fix this week, next week, and beyond.
So know that as you start to think about your final project,
we have a tradition of seminars where the TFs and CAs and staff
from across campus offer a slate of onetime classes
that are totally optional that give you opportunities
to learn stuff related to but not core to the course.
So this year already we have a running roster of seminars
that will be scheduled, filmed and presented
over the next month on Java,
on educational software using Emacs, IOS, JQuery,
Ruby on Rails, the whole bunch of terms
with which you might not be familiar and that's fine,
just scroll on down and you'll read descriptions of these
and they're meant to be really inspiration or tools
to bootstrap you towards making projects
that might use technologies and languages
that we might know otherwise cover in the course
and if you're a little eager to get going realize
that we have three prior year--
four prior years worth of seminars.
All video taped, all with slides, some with code there,
so it's quite the treasure chest of stuff
that you can learn on your own.
And also what we've done is put together this site,
projects@cs50.net which is meant to be a repository from ideas,
from the staff and people across campus, faculty
and full-time staff alike.
I get an e-mail like every other day from folks
across campus saying, "Hi!
Do you know some student who might want
to help us make this particular--
solve this particular problem?"
So you'll see here are recent postings from students and stuff
and faculty with ideas that they are hoping to either work
with you on toward the end of the semester and maybe
into J term beyond or to have you implement
and save the day for them.
So you will be ask and just a couple of week's time
to pre-propose a project which will be an opportunity
with the very short form to just tell your TF what you're
thinking about so that he or she can kind of gauge us
to the viability of it given the time allowed
and just how complex or how simple it might be.
Then you have a formal proposal.
And once we A-okay your proposal, you are free to dive
into your project, but more on that later today on the PDF
on the course's website.
And lastly, those of you who are either eager this coming year
or this coming summer or even beyond
in pursuing tech internships, generally, there are plenty
of companies that will hire someone after taking CS50
or particularly after taking CS50
and something else in the spring.
So generally having two solids CS courses
under your belt is enough to get you into the door of a lot
of popular tech companies, Google, Microsoft, and alike.
Well, it's our own, Matt
and Melissa are gonna be holding this Friday is really crush
course on how to prepare for this kinds of interviews in tech
or even if you're a freshmen and not really thinking about this
yet but you kinda wanna know what this world might be like.
Historically OCS tends to cater a little less toward the
technology companies so we thought we tried
to bring this in-house and do our best to equip you
with some fun puzzles and to give you a sense
of what is it mean to have a technical interview
about programming in computer science.
>> I will say from personal experience
when being interviewed by Microsoft on campus
and the recruiter says, "Oh so, what's your favorite language?"
Do not try to show off and say, "I really assembly language."
Because if my own experience is any indication,
that recruiter will then proceed to ask you a question about one
of the most difficult languages in which the program
and you have to then prove to him or her
that you actually know what's you're talking about.
So suffice it to say I'm-- no one told me this, 10 years ago
when I had my Microsoft interview.
So go with something with which you a bit more comfortable.
Assembly language is something that you will see in CS61
if you'd like to go that route.
Alright, so internet, what is it?
We have hundreds of people taking this class all whom use
the internet, some of whom are using the internet right now,
so what is it?
In layman's terms?
[ Inaudible Remark ]
[ Laughter ]
>> A series of tubes.
You've been well educated by the daily show.
So yes, it's a series of tubes.
Google that and you will--
well, Google it now and will lose half the attention
of the class that's fine.
So it's a series of tubes, metaphorically,
but in real terms the internet is what?
It's some kind of infrastructure that connects hundreds,
thousands, millions of computers together in the world.
So it's some kind of physical infrastructure
that in its simplest form is computer and computer
with some kind of connection in between them, maybe it's a wire,
maybe it's wireless, maybe it's satellite.
But it's this mesh as we kind of saw from that teaser thriller
of interconnections among computers.
So the internet is some physical infrastructure,
what then is the World Wide Web?
It's kind of easy to conflate the two, but what is the web?
Well, how do you access the web?
Obviously, with the web browser and let's push a little harder.
When you use the web browser you usually type in an address
and even know these days most of us aren't--
are lazy enough that we don't bother typing this prefix,
anytime you go to a webpage, hidden there is http://
but that's changing if you have an iPhone
or if you have a mobile device that's hiding these prefixes
but that conjures up something more technical
and HTTP is a protocol, Hyper Text Transfer Protocol.
And it's the language that a web server and a web browser speak
when communicating on the internet.
So what does all this mean?
Well, the web is just a service, alright.
Email is a service, Instant Messaging is a service.
A Skype is a service that used the internet
which again is this physical infrastructure to actually make
that infrastructure useful
or you can send emails using one protocol
and you can access webpages using another and that's
because computers on the internet,
clients and servers alike.
All speak these things called protocol.
So first, some easy jargon.
So client is just like a laptop, it's a desktop.
It's something that's not a server.
A server by contrast is something that lives
on the internet it's almost always listening for connections
and request and much like a waiter in a--
or server in a restaurant that server response
to request from clients.
Alright, so when client requests something from server
and server response to client,
how they exchange those informations?
That information is called the protocol.
So for instance, what's a normal of human protocol?
We'll find meet someone for the first time I might say, "Hello.
I am David.
And what do you do?"
>> I'm a student.
[ Laughter ]
>> I'm sorry, you want to-- you extend your hands.
>> Oh, yeah.
>> Yeah. But you are indeed a student as well.
So right. So in this-- the real world we have this protocols,
maybe silly protocols whereby if I extend my hand
and say "Hi, how are you?"
Typically the other person on the other end will extend his
or her hand and completes the protocol exchange
and that's all we're talking about when we use the web.
So what is this really mean?
Well, if we actually type in something like dubdub.google.com
into a browser, on a laptop, on a client well, well,
what actually happens?
Well, at the very highest level, my laptop contacts Google.
Google responds and I see a big search box
and then I can repeat this transaction
and actually provide input this time into the text field.
But what my computer is really saying is something
pretty simple.
My computer, my browser is essentially sending a very short
message saying get me slash,
where slash generally denotes the route of a hard drive
or in this case the route of a web server, the default page,
and then I just have to mention in my message
to the server what language I want to speak.
So this is literally what is sent
to a server from my browser.
And I obviously the human don't have to know or don't have
to do any of that because that's what the browser does.
It converts the more human friendly google.com
into a message like this.
What does it mean to send a message?
Well, will see this too with Mr. TCP/IP in the video in a while
but you can think of my computer as sort
of preparing a little virtual envelope inside
of which is putting a virtual slip of paper written
on with is a message like this.
And then on this virtual envelop my computer has
to put some addresses, the "to address" and the "from address."
And even if you're not quite sure what they are,
you can probably guess to what address am I referring
when I talk about the to and the from there.
All of our computers have one of these things.
So it's an IP address.
IP is just Internet Protocol address.
An internet protocol is again just a set of standards
that humans agreed on a bunch of years ago and they decided
that according to the IP protocol, everyone,
every computer on the internet is gonna have unique address.
And that address is going to be of this form W.X.Y.Z where each
of these letters is actually a number from 0
to 255 with some exception.
But in a nutshell,
it's something dot something dot something dot something dot
something and each of those numbers is fairly small
and quick check.
If each of these letters is between 0 and 255,
how many bits are being used for each of these place holders?
So it's just 8 right 'cause 2 to the 8 is 256.
So when IP address is 32 bits in total
which means how many possible IP address
or computers are there on the internet?
So roughly 32 billion, maximum.
You don't need negative number so we can go all the way
up to 4-- sorry all the way up to 4 billion.
2 to the 32 and that might sound like a lot given the number
of humans in the world,
but frankly just a few years ago even the number
of IP address is being used on campus suddenly sky rocketed.
What happened over the past few years
that has consumed even more of Harvard's IP address
than traditionally was the case?
Yeah, we all have smart phones, right.
Every time you walk into this room
if you can figured your phone
for either the Harvard University SSID
or the CS50 SSID, you walk into a room
and bam your device has requested
from Harvard an IP address.
So even right now Harvard itself is--
has a shortage or sort of IP addresses
which is solvable technology.
But the world a long story short is transitioning away
from these things, version 4 of IP.
So it's gonna be called IPv6.
And IPv6, just to paint the picture,
is gonna use not 32 bits but 128 which is huge.
We're probably not gonna run out of IP addresses in our lifetime
if we all adapt this particular standard.
So what goes on then?
So on the browser, I create the sort of virtual envelope.
I write on a piece of paper that message get/,
and using this version put in it inside the envelope,
on the front of the envelope, I write the "to" address
which is the IP address of Google.
And then in the top left-hand corner
of this envelope I write my address
which is whatever my laptop's IP address is.
Well, just to make this more concrete,
if you have a Mac you might have seen this before,
you can go up to system preferences.
You can go to network and then you can see exactly what your IP
address is at this moment.
And as an aside Harvard owns-- no you can't.
You can only see me.
Thank you.
So you can see on a Mac that this is your IP address
if you go ahead and open up your system preferences
and click Network.
So Harvard has given me an address of this form 140.247
as an aside, most Harvard IP address start with that,
so you can identify them as belonging to Harvard.
But Harvard owns others and then there's some other stuff called
subnet mask and router and DNS only touch upon some
of these things but for more take CS143, a networking class.
So each of our computers has an IP address but I don't know CN--
or google.com's IP address, right.
All I, the human user know is
that the website is called google.com
or more properly www.google.com.
So how does is-- how do I figure this out?
How does my laptop figure this out?
Well, what's the keyword here?
What's the spoiler?
So DNS, we actually saw this acronym a moment ago.
So DNS is something also that might have seen overtime
at least somewhere on your computer, but it's stands
for Domain Name System and all these refers
to is a standard set of servers
across the internet whose whole purpose in life is
to convert domain names like google.com into IP address
and vice-versa and the advantage here is that I
and even my own personal computer don't have
to know what google.com's IP address is
because we can just ask one of this servers.
What server do we ask?
Well again, when you boot up your computer
on campus Harvard gives you not just an IP address
but it also tells you what DNS servers to use.
Or if you're at home Verizon on Comcast
or whoever would tell you the same kind of information.
So now I go ahead and I tell my computer--
or my browser, ask the operating system.
Hey, please ask the local DNS server what's the IP is
for google.com.
Hopefully my operating system knows the answer
because it talks to a DNS server.
That DNS server finally responds.
And so now I can write it on the "to" field of this envelope.
And I-- it's pretty easy for me and my browser to figure
out what my own IP address is just like I did
as a human a moment ago, so I can write that on "from" address
and then I can hand it off to "whom."
>> Once I finished addressing this envelope filling it
with this request, I have to get it to Google
but how does it get there?
What's maybe the keyword here,
even if you're not quite sure how the story goes?
Sorry?
[ Inaudible Answer ]
>> ISP. Okay, so ISP, Internet Service Provider is typically
involved, but they're involved
because they have themselves a certain type of server,
a certain type of computer, generally called a--
yeah, router, so a router.
So a router is also maybe a term you've at least heard, right,
Cisco and other companies make lots of these things.
The name kinda spoils what it does.
It routes stuff.
Well, what is it route?
It routes things like these virtual envelopes.
And let me start calling it a little more something technical.
Instead of virtual envelope,
we'll generally call it a "packet."
So a packet of information is something like,
we've been describing metaphorically here
as an envelope.
So once your computer has this on-- this packet ready,
it needs to hand it off to someone.
And in fact, we kind of glimpsed this a moment ago,
at least on a MAC, and Windows, and Linux,
have identical features.
If I zoom in here, notice
that my computer indeed knows about a router.
Its address also starts with 140.247.
So that means it belongs to Harvard
and so all my computer has to do via its ethernet cable
or via some WiFi connection is actually temporarily readdress
this envelope not to google.com but to say--
actually send it to 140.247118.1,
and so I still have to mention somewhere on the envelope
that the ultimate destination is google.com and its IP address
but for the first hop, so to speak, for the first router,
I'm gonna say, let me hand it actually to this guy instead.
Now, what happens next?
Odds are Harvard's router doesn't know we're all possible
web servers are in the internet, right?
They might know Google, but there's some tiny websites
that they might not know about in advance.
So what does Harvard's router likely do upon receiving some
packet from little old me?
So DNS actually doesn't need to come into play anymore,
'cause at this point in the story,
so it's not a bad thought, but we're already talking only
in terms of IP addresses.
We don't need to work DNS into the picture again.
So what would you do if I hand you a piece of information
and say, give this to Matt?
What would you do if you don't know who Matt is?
Right, maybe hand this the person next to you, right?
Let them deal with it.
And then if he or she doesn't know who Matt, well,
maybe they'll just pass it along and they'll just pass it along.
Now thankfully on the internet, it's not necessarily the case
that every router knows exactly where Matt is,
or where google.com is,
but because these addresses are number-based,
that means that very efficiently these computers can have the
equivalence of like databases
or fancy Excel spreadsheets wherein one column is a list
of IP addresses that it knows about
and in the other column is a direction,
a router as that picture
of a meshed network suggest actually has a connection
usually not just to one other router but maybe
to two or three or four.
So upon receiving a packet,
a router can literally route information left or right,
or forward, or back, up, down,
whatever direction the wires are actually going in and thanks
to these routing table inside of its memory
which again couple columns IPE on one column, and direction
in the other, well the router can decide I don't really know
where Matt is but in know Matt lives on the East Coast
so let me send this packet to a router that's a little closer
to the East Coast, and then it can make a similar decision
and again and again.
And so generally, this takes maybe 10 hops,
maybe 30 hops maximally.
But the internet is designed to be pretty efficient.
So if a packet is going around and around more than 30 times
to different routers, usually it gets killed, it gets dropped
and then I, the browser, have to figure out how
to get it there more efficiently.
So this is all very abstract.
But we can actually make this a bit more concrete.
I'm gonna go ahead and open up the appliance here
and what I've done in advance is I've actually connected
to the Harvard Computer Society's server.
A lot of Harvard's network is firewalled in the sense
that you can't do certain things.
But if I actually connect to this particular system,
I can do more than that so HCS just refers
to that server and my account on it.
I'm gonna go ahead and do this.
I'm going to re-log in since I did that too long ago,
and I'm going to go ahead and run--
I'm gonna go ahead and run traceroute
to let's say dubdub.Stanford.edu, right?
I know that Stanford's out on Palo Alto
but I'm not quite sure exactly how to get it there
but hopefully my computer does if I go and send an email
to some friend who's at Stanford,
hopefully my computer can
in fact trace the route from here to there.
So I'm gonna go ahead and hit Enter, and what we see flying
by is a whole bunch of stuff all of a sudden.
It looks like 15 lines-- 16-- 17 lines.
So it actually looks like if we fast forward to the end
of the story that there are 17 hops between me
and Stanford University at this moment in time
or more specifically between the Harvard Computer Society's
server which is also on campus and Stanford.
Why? Well, in step 17,
dubdub.l-lb.stanford.edu is apparently the name of one
of Stanford's web servers, LB actually stands
for Load Balancer, so it's some fancier device there.
But that server has parenthetically an IP address,
it does not start with 140247 'cause that belongs to Harvard,
this apparently belongs to Stanford.
And then on the right-hand side here,
what do you think these numbers mean, three sets of numbers?
[ Inaudible Remark ]
>> What's that?
[ Inaudible Remark ]
>> Yeah, the time.
So how long did it take for my data, for my packet,
for my email, for my instant message, whatever it is,
I'm trying to do at this moment in time on the internet,
it took only 89 milliseconds to travel
from here and Cambridge, Mass.
to Palo Alto, California, right.
And we take this for granted, but if you kinda pause and think
about that, that's kinda mind-blowing.
You can only imagine how many hours it takes
to physically get a human from Cambridge to Palo Alto and
yet this is 90 milliseconds, right.
This is a tenth of a second with which we got this data there.
So that's kind of cool.
But we can see more along the way.
Let's actually trace this route as this command implies.
Let me scroll back up to the top and you'll see
that the story started here at step 1.
So this is apparently the IP address
of HCS' server, that's step 1.
And then this one, it doesn't have a name but it belongs
to Harvard just because it starts with the same numbers
and then apparently Harvard passes the data off
to this server which because the system administrators decided
to give it a name, it has a name now, I don't really know
where this is but BDRGW,
anyone wanna guess what this shorthand notation means?
[ Inaudible Remark ]
>> Actually, it's Border Gateway.
It's like shorthand notation for a router.
A gateway is a router.
These are synonyms, border, it's probably literally
on the periphery of Harvard campus somewhere
and then this has an IP address.
As an aside, Harvard also owns a lot of IP addresses that start
with 128.103 but this makes sense, right?
It only took about 2 milliseconds to go from Sanders
or wherever HCS' server is to this Border Gateway and this,
you know, pretty reasonable, 2 milliseconds because we stayed
on campus, contrast this with going to Stanford
which is 3,000 miles away, it's reasonable to expect
that it's gonna take more time than staying on campus.
Well, let's see where my email or my IM
or whatever it is I'm trying to do on the internet went to next.
Well, in Step 4, goes to nox.org so this is actually one
of these big ISPs essentially.
Northern Crossroads is what NoX stands for and that's just one
of Harvard's peering points.
So the system administrators here plug their routers
by some kind of fancy cables into this other bigger fish
on the internet so that our data has some place to flow.
Apparently, Northern Crossroads has multiple routers here
and here but where it gets interesting is in step 7,
where is my data apparently at this point in the story?
We can only infer, but feels-- looks like Kansas.
And if I scroll to the right, look at the times,
we jumped from like 2 milliseconds
up to 30 milliseconds so it stands to reason
that there're a few states geographically in between us.
This is a bit of an anomaly, right?
It feels like, if my data took 100 milliseconds to get
to this point and then 30 milliseconds to get
to the next point, these are from the origin point,
so realize the internet is not entirely predictable,
it could take-- some routers rather could be slower.
They could be congested
and so there could be these bottlenecks someplace
on the internet but whatever that issue was,
it went away pretty quickly because from [inaudible]--
here to Kansas, looks like it actually only takes closer
to 30 milliseconds.
Where are we in step 8?
Where's my email now?
Houston probably, and by step 9?
Los Angeles probably, LOSA, I'm guessing.
And if we scroll over here, oh dear God,
that's quite the detour.
But, here too, not necessarily consistently the case.
And here too an important takeaway is
that if we ran this again or you ran this tonight or tomorrow,
these routes could constantly change, one of the key features
of the internet, which is particularly inspired
by its military origins is that it's supposed to be dynamic.
These routes can and should change overtime especially
if the routers or humans running them determine, "Wow,
this router in Los Angeles is really slow,
let's route around it at this point."
And so this can be reconfigured manually or even automatically
so these routes are not hard coded.
In fact there could any number of ways
to get from here to there.
So 10 seems to corroborate the idea that we're in LA
because LAX is in the name here.
So system administrators have this habit traditionally
of using airport codes as the names of their routers
so that's not uncommon to see.
I'm not quite sure where this one is.
But by step 12 looks like we're somewhere in the campus
of Stanford, then here's another boundary router
dot Stanford.edu.
>> Here's another border router and [inaudible] router,
I don't know what this is, but these are just the names,
name given to their machines.
So long story short, what do all of these lines represent?
These literally represent the path that my email
or instant message or in this case just simulation took to get
from Cambridge to Palo Alto.
Well, let's take a look at one other example that's not even--
soon other academic institution.
That one was using the Internet 2
which is a faster interconnection among a lot
of universities.
Let's go ahead
and do traceroutes of dubdubdub.CNN.com.
Alright, so Enter.
And this seems to be going this time from Harvard in steps 1
and 2 and then also 3 and then 4
and then apparently there's some kind of cable between Cambridge
and Boston, that's pretty reasonable to expect.
Then there's some kind of connection between Boston,
and in step 7, New York.
So that's kind of cool that within 6 milliseconds we can get
to Manhattan or thereabout.
This is probably new-- no, this is Washington, DC.
In step 8 and step 9, step 10 we're in Atlanta.
Step 11 we're still in Atlanta.
And then these routers are apparently not responding
to our request at this point for privacy reasons
of configuration reasons.
So you don't always see exactly what's happening.
That doesn't mean there's a dead-end, it just means
that the program I'm using or the special protocol ICMP
that I'm using to do this simulation,
it specifically is blocked.
Not necessarily web traffic or the like.
So one last one, right,
'cause the numbers here are only interesting and so far is
that they're pretty damn fast, 2 milliseconds to DC,
24 milliseconds to Atlanta.
Well, let's do an example where we go not to CNN.com
but like co.jp which is the Japanese version
of their website, let's hit Enter here.
And see what happens?
And it's being a little slower,
but we see that this is apparently its IP address, okay.
So a few servers weren't responding
and unfortunately we can't see the magic happening here
because in steps 1, 2, 3, 4, 5, let's actually--
just for kicks, let's rerun this in case we get better data.
Maybe not.
But in a moment, we well see-- come on--
actually let's try the other direction.
Alright, UK, see if this helps-- or not at all.
[Laughter] Okay, come on.
Okay, better.
For some reason it's being pretty slow, alright.
So our data is in Boston at the moment.
[ Noise ]
>> Okay, still pretty fast.
So this seems to be the network that's just not cooperating.
Alright, so apparently we're going the long way to London.
We're going down to Washington then
down to Atlanta then apparently we're kind of hitting
that bottleneck here again.
So this is really isn't demonstrating what I wanted to.
So let's try one last time with Japan.
Oh, Japan is being better now.
So here we go.
Now it's 1 or 2 milliseconds to Harvard,
there are some good data, alright.
So, you know it's kinda sad when you get excited
about stuff like this.
[ Laughter ]
>> So, let's see here.
So, we got some Harvard going on at the top,
some more Northern Crossroads which is in the northeast--
northeast, I'm not sure where this or number 6 is,
7 is just not talking to us.
But now 8 is getting more interesting, it's apparently
in New York City, and this one's cool.
This is when you actually do get neat glimpses
into the inner workings of the internet.
What is in between steps 9 and 10?
It's like the entirety of the United States, right?
SJC is probably San Jose in California and so these kind
of make sense if the time to get to step 9 is 27 milliseconds
and the time to get to step 10 is 100 milliseconds suggest
that there's some distance there and actually what is
between steps 11 and 12?
Like literally the Pacific Ocean, right?
And so there's some huge sub-Pacific cable or cables
that are going from the West Coast of the US
to the East Coast of Japan, apparently in Tokyo
or thereabouts between steps 11 and 12 and sure enough,
it takes 100 milliseconds to cross the Pacific Ocean.
Hereto, kind of think back to things we learned
in history class, I think that's kind of fast to cross an ocean.
So anyhow, you can very easily get distracted with this
but hopefully the takeaway here is that what's really happening
on the internet is a lot of handing off and off and off
of these virtual envelopes, more technically known as packets,
inside of which are messages for the recipient.
So what is the recipient going to do?
Well, for this, we can actually use a different tool,
so I'm still inside of my appliance here
and I'm just loading up Firefox which you probably used
at some point this term.
But what we've done
in the appliance is we've actually preinstalled a few
helpful tools that don't come with Firefox by default
but they are freely available for your MAC,
PC, and the appliance.
So if I go to my tools menu,
notice that we have a few things here.
One is called Live HTTP Headers, and then soon we'll be playing
with things in here, Web Developer like Firebug
and these other tools here but I'm gonna go ahead
and pull up Live HTTP Headers.
Notice it just gives me this big blank window
and what this thing is going
to do is it's gonna sniff the traffic between my browser
and say google.com and it's gonna show me what's inside
of these packets that we've been talking
about as virtual envelopes.
So we can actually see what humans are taking for granted.
Now what's going on here, it looks like Firefox is designed
to like do auto updates or whatnot,
so it's already talking apparently to Google
of all places so you can also see what this--
what your browser is doing
when you are not even on the keyboard.
But I'll clear that 'cause it's a distraction for this
and I'm just gonna go here to--
let me shrink my window a little bit so we can see both at once.
I'm gonna go to http colon slash slash dub dub dub dot google dot
com slash enter, and sure enough on the right hand side,
I see all of the secret messages
that were inside of this envelope.
And I kind of lied to you earlier in that it's not
as simple as just saying GET / HTTP/1.0 but it's pretty close.
So what we see here at the top
of these Live HTTP Headers window is one--
the URL that I just visited.
So that's not interesting.
But what is inside of the envelope that I just sent?
It's everything here that I've highlighted in blue.
So the very first message is as promised,
it's a slightly newer version of HTTP but that's a message
from browser to server, hey, I would like to shake hands
with you, so to speak, using this protocol called HTTP.
And what else is in there?
Well, apparently the next like, host colon, is a reminder
to the server, I asked for google.com--
dub dub dub dot google.com.
Now just as a quick check, why might it be necessary
for the browser to explicitly remind the server what its own
name is?
How was this envelope addressed?
What's on the outside of the envelope, rather?
[ Inaudible Remark ]
>> The-- so, the router address or somewhere on there too,
the IP address of google.com.
So because we're using the internet
and this protocol called IP,
we're actually routing information from 2--
from point A to point B using IP addresses so this notion
of dub dub dub dot google.com
in this very human friendly words is something we need
to actually typically remind the server of just in case
as we'll see there's actually multiple web servers listening,
multiple websites listening at this particular IP address.
In the case of Google, not likely, but in the case
of Final Project Season, and using commercial web host
if you actually host a project externally,
this will absolutely be the case
that multiple domain names share the same IP address.
Now, what's the rest of these?
Well, some of this is uninteresting
but this one's a little juicy,
turns out every time you visit a website on the internet,
you're telling them a little something about yourself.
Even if you haven't logged in, you're telling them
that in this case I'm running Linux, I'm telling them
that I'm running Firefox, I'm telling them
that I'm running version 7.01 of Firefox and also it seems
that I'm also-- have a cookie.
We talked briefly about this in previous weeks
and we'll come back to them more technically this week and next,
but I'm essentially showing a handstamp to the website
that says, I've been here before,
because you stamped my hand
by storing this thing called a cookie on my hard drive
and by agreement of HTTP on the--
because we speak this protocol, I'm always gonna show you
that cookie every time I revisit you because I've been
to Google before so let's just scroll down as
to what the server replies with.
When I pull up google.com, the server is gonna respond
with a very similar message but with a number, in this case,
200, which means okay.
Now, if you've ever seen in a browser the number 404, 401,
500, 403, any of these ring a bell?
404 in particular?
What does 404 generally represent?
[ Inaudible Remark ]
>> File Not Found.
Like you made a typo where the web server made a mistake,
so where are those numbers coming from?
Why so technical?
They're just inside of the server's response.
So when my browser opens the envelope that was sent
from Google to me, inside of there is a message among
which is this code that's this other 200
which means everything is okay or 404 Page Not Found
and a whole bunch of others.
And then there's a whole bunch of other things here
which we'll wave our hands at but these too relate to cookies
and some other features of the website.
So at the end of the day, what we end up seeing is
of course this, but what's been going
on underneath the hood is the entirety of that story.
The internet's actually getting data from point A to point B
but because browsers and web servers speak this other
protocol, HTTP, and it be clear that protocol just says,
if you want data from me, you must send a message that looks
like this and I agree in turn to send you a message that looks
like this, but thankfully Microsoft and Mozilla
and Google, they simplify these very technical details
and just show us what we care about which is typically a page
that looks a little something like this.
So that's in a little more detail how the internet works
and how the web works.
Any questions?
>> Alright, so if we peel back this layer now of Google,
let me go up here, let me go to view page source
which is not there, let me go here and click view page source
and what you will see is how Google implemented their
website, and in here is a little something called HTML and a lot
of something called JavaScript both
of which you will be speaking in just a little bit's time.
Let's go ahead and take a five-minute break here
and we'll come back and start writing some HTML.
[ Noise ]
>> Alright, we are back, so let us learn how
to make something like this.
So, how do you actually start putting webpages
on the internet?
Well thus far, all of our stories have assumed
that there's a browser, a client,
and that's easy 'cause almost all of us have
that either right now or back in your room
but the server is a little less obvious how you go
about doing this.
Well, it turns out that all this time you've been using the CS50
appliance for C programming and to write your code
and for other purposes
but it itself is preconfigured to be a server.
Now the appliance is only so useful because when you're
on campus and using wireless,
your IP address is actually changing pretty often.
So even though your laptop has a server, a web server on it,
even though we haven't used it up until today,
it's not really gonna be accessible by anyone else
on the internet because they don't know your IP address.
Your appliance also does not have a human friendly name
like google.com and also
for security purposes we've configured the appliance's
server to not be accessible
on the internet unless you throw some switch, so to speak,
to actually let the outside world have access.
But this is the funny thing, like a server
on the internet does not need to be some mainframe computer
that takes a part of a room, it doesn't even need to be a server
in a rack, a rack of servers,
rather it can literally be our own laptops.
People would even hack things like the Xbox and the PS3
to be web servers because all you need
to run a server is just a computer and you need
to put the right software on it
and the software is just called web server software.
So even though we call physical devices typically servers,
that's fine but it's really the software that's the server,
the thing that's like a waiter in a restaurant actually serving
up information, and there's web servers, there's mail servers,
there's instant messaging servers, Skype servers.
There's a whole bunch of servers or services on the internet
and you just need the right software
and so we already have that.
So let me go over to the appliance here and then go ahead
and close Firefox and just get to the point
of having my terminal window open here,
so jharvard@appliance.
Well, when you log into a terminal window
in the appliance, you can usually type ls
and see what you have in your home directory.
You have desktop by default and you also have source--
I have a source directory from today
but we need a special directory.
Almost always, if you have the appliance in this case
or if you have an account on a commercial web server
that you can pay 5 dollars a month, 20 dollars a month for,
you generally have the username and password that you can use
to connect to the server.
Now, even though in the case of the appliance,
you don't really need to connect to it, you just need
to double click it and it opens and there you are,
it turns out that we can also connect to the appliance
as though at some random server on the internet
from our own Mac or PC.
So we'll see that in a moment but first let's do this.
I'm gonna go ahead into my home directory where I am by default,
I'm gonna type this command MK for make directory
and then I'm gonna make a special directory called public
underscore html, all lowercase, no spaces,
and then I'm gonna hit enter.
If I really wanted to or if I wasn't comfortable
at the command line, I could also go to my home directory,
I could for instance go to file, I could go create folder
and do the exact same thing,
but by now [inaudible] you're pretty comfortable using the
blinking prompt at the terminal window.
But there it is, public HTML, there's nothing in it,
so let's go back to the terminal window
and see what we can do with that.
I'm gonna go into public HTML with CD as you've done before,
I'm gonna hit enter, type ls and indeed nothing is there.
So let's do this.
I'm gonna open up gedit
where even though you usually double click its icon,
you can also type its name in all lower case
and I'm gonna create a special file called index.html.
All lower case, no spaces, enter.
That's gonna go ahead and prompt gedit to open and notice
in its title bar it's pointing out that you're inside
of your public HMTL directory
and that's good 'cause I want this file to end up in
that directory specifically.
I'm gonna go ahead now and just do the following.
I'm gonna do open bracket exclamation point DOCTYPE
in all caps html in lower case and that's it.
So this term we're using a version of HTML called HTML5.
It's sort of the latest
and greatest even though it's not quite a fully
adopted standard.
This is these technologies
as you might gather are kind of a moving target.
Even though C as we know has been the same since 1999,
HTML changes by the month, by the year,
and so I will focus particularly on the fundamentals
over the next few weeks and [inaudible] sort
of the temporal aspects.
But this very first line that I typed
in a file called index.html is just a clue to the browser
with which I'm gonna open this file that, hey, this is HTML.
It's not sufficient unfortunately
that just the file name ends in .html,
if to be a little more pedantic and at the top
of the file say doctype HTML.
And then I can proceed to do the following.
It turns out that every webpage on the internet is composed
of what we'll call tags.
A tag is something that has an open bracket
and a closed bracket.
And so this is-- and it's unfortunate
that this looks the same.
What we just typed is not a tag, it's a special case.
But this is a tag, open bracket HTML close bracket
and then I'm gonna do the opposite so to speak here.
So every webpage starts with open bracket HTML,
close bracket, and then ends with the opposite
where the opposite is the same word
with the forward slash inside of the brackets.
So you can really think of this quite simply
as this means here comes a webpage,
that's the end of the webpage.
These are like directives that are just telling the browser
so straightforwardly, do this, don't do this.
Or here is this, here is not this.
They're kind of reversing each other's effects.
Now every webpage has 2 main parts.
One is called the head of a webpage
and I'm gonna preemptively create the open part
and the closed part and then the body.
And notice too just like we did in C,
I'm trying to be a little nitpicky
with my indentation in white space.
I'm trying to keep it looking clean even though as we saw
from Google that was a mess.
Browsers don't care what it looks like
but for humans, it's a good thing.
And if we have as much traffic in which Google does
where every byte or white space counts,
well then we can resort to that as well.
But for now, this is definitely good style.
Unfortunately this is a very uninteresting webpage.
There's a placeholder for the head of it,
there's a placeholder for the body but-- but nothing more.
So for now, the only thing we're gonna put
into the head is gonna be a title tag.
So I'm gonna go ahead and open title tag
and then close title tag.
But for the first time I'm now gonna actually put
in some content, hello comma world for instance.
So that's it for title and then down here,
hello comma world again.
And so that's it for now.
So I have a title tag in the head, the head is an HTML
but I also have a body tag that's inside of HTML
as well but not inside head.
So notice the indentation.
Just like with curly braces and parenthesis in C, similarly,
do we have a nice symmetry here, both aesthetically
and also logically with our tags.
So what's this kind of mean?
Well in a nutshell, when you open up a browser,
and you go to a page here, the thing that appears usually
in a title bar, that's the head and specifically the title
and everything that appears down below
from the below all the buttons and whatnot, that's the body.
So the body is really 99 percent of a webpage.
So now let me go back to this file, I'm gonna go ahead
and make sure I saved it with file save
or control S, and that's it.
So this is all the webpage is.
Indeed an interesting webpage but it's just a text file.
Just like C programs are text files,
so is a webpage a text file, but the thing with a web file--
webpage, if you don't compile it,
this is literally what's gonna get sent to the browser.
HTML is what's called an interpretive language
which means you don't covert it to 0's and 1's,
rather you just send it to a machine.
And the machine then reads it top to bottom, left to right.
So the takeaway here immediately is that if you are
at all concerned for your intellectual property,
it doesn't matter, like it's out there.
When you write webpages,
anyone on the internet can see your HTML.
But the reality is HTML is not an interesting language.
It's kind of fun to play with it first
and we're gonna use it quite a bit
to make more interesting things but it's just static mark up.
It's entirely aesthetic.
It's not a programming language 'cause there's no notion
of functions or loops or conditions,
all there is is do this, don't do this.
And so we'll see a few more examples of that.
So now let's go ahead and open this.
So I'm gonna go ahead and open up Firefox, and as promised,
the appliance itself is a server which means it's listening
for connections from browsers
and from other things on the internet.
So I'm gonna go up to the address bar,
and I'm gonna open my own webpage.
I'm gonna go to http://localhost,
so I'm specifically typing local host
because that's the nickname, that's like the--
the local google.com name for my own appliance, slash,
and then this is the convention.
Because we're currently using a jharvard account,
if I literally type tilde jharvard,
I'm gonna have a URL right now that looks like this.
So definitely not good for the branding of my website,
no one's gonna remember this and the tilde is hard
to find even on some keyboards.
But this is the convention.
Typically when you, little old you has an account on a server
and that server is web server, you can access your pages
at a URL that looks like this.
As an aside you all probably have FAS accounts back
from problem set 0, even though we haven't used them.
But that means you actually have access
to www.people.fas.harvard.edu slash tilde username
where username is your own FAS username.
>> So that's where frogman and my UC campaign used to live,
at crazy long URLs like that.
I mean just imagine trying to write
that on a poster back in the day.
It's no one-- no one visited my website is the point
of the story.
[ Laughter ]
>> So let's hit enter and see what my webpage looks like,
enter.
Damn it. So, there's a problem.
And there is that number, I see it in the title
and in the tab, 403 forbidden.
So this had something to do with permissions.
And this is actually a good thing, it's a mistake on my part
but it's a good thing in that clearly by default,
when I create files on the internet, they're not accessible
to the whole world until I tell the world,
now you may look at these files.
So I have to actually run a new command.
I have to do a couple of things.
First, let me go back to my home directory by typing CD.
And then I'm gonna go ahead and do ls-l,
and this gives me the long listing.
And you've done this before for a problem set.
Now notice for public HTML, I have in desktop,
notice that they just say this,
DRWX hyphen hyphen hyphen hyphen hyphen hyphen.
What does all of that actually mean?
Well, let me go ahead and just open up real fast a text editor,
just so I have some place to type.
And let me just repeat that.
So the public HTML directory currently looks like this,
hyphen hyphen hyphen hyphen hyphen hyphen, these are its
so called permissions.
Now what does this mean?
There is always the same number of characters here.
D just means directory and it's public HTML is a directory,
we made it ourselves, and just take a guess,
what does R stand for?
Read? W? Writes.
X? Executable.
So what do this mean the context of a directory?
Well, right here, I'm gonna say this is me
and this is all over here.
And I'm just gonna put a question mark for now
as to these middle 3, and let me separate them just a little bit
to make this a little more clear as to what represents what.
If I just add some white space here, these 3 triples of hyphens
or letters represent permissions for 3 different people.
Me is the one on the left, so me, I have read,
write and executability permission for that directory.
What does that mean?
Read means you can see the contents,
write means you can change the contents,
executable means you can double click the folder or CD into it.
You can actually get into it.
It doesn't mean execute like run,
it means you can actually open it
and go inside in the first place.
As an aside, the middle 3 refer to what's called a group.
If you've ever poked around on your appliance, you might know
that John Harvard is always associated
with students somehow, well, that's the group
that you're in so to speak.
But for now, we'll just pretty much ignore
that one 'cause the interesting one is on the right hand side.
Hyphen hyphen hyphen means all,
the rest of the internet has no permissions whatsoever.
There's no R, there's no W, there's no X
which means everybody else
on the internet is not gonna be able
to touch this directory at all.
But this is a problem, because if I want this directory to be
on the internet, I need to give the world a few permissions
and the most important one is executability.
Minimally, if I have web files in here,
my HTML is in this directory, surely the world has to be able
to get into this directory somehow.
So I can use a new command for that called chmod
for change mode, and I can simply type change mode, chmod,
A for all, plus X, so L plus executability,
and then I just mention the name of the directory, enter.
And now if I do ls-l again, notice what's changed.
Public HTML is still read, write, execute for me
but also execute for everyone else, as well as my group.
But again, I'm gonna wave my hand at the group to tell,
the last one is what's really important.
So let's now reload, hopefully I've fixed all my problems.
And I click reload.
Still forbidden.
So what-- who might be the culprit now?
You know, what about index.html, let's go in there.
So it's CD pubic HTML, let me type ls-l.
And this looks okay, it looks like my file which created
with readability privileges for everyone
because that's how I configured it in advance.
But if I go here, let me do one other command,
I hit CD to go back to my home directory, ls-al,
there's a whole bunch of stuff.
It turns out inside of your home directories,
there's all of these dot files,
files that literally begin with the period.
And by convention in Linux, anything that starts with a dot,
Mac OS 2 is hidden, you don't see it when you type ls
or double click a folder.
But this is all like preferences and cash files
and temporary stuff that programs just put there,
so you don't really see it.
But what I care about is this one.
At the very top, notice that there's a folder called dot.
What does dot represent?
Your current directory.
So dot means this directory.
So I'm in my home directory,
so this very top line means I own my home directory,
jharvard, that's-- make sense.
I'm in the students group, we know that.
But notice, I have the ability to execute this directory,
but it turns out I need to let the rest of the world
into my home directory too.
I don't want them to have readability.
I don't want the R 'cause I don't want them
to see what files I have in my account.
But I at least want them to be able to open it so to speak
so as to visit it on the web.
So to fix this, I'm gonna do chmod.
Oops, A plus X and I can solve this in a couple of ways.
I can say dot 'cause I'm in a directory I care about.
I can say tilde 'cause
that represents my home directory too.
Enter. That hopefully fixed that problem, now let's go back
to my browser and reload.
Ah, my first webpage on the internet.
Well, not really the internet, on my computer.
So that's progress.
So notice, I'm in a browser, I'm actually ta--
telling the browser to talk to local host
as though it's a server.
Even though local host is a special name that refers
to my own computer, my own appliance,
tilde jharvard means go into the jharvard guy's account
and specifically go into his public HTML.
So the web server knows
that tilde jharvard actually means John Harvard's public
HTML directory.
And this frankly is a little confusing.
You might recall from Psets and whatnot,
that you very often type things like CD plus till--
or you might do something like ls tilde CS50, just to kind
of poke around CS50's account.
Tilde CS50, when you're at a terminal refers
to CS50's home directory.
Unfortunately, when you're in a browser, tilde jharvard
or tilde CS50 actually refers
to those users' public HTML directory.
So you just have to remember that it's different at the black
and white window as it is in the browser.
Alright, so this is a very underwhelming webpage.
I feel like I didn't really need to go to Harvard for this.
So, let's kinda of do better than this.
So what can we do?
Well first, let's notice this.
Let me go over to my own computer.
So now I'm on my Mac, I'm using Chrome,
and I have a brand new browser open here
and I've been visiting Rob's eyes again.
Okay. So let me go to this address now,
http://localhost/~jharvard and then enter.
So notice, this does not work because now when I'm on my Mac
or when I'm on my PC, if I go to local host,
what's it obviously referring to now,
with my own computer, the local host.
But it turns out, and we've not needed to know this before,
it turns out that your CS50 appliance has its own special IP
address, a number of that form,
W.X.Y.C. You can always visit 192.168.56.50.
And this is documented and will be on the next problem set,
so don't worry about memorizing it.
But notice that this might actually look a little creepily
like the one at home.
We're not at Harvard, but back home
if you have your own personal router
and you've ever seen your IP address, well,
it turns out that any IP that starts
with 192.168 is a private IP address.
The world had the foresight
to realize sometimes we don't want IPs
to be publicly accessible on the real internet.
So this is a private one that we adopted for our own purposes.
So if I hit enter now, notice that now on my Mac,
I can visit the appliance as though it's a random server
on the internet with an IP address, and so now I'm kind
of simulating using the internet.
And what you'll find for final projects and Psets,
you all actually have counts already on cloud.cs50.net
which is a server that's actually on the internet.
You've probably seen this page before
where you can actually put your own accounts on here
so that eventually, you'll be able
to have cloud.cs50.net/~malan or if that's your username.
Or more interestingly for final projects for just a few dollars
if you want, you can buy your own domain name
and actually change a crazy looking U address like that
to actually be something simple like isawyouharvard.com.
And in fact when [inaudible] made that website,
she had it living on a cloud.cs50.net
in her own tilde so and so account.
But we hid all of that details for her automatically
so that she actually had a sexier URL
that real people could actually remember.
So this tilde stuff is really just useful
for development purposes.
So let's go back into the appliance
and let's actually start making this webpage a little
more interesting.
So what are all these things in turquoise?
So each of these tags, it has an open tag and a closed tag,
and they again tell the browser what to do.
Here is the title, here is the body.
Well suppose we want to make things a little more
interesting, and I actually want to make something bold.
So I can say something arbitrarily like hello in bold
as follows, open bracket B, and then close bracket B over here.
So now again, notice the symmetry, B denotes bold,
if I save this and then I go back to my browser whether
on my Mac or on the appliance and reload,
it's not quite a huge change,
but now you can see the difference there a little bit.
So let's actually go back into here and see
if we can't make this a little uglier still.
So let me go into body,
and I wanna change the background color.
Like this is pretty lame webpage,
white background, black text.
Let's try to do something more interesting.
Well, it turns out that HTML tags can have attributes.
Attributes modify their behavior and they look like this,
name equals quote unquote value where name is the name
of an attribute and value is how you want
to control the behavior of the tag.
So this is not a real attribute and value pair,
I need to do something legitimate
like BG color for background color.
>> And let's do something crazy like pink, quote unquote,
let me go back to my browser.
After saving, reload and now it's starting
to get hideous, right?
So now-- and let me just increase the font size
artificially with my browser just by zooming in.
I didn't fundamentally change the webpage yet.
Let's now see if we can make our text a little different.
So making text a little different gets a little more
complicated these days, but that's okay,
I'm gonna go ahead and do the following.
I wanna make this whole sentence
or this whole phrase a different color.
And so I can't really do this right now 'cause I don't wanna
do this on the body tag just yet.
So I'm actually gonna do this, I'm gonna start making more
to this page than just one line of text.
So I wanna create what we'll call a division.
And div-- division just makes sort
of an invisible rectangle sort of like you might have
if you're a newspaper editor, just trying to lay out articles
on a-- on a physical page.
Div just says create a virtual rectangle here and apply a bunch
of stylization all to this tag-- all to this division at once.
So I wanna style this division of the page.
Style equals quote unquote,
so notice this is an attribute that's gonna modify the behavior
of the division of the page.
And I'm not gonna do anything just yet,
no style for this element,
I just wanna do a little sanity check back in the browser
to make sure that this division didn't change anything
in a bad way.
So I'm gonna reload, and in fact nothing bad has happened,
nothing visually has happened.
But let's do this, let me right click or control click
on the webpage, got a view page source and you can do this
on any website on the internet.
There is in fact my same page.
But realize and don't get confused, I'm in a browser now.
I cannot start typing in Firefox to change the webpage.
I need to change it on the server
where in this case the server is the appliance itself.
This is just read only.
So let's now change the style here, let's go into gedit again
and let me go and say, you know what, I want the color
of this text to be let's say red.
So notice the difference here.
Anytime you're inside of quote marks, specifically inside
of style attributes quote marks,
you actually say what's called the property colon
and then something else.
And if this feels like this is all of a sudden becoming a lot
to take in, honestly, like HTML is kind
of really simple at the end the day.
This is we've almost seen already all
of the fundamental puzzle pieces much like in scratch.
We spent like 20 minutes on scratch and then you just kind
of poke around and see what other puzzle pieces there are,
same idea is gonna apply here.
We'll show you a number of tags this week and in section,
but till then realize that Google is your friend
and you can find some other feature just by poking around
or reading some manuals.
So I know from having read the manual
that color colon red is going to do exactly that.
So let me go back to my browser after saving,
I'm gonna reload, alright.
So now it's getting a little hideous.
So let's do another line of text.
I'm gonna go in here and say goodbye world exclamation point.
Now I'm gonna go back to my browser and save in--
that's not really what I intended here.
So we've got our first little hiccup.
So Y is this second line appearing on the same line
as the very first thing I typed do you think.
It's the same paragraph, it's in the same division,
or more specifically HTML is really kind of dumb language
by design, like if it will only make a browser do something,
if it tells the browser to do that explicitly,
you can hit enter all day long as I'll do here, enter, enter,
enter put pretty huge amount of space, right,
just kind of trying to make the browser notice my white space
but it doesn't have any effect.
But if I view the source in Firefox, it's there,
it's just being ignored.
So I have to actually go back and be a little more explicit.
If I actually want a line break, so to speak, I actually have
to say something like BR, which is the tag
in HTML for line break.
So here too you can see how it-- this HTML is very like pedantic,
it says, make this bold, stop making this bold.
Put line break here, then the next line of text.
But here too, a little bit of asymmetry.
Notice that I don't have to do this.
Textually not wrong, you are allowed to do this
but this is just kinda stupid, right.
It's a line break, it's either there or it's not.
You can't sort of start breaking the line and putting stuff
on the next line and then stop midway through.
Right, you either move the curser down or you don't,
so in this case, it's kind of an anomaly.
This is an empty element so to speak that doesn't have
or doesn't need a closed tag.
Now as an aside, if you do read up on HTML online
and specifically a variant of HTML called XHTML,
you'll see all of sorts of conventions and for HTML5,
they simplified it, so what we just did here is right,
not all the tags needs to be closed.
But let's save this, let's go back
to the browser here, reload, okay.
So now, it's getting a little more interesting visually
but this is not the webpage I know.
I kind of like going to websites 'cause they're not dead end,
so I can click on things.
Well let's actually go here, and let's say goodbye world.
Well, this is getting inter-- uninteresting.
Let's get rid of this.
Actually let me save this and let's put it down below
so I don't delete all of our hard work.
I'm gonna make another division, and just as a test, test, 1, 2,
3, I just wanna see where this is gonna end up, but what's nice
about a division is it indeed makes a rectangle invisibly
so this next division or paragraph is lower on the page.
So let's go over here and tweak this a little bit.
Let's say here are some of my favorite websites.
So I can do this and then I can say cs50.net and facebook.com,
save, but of course, you should know where this is going.
This just looks atrocious, right?
They're not clickable first of all, and they're also not
on this next line, so let's fix this in a couple of ways.
Well, it turns out that HTML supports a bunch of features,
here's one that's somewhat arbitrary.
They're something called an unordered list, UL,
let me indent this and close the unordered list.
And it's unordered in that it's not gonna have numbers
associated with it, and then in front of each
of these list items, I'm gonna use the li tag.
So we'll see in just a moment, open li, close li,
save, reloading my browser.
Okay, so it's still hideous frankly
but you've seen the extent of my web capabilities,
so this isn't all that far off.
So here we have now an unordered list
but still this is not hyperlinked, right?
This is not going anywhere so let's make a link.
Well this too is actually pretty easy.
You can't just save cs50.net,
you have to actually tell the browser
to create a link to cs50.net.
So the tag for that is the anchor tag A,
href for hyper-reference which just means URL, quote, unquote,
http:// so we use S so, :// dub dub dub dot cs50.net.
And then over here, I have to close the anchor tag
so even though I have an attribute on this anchor tag,
the name of the anchor tag is just A, so when you close a tag,
even if it has attributes, you don't copy
and paste the attributes again,
you just succinctly use the name of the tag.
So let's do a quick save and see if I'm
on the right track, reload.
So it's blue and kind of ugly and old school
but if I click this now, it actually does go
to the courses websites, let me go back over here.
Now we can do facebook.com as well, so let's zoom in here,
so we can go A, href equals http dot dot facebook.com slash.
And then over here, we can close this tag or,
you know, we can even-- right.
Who knows, watch this, myspace.com.
So now that still works.
So notice this dichotomy.
Herein lies the wonderful opportunity
for social engineering attack.
So all of us have probably got emails
from like PayPal saying please change your password or even
from harvard.edu webmaster or whatever saying please fill
up this form and tell-- so we can reset your password.
As of now, realize it is pretty trivial to make a webpage
or even make an HTML based email that says one thing
and goes somewhere else.
Case in point, this is what myspace.com is apparently
these days.
So if we go back here [laughter] notice the dichotomy.
So it says obviously facebook.com, but if I hover
over this link, it's gonna be a little small
but notice there are some telling signs this is actually
going to take me to myspace.com,
and that's because the destination is decoupled
from the actual label.
So if you've ever been the recipient
of some phishing attack
or clicking a link actually takes you somewhere
illegitimate, that's actually how we can do this.
So, if we're making this ugly, we might as well go all the way,
so let's actually-- no, no offense.
[Laughter] Okay.
So we have some eyes on the desktop here,
but here's a problem, so Rob's eyes are currently
on my own max desktop but the appliance of course
or rather the-- my website is inside of the appliance.
So how do I get Rob's eyes into the appliance?
Well, there's a couple of ways
and frankly the easiest approach is probably just to open Firefox
in the appliance and download the eyes in the right location.
But you're not always gonna think of that and maybe
on your own personal laptop, you've got photos and whatnot
in your hard drive and you want to upload those so to speak
into the appliance, you can actually upload files
into the appliance very easily.
I only have a Mac running here at the moment,
but let me just demo the Mac
and I'll point you toward the PC instructions.
On a Mac, you can go to the go menu.
You can then say connect to a server
and even though it's the CS50 appliance as of today,
it turns out it's been a server all these time.
Oops, I shouldn't skip over the most important detail.
So notice in the window, I just have to type this,
the IP address of the appliance, and then this thing,
this is a different protocol, it's not HTTP,
it's something called Samba
which is Windows file sharing, and so SMB://.
If I hit enter here, notice in a moment,
it's doing connecting dot dot dot dot dot dot dot dot dot,
and voila, now I have my jharvard home directory mounted
on my Mac.
And you could do the exact same thing in Windows,
so that you have a Window
on your own computer connecting your computer with this
and you don't have to use something
like dropbox or other tricks.
For the PC instructions, just go to manual.cs50.net and go
to the appliances page for how
to transfer files back and forth.
>> But the point here is I can now open my index.html file,
I can now drag Rob's eyes into this folder, I can now go back--
oops, back to the appliance itself,
and let's just do a quick check.
I'm gonna go into public HTML, ls-l.
Oh, there's gonna be a problem, Rob's eyes are not accessible
on the internet yet or on the appliance in this case here.
So let's actually see what happens when this is the case.
Let me go, oh, we're not gonna keep, we're not gonna put
in points for effort here,
might as well just plop it at the bottom.
So let's do this, image for image tag, source for the source
of the image, and then I could put a URL.
But if I already have the file locally,
I can just say eyes.png, and now I can go over here,
I can back to my browser, and reload
and unfortunately we now see nothing.
And yet, if I go up here to view page source,
Rob's eyes are definitely there, at least in terms of HTML.
So how did we fix this before?
Well, before we did chmod A plus--
oops, we did chmod A plus X which was executability,
but an image is not something that's executable.
It's not a directory and it's not a program,
so what do you probably wanna do in order to see an image.
Yeah, so you can kind of guess, read.
So chmod plus R for read, eyes.png ls
and now these two are world readable so to speak,
the R is a good thing.
Let's go back to the browser, reload,
and oh my gosh [laughter] that's--
well, that's even worse than usual,
but you really see the glints in his eye now and that's just
because I zoomed on in this page a moment ago in my browser,
but we can also make this clickable
and remember we did this really fast last time.
Just because the link is normally text,
it doesn't mean it has to be so we can do A href and I apologize
to Rob that it's getting creepy that I know the URL
of his facebook profile [laughter] now,
academic purposes, so let's save that.
And now notice we've sandwiched now an image tag inside
of the open A tag and the close A tag, the href is going to go
to again, Rob Bowden's webpage.
If I now reload this, doesn't look any different
but if I hover over his eye, you see that the cursor appears.
If I now click on that glint in his eye, I have to go
to Facebook where if I log in I can now befriend Rob Bowden.
So why don't we leave it on that note
and we'll see you again on Wednesday.
[ Applause ]