---------------------------------------
Introducing.
First you need to have some knowledge what html and css is.
I would recommend this site.
[Only registered and activated users can see links. Click Here To Register...]
Thought Im learning aspx with c# atm. at school, I will make guide for
that later.
Im using w3schools to look up on things, when I get confused etc.
This guide is for making a simple Conquer Online Website.
Now when u know what html and css is (Dont need much knowledge, just some general).
I will not go in intern css, as thats really bad to use.
I prefer extern css.
Then your read to continue to next step.
----------------------------------------
Now you need some editor for making html etc.
I would suggest Visual Web developer, if u dont got Visual Studio.
Is alittle different, but same functionalities, of what im gonna show.
You can download Visual Web developer here.
[Only registered and activated users can see links. Click Here To Register...]
Now when u got what u need, then were ready to continue.
Lets start with the skeleton for your page.
First we need a folder for your website.
Make one folder.
[Only registered and activated users can see links. Click Here To Register...]
Now were ready to start, open your editor.
Choose File > New > File.
Then choose a Html page.
[Only registered and activated users can see links. Click Here To Register...]
Now you will get a page, should look like this:
Now find
Change it to what ever you server name is.
I called mine:
Always remember to do that first, when your making a website or a new page.
Now we got a base html file.
How does it look in the browser?
Well, lets save the file first.
File > Save as > Your website folder.
I have called mine index.htm
Well, as there is nothing on our website, then is empty.
[Only registered and activated users can see links. Click Here To Register...]
Well, now we need a base design of our website, so lets make a simple css design.
With a header, a menu and a footer.
Will look something like this:
[Only registered and activated users can see links. Click Here To Register...]
Well, how do we make things like that?
Isn't it just use tables?
Tables are a bad idea to use and they can't control your site enough.
It will make it confused for ur self.
Thats where css is awsome.
Then we just work with div, wich is a boxtype.
Is build up this way:
[Only registered and activated users can see links. Click Here To Register...]
Now lets make a div for every thing we got on our page.
Simplest way is make it look like this:
inside <body> </body>
also Im using class, is easier to control for whole pages.
As classes can be used more then once.
Where ids can only be used one time.
So lets use classes.
put a div for the whole page:
Now we got a div wich control the whole page.
Now next step is to make one for header, menu, content and footer.
So lets do that.
When your done it should look like something like this in body.
Okay next step is to make it looks like a page.
Go to File > New > StyleSheet.
Now were gonna look at css.
I will make a simple one with grayboxes and black background.
So I have something to work of.
How do I get ids and classes then?
As were using class then we use.
Well the first thing we do is making one called body.
Wich is the whole page.
To make it background black, just type in something like this.
Now save the css file as Style.css in your folder.
Now we need to make our page work with the css file.
Go to your html page.
and find:
under that, we need a link, that ref to the css page.
Use this, if name is Style.css:
Now were connecting to the css page.
It should look like this now:
[Only registered and activated users can see links. Click Here To Register...]
Woohoo, it works, we got a blackpage, wich is controlled from our css page.
Awsome right?
That u can work extern.
I love css so much for that u only have to edit something 1 time and not on all pages,
like if ur working with tables.
Well lets continue on our website.
Now we need some text in it.
I will just write a general plain content that you could use.
And explain what I did after.
Style.css
Index.htm
Now what did I exactly do?
Lets look on the css first.
I made background color black with
I made all headings stand as center with.
I made the page to have auto margin.
And then the widht to be 800px.
Thats a good size and I like to work with it.
We have to take care of some still work with
small displays, but not many.
Not only what we got self, but what others got.
So 800px is a good thing to work with.
Then I made sure out header is same size as our page.
So 800pixels again.
And I made a border with 1px and solid black style.
Then the color of the header gray.
Then The menu with 10pixel padding, because thats a good padding.
Using it most time to get content and header alittle away from
the menu.
Then widht to be 150pixels, so is not too big or too small.
Then I made a border on it, because lets keep same style.
Different styled pages, looks bad (In most cases).
Then a Background color of gray.
And because I want it on left side, I used float to control, where
I wanted it.
Now I made a padding on 10px again, to keep same style.
I made margin 0px, so it will be at the edge of the border.
And no spaces. Then I made a border with 1pixel and solid black
to keep same style as before.
Then background color white, because thats a standart color of
content page.
Because it should be right side of menu, then I used float
to control that it is.
Now we need to make the footer act like a footer.
Well width is 800px, because it needs to be at the whole buttom of page.
Then marget -150, so it puts it at a good position.
U can try edit the options for what u think is best.
And rest options are to make it fit in the page.
With style etc.
Thats how I build up the css page.
Hope you know what were doing now.
Now for the html page.
Lets look on every tag, dats important.
First thing is the header.
Well is kinda self explanation.
<h1> is the heading tag.
It contains more then 1 control in 1.
There is from h1 - h7.
Higher number = smaller text.
Dont ask why, cuz I actually dont know.
Makes no sense for me.
Well </h1> is to end the tag.
But u know if u readed alittle about html.
Now lets look on next div wich is the menu.
I made a little text to show is the menu.
<b> tag stands for bold. Like here on forum is [ b ].
So the text Menu will be in bold.
Now to link to each page, I made these links.
<a> = link.
href is the reference of the link.
Where it should link to.
Example:
Dats a simple linking to google.
There is not needed much explanation for content.
Is the white bar you saw before in the page.
when you putting things in it, then it will automatical be bigger.
As were controlling that in the css file.
Look for .content class
Then we got the footer.
It dosnt need much explanation either as is just some plain text like copyright etc.
Hope this was useful, so you could start make ur own Conquer website.
Regards.
Download + Preview:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Goodluck with your server and goodluck with your site.
Introducing.
First you need to have some knowledge what html and css is.
I would recommend this site.
[Only registered and activated users can see links. Click Here To Register...]
Thought Im learning aspx with c# atm. at school, I will make guide for
that later.
Im using w3schools to look up on things, when I get confused etc.
This guide is for making a simple Conquer Online Website.
Now when u know what html and css is (Dont need much knowledge, just some general).
I will not go in intern css, as thats really bad to use.
I prefer extern css.
Then your read to continue to next step.
----------------------------------------
Now you need some editor for making html etc.
I would suggest Visual Web developer, if u dont got Visual Studio.
Is alittle different, but same functionalities, of what im gonna show.
You can download Visual Web developer here.
[Only registered and activated users can see links. Click Here To Register...]
Now when u got what u need, then were ready to continue.
Lets start with the skeleton for your page.
First we need a folder for your website.
Make one folder.
[Only registered and activated users can see links. Click Here To Register...]
Now were ready to start, open your editor.
Choose File > New > File.
Then choose a Html page.
[Only registered and activated users can see links. Click Here To Register...]
Now you will get a page, should look like this:
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
</body>
</html>
PHP Code:
<title>Untitled Page</title>
I called mine:
PHP Code:
<title>CO Website</title>
Now we got a base html file.
How does it look in the browser?
Well, lets save the file first.
File > Save as > Your website folder.
I have called mine index.htm
Well, as there is nothing on our website, then is empty.
[Only registered and activated users can see links. Click Here To Register...]
Well, now we need a base design of our website, so lets make a simple css design.
With a header, a menu and a footer.
Will look something like this:
[Only registered and activated users can see links. Click Here To Register...]
Well, how do we make things like that?
Isn't it just use tables?
Tables are a bad idea to use and they can't control your site enough.
It will make it confused for ur self.
Thats where css is awsome.
Then we just work with div, wich is a boxtype.
Is build up this way:
[Only registered and activated users can see links. Click Here To Register...]
Now lets make a div for every thing we got on our page.
Simplest way is make it look like this:
inside <body> </body>
also Im using class, is easier to control for whole pages.
As classes can be used more then once.
Where ids can only be used one time.
So lets use classes.
put a div for the whole page:
PHP Code:
<div class="page">
<!-- This is the whole page-->
</div>
Now next step is to make one for header, menu, content and footer.
So lets do that.
When your done it should look like something like this in body.
PHP Code:
<body>
<div class="page">
<!-- This is the whole page-->
<div class="header">
<!-- This is the header-->
</div>
<div class="menu">
<!-- This is the menu-->
</div>
<div class="content">
<!-- This is the content-->
</div>
<div class="footer">
<!-- This is the footer-->
</div>
</div>
</body>
Go to File > New > StyleSheet.
Now were gonna look at css.
I will make a simple one with grayboxes and black background.
So I have something to work of.
How do I get ids and classes then?
PHP Code:
.classname/*Gets the class named classname*/
{
}
#idname/*Gets the id named idname*/
{
}
name/*Gets all tags using name*/
{
}
PHP Code:
.classname/*Gets the class named classname*/
{
}
name/*Gets all tags using name*/
{
}
Wich is the whole page.
To make it background black, just type in something like this.
PHP Code:
body
{
background-color: Black;
}
Now we need to make our page work with the css file.
Go to your html page.
and find:
PHP Code:
<title>CO Website</title>
Use this, if name is Style.css:
PHP Code:
<link rel="Stylesheet" type="text/css" href="Style.css" />
<!-- Ref to our css page -->
It should look like this now:
[Only registered and activated users can see links. Click Here To Register...]
Woohoo, it works, we got a blackpage, wich is controlled from our css page.
Awsome right?
That u can work extern.
I love css so much for that u only have to edit something 1 time and not on all pages,
like if ur working with tables.
Well lets continue on our website.
Now we need some text in it.
I will just write a general plain content that you could use.
And explain what I did after.
Style.css
PHP Code:
body
{
background-color: Black;
}
h1
{
text-align:center;
}
.page
{
width:800px;
margin:auto;
}
.header
{
width:800px;
border:1px solid black;
background-color: Gray;
}
.menu
{
padding: 10px 10px 10px 10px;
width:150px;
margin:0px;
border:1px solid black;
background-color: Gray;
float:left;
}
.content
{
padding:10px 10px 10px 10px;
width:600px;
margin:0px;
border:1px solid black;
background-color: white;
float:right;
}
.footer
{
position: relative;
margin-top: -150px;
height: 30px;
clear:both;
background-color: Gray;
width:800px;
}
PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>CO Website</title>
<link rel="Stylesheet" type="text/css" href="Style.css" />
</head>
<body>
<div class="page">
<!-- This is the whole page-->
<div class="header">
<!-- This is the header-->
<h1>CO Website</h1>
</div>
<div class="menu">
<!-- This is the menu-->
<b>Menu</b><br />
<a href="Index.htm">Index</a><br />
<a href="Download.htm">Download</a><br />
<a href="Register.htm">Register</a><br />
<a href="Contact.htm">Contact</a>
</div>
<div class="content">
<!-- This is the content-->
Welcome to my first Conquer Online website. I made this with CSS.<br />
Thanks to _Vodka for learning me basic css.
</div>
<div class="footer">
<!-- This is the footer-->
Copyright © _Vodka 2010
</div>
</div>
</body>
</html>
Lets look on the css first.
I made background color black with
PHP Code:
body
{
background-color: Black;
}
PHP Code:
h1
{
text-align:center;
}
And then the widht to be 800px.
Thats a good size and I like to work with it.
We have to take care of some still work with
small displays, but not many.
Not only what we got self, but what others got.
So 800px is a good thing to work with.
PHP Code:
.page
{
width:800px;
margin:auto;
}
So 800pixels again.
And I made a border with 1px and solid black style.
Then the color of the header gray.
PHP Code:
.header
{
width:800px;
border:1px solid black;
background-color: Gray;
}
Using it most time to get content and header alittle away from
the menu.
Then widht to be 150pixels, so is not too big or too small.
Then I made a border on it, because lets keep same style.
Different styled pages, looks bad (In most cases).
Then a Background color of gray.
And because I want it on left side, I used float to control, where
I wanted it.
PHP Code:
.menu
{
padding: 10px 10px 10px 10px;
width:150px;
margin:0px;
border:1px solid black;
background-color: Gray;
float:left;
}
I made margin 0px, so it will be at the edge of the border.
And no spaces. Then I made a border with 1pixel and solid black
to keep same style as before.
Then background color white, because thats a standart color of
content page.
Because it should be right side of menu, then I used float
to control that it is.
PHP Code:
.content
{
padding:10px 10px 10px 10px;
width:600px;
margin:0px;
border:1px solid black;
background-color: white;
float:right;
}
Well width is 800px, because it needs to be at the whole buttom of page.
Then marget -150, so it puts it at a good position.
U can try edit the options for what u think is best.
And rest options are to make it fit in the page.
With style etc.
PHP Code:
.footer
{
position: relative;
margin-top: -150px;
height: 30px;
clear:both;
background-color: Gray;
width:800px;
}
Hope you know what were doing now.
Now for the html page.
Lets look on every tag, dats important.
First thing is the header.
PHP Code:
<div class="header">
<!-- This is the header-->
<h1>CO Website</h1>
</div>
<h1> is the heading tag.
It contains more then 1 control in 1.
There is from h1 - h7.
Higher number = smaller text.
Dont ask why, cuz I actually dont know.
Makes no sense for me.
Well </h1> is to end the tag.
But u know if u readed alittle about html.
Now lets look on next div wich is the menu.
PHP Code:
<div class="menu">
<!-- This is the menu-->
<b>Menu</b><br />
<a href="Index.htm">Index</a><br />
<a href="Download.htm">Download</a><br />
<a href="Register.htm">Register</a><br />
<a href="Contact.htm">Contact</a>
</div>
<b> tag stands for bold. Like here on forum is [ b ].
So the text Menu will be in bold.
Now to link to each page, I made these links.
<a> = link.
href is the reference of the link.
Where it should link to.
Example:
PHP Code:
<a href="http://google.com">Google</a>
There is not needed much explanation for content.
Is the white bar you saw before in the page.
when you putting things in it, then it will automatical be bigger.
As were controlling that in the css file.
Look for .content class
PHP Code:
<div class="content">
<!-- This is the content-->
Welcome to my first Conquer Online website. I made this with CSS.<br />
Thanks to _Vodka for learning me basic css.
</div>
It dosnt need much explanation either as is just some plain text like copyright etc.
PHP Code:
<div class="footer">
<!-- This is the footer-->
Copyright © _Vodka 2010
</div>
Regards.
Download + Preview:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
Goodluck with your server and goodluck with your site.