Week 7

We’re getting to the point of the semester where you should start to think about final project ideas.

To this end, pre-proposals are soon due, in which you’ll give your TF some ideas of what you’re thinking about for a final project.

Many students end up doing web projects, and since we’re just now getting into web programming, don’t worry if you don’t yet know exactly how you’d implement your ideas (your TF will help you figure out what’s feasible).

CS50 Seminars give you a chance to explore tools and languages that aren’t covered in the course itself, many of which might be of use on a final project.

To see the list of seminars and register for any of them, go to cs50.harvard.edu/register.

A GET request looks something like this:

GET / HTTP/1.1
Host: www.google.com
...

The server would respond with something like the following:

HTTP/1.1 200 OK
Content-Type: text/html
...

The Inspector has lots of features, but let’s look at the Network tab.

The HTML that we see this way is sent in the response from Facebook, coming after those headers we saw in the inspector.

If just one extra space character were included in the HTML for Facebook’s homepage, and they have a billion users who all access the homepage, that’s an extra gigabyte of data that needs to be sent from Facebook’s servers!

For this reason, it’s common in web development to minify your code, or remove any superfluous characters to make the file sizes as small as possible.

As we’re learning web programming, we’ll start out by writing our code in a more human-readable fashion. (As an aside, nobody writes code by hand that looks like what we saw in the Facebook source - you write code that’s human-readable, and once you’ve got it working, you run it through a program called a minifier that turns it into the uglier, but smaller version that actually gets sent across the network.)

We can start to see the hierarchy of the webpage and click through it in this view.

Then we can double-click this file and visit this webpage in Chrome.

A web server is just a program whose job it is to serve up web pages - to listen for requests from other computers and respond with the virtual envelopes containing the headers and page content.

Our IDE’s web server is an open-source server called Apache, to which we’ve written a more usable interface called apache50.

You can see what this address will be in the upper-right corner of your IDE.

Note that we’re looking at this webpage inside the IDE - not because it’s hosted there (since our web server makes it visible to the whole world), like when hello.html was on David’s computer and we were looking at it there, but because in addition to the web server, the IDE also provides a simple web browser.

We can also copy-paste this URL into the regular Chrome browser bar, and we’ll see the exact same thing! (You could even have a friend on an entirely different computer go to your IDE’s address while you’re running your web server, and they’ll be able to see the same thing.)

First, notice in lines 3-12, we have a comment, just as we had in our C code, but the format is a little different: comments are opened with <!-- and closed with -->, instead of being opened with /* and closed with */.

We’ve introduced a new tag - <p>, or paragraph.

If we replace the <p> tags with actual line breaks in our HTML source, the paragraphs all run together, because the browser just ignores extra whitespace - it only does exactly what it’s told to do.

We’re not directly bolding our text or increasing the size of our text, but we’re using heading tags, <h1> through <h6>, and our browser knows that each heading should be bold and a slightly different size.

This displays a bulleted list of houses on the Quad. The <ul> tags stand for unordered list (i.e., bulleted as opposed to numbered - there’s also an <ol> tag, ordered list, for numbered lists), while the <li> tags indicate list items.

All of our indentation and whitespace is just for our sake, not for the browser’s (but you should still write your HTML in pretty-printed, correctly indented style for the sake of the humans reading it!).

Let’s go find an image on Google Image Search of, say, Rick Astley:

We can insert this into a web page like so:

 1<!DOCTYPE html>
 2
 3<html>
 4    <head>
 5        <title>Rick</title>
 6    </head>
 7    <body>
 8        This is Rick Astley: <img src="http://images.musictimes.com/data/images/full/3561/happy-birthday-rick-astley.jpg"/>
 9    </body>
10</html>

If we go to a YouTube video, such as the video for this week’s lecture,[1] under the video there’s a Share tab; one option under that tab is "Embed". Under Embed, we have the following:

<iframe width="560" height="315" src="https://www.youtube.com/embed/GUtPQIDSwrA" frameborder="0" allowfullscreen></iframe>

<iframe …​> indicates an inline frame. This one isn’t self-closing (it’s possible to have an iframe with internal content), but like the image tag, it has attributes - additional syntax besides just the name of the tag that controls the behavior of the tag using key-value pairs attribute="value".

Once you understand the basic framework, HTML is pretty self-teachable - there are plenty of online resources, and you can inspect the source code of websites you like.

This lets someone who’s using a screen reader, typically for reasons of sight, know what the image shows.

Note that in this example, our image source is not a URL elsewhere on the web but a local file called cat.jpg. You can download pictures from the Internet, or take your own pictures, and upload them to your IDE to use in a webpage.

We can start by setting up a simple form, as in search-0.html:

<!DOCTYPE html>

<html>
    <head>
        <title>CS50 Search</title>
    </head>
    <body>
        <h1>CS50 Search</h1>
        <form action="https://www.google.com/search" method="get">
            <input name="q" type="text"/>
            <br/>
            <input type="submit" value="CS50 Search"/>
        </form>
    </body>
</html>

Here’s an example of using CSS to style a web page, in css-0.html:

<!DOCTYPE html>

<html>
    <head>
        <title>css-0</title>
    </head>
    <body>
        <div style="text-align: center;">
            <div style="font-size: 36px; font-weight: bold;">
                John Harvard
            </div>
            <div style="font-size: 24px;">
                Welcome to my home page!
            </div>
            <div style="font-size: 12px;">
                Copyright &#169; John Harvard
            </div>
        </div>
    </body>
</html>

To apply CSS attributes to a part of our HTML without having it sitting right there in the tag, we can use CSS selectors, as in css-1.html:

 1<html>
 2    <head>
 3        <style>
 4
 5            body
 6            {
 7                text-align: center;
 8            }
 9
10            #top
11            {
12                font-size: 36px;
13                font-weight: bold;
14            }
15
16            #middle
17            {
18                font-size: 24px;
19            }
20
21            #bottom
22            {
23                font-size: 12px;
24            }
25
26        </style>
27        <title>css-1</title>
28    </head>
29    <body>
30        <div id="top">
31            John Harvard
32        </div>
33        <div id="middle">
34            Welcome to my home page!
35        </div>
36        <div id="bottom">
37            Copyright &#169; John Harvard
38        </div>
39    </body>
40</html>

This means "link in the contents of the file css-2.css, and use it as a stylesheet."

In css-2.css, we have the exact same content that was previously in our style tag.

Factoring out our CSS into a separate file has a bunch of advantages:

This creates a hyperlink from our page, link.html, to the CS50 homepage.

Note, however, that we can make the link text say whatever we want - so malicious email spammers can include a line like this:

click here to reset your <a href="http://www.badplace.com/">https://www.paypal.com/</a> password

The browser can actually show you where the link goes when you hover over it, so make sure to do this before clicking on any suspicious links.