HomeSitemapForumsLessons  

HTML Lesson 1

Introduction

HTML stands for HyperText Markup Language. HTML is basically a text file that is marked up with codes that are called tags. These tags tell web browsers what to do with the web page elements. Without these tags the browser would only display text files.

Tags There are two kinds of tags in HTML, container tags and empty tags. Then there are tag attributes in which they enhance the way the tag displays the content on the page. All tags consist of either <> or </>, these are called angle brackets.  These tell the browser that the text between them is an HTML command and tell the browser how to display the content.

Container Tags need both an opening tag <> and a closing tag </>. These tell the browser when to begin a command and when to end it. Most tags are comprised of container tags.

Empty Tags are made up of just the opening tag, the closing tag is not needed. The three most common empty tags are <HR> horizontal rule, <BR> line break, and <P> paragraph. The <P> can be used as an empty tag or a container tag with the closing tag being </P>. It is considered more proper to use the paragraph tags as container tags.

Attributes are added to a tag to enhance the way the tag displays the content on the page. They are made up of three components, the name of the attribute, the = sign and the value of the attribute. Attributes are optional.

Basic Structure Tags are the tags required by the browser , without them the browser will not recognize the file as being an HTML file and the if the page loaded it would not be displayed properly. These tags are the <HTML> <HEAD> <TITLE> and <BODY> tags. When using FrontPage or AceHTML these tags are automatically included in any new page.

<HTML> This is the first tag on the page and it tells the web browser that it is an HTML document. Then at the very end of the page the </HTML> tag is displayed to tell the browser that the document is finished.

<HEAD> This tag holds the page title, meta tags, javascript, style sheets. When this information is finished it would end with the </HEAD> tag.

<TITLE> This tag tells the browser the name of the page. This will be displayed in the browsers title bar. The end tag for this is </TITLE>

<BODY>This tag will hold all the information you want displayed on the page. When you have finished entering your data you want displayed you would end it with </BODY>.

Putting all the basic structure tags together your page would look as follows:

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

Paragraphs are created by using the <P> tag, it is not mandatory to use the end tag </P> but it will assist you in easily recognizing where a paragraph begins and ends when editing a page. You enter the <P> tag just before your paragraph and then the </P> tag at the end of your paragraph. If you enter more than one paragraph on a page a double space will be left between each paragraph.

You can align your paragraphs by using attributes. The alignment attributes are Left, Right, Center and Justify. These attributes would be entered as follows:

<P ALIGN=LEFT> <P ALIGN=RIGHT> <P ALIGN=CENTER> <P ALIGN=JUSTIFY>

If no attribute is included it will default to left. When ending any one of these attributes the end tag still remains at </P>. You can also center a paragraph by using the <CENTER></CENTER> tags if you wish.

Blockquoting is similar to using the tab function on the keyboard. It will indent your text. The start tag is <BLOCKQUOTE> and the end tag is </BLOCKQUOTE>. You can even use a series of blockquotes enabling you to indent the text as many times as you need.

Line Breaks are accomplished using the <BR> tag. It is similar to the paragraph tag except that it leaves only a single line instead of a double line. This tag is an empty tag so it does not require an end tag to use it.

Headings are used to create titles and arrange information. Headings create a bold text in six sizes. <H1> being the largest and <H6> being the smallest. The tags for each size is as follows:

<H1>Your text</H1>
<H2>Your text</H2>
<H3>Your text</H3>
<H4>Your text</H4>
<H5>Your text</H5>
<H6>Your text</H6>

You can align the headings in the same manner as aligning paragraphs although justify probably wouldn't really work for a title. Coding a heading with an alignment attribute would look as follows:

<H1 ALIGN=CENTER>Your text</H1>

Lists are useful to provide information in a structured format. There are three kinds of lists, ordered, which numbers the list items chronologically; unordered, which lists the items in a bulleted fashion; and the definition list which produce term/definition pairs.

Ordered List start tag is <OL> and end tag is </OL> and each item in the list will begin with <LI>. An ordered list will look as follows:

<OL>
<LI> Item one
<LI> Item two
<LI> Item three
     <OL>
     <LI> Item A
     <LI> Item B
     <LI> Item C
     </OL>
<LI> Item four
<LI> Item five
</OL>

and will look as follows when seen in the web browser

  1. Item one

  2. Item two

  3. Item three

    1. Item A
    2. Item B
    3. Item C
  4. Item four

  5. Item five

The ordered list has the following attributes:

1 Numbers (default)
A Uppercase letters
a Lowercase letters
I Uppercase Roman Numerals
i Lowercase Roman Numerals

The tag with attributes will look like this:

<OL TYPE="I">

Unordered List start tag is <UL> and end tag is </UL> and each item in the list will begin with <LI>. An unordered list will look as follows:

<UL>
<LI> Item one
<LI> Item two
<LI> Item three
     <UL>
     <LI> Item A
     <LI> Item B
     <LI> Item C
     </UL>
<LI> Item four
<LI> Item five
</UL>

and will look as follows when seen in the web browser

  • Item one
  • Item two
  • Item three
    • Item A
    • Item B
    • Item C
  • Item four
  • Item five

The unordered list has the following attributes:

Disc - Bullet in the shape of a disc
Square - Bullet in the shape of a square
Circle - Bullet in the shape of a circle

The tag with attributes will look like this:

<UL TYPE="Disc">

Definition List start tag is <DL> and end tag is </DL>. Each term is started with <DT> and each definition is started with <DD>

Example of a definition list:

<DL>
<DT>FrontPage<DD>A Web Editor
<DT>Windows<DD>An Operating System
<DT>Paintshop Pro<DD>A Graphics Editor

</DL>

and it would look like this in your web browser:

FrontPage
A Web Editor
Windows
An Operating System
Paintshop Pro
A Graphics Editor

Menu List start tag is <MENU> and the end tag is </MENU>. Even though the start tag and end tag are different this list looks identical to the bulleted list.

Example of a Menu list:

 <MENU>
<LI>eggs</LI>
<LI>bacon</LI>
<LI>toast</LI>
<LI>orange juice</LI>
<LI>coffee</LI>
</MENU>

will come out like this in the browser:

  • eggs
  • bacon
  • toast
  • orange juice
  • coffee
  • Directory List start tag is <DIR> and the end tag is </DIR> and as with the Menu List it will produce the same list as the bulleted list.

    Horizontal Rule is used to separate parts of a web page. The tag for the horizontal rule is <HR> and it is an empty tag so it does not need an end tag. The attributes of the horizontal rule are as follows:

    SIZE
    this adjusts the thickness of the rule
    WIDTH
    this adjusts the width of the rule, can be specified as a percentage of the screen or absolute
    ALIGN
    aligns to the left, right or center of the page
    NOSHADE
    removes the 3D look the horizontal rule usually has

    Examples

    <HR SIZE=10>


    <HR WIDTH=50%>



    <HR WIDTH=100>


    <HR ALIGN=RIGHT WIDTH=50%>


    <HR NOSHADE>


     

       Site Map

        Copyright 2001-2005 Margaret Walker