Resources/References!

[Geometric-sama]

General Webmasters' Resources

After observing, over several months, that people were asking where they could get >insert resource here< or a >insert resource here< for >insert purpose here<, I thought I might as well put up this quick-ref list. Additions? Just post in the Webmaster Lounge and one of us will add it to the list. Remember to check that your host supports the script language though! This list is by no means complete, but it's a good idea of what you can get XD.

Layouts
Free:
Free Web Templates: http://www.freewebtemplates.com/
liQuid Plasma Designz: http://wdp.intellecthost.com/
Free Web Layouts: http://www.free-web-layouts.com/
Free Layouts: http://www.freelayouts.com/
Master Templates: http://www.mastertemplates.com/free-templates.htm
Magitek Designs: http://magitek-designs.net/
Zymic: http://zymic.com/
Open Source Web Design: http://www.oswd.org/

Hosting
Free:
Freewebs: http://freewebs.com/
Yahoo! Geocites: http://www.geocities.com/ DEAD
1 ASP Host: http://www.1asphost.com, http://www.domaindlx.com
Brinkster: http://www.brinkster.com
Fateback: http://www.fateback.com
Angel Towns: (link removed) DEAD
Host Ultra: http://www.hostultra.com
Hosting Anime: http://www.hostinganime.com
T35: http://t35.com
Zap 3X: http://zap3x.com, http://3x.ro
100 WebSpace: http://www.100webspace.com/
Viper Hosting: http://www.viperhosting.net/
Funpic: http://www.funpic.org/
Paid:
Elixant Hosting: http://www.elixant.com/index2.html (25% off Code- Choose one: 89764796 - Morkula's code OR 71e2c420 - Greg/JA's code)
Xcel Hosting: http://www.xcelhosting.net/
Xigna Hosting: http://www.xignahosting.com/
innerChambers.com: http://innerchambers.com/
Directories:
Free Webhost: http://www.free-webhosts.com/
ClickHereFree: http://www.clickherefree.com/
Web Hosting Inspector: http://www.webhostinginspector.com/index.php?from=1

News Scripts
PHP:
CutePHP: http://www.cutephp.com
Fusion News: http://www.fusionphp.net
Perl/CGI:
Coranto: http://coranto.gweilo.org/
Newspro: http://www.elektrik-sheep.com/newspro/
Remotely hosted:
Oxyscripts: http://hosted.oxyscripts.com/

Fonts
DaFont: http://www.dafont.com/en
Font Magic: http://www.fontmagic.com
Fontasy: http://www.fontasy.org
1001 Free Fonts: http://www.1001freefonts.com

Forum Software
PHP/MySQL:
ZeroForum: http://www.zeroforum.com/ (PAID)
phpBB: http://www.phpbb.com
vBulletin: http://www.vbulletin.com (PAID)
YaBB SE: http://www.yabbse.org (LEGACY)
Simple Machines: http://www.simplemachines.org
XMB/Partagium: http://www.xmbforum.com
InvisionBoard: http://www.invisionboard.com (PAID)
MyBB: http://www.mybboard.com/
Burning Board: http://www.woltlab.de/index_en.php (PAID / FREE)
Perl/CGI:
YaBB Gold: http://www.yabbgold.org

Free Forum Hosts
InvisionBoard:
ForumHoster: http://www.forumhoster.com
InvisionFree: http://www.invisionfree.com
Clicdev: http://www.clicdev.com
phpBB:
CreateForum: http://www.createforum.com
YaBB Gold:
Proboards: http://www.proboards.com
Other:
Mycool: http://www.mycool.com
eZBoard: http://www.ezboard.com

General Script Repositories:
All Languages:
DHTM Dynamic Drive: http://www.dynamicdrive.com
HotScripts: http://www.hotscripts.com
Resource Index: http://www.resourceindex.com
Fat Scripts: http://www.fatscripts.com/
Javascript:
JavaScript Kit: http://www.javascriptkit.com

[Kipkip]

This thread will have HTML/XHTML/XML/CSS/PHP/MySQL/ASP/CGI/Javascript/Any other web language I missed tutorials. This will hopefully provide help for people wanting to know more or learn these languages. If you have any tutorials or site for any web language, then PM them to me.
~Now includes Graphic Designing
XHTML/HTML
PHP/MySQL
CSS
Free Web Host Guide -By Cool Cr@cker
Graphic Design

Main Tutorial Sites:
Webmonkey - http://www.webmonkey.com
W3Schools - http://www.w3schools.com
Dev Shed - http://www.devshed.com
Code Beach - http://www.codebeach.com
Pixel2Life - http://www.pixel2life.com/
GreyCorbra - http://www.greycobra.com/


Credits -
Thanks to BladeForever, katty, Cool Cr@cker for contributing.

[Kipkip]

HTML/XHTML:
W3Schools - http://w3schools.com/html/default.asp/
Lissa Explains - http://lissaexplains.com
Spoono - http://www.spoono.com/html/
HTML Goodies - http://www.htmlgoodies.com
HTML Basix - http://www.htmlbasix.com
HTML Code Tutorial - http://www.htmlcodetutorial.com

Basic HTML Tags:
By Kip-kip

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Your Title Goes Here</title></head>
<body>Content Here</body>
</html>

This is your basic HTML page.

<b>Text</b>

This makes your text to become bold.

<i>Text</i>

This makes your text to become italic.

<u>Text</u>

This underlines your text.

<br />

This tag is like "Enter" on your keyboard. It creates a new line.

<p>Paragraph</p><p>Paragraph2</p>

This will put an extra line between your paragraphs.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

This adds a heading to your page. The higher the number, the bigger the heading. The smaller the number, until 6, the smaller the heading. There is no header past <h6>.

<a href="URL">Link Title</a>

This adds a Link to your page.

<img src="Image URL" alt="Alternative Text">

This adds a image to your page.

<a href="URL"><img src="Image URL" alt="Alternative Text"></a>

This makes an image a link.

<table><tr><td>Cell</td></tr></table>

This makes a basic table. <tr> makes a new row, <td> makes a new column. For every row<tr>, you must have the same amount of columns<td> as the first one.

This was a simple tutorial I made. Again, if you have any tutorials of sites for any web language, PM them to me so I can add them here.

[Kipkip]

PHP/MySQL
W3Schools - http://w3schools.com/php/default.asp
PHPFreaks - http://www.phpfreaks.com/tutorials.php
DevShed - http://www.devshed.com/c/a/PHP/
Code Walkers - http://codewalkers.com
HotScripts - http://www.hotscripts.com/PHP/Tips_a...als/index.html
Free Webmaster Help - http://www.freewebmasterhelp.com/tutorials/php
Spoono - http://www.spoono.com/php/tutorials/
PHP.net - http://php.net
MySQl Offical Site - http://www.mysql.com

Putting PHP in your HTML page:
By Kip-kip
Don't you get tried of putting your layout on every HTML page you make? Then, if you have to change a link, you would have to change every single one of those pages. PHP allows the webmaster to only have to update one page. Before begining, make sure your host supports PHP. If you're not sure, contect the web host administrator. Now, to do this, make you layout page as normal, but don't put any content in it. When your done, save that as index.php. This will be the only file you need to change for the layout. Insert this PHP code where the content should go:

PHP Code:

<?php
   if (!$id) {
   $id = "main";
   $include = $id . ".txt";
   }
   else {
   $include = $id . ".html";
   }
   if (is_file($include) == "1") {
           include $include;
   }
   else {
   include "404.txt";
   }
   ?>

Save and then upload it to your host. Remember to delete any file, other than this file, that's title is index unless you're using a welcome page or splash. Now for you content. To make your content pages, all you have to do is to is include the content you want in HTML. You don't need that layout stuff anymore. You can either save the content file as .txt or .html, which ever you prefer. You're going to have to create a page called main.txt or main.html. This page will have your welcome greetings, news stuff, or whatever you want on your first page. Make sure you create a file called 404.txt just in case your vistors run across a broken link or a page not file error. After creating you content pages, you going to need to link to them in your index.php. To do this, include this in you url for your links:

PHP Code:

 index.php?id=pagename 


So it should be something like <a href="index.php?id=pagename">Link Name</a>. You don't include the "http://www.domain.com/site/" stuff. And there you go. If you ever want to change your layout, all you have to do is change the index.php and the rest of your content chages with it. I hope this makes your life a lot easier.
This was a simple tutorial I made. Again, if you have any tutorials of sites for any web language, PM them to me so I can add them here.

[Kipkip]

CSS:
W3Schools - http://w3schools.com/css/default.asp/
Spoono - http://www.spoono.com/csst/

[Cool Cr@cker]

Free Hosts Guide

Mihopa Hosting -- An Extremely Good free host for Good Webmsters with HTML Knowledge & Proffesionals..
Space & Bandwidth -- 40MB to 200MB & Unlimited Bandwidth
Features -- Advanced Control Panel, PHP, MySQL,CGI,PERL Supported, Free Email, More Sub-Domains
Domain -- http://yoursite.mhphs.info or http://mihopahosting.com/yoursite.
Requirement : Need Posts in their Forums

5 Gigs Free Hosting. - An amazing Free for top webmsaters.
Space & Bandwidth -- 80MB,5GB Bandwidth
Features -- Advanced Control Panel, PHP, MySQL suported,
Domain -- http://yoursite.5gigs.com
Requirement : Need Posts in their Forums

Deluxe Host - A really good Free Host which allows you to update your site through FTP.
Space & Bandwidth -- - 100MB Webspace, 30GB Bandwidth
Features -- Control Panel, PHP, MySQL and many great features, NO ads,FTP.
Domain -- http://dhost.info/yoursite
Requirement & Downfall : A FTP Software, Tough to Learn how to upload files.

Hosting Anime -- A Pretty good hosting Site for those with HTML Knowledge. Only Downfall is the Ads on our page.PHP Supported,
Space & Bandwidth --
Features -- Good Cpanel, PHP Supported.
Domain --
Requirement & Downfall : Banners in your site

FreeWebs - A good free host for begineers with less HTML Knowledge. Good Page Editor+ Their own Layouts offered
Space & Bandwidth -- 40MB to 200MB & Unlimited Bandwidth
Features -- Great Page Editor, Music,Guestbook,Counters Features offered, Easy Image Uploading
Domain -- http://freewebs.com/yoursite
Requirement & Downfall : No PHP Support, Only for Begineers

Geocities - An Ok Free host with some good features.
Space & Bandwidth --
Features -- Good Page editor, Ok Featuers for Layouts.
Domain - http://yoursite.geocities.com
Requirement & Downfall: Only for First time Webmasters without HTML Knowledge.

[Kipkip]

Graphic Desgin:
Good-Tutorials.com - http://www.good-tutorials.com/

[Geometric-sama]

New tute for putting PHP Includes in your page for content. Works with PHP 5 as well as PHP 4, so won't break on upgraded servers.

http://www.pokecommunity.com/showthread.php?t=29287

[Geometric-sama]

URL Redirection

.tk: http://www.dot.tk/
.uni.cc: http://www.uni.cc/
.co.nr: http://www.freedomain.co.nr/
.active.ws: http://www.active.ws/
Various: http://home.v3.com/free-sub-domains.shtml
.cjb.net: http://www.cjb.net/

[Drifblim]

I can't believe I haven't posted this here yet. I did this for PKMN.NET ages ago and I believe it should be brought up here. Well, at least what I can scavenge from it.

What is CSS?
CSS — cascading style sheet — is a portion of coding that defines styles within a web page such as font typeface, size, and colours. Although it is possible to set the font and other attributes to text outside the CSS portion, CSS gives the general definition for all text, backgrounds, images, and tables.

How do you put in CSS?
CSS coding can be typed either directly into the HTML document itself (usually between the <head> tags) or derived from an external source. To type the coding directly into the document:

<style type="text/css"><!--
[CSS coding goes here]
--></style>

(Note that the <!-- and -->, which are used to denote comments within HTML, prevent incompatible browsers from reading this portion but are ultimately not necessary. The same can be done with JavaScript.)

To have the document derive the CSS from an external source, you can link to a file saved in .css format:

<link rel="stylesheet" media="screen" type="text/css" href="style1.css">

with "style1.css" being the source of the CSS.

How do you type CSS?
In the CSS area (either in the external .css file or between the <style> tags), you type a block of CSS attributes like this:

body {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
text-align: center;
color: #ffffff;
background-color: #000066;
background-image: url('blah.jpg') repeat-x;
}

You give the name of the style item — in this case, the attributes for the main part of the site between the <body> tags, then type an opening brace. Then, you can define certain attributes. The first one we have, font-family, sets the typeface of the whole site. Here we have entered "arial, helvetica, sans-serif;" — Arial being the primary font, Helvetica if Arial is not installed on your computer, and Sans-Serif for Linux browsers that do not have Arial or Helvetica installed. End the set of features for that attribute with a semicolon and move on to the next attribute until you've decided that you've given enough, at which point you type a closing brace and move on to the next style item.

a:link{
color: #909090;
text-decoration: none;
}

Here's the coding for a normal link. The colour is this, and the text will not be decorated. By default, links have an underline, so 'text-decoration: none;' will get rid of the underline.

a:hover{
color: #909090;
text-decoration: underline overline;
}


This item takes effect when you put your cursor over the link. Here we've forced an overline and underline to decorate the link (which is done with links on Proboards sites).

a:active{
color: #ffffff;
text-decoration: none;
}

This item takes effect as soon as you click the link.

a:visited{
color: #909090;
text-decoration: none;
}

This item applies to links that you've previously clicked.

h1{
font-size: 22px;
font-weight: none;
}

This is used for text between the <h1> header tags. The 'font-weight' attribute will either make the text bold or light; if you were to have it bold, type 'font-weight: bold;'.

#main{
float: left;
}

Attributes like this will apply to <div> tags, which by default don't have any native attributes. They're just sections. A 'main' section would be shut off to the left (due to the 'float' attribute that we've set) and would begin:

<div class="main">

<div> tags are a bit tricky and depend entirely on where you put them.

Now we'll move on to table cells. More often than not, web sites will be laid out with items confined to table cells (and mind you, it's a lot easier and safer than relying on <div> tags!). The sidebar to the left on PKMN.NET consists of several cells arranged to afford sections their own individuality; for example, the links from Pokémon NL down to Canned Ham are contained in one cell and justified by <br> tags in between. The background of the reply box is contained in several tables embedded in one big table. That's how much a site can rely on tables.

td.main{
background-color: #003366;
background-image: url('blah.jpg');
}

The table cell with the name 'main' will have a background that consists of the image 'blah.jpg'. To set an image as a background, type the attribute 'background-image', the colon, and then 'url' followed by an opening parenthesis, the address of the image, and a closing parenthesis. If the image doesn't show up, the cell will be of this colour instead. A table to which these attributes apply would begin:

<td class="main">

just like a <div> tag.

You can also use this to change the attributes for form items. Below we change the background colour of a text area, button, and a dropdown to black:

textarea{
background-color: #000000;
}

submit{
background-color: #000000;
}

select{
background-color: #000000;
}

That's all there is to it!

td.main:link{
color: #303030;
}

If you want to override the general link attributes for the links within the 'main' cell, you do it like this, replacing td. + name of the cell with the 'a' in a:link, a:hover, etc. The same goes for <div> tags.

You can also set the borders for a cell:

td.main2{
border-left: 2 solid #ffffff;
border-right: 2 solid #000000;
border-top: 2 broken #ffffff;
border-bottom: 2 solid #000000;

with the first attribute for each being the thickness, the second line style, and the third colour.

To end, I'll leave you with a copy of the skin I use for one of my sites for you to practise with.

/***********************************************/
/* HTML tag styles                             */
/***********************************************/ 

body{
    font-family: Arial,sans-serif;
    color: #ffffff;
    line-height: 20px;    
    margin: 0px;
    padding: 0px;
    background-color:#003300;
}

a:active{
    color: #ffffff;
    text-decoration: none;
}

a:link{
    color: #00ff00;
    text-decoration: none;
}

a:visited{
    color: #00ff00;
    text-decoration: none;
}

a:hover{
    color: #00ff00;
    text-decoration: underline;
}

h1{
 font-family: Arial, helvetica, sans-serif;
 font-size: 27px;
 color: #00ae00;
 margin: 0px;
 padding: 0px;
}

h2{
 font-family: Arial,sans-serif;
 font-size: 114%;
 color: #007800;
 margin: 0px;
 padding: 0px;
}

h3{
 font-family: Arial,sans-serif;
 font-size: 100%;
 color: #008800;
 margin: 0px;
 padding: 0px;
}

h4{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: normal;
 color: #007800;
 margin: 0px;
 padding: 0px;
}

h5{
 font-family: Verdana,Arial,sans-serif;
 font-size: 100%;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font-family: Arial,sans-serif;
 font-size: 100%;
 font-weight: bold;
 color: #008800;
}


/***********************************************/
/* Layout Divs                                 */
/***********************************************/

#masthead{
    padding: 10px 0px 0px 0px;
    border-bottom: 1px solid #008800;
    width: 100%;
    background-image:url(emeraldmasthead.png);
    background-position:right;
    background-repeat:no-repeat;
}

#navBar{
    float: left;
    width: 20%;
    margin: 0px;
    padding: 0px;
    background-color:#006600;
    border-right: 1px solid #008800;
    border-bottom: 1px solid #008800;
}

#headlines{
  float:right;
    width: 20%;
    border-left: 1px solid #008800;
    border-bottom: 1px solid #008800;
    padding-right: 10px;
}

#content{
    float: left;
  width: 55%;
}

/***********************************************/
/* Components                                  */
/***********************************************/

#siteName{
    margin: 0;
    padding: 0 0 0 10px;
}


/************* #globalNav styles **************/

#globalNav{
padding: 0px 0px 5px 10px;
border-bottom: 1px solid #CCC;
color: #008800;
}

#globalNav img{
 display: block;
}

#globalNav a {
    font-size: 90%;
    padding: 0 4px 0 0;
}

/*************** #pageName styles **************/

#pageName{
    margin: 0px;
    padding: 0px 0px 0px 10px;
}

/************* #breadCrumb styles *************/

#breadCrumb{
    font-size: 80%;
    padding: 2px 0px 0 10px;
}


/************** .feature styles ***************/

.feature{
    padding: 0px 0px 10px 10px;
    font-size: 13px;
}

.feature h3{
    padding: 30px 0px 5px 0px;
    font-size: 16px;
    text-align: center;
}

.feature img{
    float: left;
    padding: 10px 10px 0px 0px;
}


/************** .story styles *****************/

.story{
    clear: both;
    padding: 10px 0px 0px 10px;
    font-size: 12px;
}

.story p{
    padding: 0px 0px 10px 0px;
}


/************* #siteInfo styles ***************/

#siteInfo{
    clear: both;
    border: 1px solid #008800;
    font-size: 75%;
    color: #008800;
    padding: 10px 10px 10px 10px;
}

#siteInfo img{
    padding: 4px 4px 4px 10px;
    vertical-align: middle;
}


/************* #search styles ***************/

#search{
    padding: 5px 0px 5px 10px;
    border-bottom: 1px solid #008800;
    font-size: 90%;
}

#search form{
 margin: 0px;
 padding: 0px;
}

#search label{
    display: block;
    margin: 0px;
    padding: 0px;
}


/*********** #navBar link styles ***********/

#navBar ul a:link, #navBar ul a:visited {display: block;}
#navBar ul {list-style: none; margin: 0; padding: 0;}

/* hack to fix IE/Win's broken rendering of block-level anchors in lists */
#navBar li {border-bottom: 1px solid #008800;}

/* fix for browsers that don't need the hack */
html>body #navBar li {border-bottom: none;}


/*********** #sectionLinks styles ***********/

#sectionLinks{
    position: relative;
    margin: 0px;
    padding: 0px;
    border-bottom: 1px solid #008800;
    font-size: 90%;
}

#sectionLinks h3{
    padding: 10px 0px 2px 10px;
}

#sectionLinks a {
    display: block;
    border-top: 1px solid #008800;
    padding: 2px 0px 2px 10px;
}

#sectionLinks a:hover{
    background-color: #008800;
}


/*********** .relatedLinks styles ***********/

.relatedLinks{
    position: relative;
    margin: 0px;
    padding: 0px 0px 10px 10px;
    font-size: 90%;
}

.relatedLinks h3{
    padding: 10px 0px 2px 0px;
}

.relatedLinks a:link,
.relatedLinks a:visited {
    display: block; 
}

/************** #advert styles **************/

#advert{
    padding: 30px 0px 10px;
}

#advert img{
    display: block;
}


/************** #headlines styles **************/

#headlines{
    margin: 0px;
    padding: 10px 0px 20px 10px;
    font-size: 80%;
}

#headlines p{
    padding: 5px 0px 5px 0px;
}

#headlines ul{
    list-style: none;
    margin: 0;
    padding: 5px 0px 5px 0px;
}

That's all, folks!