Tutorial: HTML Basics

[Toxikr3]

Hi guys, I thought I'd write up a simple HTML tutorial just cause I was bored ^_^
It is not that long since there aren't any huge paragraphs to read, just some simple explanations.
If you find anything wrong please post ^_^

**Index** - Press CTRl + F - Type in the code to get to a topic
Name      #
- 1.0
- 1.1

Defines the title of a web page. Any thing between these tags will show up at the very top of the webpage. Eg. You have this site open, if you look at the very top you will see MMORPG Maker. That is the Title of this document.
When you get a bit more complicated, you might use the HEAD tag to put your CSS inside or your JavaScript inside, I won't be discussing them in this tutorial however.

[1.3]

To make sure you aren't lost, I'll review what I talked about.
You start a document by

Inside these are the HEAD tags,

Inside the HEAD tags are the TITLE tags

It doesn't matter how you lineup your tags, the web browser will read it all the same. It is good to indent when nesting, its easier to read and understand. The same code above can be written like this

And the browser would show you the same thing. But now it looks bad, and harder to understand for us, so we nest them.

[1.4]

The next tag is the important tag.
This tag holds pretty much all your text, images, paragraphs and what not.
This tag comes after the HEAD tag.

So, that is how everything looks in its most basic layout. I like to write
on one line because titles are usually that long. You can write however you like.

Ok, so we have learned the basic, no let's get some text on the screen?
These next tags go inside the BODY tag. Most of your tags will be inside the BODY tag.

[1.5]

Lets start from the top. When you write a report for school/work you first, write the heading, then you write your paragraphs, then you bold italics and underline your text, then you add some images to make it look pretty.
So, that is the order I will tell you about the tags.

To write a header on a web page, you use:

Now, there are variations of these tags. The H1 tag will write the biggest possible header, relatively speaking.
These are the tags for writing headers:

In this, H1 is the biggest font size, and H6 is the smallest font size. Simple isn't it?

Now, heading is done, we will write our main text

This tag is used to write paragraphs on a web page, thus the letter “p”
Not a lot to talk about this tag. Its simple, any text inside this would be written in a paragraph like structure.

[1.6]

Now, to emphasis your points in your paragraph you'd use bold,italics, and underline. To that using tags is quite simple.
Bold
Italics
Underline
```
[u] [/u]
```
Very simple. But to avoid bad habits in the future, try nesting them also.
Eg.
```
**I am bold and [u]underlined[/u]**
```This will print
**I am bold and underlined**

However this could also work

```
**I am bold and [u]underlined**[/u]
```
See the difference? First one is the good way to write it.

[1.7]

Ok here are all the tags together to create a small web page. This is very simple.

```

       

# Welcome

### Hope you enjoy your stay

        This is my webpage, I don't really know what to **talk** about so I will [u]_simply_[/u] write random stuff

```
[1.8]

Ok now that you have a header, paragraph and some emphasis, let's let to add images.
The tag to add images is:

```
```
See how there is no ending tag for this?

Inside the “” goes your location of the image and name. If your image is in the same directory as your page, you simply write the name of the image with the extension. Eg

Your page is in c:\MyFolder
And your image is also in the same place, the image is a “.gif”, and is called “picture”
So you write

```
```
If the image was in C:\ you'd write

```
```
An important attribute of the “img” tag is “alt”
“alt” is the alternate text, if for some reason the image does not load, the text will be used in it's place.
To use it:

Simple enough ^_^

Try using the "img" tag with the basic layout.
Other attributes for the "img" tag:

```
align - top
          bottom
          middle
          left
          right
eg.
[img][/img]

width/height - Can be in pixels or percentage
eg.

[img][/img]
or
[img][/img]

NOTE: They are not the same.

```