free blogs
Blogdrive
free blogs



HTML Tags


There is a lot to know if you're trying to learn HTML. Beginning HTML encompasses more than just HTML tags. To fully utilize HTML, you need to understand the tags, familiarize yourself with concept and design, learn graphic design, and other technologies like JavaScript and CSS. Below are some of the basic tags with descriptions and examples for reference.



Hyper Text Markup Language (HTML)
HTML is not case sensitive.
The language is used to write Web pages. Based on SGML and recently rewritten to follow XML guidelines.

The following is an example containing standard HTML tags.

The example consists of the head, which contains the title and the body, which consists of paragraphs, lists, subheadings, graphics.
Use styling tags inside the paragraph tags. For example: bold, italic, color text, lists, font size, etc.

Example:

<HTML>
<HEAD>
<TITLE>MY Home Page</TITLE>
</HEAD>
<BODY>
<P>FIRST PARAGRAPH</P>
<P>SECOND PARAGRAPH</P>
</BODY>
</HTML>


The Tags:

 

<HTML>

The <HTML> tag is always the first tag in your html document. It tells the browser that your file contains html code.
Use closing </HTML> tag at end of document, see above example.

<HEAD>

The head tag introduces text that describes an HTML document. Most documents have only a TITLE tag in the head section See above example.

<TITLE>

The title tag, which is always located in the HEAD section, defines the title of an HTML document. When a person bookmarks your page, the title will be used as a reference inside their bookmarks/favorites. Search engines will also index the title of your page, therefore the title should be very descriptive.

<BODY>

The body tag introduces the body of the document. It should appear after the head section. The majority of your page content will exist between the body open and close tags. Use closing </BODY> tag at end of document, see above example.

Heading
<H1>

Heading.
There are six levels of headings, 1 being the largest. The heading 1 tag defines a level 1 heading. The text content between the heading tags will be affected in size.

<H2>
Sample text for heading h2
</H2>

Paragraph
<P>

The paragraph tag starts a new paragraph. It is equivalent to two BR tags. The </p> tag is optional if the tag is only to insert space between two paragraphs, but necessary when attributes like "center" will be applied to the whole paragraph. The ALIGN attribute can be one of LEFT, RIGHT, or CENTER.

Example:

<P ALIGN=CENTER> My Stuff </P>

Output:
My Stuff


Unordered list
<UL>

The unordered list tag introduces an unordered (bulleted) list, which is made up of List Item (LI) tags. The COMPACT attribute instructs the browser to reduce the space occupied by the list. For a numbered list use OL. For a list without bullets or numbers use MENU. For a list without bullets or numbers made up of short items that can be arranged into columns use DIR.

Example:

<UL>
<LI>listed item
<LI>listed item
<LI> listed item
(/UL>

The output for unnumbered lists look like this:

  • List item
  • List item
  • List item

    Ordered or numbered lists.
    <OL>

    Example:

    <OL>
    <LI>listed item
    <LI> listed item
    <LI> listed item
    </OL>


    The output for an ordered/numbered list look like this:

    1. Listed item
    2. Listed item
    3. Listed item


    A nested list:

    Example:

    <UL>
    <LI>Orange County Cities
    <UL>
    <LI>Fountain Valley
    <LI>Huntington Beach
    <LI>Costa Mesa
    </UL>
    <LI>Los Angeles County Cities
    <UL>
    <LI>Hollywood
    <LI>Long Beach
    <LI>Pasadena
    </UL>
    </UL>

    The output for the above nested list looks like this:

    • Orange County Cities
      • Fountain Valley
      • Huntington Beach
      • Costa Mesa
    • Los Angeles County Cities
      • Hollywood
      • Long Beach
      • Pasadena


    <BLOCKQUOTE>

    This tag is used to separate quotes from the body of the text.
    For Example:
     

    <P>F. A. Mignet states that: </P>

    <BLOCKQUOTE>
    <P>
    Mary Stuart, during the years 1579 and 1580, was incessantly devising plans for getting her son out of Scotland.
    </P>
    </BLOCKQUOTE>


    The result would be:

    F. A. Mignet states that:

    Mary Stuart, during the years 1579 and 1580, was incessantly devising Plans for getting her son out of Scotland.


    Horizontal Rule


    The horizontal rule tag creates a horizontal line across your page or within defined areas, like table cells. You can add the following attributes: Size, width, align, color, noshade.

    <HR align="left" size="1" width="70%" noshade color="#708EA0">

    <BR>

    The line break tag breaks the current line of text. There is no closing </BR> tag.


    STYLING YOUR TEXT

    <FONT>
    This tag is used to not only set the style of the font but can also be used to size and color the font. It can also be used inside other tags, e.g. the header tag.
    </FONT>

    Example for changing size of font:

    <FONT SIZE =3>
    The number can be changed up to 7
    </FONT>

    Bold
    <B>
    Makes the text bold
    </B>

    Italic
    <I>
    Makes the text italic
    </I>

    You can use these tags in combination for example:

    <B><I> BIG SALE WITH HUGE SAVINGS</I></B>

    Result would look like this:

    BIG SALE WITH HUGE SAVINGS

    Emphasized
    <EM>
    Emphasized
    </EM>

    The emphasized tag is use when you wish to emphasized text. Most browsers simply display it in italics.

    Underlined
    <U>
    This is underlined
    </U>

    The subscript tag
    <SUB>
    The subscript tag
    </SUB>

    The subscript tag displays text in a smaller font than usual, as well as lower than normal.

    The superscript tag
    <SUP>
    The superscript tag
    </SUP>

    The superscript tag displays text in a smaller font than usual, as well as higher than normal.

    Non Breaking Space
    &NBSP

    Use this code when you want a non-breaking space. A non-breaking space is a white-space character that HTML will not condense. It is usually used to hold open table cells and add spacing between words.

    For example:

    <P>
    &nbsp; &nbsp; When Mary Queen of Scots died her son became King of Scotland and England
    </P>

    <P>
    C &nbsp; &nbsp; A &nbsp; &nbsp; S &nbsp; &nbsp; T &nbsp; &nbsp; L &nbsp; E &nbsp;
    </P>

    Output:

      When Mary Queen of Scots died her son became King of Scotland and England.

    C A S T L E (Stretched out word)


    Coloring the font:

    <FONT COLOR=red>
    This will change the font to red.
    </FONT COLOR=red>

    Try some of the following:

    <FONT COLOR=black>

    <FONT COLOR=blue>

    <FONT COLOR=fuchsia>

    <FONT COLOR=gray>

    <FONT COLOR=green>

    <FONT COLOR=lime>

    <FONT COLOR=maroon>

    <FONT COLOR=navy>

    <FONT COLOR=olive>

    <FONT COLOR=purple>

    <FONT COLOR=red>

    <FONT COLOR=silver>

    <FONT COLOR=teal>

    <FONT COLOR=white>

    <FONT COLOR=yellow>



    You can also use the Hexidecimal equvilent:

    red FF0000
    green 00FF00
    blue 0000FF
    black 000000
    white FFFFFF
    grey 888888
    yellow FFFF00
    cyan 00FFFF



    Adding background color:

    <BODY BGCOLOR=White>

    This tag will make the background of your document white.

    Try some of these other color tags:

    <BODY BGCOLOR=red>

    <BODY BGCOLOR=navy>

    <BODY BGCOLOR=teal>

    <BODY BGCOLOR=black>

    <BODY BGCOLOR=green>

    <BODY BGCOLOR=fuschia>

    <BODY BGCOLOR=blue>

    <BODY BGCOLOR=maroon>

    <BODY BGCOLOR=yellow>

    <BODY BGCOLOR=lime>

    <BODY BGCOLOR=olive>

    <BODY BGCOLOR=purple>

    <BODY BGCOLOR=silver>

    <BODY BGCOLOR=yellow>






  • Copyright © 2004 - 2005 NeverX All rights reserved.
    Tag board Rules     Privacy policy     Terms of Service