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.
Communicating with classmates about problems in English (or some other spoken language).
Discussing the course’s material with others in order to understand it better.
Helping a classmate identify a bug in his or her code, such as by viewing, compiling, or running his or her code, even on your own computer.
Incorporating snippets of code that you find online or elsewhere into your own code, provided that those snippets are not themselves solutions to assigned problems and that you cite the snippets' origins.
Reviewing past years' quizzes, tests, and solutions thereto.
Sending or showing code that you’ve written to someone, possibly a classmate, so that he or she might help you identify and fix a bug.
Sharing snippets of your own solutions to problems online so that others might help you identify and fix a bug or other issue.
Turning to the web or elsewhere for instruction beyond the course’s own, for references, and for solutions to technical difficulties, but not for outright solutions to problems or your own final project.
Whiteboarding solutions to problems with others using diagrams or pseudocode but not actual code.
Working with (and even paying) a tutor to help you with the course, provided the tutor does not do your work for you.
Accessing a solution to some problem prior to (re-)submitting your own.
Asking a classmate to see his or her solution to a problem before (re-)submitting your own.
Decompiling, deobfuscating, or disassembling the staff’s solutions to problems.
Failing to cite (as with comments) the origins of code, writing, or techniques that you discover outside of the course’s own lessons and integrate into your own work, even while respecting this policy’s other constraints.
Giving or showing to a classmate a solution to a problem when it is he or she, and not you, who is struggling to solve it.
Looking at another individual’s work during a quiz or test.
Paying or offering to pay an individual for work that you may submit as (part of) your own.
Providing or making available solutions to problems to individuals who might take this course in the future.
Searching for, soliciting, or viewing a quiz’s questions or answers prior to taking the quiz.
Searching for or soliciting outright solutions to problems online or elsewhere.
Splitting a problem’s workload with another individual and combining your work (unless explicitly authorized by the problem itself).
Submitting (after possibly modifying) the work of another individual beyond allowed snippets.
Submitting the same or similar work to this course that you have submitted or will submit to another.
Using resources during a quiz beyond those explicitly allowed in the quiz’s instructions.
Viewing another’s solution to a problem and basing your own solution on it.
Your work on this problem set will be evaluated along four axes primarily.
To what extent does your code implement the features required by our specification?
To what extent is your code consistent with our specifications and free of bugs?
To what extent is your code written well (i.e., clearly, efficiently, elegantly, and/or logically)?
To what extent is your code readable (i.e., commented and indented with variables aptly named)?
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.
killall -9 server
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.
apache50 start ~cs50/chapter5
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!
chmod a+x ~/workspace/chapter5
(don’t worry about why for now!) and then
to create a directory for this problem and navigate into it. If you now execute
apache50 start .
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.
-rw------- 1 ubuntu ubuntu 0 Feb 1 12:27 index.html
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
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:
The first bit is a directory bit, and is set to a "d" if the file you’ve listed is a directory.
The next set of three bits are the user bits, and will be set for user permissions. Here we see an "r" and a "w" but no "x"; this means that the user (which is you!) is able to both read and write
index.html, but you are not able to execute it. That’s ok, though, because we don’t need to compile HTML files anyway!
The next set of three bits are the group bits, which dictate permissions for a specified group of people if you so desire, though we have no specified group in this case. You’ll note that none of the three bits are set, so this group would not be able to read, write, or execute
The final three bits are the all bits, which dictate permissions for everyone else with access to your directory. We can see here that none of these bits are set either; this means that no one except for you is able to read or write to
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
chmod a+r index.html
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
chmod a+x ~/workspace/chapter5
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:
A link to an external website
A button (which needn’t actually have a function, but should exist on the page)
At least two divs, with div IDs
At least three images, either externally linked or contained within your
At least one block of text that is not left-aligned
At least two different fonts
At least three different colors of text
At least two other extra features, one in HTML and one in CSS
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.
update50 again to ensure that your IDE is up-to-date.
Recall that you were asked to implement the
Be sure that all of the files for your website exist in
cd ~/workspace/chapter5/chapter5/ ls
Since there is no way to automatically check for correctness here this project is graded on completion.
cd ~/workspace/chapter5/chapter5/ submit50 cs50/2017/ap/chapter5
If you run into any trouble, email email@example.com!
You may resubmit any problem as many times as you’d like before the deadline.
Your submission should be graded for correctness within 2 minutes, at which point your score will appear at cs50.me!
This was </Chapter5>.