Lab 1: File Publishing
Due: Monday, Jan 27th
In this lab, you will learn how to upload files to the CS student web server. You will also gain experience with the Nu HTML Checker.
FileZilla and w3stu¶
Throughout the semester, you will frequently need to transfer data to w3stu.cs.jmu.edu, the JMU CS web server for students.
Note that w3stu is the same as stu, the server you may have used in other courses.
When accessing your pages through a web browser, you will use w3stu; when transferring files, you will use stu.
You should be able to access all JMU CS systems, including stu.cs.jmu.edu, using your JMU e-ID (username) and password.
Please let me know ASAP if you are unable to log in.
The easiest way to get started transferring files is to use FileZilla, a free, cross-platform, open-source file transfer app. Install FileZilla on your laptop or wherever you will be doing your development work. (FileZilla is already installed on CS lab machines.)
Once you have FileZilla installed, you will connect to stu.cs.jmu.edu using the sftp:// protocol as shown in this screenshot, setting your username and password as appropriate. The first time you connect to stu, you will get the "Unknown host key" pop-up box as shown; click "OK" to continue.
Make sure that the Host: is sftp://stu.cs.jmu.edu and not just stu.cs.jmu.edu.
The default behavior for FileZilla is to use the insecure ftp:// instead of sftp://.
This will not work, as stu does not accept incoming ftp:// connections.
Once connected, the right side will show a path on the "Remote site:" that looks like /cs/home/stu/username. This screenshot shows an example. Under the "Filename" list, scroll down until you see the "www" directory shortcut. Double-click on it, and you will see something that looks like this screenshot. Notice that the "Remote site:" has changed to /cs/www/stu/username, which is the base directory of your web site.
If you don't have a www shortcut, you can create one by running the following command on stu.
(You will first need to ssh to stu in order to run this command.)
ln -s /cs/www/stu/username www
Any file that you drag-and-drop into this directory will be published on w3stu automatically.
If you copy a file named foo.html into this directory, you can access that file by pointing a web browser to the URL https://w3stu.cs.jmu.edu/username/foo.html.
Within FileZilla, you can also create subdirectories to organize your site's pages.
Publish index.html¶
Right-click the link below to save a copy of the file on your computer.
Open the index.html file in a text editor and change your name in the <meta> tag that indicates the "author" of the file.
Then transfer the index.html file so that it can be accessed at https://w3stu.cs.jmu.edu/username/cs343/lab1/.
Note that you will need to create the cs343 directory under your www directory, and lab1 under cs343.
Make sure you copy this file to the correct place.
It should not be in your www directory, but in www/cs343/lab1.
That way, if you already have an index.html page, it will not be overwritten.
Test this step by going to the URL in your web browser. If you click on any of the links, they should not work (giving you a 404 error).
Publish other files¶
Right-click each link below to save a copy of the files on your computer.
Transfer the data.txt file so that it is in the same directory as the index.html file.
Click on the "text file" link from the index file, and confirm that you can access it.
Transfer the linked.html file, but you'll need to create a subdirectory and rename the file in the process.
Once you've transferred the file, it should be in your www/cs343/lab1/linked subdirectory and renamed as index.html.
When you are finished, you should have the following files and directory structure, and all links in the index file should work:
https://w3stu.cs.jmu.edu/username/cs343/lab1/ https://w3stu.cs.jmu.edu/username/cs343/lab1/index.html https://w3stu.cs.jmu.edu/username/cs343/lab1/data.txt https://w3stu.cs.jmu.edu/username/cs343/lab1/linked/ https://w3stu.cs.jmu.edu/username/cs343/lab1/linked/index.html
Validation and style¶
Your lab and project submissions must successfully pass the Nu HTML Checker.
The provided index.html file intentionally does not pass.
Copy and paste the link to your index.html file, and fix the error based on the feedback.
Do the same for the linked/index.html file.
Note that there is one error (use of <tt>) that cannot be fixed based on what you have learned so far.
You don't have to correct this error.
Submission¶
Right-click the link below to save a copy of the file on your computer.
Edit the file to contain the URL to your website for this lab.
Submit your site.txt file to Gradescope.
The autograder will access your website and verify that you have completed the required steps.