Simple HTML tutorial - Multiple posts

Hey, I made a simple HTML tutorial. Hope you like it!
I hope you don't get tired of the text... xDLets start...1. The Basics + TextTo begin an HTML page, start with the HTML tag.

<html></html>

The </html> tag closes the page, use at the end.
That's everything we have for now, but we need more then just an empty page with no title.Next, the head of the document. Mostly where the data is stored. For now, no data is stored.

<head></head>

You must include some tags in the <head> code, others the afflicated script doesn't work.
The title of the page (displayed in the title bar of the browser) is inside an <title> tag. To display a title correctly, use the following code:

<html><head><title>(Yourtitlehere)</title></head>

We don't close the HTML document, we need more in the document.Next, text.
Start the text with an <body> on the document.
Then, put <h#> in it.
Here are the <h#> codes:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

Each tag closes with an </h#>.
How bigger the number, how smaller the text. Lets put the biggest in our document...

<html><head><title>(Yourtitlehere)</title></head>
<body><h1>This is an example page</h1>

This will display
This is an example page
on the document, exactly that big. We don't close the body tag, as we still need the body.Next, text under the <h#> tag.
Just type some text, it will display normally, but if we use this:

<html><head><title>(Yourtitlehere)</title></head>
<h1>This is an example page</h1>
Hello, this is an example page.
This doesn't work correct.

It will display: ''Hello, this is an example page.This doesn't work correct.''
If you press Enter, HTML doesn't recognize it as a letter. That's why the
tag exist.
If we do:

<html><head><title>(Yourtitlehere)</title></head>
<body><h1>This is an example page</h1>
Hello, this is an example page.

This does work correct.

It displays this:
''Hello, this is an example page.
This does work correct.''
So works the
tag, but
doesn't require an close!
You now know text, lets go to step 2.2. FormsCreate a form with the <input> tag.

<input>

This is an more advanced code, you will need to do several things to make it display something...2.1 - Button
To make an button, use this:

<input type=button value="Button">

This will display an button with the text ''Button''.
Value is what the text on the button will be. You can make it anything, but you must use the "(your text here)".
But, buttons can have another option! You can make them run a script, but that is explained in my JavaScript tutorial.2.2 - Input field
To make an input field, use this:

<input type=text>

That is enough. No extra things needed.
If you want to make a password field, use this:

<input type=password>

That is enough too. This will display big dots when typing your ''password''.2.3 - File upload
If you want an user upload a file, use this code:

<input type=file>

Now the file doesn't have an limit. To make an size limit, use:

<input type="hidden" name="max_file_size" value="500">

A value of 100 will allow a file up to 100kb.
But, how do you upload the file?
Mostly it works to press Enter while having the type-cursor in the file input field.
Now you know how to let the user select a file.2.4 - Radio buttons
To create radio buttons, use:

<input type="radio" name="(yournamehere)">

But this will only display a radio button, nothing else.
To display text before an button, use:

Hello! Select this <input type="radio" name="selectme">

This will display:
''Hello! Select this'' with an radio button after it.
Now you learned how to make radio buttons!2.5 - Drop-down menu
To create a drop-down menu, use:

<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

You can add more options by the <option> tag.
Now you know how to create a drop-down menu.I will continue in my next post.

Here's two websites which would compliment it.http://www.w3schools.com/http://www.tizag.com/Both have excellent tutorials on practically EVERY website publishing language.

Replying to #2

I know them both, but I wanted to make one too :(

Really good when I need to find out something (usualy PHP) and there is php.net as well for PHP but I getting off-topic.If you want, you could make one. Just make a template for the site, set up the structure and then start to fill in topics.

Replying to #4

I only do HTML, JavaScript and CSS.

you're breaking the rules already. tags should be in lowercase, not upper case. don't teach if you cant follow good practice yourself.

Replying to #6

Well... I learned those tags in uppercase. I put them in lowercase...

Uppercase tags are non valid as well, a good way to test a website is by passing it through the W3C Validator:validator.w3.org/I basically only do HTML and PHP.

Replying to #8

Uppercase HTML works good in Webs... And it works good for my server (Easy File Management Web Server).Post Merge: [time]1266257522[/time]

Replying to #8

A page of mine that does not work (I don't get the JavaScript prompt working, it suddently stopped working :( ):
http://validator.w3.org/check?uri=http%3A%2F%2Fflippiemp3.webs.com%2Fs%2Fmembers%2FYoshi2889%2FmanagerINDEX.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654

Replying to #9

it works, yes, but it is incorrect.

www.w3schools.com is the site to go on. I learned HTML there and from a huge book that had 1000 pages! Whcih included JS and C++.

Loonylion · #10it works, yes, but it is incorrect.

Whatever. Corrected the problem.

xhtml is unforgiving with caps :3

By the way, your site is down. Also if your making a website you can change your url fromhttp://something.mywebhost.com/username/indexpage.htmlto something with a smaller url such as http://mywebsite.nl.am for free. Use: http://freedns.afraid.org/

Replying to #14

Nah, is my Homebrew Host down? Gonna check it, maybe something happened...EDIT: Homebrew Host works perfect here...

weird, I canoot access it without using a proxy.

Replying to #16

Maybe it's your computer...