Website Coding Tutorial.

TheGod · Dec 19, 2012

Hey guys, in this tutorial I am going to teach you how to code. This is for sites, not games or anything (may be wrong section?). So let's get started.
Languages Necessary
-HTML
-PHP
-CSS (somewhat optional)

HTML (5)
To start any script in HTML, you need to put the tag <HTML>. This helps your file identify the code needed to output.
Basic codes:

Code:

<b>This text is BOLD. b for Bold</b>

Code:

<u>This text is underlined. u for Underline</u>

Code:

<i>This text is italic. i for Italic.</i>

Code:

<font color="#FFFFFF">This text is colored white.</font>

Code:

<font size="5">This text is large. 5 is the largest, 1 is the smallest.</font>

Code:

<font family="Calibri">This text is Calibri</font>

Code:

<a href="http://protechmodz.com">This text will link to PTM. You MUST include http://</a>

Code:

<body bgcolor="#C8C8C8">This will make the background of your page a light gray.</body>

Code:

<center>This text is centered</center>

Code:

<img src="http://lololololololollolol.png"/>
The above is used for showing a picture

Code:

<marquee>This text will scroll left</marquee>

Code:

<table border="1"><tr><td>Cell one, row one</td><td>Cell two, row one</td></tr></table>

Code:

<!-- This can be used for comments in your site -->

Code:

<?php put PHP Codes here ?>

Great Combinations For Style
This is for Toxique

Code:

<table border="1">Hot Topics/Scrolling Content in Box<tr><td><marquee direction="down"><font size="5"><a href="http://protechmodz.com/testtopic.php">Test Topic</font></a><font size="3"><br/>Description of this link</font><hr/></td></tr></table>
<!-- This code is for something like TTG's recent topics. You can use PHP variables to get topic links and author names. That may be covered in PHP section -->

Code:

<!-- Scrolling News bar; similar to what teh1337 had on the bottom of the screen for MW2 TU7 menus, so I like this one. -->
<marquee bgcolor="#5B5BFF"><font color="#FFFFFF">This will be</font> <font color="green"><b>scrolling</b></font> <font color="orange">FONT</font></marquee>

Code:

<br/> <!--this is for line breaks (or what we would call 'enter' on our computer)--> <hr/> <!--This is a horizontal line that will cause an automatic line break-->

Code:

<marquee behavior="alternate">This text bounces back and forth on the screen</marquee> <!-- SPACE --> <maquee direction="right">You can change the direction of the text moving from right, left, up, down, or behavior alternate, like above</marquee>

(MORE SOON)

PHP
In PHP, you will always need a .php file name in order to permit php to be ran, unless you use the <?php ?> tag in a .html, .asp, etc. These will most all likely be include or require files! So let's get started.

Code:

<?php 
//NOTE: You do not need to seperate lines
//in every different variable or function you write
echo "Hello ProTechModz.com, enjoy the tutorial!";
//each code line in php must have a semicolon (;)
//in order to seperate functions!
?>

Code:

<?php 
//Comments in PHP are represented by 2 slashes '//'
/*Or can be used like a normal text document. These 
comments are called blocks. Started with /* and ended with */

VARIABLES are easy. Just remember exactly how to write them, as they are very crucial in the writing of PHP!

Code:

<?php 
$MyVar="This is my variable"; 
//MUST include '$' in front of variable name!
?>

Code:

<?php
$Number=5;
//number variables will not require a quote!
?>

Using the above variables, we will echo it into a text space:

Code:

<?php
echo "$MyVar is $Number Characters long.";
?>
/*This will most likely not work, because you need the vars to be in the same function. This would needed to be included in the local, instead it was included as a global variable. */

Here's how you would really make it:

Code:

<?php
$lol = 3;
$plus = "+";
$hah = 5;
$equals = "=";
$k = 8;
echo  $lol . " " .$plus . " " . $hah . " " .$equals . " " . $k;
//This should work, as they were defined in the same php script
?>

Code:

//String lengths
<?php 
echo strlen("hahlol");
//Would return as "6"
?>

CSS
CSS is simply a way to code HTML more efficiently. It came out at HTML 4.0 so devs did not have to put font tags for every different color they wanted. Just thought you might want to have known the history

LINKING AN EXTERNAL STYLE SHEET

Code:

<link rel="stylesheet" type="text/css" href="yourfilename.css">

^ ^ ^ Notice the above, ALL css external files must end in a .css for it to be read / output correctly!
Fonts

Code:

p
{
color:cyan;
text-decoration:bold;
font-family:ariel;
text-size:12px;
}

^ ^ ^ All paragraph tags will now have these specs for the font, which will result in this.:
This is the end result!
*NOTE: ALL CSS MUST START WITH { and end with }! Also, each function must end in a semicolin ; *
Specific Tags

Code:

#p
{
color:red;
font-family:calibri;
font-decoration:bold;
}

The '#' tag typically only refers to one paragraph you would want to apply to a tag. In order for this to work, you would have to put the following as your paragraph tag: 
Your result:
This is what you get!
Multiple Specific Tags

Code:

.p
{
color:green;
font-decoration:blink /*This does NOT work in Safari, Chrome, or IE!! /*
text-align:center;
}

^ ^ ^ Comments are added by /* and end with /*
The period before the p is used for multiple tags that may be used. It will still use the "class" like the above tag. So,: 
Your result:

This is how it will look!

Internal Style Sheets
If you want to not have an extarnal file for your style, then the most effective way to display it for all tags like the one you declared it for is follows:

Code:

<HTML><head><style>
h1 { color:blue; text-align:center; text-size:24px; }
p { color:#C8C8C8; text-align:left; text-size:12px; }
</style></head>
<body><h1>Your Header Here</h1><br/>
<p>Your Content Here</p> <?php include('YourMainContentFile.php'); ?> </body>
<footer>&copy; YourCompany 2012-2013</footer>
</HTML>

^ ^ ^ You only need the head portion of your page to include the '<style>' tag. This will apply for all CSS in the page, and will OVERWRITE all other style tags in the page.
Your result:
<h1>

Your Header Here

Your content here

Yes, I did create this tutorial from scratch. I will be adding on to this constantly, don't worry

Toxique · Dec 19, 2012

Wow great and helpful thread TheGod, Can't wait to see what else to have to add on to it

Website Coding Tutorial.

TheGod

Well-Known Member

Toxique

Well-Known Member