>> Alright, welcome to CS50.
This is the start of week eight,
as you see on the big board here.
We have our own little big board,
which is currently ranking those
that have tackled Psets 6 already,
realize that this is purely optional, it's really just meant
to add a fun twist to what's otherwise an
interesting assignment.
And you'll notice that I was number one on this board
for like the first five minutes of having put it up
and then I was quickly crushed by several
of the teaching fellows, most of them former students themselves
and we already have an appearance of several students
and over the course of the week, I'm sure,
I'm sure we'll see others.
Realize that right now, the lower bound,
if you're a little nervous or socially awkward
about having your name and you're results put up there.
So right now the lowest number,
perhaps intentionally infinity amount of memory and amount
of CPU cycles, so there's a nice healthy lower bound already
and the upper bound right now is by our own Drew Rob,
who I think was the top of the big board last year as well.
So, he is perhaps among those of you, more comfortable this year,
the guy to beat, but again this is purely for fun.
So the past many weeks, we've focused
on this fairly low level language C
and hopefully you've gotten a sense, for better or for worse,
how you can easily manipulate a machine on down
to the specific bytes in memory.
Now, that's often for the worst, since you've induced plenty
of seg faults by now,
but finally this week do we take things to a
so called higher level language.
This language is called PHP
and next week a little bit of java script.
And these are higher level in the sense that they hide a lot
of those low level details that at the one hand are empowering
but the other hand are also very dangerous
and very time consuming.
Problem sets 6 has you implementing the fastest
dictionary that you can and part
of that involves implementing a hash table or a tri.
These fairly intricate and very powerful data structures
that thankfully you get for free in a lot of languages.
That is to say in PHP if you need a hash table,
you pretty much write dollar sign hash table Done,
you can start using it.
You don't need to reinvent that wheel yourself and this is true
of many languages, Java, PHP, Pearl, Java Script
and a whole bunch of others, so the point of this week
and next is to now take a big step upward in terms
of your familiarity with languages and problem solving
so that you now have more tools to choose from.
So as much as we've emphasized C in this course,
it's absolutely the wrong language to use
for a lot of problems.
For instance, all of these little demos I've done
with the twitter site, the events site
and the news site absolutely should you not use C
to implement those kinds of web sites
because it will just take you way too long and you'll have
to implement so many annoying low level details
that it will one, completely take the fun
out of the entire experience and that itself is valuable,
to actually enjoy what you do and two, you're just going
to literally be reinventing wheels
that other people have packaged up nicely in newer,
more modern languages.
So you'll find that this week onward and after CS50,
hopefully you'll have a sense now of how these machines work
and how you can really, really manipulate them,
especially this week with Pset 6 to your will
and to maximize performance, but it's not going
to be the only tool in your tool kit
and among them henceforth will be PHP, java script,
an actual data base and some more.
So, to do this, to start writing web based programs,
which frankly, really allows us to do,
well let me take a step back.
Well, what's the point of doing web based programs?
Well almost everyone these days has a browser
and the alternative would be
to have someone download a doc.exe file or download one
of those MACDMG files and actually install it,
so writing software that real people download and use
on their computers, actually is kind of annoying.
There's a lot of steps involved and the worst thing is,
perhaps that you have to write the program
for specific operating system or even for a specific CPU.
So, if you want to write a program in C
that both your MAC friends can use
and your Windows friends can use, you kind of have
to write it twice or at least compile it twice
so that it works on two very different operating systems.
GCC, we've been using, uses libraries,
now that it's been designed for Lenox, you can use GCC
on a Windows machine, you can use it on a MAC,
but you're going to get somewhat different output
because of the various libraries,
that differ on those operating systems.
So, these days, the web is increasingly the GUI,
the graphical interface of choice and Google for instance,
has really capitalized on this.
Most of you, especially for student groups, probably use
like Google Calendar, Google Docs, Google Spreadsheets,
all of these things, so Google is kind of banking on this world
of Microsoft Office and these client side programs,
being a thing of yesteryear and the web is now going
to become one's primary user interface, all the better.
Because it means you can write software
that anyone can use irrespective of their MAC, their PC,
their actual operating system.
So, with that said, what does it take?
So write web based software,
so in what language are all web pages written?
So this thing called HTML, now HTML looks a little cryptic
at first glance, I'm on the course's home page here,
I'm going to go ahead and go up to page source and you're going
to see a whole bunch of stuff that probably or hopefully looks
like Greek to many of you at this point.
But there's clearly some patterns, there's a lot
of TVs right there to render that table of contestants
on the home page, but this stuff is just call HTML
and as the indentation suggests and the various color coding,
there is fortunately a structure.
HTML stands for hyper texted markup language,
it's not a programming language
because you can't implement logic with it,
you can just mark up information.
So starting today, we'll start making some web pages using HTML
and HTML essentially tells the computer how
to render actual data.
Here's a word FUU, how do you want to render this?
I want to render this as bold, so you use various tags,
things between open brackets and closed brackets to say,
make this bold and then you will explicitly tell the browser stop
making this bold.
So, how does one go about learning this?
Well, literally after my Math 20 class years ago,
I had a really nice CA who was like a senior at the time,
Kirkland House, and he, I asked him for some reason,
how do you make web pages?
And he was a really nice guy and we went down to the lab
in the basement of the Science Center,
literally after Section one day and he spent
like forty minutes teaching me how to make web pages
and that's all it took.
Now the thing was a God awful mess,
the first thing I made, it was hideous.
I downloaded every annoying graphic
that you could find on the web.
Things were flashing and spinning and blinking,
but it was mine and it was really cool
to then email this URL out to my you know, un,
un welcoming family and friends to say look at me,
my presence on the web.
So that's going to be you in just a few days time,
I had perhaps a little too much fun
or a little too much awkwardness this morning when trolling
through some archives.
There's this wonderful website called the way back machine,
oops, we won't use that one, called the way back machine
and it led me to a bunch of links
that this computer program maintained
by some nice volunteers, had led me to archives
of old websites that I actually made.
Now this actually is not the very first, unfortunately
that has been lost to time
but this was apparently my original home page,
so apparently had a thing
for my initials back then and even then.
But this is one of the worst design decisions
that you can ever make.
Before you can view my website, tell me who you are,
like you had to actually type something into this,
your name please and then hit enter.
Unfortunately the archiving program on the web
that does this didn't know how to actually submit its name,
so you get this, so unfortunately
that content has been lost, but then I realized
that if I fast forwarded it for a couple of years
in these internet archives, I then found this.
This is more embarrassing than anything, but I thought
if I embrace it and say, yes this was me;
you won't find it yourself by Googling
and then make fun of me.
So, I had this computer in my room, dorm room,
called Frog Man, because I had this, this is just a confession,
so Frog Man, so this was Kermit the Frog dressed as Batman.
For some reason I thought that this was cool at that age,
I scanned it in, I said I need a host name for my computer,
which they let you choose at the time,
so I called it FrogMan.student.Harvard.edu
and you can actually click through here.
Turns out, what did I have here?
About Frog Man, I mean it's really, Frog Man was born
on an unknown day in January of 1998,
he's a 4846 PC running red hot Lenox, I was really kind
of a geek, apparently I was a Senior
at the time, what did I have?
This was actually kind of embarrassing, as I told you
at week zero, I ran for UC president and lost.
You can see my whole campaign, oh, you can't,
my campaign platform has been lost.
Oh well. Just, just as well.
Anyhow, I shouldn't get caught up on a tangent,
but the point is, let me
at least make this academically motivated,
if you look at this stuff, it's the same stuff.
So twelve, fifteen years ago, the overall structure
of these pages, really hasn't changed.
And that's the funny thing, so the web was invented kind
of by accident, at least given its current popularity these
days, but every web page out there boils
down to structure like this.
And this is a bit misleading because some
of the standards have changed, so you see a lot
of capitalization here and this was code I wrote fifteen years
ago, but the overall basics are the same.
So what we'll focus today
on is making some very simple web pages,
then very quickly moving to more sophisticated environment, PHP,
which will allow us to generate web pages dynamically.
So, let's see, even for those of you a bit familiar
with this stuff, if we can't fill in a few blanks.
So, when you pull a web browser and go to w w w dot CS50 dot net
and hit enter, what happens?
Well, your computer whether it's a MAC or PC sends out a request
to a local server, called a DNS server,
Domain Name System server and it says hey, what is the IP address
of the website called dub dub dub dot CS50 dot net?
The reason for this question is that every computer
on the internet, small white lie,
has a unique address called the IP, internet protocol address
and this is the number
of the form something dot something dot something dot
something, so it's four numbers separated by periods,
each one of which can be between zero and two fifty five.
So, IP addresses, if you're following along quickly here,
how many bits total?
Little quiz.
>> [inaudible]
>> So it's thirty two bits because you have four numbers,
x dot y dot z dot w, each is between zero and two fifty five,
that means you're using a byte, 8 bits,
so you've got thirty two bits.
So anyhow, every computer on the internet has an IP address,
so this thing called a DNS server hands back
to your computer the IP address of CS50 dot net.
Which is one dot two dot three dot four or something like that.
Your computer then makes a request out on the internet
for the computer with address one dot two dot three dot four.
There's all these machines on the internet called routers
or gateways, these are just fancy computers whose pretty
much sole purpose in life is to take data in from one direction
and then send it on its way in another direction.
Maybe that data coming in from here belongs that way or maybe
that way or maybe that way, so if you think of a router
as being just a computer in the middle of the United States,
clearly there's many different directions which data can flow
and the purpose of these devices called routers is to get data
from point A to point B. Typically there will be thirty
or fewer hops between point A and point B. That is a max
of maybe thirty routers and typically it's like ten routers
between points A and point B. Okay, so you need an IP address,
just like a US postal address, uniquely identifies a house
or a mailbox, and IP address uniquely identifies computers
and thanks to these routers, which are very intelligent,
they pretty much know based on that number what direction
in the country or in the world that actual machine lives.
So finally this request makes it
from my little laptop to CS50 dot net.
There is a thing called a web server running on that computer,
it then realizes, oh, this is a user,
they have requested dub dub dub CS50 dot net, let me return
to them the CS50's home page.
Well what is it that the web server actually returns?
Well, the web server returns pretty much just a text file
and let me switch back over to this computer here,
it returns a text file that comprises, that comprises all
of these things called tags, otherwise known as html,
so my MAC or my PC is in receipt of a big text file like this.
Inside of this file are some pretty basic instructions,
one of which down here says open bracket body
and that's essentially telling the browser,
hey browser here comes the body of the web page and then below
that it says open bracket table, well that's telling the browser,
hey browser here comes a table and based on these instructions,
these elements or these tags,
the browser renders the information accordingly.
In fact if I scroll down a little further, let me scroll
down to where we actually see some familiar names perhaps,
and right here, even though we have a big old mess going on
and all of this was computer generated so it's not like I
or the TFs had to type this in manually.
Notice that we see Drew Rob's name there at top right
and Drew Rob's name is inside of a tag called, there we go again,
TD, okay, so this is just a teaser.
So we'll look at the specifics of this in just a moment,
but my computer has just received this really big
text file.
So what is a browser's purpose in life
after requesting a web page and getting back a big text file?
It parses this file, it reads this file from top to bottom,
left to right and it does precisely
as this file tells it to.
If it encounters certain special tags that says put
in image here, put a sound here,
the browser recursively requests those files as well.
So, most web pages these days have graphics,
we've got the logo up top, we've got the photograph
at top right there, CS's logo, there's a lot
of files included inside of this one web page.
So what a browser does again is it recursively goes through
and requests any files that are mentioned inside
of this HTML page.
As in a side, now that you're sort of mature enough,
computer science wise, to understand,
if you go to Google dot com, if you've searched for recursion
and hit enter, have you ever noticed this subtle joke?
[ laughter ]
>> So, some geeks still [inaudible], anyhow,
you're not sure why your classmates are laughing,
maybe ask the person next to you,
but hopefully you're okay there.
Okay, so that's the story, right?
So we've got this internet that gets data from Point A to B,
computers like mine can send requests across this internet
and say give me your home page,
what comes back is just a big text file.
That's called H, HTML and browser upon receipt of that,
reads it top to bottom, left to right
and does what the file tells it to do.
Well let's see if we can't fill a file like this ourselves.
So this is just a windows PC here, I'm going to go ahead
and run a trivial little program called Notepad.
This is all it takes to start making web pages,
I'm going to change my font just to bigger
so you can see what I'm typing a little more effectively,
but what I'm next going to do is this.
And I'm going to cut some corners and we'll clean things
up in a moment, but I just want to make a web page, so I'm going
to tell the browser, alright browser,
here comes a web page written in a language called HTML
and I'm going to preemptively close this tag, so in HTML,
anytime you open a tag, you must close it.
And now let me be precise.
HTML is a language, most web pages are written in,
it's a complete mess, it has gotten messy over time,
browsers have gotten very forgiving over time.
So, we'll actually use in the course a language very similar
in spirit called XHTML,
extensible hyper text markup language,
which even though you will notice inconsistencies
like this, I didn't write XHTML,
but I'm about to start using XHTML,
essentially XHTML is the clean version of HTML and by
that I mean, when you open a tag, you must close it
and we'll see some other subtleties in a moment.
So, those tags hopefully will say browser,
here comes a web page written in this language,
the closed tag says that's it, I'm done.
So up here, you can actually have one part
of a web page called a head and I'm going to open that tag
and close it and then the other part
of a web page is called the body and I'm going to close that.
So, the web pages have two parts to them, head and body,
essentially the head is anything in the title bar and stuff
like that, the body is ninety nine percent of the web page.
So actually the stuff inside the browser window,
one of the only things that we can do in the head
for now is to put a title.
So if I want to name my web page,
Hello World, and then close title.
And if I want to put something really simple in the body,
I might say, literally, Hello world.
Alright, I'm going to go up to file, save and I'm going
to save this onto my desktop and I'm going
to call this Hello dot HTML,
which is the convention for most web pages.
Now if I go back to my desktop,
I have this file called Hello dot HTML and incur the icon
that Windows has automatically assigned to it,
this is actually a web page.
So that is my very first web page.
Kind of misnomer, because where is this file not.
On the web, right?
It's on my desktop, so if I kind of like an idiot,
go and copy paste this URL up here and tell all my family
and friends, oh, I just took CS50,
learned how to make web pages, visit here.
Like, they're going to get an error because they're going
to click that link and they're going to try
to open their own copy of Hello dot HTML in their own mail
in folder, which really doesn't make sense
on their local computer, so clearly, we're missing a step.
We now need to move this file out onto the World Wide Web.
Alright, well thankfully, we have access to web servers.
In fact in the course, we have our own server called CS50 dot
net, we now have this new infrastructure
that we mentioned last week and we're going to use for Pset 6,
which is Cloud dot CS50 dot net and just
as Cloud dot CS50 dot net let's you use SSH and Compilers,
it's also running software called a web server,
which is a software, it doesn't necessarily refer
to a physical device, which means you can go
to Cloud dot CS50 dot Net with a browser
and actually see its home page.
Now unfortunately there's really nothing there
on Cloud dot CS50 dot Net, if I go ahead
and enter there I get this error because we're not using it
for an actual presence, but in fact if I go to this URL,
which I'll tease apart in a moment.
[inaudible] CS50 Pset6 and then got to big board dot CGI,
what you will actually see is that table that you're seeing
on our courses home page, actually lives on the Cloud,
because after all that's
where you will be running your own problem sets code.
So I just generated on this Cloud this file here
that using some PHP tricks I then integrate
into our course's website.
But to take away for now is
that Cloud dot CS50 dot Net is a server.
So how do I actually get my content there?
Well, let me go ahead and do this, I'm going to go ahead
in SSH2 Cloud dot CS50 dot Net.
I'm going to go ahead and double click my settings
because I've prefabbed it here with putty, I'm going to log
in as CS50, you would log in as yourselves
and now I have this little prompt here which is identical
in spirit to NICE dot FES, except now we have more control
over things and if you want to start hosting a web site
on a typical server, what first you would have
to do is write MKDR Public HTML.
The World has adopted some conventions
that says all web pages for a user must live
in a folder called Public HTML.
Alright, so I go ahead and do that, I can now go
into my Public HTML directory,
now I need to actually put some content there.
So actually I'm going to go ahead and do Nano
and Hello dot HTML and you know what, let me go to Notepad
and let me copy this, let me paste this in here.
I know that's very annoying when that happens to, let me go ahead
and fix this, the fancy way, there are ways to avoid that,
but this will be faster.
Okay, so now I have a file called Hello dot HTML that's
inside of my Cloud Account, identical in spirit
to you having dot C files and dot H files
in your NICE accounts and now your Cloud accounts as well.
So, let me see what happens if I go
to now Cloud dot CS50 dot Net, so Cloud dot CS50 dot Net
and then because I'm a user on the server,
you have to have kind of an ugly URL, so for problem sets 7
and 8, you guys, too have kind of ugly URLs
but this is the convention when you're on a shared server
with hundreds or thousands of other people.
I'm going to type TILDACS50 and then Enter.
And what this is showing me now are the contents,
not of my home directory, because that would be kind
of bad if people on the whole internet now could see inside
of my home directory, but you do see
that this is apparently the contents of what folder?
What, whose folders contents are we now seeing?
And I kind of tricked you, I had a public HTML already
and there was already some stuff in it.
But this is my public HTML directory.
So notice, this is just one
of those things you've got to remember.
So even though when you're
on the command line using Putty using SSH, C,
something like TILDACS50 actually denotes what directory?
Your home directory, there's this dichotomy,
once you're using a website, TILDCS50 or TILDAFUU
or TILDMAELIN [assumed spelling] actually refers
to MAILENS public HTML directory,
so when you're using the web,
the TILDA means something a little different.
Alright, well that's fine, let me go ahead
and click Hello dot HTML and I seem to have a problem.
So, it's forbidden and this kind of defeats the whole point
of the web, so what probably is the solution here?
Or just intuitively even?
>> [inaudible]
>> So it's forbidden, you don't have permission
to access this file on the server,
so we need to give ourselves permission.
So I'm going to go over, so this is not something that most
of you have had to do for problem sets yet, but I'm going
to go ahead and let me do LS-L Hello dot HTML.
Anytime you do at dash L, remember that's the long listing
and it gives you more information,
we started to discuss this in the current problem set
and even in passed ones.
So now notice, I apparently have a file called Hello dot HTML,
this was when it was made, 1:33 pm, it's owned by user CS50
and then there's these things over here,
so these little hyphens actually are bad thing,
because what those hyphens indicate are the permissions
for a file for myself, the so called owner,
followed by my group, which happens to be CS50, but you guys
on the Cloud are a special group called students
and we generally are in staff.
So we have myself, which are the first three bits,
three hyphens here, then there's group permissions
and then there is the whole world permissions.
Now the fact that mine say RW is a good thing
because that means I have the ability to do what two things?
Read and Write the file, that's all that means, so,
apparently all I need to now do is give everyone else
that ability and we'll discuss some of these conventions
in problem sets 7 in PDF, but I'm going
to run a command called TRUMAUD [assumed spelling] Change Mode
and what I'm going to say is change the mode of this file
to six four four, which we'll discuss again in problem set,
but just let me do an LS-L again of this file.
Notice that has had the magical effect
of giving everyone else Read permissions.
I don't want to give the whole world write permissions,
but read permissions is good because now if I go back
to my browser window here and click reload, walla,
I see my very simple web page, Hello World dot HTML.
Alright, so now let's start to do some things
that are a little more interesting
and I'm actually going to go into some prepared examples,
which you have print outs of today and I'm just going to look
at this version of Hello dot HTML.
So at the top of this file, ignore the messiness,
just because of my font wrapping, let me go ahead
and delete a few of these just so it doesn't confuse.
So this is an arbitrary convention.
In HTML, just as you can have comments in C,
you can have comments in XHTML or HTML, open bracket,
exclamation point, hyphen hyphen, then you put any,
most anything you want and then below
that you have hyphen hyphen close bracket,
so that's a comment.
Now the fact that I used all the stars
and the forward slash star, it was me just being anal,
trying to be consistent with all
of the C examples we ever did in the course.
But you can put anything you want,
pretty much between those comments.
But the magic really starts to happen down here.
So this is pretty much the same exact file as I typed
on the fly using Notepad dot exe,
but notice that there's a few differences here.
You do have a print out for notes,
these three lines here are simply necessary,
when you implement a web page in this language called HTML,
you unfortunately have to type this God awful sequence
of characters that even I have never once remembered,
I always copy and paste it from some previous code I've written.
But, this formality which was agreed upon a group
of volunteers, it's an organization called the W3C,
it's a standards group that essentially has said,
if you want to write code in this language called XHTML,
your page has to start with that.
Now you can have some comments and stuff,
but the page has to start with that.
So this too for the course, just a copy paste
and now there's one other difference that you have to do,
which I was lazy about a moment ago,
when you write open bracket HTML,
to make sure your code is valid XHTML, you also just need
to copy paste this XML NS thing with the equal sign,
the double quotes with the URL inside of it.
So I'm going to wave my hand at the reasons behind this
because they're really just a distraction,
but for now just take on faith that anytime you make a webpage
for the course or for HTML in general, these are kind
of some stupidities that you have to get started
with by copy paste or remembrance
and then you're ready to go.
So now we're ready to go.
Here is my webpage here, I'm going to go ahead
and open this version of it, it's in, this is all linked
on the courses web page, so lecture source
and this is Hello dot HTML, pretty much looks the same.
I've got Hello World top left of the body and now notice
if I scroll up to the title, notice in the title in the head
of the webpage is the same thing because that's what I typed.
Just a quick change here, if I really want to be sort
of obnoxious, especially if this thing gets indexed in Google
and I want this showing up in Google results, if I save that
and then reload my webpage, now you can see
that I have this effect there.
So we're now literally changing the internet
as we type these commands, alright,
so pretty powerful stuff.
So now let's do something that's a little more interesting.
Now I'm just going to do some things on the fly just
to convey the relative simplicity of this stuff
but really just to emphasize the basic building blocks.
It's not going to be fun if we start teaching you the Bold tag,
the Italics tag, the Center, there's so many simple things
that you can do, just a little cheat sheet to your right
or left hand side is really how you learn this stuff.
I mean, even I when my, Tim my Math CF sat me down
and taught me this stuff, he kind of did some of the basics
to help me understand that the framework and anytime
that you need to learn something new,
you look at somebody else's webpage on the internet
or you look in a manual linked to a number
of resources on the website.
So let's do something simple.
I have decided that besides Hello World there I want
to actually, I'm just going to zoom in here
so it's more readable, I'm going to go ahead
and make this Hello, bold.
So it turns out there is a tag for Bold,
open bracket B, close bracket.
And if I save my file and go back here and reload,
notice that Hello has indeed become a little more bold.
Alright, so that's great, kind of a useless webpage,
let me go ahead and put some other stuff there,
Welcome to my first website exclamation point,
I hope you enjoy your stay,
it's pretty much what my original webpage was.
So now I'm going to go back here, I'm going to reload,
not really what I intended,
so what's the obvious aesthetic bug?
So, I'm missing new lines, so it turns out that web pages
by design can have white space but it's got completely ignored
by the browser other than single spaces.
If you hit the space bar once, the browser notices,
hit it twice or hit the er, enter key, stops noticing.
So if I reload now, still no difference.
So that's because this is a markup language,
if you want a line break, you must say break here,
so BR is the line break instruction.
If I want it there and there,
I'm going to simply put it twice.
And now a word on the syntax in just a moment.
But let me reload and now okay.
Still hideous, but at least I'm starting to make sense
of the general syntax here.
So why did I do this thing here?
Well, it turns out there are some tags
that take what are called attributes, you can take a tag
and you can tweak it's behavior,
by adding what's called an attribute to that tag.
So let's see, what's one that I might want to do,
I'd really like to start centering this text,
so one approach to doing that is and there are more modern ways,
but I'm going to keep it simple.
I'm going to do center and just to be anal, much like we advise
in C and in the code you've been writing so far,
I'm going to re-indent manually,
though some tools can facilitate,
just to keep everything clean.
So anytime I open a tag, stylistically I indent
by two spaces, four spaces, just be consistent
and now what I have is a webpage that is not only line by line
by line, but it's also now centered.
Alright, so that's good.
But now this is not really explaining these slashes here
and it's not really a webpage, it's kind of a dead end, right?
The whole point of the hyper text markup language is
to actually link to other hyper links.
I've got none of that, so let's actually say a link
at the bottom here.
My favorite site is dub dub dub dot CS50 dot net,
let's do that, reload.
Okay, that's great, but now you're going to get users,
you know still a dead end.
So unlike a lot of popular websites,
FML and the like included in Facebook,
when you post a link normally they,
these days they automatically get hyper linked,
well that's because someone at Facebook wrote a few lines
of code that examines anything you type into their website
and it realizes, oh, this starts with dub dub dub,
this ends with a dot com or a dot net, I'm going to assume
with high probability that this is a URL,
let me make it clickable.
How do you make something clickable, well you have
to actually use one of these tags, so I'm going
to say open bracket A for anchor,
where do I want this link to lead,
well the attribute is called hyper ref or Href.
So I'm going to do quote unquote and now I'm going
to type the actual URL that I want the user to go to,
close quote, close angle bracket and now at the side here,
VIM [assumed spelling], the editor that I'm using,
let me actually move this onto a new line for space,
it's already highlighting it.
It doesn't mean that I can click it here,
it's just an aesthetic thing, so let me go ahead and say,
stop treating my text as a hyper link,
what's the command for that?
>> [inaudible]
>> Yeah, so backlash A and now period.
And actually and I can keep saying more stuff to emphasize
that this link is inline.
I have a whole bunch of text
but the part that's underlined is the thing that is
between the anchor tag and the close anchor tag.
Popular mistake and you may have seen it in websites like this,
though not that common
in corporate websites do something stupid like oops,
close B, which is kind of nonsensical,
now weird things happened.
Now this is where browsers have gone quote,
unquote forgiving over the years.
You know ten, fifteen years ago when this stuff was starting
to catch on, there really weren't people saying let's
adhere to these standards, the thing grew up fairly organically
and browsers started competing amongst themselves
for various features.
So you will find over the next several weeks
that sometimes your website looks different in IE
versus Firefox versus Chrome versus Safari
and frankly it's just a big old headache and it's largely
because companies have never once agreed properly
on certain interpretations for instance and in this case here.
What is the right approach if you have an open A tag
but a closed B tag, should I just assume it was a mistake
and stop hyper linking it or should I, and this is why
when you get ambiguity, it's unclear what the browser should,
so some browsers do different things.
But we're going to fix and I'm going to realize
that if I now click this link,
I in fact get whisked away to CS50's home page.
Alright, laughed again, alright, so,
what do we have that's interesting here?
We have tags, open and closed, we have attributes like this.
This is an attribute that modifies the behavior
of the tag, so it turns out that the tags, aka elements,
can have zero or more attributes.
I say zero or more because this guy doesn't have an attribute,
this guy doesn't have an attribute,
this guy doesn't have an attribute, but this one does
because not only are we telling the browser, here is an anchor,
here is a clickable link, you have to tell that tag
where it goes and so the general structure for all
of these tags is generally this format.
Open bracket, tag name, then zero or more
of the following attribute equals quote, unquote value.
Attribute equals quote, unquote value and so forth.
And now we can use this same idea
and actually use some attributes.
It turns out and I know this because I read the manual
or I went to class but there is a BG color attribute for body,
so I can actually say that I want my webpage to be, say, red.
And let's actually go back to this page here, whoops,
let's go back here to Hello dot HTML, okay,
so now it's actually starting to look less
like my original home page.
So, what else can I now do?
Well, this is already getting sufficiently hideous,
is there anything else that you would
like to see how we do before we forge ahead
with less ugly things.
What's something you often see in a webpage?
>> [inaudible]
>> Flatching, okay, there is a tag
from yester year called Blink
which was actually deprecated forcibly by several companies
because they hated web pages that would blink text like this,
but we kind of mimic this, alright, we'll show one thing
which is actually useful.
Let me go ahead and search for something called animated jif,
so a jif is a graphical format, you guys played
with BMPs this week and the jpegs,
you've probably seen jifs,
unfortunately the world has spent a lot
of time making really ugly things that blink and spin
and dance, one of them, we have apparently five thousand here.
Let's see if we can find something.
How about computers.
This is just some random website from Google, site is for sale
if you're interested, okay, so like this is the web
as I knew it in like 1995, like this,
I mean this is what it looked like.
Little graphics like this, little disks popping
out of toasters, I mean this was the internet.
So, I forgot it was, whoa okay, those are popups
which have largely been done away with, too.
Let's pick something here.
Alright, let's pick this guy.
So, I'm going to click this graphic and just
to demonstrate a common work flow,
especially for final projects and for the next couple
of problem sets, I want this guy in my webpage.
So one way I can do this, is I can copy the URL here,
I can go back to my little file.
I'm going to put a line break because I'm going
to put this little graphic at the bottom and I'm going
to use the image tag, succinctly just like C,
it's not image, it's IMG.
I need to tell the browser the source of this image,
so I'm going to go ahead and give it that URL and then
because there's no need to close a tag like image,
alright the image is either there or it's not,
we don't start putting an image
through some stuff then stop putting an image just
like a line break is similarly this atomic idea,
either do it or don't do it.
You can't start and finish a line break, that's why here to,
I put this angled bracket in here.
So, to be clear, this would be correct code,
but it just looks stupid.
Like open tag, close tag, it's all kind of wasteful in terms
of bytes, so the world has this convention
where you actually can put the slash inside of the tag,
especially during generally after a space like that
and that just says start and stop immediately
because there's nothing going to go inside of this anyway.
So now let me save this, let me go back to the browser,
I'm going to go to my webpage, now backup guys,
reload and voila, my webpage is really getting fancy.
Now, there's an interesting aside,
this is generally frowned upon,
linking to someone else's content,
now even though this image is only like four kilobytes,
I'm right now hitting reload a lot,
every time I reload my webpage,
my browser is hitting not only the Cloud but also what?
That guys web server, so this generally is a bad thing
if you link to someone else's server,
because it means visitors come to your page and he
or she pays the bill for all of the bandwidth,
for all of the graphics and content that have been coming
into the webpage and sometimes content
like that will be blocked.
So let's do one final step so that you know how to do it,
let me go back to this image, let me actually save it,
I'm going to save it to my desktop here,
we're going to call this computer dot jif,
don't change the file extension, just the name.
Now I have it on my desktop, what's the solution or the,
oh I have one new spam message, one direct buy,
you know we're lucky, this could have been a lot worse,
these popups.
Alright, so, so what's the solution
for getting this image into my own account?
You used this probably for Pset 5.
Yeah, so SFDP, even for SFDP,
you were generally downloading files
from the server to your own computer.
The program works in the same way in the other direction,
so I'm going to use SecureFX, you can use Cyber Duck
or whatever on your own computer.
I'm going to very quickly just configure a new session,
if you've never done this before we'll walk you through it
in section or post something online, but I'm going
to go ahead and hit enter, after typing Cloud I'm going
to be prompted for my user name CS50,
I'm going to type my password,
now notice I've got some other directories
because I use this kind of for other things, so I'm going to go
into my Public HTML directory.
There's my Hello dot HTML, so I'm just going
to move this window to the side and I'm going
to click computer dot jif, drag it over here, voila,
that's all it took to copy the file to my own account.
Now we're going to pay the bill for the bandwidth, but so be it.
So now I'm going to go back here,
I'm going to make the page look the same but reference of file
on my local account, I'm just going to delete, delete, delete,
delete, delete, delete, type computer dot jif, save it
and go here and reload.
Damn, what went wrong?
What's that?
Actually I asked that,
really you shouldn't have detected that,
I put it in the wrong place, so that's the academic lesson.
I put it in my Public HTML directory,
but you will not often have this problem, but I am actually only
in my lecture source directory.
So, now let's fix, now let's reload.
Okay and voila, now notice one thing,
fortunately SecureFX was smart enough to upload this
with world readable permissions
because of the way I configured it.
If I do an LS dash L for computer dot jif, notice it is
in fact read and read for everyone which is good.
If it were the opposite, just in case you ever see this,
which I'll simulate now, if it looks like that
and now I go back to my webpage and reload,
what will I likely see?
Some kind of error or just bad stuff happen,
it doesn't actually render and that's
because of a permissions problem there, alright.
So we have not made anything pretty there,
but at least we've talked about open tags and closed tags
and attributes and over all markup.
Any questions just yet?
Any questions?
Alright, so while this is not the type of URL
that one would advertise,
let's actually make this a little more real,
so that especially after you exit this course, you don't feel
like anything you ever do on the internet has to be tied
to some Harvard dot edu server or some CS50 dot net server.
Well, yes we own the domain name CS50 dot Net because we
as a course paid like nine ninety five,
a couple of years ago
to actually buy this domain name from a registrar.
So there's this whole infrastructure on the internet
of commerce and there are these entities called registrars
that you go to a website like Go Daddy dot com, silly name
but they are among the biggest so called registrars.
You hand them some money or you hand them a credit card
and then you can buy a domain name from them,
if it's in fact available.
What does this work flow actually look like?
Well, if I go to and I'll switch us over here.
Let's go to Go Daddy dot com, but there are dozens of other
such registrars you can typically fill
out a little search box like the one here and you can whoops,
search for, for instance, let's do Harvard dot com and see
if that's still available, because I'd love to scoop
that up for nine ninety five, so click go.
Presumably it's not actually owned
and in fact they'll often recommend a whole bunch
of domain names that you really don't want.
Because who, New Harvard For You dot com, so kind of silly, this,
this just means that it has been taken,
so one of the hardest parts frankly on this side is
to get a domain name, is finding one that's actually available.
Come final projects, one of the options
that you guys will have is not just to post your final projects
on our own servers, because if you're implementing a project
that you actually think will be useful to friends and to family,
people even outside of Harvard, odds are you want
to advertise something like My Good Domain name dot com
and not something like Cloud CS50 dot net,
so among the things that you will be able to do
in a few weeks time if you do go to a site like this,
buy yourself a domain name, you just have to tell
that registrar, where in the internet you're server lives.
So we for instance, have told Go Daddy a couple
of years ago what the name, what the addresses are
of those things called DNS servers.
We typed them into Go Daddy's website,
we have our own servers now in actual [inaudible]
so we just told Go Daddy, this domain name lives
at this particular IP address.
So come final projects, you guys too, if you decide,
purely optional to do a web based project and one
that you wanted a vanity domain, you know your own domain name,
you're simply going to have to find someplace to put it
and tell Go Daddy where it is.
Now so that you're work actually
out lives this course's semester, we'll actually put you
in touch with those folks called HCS,
the Harvard Computer Society and they will actually provide you
with an account on Harvard's Campus,
but that will create the illusion
that your domain name dot com is out there on the internet,
even though it lives on their server.
So just a little teaser so that you realize
that your final projects and beyond,
you can actually do this stuff yourself without the crutch
of a course's own infrastructure.
So, this is what we did to recap.
HTML, this is the simplest, valid webpage that you can make
in this language called XHTML.
It's completely underwhelming just as Hello World,
but it captures the basic spirit.
Now fortunately in this world of XHTML, there are tools out there
that can help you find mistakes in your code and one
of the things that Pset 7 and 8 will expect is
that your code be valid.
What this means is that when you type open bracket something
close bracket, you're not making stuff up as you go.
You're actually using standard syntax that has been approved
and actually exists in a language
and this is simply offered now as a way
of helping you debug your own code.
But there's also this other feature,
which we'll give just a teaser of here which is called CSS
and the web has actually changed quite a bit
from when I made those silly little pages with Frog Man
and my all capital letters and all of my tags versus today.
So very popular today is this supplementary language
called CSS.
So you have HTML or XHTML which is all about markup showing,
teaching someone, telling the browser how
to layout the webpage and then there's this complimentary
language now called CSS, cascading style sheets,
which much more like a word processor allows you
to fine tune the aesthetics.
If you want your font to be eighteen point,
you can use CSS for that.
If you want a very specific color, a very specific placement
of some element on the page, you can use some CSS.
And CSS is not a language we'll spend much time at all
on in the course because frankly
from the course's perspective we will be so thrilled
if you produce even the most hideous of projects,
if they are perfectly functional and actually well designed.
We will not expect works of art, because frankly without the help
of folks like Yuki and others,
this is what CS50 dot Net would look like if I were in charge.
So, we don't think this is now becoming a course
about aesthetic design, it's only about functional design.
So this clip here reveals one thing more
that you can put inside of that head element.
Those open tag for head and close tag.
So besides the title, which I still have laid out here,
you can put a style tag.
And a style tag allows you
to really control the more fine grain,
fine grain control the aesthetics of a webpage.
Well let me demonstrate,
let me go over to let's say Hello dot HTML
and let me go ahead to the top of the file and I'm going
to indent and say style type equals text slash CSS,
oops thank you.
So I'm going to put this at the head, all of I've done is this,
that's before, that's after I started typing style.
Now I'm going to close it preemptively and things
like this are just going to be conventions.
There are some older browsers or some mobile browsers on phones
that aren't very smart when it comes to tags.
They don't understand, so you often see these sort of hacks
or work around's that have evolved over the years,
so for instance, this one here essentially tells the browser,
here comes a style sheet, here comes some stuff in CSS.
But, in case this confuses you or if you don't understand it,
think of this as a comment.
So again, these are just kind of work arounds,
not terribly elegant, but this is what the [inaudible]
has developed.
But now, inside of this, I can go ahead and put some CSS.
So, CSS will let you control things
in essentially, three ways.
You can define, in this language called CSS,
some properties for actual elements.
An element is that same thing as a tag,
except that an element comprises essentially the open tag
and the closed tag, but it's the tag is just the top thing
or the bottom thing, open tag, closed tag, start tag,
end tag, similar jargon.
So this allows me to control the appearance
of a tag or an element.
The thing below it, with the hash mark,
means I can control the behavior of a specific tag
that has what's called an ID attribute.
But don't worry so much about that now.
And then also, we can define what are called classes.
So this is just mean to introduce it
so that you've seen it.
These are aesthetics that you can ultimately worry very little
about, or at least when you start reading up on this
for P Set 7 and its PDF, you'll understand.
Let me go ahead and do the following.
Let me go ahead and say that everything in the body
of this document, so I'm going to say the name
of the element, body, thank you.
Let me say the name of the element, name is body.
Let me go ahead and say, let's make this font size 96 point.
All right, so this isn't something I could express
as easily in the body of the webpage
so let me go ahead here, and reload.
Wow. Ok. So it's getting even worse.
All right, then at some point, well, let's see.
What else can we do?
What about the color?
Lets really make it hideous.
So what about yellow?
[ Laughter ]
Yeah.
[ Laughter ]
So, and realize too, I'm using some words
and you can't write things like fusia
or fairly random specific colors.
But you can use your hexadecimal code.
So if I actually wanted invisible text,
a sort of secret webpage, what if I do this?
Feels kind of fancy, right?
Oh! Come to my webpage and how do you know what I've told you?
Well you can just click and drag and see the message, right?
[ Laughter ]
So, that's how you can control the body.
Let me do one other thing, and again,
this is a hideous train wreck of a site so far.
But that's not so much the point.
It's just to look at some of these fundamentals.
Let me go ahead and define a class called copyright.
All right, so dot and then a t word like copyright
and for copyright, I don't want this crazy 96 point Font,
I want the font size to be smaller.
I just want it to be 12 point.
So now, CSS is cascading in the sense that things you define
above can be overridden by things below.
So what does that mean here?
Well, let's actually put a copyright here.
So copyright CS50 at the bottom.
If I save that as is and reload, actually,
we got to fix this red text here.
Let's change the text back to oh, let's try blue this time.
All right.
Blue, even worse.
Scroll down, there's my huge copyright.
So I'd really like to shrink just that so let me go ahead
and encapsulate copyright in what's called a span.
This just says span the following line.
So span and then what class do I want
to assign to this line of code?
Well, what did I call it.
Yeah, just copyright, all lowercase, close bracket.
Now I put my content, my actual data,
which is copyright CS50 then I close span over here.
And to be clear, even though in your open tags,
you do specify attributes,
you do not specify them again in the close tag.
You just close the original word.
Now let me go ahead and reload and uh-huh, now I have indeed,
overridden the default font size
and controlled it a little more specifically.
And using the ID attribute,
you can target very specific elements as well.
So this is actually, all it sort of takes
to start making webpage's.
Pretty hideous webpage's at that.
Let's go ahead and take a five minute break
and then start making Google.
All right, we are back.
So, notice that there, ok, did it again, damn it, take three.
All right, notice that there are a whole bunch of office hours,
not only on Thursday nights and Friday afternoons,
but also Monday, Tuesday, Wednesday and even on Sundays,
so do, especially if you're finding that you would
like a little more one on one attention or assistance
with the problem set and the crazy Thursday nights really
aren't conducive to thinking it through and understanding things
at your pace, do take advantage of the blue when the red boxes,
that are much earlier in the week, including tonight.
So just a reminder on that.
All right, so now there's this thing called Google.
All right, it's pretty popular, works pretty well.
But it uses, strikingly, a very simple interface
and some very basic user interface mechanisms, right?
And actually, these [inaudible] mechanisms are what compose most
every website out there that takes user input.
You have these things called forms.
You have text fields like this one.
You have buttons.
You have drop down menus.
You've got little radio buttons and check boxes.
But that's actually about it.
To implement forms on the web,
you just need a few of these tools.
So here's just a quick laundry list,
and this is pretty extensive,
of how you can actually take input from users.
We focused thus far on providing output, aesthetic output,
but you have these things called text fields.
If I zoom in on this, this thing up here will allow me,
open bracket input, name email, type equals text.
This will tell the browser, put a textbox here,
that the user can type stuff into, call that textbox email.
If you, instead, want a bigger text area,
where you would actually write a long response
or multiple sentences or paragraphs,
you have things called text areas.
If you want a password, where when the user types,
it becomes little circles or bullets
and not actually clear text, well,
you just say type equals password for that third one.
If you want checkboxes, you say type equals checkbox.
If you want radio buttons, the little circular things,
you say type equals radio.
And then finally, if you want one of those dropdown menus
for long lists, you call it a select
and then you give it a name and then you have one
or more options beneath.
So these are the basic building blocks of every website
out there and it's amazing, frankly, that there exists
so many permutations of these very simple elements
on every website you use there today.
This is kind of it, right?
We've spent, you know, half an hour, an hour,
talking about the structure of a webpage
and where these files live and what it takes to get files
from servers to browsers.
But at the end of the day, now that you have this,
or now that we'll start to use this, you have the ability
to actually start making interactive, user software.
In CS50's library, we get INT and get STRING,
how do you get INT's and STRINGS from users, whala,
with this basic commands for getting form elements.
And it turns out, that on the web, because everything you get
from users is typed at a keyboard,
which essentially is text, you don't even have to worry as much
about floating points and strings verses int's
because it all comes into you, the server, as actual text.
So let's see if we can't reimplement,
as fast as we can, Google.
So, here is Google.
Every web browser that you probably use has a feature,
even if you've not used this feature, called view source.
So in Firefox, it happens to be
under the view menu, under page source.
And as I did a little bit ago,
this just shows you the contents of this webpage.
Now very often, will these contents look
like a complete mess.
In fact, Google's is particularly messy
and particularly compressed.
Even though I can scroll to the right,
notice they did not waste time being all anal and pretty
by indenting their code and hitting enter a whole lot.
And that's because, when you get a billion hits per day,
and you hit the enter key once
and add one additional backslash end to your file,
that's a billion more bytes that you have
to let your users download over the course of the day.
Hit enter twice, that's two billion bytes.
So, you know, one Google employee who hits the enter key,
can cost Google gigabytes of data just by having white space
that we have so heavily preached in this class.
Now this does not mean that if you go work for Google,
you start to write code that looks like this.
So they actually wrote it, odds are,
in a very human friendly way, but they ran a little tool
that removed all superfluous white space that transformed all
of their variable names to just x and y
and z. These are things called compressors and even I do this
for the course's website and even other tools
for a couple of reasons.
One, you can save bytes and the fewer bytes you have to send
to the user, the faster it goes.
That might not matter so much when you're on Harvard's campus,
but if you're using iPhones or Blackberries
or cell phones these days, you know, 3G is kind of a joke.
It's not all that fast.
So the more bytes you send to a phone for a webpage,
the longer it's going to take for the user to see it.
So just optimizing these kinds of details are very important.
Unfortunately, it makes this a little hard for us
to see how this webpage works.
But there is a familiar element.
If I zoom in, what does Google, indeed, have that we had too?
Open brackets, html, right?
So it seems like we know how to implement Google.
So, they have this, they have a head,
there are some other meta tags,
and there's definitely some details that we're not going
to cover today or maybe ever in the course,
because they are just not that interesting and not necessary.
Some of them, like this meta tag, but oh, there's the title.
So this is, right, this little piece
of text is what gave Google its brand name, right,
open bracket title, close bracket Google, close tag there.
So let's actually tease apart some of the interesting stuff.
Let me use control F and search for body, ok.
So the real contents of the webpage don't start till
down here so let me avoid some distractions.
Let me just go ahead, oops, let me go ahead and put this
into let's say, notepad.
All right, so it's even messier here.
So let me go ahead and do a control F
for body, there's body.
Now I'm going to move my cursor over here and I'm just going
to delete all this stuff because clearly, it's not necessary
for the body of webpage, it doesn't start till here.
Ok, so this is why Google's homepage is white.
This is why text on Google's page is black.
Zero zero is all black.
This is why links on Google's pages are kind of what color?
Blue, so right, the fact that Google's homepage looks
like this with blue links is because the links are 0000CC,
so that's red, green, blue.
So it's not FF, which is a lot, its CC, which is a good amount
of blue, that's why the links are blue.
Now realize, Google, largely for compatibility reasons
and for financial cost reasons, did not waste time with things
like this, though that is expected for the course and just
for the matter of good practice.
Google is, well, if your website gets billions of hits per day,
you too can start leaving off your quotes.
All right, so, we've got a body, but then,
I'm already getting a little distracted here.
Let's see, it turns out, let me look for the thing
that I know implements the magic.
Open bracket form, any form on a webpage, text fields,
select menus and all of this, starts with open bracket form.
So this too, is kind of a distraction.
So let me get rid of everything before that, because really,
I want to get to the guts of this webpage, which is the form.
All right, so it turns out that in an html, in a webpage's form,
there's a few attributes we care about, one is called action
and one is maybe called name.
Then there's this table here, but again,
I'm getting a little overwhelmed, so let me search
for the things that we promised a moment ago,
are what make all this possible.
So, just a recap, this is what the various input mechanisms
look like, open bracket input,
so that's all I'm going to search for.
I'm going to whittle Google down to its base building blocks.
So open bracket input, there's an input, oops.
Lost it already.
Open bracket input, so I really don't care
about this to the left.
And it turns out, Google is actually is laying its page
out using an element called what?
Apparently, so they're using a table.
So behind Google.com, this webpage, the fact that some
of this is centered and things are kind
of in this invisible grid,
is because Google is using an invisible table
that we'll actually use too because it's very simple,
even though some people frown upon it these days.
But that's why there's this markup.
Everything's being laid out in tabular form, but that's fine.
Let's just get rid of that.
Here's an input, I care about that.
Here's another input, I care about that.
Here's a span, I don't care about that, span, span, span,
I don't really care about that.
Let me search for the next input,
just to finish whittling this down.
No more inputs there, because this one is, yep, over here.
So let me close the search for, uh, open bracket,
open bracket, there it is.
So there's my DR, and here is my Google search,
oh, we're almost done.
We almost have Google as an essence and here's another input
and now we're all the way at the other end here.
Let's do this, search for this, this, ok.
There it is.
Ok, so we have now whittled Google
down to its most basic elements.
Let me go ahead and shrink the fonts so we can actually see
that had you thought of this first,
it'd be your website and not Google's.
That's really all it took to implement the front end,
at least, to Google's website.
Now, there's still some distractions here,
so let's only focus on the ones that really matter.
But here is open bracket form, here's open bracket input,
and with these six or so elements,
can we implement our own version of Google.
Let me go over here, I'm going to go ahead and copy,
hello.html, and I'm going to call it fake Google.html.
I'm going to now open fake Google, fakegoogle.html,
I'm going to rename it here to be proper, fakegoogle.html.
reimplement Google.
All right, so here's my basic webpage.
I'm going to get rid of the hideous mess that this thing was
so we're only going to do the important building blocks.
So, delete, delete, delete, delete, delete, delete, delete,
delete, no more red, ok.
So now I have a very simple page.
I'm going to call it fakegoogle, [inaudible] get rid
of my trailing white space, save those bytes.
So now I'm going to go back over to my browser here.
I'm going to reload fakegoogle, oops, what did I forget to do?
So there's this [inaudible] command, which will explain
in more detail on Wednesday.
But fakegoogle, I'm going to [inaudible] then I'm going
to go ahead and reload my web browser, ok.
There we go.
Now it's time to implement Google.
So, I need to do something here.
Lets center it first, close center, all right,
now I need something in the middle.
So, it turns out there's this heading tag called H1,
which means make this big and bold.
So let's go ahead and call this fakegoogle H1
and now I need a form below it.
So let's do open bracket form,
I don't really know yet what comes next.
But I know what comes at the very end.
So form, so forms have to be submitted somewhere,
when you click submit,
where does the request go to, to what URL?
Well, apparently, it goes to what?
Search, so let's see, let's just copy what Google did.
So forward slash search, and then that's enough.
We're going to skip this name.
So now what do I need?
I need an input type, what type of input do I want first?
A little sanity check.
All right, just think, I want to implement Google.
What do I need first?
Text, right, I just need this big textbox.
That's all and then two buttons and then we're done.
So input type equals text.
I need to give this thing a name
so that Google knows what to expect.
What was the name given to Google's versions of this?
Do we see it here?
It's in this line here.
What is Google's called?
Actually, lets actually take a step back.
And let us search for CS50.
So I'm going to go ahead and hit Google search
and now notice what happens in the URL up top.
Enter, notice there's a whole bunch
of stuff that's gone on up here.
But if we really whittle it down,
where is the interesting dynamic part?
It's just that, so apparently the mere passing
of q equals something into the URL Google,
is enough to teach Google to actually search for that phrase.
A little aside, I have never once understood why this hit
here, CS50, is the laws of word and that leads to our webpage.
So extra credit if any of you can figure out who that guy is
and why he has a video on your webpage
because it's been there for two years.
[ Laughter ]
All right, so back to the page.
So name equals q, that's going to be the input.
So forms work as follows.
You define the elements, like whether it's a menu
or a text field, you give it a name because then
when you enter, those same names end up in the URLs,
just as we saw with my browsers a moment ago.
So let's go ahead and do this.
We've got input type equals q, now let me do input, turns out,
there's another type, equals submit.
And what does Google's button look like?
Let's see, this Google's button says what on it?
Google search, all right, so let's call this fakegooglsearch.
Close quotes, all right.
And then, all right, fine, we'll do the,
I'm feeling lucky, I'm feeling lucky.
All right, and now let's go back
to my version of this and reload.
Ok, almost there.
What do I need to fix first, aesthetically?
So I need a line break right.
So I put this line break here
with the BR instruction, now reload, ok.
So now we can quibble about other things.
It turns out, there are other things
like size I can say size is 96
so we can really allow long search strings.
That makes it bigger.
You know, we can play all day long with these aesthetics.
But now, let's at least see if the basic building blocks work.
So now let me go ahead and type in CS50.
And click fakegooglsearch, and unfortunately,
bad stuff happened because where did I go?
What URL? So I did go to search, slash search is the root
of the current server's hard drive,
so to speak, slash search.
And then notice what happened.
So the web form is smart enough to submit to the right action.
I told it go to slash search.
Unfortunately, I never implemented slash search
on the server, but notice the more interesting part,
question mark, something equals something.
This is the means by which elements are encoded in URL's
when you submit a form.
You, the browser automatically puts a question mark
after the URL and it does attribute equals value,
ampersand [sp?], attribute equals value, ampersand.
We only have one attribute here
because I only gave one element a name, q, but so far so good.
Question mark, attribute equals value.
Well, let's not actually send our users to ourselves
because we'd never actually implement in Google.
Why don't we, instead, send them to da, da, da, dot Google.com.
all right, so, I'm kind of punting on some
of the implementation details but, lets reload and lets search
for fakegoogle, whala, I have reimplemented Google.
[ Laughter ]
And it works, right?
There is that guy again.
So what are the basic building blocks here?
Well, let's actually do this.
Let me just go to the tools menu
and even though we rarely preach certain software in this course,
let me strongly urge you,
especially if you have no opinions out the gate,
use Firefox as your browser for problem sets 7 and 8
in your final project if you do a web based one,
because it comes with so many free tools for debugging.
One of them is this thing.
I installed it from the course's website,
this thing called Live HTTP Headers.
And when a web browser contacts a web server,
which actually going across the wire is a whole bunch
of stuff you the human, never actually see,
but let's just see what's going across the wire.
Let me move this window aside.
And now this is just an empty window right now.
Let me go ahead and click fakegooglesearch.
Enter, so a whole bunch of stuff just went across the wire.
Well, when you type in HTTP colon slash,
slash, what is that?
So HTTP is a protocol, it's a language on its own,
that is a language spoken by web servers and web browsers.
How do you get data from point a to point b?
you speak this language called HTTP.
Now earlier today, I kind of dumbed things down
and I said well, the browser asks for CS50.net's homepage.
Well, what does that really mean?
It's not going to write it in an English sentence,
give me your homepage.
But rather, it's going to encode it with this query.
If you've ever heard of a get, and its fine if you haven't,
it pretty much says what it does, that one blue,
bold line there is all it takes for a browser
to make a specific request of the server.
In this case, what has my browser,
upon hitting the submit button, asked Google.com,
the server in question, to give it.
Give it the result of asking
for slash search question mark q equals CS50.
And then there's all this other stuff.
So there's a lot of meta data.
For instance, this line here reminds the server what URL
is requested.
Here's some information on what browser I'm using,
fairly cryptically.
There's a bunch of other stuff and then finally, down here,
we get a response from the server.
The server tells us hey, here's a cookie,
which we'll discuss on Wednesday.
Hey, here is a caching information
for performance reasons.
So in short, there's a lot
of stuff that's going on behind the scenes.
But at the end of the day, my whole request boils
down to this simple query here.
Well, this is only so interesting
when I've implemented just the front end.
Well, back in the day, before php actually existed,
I think that's an accurate statement,
the freshman intramural sports program had, as I may have said
in the past, a really fancy system
for registering for sports.
You would fill out a piece of paper, you would walk
over to Wigglesworth C or D, you would knock
on the door and get let in.
And then you would find the proctor who lived there
who ran the freshman intramural sports program.
You would then submit your form through the mail slot
in that person's door and then whalaa, you were registered
for [inaudible] unless the paper got lost and stuff like that.
Right, this was in 1996, a really interesting,
a really obvious opportunity for automation.
And at the time, actually, literally,
I had just taken CS50 and then CS51.
There was no web programming in the course then.
I had no clue how to do this.
But it was an excuse at the time to teach myself Pearl,
which was a language very much in vogue
at the time and still kind of is.
But I used it and taught myself to make webpage's.
And actually, the first one kind of looked like this
because what does it mean to register
for freshman intramural sports?
Well, the proctor needed to know their name, their gender,
whether or not they wanted to be a captain, perhaps,
and then also their dorm.
So even this interface, way back then,
boiled down to some very basic constructs.
Thankfully, PHP makes this stuff much more interesting,
but clearly, when I click this submit button, I can't submit it
to Google because that's completely useless.
I'm going to have to submit it to a file on my own server.
So what we haven't yet seen is the ability
to actually implement logic ourselves.
We implemented some HTML and some CSS
for some ugly aesthetics, but then we completely punted
on the logical design of Google
by outsourcing that part to Google.
So what we'll do on Wednesday,
is actually implement the back end of this
and the motivation here, to be clear,
is that when you exit this course, you won't know just C
and you'll be struck, I think, over the next couple of weeks,
even if some of this moves quickly, and you feel like wow.
We're really not learning PHP as much as we did C,
that's the whole point because you're not going
to have a course to teach you the next 20 years worth
of languages.
The point of the next several weeks are
to help you realize how you can teach yourself new languages
because there will be many over the course of your lifetime.
So with that, PHP, on Wednesday.
[ background noises ]