![[Tutorial] How to make a SIMPLE website RazorWbBanner2](https://2img.net/h/i378.photobucket.com/albums/oo222/odoat/RazorWbBanner2.jpg)
Home
![[Tutorial] How to make a SIMPLE website Empty](https://2img.net/i/empty.gif)
Hello everyone 
i was thinking of release something but didnt come up with an idea so i'll help some ppl out there to start build their own Website with HTML and CSS
First we need to download an program that can save files to html and css
if you allredy have a program that can do that SKIP THIS STEP!
Ok,Download
Insall it
Ok now we start make a website
1. Open your notepad program
2. Html is based on this code!
<html>
<head>
</head>
<body>
</body>
</html>
If you turn in <title>My first website</title> Between <head> and </head> you will see my first website as name of the site (will show up on the internet window)
Put this one in also but put it in between <body> and </body>
<p>Wow you did it!</p>
save and open the file you just saved with internet and wohla you got your website running
NOTE: Only you can see it.
Lets continue
Insert between <body> and </body>
<body style="background-color:#0000ff;"> will make a blue background(the text is black ATM)
<a href="https://razor-web.darkbb.com/">Here is a link to Razor-web.com!</a>
<img src="images/logo.jpg" /> This is a picture you can choose any picture you want only name is Logo and be a jpg file or you change logo.jpg to your file NOTE most be in images folder to work!
<a href="https://razor-web.darkbb.com"> This is where your picture should take you if you click on it!
<img src="logo.jpg" /></a> This one is the one in 1 step before
You can also add a coded line with some css layouts
<p style="font-size:20px;">This is typed in 20px</p> will show big text
<p style="color:green;">The text is green!</p> The text will be green!
<p style="padding:25px;border:1px solid red;">I love Razor-web.darkbb.com!!!!</p> This will show you an text with I love Razor-web.darkbb.com!!!! BUT! it have an red box around it!
Ok i think we are done so far lets see if you can make some nice websites!
Lets move on to css shall we?
Make a Folder called Style and save Css and the file under this in it!
Save this file in same folder as the CSS file:
![[Tutorial] How to make a SIMPLE website 16lelao](https://2img.net/h/oi37.tinypic.com/16lelao.gif)
Open a new file project with CSS
Write:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Add this under Background-image: url("butterfly.gif"); and the picture wont show more than once.
background-repeat: no-repeat;
you can also write
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: repeat
X will show in a line from left to right
Y will show from top to button
Repeat will show all over the site
Lets place it out somewhere on the site!
background-position: right bottom; Put it in the right bottom
background-position: 50% 25% Will show it almost in middle
background-position: 2cm 2cm you can also write in CM instead of %
Here is an Coordinate system
![[Tutorial] How to make a SIMPLE website 141jogo](https://2img.net/h/oi37.tinypic.com/141jogo.gif)
So this far we got this:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Looking good guys
Lets move on
Add this line: IN HTML FILE!!!
<li><a href="https://razor-web.darkbb.com/" class="razor">TO RAZOR-WEB!</a></li>
Back in CSS now!
a.razor {
color: #800000;
}
Lets move on making boxes!
div.box {
height: 500px; Position of the box!
width: 200px; Position of the box!
border: 1px solid black; Color of the box sides
background: orange; Color of the box background
}
Back to HTML again!
<link rel="stylesheet" type="text/css" href="style/style.css" />
Need to be between <head> and </head>
Remeber to have the HTML code in a own folder (Not style folder)
Like this
![[Tutorial] How to make a SIMPLE website 5f53zd](https://2img.net/h/oi38.tinypic.com/5f53zd.jpg)
Have fun making website's hope this little tutorial helped alot!
i was thinking of release something but didnt come up with an idea so i'll help some ppl out there to start build their own Website with HTML and CSS
First we need to download an program that can save files to html and css
if you allredy have a program that can do that SKIP THIS STEP!
Ok,Download
Insall it
Ok now we start make a website
1. Open your notepad program
2. Html is based on this code!
<html>
<head>
</head>
<body>
</body>
</html>
If you turn in <title>My first website</title> Between <head> and </head> you will see my first website as name of the site (will show up on the internet window)
Put this one in also but put it in between <body> and </body>
<p>Wow you did it!</p>
save and open the file you just saved with internet and wohla you got your website running
NOTE: Only you can see it.
Lets continue
Insert between <body> and </body>
<body style="background-color:#0000ff;"> will make a blue background(the text is black ATM)
<a href="https://razor-web.darkbb.com/">Here is a link to Razor-web.com!</a>
<img src="images/logo.jpg" /> This is a picture you can choose any picture you want only name is Logo and be a jpg file or you change logo.jpg to your file NOTE most be in images folder to work!
<a href="https://razor-web.darkbb.com"> This is where your picture should take you if you click on it!
<img src="logo.jpg" /></a> This one is the one in 1 step before
You can also add a coded line with some css layouts
<p style="font-size:20px;">This is typed in 20px</p> will show big text
<p style="color:green;">The text is green!</p> The text will be green!
<p style="padding:25px;border:1px solid red;">I love Razor-web.darkbb.com!!!!</p> This will show you an text with I love Razor-web.darkbb.com!!!! BUT! it have an red box around it!
Ok i think we are done so far lets see if you can make some nice websites!
Lets move on to css shall we?
Make a Folder called Style and save Css and the file under this in it!
Save this file in same folder as the CSS file:
Open a new file project with CSS
Write:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Add this under Background-image: url("butterfly.gif"); and the picture wont show more than once.
background-repeat: no-repeat;
you can also write
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: repeat
X will show in a line from left to right
Y will show from top to button
Repeat will show all over the site
Lets place it out somewhere on the site!
background-position: right bottom; Put it in the right bottom
background-position: 50% 25% Will show it almost in middle
background-position: 2cm 2cm you can also write in CM instead of %
Here is an Coordinate system
So this far we got this:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Looking good guys
Lets move on
Add this line: IN HTML FILE!!!
<li><a href="https://razor-web.darkbb.com/" class="razor">TO RAZOR-WEB!</a></li>
Back in CSS now!
a.razor {
color: #800000;
}
Lets move on making boxes!
div.box {
height: 500px; Position of the box!
width: 200px; Position of the box!
border: 1px solid black; Color of the box sides
background: orange; Color of the box background
}
Back to HTML again!
<link rel="stylesheet" type="text/css" href="style/style.css" />
Need to be between <head> and </head>
Remeber to have the HTML code in a own folder (Not style folder)
Like this
Have fun making website's hope this little tutorial helped alot!
Last edited by Snowcrown on Wed Oct 28, 2009 1:59 pm; edited 2 times in total
