[theAbsolute]

With this tutorial I will start my HTML tutorials, and later I will continue with CSS and more.
I will try to make it really understandable, and I am going to start with the basics, as someone who never learned it ever, can understand it.

HTML totorial 1

1.0
I will start with a boring part, but I will be short.
What is HTML? Well, we can say, it is just pure text written with the language of symbols which functions we use to go through that text..
HTML stands for HyperText Markup Language. It will serve us only for making structure of the website, and not for making its style (design, colors..etc) as that is the job of CSS.
Tip: We can see HTML code of every page on the internet, just using the browser. (Go to some web page and than: RMB -> View source code, or Edit -> View source and similar..depending of the browser you are using)

Now, I will start straight with HTML coding, just before that I will say a couple of words about programs we will be using.
The good thing is that you don't need to pay for any program, you can use just Notepad, or what I suggest, Notepad++. Download link
Of course, there are some commercial ones like Dreamweaver, but even if you have it, I suggest using Notepad, because you will learn the coding faster.

Now let's start with some real thing!

1.1

Open your notepad and let's start making a webpage.

For beginning, we are going to learn how you should save your files.
Go to File->Save as
type anything you want, but you must give it the extension .html! For example: mywebpage.html
In Save as type select menu, choose "All types".
That's it. Now you can see that it have the icon of your browser and it will be automatical open by it, and not with notepad or some other text editing program.

1.2
Once, you learned how to save a file, let's open a new document in notepad, as we are going to write our first codes in there!

Start with pure text. Type anything you like,for example: "my first website content", and save it. When you open it with your browser it will be shown just as it is.
So now, I am going to show you what are the HTML tags, elements and attributes and how they affect on the pure text in our page content.

We have this in our page:

Code

my first website content

Now let's add heading tags, like in example below:

Code

<h>my first website content</h>

<h> and </h> are called tags.
Save it, and open it with browser to see the changes.
The letters will be bigger, because 'h' tags stands for the 'heading'.
You can notice that we have a symbols <> with letter in it, and those symbols represents one HTML element.
So <h> is one tag and </h> is the other, and they both are making one element, in this case the 'heading'.
Also you can notice that, the second one has '/' before the 'h' letter, and that is because it is the closing tag, and logical, the first one is the opening tag.
So the <h>my first website content</h> is one HTML element.
That is basicly how the HTML works. Just by different tags and elements.
Now I am going to introduce you to some core HTML tags, which every web page have.

1.3
The core HTML tag is html tag. In this tag will be placed whole webpage content.
So, in our example it will look like this:

Code

<html>
my first website content
</html>

or

Code

<html>
<h>my first website content</h>
</html>

if you liked the heading tag ;)

There are two more main tags which you will always have to put.
The head tag and the body tag. See the example below:

Code

<html>

<head>
</head>

<body>
</body>

</html>

That's it. This is the main structure of the website, and we will discuss now what is their use.

1.4

There is html tag, and everything is going to be placed inside of it. That's the rule.
The difference between head and body tag is that, in head tag we will put server side codes, and in the body tag client side codes.
For example, in the head tag we put the title of the page or meta keywords and in the body tag we put webpage content.
So, basicly, in the body tag, we put what we want our visitors to see on our website, and in head tag, just the server instructions about it.

Our example now looks like this:

Code

<html>
<head>
</head>
<body>
my first website content
</body>
</html>

Still looks the same in the browser, but now you have learned how it should be coded properly!

1.5

Now let's learn some other tags.

We already mentioned heading tag. I will know tell you more about it. There are 6 heading tags.
<h1></h1>
<h2></h2> etc..
The difference is only in size. First is the biggest, and sixth is the smallest one. You can experiment with it and see how it works.

Now add some other text below your heading tag and add <p></p> tag around it. So now, you have:

Code

<html>
<head>
</head>
<body>
<h>my first website content</h>
<p>some other text</p>
</body>
</html>

p tag stands for paragraph tag. You will notice, it will be always smaller that the heading text, and we use it, logical, for paragraphs in our website.
If you want to add another paragraph, just make a new p tag and put the new text inside of it, for example:

Code

<html>
<head>
</head>
<body>
<h>my first website content</h>
<p>some other text</p>
<p>a new paragraph</p>
</body>
</html>

You can notice that new paragraph is in a new row. Now try without the tag symbols, and it the all text will be in shown in browser, in one row.

Very important rule: You must know how to open and close the tags.
I told you before that everything is going to be inside the html tag, so see how there is the opening html tag on the beginning of the page, and one at the ends! So jutst remember, when you open some tag, close it after you finish with it's content. If you overlap tags, the page will not look like you wanted to, and it's hard to notice the error you misstyped.

Thank you, that it for now. You know the very basics on HTML coding. I will write a second tutorial very soon. If anything is unclear, be free to ask.

This is my first tutorial ever, I hope you will show comprehension. Thanks.