PureGunz
Wellcome To PureGunz , Plesae Log in If You Are A Member Or Register if You Are not!!
PureGunz

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

Go down

Was this guide useful?

0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
0% 0% 
[ 0 ]
 
Total Votes : 0

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

Post  Connection on 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>


Last edited by Connection on Sat Dec 04, 2010 7:53 am; edited 1 time in total

Connection

Posts : 8
Join date : 2010-12-04
Location : In the Top 1 List.

View user profile

Back to top Go down

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

Post  Connection on 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

Connection

Posts : 8
Join date : 2010-12-04
Location : In the Top 1 List.

View user profile

Back to top Go down

Back to top

- Similar topics

 
Permissions in this forum:
You cannot reply to topics in this forum