Archive for April, 2009

 

What are HTML Headings ?

HTML Headings helps to define format and structure of document .
HTML Headings are of 6 levels
HTML Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading. <h6> defines the smallest heading.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

-Heading tags will be recognized by browsers which don’t recognize style sheets (or use a user-defined style sheet).
Heading tags are used by some search engines to identify words which are more important than the rest of the page text.
-The theory is that headings will sum up the topic of the page, so they are counted as important keywords.
Use HTML headings for headings only. Don’t use headings to make text BIG or bold.
-Heading tags make it easy to make global changes to headings. Although you could theoretically achieve this by defining a new css class, it makes more sense and tends to be easier to define a style for heading tags.

H1 headings should be used as main headings, followed by H2 headings, then less important H3 headings, and so on.

Eaxmple of HTML heading
<HTML>
<HEAD>
<TITLE>My fist HTML page with headings</TITLE>
</HEAD>
<BODY>
<H1>I am heading 1</H1>
<H2>I am heading 2</H2>
<H3>I am heading 3</H3>
<H4>I am heading 4</H4>
<H5>I am heading 5</H5>
<H6>I am heading 6</H6>
</BODY>
</HTML>

Note : The attribute-value pair is placed INSIDE the starting tag
An “equal to” sign separates the attribute from its value.
The value part is surrounded by quotes. The quotes are necessary if the value contains spaces. However, I always use them and advice you to do so too.

 
 
 

What are HTML Attributes ?

HTML Attributes Details

In HTMl Attributes are used to boost the tags , what browser understands.Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name=”value”

HTML Attribute Example

<a href=”http://www.scriptinstalation.com”>This is a link</a>
-Attribute values should always be enclosed in quotes.
-Double style quotes are the most common, but single style quotes are also allowed.

-Attribute names and attribute values are case-insensitive.
Many tags are assigned default attributes. This means that unless a tag attribute is specified by you the creator, it will have some distinct attributes.
For example, a paragraph tag will always align its text to the left unless it has an align attribute in it specifying otherwise. Also elements placed within a table are vertically centered and to the left unless otherwise specified.

As you code and learn about each of the different HTML elements, you will become aware of many of these defaults.
Note : Elements can have Attributes
Many elements can have arguments that pass parameters to the interpreter handling this element. These arguments are called attributes of the element. For example, consider the element A, which marks a region of text as the beginning (or end) of a hypertext link.
This element can have several attributes. One of them, HREF, specifies the hypertext document to which the marked piece of text is linked. To specify this in the tag for A you write:

<A HREF=”http://www.scriptinstallation.com”> marked text </a>.

where the attribute HREF is assigned the indicated value. Note that the A element is not empty, and that it is closed by the tag </a>. Note also that end tags never take attributes the attributes to an element are always placed in the start tag.

HTML Empty Elements
Some elements are empty — that is, they do not affect a block of the document in some way. These elements do not require an ending tag. An example is the <HR> element, which draws a horizontal line across the page. This element would simply be entered as
<HR>

Upper and Lower Case
Element names are case insensitive. Thus, the the horizontal rule element can be written as any of <hr>, <Hr> or <HR>.

HTML Elements can have Attributes

Many elements can have arguments that pass parameters to the interpreter handling this element. These arguments are called attributes of the element. For example, consider the element A, which marks a region of text as the beginning (or end) of a hypertext link. This element can have several attributes. One of them, HREF, specifies the hypertext document to which the marked piece of text is linked. To specify this in the tag for A you write:
<A HREF=”http://www.somewhere.ca/file.html”> marked text </a>.

where the attribute HREF is assigned the indicated value. Note that the A element is not empty, and that it is closed by the tag </a>. Note also that end tags never take attributes — the attributes to an element are always placed in the start tag.

Some of the Basic HTML Attributes with Example and output

Start tag End Tag Syntax with example
Output
<b> </b> This is for <b>bold</b> text This is for bold text
<strong> </strong> <strong>Strong</strong> is similar to bold but may depend on the browser Strong is similar to bold but may depend on the browser
<i> </i> This is for <i>italic</i> text This is for italic text
<cite> </cite> <cite>Cite</cite> is similar to italic Cite is similar to italic
<em> </em> So is <em>Emphasis</em> but may depend on browser So is Emphasis but may depend on browser
<center> </center> <center>Centers the text</center> Centers the text
<p align=right> </p> Right aligned paragraph. <p align=right>You can use the “p” tag as a container to align text to the right</p> Right aligned paragraph.

You can use the “p” tag as a container to align text to the right

<blockquote> </blockquote> <blockquote> Use blockquote to indent a section of text from both sides. Great for quoted sections in a paper. Also very effective to use on an entire page to keep things from getting too close to the edge.</blockquote>

Use blockquote to indent a section of text from both sides. Great for quoted sections in a paper. Also very effective to use on an entire page to keep things from getting too close to the edge.

<h3> </h3> <H3>Use H1 or H2 or H3 etc. for headings</H3>It automatically adds a paragraph break after the heading. Note: 1 is largest. It automatically adds a paragraph break after the heading. Note: 1 is largest.
<font size=+2> </font> Increases <font size=+2>font size</font> by the amount of the number. You can also use <font size=-2>negative</font> numbers. Increases font size by the amount of the number. You can also use negative numbers.
<font size=8> </font> 8Changes <font size=6>font size</font> to a specific size. Higher numbers are larger font size. Changes font size to a specific size. Higher numbers are larger font size.
<font color=”#0000FF”> </font> You can <font color=”#0000FF”>change the font color</font> within your text. See the <A HREF=”tables2.html”>section on colors</A> for options of color codes or experiment. You can change the font color within your text. See the section on colors for options of color codes or experiment.
<font face=”Verdana, Arial, Helvetica, sans-serif”> </font> You can <font face=”Verdana, Arial, Helvetica, sans-serif”>change the actual font used to some extent within your text.</font> In this instance, the browser will attempt to use “Verdana” if the computer has it; if not, “Arial”; if not, “Helvetica”; if not, a generic sans-serif font; if not, it will ignore the instruction. You can change the actual font used to some extent within your text. In this instance, the browser will attempt to use “Verdana” if the computer has it; if not, “Arial”; if not, “Helvetica”; if not, a generic sans-serif font; if not, it will ignore the instruction.
<blink> </blink> Blink. The most <blink>annoying</blink> code in html. Blink. The most annoying code in html.
<ul> </ul> Unordered List.<ul><li>Creates a list with bullets<li>”li” is used to denote list items<li>Each appears with a bullet<p>A break with no “li” gives an item without bullet.</ul> Unordered List.

  • Creates a list with bullets
  • “li” is used to denote list items
  • Each appears with a bulletA break with no “li” gives an item without bullet.
<ol> </ol> Ordered List.<ol><li>Creates a list with numbers<li>”li” is used to denote list items<li>Each appears with a consecutive<p>A break with no “li” gives an item without a number.</ol> Ordered List.

  1. Creates a list with numbers
  2. “li” is used to denote list items
  3. Each appears with a numberA break with no “li” gives an item without a number.
<dl> </dl> Definition List.<dl><li>Creates a list with bullets, but the list items are not indented<li>”li” is used to denote list items<li>Each appears with a bullet<p>A break with no “li” gives an item without bullet.</dl> Definition List.
  • Creates a list with bullets, but the list items are not indented
  • “li” is used to denote list items
  • Each appears with a bulletA break with no “li” gives an item without bullet.
  • <tt> </tt> This changes to <tt>typewriter style text</tt> within your text. This changes to typewriter style text within your text.
    <pre> </pre> <pre> Within the pre-formatted tag, text and numbers, etc. will be lined up exactly as you typed them. Good for lists and forms, etc. </pre>
    Within the pre-formatted
    tag, text and numbers, etc.
          will be lined up
    exactly
    as you typed them.
    Good for lists and forms, etc.
     
     
     

    What are HTML Elements ?

    he HTML instructions, along with the text to which the instructions apply, are called HTML elements. The HTML instructions are themselves called tags, and look like <element_name> — that is, they are simply the element name surrounded by left and right angle brackets.
    Most elements mark blocks of the document for particular purpose or formatting: the above <element_name> tag marks the beginning of such as section. The end of this section is then marked by the ending tag </element_name> — note the leading slash character “/” that appears in front of the element name in an end tag. End, or stop tags are always indicated by this leading slash character.
    For example, the heading at the top of this page is an H2 element, (a level 2 heading) which is written as:
    <H2> 2.1 Elements in HTML </H2>.
    HTML Element Syntax

    An HTML element starts with a start tag / opening tag
    An HTML element ends with an end tag / closing tag
    The element content is everything between the start and the end tag
    Some HTML elements have empty content
    Empty elements are closed in the start tag
    Most HTML elements can have attributes

    HTML Document Example
    <html>
    <body>
    <p> This is my first job</p>
    </body>
    </html>

    In above example

    The <p> element:

    The <p> element defines a paragraph in the HTML document
    The element has a start tag <p> and an end tag </p>
    The element content is: This is my first job

    The <body> element:
    The <body> element defines the body of the HTML document
    The element has a start tag <body> and an end tag </body>
    The element content is another HTML element (a paragraph)
    The <html> element:


    The <html> element defines the whole HTML document.
    The element has a start tag <html> and an end tag </html>
    The element content is another HTML element (the body)

    Note : HTML elements without content are called empty elements. Empty elements can be closed in the start tag.
    <br> is an empty element without a closing tag (it defines a line break).

    HTML Empty Elements

    Some elements are empty — that is, they do not affect a block of the document in some way. These elements do not require an ending tag. An example is the <HR> element, which draws a horizontal line across the page. This element would simply be entered as
    <HR>
    Upper and Lower Case
    Element names are case insensitive. Thus, the the horizontal rule element can be written as any of <hr>, <Hr> or <HR>.
    HTML Elements can have Attributes


    Many elements can have arguments that pass parameters to the interpreter handling this element. These arguments are called attributes of the element. For example, consider the element A, which marks a region of text as the beginning (or end) of a hypertext link. This element can have several attributes. One of them, HREF, specifies the hypertext document to which the marked piece of text is linked. To specify this in the tag for A you write:
    <A HREF=”http://www.somewhere.ca/file.html”> marked text </a>.

    where the attribute HREF is assigned the indicated value. Note that the A element is not empty, and that it is closed by the tag </a>. Note also that end tags never take attributes — the attributes to an element are always placed in the start tag.