]
12-02-2010, 09:22 AM
Hello HackCommunity: In about the 20 minutes it takes to in depth read this post, you will have a basic understanding of the HTML programming language. Be patient, learning programming languages is not like learning a real life language, it is much easier. It just takes practice learning to use all of the commands to the best of their ability. A lot of HTML programmers use only about 15 commands with a few different modifications.
Remember HTML is the structure of the website, not the design. The design comes from CSS. Remember that.
Vocabulary
Tag: Any element and its add-ons enclosed within html tags (<> or </>)
Open Tag: The tag that begins an element. The opening tag is <example>.
Close Tag: The tag that ends an element. The closing tag is </example>.
Element: An element is like the command. For instance, the <html> tag commands or tells the browser that this is the beginning of a webpage.
Attributes: Are like sub-elements added to an element. You can use these to simplify the code on a webpage. Example, if you are making a paragraph that you wanted centered in the page, instead of using the <p> and the <center> tags, you can you the <p> tag like so: <p align="center">.
________________________________________________________________________________
Basic Tags in HTML (No attributes)
<html> | </html> - These begin and end a webpage.
<head> | </head> - Begin and end the head; where the style of the page goes.
<title> | </title> - Put the words in the bar at the top of the browser.
<body> | </body> - Begins and ends the body; where the structure of the page goes.
<p> | </p> - Starts and ends a paragraph. Double Spaces.
<h?> | </h?> - Heads a sentence in bold letters and is double spaced. The "?" means a number goes there. You can put 1 - 7 here. <h1> is the biggest heading while <h7> is the smallest.
<br> - is a line break. It is one of the few tags that don't need a close tag. It is the equivalency of hitting the enter button while typing, it just moves down to the next line.
<hr> | </hr> - The horizontal rule. Basically draws a line on the webpage, horizontally of course. Kind of like --------------------. It is used for style to separate sections of a page.
<img src="image.(gif, jpg, or whatever picture type it is.)"> - It is another one of the few that don't have a closing tag.
<a href="webpage.html"> | </a> - this for linking to another webpage.
<font> | </font> - this changes the size, color and face of the font.
________________________________________________________________________________
Basic Structure for ALL pages.
First let me iterate, tags are NOT case sensitive. <HTML> and <html> and <hTmL> are read the same way by the browser.
Here is an example of the basic structure for ALL webpages, good and bad.
You have three parts: <html>, <head> and <body>. These are what make the website tick. Without the <html>/</html> tags, your browser wouldn't be seeing this page. Without the <head>/<head> tag, the pimp ass style and colors and title for the page would not exist. And obviously without the body, there would be nothing on the webpage. Just a big colored space.
REMEMBER: THE HEAD IS SEPARATE FROM THE BODY AND THE PERSON IS SEPARATE FROM THE GROUP(HTML). Otherwise just remember the way it goes, in the order it goes. Thats the way it happens folks.
<html>start the page.
<head>start the head
</head>end the head
<body> start the body
</body> end the body
</html> end page
Remember that in that order. You don't have to have everything spaced and tabbed out like I do in the source, and most of those spaces (except the ones in the writing like the title and whats in the body) won't show up on the page.
REMEMBER YOUR "/" in the closing tags. Modern browsers are good about recognizing closing tags and stuff sometimes, so if you flub up, its not to big a deal. But if it obviously messes up the page, then you will have to go through and fix it.
________________________________________________________________________________
How to Use The Other Tags
The <p>aragraph Tag.
Now, the paragraph tag is quite easy to learn.
These are the most common <p> tags and add-ons you will use. Copy and paste the HTML from there into Notepad, and save as "whateveryouwantto".html and open it in your browser to see how the tags effect the structure of the page.
------------------------------------------------
The <body> Tag.
The only tag you need to worry about here is the bgcolor add-on to change the pages color.
It will look like this: <body bgcolor="#000000">
or
It will look like this: <body bgcolor="red">
You can do either the name of the color or the hexadecimal for it. Hexadecimal allows you to be really specific on your color, so most coders use this.
-------------------------------------------------------------------
The <hr> Tag.
To change the color and size of the line, manipulate with the size=??? width=???% and color="#?????? or word". Say you want it across the whole page, then width is 100%. How ever thick you want it with size, and the color with color. So make it across the page, a little thicker, and red we will do this.
<hr color="red" size=5 width=100%>
-------------------------------------------------------------------
The <font> Tag.
To manipulate the font tag to change the color, size and font itself, use these add-ons. Sizes go 1-7 as well for font. 1 is the biggest while 7 is the smallest.
So <font size=3 color="red" face="sans serif (or other font)">
________________________________________________________________________________
Wrapping Up
Now that you have the understanding of the tags, where they go, and how to manipulate them, you can make basic webpages. To better elaborate on these tags and clear up misconceptions, here is a
Remember HTML is the structure of the website, not the design. The design comes from CSS. Remember that.
Vocabulary
Tag: Any element and its add-ons enclosed within html tags (<> or </>)
Open Tag: The tag that begins an element. The opening tag is <example>.
Close Tag: The tag that ends an element. The closing tag is </example>.
Element: An element is like the command. For instance, the <html> tag commands or tells the browser that this is the beginning of a webpage.
Attributes: Are like sub-elements added to an element. You can use these to simplify the code on a webpage. Example, if you are making a paragraph that you wanted centered in the page, instead of using the <p> and the <center> tags, you can you the <p> tag like so: <p align="center">.
________________________________________________________________________________
Basic Tags in HTML (No attributes)
<html> | </html> - These begin and end a webpage.
<head> | </head> - Begin and end the head; where the style of the page goes.
<title> | </title> - Put the words in the bar at the top of the browser.
<body> | </body> - Begins and ends the body; where the structure of the page goes.
<p> | </p> - Starts and ends a paragraph. Double Spaces.
<h?> | </h?> - Heads a sentence in bold letters and is double spaced. The "?" means a number goes there. You can put 1 - 7 here. <h1> is the biggest heading while <h7> is the smallest.
<br> - is a line break. It is one of the few tags that don't need a close tag. It is the equivalency of hitting the enter button while typing, it just moves down to the next line.
<hr> | </hr> - The horizontal rule. Basically draws a line on the webpage, horizontally of course. Kind of like --------------------. It is used for style to separate sections of a page.
<img src="image.(gif, jpg, or whatever picture type it is.)"> - It is another one of the few that don't have a closing tag.
<a href="webpage.html"> | </a> - this for linking to another webpage.
<font> | </font> - this changes the size, color and face of the font.
________________________________________________________________________________
Basic Structure for ALL pages.
First let me iterate, tags are NOT case sensitive. <HTML> and <html> and <hTmL> are read the same way by the browser.
Here is an example of the basic structure for ALL webpages, good and bad.
[To see links please register here]
You have three parts: <html>, <head> and <body>. These are what make the website tick. Without the <html>/</html> tags, your browser wouldn't be seeing this page. Without the <head>/<head> tag, the pimp ass style and colors and title for the page would not exist. And obviously without the body, there would be nothing on the webpage. Just a big colored space.
REMEMBER: THE HEAD IS SEPARATE FROM THE BODY AND THE PERSON IS SEPARATE FROM THE GROUP(HTML). Otherwise just remember the way it goes, in the order it goes. Thats the way it happens folks.
<html>start the page.
<head>start the head
</head>end the head
<body> start the body
</body> end the body
</html> end page
Remember that in that order. You don't have to have everything spaced and tabbed out like I do in the source, and most of those spaces (except the ones in the writing like the title and whats in the body) won't show up on the page.
REMEMBER YOUR "/" in the closing tags. Modern browsers are good about recognizing closing tags and stuff sometimes, so if you flub up, its not to big a deal. But if it obviously messes up the page, then you will have to go through and fix it.
________________________________________________________________________________
How to Use The Other Tags
The <p>aragraph Tag.
Now, the paragraph tag is quite easy to learn.
[To see links please register here]
These are the most common <p> tags and add-ons you will use. Copy and paste the HTML from there into Notepad, and save as "whateveryouwantto".html and open it in your browser to see how the tags effect the structure of the page.
------------------------------------------------
The <body> Tag.
The only tag you need to worry about here is the bgcolor add-on to change the pages color.
It will look like this: <body bgcolor="#000000">
or
It will look like this: <body bgcolor="red">
You can do either the name of the color or the hexadecimal for it. Hexadecimal allows you to be really specific on your color, so most coders use this.
-------------------------------------------------------------------
The <hr> Tag.
To change the color and size of the line, manipulate with the size=??? width=???% and color="#?????? or word". Say you want it across the whole page, then width is 100%. How ever thick you want it with size, and the color with color. So make it across the page, a little thicker, and red we will do this.
<hr color="red" size=5 width=100%>
-------------------------------------------------------------------
The <font> Tag.
To manipulate the font tag to change the color, size and font itself, use these add-ons. Sizes go 1-7 as well for font. 1 is the biggest while 7 is the smallest.
So <font size=3 color="red" face="sans serif (or other font)">
________________________________________________________________________________
Wrapping Up
Now that you have the understanding of the tags, where they go, and how to manipulate them, you can make basic webpages. To better elaborate on these tags and clear up misconceptions, here is a
[To see links please register here]
for you. Also[To see links please register here]
is GREAT. You have all the resources, now have fun and happy coding!
