Labs

1 -

Success!

You have published an HTML file. This file should appear in w3stu.cs.jmu.edu/username/cs343/lab1/.

Here is a link to the text file.

Now link to the other subdirectory.

2 - Lab 1 - File Publishing and Validation

In this lab, you’ll practice using the web server infrastructure that will be available throughout this course.

Background

Throughout this 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. When accessing your pages through a web browser, you will use w3stu; when transferring files, you will use stu.) As a CS student, you already have an account.

The easiest way to get started transferring files is to use Cyberduck, a free, cross-platform, open-source file transfer application. From that site, download the program on your laptop or wherever you will be doing your development work.

Once you have Cyberduck installed, start by clicking on “Open Connection” in the upper-left.

You should connect to stu.cs.jmu.edu using the sftp:// protocol, setting your username and password as appropriate.

The first time you connect to stu, you will get a warning about an “Unknown fingerprint”. Go ahead and click “Allow” (you can also check the “Always” box to avoid seeing this again).

Once connected, Cyberduck should default to opening your home folder on stu. If not, you can navigate back by going to /cs/home/stu/your_eid.

You should see a folder named “www”. This is actually a shortcut (symbolic link) that links to /cs/www/stu/your_eid. Double-click on “www” to navigate there. It should initially be empty, unless you have previously published something here.

Any file that you drag-and-drop into this directory will be published on w3stu automatically. If you copy a file called foo.html into this directory, you can access that file by pointing a web browser to the URL https://w3stu.cs.jmu.edu/your_user_name/foo.html. Within FileZilla, you can also create subdirectories to organize your site’s pages.

Note: If you are comfortable with working on the command line, you might try doing this lab using something like scp or rsync. You can find plenty of tutorials for either by searching. The scp command line would look something like:

$ scp index.html <i>your_user_name</i>@stu.cs.jmu.edu:~/www/index.html

File Publishing

Your first task is to download and publish the following files based on the naming conventions shown below. Right-click on each to save a copy to the desktop on your computer.

1. index.html
2. data.txt
3. linked.html

Step 1: Publish index.html

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 the URL https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/. Note that you will need to create the cs343 directory in your www directory and lab1 in cs343.

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

Step 2: Publish the other files

Transfer the data.txt file so that it is in the same directory as the index 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 the 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/your_EID/cs343/lab1/
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/index.html
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/data.txt
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/linked/
• https://w3stu.cs.jmu.edu/your_EID/cs343/lab1/linked/index.html

Validation and Minimization

Throughout the semester, your lab and project submissions need to successfully pass the W3C Nu HTML Validator. The provided index.html file does not pass. Copy and paste the link to your published version and fix the error based on the feedback there. Do the same for the lab1/index.html file. Note that there is one error there (use of <tt>) that cannot be fixed based on what we have discussed so far.

Submission

1. Download this file (named site.txt) and edit it with vscode. You should only need to replace your_EID with your JMU EID.
2. Submit your modified version of the site.txt file to the Lab 1 assignment on Gradescope.

3 - Lab 2 - Document Structure with HTML

In this lab, you will be formatting a text document as an HTML version of this screenshot. Note: All of the text content is provided in the starter code below. You just need to format markup the document as HTML.

Starting Code

Use the provided lab2.txt to avoid copying and pasting large chunks of text from the PDF. Lines beginning with # are intended as guidelines, and should be converted into HTML comments.

<!-- as a reminder HTML comments begin with those 4 characters at the beginning of this code sample and end with the following 3 -->

• lab2.txt
• JMU-Logo-RGB-horiz-purple.png

Step 1: Basic HTML Documents

Your task is to add HTML elements to the provided text file to create the document structure. Note that the PDF was generated using a word processor and we are only using HTML. As such, some appearances (fonts, spacing, etc.) may not be exactly the same. You should try to make it as close as possible, however.

For this step, you need to have a correctly formatted header to create a valid HTML file. You also need to format all paragraphs and lists correctly.

You could approach this either by:

1. renaming your downloaded copy of the provided lab2.txt to index.html and working directly there, or
2. creating a new file called index.html and copying selections from lab2.txt into it as you proceed through the lab.

Step 2: HTML Document Structure

Once you have all the previous components, you need to add the remaining HTML elements, such as the title, subtitle, and horizontal lines. You also need to add the JMU logo image at the bottom. The only things that should be missing at this point are the portions controlled by JavaScript.

Step 3: JavaScript Fundamentals

Once you have added the required HTML elements, you will need to add JavaScript code in a few places. Each of these will require a separate <script> tag:

1. Just after the (opening) <body> tag, create the variables as described in the lab2.txt file.
2. Use one variable as a Boolean to determine whether or not to show the JMU logo image at the bottom.
3. Use the other variables as Strings that contain both the level 3 heading tags and the corresponding text.

Submission

In addition to the formatting of your source code itself (which you should ensure vscode has done, using the defaults), your submission must also validate cleanly with no errors or warnings.

Note that publishing your file is not necessarily to test validation. The easiest way to test validation is to install a browser extension/add-on. Search in your browser’s extension tool for “HTML Validator” (by Marc Gueury, you should already have this if you completed the Dev Setup). You can also copy and paste the HTML into the validator itself (selecting the “text input” from the “Check by” drop-down list).

You will submit your index.html file to Gradescope for submission.