Creating a website tutorial

[page=Introduction]
Many mods have fallen to the horrors of freewebs.com. Their owners will claim that they do not have the skills to create a site. Well, if you don't wish to take the time to make a good site then you most likely don't have the proper amount of dedication to your mod.

So, to help those smart people who will say NO to Freewebs.com I've created this tutorial.

NOTE: I will not cover all the basics of HTML, so you may want to read a HTML basics tutorial before starting.

[page=Starting and Tables]
One of the most basic and most used methods for site design is tables. Tables allow you to have content divided into columns and rows. Let's start a new HTML document. Open up notepad and enter the following code:

Your Mod Name Here

tags, appears in the top bar of your browser. We just created a blank HTML document that will recieve style data from style.css in the same folder. Remember to replace "Your Mod Name Here" with the name of your mod. The text withing the

Now we are going to add the tables. Add this code between the tags:

This will give you a table stucture somewhat like this:

NOTE: I added the black background and text. Your will be on white without text.

Save this notepad file as "Index.html"You have finished the first step, on to CSS (I don't mean Counter-Strike: Source n00bs :P).

[page=Setting up the CSS file]
Now we will write A Cascading Style Sheet (CSS) file. This tells the page color, location, size, ect.

Open a new file in notepad and write this:

body { 
  background-color: Black;
  font-family: Verdana; 
  font-size: 14px; 
  color: White; 
  }
  
  p { 
  margin-left: 20px;
  margin-right: 20px;
  } 
  
  a:link {
  color: #ffffff;
  text-decoration: none;
  }
  
  a:visited {
  color: #CCCCCC;
  }
  
  a:hover {
  color: #ffff;
  text-decoration: underline;
  }
  
  font.header {
  font-size: 40;
  font-color: Yellow;
  text-align: center;
  }
  
  font.newstitle {
  font-size: 25;
  }
  
  font.poster {
  font-size: 11px;
  }
  
  td
  { 
  vertical-align: top
  }  
  
  

I'm not going to explain what this all means, but by scanning though you should be able to figure it out. Feel free to mess with font size, color, family, ect.

Save this as "style.css" in the same directory as "index.html."

[page=Adding the Content]

Now you are going to add the text and finish up the basic webpage. Change the code between the tags to this:

This basically added text into the tables using the styles defined in the CSS file. Now you can easily change the style from the .CSS without even touchiing the HTML. Your page should look somewhat like this depending on the changes you made to the style:

Again, I won't explain all the HTML, but instead leave it to you to figure out what everything does and then change it to your purposes.

Thank you for reading, and good luck with your mod!