Lab 2 - Document Structure with HTML

In this lab, you will use HTML to “markup” plain text into a structured document.

Categories:

3 minute read

In this lab, you will be formatting a text document as an HTML version of this PDF. (Ignore the page break in the middle of that 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.

Starting Code

😉 Create a directory for this lab

As a reminder, in whatever location on your filesystem you will collect our course’s work (e.g. the suggested dev directory), begin by:

creating a directory specifically for this activity (name it something reasonable, e.g. lab2)
tell vscode to specifically open this directory (not its parent, the dev directory or any individual files)

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 sameple and end with the following 3 -->

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:

renaming your downloaded copy of the provided lab2.txt to index.html and working directly there, or
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:

Just after the (opening) <body> tag, create the variables as described in the lab2.txt file.
Use one variable as a Boolean to determine whether or not to show the JMU logo image at the bottom.
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.

🛑 Don't publish to stu

You should not publish your code for this assignment to w3stu, as that makes it public for all to copy from. 😅

Last modified August 11, 2024: moved a bunch of things for archival purposes (6652bbe)