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:
- There was no JavaScript when the Web was first deployed. It came much later, and even then was for many years used for non-structural logic such as input field validation.
- We we will later in the course dig deeply into the disadvantages as well as the advantages of imperative languages like JavaScript. Understanding how much can be done without it is important.
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:
- You should take this opportunity to learn and demonstrate your ability to use at least three significant features of HTML and three of CSS that you did not already know.
- For everyone, the overview below lists certain minimum features you must demonstrate: for those with lots of HTML or CSS experience this should be trivial and should take only a few minutes. Go on then to find and implement the six new features that you didn't know before.
- If you didn't know much HTML or CSS, then just meeting the minimum requirements below will count as your six features.
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:
- Headings at more than one level, with <h1> formatted to make a nice looking title for the page(s)
- Several paragraphs of text
- Your ability to use CSS to control at least a few aspects of text rendering (e.g. color, font-style, text-align, etc.)
- Your ability to use a class attribute and a CSS
.xxxx
selector to style multiple elements with the same class (e.g. multiple paragrphs or table entries that you might want to highlight) - At least one image. You'll need to copy the image file (probably a JPEG) onto your Web site along with the HTML, and use an <img> tag to cause the image to render. If necessary you can use CSS to affect things like the size of the picture (there are lots of tutorials on the Web that can show you had to do this if you need to).
- At least one <div>. Use CSS to provide some interesting styling for it (your choice of borders, background, floating alignment, etc.)
- At least one <span>, used to provide some formatting (e.g. a color or font change) for a few words of text
- At least one <table>. Tables are a little tricky, but there are tons of tutorials on the Web. Indeed, this is intended as an exercise in learning HTML the way everyone does: by searching the Web, and using View Source to check out examples.
- At least one
class
used on two or more of your HTML tags, and styled using CSS using a selector involving that class - That your creation is fully valid HTML5 and CSS, as demonstrated by the online W3C HTML Validator
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:
- 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.
- 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:mkdir ~/public_html
chmod 755 ~/public_html
- 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 ofpublic_html
, that's fine. - 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.
- 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! - 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. - 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.
- 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.
- 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 usingprovide
along with the question/answer sheet described below. The sections below tell you how to set permissions properly on your directories, how to usecurl
to log your HTTP results, and how to submit your assignment. - 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:
- All directories accessed by the Web server must have execute permissions for everyone (
chmod o+x <dirname>
) - All files to be served, including HTML, CSS, JPEG, etc. must be readable by everyone (
chmod o+x <filename>
)
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:
chmod o-rx <all directories to protect>
chmod o-r <all files to protect>
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://
or in some cases https://
; don't worry about the difference for now.).
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.