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.
Step One – Download
[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
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>:
<link rel=”stylesheet” type=”text/css” href=”INSERT FILE NAME“>
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):
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:
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.
<script src=”INSERT FILE NAME“></script>
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.
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.