Instructions for HTML Exercise 1

Markup structure, headings, and paragraphs

In this exercise, you're going to build a simple HTML page using the text you marked up in Exercise 0

HTML (and its cousin XML) is a markup language. Although we throw the word "code" around a lot in these exercises, you're not doing computer programming. Instead, you will be marking up a document with tags so that a browser will display it in a particular way (aka "presentation").

This is not a full HTML/CSS development course, so we won't get into crazy stuff like CSS 3D transformations. My goal for the HTML portion of the course is for you to know just enough to be dangerous. If you spend any time working in a content management system (WordPress is one, as is Blackboard!), a little basic HTML knowledge will help you to troubleshoot weird formatting issues. More importantly, you'll understand the basics of working in markup languages, which has applications in the kinds of content development and management work that can be part of many technical communication careers.

For some of us, Blackboard is trouble enough, and working with markup languages might be an intimidating idea. Please remember this section from the syllabus:

A spirit of inquiry and experiment is just as important as particular technical skills in this course. "Showing up" with broken or malfunctioning work is far better than showing up with an excuse, and sometimes we can learn more from your broken webtext than some slick Squarespace module. Your honest effort is more interesting to me than perfect work.

Use a plaintext editor

Use a plaintext editing program rather than your word processor to edit your files. I recommend:

• For Windows: Notepad++
• For Mac: BBEdit
• If you're feeling slightly more advanced, two good open source code editors for Mac and Windows are: Atom or Brackets

Add tags to your document

1. First, review the video introduction and the following articles from the Mozilla Developer Network.
• Getting started with HTML (we won't get into attributes this week, but please review that content)
• HTML text fundamentals
2. Take the fair-use text you revised for Exercise 0 and format it as an HTML page. You can get started by downloading this HTML template file to your computer and addding the text from your excerpt. Right-click or alt-click on the link text and save link as an html page file. Include at least the following elements (we will get to links and media in the weeks to come):
• One top-level heading:

  <h1>This is a good spot for my headline or title</h1>

• Multiple second-level headings (the number will vary according to your excerpt)

  <h2>This is a second-level heading</h2>

• Paragraph elements for each paragraph

  <p>This is a single paragraph of text.</p>

• At least one span of text tagged for importance

  <strong>important text, such as a key word</strong>

• At least one span of text tagged for emphasis

  <em>Place em tags around text you want to emphasize</em>

3. Save your HTML file in the format yourlastname-1.html (my file would be: andrews-1.html) and upload it to the HTML Exercise 1 assignment in Bb. It may not display correctly in the DocBox visualizer. Over the weekend, I will download your files and upload them all to a public web directory for us to review together.