html (HTML4 & HTML5)

Prompt box used for taking input from user. If you click on ok button then it return input value else it return null

CSS3 animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components: A style describing the animation and a set of keyframes that indicate the start and end states of the animation's CSS style, as well as possible intermediate waypoints along the way.

JavaScript has many keywords some of them are currently in use and some of them are reserved for future use. We can not use the keywords for our general purpose.

The CSS linear-gradient function creates an effect which represents a linear gradient of colors on the element. The Top to Bottom gradient effects the element from top to bottom and the left to right gradient effects the element from left to right.

Table layout styled with CSS attributes and managed by HTML class attribute.

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

The biggest difference between CSS2 and CSS3 is that CSS3 has been split up into different sections, called modules. The support for CSS3 depends on your browser and since CSS3 standard is still being drafted most browser also have support for a prefix on CSS3 properties. -moz- Mozila -webkit- Chrome/ Safari -o- Opera -ms- IE

Basic HTML tags that show how a web page can be created.

The nth child selector is used to select the specified element of the page.

The jQuery load method is a simple to use AJAX (Asynchronous JavaScript and XML.) function. That enables you to load ajax content with one line of code. AJAX is a technique for creating better and more interactive web applications and we at webgrid.com are using ajax with jQuery alot to make this web page better!

CSS shadow work with different elements like box shadow, text shadow etc.

JavaScript is a client side scripting language that can make your webpage intaractive and JavaScript can be embbeded into your static HTML webpage directly.

CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify the effect and the duration.

CSS is the acronym for: ‘Cascading Style Sheets’. CSS is an extension to basic HTML that allows you to style your web pages.

In JavaScript there are functions that can be used to URL encode a string. In JavaScript you can use the encodeURI function

In this example the inline display is used to merge the two paragraphs of example text together.

A margin is the space outside of the element, whereas padding is the space inside the element.

Using the css property we can get the simple CSS property value of an attribute.

In this example, a hyperlink with a destination of "#" is set to display different colouring for different properties.

Think of a combination of an input text element and selection list. Typically used where there is the likelihood of a visitor entering a value of other (not one of the items in the list).

Extend the standard HTML element styles by CSS.

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags or JavaScript.

CSS3 transform property allows us to scale, rotate, spin, stretch, and turn elements.

The contents are interpreted as text only; HTML markup is ignored. The user can type (theoretically) unlimited amounts of text into the textarea field. In reality the browser sets the limit.

With absolute positioning, an element can be placed anywhere on a page. In this example the heading has been placed 100px from the left of the page and 150px from the top of the page. It will remain in this position.

By extending jQuery, you create reusable components that can be used on any web page. Your code is encapsulated and there is less risk that you will use the same function names elsewhere.

A JavaScript can be a small, embedded program that can add interactivity to your website. For example, a script could generate a pop-up alert box message.

CSS3 allows user to use the font that are even not installed on his/her own computer. The fonts that that resides on the server can be used by CSS3 @font-face.

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the browser making it much easier to code up. HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari.

The dimension property of the CSS allows us to manage the height and width of the HTML elements.

This example uses an Internal CSS Style Sheet to make the heading centred, along with the main text. It moves the example date to the right hand side.

With jQuery, you can hide and show HTML elements with the hide and show methods

The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript). The <canvas> tag is only a container for graphics, you must use a script to actually draw the graphics.

Styling HTML elements with CSS (Cascading Style Sheet). CSS was introduced together with HTML 4, to provide a better way to style HTML elements.

jQuery selectors allows us to select HTML elements and manipute them as a group or as a single object. In jQuery it's common that selectors start with dollar sign and parentheses. Syntax:- $.(selector).methodName();

In this example two lines of text have been bordered using thick and medium widths. They have a "border-style" of "solid" to ensure the borders display correctly.

CSS multi columns property builds on the Box model module [no public working draft yet] and adds functionality to flow the content of an element into multiple columns.

The flexible box layout gives us a way of creating flexible boxes. It lets us align and distribute boxes vertically and horizontally as well as have boxes flex to use all available space. You can also display the elements in reverse order compared to how they are ordered in the markup.

In this example, four thumbnails are floating below heading. Try to resize the browser window to see how the float to the right.

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

jQuery is a very powerful tool which provides a variety of traversal methods to help us select elements in a document randomly as well as in sequential method. In other words, we can say that most of the traversing methods are used to find elements from the documents.

The HTML5 Geolocation API is used to get the geographical position of a user. NOTE: Since this can compromise user privacy, the position is not available unless the user approves it.

Javascript Events are the actions which are detected by the javascript when they are fired.

Grouping is the method to group the selectors which have same property. It minimizes the code. We write the selectors by separating them using comma.

Shows how to set text colors on different elements.

jQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. jQuery is an open source JavaScript library that simplifies the interactions between an HTML document, or more precisely the Document Object Model (DOM), and JavaScript.

jQuery animate method is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple.

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". "id" and "class" are attributes to most HTML elements.

The <script> tag is used to define a client-side script, such as a JavaScript. The script element either contains scripting statements or it points to an external script file through the src attribute.

jQuery.support is a collection of properties that represent the presence of different browser features or bugs. Primarily intended for jQuery's internal use; specific properties may be removed when they are no longer needed internally to improve page startup performance.

Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code.

A selector is made up of pattern that is matched against all elements in document.

Introduction to jQuery and how to attach a handler to one or more events for all elements that match the selector.

JavaScript setTimeout function provides the functionality to execute the specified function after the sepcified number of milliseconds. Using the JavaScript setTimeout function you can set the delay before function execution.

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.

JavaScript clearTimeout function enables you to stop the timer event started by the JavaScript setTimeout function. When you apply the setTimeout function using a recursive loop over the JavaScript function by specifying the time delay then it calls the function continuously after equal intervals of time.

Some of the most basic components we can manipulate when it comes to DOM elements are the properties and attributes assigned to those elements

This example sets the main background to blue, and the background of heading 1 to green. This is set using an internal Style Sheet.

Cookies are stored by the web browser. They allow you to store particular information about a user and retrieve it every time they visit your pages. Each user has their own unique set of cookies

The switch statement is used to select one statement from the many blocks. This is used on place of nested if…else. If there are number of if..else statements then we should use switch.

jQuery provides methods to manipulate documents in efficient way. You do not need to write big code to modify the value of any element's attribute or to extract HTML code from a paragraph or division.

jQuery AJAX life cycle demonstration. This is a demonstration of the methods ajaxStart, ajaxSend, ajaxComplete, ajaxStop, and ajaxSuccess that are triggered when load method is called.

JavaScript statement is a command that tells a browser to tell what to do. JavaScript statements is a instruction to browser and the statements are executed sequentially.

JavaScript validation are client side scrips that is used to reduce the server load because all validation are check on client browser. This example has a required validation on the input box.

A function in Javascript is a group of statement that is executed when it's triggered. A function can be called from anywhere within the page. As it is the part of javascript it is defined under the <script> tag.

JavaScript "==" is equal to operator.

Javascript variables is a key to an object of data. Variable is defined using 'var' keyword and JavaScript variables are case sensetive, so 'key' and 'Key' are two different variables.

JavaScript if…else is a conditional statement that is used to check wether a condition is true or false to take a decision.

jQuery ajaxStart and ajaxComplete are two functions are very useful to show the graphics while the data is loading from server. The ajaxStart method works while the server fullfilling the service asked to it. The ajaxComplete method is called when the server fulfilled the request.

Arithmatic operators are used to perform operations on the numbers.

There are some guidelines which must be remembered while coding in javascript. 1) Javascript is case-sensitive language. 2) JavaScript ignores extra white spaces. 3) You can break the line of code.

An object is an entity which can have properties, events and methods. This example creates a simple string holding the text 'hello world'. Some Standard Objects that are part of the JavaScript are 'String','Date','Array','Boolean','Array','Math' and 'RegExp'.

Javascripts loops are similar to other programming languages. Loops allows us to execute a block of statements to the specified number of times.

Javascript Try…catch statement to check if there is errors in a block of code.

This allows us to animated the element movement infinitly.

This example the a line of text has been set a background color. Each paragraph is setting color by hex, rgb or color name.

Drag and Drop magic with HTML5 using an image to drag back and forth between four <div> elements.

These events are fired when a web page is loaded to browser and when user leaves the page.

This HTML element identifies an HTML document (web page).

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>.

The jQuery toggle method toggles the visibility of HTML elements using the show or hide methods. Shown elements are hidden and hidden elements are shown. The speed parameter can take the following values: "slow", "fast", "normal", or milliseconds.

Use the meta tag to make the cache for your web page expire. If you are looking for a way to stop Google from caching your site, the Meta Expires tag will not do this for you. To stop Google to caching your site use following meta tag: <meta http-equiv="cache-control" content="no-cache">

CSS3 transitions are effects that let an element gradually change from one style to another. To do this, you must specify the effect and the duration.

The HTML div element is a block level element used for grouping HTML elements.

HTML elements with no content are called empty elements. <br/> is an empty element without a closing tag (the <br/> tag defines a line break). Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

Triggers whenever you Select/Highlight some text within textbox or textarea.

The HTML <keygen> tag is used for generating a key pair. When the control's form is submitted, the private key is stored in the local keystore, and the public key is packaged and sent to the server.

CSS3 allows user to use the font that are even not installed on his/her own computer. The fonts that that resides on the server can be used by CSS3 @font-face.

JavaScript clearInterval function enables you to stop the timer event started by the JavaScript setIntterval function. When you apply the setInterval function a JavaScript function by specifying the time interval then it calls the function continuously after equal intervals of time.

The drawImage method allows you to insert other images (img and canvas elements) into your canvas context. To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point is relative to the top left corner of the image.

jQuery allows to change the multiple CSS properties value at once.

The HTML button tag inserts a button control in a form or document. Differently from the HTML input element using "button" in the "type" attribute, this button can contain other HTML elements like the second button in this example.

This example uses an internal CSS Style Sheet sets the body text to blue, and changes H1 to green (#9AFE2E) and H2 to red (#FF0000).

In this example we forgot the end tags for our HTML paragraph tags (</p>). Some HTML tags might display correctly in some browers even if you forget the end tag.

jQuery events can be used to register behaviors to take effect when the user interacts with the browser, and to further manipulate those registered behaviors.

JavaScript validation are client side scrips that is used to reduce the server load because all validation are check on client browser. This example validates numeric characters on the input.

To align HTML5 Canvas text, we can use the textAlign property of the canvas context, which can be set to start, end, left, center, or right. Unless otherwise specified, the textAlign property is defaulted to left.

This allows us to move the animated element to move from one place to another.

CSS syntax is as selector{property:value;}. Here selector is the element on which we want to apply the CSS. Property may be height , width ,color etc. The value may be in percent , numbers or letters.

Jquery traversing methods can be used to locate all the descendent elements of a particular type of elements.

* selector selects all the elements of the page and apply properties defined under it. If we have some properties that should be applied on all the elements, then * selector is used

A basic web page with some text, paragraph, bold text and line breaks.

This event are fired when a key is pressed. IE 8 and earlier use event.keyCode to retrieve the key that was pressed down, while Firefox/Chrome/Safari/Opera use event.which.

CSS class selector is defined using "."(dot) for example ".class1". The class selector can be used more than one in same document. The ID selector is defined using "#" (hash), for example "#id1". The id selector can only be used once in same document.

JavaScript setInterval function provides the functionality to execute the specified function after the sepcified time interval in milliseconds. Using the JavaScript setInterval function you can set the time interval to call a function again and again.

CSS3 transitions provide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.

Href (Hypertext Reference) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location on current webpage or external webpage.

Javascript Try…catch statement to check if there is errors in a block of code.

This example uses a basic internal CSS Style Sheet sets the page background to green (#9AFE2E), and then we add CSS attributes for <h1> and <p> tags.

Here in a text box the timer is display on "start count" button click and stop on "start count " click

Form containing two radio buttons and two checkboxes. Note: The name attribute is used to group the radio buttons and checkboxes into groups.

Unordered or ordered lists can be arranged in two, three, or more columns using nothing more than css. We force the list to break at the right point. If We want two columns, you need to float the list items left and set them at 50% width and for three columns would require a width of 33% and floated left, four would be 25% and so on.

This animation allows to add time to animation effect.

JavaScript validation are client side scrips that is used to reduce the server load because all validation are check on client browser. This example validates the input matches a valid e-mail address with a regular expression.

The jQuery slideUp and slideDown methods gradually change the height of the selected elements.

Perform a calculation and show the result in an <output> element

The jQuery nth-child is used to select all elements that are ntg-child of of their parent. The nth-child(n) is “1-indexed”, meaning the “n” is counting starts at 1. Because jQuery's implementation of :nth-child(n) is strictly derived from the CSS specification, the value of n is "1-indexed", meaning that the counting starts at 1. For all other selector expressions, however, jQuery follows JavaScript's "0-indexed" counting.

HTML5 canvas populated with one filled rectangle and one painted stroke.

CSS display block property displays the HTML elements in the block.

JavaScript validation are client side scrips that is used to reduce the server load because all validation are check on client browser. This example validates alphabetic characters on the input

Create a new window and move new browser window.

HTML script tag is used to define an section with javascript. In our example we have created two javascript function in the header. Note that each link shows a different way of calling the function.

jQuery mouse events are events that have to do with actions of the mouse. These can be a click, double-click, mouse down and more. Mouse events can be used in two different ways.

The CSS radial-gradient function creates a effect which represents a gradient of colors radiating from an origin. Radial gradients are defined by their origin and the angle, orientation, and type, a circle or an ellipse of the spreading shape.

CSS stands for Cascading Stylesheet. This add new look to the basic HTML and manages the HTML according to our needs.

CSS pseudo-classes are used to add special effects to some selectors.

The text-align property specifies the horizontal alignment of text in an element.

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags.

Using jquery manipulation methods, we can replace elements with another elements.

The jQuery fade methods gradually change the opacity for selected elements.

CSS colors can be appied radomly using RGB combination (Red,Green,Blue).

jQuery provides methods to manipulate documents in efficient way. Using jquery manipulation methods, we can insert element in given document. Like here we add a new element before the blue square.

Register a handler with jQuery to be called when Ajax requests complete with an error. Whenever an Ajax request completes with an error, jQuery triggers the ajaxError event. Any and all handlers that have been registered with the .ajaxError() method are executed at this time.

jQuery Animate can function supports animation in different directions

The HTML div element is a block level element is also nice to use for positioning around on the web page. In this example were two small boxes is position relative to the larger box.

The CSS radial-gradient function creates a effect which represents a gradient of colors radiating from an origin. Radial gradients are defined by their origin and the angle, orientation, and type, a circle or an ellipse of the spreading shape.

he <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting. The noscript element can contain all the elements that you can find inside the body element of a normal HTML page. The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:

CSS Transforms offers you the possibility to scale, rotate, reposition and skew an element through CSS. We can now combine this with CSS Transitions to create a nice example that will both scale and rotate an element when hovered

The switch statement is used to select one statement from the many blocks. This is used on place of nested if…else. If there are number of if..else statements then we should use switch.

You can specify the border-radius value in pixel and percentage.

By using the style element you can map CSS attributes to class attribute used on HTML elements. For advanced examples on this topic please see advanced HTML.

jQuery.browser contains flags for the useragent, read from navigator.userAgent. We recommend against using this property; please try to use feature detection instead (see jQuery.support). jQuery.browser may be moved to a plugin in a future release of jQuery.

The jQuery animate method has a complete method we can supply with callback function that is fired once the animation is complete. This can be useful for stringing different animations together in sequence like this example.

The <embed> tag defines a container for an external application or interactive content (a plug-in).

This example uses "z-index:100" to place an image above the text. Try to change z-index to -1 and see the image fall behind the text.

Colors can be applied to any HTML element. Like div, text, body ,paragraph etc.

Using CSS font properties we can set the color, hight , width ,size and alignment of the Font.

This will make a red dashed border around all HTML primary headers (H1)

Using CSS border we can set style, color, width of the borders of an HTML element.

With jQuery you select (query) HTML elements and perform "actions" on them. The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s) or attributes to element(s)

CSS box with shadow is applied with the boxes.

CSS margin and padding properties are used to spacing out the elements. A margin is the space outside of the element, whereas padding is the space inside the element.

It is possible to add more than one class to an HTML element. Classes are written within the same attribute, with spaces separating each class. The advantage of multiple classes is that you can write a CSS rule to select either of the classes – and they both affect the same element.

Use CSS to set the font of a text

JavaScript event that triggers when object gets focus.

We can apply multiple shadows of the box or text at the same HTML element.

This example shows you three lines of text, two controlled by a class. Each class has a different font applied. The fonts are applied using an internal Style Sheet. The "Example Fonts" is using a simple <h1> tag.

Relative position specifies the position of the element within the area. It will not go outside of the containing area.In the given example the containing area is body of the page.

A function can take arguments whenever it is called. When arguments are passed on calling of function, the fuction is called 'function with arguments'. When a funtion does not take any argument function is called 'function without argument'. A function can return a value using the keyword 'return'.

This example two lines of text have been bordered using red and green colouring. They have a "border-style" of "solid" to ensure the borders display correctly. Without setting the style, the color change will not work.

This example shows you how to use an internal CSS StyleSheet to apply margin options. The top line has no margin, whereas the second line of text has a margin on both sides of 50px.

The xmlns it is a namespace, to tell browsers where to find the document type definitions ( ~ xml schema) so it can render the page properly and the xmlns attribute is required in XHTML, but invalid in HTML. (All our examples are XHTML)

This property makes the element fix on the page. Scrolling will not effect the position of element Please ensure the browser window is small enough for a scrollbar to appear, this fully demonstrates the fixed positioning.

The Frame and Iframe represents html frame and iframe respectively.This DOM object has all the properties that a HTML element has. We can change these properties using javascript.

screen object gives your browser screen information like width,height,color depth.

This example shows you how to use an internal CSS Style Sheet to apply padding options. The top line of text has no padding, whereas the second line of text has 25px padding at the top and bottom, and 50px padding on either side.

The CSS inline-block for the display property it’s a way to make elements inline, but preserving their block capabilities such as setting width and height, top and bottom margins and paddings.

CSS3 allows user to use the font that are even not installed on his/her own computer. The fonts that that resides on the server can be used by CSS3 @font-face.

Every website is built inside directories on a Web server. And each Web page is a separate file on that Web server. But sometimes, when you go to a URL, there is no file listed in the URL. For example: http://www.webgrid.com But there is still a file that the Web server needs to serve in order for that URL to display anything other than an error page. This file is the default page for that directory. On most Web servers, the default page in a directory is named "index.html".

These are used to apply the properties on the elements that are either enable or disable.

This property allows us to define the maximum and minimum hight and width the elements of the HTML.

Opens a dialog window for printing the current web page.

CSS padding is used to make the gap between the container and the text.

JavaScript random method returns a random number between 0 and 1.

To have the effect for bottom text we have created a master container where the position to all child elements position is relative to the master container. And we used a child container with a absolute position to bottom and left for the master container.

jQuery animate also support different properties and multiple unit types within one animation.

In CSS a parent element is an element that contains other elements. All elements that are contained within that parent are called "child" elements. Using the CSS child selector, you can define properties that only affect elements that are children of other specific elements. Every element is a child of another element except the root element, which has no parent.

This selector is used to apply the CSS property on the element which matches the value with the give attribute.

It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right.

Using nesting of selectors we can specify the properties to selectors within selectors.

This gradient has arbitrary stops according to our needs.

Using jQuery manipulation methods, we can remove elements.

The HTML head Element The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

JavaScript logical operators are used to determine the logic between variables and values.

Above shows refreshing webgrid's home page every 30 seconds. A quick refresh may be necessary for news, stocks, or any other time-sensitive information.

The flexible box model has box-pack nad box-align properties. The box-pack property allows to fit the boxes that are in horizontal manner. The box-align property allows to fit the boxes that are in vertical manner. The box-ordinal-group property allows to set the order of the boxes manually.

This statement allows us to select one statement among many statements.It is also called nested if….else.

CSS3 allows you to format your elements using 3D transforms and here we have rotated 180 degrees around X axis.

Javascript provides us the facility to break a loop in middle and also to continue the loop without executing the whole body of the loop.There are two keywords that provides these facilities: 1) break 2) continue

In this example a line of text has been bordered using different border styles.

CSS display property specifies how an element is displayed. The 'none' property hides the elements.

The revised meta tag records when the last update was done to the site.

jQuery contains powerful methods (functions) for changing and manipulating HTML elements and attributes. Click on the button to see jQuery hiding the paragraphs.

This selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. CSS :odd is the same as :nth-child(odd) or :nth-child(2n+1)

Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

CSS floating allows us to push an element either left or right.

This selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. CSS :even is the same as :nth-child(even) or :nth-child(2n)

In this example two lines of text we borders at 15px and 10px width. They have a "border-style" of "solid" to ensure the borders display correctly.

CSS position property allows us to set an absolute position to an element (relative to it's environment). We can set the position of an element using the top, right, bottom, and left properties.

JavaScript can be written at any place in the page or can be in external file. JavaScript is written in the head section in <script> tag.

The text shadow is used with the text of the page.

This event is fired when the form is submitted. This is only works with the form element of the HTML.

Most of the JQuery Traversal Methods do not modify the jQuery object and they are used to filter out elements from a document based on given conditions. The filter( selector ) method can be used to filter out all elements from the set of matched elements that do not match the specified selector(s).

The vertical-align property sets the vertical alignment of an element.

jQuery also allows us the set the property value of the CSS.

Using text properties of CSS we can set the height, width , color of the text

Linear Gradient effect with even stops.

XHTML is a stricter and cleaner version of HTML where All XHTML elements must be nested within the <html> root element. Child elements must be in pairs and correctly nested within their parent element.

This property allows us to define the height and width of the HTML elements in the percentage.

The Navigator object contains information about the visitor's browser.

You can specify the border-radius value in pixel and percentage.

Count number of attributes that exists for the button.

Multi columns property allows us to define column rule and the gap between column and column fill type.

Do…While loop is the varient of the while loop. The difference between while and do…while is that while loop only executes if the condition is true while do….while loop executes atleast once even the codition is false.

make your HTML pages become more dynamic and interactive by using JavaScript

<!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed

We are here using Core DOM setAttribute method we set the value of input type text to button.

The HTML paragraph element is written on the web page before the dynamic content from the script. That is because the script tag is after the paragraph tag. If you move the HTML script element to the "head" tag you will see the dynamic text is written first!

Example how to call anonymous function on setTimeout function.

The link object is used to include the external file in the web page. This tag must be inside the head tag of the page. Here is the example of the link that give the type of the external sheet.

jQuery selectors allow you to select and manipulate HTML elements as a group or as a single element.

A javascript Math object allows us to perform the mathematical tasks.

A small example displaying the usage of two JavaScript keywords in a code block.

<!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. This declares the document to be HTML 4.01 Strict. HTML 4.01 Strict is a trimmed down version of HTML 4.01 that emphasizes structure over presentation. This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center).

The Date object is used to work with dates and times.

If you provide a return statement inside a function you may specify the value that you would like to return from the function. So, functions that are going to return a value must use the return statement.

Enables you to remove a client cookie with JavaScript. We remove the cookie by setting the expiration date for the cookie back in time.

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.

Almost all JavaScript code should be in separate JavaScript files. There should be the smallest possible amount of JavaScript inline in the HTML code of pages.

JavaScript regular expression can be used to maniplate strings and perform text searches. In this example we do a case-insensitive search for "www.webgrid.com" in a string.

JavaScript < is less then operator.

Javascript array is used to store multiple values in a variable.

If a variable is defined in a function then it will be local for this function, it can not be used outside of that function. A variable which is defined outside of the fuction becomes Global and this variable can be used in whole webpage document.

While most current browsers understand Javascript a lot of the early browsers did not. The current browsers also allow Javascript to be turned off and some people do this. What this means is that not all of the visitors to your page will see the effects of the JavaScript on your page. We need to make sure that these visitors can use our site even without JavaScript.

JavaScript "==" is not equal to operator.

JavaScript code are the sequence of statements.These statements can be grouped. These grouped are called blocks and the blocks are created using {} brackets.

As 'for loop' executes the specified number of times, the while loop executes while a condition is true.

The String object is used to manipulate texts.

The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).

The flexible nature of JavaScript variable types can lead to confusion as to the particular type of a variable at any given time in a script. To address this concern JavaScript provides the typeof operator. The typeof operator returns the current variable type of the specified variable.

JavaScript "===" is exactly equal to (value and type) operator.

Try not to use too many different JavaScript files. Each separate file that the browser has to load incurs an overhead. You may consider to merge and minimise JavaScript files before you publish your website. This to reduce the bandwidth usage and lower webpage load time.

Comparision Operators are used to compare the values of the variables, and the result is used to make the decision.

Javascript assignment operators are used to assign values.There 6 assignment operators that can be used.

JavaScript > is less or equal to operator.

JavaScript > is greater or equal to operator.

JavaScript > is greater then operator.

The || (or operator) logical operator are used to determine the logic between variables or values.

The && (and operator) logical operator are used to determine the logic between variables or values.

The ! (not operator) logical operator are used to determine the logic between variables or values.

The bdi element represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.

Shows how to set text colors on different elements.12345