[MUSIC PLAYING] 

DAVID J MALAN: This is CS50 and this is the start of week 7. So welcome back. And you may recall that in problem set four, there was a bit of a scavenger hunt for some fabulous prizes whereby after you recover the photos of staff both here and in New Haven, you were challenged to find as many of those computer scientists as you could. And we've got a whole bunch of submissions. Thought I'd share a few with you here today. 

And we'll post all of these online. But in particular, I wanted to draw your attention to-- well one, Sam was in quite a few of them generally posing like this. But it appears that as of this morning, the winner was a certain someone named Ken with 24 of the staff captured on camera or a few more when you take into account multiple staff in the pictures. Pictured here is Ken next to Mary in New Haven. 

Now, Ken, though, turns out is bit of a corner case that's not yet happened before. It turns out that it didn't occur to me to put fine print in problem set four that says that staff are ineligible for the fabulous prizes because Ken is, of course, one of the photographers on our staff. Now, with that said, he originally wrote me to say please do not post these photos online. I think in large part because most of the photos that this photographer took look a little something like this. And the like. 

But Ken would like me to reassure you that he's a very good photographer, he is a professional, he takes photos that are not blurry, that are better in focus, and he took quite a few of our own staff. But rather than only acknowledge Ken, what we thought we'd do is go through the list of actual students who submitted. And it turns out that Lance with 15 photos as of this morning was our winner. 

And pictured here is Lance with Colton, with Skaz, with myself, and with Sam. But then it turns out that as of 11:46 AM, so just a little bit ago, I went back to my email and found that we had yet one more submission by a student named Bonnie whose email said only this. Not going to lie, I'm doing this during class. And then proceeded to attach just 14 photos, one shy of Lance's 15. 

But in Bonnie's photos, it turns out were multiple staff members, Sam among them, so what we thought we would do is acknowledge both of these. So in addition to getting the Dropbox space that everyone who participated receives, these two sections will also receive a nice catered lunch for them and their section mates this coming week. And so you will hear from us, Lance and Bonnie, about that. So big congrats to them. Now, those of you who would like lunch more generally know that CS50 lunch in Cambridge and New Haven is this Friday. Go to CS50's website slash RSVP. And now a word on seminars. More curricularly. So we're nearing the point of the semester where you should start thinking about final projects. And in fact, in just a bit, will so-called pre proposals be due. So pre proposals are meant to be pretty low impact and really just an opportunity for you to compose a short note your teaching fellow to apprise him or her what you're thinking you might want to do for your final project. 

Now, many students end up doing web based final projects. And of course, we're just now last week in this and beyond diving into web programming. So not to worry if you have absolutely no idea how you would build the ideas that you might have in your mind. This is really just a forcing function to get you thinking and talking with your TF about it. But to help you with that, and with final projects ultimately, know that CS50 has a tradition of offering seminars. 

And these are optional, hands on, or lecture based on opportunities to learn more about topics that are a little ancillary to the course's syllabus, but nonetheless wonderful material to drive final projects. And so this is the list that's CS50 staff here in New Haven have come up with for this year about iOS programming, Android programming, game development, and bunches of more tools and languages and techniques. 

So keep an eye on the CS50's website. And in the meantime, if you'd like to register your interest in any of these, go to CS50's slash register. And we will then follow up as to the days and flight times and locations and everything-- most everything will be streamed and also available on demand after if you cannot actually make it. So without further ado, we left off last time with GET. 

And this was like the message that was inside of the virtual envelope, recall, that we passed from router to router to router between a web browser and a web server. And that message looked a little something like this. This was the more arcane message that was actually inside of an envelope written on a piece of paper whose first line says literally, get slash. 

And just as a sanity check, what did slash denote? What does slash mean when requesting a website? You request it all the time. Most any time you visit a website, you don't actually type in a file name. You probably just go to Facebook.com, enter, gmail.com, or the like. And what does slash represent? What file? Or what page, specifically? 

The index, yeah. So the default page. So if you don't specify a file name as we'll start to see, you're actually just requesting give me the default page of Facebook or give me my inbox or give me the default page of news on CNN's website or the like. And a server then responds to that message with something like this, saying yes, I speak HTTP version 1.1. 

200, which is a status code that we humans rarely ever see because it's good. Because it means OK, the request was received and handled properly. And the content type apparently in the response is quite often, but not always, text. And specifically, HTML. And that's actually where we look at today. 

So in fact, I'm going to go ahead and open up a browser. I'm going to use Chrome, you can use most any browser in the weeks to come. We generally recommend Chrome because it's particularly good for software developers. It's got a lot of built in tools that make it easier to develop not only HTML and CSS, things we'll start talking about today, but also other languages as well. 

And I'm going to go ahead and go to-- I'm going to Control click or right click anywhere on a web page. And I'm going to go to Inspect Element. And I'm going to tweak my screen just a little bit here. Let me move this to the bottom. So this is what's called Chrome's Inspector. So this is like a debugging tool built into Chrome. 

All of you already have this if you've been using Chrome. And it allows you to see what's going on underneath the hood of some web page. So let's actually take a look at this as follows. It has way more features and we care about today. But there's these tabs over here. Elements, network, sources, timeline, and some other stuff. I'm going to click on Network for a moment. 

And it's a little overwhelming at first glance here. But what I'm going to do is let me simplify it a little bit. I'm going to turn on the recording light so that it's red. And I'm going to say preserve log. And this is just a little thing I figured out over time that's going to save everything that happens in the browser. And now I'm going to go to http://facebook.com. 

Actually, let's do www for good measure, slash. Enter. So a URL that many of you might have visited. And now Facebook's web page comes up at the top. And then a whole bunch of stuff flew by at the bottom. And in fact, it turns out that when you visit Facebook.com, you're not just making one HTTP request, it turns out that going to Facebook.com sends 41 of those envelopes, each with its own get request, as indicated, albeit behind the screen here, at the bottom of the screen, it indicates that, indeed, my browser made 41 the requests. 

And in total, it transferred 861 kilobytes and it took for some reason as many as eight seconds to download all of that. So that's actually a little weird that Facebook's site would take that long, but so be it in this case. Now, all of this I don't really care about except for the topmost request. So let's go to this one right here and let me zoom out for just a moment. 

And let me zoom in on this. So what I've done at left even though there's a lot going on over here is I've highlighted Facebook.com and then notice that I'm scrolling down, scrolling down, scrolling down, to request headers. And you'll see that Chrome is showing me essentially the inner contents of the request I made. It's not formatting in quite the same way, but notice there's mention of get, notice there's mention of the host, Facebook.com, the path, or slash, which is the file I requested. 

And then if I scroll back up, we'll actually see that what Facebook returned to me is all of these headers. So inside of that virtual envelope indeed are a lot of key value pairs. A word, a colon, and then a value. A word, a colon, and a value. These are called headers. And there's way more detail here than we actually care about right now. 

But this is second to last one down there, notice, that Facebook.com's server, indeed said here comes some text HTML. So all of this is to say that when you request a web page from a browser to a server, that server responds with an envelope of its own inside of which is text. In other words, HTML. HyperText Markup Language. Which is another language that we introduce today that humans or computers generate in order to implement web pages. 

Specifically, let's look at this. I'm going to now go back to Facebook's website. And I'm going to just control click or right click and click on View Page Source. And even if you don't use Chrome, IE can do this, Firefox can do this, Safari can do this, even though the menu options might look a little different. And this is the HTML that Mark and company at Facebook have written. 

And to collectively, this language here implements the blue and the white page that we saw a moment ago. Now, this is a bit overwhelming. But if we look up at top left, we're going to start to see some patterns. It looks like there's a lot of these open angle bracket and then there's this keyword HTML. Here's another open angle bracket and head. 

Here is, if we scroll down and down and down, I'm going to go ahead and try to search for something. There way over on the right here is open bracket body. And recall from last time that we proposed that the simplest web page that a human might write might look a little something like this. Open HTML tag, open head tag, open title tag, then closed title, closed head, open body tag, some text, closed body, closed HTML. 

But a pause here for just a moment. This code, even if you've never written it before but still don't quite understand what's going on, looks pretty good. Right, it's very clean. It's very stylistically nice. A lot of indentation and white space. Facebook's is not. So why is Facebook so much worse than I at writing HTML? Apparently. 

Right, this is like one out of five for style. There's a compelling reason for them to cut these corners. All right, so they don't want to make it easier for you to read it. So in some sense, they're obfuscating it, sort of scrambling it at least aesthetically so that it's harder for Myspace to go and rip off their homepage and the HTML for it. It turns out that with programs though, including Chrome, we can clean this up super easily. So it's not quite that as the reason. What else might be the cause. Yeah. Yeah, white space costs data. What do you mean? Yeah, exactly. If you hit the Tab key a lot or the space bar, consider the implications. So every key on your keyboard is an [INAUDIBLE] represented as one byte. 

So suppose that Mark or any of the devs these days hits the spacebar just once in this HTML page that represents Facebook's homepage. And Facebook has a lot of users these days. So suppose that Facebook's homepage is visited by a billion people today. And someone at Facebook has hit the space bar just once. 

So one additional byte, a billion requests, how much more data is Facebook transferring over the internet because someone hit the spacebar on his or her keyboard? A billion bytes, or one gigabyte of data is being sent from Facebook servers to people around the world for no good reason. Now, that's just one space. 

Imagine if we actually clean this thing up and indented it and added a lot of white space and tab characters and spaces, you end up spending gigabytes, if not terra bytes more of space. And so super common in the actual world of web development is to minify your code. And we'll eventually see how you might do this. 

But today, we'll start writing code that's actually readable by us humans. It turns out, though, if you go back to this tool in Chrome Inspect Element, previously, we were on the Network tab. It turns out that if you go to the elements tab, what you actually see is Chrome's pretty printed version of that same HTML. So we've deobfuscated it. So it's no match for a computer. And now you can actually click around and start to see the hierarchy that is a web page. So let's actually do this. I'm going to go ahead and open up on my Mac a program called text edit. And recall that this is just a super simple text program. Windows has notepad.exe. And I'm going to verbatim type the following. Doc type HTML, open bracket HTML, closed bracket HTML, we have the head of the page here, the end of the head of the page here, a title will be like, hello world. 

And then down here, we need the body of the web page. Closed body. And then in here, hello world. All right. So we've written a super fast web page. I'm going to save it as hello.html on my desktop. My Mac's going to complain, thinking that, wait a minute, this is a text file, do you want to call it .txt? But no, I want to use dot HTML. 

And then what's nice if I just double click this file, hello.html, here's my web page. Unfortunately, I am the only person in the world who can visit this page right now. Because where does it live apparently? It's on my Mac, right? Which is useless. Like no one in this room let alone on the internet can actually visit that page. So today, we need to introduce another element. 

And to do this, I'm going to go ahead and open up cloud 9. So cloud 9 is of course a cloud based service-- CS50 IDE-- That has all of our workspaces running somewhere on the internet. And that means that all of our files are publicly accessible already. So let's go ahead and do this. I'm going to go ahead and create a new file NCS50IDE. I'm going to save it as before as hello.html and click save. And now just to save time, I'm going to go ahead and copy paste this code rather than retype it. And save it. And so now I have a file called hello.html. But how do I actually open it as a web page? Well, it turns out the built in to CS50 IDE is not only a compiler like clang and a debugger like GDB and bunches of other programs, there's actually a full fledged web server running within CS50 IDE. 

All of you, that is to say, have your own web server. And a web server is just a piece of software whose purpose in life is to serve up web pages. To listen for requests from browsers and respond with little virtual envelopes inside of which is the content that I've written. So this web server is actually free and open source. Where open source just means software that someone else has written that all of us can actually see and download and even change the source code. And it's called Apache. 

And we've made it a little easier to use in CS50IDE by calling it Apache 50. So that it can actually understand the following. I'm going to say Apache 50 start. And then I'm just going to say dot. And we see some somewhat arcane message saying setting Apache's document [? group ?] to home, ubuntu, whatever that is, slash workspace. Starting web server Apache 2 successfully. 

So long story short, I have just pushed a button and turned on a web server who's now listening on the internet on TCP port 80 at a specific address. And it says here, and this will change based on your username and other factors, but notice now if I click this, IDE50 dot jharvard and so and so, notice that all this time for the past several weeks, you might have noticed that your own username is embedded in the top right hand corner of CS50IDE. 

And that actually has been all this time the address at which you can visit all of your files via the web. Until now, it hasn't mattered, because in C, you generally want things running in a terminal, not on the web. But today, we start writing web based code that we do want accessible at public URLs. So what I'm going to do is click this URL. 

And notice that I see a fairly ugly index, a directory listing, but what file jumps out at you probably? Hello.html. That's because I saved the file in my workspace. And what I've told Apache the web server is look in David's workspace directory. And let anyone in the world see those files. 

And indeed, if I now click on hello.html, I see within this tab exactly that file. Now notice, cloud 9's doing something a little helpful for us. Within CS50 IDE, notice there's suddenly an address bar. That's because even though we're using Chrome to visit CS50IDE, inside of CS50IDE is its own version of a web browser right now. And so rather than complicate things as such, I'm going to go ahead and just copy this URL. I'm going to go ahead and just open my own Chrome window. So there's no magic here, no CS50IDE. I'm just going to literally paste my J Harvard URL and hit Enter. And voila, now I, and in theory, everyone on the internet, if I've configured permissions appropriately, can visit this file. And so now, if I said hello.html, voila, there is my incredibly underwhelming web page. So let's do a quick sanity check. Because all of that is conceptual set up. And we've actually not really taught you how to write HTML per se. Any questions thus far on what's just happened? Yes. Does CS50 own these web pages? In what sense? Good question. So CS50's owns CS50.io. We've indeed bought that domain name. And by nature of you guys logging into CS50IDE, you all get what's called a subdomain. 

So IDE50-malan, or IDE50-Rob.CS50.io, that's your unique address within our domain name. So for the purposes of the course, you have your own unique address. But we've simplified things by buying the top level domain, CS50 dot I/O and then everyone else is inside of that, so to speak. And we'll come back to that in a couple of weeks probably, especially at final project time, when some of you might want to get your own domain names. It's actually relatively straightforward. All right. So let's now do this. I'm going to go back into CS50IDE, where my file right now, hello.html, is not all that interesting. I'd like to do something a little nicer than that. So I'm going to do something like this. Let me open paragraphs.html. So this is a file I wrote in advance. At the top of it, like always, we have comments. But in HTML, comments look a little different. On line three and line 14, you see the syntax for start a comment and end a comment. 

But none of the stuff in between matters functionally. It's just a note to a human what's going on here. And just as a quick sanity check, if I scroll down, what's the obvious new tag that we've introduced? The tags thus far we've seen are open bracket HTML, head, title, and body. But what's obviously new now? 

Yeah, so p. The p tag or paragraph tag. And then I just borrowed some default Latin text to constitute my paragraphs. Because what I wanted to demonstrate is how you might represent paragraphs of text in HTML. And so what's starting to happen here is that there's already a pattern developing. And let me go ahead and do this. Let me first turn off Apache. And I'm going to tell it to start itself again inside of today's source seven m directory. So that I have access to everything. 

And now, if I go back to this directory listing, notice I see every file from today. And you'll see in the next problem set, we'll give you instructions for doing exactly this. If I open paragraphs.html, this might as well look like a programming language to you if you don't speak or read Latin. But this is just three paragraphs of text that are marked up in HTML. 

And notice the paragraph breaks between them. Because it turns out, and even though you might be inclined to do this, whereas in the real world, if you want to put line breaks between things, you might quite simply do this and hit Save. And now, if I reload here, notice that everything just blurs together in just one blob of text. Because HTML is kind of a dumb language. 

It is meant to be used in such a way that the browser will only do explicitly what you tell it to do. So if you don't tell it give me a new paragraph, you're not going to see a new paragraph. And in fact, what the browser's going to do is even if you hit Enter, let's say again and again and again, moving this text way down on the screen and then save and then reload, the browser is going to collapse all of that white space into just a single, visible whitespace. All right. So that's the paragraph tag. And so what's the pattern that's developing here? Well, it seems to be the case that HTML is all about starting a tag and ending a tag. And what is a tag? Well, it's just a chunk of syntax. Open bracket, a keyword, closed bracket, is a tag. Or start tag. And then when you're done expressing yourself, as in you're done with the paragraph, you do so to speak opposite. But the opposite isn't quite backwards. 

You simply prefix the same tag's name with a forward slash like this. All right. So not all that exciting. And in fact, we're not making the web all that more interesting. What if I want to make things bigger and bold? So it turns out that here's an example in headings.html, where in my body, I've got an H1 tag, H2, H3, four, five, or six, all of which seem pretty arcane. But if I go open this example, let's take a look. Headings.html. 

So browsers by default can give you text that's big and bold of disparate sizes. H1 is big. H6 is smaller and then everything else in between. So that's interesting but still not really the web I know. What if we want to I have something like a list. . So here's a bulleted list of three of Harvard's houses. 

How did you go about doing this? Well, take a look at list.html. And here, we see a little bit of funkiness but let's consider what's happening. So based on what you've just seen, UL stands for unordered list. Unordered list just means bulleted. There's no numbers. There's also something called an ordered list, which is an OL at tag. Then LI, list item is all it means. 

And so it automatically numbers everything for you. But again, all of my indentation and white space is just for my sake. The browser's not actually going to care. So even though you couldn't do this, just to be clear, you should not even though the browser will still be able to understand it just fine. I'm hitting reload in my browser, I'm clicking reload and no change is happening because the browser still doing exactly what I tell it to do. 

All right. So this is all just text. Now let's do something more interesting. I'm going to go ahead and borrow some of this HTML. I'm going to go ahead and create a new file here. And we'll call this rick.html. We have disproportionately used something called a rick roll in this class this year, I don't know, it just happened organically. 

And now it's got out of control. So I'm just going to go with it. And if I go to Google Images and Rick Astley. If you don't know why we do this, just read up on Wikipedia. Every time you've clicked on the link, someone's been laughing somewhere. And let me go ahead-- there we go, let's view this image. 

So here we have an image in Google Images. And let's assume that this is reasonably everywhere on the internet. So I'm going to assume it's OK for me to actually put this into my web page. I'm going to go ahead and copy image URL. And now if I go back to Cloud 9, let's see what I can do here. So here is just a web page. This is Rick Astley, haha, I'm going to now go back to my browser, reload, and interesting. 

Where is Rick? So let me see what's happened. Actually, I'm going to pretend like I didn't do that. [INAUDIBLE] put him in here. We'll come back to that in a moment. So here's rick.html. So that's not Rick Astley. So it turns out we can actually add him in here. This is Rick Astley. I'm going to say give me an image whose source is the URL I just copied, which apparently is a happy birthday something or other. 

And now I'm going to close the tag like this. So this is wrapping super long. But notice that all I've done is open bracket image, source with an attribute of this. And it's a really long URL. And at the very end, notice this. Why have I done slash angled bracket instead of, like every other tag, having an open bracket, IMG, closed bracket? Just take a guess even if you have no familiarity whatsoever with HTML before. 

So it is how it closes the command, but why does it not really make intuitive sense to do something a little more verbose like close image? Yeah. Yeah. Just semantically, there's no sense of starting an image and ending an image, it's either there or it's not. So it doesn't make sense to leave a gap for anything else inside of an image. You just can't do that. And so the syntax would generally be just to do the forward slash inside of the open tag or the start tag and then hit Save. 

So if I now reload this file, now I've got a good web page cooking here. And we could certainly really annoy people by embedding instead like a YouTube link. And in fact, any time you've ever gone to YouTube, and let me actually accidentally rick roll myself here. So Rick roll. So rick roll-- I'm going to go here. 

[MUSIC PLAYING] 

OK, one person liked that. So notice all this time, if you click the Share link, you of course get the URL that you can actually embed in an email or a forensic image or in a problem set or in a slide. And now, if I instead click on embed, notice that all this time, this stuff has been there. I'm going to go ahead and copy this. 

And just so we can see it better, I'm going to paste it into my text editor. Notice that this what YouTube has been telling you. Every time you visit a YouTube video, if you want to embed the video on your web page, simply grab this. So this is yet another HTML tag called an iframe. Or an in line frame. So it too looks a little more complex than all the others. So it turns out that the image tag and apparently the iframe tag take what are called attributes. 

And this is another piece of syntax in HTML. In addition to the tag's name, open bracket tag name, you can control the behavior of the tag by having a whole bunch of attribute equals value. Attribute equals value. And so for instance, YouTube is telling us if you want the width of this video to be 420 pixels and the height to be 315 pixels, that's how you express it in HTML. 

The source of the video is going to be that long YouTube URL and then some other stuff like frame border is zero, so that probably means there's no border around the thing. Allow full screen probably means that the user can click a button and actually full screen the video. So if I really want to be impressive here in Rick dot HTML, rather than use the image tag, let me delete that, instead paste this. And now reload. And now here we go again. All right, that's enough. All right so I will try hard not to do that again. So what are some of the takeaways here? So HTML, as ugly as these web pages are, is actually pretty simple. It's not a programming language. It doesn't have functions. It doesn't have loops. It doesn't have conditions. All it has is dozens of different tags, each of which has zero or more attributes. And in fact, what's fun about HTML as you start to dive into is that it's very self teachable. 

All it takes is an understanding of the general framework of HTML. What is a tag, what is an attribute, how do you actually configure a web page as follows. And everything else is really the result of looking up in an online reference or googling how to do some technique or as we've seen, looking at Facebook's source code, looking at a website that you like at it's source code and understanding how the developers there actually laid things out. 

So we can do images as well. And in fact, we did it a moment ago. Let me go ahead and just show you. Here's some sample code. If you ever want to see grumpy cat. So notice that I can have an image tag here. And I've got a comment above it. I've got an alternative text for accessibility. So someone who's using a screen reader for reasons of sight can actually then have their screen reader say grumpy cat. Because if they can't see the image, they can at least have their computer tell them verbally what it is. And the source of that file is cat.jpeg. So in fact, if I really wanted to get clever, what I could have done-- I promise not to go to Rick Astley, so I'm going to google for a cat instead. And if I go to Google Images here, and we'll assume that this is a picture of my cat. 

Suppose that I have control clicked or right clicked on this, accidentally creepy. And cat.jpeg I'm going to save on my desktop. Let me now go back to cloud 9. Notice that here, I can go to upload local files. And if I grab this file, cat.jpeg, notice that I can drag it and drop it into cloud 9 and it's going to yell at me here. 

Because we've already given you a cat.jpeg file, but it's super easy to grab a photo that you've taken from Facebook or Flickr or the like and actually drag and drop it into cloud 9 and then make it part of your own personal website or problem set seven or eight as we'll soon see. And then when you finally visit that cat, assuming I downloaded that same cat, notice that-- that was adorable. 

What you would see is something like this face here. So the files that you reference within a web page can either be local in your own account or remote on some other server as in the case of the Rick Astley photo a little bit ago. So where else-- what else can we do here? So let's take a look at the following. You know what's kind of cool? 

We have thus far been making very static web pages. I want to spice things up as follows. I want to make my own search engine. So to make a search engine, let's go ahead and start doing this. I'm going to go ahead and create a new file called search.html. And we have prefabed versions online. Whoops. Don't paste into your terminal window. Prefab versions online. And I'm going to start as follows. So here's the beginning of a file called search.html. I'm going to save it in today's source directory. I'm going to call this Search. Actually, we'll make it better. CS50 Search and actually brand it. And now, I'm going to say something like H1 CS50 Search. And then down here, H2 coming soon. And just to recap, H1 and H2 mean what respectively? 

Yeah, so big and bold, and not as big, but still bold. So if I save this and go over here, let's see the file search.html. All right, and this one is right-- [INAUDIBLE]. Stand by. David is confused. Oh, it's right there. David's an idiot. OK. So there it is. So CS50 search coming soon. So now, let's synthesize what we did last week. 

Where we talked about the lower level mechanics of HTTP. And these new ideas of HTML, which is just this markup language where you tell a browser exactly what to do and implement our own search engine. So instead of just saying coming soon, I'm going to introduce something called a form tag. And in this form, I'm going to have something like an input field. 

And the name of this input field, I'm going to call it Q. And the type of this input field I'm going to say is just "text". And a text field, as we'll see, is just a text box. And so it doesn't sense here to have anything inside of it at this point. And so I'm simply going to close the tag with that forward slash right in the tag itself. And then I'm going to have one other input. Input type equals submit. And then I'm going to close this one too. 

And now I'm going to go back here. And already we see, albeit pretty ugly, I've got the beginnings of my own search page here. In fact, let me try to clean this up a little bit. It turns out that on the input here, I can have another attribute called placeholder. And I might see something like keywords, or more specifically, query for q. 

And notice, now, I have this kind of gray text that disappears as soon as I start typing, but it's probably something you've seen in other web pages. I don't really like the Submit button. So I'm actually going to give the Submit button a value of search. And now, if I reload, notice that my button becomes named search. You know, I don't really like the logo here. So Google Font generator. 

I want to spice this up further. So CS50 search. Let me create my own logo. That looks nice. So now let me save this as-- come on. Where is it going? There. OK. Missed it. Save as. Stupid browsers. Stand by, we're going to fix this once and for all. There we go. All right. Sorry. Off day. Now this is funky. Exit full screen. All right. 

Now, like a normal person, save image as. Logo.gif. Now I'm going to go into CS50IDE and I'm going to simply grab the logo, I'm going to drag it into my source seven directory, file already exists, I'm OK with that. So I'm going to override it because I already had it. And now how do I get rid of this? 

Let's go ahead here and do image source equals logo.gif. Close this. Save. And now if I go back to my search page, now it's looking pretty good. All right, so it hasn't quite done anything useful. In fact, let me try searching for a cat and see what happens. Cats. Damn it. It doesn't just work, apparently. So what's the key piece that's missing here? 

Right, even if you don't know any HTML, I've started marking up the phone form and I've told it how to get inputs, give me a text box and a submit button, what piece is apparently missing? Suppose we want to actually get this thing working correctly. What do we need to do? We have a need to implement the back end database or the search engine itself, and that's going to take a whole lot of time, frankly. 

So remember what we did last time. So if you search for something on Google and you have in advance turned off, recall, instant search. So let me turn that off so that this actually behaves like an older school browser, if I now search for something like cats, recall what the URL looks like. It's pretty cryptic. But embedded in there, recall, is slash search. Question mark q equals cats. 

And that would seem to give me a whole bunch of search results. So you know what I'm going to do? I'm going to borrow Google for just a minute. I'm going to go over here and I'm going to say that this forms action or destination, so to speak, should literally be Google. And the method I wanted to use is going to be get. 

So what is action? Action is weirdly named, but that just means who is going to handle the action of this form? When I click Search, where should the result go? And if I now go back to my form here and reload my web page and now search for something like dog, notice now I have re implemented Google. Right? 

If I want to search for something else, it works for not just dogs, it also works for cats. It also works for CS50. And OK, this is just under whelming, isn't it? All right, but it actually works. So what's actually been going on? So I've taught my browser, using HTML, to take input from the user and actually send that input to a remote server using HTTP. 

And because my browser understands HTTP, it actually construct the URL so that what I end up over in my browser, notice what happens when I searched for dog. If I click Search, notice that the URL changes as I intended to google.com/search query equals dog. And that's because the form knows, because the method is get, to simply append it to that URL there. 

Now, these web pages are still ugly. So let's introduce one other piece of syntax if we can today. And this is something known as cascading style sheets. So let me take a look at this example here and see if we can infer what's going on. This is CSS0.html. And this is where things get a little ugly. Because unfortunately, in the world of the web, HTML alone can't do everything. And so if you want to stylize your web page, you actually need to focus on the aesthetics in a different way. So here, I have the body of my web page inside of which is a big div. And a div just means division. So it's like a paragraph but it doesn't have the same semantics of a paragraph of text. 

This just means to the browser, here comes a big rectangular region of my web page, I want to handle it specially. Now, line 21 is where that div starts. And just take a guess. What is the effect of line 21 on the rest of the contents of the page? Centering it. That's all. So we haven't seen a way of actually centering the text. 

In fact, my search engine, unlike the actual Google, was all justified over to the left. And so now in line 21, I'm saying, hey browser, create a division of the page. Just give me a big, invisible rectangle. That's how I want to think about the web page. And then stylize it as follows. Inside of those quotes, now, is a second language that we introduced today called cascading style sheets. Thankfully, it too is not a programming language, so it's very limited in its syntax but also very limited in its functionality whereas HTML is all about marking up the data of a web page and the structure of a web page. CSS is generally about the last mile, the aesthetics, getting the size and the color and the placement exactly right in a web page. And indeed, it is formed with key value pairs. 

A property like this, text align, followed by a colon, followed by the value of that property, which in this case is center. And now notice you can nest these things. If I wanted everything in that I've highlighted to be centered, that's why I have line 21 and the corresponding line 31. But suppose now want to say John Harvard, welcome to my home page. 

Copyright symbol John Harvard. And suppose I want the first of those lines to be pretty big. 36 pixels. So that's a decent size. And I wanted its weight to be bold. But then below that, I want smaller text. And below that, I want even smaller text. Sorry. Today feels like an off day. 

So now, what am I doing to express this? Here on line 22 is an embedded div or nested div, if you will. It too has its own style tag. I specify a font size of 36. I specify a font weight of bold. Down here, I only specify 24 pixels. And finally, in line 28, I specify 12. So just as a quick sanity check and as a human reading this, which words on the screen are actually going to be bold? Which lines are actually bold? 

Just John Harvard. Right? Because just as line 22 says hey browser, here's a division of the page. Make it font size 36 point. Make the font weight bold. As soon as you reach the corresponding end tag or closed tag on line 24, that means, hey browser, stop doing whatever it is you are doing. And notice to be clear, even though line 22 has all of these attributes like style, when you close the tag in line 24, you only mention the tag's name. 

You do not repeat the word style or anything that's inside of those quotes. And so if I look at this now in my browser, let's take a look at the end result. Let me go ahead to this file, which is CSS 0. And it's still pretty plain, but getting pretty interesting. But it turns out there's other things I can do here, and at the risk of making this completely hideous, notice here that in my body of my web page, I can do something funny like bg or background color. 

And quick, what's your favorite color? Green I heard. All right. So now, if I hit reload now, we have a green web page. All right, so that's not bad. And now, if I want to make this really cool, I can make the color of my text even red. So let's see what this looks like. Now it's looking pretty good. And down here, if you really want to mess with someone or if you want to be one of those people who tries to trick you into visiting a web page because they've tricked Google into thinking there's a whole bunch of key words like-- let's see, reload. Where did it go? And there it us. All right. So I say this as an aside, we'll talk about this stuff in a few weeks when we talk about security, if you actually embed whole bunches of keywords in a web page, even if they're not visible to a human, someone like Google, of course, can still actually find this. All right, so that's pretty hideous pretty quickly. 

And in fact, it's not all that much unlike my own web page as an undergraduate, which I started googling around to find past versions of my old websites. It was pretty bad. In fact, I did find one just before class. But there's worse out there. This apparently was my home page back in 1996. Apparently I thought it was appropriate to ask people their name before they could actually see my web page. 

And then I showed them something stupid, probably. I'll dig up more for next time. But for now, let's consider a bit of design. We've talked about style. And this page thus far and most everything I've written is pretty clean stylistically. But what about design? Well, there's a lot of redundancy in what I've been doing here. 

I've mentioned the word color in a couple of places. I've mentioned font size in a couple of places and bold in a couple of places. And fundamentally, I'm co mingling two languages. I've got HTML with my tags and my attributes and then all of a sudden, between quotes, I have the second language today called CSS, which again, is just these key value pairs or these properties separated by colons. 

It turns out that much like in C where we can start to factor out some code into header files, so can we do the same in HTML. And a step toward that is as follows. Notice that this version, CSS1.html is structurally the exact same web page. So I've got a whole bunch of divs, but this time, I've gotten rid of the wrapper div as you'll see. 

And I've given those three divs top, middle, and bottom, unique IDs. This is nice, because by giving those divisions of the page unique identifiers, I can reference them elsewhere. Where? Well, let me scroll up. And thus far, anytime we've looked at the head of a web page, what's the only tag we've had in the head of a web page? A little louder. Just the title so far. But it turns out there's a few other things you can put in there, one of which it's called a style tag. So a moment ago, we looked at a style attribute. Turns out there's a style tag. It belongs inside of the head of a web page. And now notice what I'm doing. I have inside of this style tag the following. I'm literally mentioning on line 20 the name of a tag that I want to stylize. 

Then I have open curly brace and closed curly brace. So similar in spirit to C, but again, this is not a function, this is just a syntactic detail here. And then of course, I'm telling the browser, hey browser, make the entire body of the page have a text alignment of center. And then this is saying the following. Hey browser, if you see an HTML element or tag in the page that has a unique identifier of top, so the hash symbol here just means unique idea of top, go ahead and make its font size 36 and its font weight bold. 

Hey browser, an element whose ID is middle, make it 24 pixels. And hey browser, if you see an idea of bottom, make it 12 pixels. The effect in the end is exactly the sam. If I go into CSS 1, the page looks the same. But we're a step toward a slightly better design. Let me now go back here to CSS2 and see what else I've done. 

Now the page is really, really clean. In fact, I can fit all of the contents on a page here. But what new tag have I introduced, obviously? Link. And it's not the best name for a tag, because it's not a link in the sense that we know it, but this means a link in some other file. This is kind of like sharp include in C. 

This is the way in HTML to say hey browser, go get the contents of the file called css2.css. The relationship, to me, is that it's a style sheet. And indeed, that's what the one of the S's in cascading style sheets means. This is a style sheet. It's just the text file containing a whole bunch of property. It's a whole bunch of styles that you want to apply to a page. 

And so this apparently is referring to a second file. And if I open that, CSS2.css, notice that all I've done is copy and paste all of this into this file. And now, even if you've never coded this stuff before, just consider with the proverbial engineering hat on, why is this a better design probably? Factoring out those CSS properties, putting them into their own file. Even though we solved this problem like five minutes ago in the very first version. 

We've not improved the page stylistically, this is just better design in some sense. Why do you think? Yeah. More flexible how? Yeah. So if you want to go back and change things, now, you have one place where you can change things. And in fact, for something like problem set seven, where we'll implement a stock trading website, that's going to have a whole bunch of pages. And it would be really annoying if you decide, hm, I don't really like 24 pixels, I want it to be 28 pixels or slightly bigger. And then have to do a global find and replace or open all of your website's files simply to actually change one value. By factoring out these styles into one central place, you can now open one text file in CS50IDE into any program, change it, save it, and done. You've propagated those changes everywhere. And that would be the same in a dot h file as well. So any questions thus far on this syntax? All right, so we've done everything it seems except actually implement hyperlinks. And so let's go ahead and do this. Let me go ahead and create a new file here. I'm going to call it link.html, put in today's code. 

And I'm going to do open bracket doc type html. As an aside, this thing at the top, this doc type declaration, it's the only one that's weird with the exclamation point. You just have to do it there and it means we are using HTML version 5. Older versions of language had much longer strings that you needed to put there. So here is an example called link. 

I need a body of my web page here. And in here, a href equals let's say HTTP://www.disney.com and my favorite website, we'll say. All right, so a very innocuous, user friendly page. If I now go into my directory listing here and open up link.html, we have hyper text. 

And indeed, this is where the H in HTTP comes from. Hypertext transfer protocol is about transferring text that has hyperlinks to other resources. And indeed, here is the familiar, if retro, blue link that if clicked, will actually lead me to Disney.com. Now, oh, that's coming out soon. All right, so now, what are some of the implications of this? 

And frankly, the world starts to get a little more familiar and also a little scarier but also a little more self defensible once you start to understand these things. Because odds are, some of you, if you go through your Gmail spam folder or even your inbox, you've probably gotten some kind of email that's asking you to change your password maybe or maybe verify your PayPal credentials or whatnot. 

And in fact, you might have received something that says like click here to reset your PayPal password. And now, notice, if this isn't Disney.com but like badplace.com and reload, note that the text here could say anything whatsoever. And in fact, this is just words. Why don't I actually be super malicious and say http://www.paypal.com. 

Click here reset your PayPal password and now reload. This looks pretty legitimate, right? I mean, I wouldn't click on an email that just says this. But notice the dichotomy here. It says www.paypal.com, and in fact, wait a minute, we know that you want the s for security. So now, go to www.paypal.com HTTPS, but if you've never done this before, do get into the habit of hovering over little links here. And it's hard to see on the screen there, and it's not all that easier here. But way down here in the tiny little corner does the browser actually tell you that we're going to badplace.com instead of Paypal.com. Now, where are we going with this? All the examples we've done today, we've hard coded and typed out manually. The web is incredibly uninteresting when you hard code your web pages so that content is static and never changing. Of course, all of our favorite websites today, whether it's Gmail or Twitter or Facebook or any number of others are dynamic. They're changing in response to user input just like the Google search results. 

And so on Wednesday, what we do is we leave HTML and CSS introduction behind us and we take for granted that we now know it and we introduce a new programming language called PHP, which like C, is going to give us the power to actually create programs that themselves generate output. In this case, we'll be using PHP to generate dynamically web pages using this new language. So more on that on Wednesday. See you then. 

[MUSIC PLAYING]