HTML Mega-Guide
HTML Mega-Guide
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
<!-- write anything between the one spaces between the arrows poiting opposite directions -->
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.
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:
Headings in a Table
Still w3's
Headings in a table are defined with the <th> tag.
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.
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
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
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
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
<!-- write anything between the one spaces between the arrows poiting opposite directions -->
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>
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>
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>
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>
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 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>
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
