Make In INDIA

Finally, the day has come…my dream and long time wishes are pacing slowly with Mr.Narendra Modi missions :). All Indians feeling proud of your activities Modi sir, Respect.

We are willing to see India as developed nation than developing nation. We hope our dreams fulfill with your missions sir. Jai Hind

makeindia3_092614093215

Please find the article here

What does auto do in margin:0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it’s parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Bootstrap Tutorial

Bootstrap:
Bootstrap is a free collection of tools for creating websites and web applications in responsive web design using this css framework which supports mobiles,tablets and desktops.

Note: Before you include bootstrap.min.js, you should even include jquery. Without jquery bootstrap wont work as many of components of bootstrap are dependent on jquery. Hence have like below for sure..

<script src=”bootstrap/js/jquery-1.11.1.min.js”></script>
<script src=”bootstrap/js/bootstrap.min.js”></script>

Mandatory add meta tag for viewport which enables support for mobiles and tablets. Like <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>.

Wanna see the difference between responsive and non responsive design??

Just open the two following links in different tabs first..

1. http://getbootstrap.com/examples/non-responsive/

2. http://livedemo00.template-help.com/wt_51334/index.html

Now click restore down as shown below..

26-09-2014 11-07-41

Now drag it to left and right to see the difference between responsive and non responsive websites.

26-09-2014 11-09-13

Use .container for a responsive fixed width container.Use .container-fluid for a full width container, spanning the entire width of your viewport.

Creating layouts:

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within columns, and only columns may be immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. Less mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
  • The negative margin is why the examples below are outdented. It’s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  • Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.
Extra small devicesPhones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

26-09-2014 11-19-37

From the above image i hope you can understand that default page width/container will be divided in to 12 cols. We can either use col-xs/col-sm/col-md/col-lg to divide columns. Here we consider col-md in dividing. If we want 12 cols in a row, you should have class row where inside you shud have col-md-1 for 12 times. Similarly if you need 3 cols have col-md-4,for 2 cols have col-md-6 and 1 column col-md-12.

Eg:

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

If you want to have this grid options for all mobiles,tablets and desktops..

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

With the four tiers of grids available you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix

26-09-2014 12-16-09

For the above image if we use clearfix all column grid heights will be appeared to be same.

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or less (it is not required that you use all 12 available columns).

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

26-09-2014 12-20-20

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
26-09-2014 12-22-16

Body copy

Bootstrap’s global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

Lead body copy

Make a paragraph stand out by adding .lead.

Inline text elements

For highlighting a run of text due to its relevance in another context, use the <mark> tag. – Market text

For indicating blocks of text that have been deleted use the <del> tag. – Deleted text

For indicating blocks of text that are no longer relevant use the <s> tag. – Strikethrough text

For indicating additions to the document use the <ins> tag. – Inserted text

To underline text use the <u> tag. – Underline text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

For emphasizing a snippet of text with a heavier font-weight. <strong>tag for bold

For emphasizing a snippet of text with italics. <em> for italics

Alignments of text:

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Tables: For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

<table class="table">
  ...
</table>
Use .table-striped to add zebra-striping to any table row within the <tbody>.
<table class="table table-striped">
  ...
</table>

Add .table-bordered for borders on all sides of the table and cells.

Add .table-hover to enable a hover state on table rows within a <tbody>.

Add .table-condensed to make tables more compact by cutting cell padding in half.

.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.info Indicates a neutral informative change or action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

success-green,info-blue,warning-orange,danger-red

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

Forms

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Add .form-inline to your <form> for left-aligned and inline-block controls.

<input type="text" class="form-control" placeholder="Text input">
<div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>

Difference between disabled and readonly: 26-09-2014 12-44-39

<button type="button" class="btn btn-default">Default</button>
btn btn-success,
btn btn-info,
btn btn-warning,
btn btn-danger

Responsive images
Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

<img src="..." class="img-responsive" alt="Responsive image">
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Components

Over a dozen reusable components built to provide iconography, dropdowns, input groups, navigation, alerts, and much more.

CSS Interview Concepts

CSS:

CSS stands for Cascading Style Sheets

A CSS rule set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a property name and a value, separated by a colon.

###############################################################

Selectors:

The id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the id selector when you want to find a single, unique element.

The style rule below will be applied to the HTML element with id=”para1″:

Example

#para1 {
text-align: center;
color: red;
}

The class selector finds elements with the specific class.

The class selector uses the HTML class attribute.

To find elements with a specific class, write a period character, followed by the name of the class:

In the example below, all HTML elements with class=”center” will be center-aligned:

Example

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

In the example below, all p elements with class=”center” will be center-aligned:

Example

p.center {
text-align: center;
color: red;
}
or p #id{ }

Grouping Selectors

h1, h2, p {
text-align: center;
color: red;
}

###################################################################

background-color: #6495ed;

background-image: url(“paper.gif”);

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

background-image: url(“gradient_bg.png”);
background-repeat: repeat-x; or repeat-y

Showing the image only once is specified by the background-repeat property:

background-image: url(“img_tree.png”);
background-repeat: no-repeat;

Background – Shorthand property

body {
background: #ffffff url(“img_tree.png”) no-repeat right top;
}

When using the shorthand property the order of the property values is:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

All CSS Background Properties

Property Description
background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-color Sets the background color of an element
background-image Sets the background image for an element
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated

##########################################################################

CSS Text

h1 {
color: #00ff00;

text-align: center;right;justify;

text-decoration: none;overline;line-through;underline

text-transform: uppercase;lowercase;capitalize

text-indent: 50px;
}

Imp text properties:

direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height

#####################################

CSS Font

p {
font-family: “Times New Roman”, Times, serif;
}

The font-style property is mostly used to specify italic text.

This property has three values:

  • normal – The text is shown normally
  • italic – The text is shown in italics
  • oblique – The text is “leaning” (oblique is very similar to italic, but less supported)

The font-size property sets the size of the text.

font-size: 40px; or  font-size: 2.5em; /* 40px/16=2.5em */

All CSS Font Properties

Property Description
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-size Specifies the font size of text
font-style Specifies the font style for text
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-weight Specifies the weight of a font

########################################

CSS Links

The four links states are:

  • a:link – a normal, unvisited link
  • a:visited – a link the user has visited
  • a:hover – a link when the user mouses over it
  • a:active – a link the moment it is clicked
/* unvisited link */
a:link {
color: #FF0000;
}/* visited link */
a:visited {
color: #00FF00;
}/* mouse over link */
a:hover {
color: #FF00FF;
}/* selected link */
a:active {
color: #0000FF;
}

When setting the style for several link states, there are some order rules:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
  • #############

#############################################################################

In HTML, there are two types of lists:

  • unordered lists – the list items are marked with bullets
  • ordered lists – the list items are marked with numbers or letters

ul.a {
list-style-type: circle;
}

ul.b {
list-style-type: square;
}

ol.c {
list-style-type: upper-roman;
}

ol.d {
list-style-type: lower-alpha;
}

ul {
list-style-image: url(‘sqpurple.gif’);
}

All CSS List Properties

Property Description
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker

###############################################################

The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.

The box model allows us to add a border around elements, and to define space between elements.

The image below illustrates the box model:
CSS box-model

Explanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

Example

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}

CSS Border

w3schools

border-style: solid;
border-width: 5px;

border-color: red;

border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;

#################################################################################

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.

The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

The margin property can have from one to four values.

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px
  • margin: 25px;
    • all four margins are 25px

CSS Padding

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.

The padding property can have from one to four values.

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding: 25px;
    • all four paddings are 25px

CSS Display and Visibility

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden.

Hiding an Element – display:none or visibility:hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:

###################################################################

CSS Positioning

overflow Specifies what happens if content overflows an element’s box auto
hidden
scroll
visible
inherit
position Specifies the type of positioning for an element absolute
fixed
relative
static
inherit
z-index Sets the stack order of an element number
auto
inherit

 

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.

Fixed Positioning

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled:

Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example

h2.pos_left {
position: relative;
left: 20px;
}

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Here is a visual:

The relative positioning on the parent is the big deal here. Look what would happen if you forgot that:

Might not look like a big deal in this small example, but it really is a significant change. What is happening is the absolutely positioned elements are positioning themselves in relation to the body element instead of their direct parent. So if the browser window grows, that one in the bottom left is going to stick with the browser window, not hang back inside like his well behaved brother from the first image.

####################################################################################

CSS Float

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it.

Float is very often used for images, but it is also useful when working with layouts.

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.

img {
float: right;
}

Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.

The clear property specifies which sides of an element other floating elements are not allowed.

Add a text line into the image gallery, using the clear property:

Example

.text_line {
clear: both;
}
#########################################################################################

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

  • descendant selector
  • child selector
  • adjacent sibling selector
  • general sibling selector

Descendant Selector

The descendant selector matches all element that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

Example

div p {
background-color: yellow;
}

Child Selector

The child selector selects all elements that are the immediate children of a specified element.

The following example selects all <p> elements that are immediate children of a <div> element:

Example

div > p {
background-color: yellow;
}

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and “adjacent” means “immediately following”.

The following example selects all <p> elements that are placed immediately after <div> elements:

Example

div + p {
background-color: yellow;
}

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

The following example selects all <p> elements that are siblings of <div> elements:

Example

div ~ p {
background-color: yellow;
}

CSS3 Tutorial

CSS3 IntroductionCSS3 BordersCSS3 BackgroundsCSS3 GradientsCSS3 Text EffectsCSS3 FontsCSS3 2D TransformsCSS3 3D TransformsCSS3 TransitionsCSS3 AnimationsCSS3 Multiple ColumnsCSS3 User Interface

 

CSS3 Borders: Border radius,box shadow,border image

CSS3 Backgrounds: background-size,background-repeat,background-origin

CSS3 Gradients: Linear,radial and elliptical gradients for webkit(chrome and safari),o(opera),moz(mozilla)

CSS3 Text: text-shadow: 5px 5px 5px #FF0000;

CSS3 2D Transforms: scale(),skew(),rotate,translate,matrix

CSS3 3D Transforms: rotateX(), rotateY(),rotateZ()..similarly scaleX…skewX()…

######################################################################################

CSS3 Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.

The following table lists all the transition properties:

Property Description CSS
transition A shorthand property for setting the four transition properties into a single property 3
transition-delay Specifies when the transition effect will start 3
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete 3
transition-property Specifies the name of the CSS property the transition effect is for 3
transition-timing-function Specifies the speed curve of the transition effect 3

#######################################################################################

CSS3 Animations

With CSS3, we can create animations which can replace Flash animations, animated images, and JavaScripts in existing web pages.

 

HTML5 Interview Concepts

HTML:

how many types of doctypes in html??

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.

HTML4 – has 3 doctypes like

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”&gt;

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”&gt;

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”&gt;
HTML5 has only one doctype  <!DOCTYPE html>
################################################################################
What are html meta elements??
Meta elements are tags used in HTML or XHTML documents to provide structured metadata about a Web page. They are part of a web page’s head section.
A special HTML tag that provides information about a Web page. Unlike normal HTML tags, meta tags do not affect how the page is displayed. Instead, they provide information such as who created the page, how often it is updated, what the page is about, and which keywords represent the page’s content. Many search enginesuse this information when building their indices.Metadata will not be displayed on the page, but will be machine parsable.

The scheme attribute is not supported in HTML5.

HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″>
  • HTML5: <meta charset=”UTF-8″>

Example 1 – Define keywords for search engines:

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

Example 2 – Define a description of your web page:

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

Example 3 – Define the author of a page:

<meta name=”author” content=”Hege Refsnes”>

Example 4 – Refresh document every 30 seconds:

<meta http-equiv=”refresh” content=”30″>
##################################################################
Computer coding formatting elements in html?
<em> Renders as emphasized text
<strong> Defines important text
<dfn> Defines a definition term
<code> Defines a piece of computer code
<samp> Defines sample output from a computer program
<kbd> Defines keyboard input
<var> Defines a variable

#################################################################

What are HTML attributes?

Attributes provide additional information about HTML elements. like id,name,class,value etc etc. For images..src,width,height,alt etc etc like that.

###################################################################

Styling HTML with CSS

CSS styling can be added to HTML elements the following 3 ways:

  • Inline – using the style attribute in HTML elements
  • Internal – using the <style> element in the <head> section
  • External – using external CSS files

The common way to add styling, is to put CSS syntax in separate CSS files.

#####################################################################

HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.

Block level elements normally start (and end) with a new line, when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

Inline elements are normally displayed without line breaks.

Examples: <b>, <td>, <a>, <img>

The HTML <div> element is a block level element that can be used as a container for other HTML elements.

The HTML <span> element is an inline element that can be used as a container for text.

############################################################################

Website Layout Using HTML5

HTML5 offers new semantic elements that define different parts of a web page:

HTML5 Semantic Elements
header Defines a header for a document or a section
nav Defines a container for navigation links
section Defines a section in a document
article Defines an independent self-contained article
aside Defines content aside from the content (like a sidebar)
footer Defines a footer for a document or a section
details Defines additional details
summary Defines a heading for the details element

This example uses <header>, <nav>, <section>, and <footer> to create a multiple column layout

section – Used for grouping together thematically-related content. Sounds like a div element, but its not. The div has no semantic meaning. Before replacing all your div’s with section elements, always ask yourself, “Is all of the content related?”

aside – Used for tangentially related content. Just because some content appears to the left or right of the main content isn’t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.

header – There is a crucial difference between the header element and the general accepted usage of header (or masthead). There’s usually only one header or ‘masthead’ in a page. In HTML5 you can have as many as you want. The spec defines it as “a group of introductory or navigational aids”. You can use a header in any section on your site. In fact, you probably should use a header within most of your sections. The spec describes the section element as “a thematic grouping of content, typically with a heading.”

nav – Intended for major navigation information. A group of links grouped together isn’t enough reason to use the nav element. Site-wide navigation, on the other hand belongs in a nav element.

footer – Sounds like its a description of the position, but its not. Footer elements contain information about it’s containing element: who wrote it, copyright, links to related content, etc. Whereas we usually have one footer for an entire document, HTML5 allows us to also have footer within sections.

##############################################################################

Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS

  1. Tables are usually more bytes of markup.(Longer to download, and more bytes of traffic for the host.)
  2. Tables usually prevent incremental rendering.(Takes longer for the user to see anything on the page.)
  3. Tables may require you to chop single, logical images into multiple ones.(This makes redesigns total hell, and also increases page load time [more http requests and more total bytes].)
  4. Tables break text copying on some browsers.(That’s annoying to the user.)
  5. Tables prevent certain layouts from working within them (like height:100% for child elements of <td>).(They limit what you can actually do in terms of layout.)
  6. Once you know CSS, table-based layouts usually take more time to implement.(A little effort up-front learning CSS pays off heavily in the end.)
  7. Tables are semantically incorrect markup for layout.(They describe the presentation, not the content.)
  8. Tables make life hell for those using screen readers.(Not only do you get the other benefits of CSS, you’re also helping out the blind/partially-sighted. This is a Good Thing.)
  9. Tables lock you into the current design and make redesigns MUCH harder than semantic HTML+CSS.(Have you seen CSS Zen Garden?)

##################################################################################

What is Responsive Web Design?

  • RWD stands for Responsive Web Design
  • RWD can deliver web pages in variable sizes
  • RWD is a must for tablets and mobile devices

Using Bootstrap

Another way to create a responsive design, is to use an already existing CSS framework.

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs.

Bootstrap helps you to develop sites that look nice at any size; screen, laptop, tablet, or phone

#######################################################################################

HTML Form Tags

= Tag added in HTML5.

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

#######################################################################################

New HTML5 Elements

The most interesting new elements are:

New semantic elements like <header>, <footer>, <article>, and <section>.

New form controls like number, date, time, calendar, and range.

New graphic elements: <svg> and <canvas>.

New multimedia elements: <audio> and <video>.

New HTML5 API’s (Application Programming Interfaces)

The most interesting new API’s are:

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage(Local storage is a powerful replacement for cookies)
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

###############################################################################

HTML5 Browser Support

HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can “teach” old browsers to handle “unknown” HTML elements. How to teach??

HTML5 defines 8 new semantic HTML elements. All these are block level elements.

To secure correct behavior in older browsers, you can set the CSS display property to block:

Teach example

header, section, footer, aside, nav, main, article, figure {
display: block;
}
##################################################################

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag Description
<article> Defines an article in the document
<aside> Defines content aside from the page content
<bdi> Defines a part of text that might be formatted in a different direction from other text
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<figcaption> Defines a caption for a <figure> element
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for the document or a section
<header> Defines a header for the document or a section
<main> Defines the main content of a document
<mark> Defines marked or highlighted text
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links in the document
<progress> Defines the progress of a task
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<section> Defines a section in the document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
<wbr> Defines a possible line-break

Read more about HTML5 Semantics.


New Form Elements

Tag Description
<datalist> Defines pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

##########################################################################

New Input Types

New Input Types New Input Attributes
  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week
  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#########################################################################

HTML5 Graphics

Tag Description
<canvas> Defines graphic drawing using JavaScript
<svg> Defines graphic drawing using SVG

 


New Media Elements

Tag Description
<audio> Defines sound or music content
Defines containers for external applications (like plug-ins)
<source> Defines sources for <video> and <audio>
<track> Defines tracks for <video> and <audio>
<video> Defines video or movie content

###################################################################################

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.

Examples of non-semantic elements: <div> and <span> – Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> – Clearly defines its content.

 

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>
  • <footer>
  • <details>
  • <summary>
  • <mark>
  • <time>
HTML5 Semantic Elements

The <section> element defines a section in a document. Grouping of content.

Eg: A Web site’s home page could be split into sections for introduction, content, and contact information.

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.

Examples of where an <article> element can be used:

  • Forum post
  • Blog post
  • Newspaper article

An article can contains sections also..

#####################################################################

Difference between DIV & Section elements?

<div>: The HTML element (or HTML Document Division Element) is the generic container for flow content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element (such as <article> or <nav>) is appropriate.

<section>: The HTML Section element (<section>) represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading.

the only difference between the DIVelement and the SECTION element is semantics. In other words, it’s themeaning of the section of code you’re dividing up.

Any content that is contained inside a DIVelement does not have any inherent meaning.

###############################################################

Difference between section and article?

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

################################################################################

The <header> element specifies a header for a document or section.

The <footer> element specifies a footer for a document or section.

The <nav> element defines a set of navigation links.

The <aside> element defines some content aside from the content it is placed in (like a sidebar).

With HTML5, images and captions can be grouped together in <figure> elements:

<figure>
<img src=“pic_mountain.jpg” alt=“The Pulpit Rock” width=“304” height=“228”>
<figcaption>Fig1. – The Pulpit Pock, Norway.</figcaption>
</figure>
###############################################################################

Why Semantic HTML5 Elements?

With HTML4, developers used their own favorite attribute names to style page elements:

header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, …

This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.

##############################################################################

HTML5 <datalist> Element

The <datalist> element specifies a list of pre-defined options for an <input> element.

The <datalist> element is used to provide an “autocomplete” feature on <input> elements. Users will see a drop-down list of pre-defined options as they input data.

Use the <input> element’s list attribute to bind it together with a <datalist> element.

<form action=“demo_form.asp” method=“get”>
<input list=“browsers”>
<datalist id=“browsers”>
<option value=“Internet Explorer”>
<option value=“Firefox”>
<option value=“Chrome”>
<option value=“Opera”>
<option value=“Safari”>
</datalist>
</form>

In the above example, input list (browsers) and datalist id should be always same

####################################################################################

HTML5 <keygen> Element

The purpose of the <keygen> element is to provide a secure way to authenticate users.

The <keygen> tag specifies a key-pair generator field in a form.

When the form is submitted, two keys are generated, one private and one public.

The private key is stored locally, and the public key is sent to the server. The public key could be used to generate a client certificate to authenticate the user in the future.

<form action=“demo_keygen.asp” method=“get”>
Username: <input type=“text” name=“usr_name”>
Encryption: <keygen name=“security”>
<input type=“submit”>
</form>

#################################################################################

The <output> element represents the result of a calculation (like one performed by a script).

##################################################################################

HTML5 New Input Types

HTML5 has several new input types for forms. These new features allow better input control and validation.

This chapter covers the new input types:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Input Restrictions

Here is a list of some common input restrictions:

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field

<input type=“number” name=“quantity” min=“1” max=“5”>

<input type=“date” name=“bday”>

<input type=“color” name=“favcolor”>

<input type=“range” name=“points” min=“0” max=“10”>

<input type=“month” name=“bdaymonth”>

<input type=“week” name=“week_year”>

<input type=“time” name=“usr_time”>

<input type=“datetime” name=“bdaytime”>

<input type=“email” name=“email”>

<input type=“search” name=“googlesearch”>

<input type=“search” name=“googlesearch”>

<input type=“url” name=“homepage”>

#########################################################################

HTML5 New Form Attributes

HTML5 has several new attributes for <form> and <input>.

New attributes for <form>:

  • autocomplete
  • novalidate

New attributes for <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

#################################################################

<video width=“320” height=“240” controls>
<source src=“movie.mp4” type=“video/mp4”>
<source src=“movie.ogg” type=“video/ogg”>
Your browser does not support the video tag.
</video>

MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML Video – Methods, Properties, and Events

HTML5 defines DOM methods, properties, and events for the <video> element.

This allows you to load, play, and pause videos, as well as setting duration and volume.

######################################################################

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.

Before HTML5, audio files could only be played with a plug-in (like flash).

The HTML5 <audio> element specifies a standard way to embed audio in a web page.

<audio controls>
<source src=“horse.ogg” type=“audio/ogg”>
<source src=“horse.mp3” type=“audio/mpeg”>
Your browser does not support the audio element.
</audio>

The controls attribute adds audio controls, like play, pause, and volume.

Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element.

############################################################################

The <object> element defines an embedded object within an HTML document.

It is used to embed plug-ins (like Java applets, PDF readers, Flash Players) in web pages.

<object width=“400” height=“50” data=“bookmark.swf”></object>

The element is supported in all major browsers.

The element also defines an embedded object within an HTML document.

<embed width=“400” height=“50” src=“bookmark.swf”>

Youtube:

<object width=“420” height=“315”
data=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>
</object>

<embed width=“420” height=“315”
src=
http://www.youtube.com/v/XGSy3_Czz8k&#8221;>

##############################################################################

What is HTML Local Storage?

With HTML local storage, web pages can store data locally within the user’s browser.

Earlier, this was done with cookies. However, local storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website’s performance.

The data is stored in name/value pairs, and a web page can only access data stored by itself.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

HTML Local Storage Objects

HTML local storage provides two objects for storing data on the client:

  • window.localStorage – stores data with no expiration date
  • code.sessionStorage – stores data for one session (data is lost when the tab is closed)

Before using local storage, check browser support for localStorage and sessionStorage:

if(typeof(Storage) !== “undefined”) {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

// Store
localStorage.setItem(“lastname”, “Smith”);
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.getItem(“lastname”);

Example explained:

  • Create a localStorage name/value pair with name=”lastname” and value=”Smith”
  • Retrieve the value of “lastname” and insert it into the element with id=”result”

The example above could also be written like this:

// Store
localStorage.lastname = “Smith”;
// Retrieve
document.getElementById(“result”).innerHTML = localStorage.lastname;

The syntax for removing the “lastname” localStorage item is as follows:

localStorage.removeItem(“lastname”);

Angular UI Bootstrap

Good news folks,

Angular Js team launched its own bootstrap named “Angular UI” recently. Angularjs lovers can use upto max. I hope you will love it. For more clickhere. Wanna looking for some samples with tutorials?? then you should browse youtube/github etc. Else stay tuned to my blog..will post very soon 🙂

25-09-2014 12-24-10

All the best folks 😀

Difference between jQwidgets and ExtJs

Good morning folks,

I have to work for a new project that works with jQwidgets. When i open that link, my mind walk through with old glance which i had earlier with ext js. Immediately i opened it. I felt ext js is more advanced and rich in interface. First question that flows in my mind is why not we shud use ext js instead of jQwidgets. I immediately posted this to my TL. He simply said its an mvc framework. Again question rose why we shud not use it? I thought to better look in web for the answers..Did that immediately..Result is shown below..

JQWIDGETS to be extremely easy and quick and the support provided on the Forum is excellent.

EXTJS on the other hand, is also a powerful product which boasts its architect EDI. But does also make simple tasks slightly difficult and the support/responses on their forums can be very slow or none existent…

Actually, JQuery etc are not frameworks but only libraries.So, that is the difference – solutions based on framework are faster to develop, but usually works slower… until app grows large – and then it becomes faster, because framework allows higher-level optimizations.

If your requirements are simple, publically accessible, and being done by web developers, then use jQuery.

If this is a more complex situation, you have more hard core engineers, behind a username/password, then I suggest ExtJS.

The most obvious difference is that jQuery uses GPL and MIT license, meaning you can use the library for free without much worries; On the other hand, Ext Js is developed by Sencha and is commercially licensed and it is not cheap.

jQuery, at its core (which is small and condense) is a library for DOM manipulation, outside of that, jQuery has a vast repertoire of plug-ins, all free yet with varying qualities; Ext Js provides a comprehensive framework that includes a rigorous class system, a set of utilities that deals with string, date, array etc.,., a complete set of UI controls, most impressive of them being Grid. With Ext JS 4, it also provides dynamic loading and MVC architecture.

jQuery is small; Sencha is heavy-set.

Finally we will leave the option to user plate..technology should be decide by the developer based on projects. Good Luck 🙂

 

For more:

http://thoughtsonscripts.blogspot.in/2013/03/ext-js-vs-jquery.html

Comparision of javascript frameworks

http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks