HTML Mega-Guide

**Spookerzz** · 01-30-2010

Hello MPGH I am here today to teach you HTML Coding in one massive guide and to prove to Why06 that I'm helpful...

First off is the ones already on MPGH to get them out of the way

Basic HTML #1
Here's The first part of my HTML tutorial

This is very Basic

Open Notepad
Type 'MPGH is the best'
And go to 'Save as' and save it as HTML1.HTML and save it to your desktop
Go to your Desktop and open up the brand new file which has been saved...

There you go

You can change the text from 'MPGH is the best' to anything else you want it to be...

Basic HTML #2
In this tutorial we will be learning to use code to make websites not words.

Go to Notepad

Write this down
<html>
<body>
<h1>MPGH is the best</h1>
<p>MPGH Owns all other sites!</p>
</body>
</html>

Go to 'Save as' and save it as 'HTML Part two'.HTML. Save it to your Desktop...

Go to your Desktop and open it...

What you will see
A Title saying MPGH is the best
Writing Saying MPGH owns all other sites!

What we learnt...

<HTML> Used to identify the coding used
<body> Contains all the writing and fonts and titles.
<h1> Means Heading 1 you can keep going down but I would stop at 6 otherwise you can;t Read ^^
<p> Means Paragraph
</HTML> End of the HTML code
</body> End of body code
</h1> End of h1 code
</p> End of p code

I mean end of as in not using that code anymore for example you need to stop somewhere

Basic HTML #3
Heres part three of our wonderful tutorial ... In this we will have several parts

How to add a link
<html>
<body>
<h1>Godlike Gaming</h1>
<p>Youtube <a href="www.youtube.co,">This is a link</a>
</body>
</html>

How to insert Images
<img src="Type the file name of you pic for instance Tutorial.jpg" width="100" height="200" />
Before you do that you have to check out your file type, width and hight

Basic HTML #4
This Tutorial will tell you about some bugs you might get when using HTML

Upper or lowercase?

HTML coding isn't case sensitive .. Well the coding is the text between Titles and paragraphs are Case sensitive so you don't have to worry about having Uppercase P's in the paragraph code. BUT you have to use lowercase letters because the World Wide Web Consortium (W3C) Demand that you have it like that in future versions of HTML coding.

Empty elements
Empty Elements are HTML code which can be closed with the start code....

For instance
<br> is a code which you need to type just that and that's it.

Don't Forget to put the end code!
Even though there are Some empty elements that does not mean all of them are.. You still have to put the end coding on HTML Codes like this

<p>Heyyyy</p>

Otherwise it could lead to bugs and other technical difficulties which most people couldn't be bothered to say and I'm one of them

Basic HTML #5
Here's The next tutorial...

HTML Comments
This is a comment


This can be used to remeber things you don't want other people to see

Viewing Source Code

Have you ever wondered how somebody did something exremely amusing or amazing on their website?
Well you can see how they did it by right clicking and then pressing the 'View Source' option

Line Breaks
<br> Stands for breakline they can be used in paragrapghs when you want a pragrapgh to go the line down below it without actually making it to the end of the current line

Basic HTML #6
Here's the Next tutorial

This Tutorial will tell you how to make text bold and italic and stuff

Codes
<b> - Bold
<i> - Itallic
<big> - Big
<code> - Computer code style
<sub> - Subscript
<sup> - Superscript

I write all of these Tutorials on another website which I will not list because I don't wanna get banned..

Now We will move on
How many colour codes are there in HTML?
Ans: 16 Million

Explanation:
The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).

Most modern monitors are capable of displaying at least 16384 different colors.

If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.

To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below.

Information gotten from W3 schools

If You Are Having Trouble Finding Your Favourite Colour.
Go to HTML Color Picker
The link takes you to a colour picker where you pick a colour then you have the option of picking the shade you want of the colour then giving you the code!

How convienient

HTML Tables
This is also from w3 Schools so All credit goes to them for this part of the tut
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.

Code:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

What it looks like in the browser when seeing your website

Credits for pic go to w3 school 80% and me 20% for capturing the pic and uploading to tinypic

Tables and the Border Attribute
This is also w3's tut
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.

To display a table with borders, you will have to use the border attribute:

Code:

<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>

Headings in a Table
Still w3's
Headings in a table are defined with the <th> tag.

Code:

<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

What it looks like

Credits again goto me and w3's school

Empty Cells in a Table
Still W3's
Table cells with no content are not displayed very well in most browsers.

Code:

<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>

What it looks like

Credits to W3's and me

Table Tags
W3's have put all of the tags into one so thanks for that w3's!

New HTML
There will be new HTML Coding coming out making it easier and faster for HTML coders to learn and make websites!

Currently there is a beta somewhere on the web for coders to test out the new language and tell them what there missing

Horizontal lines
This is me now
Use <hr /> to make a horizontal used for new paragraphs and stuff

Code:

<hr />

The pictures

The coding

The site

Comments
Ever forgotten something in HTML coding and lost it in the coding wave?
There are two ways to get rid of the problem
Press Control f and try to locate it there
Or use a comment and the top or bottom of the coding like this

Code:

<html>
<body>
<!-- No advertising on MPGH -.- --> 
<h1>MPGH is the best</h1>
<p>title says all :D</p>
</body>
</html>

NOTE: This is already up the top but it is seperate because people always miss this.... And forget

DONE If you need any help don't feel shy to ask me anything!

NOTE: Thank you Obama for sticking this thread

I will post a more advanced one if I get requested to

**Kookeedoh** · 01-31-2010

Even thought i know how to code HTML.
its a good guide for noobs

NOW WORK ON YOUR Imtermediate and Advanced HTML

**Spookerzz** · 01-31-2010

Yup I'll do it later on

***JAMES*** · 02-13-2010

Nice, i have already mastered this tutorial in under 10 minutes. Well explained and well presented.

**orgoth88** · 02-17-2010

very handy =-)

**Spookerzz** · 02-18-2010

Thanks for the feedback guys and if you have any problems just PM them to me aand i'll try get an answer back to you as soon as possible!

**afunyun** · 03-15-2010

Hmm for the advanced and intermediates I think you should introduce the trainees to Notepad++ or similar.

Thats what I use anyway >_>

**Spookerzz** · 03-18-2010

Major Bump

And what is Notepad++?

**yearupie** · 03-18-2010

From Wikipedia, the free encyclopedia

Notepad++ is a text editor and source code editor for Windows, though it can run on Linux and Mac OS X, using software such as Wine. The primary advantage of Notepad++ over the built-in text editor, Notepad, is tabbed editing, to easily work with multiple open files.

It is distributed as free software. The project is hosted on SourceForge.net, from where it has been downloaded over twenty million times and twice won the Community Choice Award for Best Developer Tool. To display and edit text and programming language source code files, Notepad++ uses the Scintilla editor component.

**Spookerzz** · 03-19-2010

Ok thanks for the information.

**[MPGH]Time** · 04-19-2010

The 2nd part is for website and not words means i cant type anything in the webpage?

**Spookerzz** · 04-19-2010

What?

Tell me what you're doing

Thread: HTML Mega-Guide

Thread Tools

Display

HTML Mega-Guide

The Following 5 Users Say Thank You to Spookerzz For This Useful Post:

The Following User Says Thank You to Spookerzz For This Useful Post:

Similar Threads

[Preview] Mega guides

[Release] The mega guide!

Aluseu's Mega Mod Guide

[Release] THE MEGA GUIDE PT 2

Advanced HTML Mega-Guide