Tutorial: HTML

I've been doing some tweaking on my tumblr layout, so I thought that this would be something neat to post. Please keep in mind that I don't know everything about HTML, but I have been playing around in the sandbox for a few years.

HTML is a language. In fact, it's a particularly picky language, so double-check all your spelling and 'grammar'. In fact, most of the time (like in the English language), the errors are in the 'grammar' of your HTML. That being said, learning the 'grammar' isn't all that difficult.

To begin with, in HTML, we use these things called 'tags'. Essentially, we have a start tag and a closing tag. Usually, it looks something like this:

<tag></tag>

In this case, <tag> is our start tag, and </tag> is our closing tag. Note that the closing tag is identical to an opening tag, except the closing tag has a forward slash.

Now, there are many, many, many types of tags. What if you wanted to use a bunch of different tags to make, say, a paragraph with some of the text bolded and have an image that links elsewhere? Well, you'd have to use a tag to bake the text bold, and image tag, a link tag, and maybe even a paragraph tag! But in what order would you open and close the tags? The answer - close the tags in the reverse order that they were opened.

What?

To clarify this, I'd like to make an analogy. Opening and closing tags in HTML is like a simple sandwich. Let's think about the sandwich in layers. If you stick a toothpick through your sandwich from top to bottom, the layers the toothpick in order are the top slice of bread, the butter that was spread on the top slice of bread, meat, butter spread on the bottom slice of bread, and the slice of bread on the bottom. Okay, so what does this have to do with anything?

<top bread>     |  <tag1>
<top butter>    |  <tag2>
   meat         |   text
<bottom butter> |  </tag2>
<bottom bread>  |  </tag1>

In this example, we opened tag1, then tag2. We then closed the tags in the order of tag2, tag1. Get it?

Let's look at an example with three tags, say some text that is bolded, italicized, and stricken through (if you're using strikethrough in your blog posts in Blogger, use the <s></s> tag instead of <del></del>).

<b><i><del>Some text</del></i></b>

This would look like...

Some text

So to return to my original example of a paragraph with bolded text, an image, and a link, the code might look something like this...

<p>Some text <b>here</b>. Oh, here's a picture!
<a href="http://www.google.ca><img src="http://something.com/pictureurlhere.jpg"/></a></p>

The result would look like this...

Some text here. Oh, here's a picture!

I know, it's clear as mud, isn't it? First we opened the paragraph tag, which means we have to close it last. Next we opened the bold tag. Now, between where we opened the bold tag and where we want to close the bold tag, we have no other tags which are open. Which means that we can just go ahead and close the bold tag after the word "here". We then opened the link tag, then the image tag (the image tag does not require a closing tag). Currently, the only tags we have open are the paragraph tag and the link tag. So we need to close them in reverse order — the paragraph tag was opened first, so it needs to be closed last, and the link tag was opened last, so it should be closed first.

If you'll notice, the link tag in my last example looks a little different to the other tags I've shown you.

<a href="http://www.google.ca">Link text here</a>

This is an example of a tag with an attribute. The basic tag is <a></a>, that additional bit inside the first tag is called an 'attribute' There are a bunch of attributes you can give to tags, and each attribute has a set of values. The value is always surrounded by double quotation marks. You can only have one value per attribute, and each attribute can only be used once in each tag. My favourite attribute would have to be the style attribute. You can use this attribute to add CSS to a tag to do some neat things, like changing colours and fonts, or even move things around, which I'll talk about in a later post.


--- v ---


Well, there you have it. Hopefully it wasn't too confusing. If you have any questions, please don't hesitate to leave me a question in the comments, or go check out W3Schools' HTML Tutorial for a little more clarification :)