HTML Document Formatting

Starting Code

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

• lab2.txt
• jmu-logo-rgb-horiz-purple.png
• jmu-logo-rgb-horiz-black.png

Requirements

Your main 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.

Step 1: HTML Document Structure

You should start by creating the basic HTML structure of required 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 specifies a 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. It 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 the 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 are all serving an important part 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 presentation 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 a 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 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 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. You should not publish your code to w3stu, as that makes it public for all to copy from.