Understanding how HTML works

Now that we have seen how bulletin board code wraps tags around strings of text to format it, let's talk a little bit about HTML.

This HTML lesson will show you how to format a little HTML in blogs like this one and blog comments.

After you start to learn HTML, you will start seeing it popping up all over the web in odd little corners.

There are plenty of places on the web where you may want or need to format a little bit of text using HTML code rather than bulletin board code, places like blog comments (where it may say something like "HTML ok" as a caption to the little window, and you may see other commenters with bold, italic, or quote sections in their comments.

You also would use it in most blogs, like this one and in Wordpress.

Make a section bold in an HTML blog or comment like this: <bold>

Make a section italic in an HTML blog or comment like this: <italic>

Put quotes in a separate section:

<blockquote>This is the section I want to quote from another source. How it will look depends on whether it is permitted and how the formatting is set up. Some comments do not permit blockquotes. Sometimes the formatting is set so you can barely see the difference.</blockquote>

Looks like this in this blog:

This is the section I want to quote from another source. How it will look depends on whether it is permitted and how the formatting is set up. Some comments do not permit blockquotes. Sometimes the formatting is set so you can barely see the difference.

Don't be surprised if after you type one thing in a blog and save it, it ends up looking like you wanted, but the code looks completely different. Most blog types have HTML converters that will take several different types of code (there's more than one way of formatting) and make them all into one system. Sometimes this works, but sometimes it seems like the smarter they make these little text editors, the more dumb choices they make.

Try that and see how it looks in blog comments.

Read more...

Before HTML, there is bulletin board code

I want to start off easy.

Before we get into the sort of real HTML you've been dreading, the kind you know you need to do but have been avoiding, let's look at something easier. Let's just look at formatting text in comments or on a forum that permits you to use bulletin board code. Most forums use this code, which is based on a simplified HTML. You can't do as much with it, but you could do some cool things if you could figure out how.

Everybody else seems to understand, right?

If you know this already, you're ahead. If you don't ever post on a forum, you can skip ahead, or you can just read it through before going on.

The first thing you need to remember is you are going to be formatting things, and you will need to wrap the things you want to format in tags.

There is a start tag and an end tag for everything you want to do.

You start a section of bold text with a [b] and end it with a [/b]. Like this: [b]bold[/b].

See how the 'end' tag has that forward slash in it? That's what makes it a end tag.

You start a section of italic text with a [i] and end it wih a [/i], like this: [i]italic[/i].

You change the color of a word like this: [color=red]color[/color].

Make a link show up as http://google.com like this: [url]http://google.com[/url].

Make a link show up as text: [url=http://google.com]text[/url].

Make an image appear: [img]http://yourimageurl[/img]. Your image must be online for this to work, either on a site you control or on a free webhost.

Make an image into a link to another site: [url=http://google.com][img]http://yourimageurl[/img][/url].

There's more, but for now that's plenty. If you need to do more, you should follow the link below. If you want to do a lot of exotic stuff on a forum that only permits bulletin board code, you're going to be frustrated, because it is limited.

But you will be able to make your text stand out a bit now that you understand it.

More on bulletin board code from Wikipedia.

Read more...