Report this article Creating a website

Use HTML and CSS to create a simple mod site instead of relying on a template site.

Posted by Sallycin on Jan 2nd, 2007 digg this super bookmark
Basic Website.


[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:

  1. code:
  1.  
  2.  
  3. Your Mod Name Here
  4.  
  5.  

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:

User Posted Image

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:

  1. code:
  1. body {
  2.   background-color: Black;
  3.   font-family: Verdana;
  4.   font-size: 14px;
  5.   color: White;
  6.   }
  7.  
  8.   p {
  9.   margin-left: 20px;
  10.   margin-right: 20px;
  11.   }
  12.  
  13.   a:link {
  14.   color: #ffffff;
  15.   text-decoration: none;
  16.   }
  17.  
  18.   a:visited {
  19.   color: #CCCCCC;
  20.   }
  21.  
  22.   a:hover {
  23.   color: #ffff;
  24.   text-decoration: underline;
  25.   }
  26.  
  27.   font.header {
  28.   font-size: 40;
  29.   font-color: Yellow;
  30.   text-align: center;
  31.   }
  32.  
  33.   font.newstitle {
  34.   font-size: 25;
  35.   }
  36.  
  37.   font.poster {
  38.   font-size: 11px;
  39.   }
  40.  
  41.   td
  42.   {
  43.   vertical-align: top
  44.   }  
  45.  
  46.  


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:

 

Header




 


News Post Title

By Salohcin :: 1/2/07

News goes here.



Footer


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:

User Posted Image

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!

Comments
Sallycin
Sallycin Jan 7 2007, 3:35pm says:

Gah, Babuza claims the "Starting and Tables" works fine, but I also has an issue with it not loading all the way. Anyways, I purposely made it a bit vague on details, so the reader would put more thought into it.

+1 vote     reply to comment
Kiith-Somtaaw
Kiith-Somtaaw Jan 7 2007, 3:07pm says:

Seems simple enough with a relatively solid layout, but it seems a little too vague with many of the details of actually making a website.
The 'Starting and Tables' section seems to be incomplete or something as well.

+1 vote     reply to comment
Spector
Spector Jan 9 2007, 4:42pm says:

Perhaps I can right an more detailed tutorial on building and maintaining websites sometime later to complement this.

+1 vote     reply to comment
Sallycin
Sallycin Jan 9 2007, 5:43pm says:

Cool, this is a pretty poor tut now that I look back on it. I should write one about divs. divs>tables.

+1 vote     reply to comment
i_speel_good
i_speel_good Jan 24 2007, 9:46am says:

Where are we supposed to find a forum and an actual hoster?

+1 vote     reply to comment
i_speel_good
i_speel_good Jan 24 2007, 9:55am says:

for some reason the news appear after the date, not below the title

+1 vote     reply to comment
Midnitte
Midnitte Feb 4 2007, 10:21pm says:

"<font class="poster">By Salohcin :: 1/2/07

News goes here."
should be
"<font class="poster">By Salohcin :: 1/2/07


News goes here."
add br to add more space between

+1 vote     reply to comment
SLIPKNOT_512
SLIPKNOT_512 Mar 28 2007, 2:48pm says:

VERY EASY HTML TUTORIAL IS RIGHT HERE: University.mistupid.com VERY EASY TO UNDERSTAND!!!!

0 votes     reply to comment
mo2k7
mo2k7 Mar 30 2007, 11:11am says:

Thats cool, Basic yet professional (If you added images on the header and links)

also, you might want to notice on the last page under the code you put ".CSS without even touchiing " (One extra i on the Touching)

+1 vote     reply to comment
Ter3
Ter3 May 4 2007, 2:59am says:

Why is this tutor listed on
any
HL1
any
????

+1 vote     reply to comment
Varsity
Varsity Nov 15 2007, 10:03am says:

Tables bad.

Tables bad.

Tables bad.

+1 vote     reply to comment
Post a Comment

Only registered members can share their thoughts. So come on! Join the Mod DB community today (totally free) and do things you never thought possible.

Tutorial