Choose a link to get started:

ALL NEW!!!

 Scrolling Marquees

The Basics

 The Basics
Manipulating Text
Images
Backgrounds
Links

More Advanced Topics

 The <HEAD> Tag
Tables
Forms
Frames
Lists

Advanced Topics

 Image Maps
CSS - Part 1
CSS - Part 2
CSS - Part 3
CSS - Part 4

Additional Topics

 XML Tag Formatting
XHTML - Part 1
XHTML - Part 2

Just the Basics

        This is an introduction to the basic design of an HTML web page. There are certain things that must be included in every web page you make. There are, of course, exceptions to the rule, as there are exceptions to every rule in the world of HTML. For your first look at HTML script, why don't you take at look at the source of this page. Simply right click on this paragraph, and click on the menu item "View Source". This may look confusing to you know, by the time you have gone through the tutorials here, you will be an expert and reading, decoding, and writing HTML. First off, let's have a look at the basic setup of almost every web page.

<HTML>
<HEAD>
<TITLE>The Title</TITLE>
Other Random HEAD stuff
</HEAD>
<BODY>
Other Random BODY stuff
</BODY>
</HTML>

         This basic setup will be the basis of almost every web page you make. Those objects (the words inside of the greater than and less than brackets), are called tags. The first tag in this script, the <HTML> tag, starts the whole process, while its counterpart, the </HTML> tag, ends the process. These are the only two tags required by every web page you make, without exception. We will discuss the <HEAD> tag later, as it receives its own tutorial. The <BODY> tag starts the main part of the page, or the BODY of the page. Everything that you see on the web page in front of you was created between the <BODY> and </BODY> tags. If you haven't figured out already, the / stops any tag it is put in front of, required the appropriate starting tag is present somewhere in the page.

        Just a little hint about what to do when you save your document in NotePad. When saving your web page file, save it with the suffix .html. If you omit this, it becomes a text file.

        The next topic we will talk about in our journey through the world of HTML is attributes. Attributes are mini tags that go inside of the main tags. Allow me to demonstrate.

<HTML LANG="EN">

        The LANG="EN" would be the attribute. This tells the computer that the HTML script on this page will be in English. Attributes do not support their own set of brackets so they must be inside the brackets of a different tag. In short, attributes describe the tag they are placed inside of. However, every tag has a different set of attributes, so not every attribute can go in every tag.


        The final subject on The Basics page is the concept of horizontal rulers. They, unlike the HTML tag, require no special tag to end its effect, so the use of the </HR> is not needed. They are made using this tag : <HR>. It, however, like the HTML tag, has a set of attributes that are compatible with the tag. These are :

  1. ALIGN
  2. COLOR
  3. NOSHADE
  4. SIZE
  5. WIDTH


        Let's talk about the ALIGN attribute first. It can have three values : LEFT, CENTER, RIGHT. This designates where on the page it will be, horizontally speaking. For example :





<HR ALIGN="     ">

        These examples should give you a very clear picture of what the ALIGN attribute does. If you do not include the ALIGN attribute, then the horizontal ruler will be placed on the left. This is called DEFAULT.
        The next attribute is the COLOR attribute. This designates the color of the horizontal ruler. The default color is the gray color you see in the others. Shown below are three horizontal rulers, only colored.





<HR COLOR="      ">

        The next attribute requires no special value. You just simply add the name : NOSHADE. This prevents the 3-D effect of the horizontal ruler, as shown below. The first HR has the NOSHADE added to it, while the second does not :



<HR NOSHADE>

        The next attribute determies the vertical size of the horizontal ruler. This SIZE is designated in pixels. If you do not know what pixels are, then here you are. Pixels are tiny boxes with which the page is divided. They are also the basic computer unit for length and size in general. The SIZE can also be a percentage of the screen, but you must add the percentage sign after the number.



        Please note that the HR is clear when larger than 2, unless the NOSHADE attribute is added. The default size is 2.

<HR SIZE="      ">

        The final attribute we will discuss of the horizontal ruler is the WIDTH attribute. The WIDTH is the horizontal size, rather than the vertical size, of the ruler. It, like SIZE, is either designated in pixels or in a percentage of the screen, where the default is 100%.




<HR WIDTH="      ">


        That is our trip through the basics of the HTML language. It is, of course, just the basics, so don't stop here, go on to one of the other tutorials. My recommendation would be to go to the TEXT tutorial next. In fact, I recommend it so much, I have even provided a link to there for you. Good Luck!!!

Click Here to go to the Text Tutorial