Problem: </Chapter 5>

Set up a web server on the CS50 IDE and build your own website.

This course’s philosophy on academic honesty is best stated as "be reasonable." The course recognizes that interactions with classmates and others can facilitate mastery of the course’s material. However, there remains a line between enlisting the help of another and submitting the work of another. This policy characterizes both sides of that line.

The essence of all work that you submit to this course must be your own. Collaboration on problems is not permitted (unless explicitly stated otherwise) except to the extent that you may ask classmates and others for help so long as that help does not reduce to another doing your work for you. Generally speaking, when asking for help, you may show your code or writing to others, but you may not view theirs, so long as you and they respect this policy’s other constraints. Collaboration on quizzes and tests is not permitted at all. Collaboration on the final project is permitted to the extent prescribed by its specification.

Below are rules of thumb that (inexhaustively) characterize acts that the course considers reasonable and not reasonable. If in doubt as to whether some act is reasonable, do not commit it until you solicit and receive approval in writing from your instructor. If a violation of this policy is suspected and confirmed, your instructor reserves the right to impose local sanctions on top of any disciplinary outcome that may include an unsatisfactory or failing grade for work submitted or for the course itself.

Your work on this problem set will be evaluated along four axes primarily.

To obtain a passing grade in this course, all students must ordinarily submit all assigned problems unless granted an exception in writing by the instructor.

Beyond introducing you to web programming, the overarching goal of this problem is to empower you to teach yourself new languages so that you can stand on your own at the end of the year. We’ll guide you through each, but if you nonetheless find yourself Googling and asking lots of questions of classmates and staff, rest assured you’re doing it right!

First consider joining Daven for a tour of HTML.

And consider reviewing some of David’s examples. There are a lot of videos here, so don’t feel like you have to watch them all if you are comfortable with the topics they cover!

Next consider joining Joseph again for a tour of CSS, the language with which web pages can be stylized.

And consider reviewing some of David’s examples.

Got it all? Not to worry if not, you’ll have plenty of time to look back and review! For now, on to the problem.

Up until this point in the course, you’ve been compiling just about all of your assignments in the terminal of CS50 IDE and running programs from there to see if they work. Now that we’re diving into the land of web programming with HTML and CSS, however, you’ll need to check the correctness of your program not by compiling, but rather by starting up CS50 IDE’s web server (aka Apache), giving it permission to read your HTML and CSS files, and looking at the generated web page.

When we start up the web server, we must give it a root so that it knows which HTML page to display. We’ve provided a simple staff webpage to test that your web server works correctly that you can use as the root for now. Later, you’ll be using your own!

First, though, we need to ensure that no other servers are running accidentally in any other tabs by executing the below.

Next, ensure that Apache isn’t already running with some other root by executing the below.

Then, (re)start Apache with the below so that it uses ~cs50/chapter5 as its root.

Visit https://ide50-username.cs50.io/, where username is your own username. You can do this either by typing in the URL or clicking the link at the top right of CS50 IDE. You should find yourself on a page that contains nothing other than a photo of an adorable cat. Congratulations! Your Apache web server works.

It’s now time to set up your own root so you too can begin building a web page, albeit one more complex than ours.

As usual, log into CS50 IDE and, in a terminal window, execute

to ensure that your workspace is up-to-date!

Next, execute

followed by

(don’t worry about why for now!) and then

to create a directory for this problem and navigate into it. If you now execute

and then

you’ll have a newly created webpage…​ containing nothing (for now). If you still see the "Happy Cat" from before, it’s likely that your browser is just caching the previous content at the site. Press and hold the Shift key while clicking on refresh in your browser. Ultimately, assuming you haven’t put any other content in ~/workspace/chapter5, you should see something like the below.

First, create your first HTML file by executing the below.

If you now type ls, you should see index.html listed in your current directory.

Now execute the command

You should see an output similar to the below, but with a different time stamp.

Remember our discussion of permissions earlier in this chapter? Here’s where they come into play. Permissions are split into three parts: readable, writeable, and executable. Similarly, there are three levels of permissions: user, group, and all. Thus, you can, for example, make a file both readable and writeable for yourself (as the user), but only readable for everyone else.

When you execute the ls -l command, the levels of permissions are ordered as follows: first user, then group, then all.

Note the number of dashes in addition to the "r" and "w" in the above output. They all represent bits, and can be thought of as groups of 1, 3, 3, and 3. The dashes indicate permission bits that have not been set. This breaks down in the following way:

But didn’t we just say that Apache needs access to your files to be able to display them via the web server we’ve just started? Indeed, we did! If only you have access to the files, neither Apache nor anyone else will be able to see any web page you create.

Therefore, you must make sure that every file within your current directory is "world-readable". You can do this for index.html by executing

Don’t forget this step for all other files you create, or you won’t be able to view anything you’ve written in the web server! Incidentally, every directory within your root that you want to be publicly accessible must be "world-executable", which is why we executed

above. Without that step, apache50 wouldn’t have even been able to access the directory it wanted to be the root!

Finally, you should be ready to go! Your assignment is simply to create a web page. You should have one HTML file (named whatever you’d like, it does not need to be index.html) containing the web page’s structure, and one CSS file for styling. Other than that, there are no restrictions on other things you’d like to include.

Feel free to be creative with this assignment. Make something that is meaningful to you - it could be a blog post, a pseudo-shopping website, or a family tree. The sky is the limit! At the bare minimum, your page MUST include the following:

Of course, you can do many more of each of the above; and to make a neat website, you’ll have to!

Because this assignment will result in something different for each person, there’s no check50 for this one. Make sure that you’ve included everything listed above and you have no broken links or permission issues and you should be good to go.