HTML For Bloggers Course – Lesson 1

Hurdles

Hurdles

HTML knowledge is one of the biggest stumbling blocks for small business owners looking to manage their own blogs. On a blog platform like WordPress.com, a non-techie can configure 80-90% of their site without knowing any HTML. On Posterous or Tumblr blogs, 95% of the blog site can be well configured without HTML.

It’s that 5-10% that can stop a small business owner in their tracks. The intent of this post and the whole course is to help you get over that learning hump so you can manage your blog effectively and go on and do what you do best, run your business.

Let’s get started.

Web Page Basics

* Web pages are created using the scripting language called HTML.

* HTML stands for HyperText Markup Language

HyperText Markup Language

HyperText
* Web pages may include text, images, videos, and links to itself or to other Web pages or documents.

* Links are also called “Hyperlinks.”

Page with Hyperlink
This Web page includes a hyperlink

Markup
*HTML is used to describe a Web page’s layout.

Exercise

For this part of the lesson to be most effective, you will need to print out this worksheet (PDF). This page has the two examples below and some instructions.

Now, get a marker or crayon and have it handy (red ones work well). Look at the first example and describe what you see. Pretend that you’re on the phone describing to someone what you see in the little Web browser. Then write those same descriptive words on the paper with your marker or crayon. Write them next to the element on the Web browser that you are describing.

This is the most important part of the entire course. There’s no wrong way to do this. You’ll see.

Markup Exercise #1
Markup Exercise #1

Ok, so you marked up the first little Web browser on the worksheet. That wasn’t so bad, was it?

You’re wondering if “you did it right”, aren’t you? That’s natural. Click here to see how I marked up the first little example. If you did it a different way then that’s fine.

Now go to the second little Web browser on the worksheet and do the same thing. Mark it up. Remember, you’re writing down words that you would use to describe it to someone else. Don’t be afraid to draw arrows and circles to make things super obvious.

html-for-bloggers-markup-2
Markup exercise #2

You can see how I marked up the second example here. Once again, if you did things in a different way that’s Cool and the Gang (movie reference).

Congratulations, you just finished Lesson 1! The purpose of this little exercise was to practice the “marking up” process. We essentially just created our own little language for describing Web content. The language was made up of descriptions in English and maybe arrows and other marks.

In the next lesson we’ll learn the formal way to use the HTML scripting language to describe Web content. You’ll learn about the key HTML “tags” and the structure of an HTML document. You will also learn the first tips for using HTML to update your blog content with confidence.

Have questions on this Lesson? Was it useful? Leave a Comment or “@” me on Twitter, @jesseluna. While you’re at it, subscribe to the blog so you don’t miss Lesson 2.

[Update: HTML For Bloggers Course – Lesson 2 has been posted!]

Photo credit: Studiocurve on FlickrLicense

Facebook
Twitter
LinkedIn
Email
Print