Homework 5b

< 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 Mon May 15th.

Optional side contest: (a) figure out how to run Traceroute on your laptop (maybe as easy as bringing up a command-line and typing "traceroute www.example.com". (b) Find (i.e. trial and error!) the computer out on the internet which is the greatest number of hops from Stanford. Nick's www.poland.pl example was about 24 hops from our classroom. Mail your best find to Nick by the hw5 deadline with the "cs101" in the subject. If traceroute prints an unlimited number of unidentified hops without end, that means some router in the way does not support traceroute.

Topic

You will write a one or more 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.

Additional Note About Quotes: on the mac, the editor defaults to changing regular quotes to fancy "smart" quotes, which don't work correctly in HTML. This can cause problems with the <a href="xxx">. Turn this feature off with the menu: Edit > Substitutions > Smart Quotes.

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.


<html>


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

<body>

<h2>YOUR TITLE AGAIN</h2>

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

</body>
</html>

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.)

On the Mac, 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. On Windows, click the file, and "Open With ..." and click on your browser. 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://web.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 (and any image files). After uploading, in your browser visit the url http://web.stanford.edu/~SUID (there's a tilde to the left of your SUID there) and you should see your page as served by the web.stanford.edu web server. This gives you a sense of HTML is sent from a server to your browser, making the pages you see all the time.

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://web.stanford.edu/~SUID/cs101.html .. Double check that the url works, and then submit it for grading in the next step.

Turning in: Turn in your URL at the top of the homework, plus the earlier short-question answers as homework-5 in the usual way. The TA's can follow the URL in the usual way to see your page. If your URL is not working for some reason, you can at least turn in your HTML code for partial credit.