HTML & Coding Exercise – DH & The Anthropocene

Overview

For this exercise, you are going to be completing a simple HTML page, creating a CSS file, working with a simple JavaScript file, and writing a short reflection essay about your experience. The intention is to introduce you to these three major website development languages and to help you understand how they work together.

To conduct the exercise, read about markup and coding and then follow the exercise instructions below. The instructions are both in video and written form. The written form is for a quick reference and does not contain all of the information. To complete this exercise successfully, you must watch the video.

Instructions

Step One – Download

To begin, download the exercise zip. The file will likely download to a download folder. After it has downloaded, put it on your desktop and click on it to open it. In the folder, you should see a text file named dhexercise.txt and a JavaScript file named dhexercise.js. For the remainder of the exercise, keep all of the files in this folder and make sure to save the CSS file you will be created in there as well.

[Please Read: If the txt file is blank when you open it in TextEdit, you need to change some of the settings. Click on “TextEdit” in the top menu and click “Preferences.” Under “New Document,” select “Plain Text” and under “Open and Save” select “Display HTML file.” Watch this video for further assistance.]

Step Two – HTML

1: Open the file dhexercise.txt, in a text editor. You will see it includes the barebones of an HTML doc.

2: In the title tag <title>, located in <head>, add an appropriate name for the page, e.g. HTML & Coding. Note that it is not in the <body> tag. The reason being <title> is not part of the page content. It is metadata that describes the page. Therefore, instead of appearing on the page, <title> will appear in the page’s tab at the very top.

3: In <body> there are three tags, <h1>, <h2> and <p>:

In <h1> add the header: HTML & Coding Reflection
In <h2> write your name.
In <p> write your reflection.*

*Since you won’t have your paragraph until you have completed the exercise, put temporary “dummy text” here and then replace it with your reflection once you are done. Dummy text is filler text that is used for moments like this when, as a designer, you are anticipating text but don’t have it yet.

4: Save your file as an HTML file, which means saving it with an .html extension. Go to the exercise file, click on the file name dhexercise.txt and rename it dhexercise.html. If it asks whether it should use .txt or .html extension, choose .html and close it.

5: Reopen the file by clicking on it and notice that it now opens in your web browser.

Note: To edit the HTML file, you will need to open it back up in the text editor. To do this, either drag the file to the text editor or within the text editor selected “File” then “Open” and locate the file.

Step Three – CSS

1: Create a new file using a text editor and save it as dhexercise.css in the downloaded exercise folder. (It must be in the same folder as the HTML and JavaScript file.)

2: Link the CSS file to the HTML doc by adding the CSS file name to the following tag found in the HTML doc <head>:

Save the HTML doc.

3: In the CSS file, change the styles of the tags <h1>, <h2> and <p>. Start by cutting and pasting the basic CSS example below (notice one of the tags you need to work with is missing):

h1 {
color: #476b6b;
text-align: left;
}

p {
font-family: times;
font-size: 10px;
}

Save the CSS file and refresh the HTML doc that is in the web browser so that you can see the change the CSS has made. This step should give you a sense of how CSS works. It is now up to you to play around and make changes that improve the look and layout of the page. These resources will help you get started by showing you different ways to effect styles:

w3school HTML color picker
w3school web safe fonts
w3school page margins
More can be found in these guides from W3 School and from cssreference.io

Note: To edit the CSS file after you have closed it, you will need to open it back up in the text editor. To do this, either drag the file to the text editor or within the text editor selected “File” then “Open” and locate the file.

Step 4 – JavaScript

1: Link your JavaScript file to the HTML doc by adding the JavaScript file name, dhexercise.js, to the JavaScript tag found in <head>. Put it where it says, “INSERT FILE NAME.”

2: Play with how fast or slow the webpage fades in by changing the number in .fadeIn(900). Each time you make a change, save the JavaScript file and refresh the HTML doc in your web browser.

Step 5 – Reflection Essay

Write a short reflection (2 to 3 paragraphs) that describes your experience, e.g., How did the exercise impact your understanding of websites/website development? What did you learn? What surprised you? What was the most interesting aspect? How difficult was it for you? If this was too basic for you, talk about your experience with website development and explain some concepts that you think should be added to the exercise to make it more challenging. In your response, make sure to reference what you learned in the readings for the exercise and please provide feedback on the clarity of the exercise and tutorials.

The reflection essay should be in the HTML document you are turning in. Put each paragraph between <p></p> marks.

Step 6 – Upload Zip File to Brightspace

1: Compress the exercise folder into a zip file. On a Mac, you hit the control key and click on the folder. Then you select compress. On a PC right-click the folder, select “Send to,” and then select Compressed (zipped) folder.

2: Upload the zip file to Brightspace.

Troubleshooting:

If you are having trouble, one or more of the following might be happening:

1. You are missing a closing tag in your HTML doc. For example, you put an <h1> and forgot to close it with an </h1>

2. You forgot to put a semicolon or bracket at the end of your CSS style.

3. You have a typo, e.g., the CSS is not working because you typed the CSS file name wrong in the HTML doc.

4. You don’t have all of the files in the same folder.