Want to Learn HTML? Get Your Feet Wet

Photo: Martha SpizziriBy Martha Spizziri
ASBPE Web Editor

Chances are you’ve felt a bit frustrated from time to time by not knowing at least a little HTML code. Maybe you were posting a comment to a blog, but didn’t know how to make a web address clickable. Or perhaps you needed to make a simple change to some copy on a web page, such as making it bold, but couldn’t because you didn’t know HTML.

How can ASBPE help you with web training?

Let us know by taking our Web Education Needs survey. Survey ends Friday, April 24.

HTML can get a bit complicated, especially when you add Cascading Style Sheets (which are used for layouts and some of the more sophisticated type formatting). But to just learn enough so you can create links and do some basic text formatting isn’t difficult. Lest any web designers, editors or producers out there want to strangle me, though, I’ll emphasize that if you plan to start making small updates to web copy, you’d better get the okay from whoever creates your web pages.

That said, here are a few fundamentals to get you started.

Basic formatting

The first thing to remember is that most HTML tags come in pairs – an opening and a closing tag. The text to be formatted comes in between those two tags.

An opening tag takes the form of a tag between two angle brackets, like:

for bold

To close the tag, use the same code, but with a forward slash after the opening angle bracket:

To get:

Now is the time for all good men to come to the aid of their party.

You’d type:

Now is the time for all good men to come to the aid of their party.

For italics, the tags are and :

To get:

Now is the time for all good men to come to the aid of their party.

Type:

Now is the time for all good men to come to the aid of their party.

Alternatively, you might see tags used in place of or as the tag pair for italics. (The “em” stands for “emphasis.”) These tags allow for a bit more flexibility on the user’s part – users can choose to set their browsers so that text between tags comes out in blue, say, instead of bold, or emphasized text is bold instead of italic.

Combining tags

You can use more than one tag on the same bit of text. If you want some text to appear in bold italics, for instance, you’d use the tags together with tags. The only rule is the tags should be “nested” in the correct order. That means that the first opening tag used should be the last one closed.

Good HTML:

This text will appear in bold italics.

Bad HTML:

This text may not render as bold italic in all browsers.

Paragraph styling

Another useful tag is the paragraph tag —

— which puts a line of space below a block of text

To get:

This text is enclosed between paragraph tags.

And so is this text.

And so is this text.

Type:

This text is enclosed between paragraph tags.

And so is this text.

And so is this text.

Note that your code doesn’t need a linespace after each paragraph – the

tags put the space in automatically. (Be aware, though, that certain tools, such as Blogger, may be set up so that you can make space between paragraphs just by hitting the “Enter” key twice, as you would in Word. In that case, the

tags will just create extra linespaces, so you can dispense with them.)

Another handy bit of code to know is

, to create a paragraph that’s indented.

To get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

Type:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

If your block quote is more than one paragraph long, simply combine the

and

tags, using the

tags around the entire quote and the

tags around each paragraph. (Make sure the

tags are the first and last tags.)

To get:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

Donec id elit. Proin tempor scelerisque nulla. Fusce diam. Suspendisse aliquam. In vitae lorem sed nisl sodales fringilla. Vestibulum sed nunc. Nunc quis arcu. Fusce tempor nisi id purus. Fusce sit amet velit.

Type:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam odio. Nam odio. Ut sollicitudin nunc non velit. Ut imperdiet, justo sit amet pellentesque egestas, erat nunc euismod lectus, id interdum sapien diam eu neque.

Donec id elit. Proin tempor scelerisque nulla. Fusce diam. Suspendisse aliquam. In vitae lorem sed nisl sodales fringilla. Vestibulum sed nunc. Nunc quis arcu. Fusce tempor nisi id purus. Fusce sit amet velit.

Creating Links

One of the most useful tags, of course, is the tag that lets you link to other web pages. That’s also pretty simple. The tag pair is — the “a” stands for “anchor” — but in this case you must add an extra bit of code to the opening tag to specify that it’s a link and where the link should point to. (That extra piece of code is called an “attribute.”)

To get:

Visit the ASBPE web site.

Type:

Visit the ASBPE web site.

The “href” is short for “hypertext reference.” Note that the URL in the tag should be enclosed in quotes to ensure that it works properly in all browsers.

That should help you get started and take a little of the mystery out of HTML code.

Want to learn more? See our Electronic Media links.

Have your own resources to share? Let us know in the comments.

Advertisements

One thought on “Want to Learn HTML? Get Your Feet Wet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s