Sunday, July 8, 2012

DOCUMENT OBJECT MODEL

                DOM is a platform and language independent interface which allows applications to access and update the content or structure or styles of documents.

Why we need DOM?

                DOM is required in order to access the content of an html so that it can be operated via styles and script to make html dynamic.
Dynamic HTML
An html document which has some dynamic behaviour which occurs when some action is taken place or certain amount of time is elapsed.

How is DOM representing the html document?

                All the content of an HTML documents are represented as NODE.

                NODE

                                A node is primary data type of DOM which represents a single entity of DOM.
A node can have several or no sub nodes. Sub nodes are called children were as the root node is called parent node.
                Every document has a single root node called DOCUMENT node.

What are the node types for my Document?

                Oh! That’s a nice question. Following types are supported if you are using HTML or XML document: 

1.       DOCUMENT interface
2.       Document Fragment Interface
3.       Element Interface
4.       EntityRefrence Interface
5.       Entity Interface
6.       Text Interface
7.       Comments Interface
8.       CDATASection Interface
9.       Notation Interface
10.   Attr Interface
11.   ProcessingInstruction interface and
12.   Document type Interface

Oh So many nodes… I never thought they were so many….

                Yes there are let’s see them in our page here is the code to be considered:
                <DOCTYPE html PUBLIC //-//W3C//DTD HTML 4.0 STRICT//EN>
                <html >
<head>
                <title>Explained DOM – HTML</title>
                <script type=’text/javascript>
                <![CDATA[
                                Document.getElementById(‘#dom’).sytle.border= ‘1px solid #red’;
]]>
</script>
</head>
<body>
                <div >
                <p id=’dom’>
                                <!--this div with id as dom contains information on dom -->
                                Attr Interface  is id for this div.
</p>
</div>
</body>
</html>

For above sample file:   DOCUMENT Interface represent in DOM structure as follows
DOM tree structure

Explained:

a.       DOCUMENT Interface - Is considered to be the root element of the document.
                                                          i.      Element INTERFACE only one element will be considered
                                                        ii.      Comments INTERFACErepresent additional information in the document/page (not shown to user) written between   ‘<! --’ and ‘-->’.
                                                      iii.      DOCTYPE INTERFACE only one DOCTYPE will be considered
                                                       iv.      ProcessingInstruction INTERFACE – used in xml for keeping processing specific information.
b.      DOCUMENT FRAGMENT INTERFACEis to represent a part of document and allows easy DOM manipulation. It can contain any of the following in child nodes
                                                          i.      Element INTERFACE
                                                        ii.      ProcessingInstruction INTERFACE
                                                      iii.      Comments INTERFACE
                                                      iv.      Text INTERFACERepresents any textual information in the document/page.
                                                        v.      CDATASection  INTERFACEIs used to represent the CDATA in document which is used to escape characters that have special meaning in document.
                                                      vi.      EntityReference INTERFACE
c.       DOCTYPE INTERFACE – Represents the Document type included, does not have any children.
d.      EntityRefrence INTERFACE – Represent an entity reference in the tree
                                                          i.      Element INTERFACE
                                                        ii.      ProcessingInstruction INTERFACE
                                                      iii.      Comments INTERFACE
                                                      iv.      Text INTERFACE
                                                        v.      CDATASection  INTERFACE
                                                      vi.      EntityReference INTERFACE
e.      Element INTERFACE – Represent an element (Tag) of the document. Can have following children
                                                          i.      Element INTERFACE
                                                        ii.      ProcessingInstruction INTERFACE
                                                      iii.      Comments INTERFACE
                                                      iv.      Text INTERFACE
                                                        v.      CDATASection  INTERFACE
                                                      vi.      EntityReference INTERFACE
f.        Entity INTERFACE – Represent an entity(parsed or unparsed) of the document. Can have following children
                                                          i.      Element INTERFACE
                                                        ii.      ProcessingInstruction INTERFACE
                                                      iii.      Comments INTERFACE
                                                      iv.      Text INTERFACE
                                                        v.      CDATASection INTERFACE
                                                       vi.      EntityReference INTERFACE
g.       Attr INTERFACE – Represent an attribute (properties) of an element (Tag) of the document. Can have following children
                                                          i.      Text INTERFACE
                                                        ii.      EntityReference INTERFACE
h.      Text INTERFACE – Represent textual content in an element (Tag) of the document. Does not have any children.
i.        Comments INTERFACE – Represent comments in document. Does not have any children.
j.        Notation INTERFACE- NO Children.
k.       CDATASection INTERFACE- Is used to represent the CDATA in document which is used to escape characters that have special meaning in document. Does not have any children.
l.        ProcessingInstruction INTERFACE- used in xml for keeping processing specific information. Does not have any children. 

Referencehttp://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html

Saturday, June 23, 2012

Introduction to jQuery

What is jQuery?

jQuery is a light-weight library used to add some dynamic behavior to our web pages by manipulating DOM(Document Object Model). It was developed in 2006 by John Resig and is being updated based on the changes in the web field.

Current Version: 1.7.2

It is available in minified (compressed file) version for Production and un-minified (uncompressed file with appropriate comments) version for development.
Some feature it provides: DOM traversal, animation, Ajax interaction and event handling.

Why to use jQuery?

  • Light weight (current version 1.7.2 for production is 32 kb in size).
  • Cross browser complaints.
  • Easy to learn and use.
  • Good documentation and support.
  • Easy to extend (create plug-ins).
  • Plug-in are available in large amount.

Wednesday, June 20, 2012

Box Model


Box Model

Any element in an html can be represented via box, which represents the region occupied by that particular element on the web page.
It consists of following
  • Margin area = margin left + margin right + margin top + margin bottom
  • Border area = border left + border right + border top + border bottom
  • Padding area = padding left + padding right + padding top + padding bottom
  • Content area

Example

Consider the following HTML code:

    
          
            <div id='wrapper'>
                <div id='content'>
                    <div class='info'>
                        <p>Some Dummy Content As OF NOW.</p>
                    </div>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
            #content{ 
                background : #f00; 
                margin : 10px; 
                padding : 0px;
                border: 1px solid #fff;
            }
            #content .info{ 
                padding :10px; 
                margin : 10px; 
                background : #0f0;
                border: 2px solid #00f;
            }
            #content .info p{ 
                background : #F0F0F0;
                padding : 0px;
                margin : 0px;
                border : 0px;
            }
          
        

HTML output:

Red colour represent the margin area for #info, blue represent the border area, green represent the padding area and white represents its content area.
Total Width (Horizontal space occupied in page) = content Area width + left padding area + right padding area + left border + right border + left margin area+ right margin area.
Total Height (Vertical space occupied in page) = content Area height + top padding area + bottom padding area + top border + bottom border + top margin area+ bottom margin area.
While calculating width or height with jquery
.width() - method gives width of content area
.innerWidth() – method gives value equal to content area width+ left padding + right padding
.outerWidth() – method gives width = content area width + left padding + right padding + left border + right border
.height() - method gives height of content area
.innerHeight() – method gives value equal to content area height + top padding + bottom padding
.outerHeight() – method gives Height = content area height + top padding + bottom padding + top border + bottom border
By default browsers styles are applied and those padding, margin and border values applies in page until unless specified by developer in his style sheet.

Margin in box model

The margin is used to increase spaces between two sibling elements or its parent. It represents the margin area of the elements width.
Margin can take values in percentages or in specific (em or px units). When specified in percentage it is relative to its container width.
Margin cannot be inherited by decedent elements. Margins can hold negative values.
Margin area is transparent it will show the background color or image of container element.

Example

Consider the following HTML code:

    
          
            <div id='wrapper'>
                <div id='content'>
                    <div class='info'>
                        <p>this is a paragraph</p>
                    </div>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
            #content{background: red; border:1px dotted blue;  width:100px}
            #content p{ background: #fff; }
            #info { padding: 10px; margin:100%; width:200px;  background:#0f0;}
          
        

HTML output:

In above sample code the green box moved out of red is because the margin on left is same as that of red’s width, even the top and bottom margins are changed according to it.
So the margin-left =margin-right = margin-top =margin-bottom = 100px;
Margin cannot be applied to the Element with table display types other than inline-table or table-caption or table.
Can be specified either individually or collectively as follows
          margin: 2px;            /* all side margins set to 2px */
          margin: 3em 2em;       /* top & bottom = 3em, right & left = 2em */
          margin: 1% 2% 3%;     /* top=1%, right=2%, bottom=3%, left=2% */

        or

          margin-top: 1%;
          margin-right: 2em;
          margin-bottom: 3px;
          margin-left: 2em;        
          /* top=1%, right=2em, bottom=3px, left=2em */
        

Collapsed Margin:

Whenever two or more elements margin are on adjacent side they merge together to form a new margin – the new margin is collapsed margin.
Margin collapse happens only for top bottom margins (vertical margins).
And it never happens for left or right margins (horizontal margins).
The following rules apply to collapsed margin:
Margin specified for root elements does not merge with other margins. So if margins are specified to html tag and any other which may be adjacent to it that will not merge but will add up to give new margin.

Example

Consider the following HTML code:

    
          
            <html'>
                <body>
                    some content will go here
                </body>
            </html>
          
        

Consider the following Styles:

    
          
            html{
                margin : 10px;
                background-color : pink;
            }

            body{
                margin : 10px;
                background : #f2f2f2;
            }
          
        

HTML output:

Also consider following HTML code:

    
          
             <div id='wrapper'>
                <div id='content'>
                    <div class='info'>
                        <p>this is a paragraph</p>
                    </div>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
            #content{background: red;  width:100px; margin:10px;}
            #content p{ background: #fff; }
            #info { padding: 10px; margin:20px; width:200px;  background:#0f0;}
          
        

HTML output:

In above sample code the #info has only a gap of 10px from #content top edge as the both combine to give only 20px margin in total so the content margin from its container is 10px and #info is 10px distant from its parent (#content), while the left margin are not collapsed.
Margin collapse will not happen when elements are separated by either of border, padding or clearance.
If the top and bottom margins of an element with clearance are adjoining, its margins collapse with the adjoining margins of following siblings but that resulting margin does not collapse with the bottom margin of the parent block.

All rules that implies

  • Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
  • Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do not collapse with their in-flow children.
  • Margins of absolutely positioned boxes and inline- boxes do not collapse (not even with their in-flow children).
  • The bottom margin of a static block-level element always collapses with the top margin of its next static block-level sibling, unless that sibling has clearance.
  • The top margin of an in-flow block element collapses with its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance.
  • The bottom margin of an in-flow block box with a 'height' of 'auto' and a 'min-height' of zero collapses with its last in-flow block-level child's bottom margin if the box has no bottom padding and no bottom border and the child's bottom margin does not collapse with a top margin that has clearance.
  • A box's own margins collapse if the 'min-height' property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a 'height' of either 0 or 'auto', and it does not contain a line box, and all of its in-flow children's margins (if any) collapse.

Padding in Box Model

Padding is the separation between element content and element border. It specifies the width of padding area around the element.
Padding can be applied to all elements except with elements with display table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column.
Padding area is transparent – this will show the background color or image applied to the element. Padding cannot hold negative values.
Similar to margin padding can also be specified as
            padding: 2px;            /* all side padding set to 2px */
            padding: 3em 2em;       /* top & bottom = 3em, right & left = 2em */
            padding: 1% 2% 3%;     /* top=1%, right=2%, bottom=3%, left=2% */
          Or
            padding -top: 1%;
            padding -right: 2em;
            padding -bottom: 3px;
            padding -left: 2em;        
            /* top=1%, right=2em, bottom=3px, left=2em */
          

Example

Consider the following HTML code:

    
          
            <div id='content'>
                <div id='info'>
                    <p>this is a paragraph</p>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
            #info{
                padding : 20px;
                background-color : red;
            }

            p{ 
                background-color: white;
            }
          
        

HTML output:

Border in Box Model

As like padding and margin border can be broken down into 4 sides
Border-left, border-top, border-right and border-bottom
Border can be broken down into three different properties further
Border-color: Color of the border
Border-width: Thickness of the border
Border-style: appearance of the border (like solid, dotted, dashed, etc.).

Example

Consider the following HTML code:

    
          
            <div id='content'>
                <div id='info'>
                    <p>this is a paragraph</p>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
          #info{
              border : 5px Solid blue;
              background-color : red;
          }

          p{ 
              border-top: 5px solid green;
              background-color: yellow;
          }
          
        

HTML output:

Box Model for Inline Elements:

Based on the direction of text box properties are applicable as follows for inline elements

When text direction is left to right

The first line box will take left padding, left border and left margin.

last line box will take right padding, right border and right margin.

Example

Consider the following HTML code:

    
          
            <div id='content'>
                <div class='info'>
                    <span>a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 .</span>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
           #content{ 
              background : #f00; 
              margin : 10px; 
              padding : 0px;
              border: 0px solid #fff;
              overflow : hidden;
              width: 500px;
            }
            #content #info{ 
              padding : 0px; 
              margin : 10px; 
              background : #0f0;
            }
            #content #info span{ 
              background : #D0D0D0;
              padding : 0px;
              margin :  10px;
            }
          
        

HTML output:

When text direction is right to left

The first line box will take right padding, right border and right margin.

The last line box will take left padding, left border and left margin.

Example

Consider the following HTML code:

    
          
            <div id='content'>
                <div class='info'>
                    <span>a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s tu v w x y z 0 1 2 3 4 5 6 7 8 9 a b c d e f g h i j k l m n o p q r s</span>
                </div>
            </div>
          
        

Consider the following Styles:

    
          
           #content{ 
            background : #f00; 
            margin : 10px; 
            padding : 0px;
            border: 0px solid #fff;
            overflow : hidden;
            width: 500px;
          }
          #content #info{ 
            direction: rtl;
            padding : 0px; 
            margin : 10px; 
            background : #0f0;
          }
          #content #info span{ 
            background : #fff;
            padding : 0px;
            margin :  0px 10px 0px 40px;
          }
          
        

HTML output:

Important to note is that the inline element will start from the centre point of the line height and it will expand to all side based on padding, margin and border. This is because of line height which remains the same according to which the content is organized.

Friday, June 8, 2012

HTML DOCTYPE


HTML DOCTYPE - Specifies the legal structure, elements and attributes allowed in the html page.

A DOCTYPE binds a DTD (Document Type Definition) to the page so that machine can understand what to expect in the document.

There are various formats of HTML documents like HTML 4.01 Transitional, HTML 4.01 Strict, and HTML 4.01 Frameset, etc. To tell machine which document format to consider we use HTML DOCTYPE as very first line of the HTML document. That also means no comments before the DOCTYPE declaration.

It is used in modern browsers for triggering appropriate rendering mode so the page will render properly.

DOCTYPE is supported by all major browsers like IE, CHROME, SAFARI, OPERA and FIREFOX.

Example - DOCTYPE for HTML 4 STRICT mode:
<!DOCTYPE HTML PUBLIC “-//W3c//DTD HTML 4.01 STRICT//EN” href= “http://www.w3.org/TR/html4/strict.dtd”>

You might have noticed that there is no closing of DOCTYPE, it is not required.

Now let’s see what information a HTML DOCTYPE declaration holds in a page.

<!DOCTYPE - States DOCTYPE declaration goes here.

HTML - Type of Document (HTML  default)

PUBLIC – Type of DTD publically available (Public/System)

“- - Tells whether if the organizations are registered for ISO standards (+ for yes / - for no).

// - Is separator

W3C – Organization responsible for DTD creation and maintenance (other is IETF)

//

DTD HTML 4.01 STRICT (DTD + Html version + Format) 
          
//

EN” - Language used for creation of reference object (DTD)

href= “http://www.w3.org/TR/html4/strict.dtd – Location of DTD file.

>  end of DOCTYPE declaration.

Various formats of DOCTYPE are STRICT, TRANSITIONAL and FRAMESET.

View list of various DOCTYPES at  http://www.w3.org/QA/2002/04/valid-dtd-list.html

Sample HTML file with DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <!-- title tags and meta tags here also include styles and script-->
  </head>
  <body>
    <!-- all information for your users here -->
  </body>
</html>

Reference:


Tuesday, June 5, 2012

Why I created "Let's understand"?

I would like to take an opportunity to tell the purpose of creating this blog(Let's understand).
This will be a place where I would like to share my knowledge and understanding on various topics mostly related to web development(but not only restricted to it).