HTMLGuy's HTML Tutorial

Zack · 12-27-2005, 11:37 PM

HTML is the main structure of all web pages. That's why every web designer/programmer should have an in-depth understanding of the basics of this wonderful language. I will run through the basics in this article, but if you have any other questions please create a seperate thread. Here is a structure split up of a simple page.

The Heading is where the pre-opening info is held such as pop-up JavaScript, CSS info, Meta tags, the title, and other stuff (php info usually comes before the heading). A sample is here...

Code:

<?php
PHP Info
?>
<html>
<head>
<title>My HTML Page</title>
<script type="text/javascript">
JS Info Here
</script>
<style type="text/css">
CSS Info Here
</style>
Possible Meta Info (Here's a good description)
</head>

Well, that was pretty easy huh? Here's what happened. The Title Displays the Title of the page at the top of the window such as "iWEBTOOL Talk". The Script and Style tags would support different types of code such as Javascript or CSS. The Meta Info would tell the browser and search engines info about your site...very useful if you want to have a search-engine happy site. Now we will move onto the next and last section of the basics of HTML.

The Body is where the action happens. Everything you want displayed is put into the body area. This is the most important, yet sometimes difficult area of HTML. Here is a sample of what I am talking about...

Code:

<body>
<center>
<a href="http://www.yahoo.com"><img src="http://www.yahoo.com/main.jpg"></a>
</center><br />
<table bgcolor="white" border="1" bordercolor="black" cellspacing="0" cellpadding="5"><tr><td colspan="2"><h1>My First Table</h1></td></tr>
<tr><td><hr color="black" width="100%">Content after horizontal rule</td><td>Some more content without a horizontal rule</td></tr></table>
<div id="mydiv" style="border: 1px solid black; width: 100%"><h1>My First Div</h1>
This is basically a CSS table, and is supported, and looks better, in all browsers.
</div>
<font size="-2" face="verdana" color="red">This is by HTML</font>
</body>
</html>

Wow! That's a whole bunch of code! This is all trying to give you a basic understanding of what HTML can do. Let's start by telling you what it means. The "<center>" tag centers whatever is between it and it's ending or "</center>". The "<a href....>" tag is a hyperlink. It can link to another page, or some other website. Probably one of the most used tags. The "<img src...>" tag is a tag which displays an image. You can host your image on an image host such as Image Shack, or host it on your computer. Then we close the "<a>" tag by putting a slash in front of the a. Then we have a table. The Table attributes are bgcolor or background color, cellspacing, or the border width, bordercolor or...come on, it's obvious, and cellpadding, or how much room is between the border and the content. The "<tr>" tags are table rows, and the "<td>" tags are table datas. "<td>"s are where you put the content, whether it is text or images. Then you see your descriptor of the td, or colspan="2". It works like the table attributes. It means that the td spans two columns. Notice that the following line has two tds and only one tr. "<h1>" is a shorcut to font size, which makes the size of the letters larger (It can be h1 to h6, with no .x's) An "<hr>" is basically just a line. I'll just run over the css descriptor or "<div>". Divs are basically areas of code that are designed, and modeled to CSS' description in it's code. If the CSS for that div is to make the background orange than the background will be orange. You can style anything! The <div style="///" part is just a shorcut to CSS styling. After closing the div, you see the font tag. This tag has been for the most part killed because of CSS, but you can still use it, if you want a quick solution. You can tell the browser which font (or face) the text should be, what color, and what size. Then we close the body, then the html tag, and we have a page!

How do I save a page?
Saving a page is fairly easy. All of this should be written in Notepad then save that file as (whatever).html . Make sure that the scrolling box below says "All File Types" instead of "Text Document (.txt)".

This was just a skim into the pool of HTML. Be sure to look into it more, maybe buy a book at your Barnes, sit down with a Starbucks, and read 'til your hearts desire.

This is original, and was not copied off of another web site. This is pure HTML(Guy)!

Other Resources
W3 Schools
A Chart of most HTML tags (not all!)

Please post a link or two, so I can add to my database of good HTML resources. Thank you for reading, and I hoped this helped you in some way. Don't be shy to ask questions!

HTMLGuy

m@m · 09-04-2006, 04:33 AM

thank you for grate posting

amir abbas · 09-04-2006, 08:06 AM

very good article

i suggest w3schools site
on that site bigginers can find lot of articles

drhowarddrfine · 09-10-2006, 01:11 PM

Do NOT use any of the html in this article! Many of the elements were deprecated years ago and it doesn't even mention doctypes! It's like 1998 all over again.

Instead, go to w3schools and pick up some good information and ask questions.

Zack · 09-10-2006, 08:05 PM

The stuff may be outdated because this is an html article, not a html and css article. I didn't include doctypes because this is a basics tutorial, not an advanced.
HTMLGuy

drhowarddrfine · 09-10-2006, 09:29 PM

But HTML is not outdated and doctypes are required to keep browsers on the same set of rules, css or no css. You will never get IE to perform correctly without one so leaving this important item out will only confuse the student when they find their page does not display the same in modern browsers like Firefox/Opera/Safari/Netscape/Konqueror/Camino/etc. Such as, the box model problem with IE.

rohan2kool · 09-11-2006, 09:09 AM

Quote:

Originally Posted by drhowarddrfine

Do NOT use any of the html in this article! Many of the elements were deprecated years ago and it doesn't even mention doctypes! It's like 1998 all over again.

Instead, go to w3schools and pick up some good information and ask questions.

you could say that politely and you really should.

Kirtan · 10-02-2006, 03:09 AM

Many thanks for providing lots of informations in your article.

sagecs · 10-22-2006, 04:11 PM

Thanks for info on w3schools. In 2 mins I learned what I've been trying to do for hours.

12-27-2005, 11:37 PM	#1
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 759	HTMLGuy's HTML Tutorial HTML is the main structure of all web pages. That's why every web designer/programmer should have an in-depth understanding of the basics of this wonderful language. I will run through the basics in this article, but if you have any other questions please create a seperate thread. Here is a structure split up of a simple page. The Heading is where the pre-opening info is held such as pop-up JavaScript, CSS info, Meta tags, the title, and other stuff (php info usually comes before the heading). A sample is here... Code: <?php PHP Info ?> <html> <head> <title>My HTML Page</title> <script type="text/javascript"> JS Info Here </script> <style type="text/css"> CSS Info Here </style> Possible Meta Info (Here's a good description) </head> Well, that was pretty easy huh? Here's what happened. The Title Displays the Title of the page at the top of the window such as "iWEBTOOL Talk". The Script and Style tags would support different types of code such as Javascript or CSS. The Meta Info would tell the browser and search engines info about your site...very useful if you want to have a search-engine happy site. Now we will move onto the next and last section of the basics of HTML. The Body is where the action happens. Everything you want displayed is put into the body area. This is the most important, yet sometimes difficult area of HTML. Here is a sample of what I am talking about... Code: <body> <center> <a href="http://www.yahoo.com"><img src="http://www.yahoo.com/main.jpg"></a> </center><br /> <table bgcolor="white" border="1" bordercolor="black" cellspacing="0" cellpadding="5"><tr><td colspan="2"><h1>My First Table</h1></td></tr> <tr><td><hr color="black" width="100%">Content after horizontal rule</td><td>Some more content without a horizontal rule</td></tr></table> <div id="mydiv" style="border: 1px solid black; width: 100%"><h1>My First Div</h1> This is basically a CSS table, and is supported, and looks better, in all browsers. </div> <font size="-2" face="verdana" color="red">This is by HTML</font> </body> </html> Wow! That's a whole bunch of code! This is all trying to give you a basic understanding of what HTML can do. Let's start by telling you what it means. The "<center>" tag centers whatever is between it and it's ending or "</center>". The "<a href....>" tag is a hyperlink. It can link to another page, or some other website. Probably one of the most used tags. The "<img src...>" tag is a tag which displays an image. You can host your image on an image host such as Image Shack, or host it on your computer. Then we close the "<a>" tag by putting a slash in front of the a. Then we have a table. The Table attributes are bgcolor or background color, cellspacing, or the border width, bordercolor or...come on, it's obvious, and cellpadding, or how much room is between the border and the content. The "<tr>" tags are table rows, and the "<td>" tags are table datas. "<td>"s are where you put the content, whether it is text or images. Then you see your descriptor of the td, or colspan="2". It works like the table attributes. It means that the td spans two columns. Notice that the following line has two tds and only one tr. "<h1>" is a shorcut to font size, which makes the size of the letters larger (It can be h1 to h6, with no .x's) An "<hr>" is basically just a line. I'll just run over the css descriptor or "<div>". Divs are basically areas of code that are designed, and modeled to CSS' description in it's code. If the CSS for that div is to make the background orange than the background will be orange. You can style anything! The <div style="///" part is just a shorcut to CSS styling. After closing the div, you see the font tag. This tag has been for the most part killed because of CSS, but you can still use it, if you want a quick solution. You can tell the browser which font (or face) the text should be, what color, and what size. Then we close the body, then the html tag, and we have a page! How do I save a page? Saving a page is fairly easy. All of this should be written in Notepad then save that file as (whatever).html . Make sure that the scrolling box below says "All File Types" instead of "Text Document (.txt)". This was just a skim into the pool of HTML. Be sure to look into it more, maybe buy a book at your Barnes, sit down with a Starbucks, and read 'til your hearts desire. This is original, and was not copied off of another web site. This is pure HTML(Guy)! Other Resources W3 Schools A Chart of most HTML tags (not all!) Please post a link or two, so I can add to my database of good HTML resources. Thank you for reading, and I hoped this helped you in some way. Don't be shy to ask questions! HTMLGuy __________________ yaxal releases '07

09-04-2006, 04:33 AM	#2
m@m Smurf Join Date: Sep 2006 Posts: 21	Re: HTMLGuy's HTML Tutorial thank you for grate posting

09-04-2006, 08:06 AM	#3
amir abbas Junior Member Join Date: Sep 2006 Posts: 12	Re: HTMLGuy's HTML Tutorial very good article i suggest w3schools site on that site bigginers can find lot of articles __________________ persia CMS site \| persia CMS forum

09-10-2006, 01:11 PM	#4
drhowarddrfine Newcomer Join Date: Sep 2006 Posts: 2	Re: HTMLGuy's HTML Tutorial Do NOT use any of the html in this article! Many of the elements were deprecated years ago and it doesn't even mention doctypes! It's like 1998 all over again. Instead, go to w3schools and pick up some good information and ask questions.

09-10-2006, 08:05 PM	#5
Zack Junior Guru Join Date: Dec 2005 Location: North Carolina Posts: 759	Re: HTMLGuy's HTML Tutorial The stuff may be outdated because this is an html article, not a html and css article. I didn't include doctypes because this is a basics tutorial, not an advanced. HTMLGuy __________________ yaxal releases '07

09-10-2006, 09:29 PM	#6
drhowarddrfine Newcomer Join Date: Sep 2006 Posts: 2	Re: HTMLGuy's HTML Tutorial But HTML is not outdated and doctypes are required to keep browsers on the same set of rules, css or no css. You will never get IE to perform correctly without one so leaving this important item out will only confuse the student when they find their page does not display the same in modern browsers like Firefox/Opera/Safari/Netscape/Konqueror/Camino/etc. Such as, the box model problem with IE.

10-02-2006, 03:09 AM	#8
Kirtan Member Join Date: Sep 2006 Posts: 63	Re: HTMLGuy's HTML Tutorial Many thanks for providing lots of informations in your article. __________________ Kirtan - Genex Technologies Affordable Web Design And Hosting Services \| Inexpensive Web Hosting

10-22-2006, 04:11 PM	#9
sagecs Junior Member Join Date: May 2006 Location: Penna Posts: 30	Re: HTMLGuy's HTML Tutorial Thanks for info on w3schools. In 2 mins I learned what I've been trying to do for hours. __________________ Lee Ann www.sagecs.biz

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
HTML and Tables	King Gareth	HTML	17	12-28-2006 12:35 AM
Basic HTML Help	sagecs	Programming	4	11-04-2006 12:20 PM
html	m@m	HTML	2	10-02-2006 03:11 AM
HTMLGuy's CSS Tutorial	Zack	HTML	5	03-16-2006 03:57 AM
Will HTML Disappear?	Zack	HTML	4	03-15-2006 09:41 PM