Starting and HTML Website,making it's "foundation" + an example

Connection Sat Dec 04, 2010 7:41 am

Hello guys.This is my first tutorial on starting making a HTML page.

First, there are few things you should know about HTML:
HTML - stands for Hyper Text Markup Language
It is compatible with php(I mean you can mix them to create a page)
It is compatible with javascript(you can mix those,too!)

Starting your HTML page
For the very beginning you need a text editor like Notepad.
1.Create a file called index.txt and save it as index.html
2.Open the index.html using the Notepad and begin coding:

Code:: <html> <header> <title> <script> </script> </header> <body> </body> </html>

Ok,now.. maybe you're wondering "WHAT THE HELL THOSE MEAN?!".Well,I'll explain you.
<html> - the very beginning of a HTML page.IT MUST CONTAIN IT,else some codes won't work.
<header> - the section where the page name and css is found
<title> - the name that will appear on the browser [for instance,like at www.google.com it writes Google]
<body> - the section where everything that's shown on the page appears.
Q2:What are the tags with an "/"
-Well,they are "close" tags.When we write <html> at the top,at the very end we also must write </html> so we can say wherever the HTML page ends.The same goes for every tag.

3.Making a color and putting some texts.
- In order to make a color,you must write between the <style> and </style> tag,the following:
body{background:colorname;}
Explanation: body - the section name of the <body>
background - the background.LOL

~Making div's and styling them.
What are divs?
Well,they are "blocks" that can be designed to have some amount of pixels,and width and yeah...to contain almost everything.

Creating a div.[within the <body> and </body>]
Write the next code <div class ="whateverYOUwant"> </div>
Explanation : <div> - the beginning of the div section
</div> - the end of the div section
class="name" - to define the name we will use in CSS
[the text is to be put between the <div> and </div>]

Coding the div.
Between the <style> and </style> section,you must write
.divname{and here will go the code i'll write below}
Explanation : divname - is the thing you wrote after the class=
Question:Why "."?Well...it's the HTML way to know that it's about separate divs.
Okay,here's the code

width:100px;
height:100px;
top:100px;
left:100px;
border:1px solid black;
position:absolute;

Explanation :width - the div's width
height - the height of the div
top - how much distance it's between the div and the top
left - how much distance it's between the div and the left side
border - the border [1px can be replaced by any number,and black by any colour]
position:absolute; - this thing allows you to move the div around.
Okay,so you have got your first html page! cheers

THE EXAMPLE:
Here I will write the code of a HTML page made with the guide I made.

<html>
<header>
<title>Your first HTML page</title>
<style>
body{background:cyan;}
.firstdiv{
width:100px;
height:100px;
top:100px;
left:100px;
border:1px solid black;
position:absolute;
}

</style>
</header>
<body>
<div class="firstdiv">
random text goes here
</div>
</body>
</html>

Connection Sat Dec 04, 2010 7:42 am

QUESTIONS CAN BE POSTED HERE.DO NOT PM ME I WILL REPLY ONLY TO THIS TOPIC
Everybody is allowed to correct me,or tell me to add something I missed.
ENJOY

Starting and HTML Website,making it's "foundation" + an example

Was this guide useful?

Starting and HTML Website,making it's "foundation" + an example

Re: Starting and HTML Website,making it's "foundation" + an example