The HTML Tutorial

Mistshade · 06/24/06, 04:42 PM

Introduction
Hey all. The objective of this tutorial is to teach you how to build a web site. As some of you might know I am a web developer. I have experience in four web languages which are HTML, CSS, PHP, and SQL. Most of my experience is invested into HTML and CSS so I will be creating a guide that will teach the Kingdom Hearts Insider community on how to make a basic website. I will not post everything I know at one time. Every week or so or whenever I have the chance to I would continue on with my guide and post another chapter. The chapters will go in this sequence:

What is HTML?
The Beginning
Fonts
Text Manipulation
Adding Images
Adding Audio
Links
Buttons
Textareas
Frames
Hecidecimal Codes

Please do not penalize me I am wrong in some categories of HTML. Some of this stuff I do not use often considering I mostly use HTML borders. If you liked this guide and found it to be helpful please consider giving my reputation. It would be greatly appreciated. In addition, please keep flaming down to a minimum. I do not wish to be flamed, I only wish to help. Please say good stuff only. If I notice that no one is using it I will not continue.

What is HTML
HTML is the primary and predominent web language used to create the exterior of a web site. In other words it is the part of a web site that you can see. For example, a link or an image on a site is HTML, you can see it. Posting something on a forum, or a guestbook is PHP, and SQL (most likely). HTML is an acronym for Hyper Text Markup Language.

The world is quickly shifting to XHTML as a web standard. XHTML is almost the same thing but you can consider it neater. It is properly nested which I will explain later in the guide. Also, I advice you to write all of your HTML in lowercase because cell phone browsers, or PSP browsers wont be able to compute it. So by the time XHTML is the standard you will be used to typing all of your coding in lowercase letters.

Why would you want to make a web site? Because its load of fun, and can be quite puzzling. Sometimes you may encounter hard times when trying to learn HTML (which I doubt, all of you seem pretty intelligent for an exception of a few of you) but don't get discouraged. Just keep trying, you'll eventually get it. HTML is rather easy to learn. Once you start server-side scripting like PHP you may wan't to cry.

HTML is WYSIWYG which is "What you see is what you get." This means its almost trial and error, if you screw up you will see it on the site. PHP if you screw up nothing will happen and you will be bombarded with errors. So when you display the site on your browser you will realize something is wrong because it wont look quite right.

The Beginning
You can use several programs to write HTML with. You can utilize HTML editors like Dreamweaver or PHP Designer. Or you can use programs that Windows supplies you with which is Notepad. Yes, that's right, Notepad. All you need to start writing your first web site is any text editor. For Macs your program which is equivilent to Notepad is SimpleText. I tried a plethera of different HTML editors but I just love Notepad too much.

First I will teach you how HTML works. .html will be used to save every single one of your HTML files. When saving your file it should not be saved as a .txt but a .html. To open one of your HTML document as just the coding just open it with Notepad. To see it as a web site open it with your browser but either right clicking on the file and clickin Open As > Your Browser.

Please type the following code into Notepad:

Code:

<html>
<head>
<title>
Insert Text Here
</title>
</head>
<body>
Insert Text here
</body>
</html>

That was easy enough, right? Well, anywho that will be the guidelines you will use on every single web site you will create. Every site is consisted of a header and body. Now you have no clue what any of that means so I will explain it to you.

<html>: This is telling the browser that this is the start of an HTML document. Every single web site you create will start with this code. No coding or text or anything will be above this code.
<head>: This is the information about the web site. The brwoser will read this as the start of the header. For example, this where the information about search engine content will be put. Like what keywords a search engine will pick up on, or the description of the site will be. For now we will just stick with editing the browser's caption bar which is at the very top of the screen and should say "KHInsider.com Forums.
<title>: This is the code used to edit the browser's caption bar. The code tells the browser that this is going to be editing the browser's caption bar and nothing else.
Insert Text Here: This is the variable in this code. This is what is changeable. This is the text that will be shown on the browser's caption bar.
</title>: This is the ending to the <title> code.
<body>: This is the start of the body of the web site. Everything you can see on the web site like text, images, tables, and sound (even though you can here it) will be located within this code.
Insert Text Here: This is the variable of the code. This is where all of the html codes will be placed. Most codes have a variable, some change the size, some change the color.
</body>: This is the ending to the <body> code.
</html>: This is the ending to the <html> code. No text or html will be placed after this code. Never ever.

Well, this is the end of the first chapter. If there are any mistakes I am sorry. After an hour or two your brain starts to go. The next parts you may already know from myspace or whatever. After these parts we will start entering the cool stuff like tables. I will edit my post or post another part within this week. Oh yes, if I am wrong in some places sorry.

Fonts
Well, now since I have explained to you what HTML is, and what you should always have in your HTML document, I will explain to you how to editing the text you put on your site. This is pretty simple. All of this coding should be between the <body> and </body> tags. You probably already know this based on past experience or from myspace (which I hate).

There is many ways to change how fonts appear. The way I am teaching you how to change font is simple. The majority of the codes will start with <font. Here is a list of some codes.

Insert Text Here: This code will change the color of the text you have supplied.
Insert Text Here: This code will change the size of the text you have supplied.
Insert Text Here: This code will change the font family of the text you have supplied.
Insert Text Here: This code will make the code supplied have a slant, it other words its italic.
Insert Text Here: This code will make the code supplied bold or strong.
Insert Text Here: This code will make the code supplied have an underline.
<blink>Insert Text Here</blink>: Just don't use this one, it will cause seizures.
<s>Insert Text Here</s>: This will make the code supplied has a slash out through it.
Insert Text Here: This will decrease the size of the test, and make it higher. For example ten to the sixth power. The sixth is superscript.
Insert Text Here:This will also decrease the size of the given text, but will make it lower.

You can do this all by CSS (Cascading Style Sheet) but first I think you should grasp basic knowledge of HTML. Now lets say you want to combine all of this together to make one code. Here is how you would do this:

Code:

<font face="Insert Font Face Here" size="Insert Number Here" color="Insert Color Here"><s><blink><b><u><i>Insert Text Here</i></u></b></blink><s></font>

Notice how it is all properly nested, and notice how the variables are always surrounded by " ". In additon, all of these codes should be place in the <body> section. I will properly add more to this chapter but this is all I have for now. Will update later. Before I end this chapter though I would like to show you a little HTML site example. Here it is:

Code:

<html>
<head>
<title>
Mistshade's Site
</title>
</head>
<body>
<font color="blue">Welcome to Mistshade's site</font>
<font color="red"> This site teaches you HTML!</font>
<font size="10" color="blue"> I hope you like it!</font>
<i><u>See you all later!</u></i>
</body>
</html>

Xalechim · 06/24/06, 04:52 PM

a very good idea to construct a guide for those who need help in HTML basics a must look at

Banishing Blade · 06/24/06, 07:24 PM

Quote:

Also, I advice you to write all of your HTML in lowercase because cell phone browsers, or PSP browsers wont be able to read it.

Learn something new everyday. My teacher didn't tell us that when we were in the 'HTML unit' Although, I find scripting in capitals. Mistakes are easier to spot that way, IMO.

This site is also great for HTML tutorials. So if there is ever something that isn't clear here, or you want to learn more, just check it out.

Mistshade · 06/24/06, 09:14 PM

I will post several good sites that you can use as an HTML reference at the end of my guide. The world is quickly reverting to XHTML so I would be sure to properly nest all of your HTML codes and keep it in lowercase. An example of properly nesting is this:

Properly Nested:
Properly Nested

Not Properly Nested:
Not Properly Nested

Notice how the is in the very front and very back on the properly nested one? And notice how the is in the front, but not the very back? A cell phone browser would get all screwed up.

~~monkeybutt~~ · 06/24/06, 11:42 PM

http://www.lissaexplains.com/

While it is "for kids", its the best site for those new to HTML to learn.

Great writeup!

Color Me Evil · 06/25/06, 02:40 AM

www.w3schools.com
Another site that I use for lots of things.

Since you said my "Nice writeup!" was lame, I will be more blunt about it.

You really only went into the basics. Unless you're going to post more threads, I suggest editing it daily with more information. The stuff you have now is really the stuff that everybody knows.

I skim. Don't take this into much consideration.

Mistshade · 06/25/06, 03:03 AM

Quote:

I will not post everything I know at one time. Every week or so or whenever I have the chance to I would continue on with my guide and post another chapter.

Gotcha there Boondock Saint :-). Yeah, at the moment nothing really big, everything is simple but I will continue to update it if anyone seems interested. I will also edit the previous chapters I have already created and make them better, but for now I just wan't to finish it. But at the moment I havn't noticed any particular interest.

Color Me Evil · 06/25/06, 03:06 AM

Quote:

I skim. Don't take this into much consideration.

lawlawlawl gotcha there Mistshade.
If that comment was supposed to fire something at me, you missed and hit my Pringles can.

Mistshade · 06/25/06, 03:52 AM

Ouch, okay. Fine, I surrender you win Boondock Saint :-P. <Raised White Flag>

zhara_marie · 08/15/06, 01:09 PM

This is very good!! Mistshade please update it!! I really need help with my HTML!!!

Ecstasy · 09/03/06, 07:59 PM

I'd like to point something out-- If you're looking for valid html, somewhere in your header you have to specify a DOCTYPE. Just paste the following code and you's all set.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML is much neater than HTML, though; I'd recommend that over HTML.

Gavin · 05/01/07, 12:20 PM

HTML Code Tutorial, this is where I go if in doubt.

MosesMohs · 11/17/07, 10:56 PM

this is a really good idea for those who need it!

06/24/06, 04:42 PM	#1
Mistshade Organization Member Join Date: May 2006 Location: New York Posts: 347 Rep Power: 3	The HTML Tutorial Introduction Hey all. The objective of this tutorial is to teach you how to build a web site. As some of you might know I am a web developer. I have experience in four web languages which are HTML, CSS, PHP, and SQL. Most of my experience is invested into HTML and CSS so I will be creating a guide that will teach the Kingdom Hearts Insider community on how to make a basic website. I will not post everything I know at one time. Every week or so or whenever I have the chance to I would continue on with my guide and post another chapter. The chapters will go in this sequence: What is HTML? The Beginning Fonts Text Manipulation Adding Images Adding Audio Links Buttons Textareas Frames Hecidecimal Codes Please do not penalize me I am wrong in some categories of HTML. Some of this stuff I do not use often considering I mostly use HTML borders. If you liked this guide and found it to be helpful please consider giving my reputation. It would be greatly appreciated. In addition, please keep flaming down to a minimum. I do not wish to be flamed, I only wish to help. Please say good stuff only. If I notice that no one is using it I will not continue. What is HTML HTML is the primary and predominent web language used to create the exterior of a web site. In other words it is the part of a web site that you can see. For example, a link or an image on a site is HTML, you can see it. Posting something on a forum, or a guestbook is PHP, and SQL (most likely). HTML is an acronym for Hyper Text Markup Language. The world is quickly shifting to XHTML as a web standard. XHTML is almost the same thing but you can consider it neater. It is properly nested which I will explain later in the guide. Also, I advice you to write all of your HTML in lowercase because cell phone browsers, or PSP browsers wont be able to compute it. So by the time XHTML is the standard you will be used to typing all of your coding in lowercase letters. Why would you want to make a web site? Because its load of fun, and can be quite puzzling. Sometimes you may encounter hard times when trying to learn HTML (which I doubt, all of you seem pretty intelligent for an exception of a few of you) but don't get discouraged. Just keep trying, you'll eventually get it. HTML is rather easy to learn. Once you start server-side scripting like PHP you may wan't to cry. HTML is WYSIWYG which is "What you see is what you get." This means its almost trial and error, if you screw up you will see it on the site. PHP if you screw up nothing will happen and you will be bombarded with errors. So when you display the site on your browser you will realize something is wrong because it wont look quite right. The Beginning You can use several programs to write HTML with. You can utilize HTML editors like Dreamweaver or PHP Designer. Or you can use programs that Windows supplies you with which is Notepad. Yes, that's right, Notepad. All you need to start writing your first web site is any text editor. For Macs your program which is equivilent to Notepad is SimpleText. I tried a plethera of different HTML editors but I just love Notepad too much. First I will teach you how HTML works. .html will be used to save every single one of your HTML files. When saving your file it should not be saved as a .txt but a .html. To open one of your HTML document as just the coding just open it with Notepad. To see it as a web site open it with your browser but either right clicking on the file and clickin Open As > Your Browser. Please type the following code into Notepad: Code: <html> <head> <title> Insert Text Here </title> </head> <body> Insert Text here </body> </html> That was easy enough, right? Well, anywho that will be the guidelines you will use on every single web site you will create. Every site is consisted of a header and body. Now you have no clue what any of that means so I will explain it to you. <html>: This is telling the browser that this is the start of an HTML document. Every single web site you create will start with this code. No coding or text or anything will be above this code. <head>: This is the information about the web site. The brwoser will read this as the start of the header. For example, this where the information about search engine content will be put. Like what keywords a search engine will pick up on, or the description of the site will be. For now we will just stick with editing the browser's caption bar which is at the very top of the screen and should say "KHInsider.com Forums. <title>: This is the code used to edit the browser's caption bar. The code tells the browser that this is going to be editing the browser's caption bar and nothing else. Insert Text Here: This is the variable in this code. This is what is changeable. This is the text that will be shown on the browser's caption bar. </title>: This is the ending to the <title> code. <body>: This is the start of the body of the web site. Everything you can see on the web site like text, images, tables, and sound (even though you can here it) will be located within this code. Insert Text Here: This is the variable of the code. This is where all of the html codes will be placed. Most codes have a variable, some change the size, some change the color. </body>: This is the ending to the <body> code. </html>: This is the ending to the <html> code. No text or html will be placed after this code. Never ever. Well, this is the end of the first chapter. If there are any mistakes I am sorry. After an hour or two your brain starts to go. The next parts you may already know from myspace or whatever. After these parts we will start entering the cool stuff like tables. I will edit my post or post another part within this week. Oh yes, if I am wrong in some places sorry. Fonts Well, now since I have explained to you what HTML is, and what you should always have in your HTML document, I will explain to you how to editing the text you put on your site. This is pretty simple. All of this coding should be between the <body> and </body> tags. You probably already know this based on past experience or from myspace (which I hate). There is many ways to change how fonts appear. The way I am teaching you how to change font is simple. The majority of the codes will start with <font. Here is a list of some codes. <font color="Insert Color Here">Insert Text Here</font>: This code will change the color of the text you have supplied. <font size="Insert Number Here">Insert Text Here</font>: This code will change the size of the text you have supplied. <font face="Insert Font Type Here">Insert Text Here</font>: This code will change the font family of the text you have supplied. <i>Insert Text Here</i>: This code will make the code supplied have a slant, it other words its italic. <strong>Insert Text Here</strong>: This code will make the code supplied bold or strong. <u>Insert Text Here</u>: This code will make the code supplied have an underline. <blink>Insert Text Here</blink>: Just don't use this one, it will cause seizures. <s>Insert Text Here</s>: This will make the code supplied has a slash out through it. <sup>Insert Text Here</sup>: This will decrease the size of the test, and make it higher. For example ten to the sixth power. The sixth is superscript. <sub>Insert Text Here</sub>:This will also decrease the size of the given text, but will make it lower. You can do this all by CSS (Cascading Style Sheet) but first I think you should grasp basic knowledge of HTML. Now lets say you want to combine all of this together to make one code. Here is how you would do this: Code: <font face="Insert Font Face Here" size="Insert Number Here" color="Insert Color Here"><s><blink><b><u><i>Insert Text Here</i></u></b></blink><s></font> Notice how it is all properly nested, and notice how the variables are always surrounded by " ". In additon, all of these codes should be place in the <body> section. I will properly add more to this chapter but this is all I have for now. Will update later. Before I end this chapter though I would like to show you a little HTML site example. Here it is: Code: <html> <head> <title> Mistshade's Site </title> </head> <body> <font color="blue">Welcome to Mistshade's site</font> <font color="red"> This site teaches you HTML!</font> <font size="10" color="blue"> I hope you like it!</font> <i><u>See you all later!</u></i> </body> </html> Last edited by Mistshade; 06/25/06 at 02:11 AM.

06/24/06, 04:52 PM	#2
Xalechim Banjo kazooie FTW Join Date: Feb 2006 Location: the party in my pants Posts: 1,756 Rep Power: 4	Re: The HTML Tutorial a very good idea to construct a guide for those who need help in HTML basics a must look at

06/24/06, 09:14 PM	#4
Mistshade Organization Member Join Date: May 2006 Location: New York Posts: 347 Rep Power: 3	Re: The HTML Tutorial I will post several good sites that you can use as an HTML reference at the end of my guide. The world is quickly reverting to XHTML so I would be sure to properly nest all of your HTML codes and keep it in lowercase. An example of properly nesting is this: Properly Nested: <b><i>Properly Nested</i></b> Not Properly Nested: <b><i>Not Properly Nested</b></i> Notice how the <b> is in the very front and very back on the properly nested one? And notice how the <b> is in the front, but not the very back? A cell phone browser would get all screwed up.

06/24/06, 11:42 PM	#5
~~monkeybutt~~ Banned Join Date: Dec 2004 Location: Monkeybutt INC Posts: 3,622 Rep Power: 0	Re: The HTML Tutorial http://www.lissaexplains.com/ While it is "for kids", its the best site for those new to HTML to learn. Great writeup!

06/25/06, 02:40 AM	#6
Color Me Evil Spy of Atlantis Join Date: Mar 2006 Location: Boston Age: 16 Posts: 3,757 Rep Power: 8	Re: The HTML Tutorial www.w3schools.com Another site that I use for lots of things. Since you said my "Nice writeup!" was lame, I will be more blunt about it. You really only went into the basics. Unless you're going to post more threads, I suggest editing it daily with more information. The stuff you have now is really the stuff that everybody knows. I skim. Don't take this into much consideration. Last edited by Color Me Evil; 06/25/06 at 02:58 AM.

06/25/06, 03:52 AM	#9
Mistshade Organization Member Join Date: May 2006 Location: New York Posts: 347 Rep Power: 3	Re: The HTML Tutorial Ouch, okay. Fine, I surrender you win Boondock Saint :-P. <Raised White Flag>

08/15/06, 01:09 PM	#10
zhara_marie Keyblade Wielder Join Date: Aug 2005 Location: in a house where boredom is banned! Age: 16 Posts: 311 Rep Power: 4	Re: The HTML Tutorial This is very good!! Mistshade please update it!! I really need help with my HTML!!!

09/03/06, 07:59 PM	#11
Ecstasy This is cocaine speaking. Join Date: Apr 2004 Location: Boston, babes. Age: 17 Posts: 1,029 Rep Power: 7	Re: The HTML Tutorial I'd like to point something out-- If you're looking for valid html, somewhere in your header you have to specify a DOCTYPE. Just paste the following code and you's all set. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML is much neater than HTML, though; I'd recommend that over HTML.

05/01/07, 12:20 PM	#12
Gavin Moderator Join Date: Jan 2005 Location: Australia, South Australia Age: 18 Posts: 4,519 Rep Power: 11	Re: The HTML Tutorial HTML Code Tutorial, this is where I go if in doubt.

11/17/07, 10:56 PM	#13
MosesMohs Organization Member Join Date: Dec 2006 Location: britian. Age: 16 Posts: 455 Rep Power: 2	Re: The HTML Tutorial this is a really good idea for those who need it!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode