HTLM exercise D R A F T

Are you Web savvy? Or for all you know, do you think HTML might be a short-order cook's abbreviation for a ham sandwich with letuce and tomato? Here's an exercise designed to give you a taste of HTML. (OK, OK, you read the assigned chapter, and you already know HTML stands for hypertext markup language. Right?) Anyway, today we'll give you a taste of HTML on The Mackerelwrapper blog, taking advantage of a feature of Blogger that lets you use simple HTML tags in the comments field.

HTML tags come in pairs. There are a few exceptions to this rule, but 99 percent of the time you have to use them in pairs. The first consists of angle brackets -- the "less than" (<) and "greater than" (>) signs you remember from math class -- around a code. And the second consists of a "less than" angle bracket and a slash -- which looks like </ -- and a "more than" angle bracket around the same code. It tells the computer to stop doing whatever the first tag told it to do. For example, the first sentence of this paragaph would look like this in HTML: <b>HTML tags come in pairs.</b> The first tag tells the computer to start setting in boldface type, and the second tag tells it to stop.

OK, let's get started. What I want you to do is to choose something to write a brief paragraph about, and post it as a comment to this blog post. Something you won't be embarrassed to publish to the World Wide Web. Cats, dogs, ferrets, the Cubs, the Cardinals, quadratic equations, dumb in-class assignments, whatever. For demonstration purposes, I'll choose butterflies.

1. Start by writing a headline. To make the type big, enclose your headline in these tags: <h1> at the beginning and </h1> at the end. In HTML it will look something like this: <h1>Flutter by, butterfly.</h1>

2. Next, write something about your subject. It doesn't matter what. But here's what does matter: I want you to find a website that explains something about your subject, and create a hypertext link to that website. Here's how it might work: As I surf the Web looking for stuff on butterflies, I come across the legend of the Chinese philosopher Chuang Chou (or Zhuangzi), who once dreamed he was a butterfly. But, according to the legend, when he woke up "he didn't know if he was Chuang Chou who had dreamt he was a butterfly, or a butterfly dreaming he was Chuang Chou." Great story, huh? Really gets you thinking. I found it in the online encyclopedia Wikipedia, so I'll create a hypertext link to it.

The HTML tag for a hypertext link starts with <a href=" and the address or URL (which stands for Uniform Resource Locater, right?) followed by "> ... so I highlight the Wikipedia page's address and copy it, then paste it into the tags so it looks like this: <a href="http://en.wikipedia.org/wiki/Zhuangzi"> ... then I'll write a few words that I want in the link and I close it with </agt; (see how it picks up the "a" from the opening tag)? Here's what my text might look like: The ancient Chinese philosopher Chuang Chou <a href="http://en.wikipedia.org/wiki/Zhuangzi">once dreamed he was a butterfly.</agt; When he woke up ...

Flutter by, butterfly

Butterflies don't make butter, but they do fly. And sometimes they make philosophy. The ancient Chinese philosopher Chuang Chou once dreamed he was a butterfly. When he woke up ...

See how the words "once dreamed he was a butterfly" are converted by the HTML tag into hypertext? There are quite a few other tags to learn in HTML (although most of us get started by pasting them in from a list of tags we find through a Google search). But this <a href=" hypertext tag is the basic building block of the World Wide Web.

Now it's your turn. Think of something to write about. Find a Web page about it. And post a hypertext link to it. You may post as a comment to this blog post.


Why don't you start by writing a headline.