- Joined
- Jul 18, 2008
- Sythe Gold
- 13
- Messages
- 2,442
The world of web pages evolves around several things... Templates, pictures, coding, and content. You must have all of these basics in order to make a sustainable website. So, I'm going to show you how!
Step 1 -
Create a folder to store all your templates, pictures, etc in.
Step 2 -
Inside that folder, create a notepad document with the following content in it.
Step 3 -
Save that document as "Template.html"
You now have your webpage!
Step 4 -
Create another new notepad document and leave it blank (we'll come back to this later.) and Save it as "Index.CSS".
You should now have these two things in your folder.
Step 5 - Creating <div>'s
To create a <div> is quite simple... It just depends on what you'd like... For this example we're just going to make a simple box though.
So inside of that document we just made ("Index.CSS") We're going to put in some code to make a box.
Now I'll go through the code we just put in our Index.CSS.
- The (#box) is our name of the div which basically means a piece of the site.
- The '{' means that's the beginning of our code for this div.
- Now the Height and Width are given numbers in pixels aka (px) you can change those numbers by the way, the higher the number, the larger the box.
- Whenever you want to end a line of code you always use a ';' like we've done in our code.
- The margin-left and right: auto; means that we're going to center this box in the middle of the site. If you don't want it centered... Take out the "Auto" and put in a number with px at the end (ex: 10px)
- Then the border: means we're going to give this box a 1 pixel solid black lined border around it.
This all may seem confusing but you'll get the hang of it.
Save this now, and close it.
Step 6 - Adding the box to the site!
Assuming you've done the following correctly we're now going to put the box on our site!
Right click on your template and choose "Open with notepad".
Now go do the <body> tags and in between them type the following code.
- The <div id="box"> tells the page what the name of that <div> is and tell it to put it on there.
- The "This is our box." is the content that will be placed inside of the box we created. You must have content in a <div> unless it is given a fixed height and width.
- Then the </div> just simply means you'd like to close that <div> and are ready to create a new one.
Save this then go back to your template Icon and now just Click on it without Right-clicking. It should open up on the internet with your box showing! If this happened you are successful and now a official web designer!
If you want you can create more boxes and place them in and mess around.
"This Guide on How to create a basic webpage. is © of Rawr Im Phat. Any ripping of this guide will result into a Report, and most likely a BAN."
Step 1 -
Create a folder to store all your templates, pictures, etc in.
Step 2 -
Inside that folder, create a notepad document with the following content in it.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="index.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>Step 3 -
Save that document as "Template.html"
You now have your webpage!
Step 4 -
Create another new notepad document and leave it blank (we'll come back to this later.) and Save it as "Index.CSS".
You should now have these two things in your folder.
Step 5 - Creating <div>'s
To create a <div> is quite simple... It just depends on what you'd like... For this example we're just going to make a simple box though.
So inside of that document we just made ("Index.CSS") We're going to put in some code to make a box.
Code:
#box{
height: 100px;
width: 100px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
}Now I'll go through the code we just put in our Index.CSS.
- The (#box) is our name of the div which basically means a piece of the site.
- The '{' means that's the beginning of our code for this div.
- Now the Height and Width are given numbers in pixels aka (px) you can change those numbers by the way, the higher the number, the larger the box.
- Whenever you want to end a line of code you always use a ';' like we've done in our code.
- The margin-left and right: auto; means that we're going to center this box in the middle of the site. If you don't want it centered... Take out the "Auto" and put in a number with px at the end (ex: 10px)
- Then the border: means we're going to give this box a 1 pixel solid black lined border around it.
This all may seem confusing but you'll get the hang of it.
Save this now, and close it.
Step 6 - Adding the box to the site!
Assuming you've done the following correctly we're now going to put the box on our site!
Right click on your template and choose "Open with notepad".
Now go do the <body> tags and in between them type the following code.
Code:
<div id="box">This is our box.</div>- The <div id="box"> tells the page what the name of that <div> is and tell it to put it on there.
- The "This is our box." is the content that will be placed inside of the box we created. You must have content in a <div> unless it is given a fixed height and width.
- Then the </div> just simply means you'd like to close that <div> and are ready to create a new one.
Save this then go back to your template Icon and now just Click on it without Right-clicking. It should open up on the internet with your box showing! If this happened you are successful and now a official web designer!
If you want you can create more boxes and place them in and mess around.
"This Guide on How to create a basic webpage. is © of Rawr Im Phat. Any ripping of this guide will result into a Report, and most likely a BAN."
