p (HTML4 & HTML5)

The details element represents a disclosure widget from which the user can obtain additional information or controls. However, the details element is not appropriate for footnotes.

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

When you begin to place more and more elements onto your web site, it will become necessary to make minor changes to the formatting of those elements.

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

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 this example the inline display is used to merge the two paragraphs of example text together.

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.

Links are found in nearly all Web pages. Links allow users to click their way from page to page. Examples using the href and target example.

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.

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.

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.

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.

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.

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.

Images with title and borders

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 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.

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.

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

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

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.

The <audio> tag defines sound, such as music or other audio streams. Tip: Any text inside the between <audio> and </audio> will be displayed in browsers that do not support audio.

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 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.

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.

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

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.

SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer. SVG is mostly useful for vector type diagrams like Pie charts, Two-dimensional graphs in an X,Y coordinate system etc.

The <body> element defines the body of the HTML document. The element has a start tag <body> and an end tag </body>.

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">

The summary element represents a summary, caption, or legend for the rest of the contents of the summary element's parent details element, if any.

The Word Break Opportunity (<wbr></wbr>) specifies where in a text it would be ok to add a line-break. Tip: When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the <wbr> element to add word break opportunities.

HTML paragraphs are defined with the <p> tag. This element is used to define a paragraph of text.

Represents the completion progress of a task. Tip: Use the <progress> tag in conjunction with JavaScript to display the progress of a task.

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.

The <time> tag defines either a time (24 hour clock), or a date in the Gregorian calendar, optionally with a time and a time-zone offset. This element can be used as a way to encode dates and times in a machine-readable way

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).

Any given web page or article could have many sections. For example, a homepage could have a section for introducing the company, another section for news items, and another section for contact information.

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.

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.

<a> tag has a "onclick" event that is triggered when clicked. This is a good place to use JavaScript to build nire interactivity into your web page.

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.

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.

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.

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.

Styling HTML elements with font-family, color, and font-size properties defines the font, color, and size of the text in an element.

If you want to make an image work as a link, the method is exactly the same as with texts. You simply place the <a href> and the </a> tags on each side of the image.

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.

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

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.

Examples of text-specific code that you can create by using HTML formatting tags.

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.

Using jquery manipulation methods, we can replace elements with another 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.

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.

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.

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.

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

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.

Password Field <input type="password" /> defines a password field:

JavaScript event that triggers when object gets focus.

Use CSS to set the font of a text

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.

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

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.

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.

Background image inside a paragraph.

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.

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.

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".

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.

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

Opens a dialog window for printing the current web page.

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

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.

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.

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 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>.

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

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.

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

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).

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

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.

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.

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

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

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

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

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.

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!

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.

Represents a section of a page consisting of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. 12345

Shows how to set text colors on different elements.12345