[Guide] HTML: the basics (for beginners)

**egyptik** · 08-02-2009

Yo Guys! I'm new here, and this is my first tut. (also my first topic).

This are just the very basics and if you guys like it then I might learn you how to build it out to a template. (Using HTML, CSS and Photoshop).

HTML tut Part I

Start by opening up Notepad or another simple text editor, and type (or copy paste) this:

Each of these little lines are calles tags. There’s a start and end tag. To make a end tag, simply put a “/” before the begin tag (without the “”).

Most tags (not all) have an end tag. I can hear you thinking.. ‘What do tags do?’ Well, they explain your browser how and what to view. You just told your browser: ‘This is the begin of a HTML document’ (<HTML>) and ‘This is the end of a HTML document’ (</HTML>).

But ofcourse you want to do some more then telling your browser that it’s a HTML document, so let’s add some more.

Each HTML document needs the <HEAD> tags.

Next, add the <TITLE> tags to your document.

Now, add the <BODY> tags between the </HTML> and </HEAD> tags.

What you just made is the skeleton of a HTML document. Let’s continue with adding a title to your document.

<HTML>
<HEAD>
<TITLE>Your title here!</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Now, let’s save it before your computer crashes or an angry 3-headed next-door-Gnome kills your computer. Don’t save it as a text document, but as a HTML file. Name it ‘index.html’ and put it in a new folder.

Let’s continue by adding content. Content has to be placed between the <BODY></BODY> tags.

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY>
Put some text here..
</BODY>
</HTML>

If you want to see it, save your document again and open it in your browser. If you have it opened already then you can view your newly saved file by hitting the refresh button.

As you can see, it’s quite empty.. Just a blank page with a line of black text. So the next thing we’r going to do is add a background color.

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Put some text here..
</BODY>
</HTML>

The “#000000”stands for the color of the page. #000000 = black. You can find some more colors here: HTML Colors

If you don’t want to have a color as background, you can also use an image:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”images/yourimage.extention”>
Put some text here..
</BODY>
</HTML>

It’s important that you setup your maps the right way. Lets say you u=just saved the index.html file in a new map called ‘website’ then in the map ‘website’you must have your index.html file and a new folder called ‘images’ where you put your background image in. If you place the images folder somewhere else, then your browser will not be able to find it.

Now let’s go back to a normal, white screen.

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#FFFFFF”>
Put some text here..
</BODY>
</HTML>

Let’s add some text decoration. This is pretty much like the BB-codes you use on this forum, but you have to use ‘<’ and ‘>’ instead of ‘[‘and ‘]’.

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Put some text here..
</BODY>
</HTML>

So, Put = now Bold, Some = italic and Text here = Underlined. I don’t think I have to tell you guys where to put the end tags, since you have to put them on the same position as you’ll use with BB-codes. You can also combine those tags:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Put some text here..
</BODY>
</HTML>

As you can see, I’ve started by placing the begin tag first, but didn’t end it as first, but as last. This is a rule you must ALWAYS apply. For e.a:
<THIS><THAT></THIS></THAT> is WRONG
<THIS><THAT></THAT></THIS> is good
I continue without the decoration codes we just used. This is how to change the font size.

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Put some text here..
</BODY>
</HTML>

This will make your text bigger. Here are some sizes:
1= very small
2= small
3= normal
4= medium
5= big
6= very big
7= huge

Let’s explain some things. First, a TAG tells the browser that it has to do something. Second, a option that is standing in the TAG tells him how to do it, and last, a value in the TAG tells him how to do it. For example, in: : is the tag, SIZE=”” is the option, and 6 is the value. If you don’t add a option and/or value to the document, then the browser will use the standard value’s. The standard fontsize is 3
Now some other things. Let’s say you want to place this text on your page:

Yo!
Wazz
Up?

And you paste it between your body tags like this:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Yo!
Wazz
Up?
</BODY>
</HTML>

Then it’ll appear like this: Yo! Wazz Up?

Then how can you add a Break? Well, you can do that using the break tag: 
the Break tag is one of the tags that has no endtag. Let’s add him to the code:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Yo! 
Wazz 
Up?
</BODY>
</HTML>

Now your text will appear as it was ment to. Another tag like break, , wich does have an endtag, but you don’t have to use it. The only difference between and is that will not only add a break, but also an empty line.

Apart from that you don’t use end tags when using and , there is something else strange about those tags. You can only use them once between text.

For e.a:

A word Another word

Will look like:

A word
Another word

But A word Another word

Will also look like that.

So how do you add more then 1 empty line? Well, there is a usefull code wich will make your browser add a space:   (Non Breaking Space)

plaching 10 of those codes after eachother will have the effect of pressing your spacebar 10 times. You can also use it to add more blank lines. To do so, use it like this:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
Yo!
 
 
 
Wazzup?
</BODY>
</HTML>

Placing   3 times has the effect of pressing enter 3 times.
Next, a very useful tag: <CENTER></CENTER> I think you’ll understand what it does.. everything between those tags will be placed in the center of the page.

Let’s add an image to our page. The Image tag is <IMG> the option SRC tells the browser he has to find a image, and the “image.gif” tells him the location of the image. So if you make your code like this:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
<IMG SRC=”image.gif”>
</BODY>
</HTML>

Then you tell the browser to open the image.gif in your root folder. So, still with the same map structure we just had, that isn’t right. The image is in our image folder, so let’s point our browser to it:

<HTML>
<HEAD>
<TITLE>Your title here</TITLE>
</HEAD>
<BODY BGCOLOR=”#000000”>
<IMG SRC=”/images/image.gif”
</BODY>
</HTML>

This will tell the browser the correct location.

Well, this is where I stop for today. If you guys like it I'll add another part later about adding links, making lists, puting your site on the web, etc.

I might also make a serie or tut, to start with this very basics, and learn up to making your own template. But let's see wether you guys like it or not first.

P.S

Sorry for my bad english!!!

**lanman92** · 08-02-2009

Imo, you should have gone and taught the proper way to do it(xhtml standards). Looks nicer and it's more proper for today's times. But, good post otherwise.

**egyptik** · 08-03-2009

I know, but I did it like this because it's a bit clearer for beginners.

**Mr. Clean** · 08-04-2009

Pretty sure i saw this on a site like 5 years ago...but good job bring stupid simple tuts, sure it helped someone.

**egyptik** · 08-05-2009

Originally Posted by [Norr]

Pretty sure i saw this on a site like 5 years ago...but good job bring stupid simple tuts, sure it helped someone.

Impossible, I completly wrote it myself..

**~~momzor~~** · 08-15-2009

thank you brother

**skatrdie94** · 09-27-2009

Not bad for a first guide ;D

**Hallowsend** · 09-28-2009

I do have a guide very similar to this on a different website, a competitor in fact.

This guide is of good standards. Good job

Shout-Out

User Tag List

Thread: [Guide] HTML: the basics (for beginners)

Thread Tools

Search Thread

[Guide] HTML: the basics (for beginners)

Similar Threads

[Guide] Setting Up Glider For Beginners

[MAYA TuT] Guide 1: The Basics - How to Model

[MAYA TuT] Guide 2: The Basics - How to Shape

[Guide+Info] The Battle for Sun's Reach

Tanking For Dummies Part 1: The Basics

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino