HTML, Webpage, tags, HTML tags, HTML Example, HTML codes, HTML help, HTML Explanation

WELCOME
TO THE
HTML HELP PAGE

H yper
T ext
M arkup
L anguage

That is all HTML means, nothing really mysterious. It uses only the letters and symbols on your regular keyboard. What it does is tell a browser what to show on a Page that you have asked for (by putting the address in the address bar), and how to format the information for that page.

HTML is really quite simple, and most of the "tags" (what we call the different "codes") are common sense, therefore easy to remember. Besides, you should have a printout of the tags to refer to, in case you do forget. Start with the common and basic ones, and add others later on.

Here is a basic "HTML document" (Webpage)

<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>This is the second paragraph, and I use the "break" tag, <BR> to start a new line of text where I want to, without a blank line in between. </P> </body> </html>

To see how the above "Simple HTML Example" looks as a Webpage Click Here (example1)
This Example and other examples, charts, etc. on these pages will come up in a small, new window. How done? With Javascript.

NO JAVASCRIPT ? Click Here

Before you close the window that comes up showing the "Simple Example," please RIGHT-CLICK anywhere inside that window. Choose "View Source" from the pop-up Menu (its about halfway down the Menu with IE, a little less than half with Netscape).
Another new window will appear and it will show the "source", that is the HTML that tells the browser what to show as a page. It will be exactly like the HTML "coding" shown above.

Certain of the tags in the above document must be used for every Webpage, usually called an "HTML document." Browsers expect specific information because they are programmed according to HTMLand SGML specifications. (don't worry about SGML)

The required elements are the <html>, <head>, <title>, and <body> tags and their corresponding end (closing) tags </title>, </head>, </body> and </html>.

HTML tags come in pairs, as shown, with one or two exceptions.

<html>
This tells the Browser that this is a HyperText Markup Language document.
<head>
Between here and the "closing head tag" we put the page Title (inside the Title Tags), other information for the browser, and information for Search Engine "Bots", in Meta Tags. More on this later. The other browser information (javascripts for example) and Meta Tags are optional. What is here in the "Head section" does NOT show on the page itself.
<title>
This is NOT the Title that shows at the top of your page! This Title is what appears at the top of a browser - on the "Title Bar."
</title>
You must "close" the title tag
</head>
You must "close" the head tag
<body>
Everything that shows for your Webpage goes here: text, graphics, links. This section can be short or long. To have it look good you will need to learn the Paragraph tag, line break tag, center tag, image and link tags. <P> </P>,   <BR>,   <CENTER> </CENTER>, respectively. We will get to the image and link tags a little farther on. They are slightly more involved. The closing Paragraph tag, </P>, is optional and the line BReak tag does not have a closing tag.
</body>
You must "close" the body tag
</html>
You must "close" the HTML tag, telling the visiting browser that this is the end of the document.

Because you should include these tags in each file, you might want to create a template file with them. (Some browsers will format your HTML file correctly even if these tags are not included. But some browsers won't! So make sure to include them.)

HTML tags are not case sensitive, but you should be consistent. If you use capital letters for an Opening tag, also use capitals for that Closing tag, like in the CENTER tags above.

Let's use the Center tags in "A Simple HTML Example" around the Heading on the top of the page (we do not mean HEAD section of document here) like this:

<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <CENTER> <H1>HTML is Easy To Learn</H1> </CENTER> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>This is the second paragraph, and I use the "break" tag, <BR> to start a new line of text where I want to, without a blank line in between. </P> </body> </html> And it will look Like This. (example2)

Now let us move the Closing CENTER tag so that the whole document is centered, like this:

<html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <CENTER> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P> <P>This is the second paragraph, and I use the "break" tag, <BR> to start a new line of text where I want to, without a blank line in between. </P> </CENTER> </body> </html> Now our HTML document looks Like This. (example3) Personally, I prefer the "Heading" at the top of the page and/or the Welcome Sign image centered, and the following text aligned left, like a normal letter or book page (like this page :).

What I want you to see here is that it is NOT necessary to have

<CENTER> your text here </CENTER>
on every line to have a number of images and/or text blocks centered on a page. You only need to put the closing </CENTER> tag when you want to switch to having things aligned left (or right - there is a way to do that).
Nor is it necessary to have, for example,
<font color="#FF0000" size="1"> your row of red text here </font>
on nearly every line. You only need these tags when you are CHANGING the FONT color and/or size, not every line when they are still the same color and size.
The WYSIWYG (What You See Is What You Get) editors do this, FrontPage and Composer are the worst. The necessary tags to format the page - the text, image, and link codes - are so buried in all this unnecessary GARBAGE (excuse me :o) that it is no wonder that people throw up their hands in horror and are afraid to touch HTML coding! A few times, to help a friend in need, I have had to go in and straighten out (edit) pages made with certain WYSIWYG editors. It was a real pain hunting for what I needed to fix, and I KNEW what I was looking for!

About the HEADING TAG, <H1>HTML is Easy To Learn</H1>, used in these examples:
1. You can put any text inside HEADING TAGS of course
2. There are six (6) of these "Headings" recognized by browsers.
3. They are

<H1></H1>, <H2></H2>, <H3></H3>, <H4></H4>, <H5></H5>, <H6></H6> 4. H1 is the largest and H6 is the smallest. They can also be written in lower case.

NEXT - HTML Builder



NO JAVASCRIPT! If you do NOT have Javascript or if you have it disabled, here are links to the examples given above. However, these come up in a New FULL SIZE browser window, not a small one like the Javascript windows. You can resize the NEW window yourself if you wish to keep it up to compare with this page's explanations.
Example 1
Example 2
Example 3

Atomz Search   for  starspiderdancing.net  sites

clear.gif

Advanced Search



EasyCounter replaces counter062203 on June 22, 2003

EMAIL: Webmaster

All Original Art -- Copyright © by Individual Artist -- All Rights Reserved
Site and Web Page design by Star Spider Dancing -- All Rights Reserved
This page created November 27, 2000 ||


Go To Top
Hosted by:
www.starspiderdancing.net