FileMB

So you want to learn HTML but think it’s way too complicated for an average dummy like yourself? Well I have good news for you — HTML is a lot easier than people think it is. In fact, I could teach you basic HTML tags in about five minutes even if you don’t have the slightest idea about how websites work. But why should you bother learning HTML? The answer is simply because it’s useful to know even if you don’t make websites — for example sites like Myspace.com let you use simple HTML to format your messages with fonts, colors, and sizes.

In this tutorial you will learn about the following HTML topics:

• Basic text formatting — Bold, Italics, Underline, etc
• Links and images
• Advanced text formatting
• Extra Stuff

Basic Text Formatting

Before we get started, it’s important to understand how HTML works; to format a word or sentence you simply wrap it with a “tag” — that means that you put this “tag” before and after the words you want to format. So what’s a tag? A tag is something that goes between these the “greater than” and “less than” symbols: < >

Let’s start with a simple example. Say you want to post this sentence as a comment on a site that allows HTML:

Happy Birthday Tim, you didn’t tell me that your birthday was today!

Here’s what the HTML code for that sentance would look like:

<b>Happy Birthday Tim,</b> you <u>didn’t tell me</u> that your birthday was <i>today!</i>

Now before you freak out and give up let’s take a moment to analyze the text; the tag “<b>” is used for bold text, “<u>” is used for underlined text, and “<i>” is used for italicized text. Notice that <b> and </b> are wrapped around the words “Happy Birthday Tim,” which makes that part of the sentence bold. Make sense? Great!

But what if you want something to be bold AND italicized? Easy!! You can put tags within tags like this:

<b><u>Happy Birthday!</u></b>

which will look like…

Happy Birthday!

There is no limit to the number of tags you can use on a single section of text, just make sure you “close” each tag or you’ll have problems. “Closing” a tag means putting the second half, like </b>, at the end of the text you’re formatting.

One last tag to learn right now is the <p> and </p> tag — this tag can be wrapped around an entire paragraph of text to format it as a paragraph with space above and below the block of text. Congratulations! You know basic HTML!

HTML Links & Images

You know how to make your text look pretty, but what if you want to insert a link to another web page or an image from the internet? That’s also relatively easy to do! All you have to do is use a new kind of HTML tag.

Before we move on, let’s learn something new about tags. Tags can be more complex than just one letter. The technical term for extra information is an “attribute” but you don’t need to know that. Study this new kind of tag and see if you can figure out how it works.

<p align=”center”> Hello world, this text is centered! </p>

If you guessed that this text is a centered paragraph then you’re right! This is just a <p> tag with extra information in the first part (note: you do not need to include this extra information in the closing tag). Now let’s take a look at what you really came here for — link tags:

Check out <a href=”http://www.filemb.net”> this awesome site! </a>

Notice the basic tag is <a> and </a> — this is the tag used for links. However, as you know, a link needs to know what page to take a user to when the link gets clicked — that’s what the “href=” part of the tag is for. You don’t need to know what href means or why it’s there, just know that you use it to make a link. You can replace the text between the quotes to create a link to anywhere on the internet! Keeping in mind the rule we learned earlier, you can use text formatting tags like <b> and <i> to format your links.

Links are great, but what if you want to incorporate an image into your “post”? This is also relatively easy but you need to understand how images on the internet work. You can’t post an image on your computer in an HTML page. Why? Because the image is on your computer which other people can’t access! Before you put an image in an HTMl page you need to “upload” your picture to a server that IS available on the internet. I have good news for you — there are a lot of free websites that let you upload images. I recommend ImageShack.

Advanced Text Formatting

So far we’ve learned how to make stuff bold, italicized, or underlined. But what if you want to do something more fancy like change a font or color? That’s where the <font> tag comes in. Just like every other tag we’ve looked at so far, the <font> tag and </font> tag goes before and after the text you want to change. Let’s say you want to make text red. You would use the “color attribute” which would look like this:

<font color=”red”>This text is red!</font>

Likewise, you can change the size of text with the “size attribute”:

<font color=”red” size=”4″>This text is big!</font>

Here’s what it looks like:

This text is big!

But what happens if you want to change a font? All you need to do is use a “face attribute” just like color or size. However, there are some drawbacks to changing the font! First of all, you need to know the exact name of the font you want to use. For example you could use <font face=”arial”> for the font Arial. There is a flaw though — even if you get the name of the font right, the font will ONLY show up for a user IF their computer has that font installed! So it’s a good idea to only pick common fonts that most computers come with.

Extra Stuff

So now you know how to write enough HTML to create a simple page! But let’s take a look at one more tag that might help you. Let’s say you want to move something down the page like when you press “Enter” in a word document to space things out. You can’t just put white space in your HTML code because white space is completely ignored in HTML. To insert a line of white space you use the <br> tag — unlike other tags that have two parts and go around certain text, the <br> tag is only used once and doesn’t need a closing tag. Similarly, the <hr> tag doesn’t need a closing tag and it does the same thing as <br> except it makes a horizontal line dividing the page.

Congratulations! You’ve just learned how to create a simple web page using basic HTML formatting. There’s so much more that hasn’t been covered in this tutorial, but hopefully you know enough now that you can learn on your own.