Skip to content

Lab 2: Document Formatting

Due: Monday, Feb 3rd

In this lab, you will create an HTML version of the following "syllabus" document:

Ignore the page break in the middle of the PDF, since HTML pages don't have page breaks. All of the text content is provided in the starter code below. You just need to format the document as HTML and add a small amount of JavaScript to generate portions of the HTML code.

Starter Code

Use the provided lab2.txt to avoid copying and pasting large chunks of text from the PDF. Note that HTML comments begin with <!-- and end with -->. The comments in lab2.txt will provide hints about the code you will write.

Requirements

Your main task is to add HTML elements to the provided lab2.txt file to create the document structure. The PDF was generated using a word processor, but you will use only HTML. As such, some appearances (fonts, spacing, etc.) may not be exactly the same. But try to make your resulting index.html document look as close as possible, including all the links to Prof. Kirkpatrick's website.

Step 1: HTML Document Structure

You should start by creating the basic HTML structure and high-level semantic components. This includes creating a correctly formatted document header, distinguishing portions such as the header, main, and footer, and defining paragraphs and lists.

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 2: JavaScript Fundamentals

Once you have added the required HTML elements, you will need to add JavaScript code in two places. Each of these will require a separate <script> tag as indicated by an HTML comment that has the word SCRIPT.

The first script uses a standard for loop to generate HTML as text. You will use document.write() to create an unordered list and use the loop to generate the list items, each of which contains a link. This code should be very simplistic, just like being asked to write a Java loop that calls System.out.println() 10 times. The code is just basic string manipulation.

At the bottom, there is a slightly longer script that will select and manipulate certain HTML elements as objects rather than text. For instance, consider the following HTML element:

<p id="my-text"></p>

In JavaScript, you can get a variable that is a reference to this paragraph as an object. You can then use the variable to manipulate certain aspects of the HTML element. Many HTML attributes (such as href, src, or alt) can be added or changed as if these were text fields in that object. In this lab, you will use textContent, a standard attribute for every HTML element, to control the text that is shown in the browser. For instance, we could change the paragraph above to be a "Hello world" message with the following code:

<script>
  let para = document.getElementById('my-text');
  para.textContent = 'Hello world';
</script>

The bottom <script> element must have a particular structure to function correctly. The parentheses and curly braces all serve an important purpose that we will discuss later. For now, all you need to know is that your <script> must look like the following:

<script>
(function() {
// all JavaScript code here
})();
</script>

Optional: Additional exploration

There is an optional exercise that you can complete at the bottom of the last script. Recall that a URL may contain a query string. For instance, the URL http://foo.com/bla.html?a=b contains the query string ?a=b. In JavaScript, you can access this string using the global variable window.location.search.

Use the query string to change the footer image from purple to black. Note that you're not actually changing the style of the image, you're just changing the <img>to use a different image file by changing its src attribute. To complete this step, add code that does the following:

  1. If the query string is equal to ?black, show the black image.
  2. If the query string is equal to ?none, get a reference to the <footer> element, and modify its innerHTML attribute to contain an empty paragraph.
  3. Otherwise, just show the default purple image.

Submission

Your code must adhere to the CS 343 Style Guide. In addition to the formatting of your source code itself, your submission must also pass the Nu HTML Checker with no errors or warnings.

Publishing your file to w3stu is not necessary to test validation. The easiest way to test validation is to install a web browser extension/add-on. Search in your browser's extension tool for "HTML Validator" by Marc Gueury.

Alternatively, you can paste your HTML code into the Nu validator itself and select "text input" from the "Check by" drop-down list. But using a browser extension is much more convenient!

Submit your index.html file to Gradescope. Do not publish your code to w3stu, as that would make the code public for anyone to copy (which would be an honor code violation).