----------------------------------------------
          "HTML From The Ground Up"
----------------------------------------------
 C/O :: Dr4g of DynamicHell Development Team
----------------------------------------------
 http://dynamichell.org | irc.dynamichell.org
----------------------------------------------

---------------
Introduction::
---------------
HTML is a language which consists of 'tags' 
It is not a programming language, however it is a scripting language.
HTML stands for HyperText Markup Language
And it is used all over the internet, it is the language used to create websites.
It turns scripting tags, into objects that appear on a screen(website).

The Following is basic HTML document, whihc i will explain all setions of.
The general syntax for a tag is <tagname>Insert stuff here</tagname>
you see the relevance of the / in the second tag?
It lets the computer know where to begin and end its tag(function).

<HTML>  <--- Lets the computer know its a HTML document.
<Head>  <--- Head is the 'behind the scenes section,
	     Predefined things are inserted in here
</head> <--- This lets the comp know the head tag has ended

<body> <--- The body tag is the 'vual' part of the document.
	    This is where all the work is done on the page.
	    Everything you see on the website, is inserted into here
	    Using Various Tags :)
</body> <--- End of body tag, end of scripting
</html> <--- LEts the computer know its the End of the HTML Document.

-----------------------------
Creating our HTML Document::
-----------------------------
So far we have our standard structure of our HTML Document.
Now i will show you how to create a .htm or .html file.
Commonly, everyone does their HTML coding in Notepad.
So the standard file externsion is .txt, however,
we want it.html right? so instead of clicking save.
We go to 'save as' the filename should be 'something'
or 'something.txt' now edit that to, 'helloworld.html'
and change the 'save as type' from text document to 'All Files'
now that will let the computer know its changing from a .txt to .html successfully
However, make sure u change the 'save as type' to all files as,
if you don't then it will save it as 'helloworld.html.txt' (still a txt file)
Now you shoudl be able to click on your file and it will open with your Web Browser.

Now that we have created our first HTML document.
You will like to edit it(obviously)
So close down your text editor and right click on the HTML you just
created and open with notepad. 
I will begin by showing a few kewl tags :o)

---------------
The <p> Tag::
---------------
For now, all these tags will be inserted into the <body> tag.
<p> </p> This stands for paragraph, and when your putting text onto your site,
this is a good method of doing it. I will also show you how to align your text
on the page.
<p align="left">Hello Worlld This is my First HTML Document :D w00t</p>

------------------
The <font> Tag::
------------------
You can also use the <font> tag to display text and set alot of properties to it.
Example:
<font align="left" size="5" color="red">Hello World</font>
Note, normalally colors are defined with HEX Values. Like Follows.
#FFFFFF - White
#000000 - Black
However, simple colors (red) can be written in text. and i have used it for ease of use :)
This command will have red text, font size 5 and be aligned right on the screen.

Some Text Based Tags.
<b>text here</b> - Makes your text bold !
<i>text here</i> - Makes your text italic !
<u>text here</u> - Makes your text underlined !


If you use <p> then after you have closed your tags. And do another <p>
It will take a new line. However, if you use font, it will not.
The following command is probably one of the most useful commands there is :)
<br> Meaning Line Break.
So if we done <font color="red" align="right">Hello World<br>Newline<br>w00t</font>

The Output will be:
Hello World
Newline
w00t

See how useful that was ? :)
Okay so we know how to align text and change the color of it.

--------------
HyperLinks::
--------------
we want to know how to make these Links we see everywhere.
It is actually very simple.
Do not be concerned about the meaning of this command,
Just how to use it :)

<a href="www.dynamichell.org">Click Me</a>
This will appear as a clickable Link on your screen.
Which wil take you to www.dynamichell.org

Creating Email Hyperlinks & Adding a Subject
This is done the same way as a normal HREF however,
we add something called a mailto: so it knows its an email link
and not a hyperlink to another HTML document
Exmaple:
<a href="mailto:dragoonis@gmail.org?subject=I have read your tutorial>Email Me</a>
Simple isnt it ? :)

You should be typing these tags into your document and messing about with them.

Editing Background Color
Remember i said that in the <head> tag, its is predeinfed stuff your setting.
Well i am going to show you how to edit the color of your page background.
inside the HTML Tags. Insert the following.

<body bgcolor="#000000">  <-- No ending tag needed.
You should now have.
<head>
<body bgcolor="#000000">
</head>
<body>.....
If you would like to have a nice image as your background, then change bgcolor..
to <body background="your background image name.gif">

Changing the Title
Changeing the Title of your HTML Document.
inside <head> insert the following.
<title>Hello World This is my HTML Title</title>
Check it out now on your browser :)

Inserting Images
Now youve probably been wondering how do we insert these images weve been seeing.
Very simple...observe.
<img align="center" src="your imagename.gif">  <-- No Closing Tag Either.
Align is explanitory
Src = the location of the file wether on your computer or an internet address

If you wish to have spaces between your images the following would work.
<img src="filename.jpg Hspace="6">
Things are sorta making sense how we design a website using text links and images :)

Recap !
Okay so now we know how to change text properties,(size,color..etc)
Algin our text, make new lines. Insert images and Create Hyperlinks.
The Following is a sum-up of all the topics i have covered so far.
The tags me vary a bit form the exmaples i have showen you,
there are many ways of doing things in HTML.

<html>
<head><title>This is My Test Page</title>
<body background="mybackground.gif">
</head>

<body>

	<center>
		<font size="10" color="green"><u>Hello World</u><br><br></font>
	</center>
	<font color="red" size="5">
	If you would like pizza then click <a href="www.pizzahut.org">Here</a><br>
	<img height="100" width="150" src="pizza.gif"> <br>
	If you would like fries click <a href="www.mcdonalds.org">Here</a><br>
	<img width="400" height="200" src="fries.jpg"> <br><br>
	<hr color="#FFFFFF>
	<p align="center">This is <u>Underlined</u> This is <b>Bold></b> This is <i>Italic</i></p>
	<br><Br>
	<center>
		Broken Links? Report<a href="mailto:dragoonis@gmail.org?subject=Broken Links>Here</a>
	</center>
</body>
</html>

That was a bit more exciting wasnt it.
New Commands Used.
<center> is just the same as the <p align> tag.
I just use it as its easier to center lots of objects rather than just text.

Horizonal Line
<hr> - Horizontal Line. And i have changed the color of it also :)
Height/Width. Set the size of the image. Play about with this.
Instead of having abolute values like 200, 150..etc you can have Percantages.
<img height="20% width="230" src="image.png">

Creating an Image Link
Now you have text based links and normal images. How can we join these so were
able to click on images instead of text based links :)
Example:
<a href="mylink.htm"><img src="myimage.jpg border="0"></a>

Now you can see its an IMaGe within a Hyperlink :)
You may have noticed i inserted a border tag.
That is, as default, when an image is inserted into a hyperlink,
It adds a border to it, so i was setting it to 0 to take it away :o)

Creating Page Anchors
Page anchers are easy and fun! Also very handy if you have long pages.
As i have described at the start of thsi tutorial.
there are many ways to do things in HTML, i do the following
In my <a ... tag i insert the 'name' tag.
Example:
<a name="tutorials"></a>
This will be on a certain location on your page which you want the anchor to go to.
Then say your creating a link to go to the 'Tutorial' Section on your site.
you would do the following.
<a href="#tutorials">
This, once clicked, would take you to wherever the <a name="....Code is.


Further HTML.

Adding Form Buttons.
You may have been filling in registration forms and you have to click
a button in order to 'submit' the form. I will show you how.
This is a simple one which acts as a Hyperlink(link to an address)

<form method="get" action="http://dynamichell.org">
<input type="submit" value="Click Here">
<br>
<input type="submit" value="Or Here :)">
</form>
You can also add a background by doing this.
<input type="submit" style="background:#FFFFFF" value="Click Here">

Forms with Email Sending.
The following is code for inputting data into text boxes,
and emailing it to someone.
Example:
<form method="post" enctype="text/plain" action='mailto:dragoonis@gmail.org'>
Enter Your Username<br>
<input type="text" name="username size="50" maxlength="100"><br>
Enter Your email address<br>
<input type="text" name="emailadd" size="50" maxlength="100"><br>
Enter Your Password
<input type="text" name="pass" size="50" maxlength="100"><br><br>
<input type="submit" value="Submit">
</form>

Try editing this to your email address and youll see that the 'name' tag
will be displayed in your email document.
Username
Emailadd
Pass.

Tables
Tables can either be very easy or very fucking hard to remember !
Took me a while but i got the hang of it eventually.
Okay a table consists of <tr>'s and <td>'s
TD creates a new column(or cell), From left to right.
TD creates a new row.
Example:
<table width="200" height="400">
	<tr>
	<td width="50%">
		Insert your HTML Code Here
	</td>
	<td width="50%">
		Bot these 'cells' are on the same line
	</td></tr>
	<tr>
	<td>
		This is a new line now due to the new TR
	</td></tr>
</table>

there are many ways to arrange data in tables.
Play about with it :)
This is a simple example, it can get very complex with all the tags if you have a
Table within a table...etc
So code indentation(tabbing) like the above is very important so you dont lost track
of where you are in the tags :o)

EOF
I hope you enjoyed reading this as much as i enjoyed writing it :)
www.dynamichell.org
Thanks... Dr4g




