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?
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!
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>
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.
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 http://www.google.com your link leads to something like youraddress.blogspot.com/www.google.com -- 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="http://iamjustlu.blogspot.com">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="http://iamjustlu.blogspot.com" target="_blank">This link leads to just Lu and opens in a new window</a>