- Joined
- Jun 15, 2007
- Messages
- 1,634
- Reaction score
- 5
Okay so now you wanna get into website programming and the first thing you should start learning in my opinion is HTML.
This is a small tutorial for people that want to get started with HTML.
Chapter 1 - Getting started...
First off, open any text editor. I will be using Notepad.
Create a new document. And write the following codes:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Okay so what are these codes? I'll start with the <html> tag.
The <html> tag tells the browser that it is starting an html document. You must always have this tag in the beginning of a html document.
The <head> tag. Everything between <head> and </head> will not show up in your browser.
The <title> tag is between the header tags, what does it do? You write a text between the title tags and then it will display it to the top left of your broswer. For example... OtLand's website title is "OtLand" as you can see.
Now we have come to the <body> tag. The <body> tag is the tag that displays the website content for example, pictures, text, media etc... So that means you have to add text or whatever between the <body> tags to make it display it on your website.
And now we can see the last tag in our code, the </html> tag. As you can see on our code, we have 2 of every tag, like: <html> </html>, <head> </head> etc... And what does this means? I'll show you.
The first tag opens the tag, means that the broswer will understand that you will be starting that tag.
This is what we call a start tag:
<html>
And this is what we call an end tag:
</html>
It's the same with the other tags, you open with <> and close with </>. Now we are gonna add some colors and text into our website since we have just written some codes, we haven't added anything yet.
Okay remove everything from your document and copy this one and paste it in your document.
<html>
<head>
<title>My website</title>
</head>
<body bgcolor="grey">
<p>Hello, this is my first website.</p>
<br />
<p>This is a second line.</p>
</body>
</html>
Save this as Index.html file by going File --> Save as... Write Index.html on the filename form and on the format form choose all types. You can save it anywhere you like but I would suggest you to save it in a new folder. Now you open this document from where you saved it with either Firefox or Internet explorer (whatever you use) and your website will appear with a grey background and with two sentences.
Okay so what have we added now? Let's take a look at the first sentence we edited.
<title>My website</title>
As I've explained before, text between the title tags will show up as a website title, "My website" in this example. Not hard to understand at all ;p
We also added a few codes and text into the body tag, let's check it out.
<body bgcolor="grey">Hello, this is my first website.
<br/>
This is a second line.
</body>
Remember, everything between body tags will be displayed in your website.
Ok I've added bgcolor="grey". Bgcolor means background color and = is an equal sign which means I will put a value in that code. And I chose that value to be grey so the hole code is bgcolor="grey" which will make the background color of the website grey.
We did also put some text between the body tags which means that text will be desplayed in your website but we did also put a <br> tag between the two sentences and this tag doesn't have an end tag. Well there are some tags that doesn't have an end tag such as this one. Anyways... The <br/> tag is used when you want to end a line and start on a new row like we have done in this example.
You have now learned how to put some text and color background into your website (I hope).
I will improve this tutorial as soon as I've got time for it, this was just some very basic html writing.
If there is something you don't understand in this tutorial let me know.
Feel free to comment this tutorial as well.
Thanks.
This is a small tutorial for people that want to get started with HTML.
Chapter 1 - Getting started...
First off, open any text editor. I will be using Notepad.
Create a new document. And write the following codes:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Okay so what are these codes? I'll start with the <html> tag.
The <html> tag tells the browser that it is starting an html document. You must always have this tag in the beginning of a html document.
The <head> tag. Everything between <head> and </head> will not show up in your browser.
The <title> tag is between the header tags, what does it do? You write a text between the title tags and then it will display it to the top left of your broswer. For example... OtLand's website title is "OtLand" as you can see.
Now we have come to the <body> tag. The <body> tag is the tag that displays the website content for example, pictures, text, media etc... So that means you have to add text or whatever between the <body> tags to make it display it on your website.
And now we can see the last tag in our code, the </html> tag. As you can see on our code, we have 2 of every tag, like: <html> </html>, <head> </head> etc... And what does this means? I'll show you.
The first tag opens the tag, means that the broswer will understand that you will be starting that tag.
This is what we call a start tag:
<html>
And this is what we call an end tag:
</html>
It's the same with the other tags, you open with <> and close with </>. Now we are gonna add some colors and text into our website since we have just written some codes, we haven't added anything yet.
Okay remove everything from your document and copy this one and paste it in your document.
<html>
<head>
<title>My website</title>
</head>
<body bgcolor="grey">
<p>Hello, this is my first website.</p>
<br />
<p>This is a second line.</p>
</body>
</html>
Save this as Index.html file by going File --> Save as... Write Index.html on the filename form and on the format form choose all types. You can save it anywhere you like but I would suggest you to save it in a new folder. Now you open this document from where you saved it with either Firefox or Internet explorer (whatever you use) and your website will appear with a grey background and with two sentences.
Okay so what have we added now? Let's take a look at the first sentence we edited.
<title>My website</title>
As I've explained before, text between the title tags will show up as a website title, "My website" in this example. Not hard to understand at all ;p
We also added a few codes and text into the body tag, let's check it out.
<body bgcolor="grey">Hello, this is my first website.
<br/>
This is a second line.
</body>
Remember, everything between body tags will be displayed in your website.
Ok I've added bgcolor="grey". Bgcolor means background color and = is an equal sign which means I will put a value in that code. And I chose that value to be grey so the hole code is bgcolor="grey" which will make the background color of the website grey.
We did also put some text between the body tags which means that text will be desplayed in your website but we did also put a <br> tag between the two sentences and this tag doesn't have an end tag. Well there are some tags that doesn't have an end tag such as this one. Anyways... The <br/> tag is used when you want to end a line and start on a new row like we have done in this example.
You have now learned how to put some text and color background into your website (I hope).
I will improve this tutorial as soon as I've got time for it, this was just some very basic html writing.
If there is something you don't understand in this tutorial let me know.
Feel free to comment this tutorial as well.
Thanks.
Last edited:
