Homework 5

< CS101

For this homework you will write a simple HTML page (a web site) with a few tags, and copy that page up to the Stanford web server to make it accessible to the world. Due 11:59pm ending Wed May 15th.


You will write a few paragraphs of content for your page on a topic of your choosing. I recommend that you write on something that you know about but which is not generally known on the internet: e.g. the most interesting thing or best place to visit in your hometown. For example a page titled "The Best Croissants jn Palo Alto". The idea is that by addressing a specific and under-covered topic, your page will show up in search-engine searches on that topic.

1. Basic HTML Editing

You can use any program to edit the index.html that supports editing and saving the file as plain text. "Plain text" means you are just editing the series of plain characters with no bold/italic or rulers or anything like that (the .doc format is NOT plain text). On the Mac, the TextEdit program included with every Mac can do this, and on Windows Notepad is similar. By default TextEdit begins in a "rich text" mode which is not what we want (in Rich Text mode, there are rulers and font-controls at the top of the window). Use the Make Plain Text command in the Format menu switch it to plain text before saving.

Create a "web" folder on your laptop to hold your in-progress web page. Run your text editor, create a new document, and paste in the starter-template below.


<title>YOUR TITLE HERE</title>
<!-- this cryptic bit limits the page to 700 pixels wide -->
<style type="text/css">
body { max-width:700px; }



<p>Write text, a-tag links, etc. here.


In your web folder, save the unedited HTML above as a file named "index.html". The ".html" part of the filename is called its "extension". Your text editor may ask essentially "Do you really mean to end this with .html?" The answer is yes. You may name the file "index.htm" if your operating system only supports 3-letter extensions. Do not use uppercase letters in the filename like "Index.HTML", or end the file name with ".txt". Just name it exactly "index.html". In Mac TextEdit, if when you re-open the .html file, it gets changed to rich-text, here's the fix: in preferences, check the "Display HTML files as HTML ..." option. (It is a testament to the fragile quality of computer systems that we will have all sorts of problems later if the file name is not exactly what the web server expects.)

Now to test, drag your local index.html file over to Firefox (or another browser). Firefox should show the rather plain web content with a "file:// ... " url at the top of the window. The "file:" url means the content is coming from the file system of your local machine, not the internet.

Edit: now you can edit the index.html file in your editor, save, then switch to Firefox and hit the reload button to see your changes immediately. In this way, it's easy to edit and expand the content, and quickly see what it looks like and fix errors. In Firefox the Tools > Web Developer > Error Console shows a scrolling list of HTML and other problems the browser has seen recently which may help you diagnose some problems. The console has a "Clear" button, so you can erase the list, then hit Reload on your page to see just the problems of your page.

2. Write Actual Content

With your basic edit/view setup working, you can fill in the HTML with actual content and tags. Fill out the content of your page with at least the following:

For all the above editing, just reload in Firefox to see that it looks right.

3. Upload The Content

The last step is uploading your index.html to the www.stanford.edu server. The Stanford web server is programmed to look for web content in the "WWW" directory inside your stanford home directory. Every stanford person has a Stanford home directory which can store files and whatnot for you, although you may have never accessed yours before.

Go to the url https://afs.stanford.edu/. This page allows you to upload and download files to your stanford home directory.

It should prompt you for your Stanford password, and then show a list of all the files and folders in your home directory. There should be a folder named "WWW" (confusingly, the uppercase names are all listed before the lowercase names). Click the WWW to "go to" that directory. The WWW directory holds web pages that the Stanford web serves up for urls of the form http://www.stanford.edu/~SUID (SUID being your stanford username like "nick")

Click the "Upload Files" link at the far left, and select your local index.html file to be uploaded to your WWW directory. After uploading, in your browser visit the url http://www.stanford.edu/~SUID and you should see your page as served by the www.stanford.edu web server).

Optional alternative: if you already have an index.html file in WWW and you don't want to mess it up, just (a) name your file something else, like cs101.html and upload that, then (b) add an a-href tag in your original index.html linking to cs101.html. Then your url will be http://www.stanford.edu/~SUID/cs101.html .. Double check that the url works, and then submit it for grading in the next step.

Short Answer Questions

Here are some short-answer questions on networking along with your URL. Enter your answers below, copy all the text, and then paste it into coursework, and that completes homework 5 (there's no Run button here, just copy the text).