Tufts CS 117 (Spring 2022):
Internet-scale Distributed Systems

Tufts CS 117 Assignment
HTML Without JavaScript

Goals

The purpose of this assignment is to explore the basics of building and publishing Web pages using HTML and CSS. You'll do this by writing at least one Web page and publishing it on your website at Tufts. You'll also use the "curl" program to make a log showing what a Web server returns when a browser asks for your page.

Note in the assignment title that we ask you to explore HTML without JavaScript. Of course, building Web pages using JavaScript frameworks is all the rage these days. If you're looking for a job as a Web hacker you should definitely explore all of that. Here our goals are different: we are trying to understand the thinking that went into the design of the Web, and to learn from the Web's technology tradeoffs. Reasons to learn HTML and CSS without using JavaScript include:

For what it's worth, there is no JavaScript anywhere on the CS 117 Web site. Not that we're promoting it as an example of the most modern Web development, but it does show how useful and flexible Web sites can be developed using just HTML and CSS. It's fast and it works OK on mobile.

...but I already know HTML and CSS!

We are aware that many students in the course are quite familiar with HTML and we don't want you wasting time on things that you already know. We do however want to be sure that everyone in the course has a base level of shared knowledge, and also to encourage everyone to learn a little more than they already knew. So, please keep in mind the following guidelines is you do this assignment:

Again, we don't want this to be a makework exercise. If you already have pages that you wrote yourself that meet the base requirements you're welcome to start with those and of course add some new features.

In past years we also asked students to put some energy into doing creative content, e.g. a website about their favorite movies. This year, to save you time, your numeric grade will depend only on your choice of and good use of HTML/CSS features, whether your submission validates, etc. and not on whether your Web site is beautiful or has interesting content. (We may give a little extra credit for particularly interesting or innovative content submissions but you can get a very strong grade with a boring webpage that just shows your good use of HTML and CSS.)

Assignment Overview

You will create at least one HTML file, and one CSS file to use as a style sheet for your page. You will also host that page on the Web and use provide to submit a very small response document pointing us to your work.

Initially, you can create the files on any machine that is convenient, and use the local browser to refine the page until you're happy with both the content and the styling. Then you'll upload them, as described below. If you want to have fun building a page about yourself, or about anything you think it is interesting, that's fine, but please keep in mind that you'll be graded on your demonstrated use of the HTML and CSS technologies, and not on the quality of your pages' content.

At minimum, your page should include/demonstrate at least the following:

Many of these features will be covered in class, but some probably won't. Part of the purpose of this assignment is to teach you to go out on the Web, or to use other sources, to teach yourself HTML and CSS that you don't already know. That's how we all learn it! Also, remember that View source is your friend!

AS MADE CLEAR ABOVE, YOU MUST NOT use JavaScript in your HTML pages. JavaScript is important for many things, but here we are concentrating on the core mechanisms of HTML and CSS. Later in the course you will learn why there are some downsides to using JavaScript when you don't need it.

As described below, when you're done you will use provide, not to submit the Web page or stylesheet (they're on the Web), but rather to submit answers to a few questions, and to give us the right links to your Web site so we can review it.

Also, please remember that whatever you publish on the Web is fully public and can in principle be read by anyone in the world. There is no obligation for you to disclose any personal information about yourself or your interests if you prefer not to. You may want to choose a subject that invites the use of interesting HTML features (for example, a page about your favorite sports team might include tables of scores or player statistics, links to other sites about the team, etc.) Please do not burn a lot of time researching the details of the content unless you feel like it. The point here is really just to stretch your knowledge of HTML and CSS.

What to do

There are several steps you'll need to perform to complete this assignment:

  1. Write your Web page and your CSS. If you want to write and link together more than one page that's fine, but make sure that all of your work can be found by (transitively) following links from one main page.
  2. Log onto homework.eecs.tufts.edu (or use one of the lab machines). Look in your home directory and make sure there is already a directory there named public_html. If not, you must: create the directory by issuing mkdir ~/public_html
  3. If you did not develop them there in the first place, copy your files into your public_html directory. If you already have a Web site there, or for some other reason prefer to put them in some subdirectory of public_html, that's fine.
  4. Use the techniques described below, make sure the permissions are set properly on all of your directories, as well as on your html files, image files, style sheets, etc.! If you do not do this, the Web server will mysteriously fail to serve your files.
  5. You should now be able to view your file from any Web browser in the world! If for example you have named your page "mypage.html", then your file should be available at the URI http://www.eecs.tufts.edu/~<yourloginname>/mypage.html , where <yourloginname> is the user ID that you use to login to linux.eecs.tufts.edu (do NOT include the <>). Try it! If for some reason you don't get anything at all, check all the file names, directory names, and especially the permissions!
  6. Make sure that the stylesheet references in your HTML hrefs are relative references (preferred) or correct absolute references to the publicly served copies of your stylesheets. Be especially careful with the links you put into your submitted questions document (see below). Every year we get a few submissions with references like:
    href="file:///C:/Noah/mystylesheet.css"
    
    Obviously those won't resolve when we try to view your submission.
  7. Use the validator at http://validator.w3.org/ to validate that your HTML is legal, and then use http://jigsaw.w3.org/css-validator/ to be sure that your CSS is legal. For both of them, you'll supply the complete (I.e. absolute) URI for your web page; the CSS validator will look for your HTML, and find the CSS from that.
  8. Rinse and repeat, as we say in the trade. In other words, tune up your HTML and your CSS until you are happy with it and ready to submit it.
  9. In addition to building your HTML and style sheet, you will be using the Unix curl program to see exactly what comes back from the Web server when a browser asks for your page. You will capture the results and submit them using provide along with the question/answer sheet described below. The sections below tell you how to set permissions properly on your directories, how to use curl to log your HTTP results, and how to submit your assignment.
  10. Follow the instructions below to submit your work for grading using provide

Setting permissions on your directories

The Linux system at Tufts is configured with an Apache Web Server that will automatically serve up web pages from everyone's public_html directories. Unfortunately, the Web Server cannot see your files at all unless the access permissions on all necessary directories and files are set correctly. This is probably the number one subtle mistake that will cause your Web site not to work.

A quick reminder about file permissions in Linux and Unix. Every file and every directory has three sets of permissions: one for the owner, one for a named group that may be sharing access, and one for everyone else. For each such class of user, you get to specify whether there is permission to read and/or to write and/or to execute. If you use the ls -l <filenames> command, you can see these permissions for your files. For example:

$ ls -l index.html
-rwx------+ 1 noah      Grp 2632 Aug  5 16:41 index.html

Shows a file for which the owner (noah) has all three permissions, but members of his group (Grp) and everyone else have no permissions. This file could not be served by the Web server, because only the owner can read it. To fix that we can issue the following command:

$ chmod go+r index.html
$ ls -l index.html
-rwxr--r--+ 1 noah      Grp 2632 Aug  5 16:41 index.html

As you can see, read permissions have been added for members of the group (g=group), and crucially for everyone else (o=other).

You might think that if this file were in the public_html directory, everything would be all set, but very possibly that's not true because we still need to look at the permissions not just on the public_html directory, but also on its parent which is the user's home directory. That's because the Web server starts looking at the user's home directory, goes through that to find public_html, and through that to find the HTML file. If permissions are wrong on anything, nothing will be served. The key rules are:

One other trick may be helpful: if you do ls -l on a directory, you'll get the permissions of the files in the directory, not of the directory itself. To avoid this problem do ls -l <dirname>

Putting it all together, what you're likely to need to do is something like this:

cd ~                             // Go to your home directory
chmod o+x .                      // Execute permissions on home dir
chmod o+x public_html            // Execute permissions on public_html
cd public_html                   // Go to your Web directory
chmod o+r *.html *.css *.jpeg    // Assuming the files are already in your public_html

Some notes about permissions and public access to your data

There's one other important thing you may wish to take care of when you do the above: once you've made your home directory "executable" everyone on the system can look for files within it. If you're keeping homework there, for example, other students may be able to find it, and the same goes for any other sensitive information you might have.

To protect against unwanted accesses, you need to look at all the other files and directories that are stored directly within your home directory, and for the ones you want to keep private, you must remove access permissions as follows:

In other words, make sure that no directories are executable and no files are readable except if you really want to make them public. Indeed, this is always good practice, regardless of what you're doing with the Web, but it's especially important if you make your home directory publicly accessible. Even if you do this, the names but not the contents of all files and directories that are direct children of your home will be public. (Of course, if the files have read permissions, then the content will be public too.) Be careful!

Using curl

In addition to writing and tuning up your web pages and style sheets, you will use the Linux curl program to look at what the Tufts Apache Web Server is providing to clients for your page. curl is a low-level utility that lets you make HTTP requests and shows the results on the console. curl has many options and if you're interested you can explore them by doing man curl. For this assignment, however, the only instructions you need are what we give you here.

First, try:

curl -i <URIOFYOURPAGE>

You should get back on the console a stream that starts with the HTTP headers for your page, and is followed by the HTML itself. Compare these with what you saw in the classroom session introducing the core technologies of the Web. Now, you'll do the same command again, but use Unix shell redirection to save the results in a file that you can submit with provide.

curl -i <URIOFYOURPAGE > httpresponse.txt

Now use an editor to make sure that httpresponse.txt really has your HTTP response.

Submitting your work for grading

As with the "Weaving the Web" assignment, you will download a response form, answer the questions, and use provide to submit it.

For full credit, your response file (as well as the Web site files you've created) should validate as HTML5 using the official validator. It may not be possible in all cases for the graders to check the validity of every submission, but we reserve the right to do so when we suspect trouble, and to deduct credit for validation failures.

You will not submit your new Website files directly using provide, as they are already on the Web! Instead, the form below gives you a place to give the absolute URI for your page, and for your stylesheet (absolute URIs begin with http://).

Review response form for this assignment - Download response form for this assignment

When your work is ready, use the following command to submit your work:

provide comp117 html htmlquestions.html httpresponse.txt

We will use the links in your response page to find the online version of your new Web pages. Please make sure the links from your response page actually work, or you will waste a lot of our time! Double check to make sure that the links to your pages are http scheme links and not file: links.

Collaboration

You may discuss features of HTML with friends and classmates, and they can make suggestions for interesting ones to learn. Then, you should go off on your own to learn to use them. Only if you get stuck, you may ask for help with debugging, but if you do, you must explain in detail on your response form any help you received. Similarly, it's fine to ask for help if you have trouble publishing your page or using curl. Please indicate on your response form that you got help, and confirm that you do or do not feel that you ultimately learned how to make things work.

Extra credit

SVG

SVG is a Web language for doing graphics. We will not be teaching it in detail, at least not early in the course, but if you want to teach yourself a bit and show us, you will get extra credit. You can either embed it in your HTML, or link to a separate SVG page from your main HTML page. For example, you could make a chart of those sport scores.

IMPORTANT: to get extra credit for using SVG, you must write the SVG yourself. You may either put it inline in your HTML or in an external file that's included with a suitable element in your HTML, but the SVG must be your creation. If it's in a separate file, please include a comment indicating that you are the author.

Alternate stylings

You will get significant extra credit if you create two or more significantly different styles for your site. That is: have two pages with HTML that is identical except for linking a different stylesheet. As we'll discuss in class the so-called CSS Zen Garden has impressive examples of the kinds of things that can be achieved. (If you want to use CSS to switch style sheets from a selector button within the page, this is a case where I'll make an exception and allow you to use JavaScript for just that purpose) or you can do it in the <link> tag (For fun, we have provided an alternate stylesheet for the page you are reading now...see if you can figure out how to get your browser to switch to it). If you provide multiple stylesheets then be sure to alert us and explain how we should switch.

Other Extra Credit

If there's any other Web content technology you'd like to investigate, you can check with the instructor to see whether extra credit may be available.