A weblog for Pete Ellertsen's mass communications students at Benedictine University Springfield.

Thursday, November 12, 2009

COMM 207: Getting your feet wet with HTML tags

We're not going to make expert Web designers in Communications 207, but we do aim to get you started getting familiar with Hypertext Markup Language. That's the code that creates Web pages, and no matter how confusing it looks at first, HTML is actually pretty simple. Basically it's a series of commands written in plain text, i.e. the kind of text you get when you turn off all the "automatic" options in Microsoft Word.

Our textbook has a good introduction in Chapter 8, and the online W3 Schools tutorial is excellent.

So let's surf W3 Schools a while, and then make an HTML tag.

Yep. That's what I said. You're going to create an HTML tag linking to a Web page. Best way to do it is to do it. Here's a first exercise. Basically, I want you to find a website and write a link to it. You can start by posting a comment containing the link to this blogpost. That's right. Now. Today. Blogger lets you do that.

As you read in W3 Schools, notice how the tags come in pairs. The first, at the beginning of the text you want to mark up, starts with a "less than" sign - < - and ends with a "greater than" - > - sign. The second, at the end of the text you mark, is like the first, but it inserts a forward-leaning slash - like this: / - just after the "less than" sign. It probably looks like alphabet soup right now, but you'll get used to it quickly. Just remember these things come in pairs.

But for now, let's just get started. I learned it monkey-see, monkey-do, and I think that's the best way. And we can look at the theory later. So here goes ...

To create a link, go to the comments field at the bottom of this post and open it. Decide what you want to link to, and type something like: "Here's a link to ..." that introduces the hypertext. The hypertext is just the part you click on that takes you where you want to go. By typing in an address (URL) and putting a code around the text, using angle brackets and letters, you tell your browser to find the indicated address. Confused yet? Let's just do it.

How to Post a Link

I like to do this with two windows open, one to the page I'm posting the link to and the other to the comment (or create post) field in Blogspot. Here are the steps:

  1. In the address field in the header, highlight the address (or URL). Copy it.
  2. Go to the comment field. Type in Here's a link to <a href="
  3. Paste in the address with no space between the "less than" and the address.
  4. Type "> with no space between the address and the quote mark.
  5. Type in whatever words you want in the link, for example where you want to go
  6. Immediately after those words, type </a>
  7. Your link should look this this <a href="address">where you want to do</a>
One last step: Be patient. It takes forever to get all the details right, and even then I get little red-and-yellow error messages all the time in Blogger. If you don't yet know what I mean by that, you will very soon!

¥

Blog Archive

About Me

Springfield (Ill.), United States
I'm a retired English, journalism and cultural studies teacher at Springfield College in Illinois (acquired by Benedictine University and subsequently closed). I coordinate jam sessions for the "Clayville Pioneer Academy of Music" at Clayville Historic Site and the Prairieland Strings dulcimer club, and I sing in the choir and the contemporary praise team at Peace Lutheran Church in Springfield. On Hogfiddle I post links and video clips for our sessions and workshops on the mountain dulcimer (a.k.a. "hog fiddle"), as well as research notes on folklore and cultural studies, hymnody and traditional Anglo-Celtic and Scandinavian music. I also posted assignments and readings in my interdisciplinary humanities classes. The Mackerel Wrapper (now on hiatus), carried assignments and readings for my mass comm. students. I started teaching b/log when I chaired SCI-Benedictine's assessment committee, and reopened it as the privatization of public schools grew increasingly troubling and closer to home.