Wednesday, September 15, 2010

WotW: Some basic HTML

HTML... You hate it. You love it. You are scared by it. You see it as a key to your bloggy-power. You don't understand it. You hate it. No matter how you feel about HTML, if you're serious about blogging, you should learn at least the basics.

But, you say, I use Blogger/Wordpress/Typepad/something like that so that I don't have to even think about HTML... why should I even bother reading?

Yes, blogging platforms make it easy by writing the HTML for you as you just type and click those little buttons in the toolbar (that's the HTML you see if you click over to the Edit HTML view). But have you noticed how you don't have that lovely full toolbar when you are, say, leaving a comment? Or filling in some of the fields in your profile? Or when you add an HTML/Javascript widget? Those are the times to use some of this HTML stuff!

Before we get to some HTML basics, there are just a few facts you need to know:  HTML (or html, both acceptable) stands for Hyper Text Markup Language. Thus, HTML is a markup language, not a programming language. If it were a programming language, it would be HTPL. ;) So, when you are editing HTML you are marking up (or tagging), not programming. True web programmers go far beyond HTML. I used to work in an office full of web programmers and they laughed when I replied that I knew "some HTML" when they asked me if I had any programming experience.

Okay, we've established that HTML does not a web programmer make. We can move on. Thanks for allowing me my moment on the soapbox. :)

First things first...

A bit of HTML language is called a tag.

Most HTML tags come in pairs. The first tag is called the opening tag or start tag, and the second tag is called the closing tag or end tag. The closing tag usually contains a / before the same tag as was in the opening tag to signify that it is closing what the opening tag started.

HTML is a language, so it also has punctuation and syntax (word order). The punctuation and syntax of HTML is very important. If you are missing a > or a " or have the tags in the wrong order, it won't work like you want it to, so pay very close attention to the details like that. All of the tags I'll tell you about today are incredibly simple, but if you dive farther into HTML, this will become more important.

Some tags, such as links and images, require an additional part, called an attribute. Attributes add meaning to a tag, such as telling which image to show or what URL a link should go to. For tags with attributes, the corresponding attribute(s) are included in the opening tag of the pair. (Scroll down to Link tags for an example of tag with attributes.) The punctuation and syntax are especially important when tags require attributes. Most attributes follow this pattern: attribute="definition of attribute". Don't forget those quotes!

Text tags
Some of the most common HTML tags are the formatting tags. These tags change your text's appearance.

Use these tags to make your text...

bold - <b>This text will appear bold</b>
italic - <i>This text will appear italicized</i>
underline - <u>This text will appear underlined</u>
strikethrough - <strike>This text will appear struckthrough ;)</strike>

To have two of these styles applied to a section of text, just layer them:

<b><i>This text will appear bold AND italicized</i></b>

You probably won't ever need to use these tags below, but if you are editing your HTML, you'll probably see them:
  • The <span> tag is used to style text according to CSS. CSS stands for Cascading Style Sheet. We're not going to get into CSS styles today because there are literally thousands, and when you're ready for CSS, you'll have surpassed my teaching abilities. :) Just know that Blogger uses the <span> tag anytime you change the size or color of your text.
  • The <br /> tag denotes a line break. It is one of the few HTML tags that doesn't include both an opening and a closing tag. Depending on your Blogger editor settings, you'll either see these or you won't.

    • Look at your settings for Edit HTML Line Breaks in the Post Options section of your post editor (underneath the area where you type and where you add labels).
    • If Press "Enter" for line breaks is selected, you won't see these tags at all in your Edit HTML view. Instead, pressing enter will count as a line break.
    • If Use <br /> tags is selected, you'll see lots of these tags because without them, you won't have any line breaks.

Link tags
Links are the tags that I manually enter most, such as in comments to link back to my blog or a relevant post. You can just paste in the full URL, but using the HTML tags make it look so much prettier. Oh, and they make it so that others can just click instead of copying and pasting. :)

There are two main parts to the link tag: the tag itself and then the tag attribute(s). A tag attribute, like I mentioned above, gives added meaning to a tag. For example,

<a> this a tag makes a text link </a>

but without an attribute, the link doesn't have the required information to link to anything but the page that it's on. It's like this link -- it looks like all the other links on the page, but it doesn't actually link to anything because the <a> tag by itself doesn't include enough information.

To make the <a> tag work how we want it to, we have to add the href attribute. The href attribute defines the link's destination -- what URL your browser will go to when you click on that link. Be sure that the URL you entered is in quotes and starts with the http://. If you leave off the http://, your browser will just attach whatever you've entered to the domain (the base of the URL), so instead of actually going to your link leads to something like -- which will result in a lovely "page not found" address. 

The syntax of the link tag is very important so pay attention! When you include both the <a> tag and the href attribute, your properly written link HTML looks like this:

<a href="">This link leads to just Lu</a>

But what if you want that link to open in a new window or tab? Simple! You just add the target attribute to the opening a tag. There are several different target options, but the most common is _blank, which tells your browser to open that URL in a new tab or window (depending on your reader's browser settings). Again, don't forget to put it in quotes! The quotes are very important for attributes.

This is what your link HTML will look like for the link to open in a new window:

<a href="" target="_blank">This link leads to just Lu and opens in a new window</a>

Phew! This post is getting long and suffers from lack of pictures, so we'll stop there. Questions? Concerns? Please let me know!

Have a happy HTML Wednesday :) 
Lu (or Lorene if you prefer) is the mom of one squirmy boy and the wife of a singing and dancing elementary teacher. She is the proud author of this weekly Wednesdays on the Web (WotW) segment here on Housewife Eclectic and spends the other days of the week blogging about books, crafts, recipes, and whatever else comes up at just Lu.


Brandy@YDK said...

thanks - it feels clear as butter.

Megan Harmeyer said...

I'm in the "scared by HTML" category. But, this comes at a perfect time because I've been thinking about making a button for my blog but had NO idea. It's like you read my mind (I almost sent you an email asking if you'd done any sort of tutorial on this)! I'll be doing more thorough reading on this once the boys go down for their nap today. Thanks! :D

Cranberry Morning said...

Lu, thank you so much for posting this stuff for us! I've learned how to make links active, now, and the next thing I want to learn is how to add a small icon-type photo to a comment. It's come up a couple times, but right now I can't think of the context in which I thought it would be great to have that knowledge.
NOT great enough, however, to try to understand some of the techies who try to explain it to me. Some people are tech writers and others are NOT. I'm grateful that you are! :-)

Stray Stitches said...

I'm like Megan and fall into the "scared" category. When I start reading all of the info my eyes sort of cross and my mind sees "blah, blah, blah". But your information helps to straighten out my eyes and things don't seem quite as scary - thanks! said...

I am still learning the whole html thing. I was so proud when I created the twitter and facebook buttons for my blog! Also I have a blog award for you on my blog!

Babes about Town said...

Really useful post. By the way I really like your header as well as the simple organisation and variety of your blog. Have bookmarked to catch up some more.

Thanks for sharing your story on my SITS day. It's weird how people get hung up on gender etc and forget about the simple miracle that is creating life! Your sister has five miracles - good on her!

Grams said...

I learned HTML way back when we programmed web sites by hand. It is helpful to know it, although I rarely use it any more.

elizabeth @ twelvecrafts said...

Oh html . . . I have a love-hate relationship with it. Love it when I can figure it out. Hate it (and you know how I dislike using the "h" word) when I'm missing one of those silly little < or > or " and I can't figure out where I'm missing it, so I have to look through the entire code. Argh!

Blogging tips