Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
HTML5

Featured

How to rotate in CSS3 around its axis

Hello, readers, this is a small blog on how to rotate in CSS3 around its axis. To achieve this we will make a file index.html. Copy the below-written code in this file. <!DOCTYPE html> <html> <head> <meta charset="utf...

How to make your divs to display horizontally not Vertically

Hello Readers, this is a small blog on making divs display horizontally not vertically. Here is a very simple and easy code that will make divs to stack horizontally.     To achieve this we will make  HTML page and  CS...

Parallax Scrolling

Hello Readers! In today's blog we discuss about the technique which is in biggest trend on the web for some time now, that is , parallax scrolling! In web design use, parallax is referred as the scrolling technique which is used to create the...

Form Validation in AngularJS with ngMessages

In this post, you will learn about ngMessages directive in angularJs and how it can help to show error messages in your application. ngMessages provides custom form validation facility to display error messages in angularJs. Let’s start ...

An Overview to HTML5 Global Event Attributes

Hello readers, Today we will discuss about the HTML5 various global event attributes , these are of various types such as window events, mouse events, form events and media events. Whenever any user visits a website it generates any action eit...

An Overview to Meta Tags

What is Meta Tag ? It provides information known as data in an html document. It allow us to develop the description of the web page. It is used by search engines to index a page so that the user can easily find it. It help the user t...

How to display video background in html

In this post, you will learn about video display in background using html and css. There is video tag in HTML5 which you can use to embed a video in your web page. <video width=450" height=340" controls autoplay> <source src=abc....

An Overview to HTML5 Attributes

Hello readers, Today we will discuss about the HTML5 Attributes. Basically attributes are used to define some additional information about the HTML elements. As there are various global and custom attributes used in HTML5. Features of HTML5 at...

Adding/Removing input fields on button click

In this blog, we are adding input field by clicking on more button and removing input field by clicking on erase button. The procedure of doing this is very simple and easy. I have provided the code for doing this below . In below co...

An Overview to HTML5 Elements

Hello readers, Today in this blog we will discuss about HTML5 various elements, its syntax and various tags that are used in it. Features included in HTML5 - The tag name remains uppercase. For attributes the quotes remains optional. ...

An Overview to HTML5

What is HTML5? It is a Hyper Text Markup Language which is used for structuring and presenting content on Internet. It is the current version for HTML. Its previous version was HTML 4.01. It is the 5'th version of the HTML standar...

Spellcheck Attribute in HTML5

Hello, reader's Today we will discuss about the HTML5 attributes. Basically attributes are used to define some additional information about the HTML elements. As there are various global and standard attributes used in HTML5. Here , we wil...

Structural Semantic Elements in HTML5

Hello readers, Today we will discuss about the Structural Semantic Elements that are used in HTML5. Introduction of HTML5 HTML5 is basically a latest and an enhanced version of HTML. HTML5 has various new features including new elem...

Spinning Preloader

Hello reader's, we all have seen preloaders whenever we visit any website, at the loading time it appears at the window panel. I have just tried to create a preloader using bright colours with a punch of animation over it which therefore seem...

How to set portrait and landscape media queries in css

If you want to set your view for a specific device, you need to use media query css to get that. To set css for landscape and portrait view, you need to add the following lines into your css file. @media only screen and (orientation: land...

Flipping Effect using CSS3

Introduction to CSS3 CSS3 is the successor of CSS2 which comes with various new modules such as selectors, borders and background, 2D/3D Transformations, text-effects, box-model, Animation and Multiple column layouts etc.   Flipping...

How to integrate progress bar with Angular UI Bootstrap

How to integrate progress bar with Angular UI: To use progress bar in angular, you need to include the following code in your controller: Syntax: <uib-progressbar value="" max=></uib-progressbar> It has attributes like m...

How to make slide check box in html using CSS?

Hello Reader's if you are looking for slider design of checkbox then this blog will be helpful to you. Lets see how to make checkbox with slider desing. First we will create the html file and it's code will go like this:- <div> ...

How to control the media playback using JavaScript:

While embedding a video to your webpage, very first thing you need to keep in mind is the browser support, like where this will work and where it will not. Only the latest versions of most browsers support native video playback using HTML5's "vid...

How to make multi color placeholder for input controls in HTML5 and CSS3

Hi all, While designing a form in html with CSS3, I came across a situation where I have to set the color of asterix sign which was a part of placeholder in textbox input type and to do that with CSS3, I used to following block of code: in ...

HTML5 elements

HTML5 is having new elements, which helps the developer to make their document in the form that can be easily understood. By using HTML5 elements there is no need to use <div> again and again. This makes our work easier by using less number...

Bootstrap Tooltip Plugin

The Tooltip plugin is used to show the details of an element when the user will hover on that element. It will show a small pop-up in the specified position to the element. You have to use data-toggle="tooltip" attribute and a title in the ele...

How to play a vedio from your own server to your web page

Hello Reader's if you want to integrate vedio from your own server to your webpage then you can use HTML5. Now HTML5 offers you to use <vedio> tag. Lets see the example as below to show vedio <!DOCTYPE html> <html> <...

How to create SEO friendly responsive web page in HTML5

Hi Guy, In this Blog, We will discuss about how to make a SEO friendly web page with the help of HTML5 and CSS. Note that for making this tutorial simple, we only consider the aspect of making a web page not whole website.   ...

HTML5 Download Attribute

Hi All, Recently I came across new features in HTML5 that was quite impressive and one such is the new download attribute. This new feature allows you to set a separate download file name than the actual file name available in the link itself....

How to put text align to veritcal using CSS 3

Hello Reader's if your are looking for the code to write the text with alignment upward, Then you can use the code css as below:- -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); writing-mode: tb...

DOM Element Replacement in jquery

If you want to replace html element with some other element, the jquery replaceWith method can be used. You can replace some specified DOM element with the other html or DOM element. The replaceWith() method is used in this case. Syntax: ...

Slidebar Menu plugin in Jquery

We can create a slidebar menu using jquery slidebar plugin. It is a jQuery plugin that gives a slidebar menu for easily implementing in the web pages. We have to include slidebars.js in our source files. Here is an example that shows how to...

HTML keygen Element

The HTML keygen element is used in submitting the forms with security. This submits a public key and generates a private key. It is used in the form to generate key pair. When we submit the form, it creates two key pair, one is for Public Ke...

IndexedDB

The indexeddb is used to store the data in the browser. It is not a relational database and stores values in the form of key-pair. There are different methods used for performing different actions for a database like add(), get(), remove(). ...

Playing a YouTube Video in HTML

To display a youtube video in your web page, you have to use an id (like XGSy3_Czz8k) that will be displayed by the youtube when you save (or play or share) a video. You can use this id, and embed your video in the HTML code. Following are t...

Web Storage in HTML5

There are two storage session storage and local storage in the new web storage API in html5. HTML local storage contains two objects for storing data on the browser: window.localStorage - stores data with no expiration date window.session...

What is a Web Worker?

Hi all, Below is a short description of web workers. What is a Web Worker? Web worker is JavaScript which runs in backside without affecting the performance of site and it is independent of other the scripts,. what web worker are f...

How to integrate the Tiny Mice editor

Hello Reader's if you want to integrate the html editor in your form then by using tiny mice you can make the html editing more easy. Lets see how to integrate the tiny mice editor. first you have to open the html file and put the two JS CDN ...

What is semantic elements ?

Hello all, Semantic elements clearly defines its content. It means that elements which are recognize by their name in html for example <hedaer > , <nav> , <footer>. You can say it helps understand what is happening on the pag...

html link styles

html link styles. We can change the style of link such as background color, color and text decoration on various event done by mouse such as hover,active and visited through style property.Customization can be done according to your requiremen...

What is grid system ?

What is grid system ? Grid usage to guide design and page layout is in practice for around 100 years now Rationalism and New Objectivity came into picture in 1910s and 1920s due to ornamental design This shift in design was responsib...

How to use HTML5 Local Storage

HTML5 Local Storage(Web Storage) mechanisms provides you the facility to store data much more easy way than cookies. Local storage save the data more secure then cookies, where cookie only can store data up to 5mb, local storage capacity is far l...

What is progress Element in HTML5 ?

The <progress> Element is use to show the completeness of the task. We can use script to manipulate the value of progress bar. This tag is new in HTML5 and progress element have start tag (<progress>) and end tag (</progress>...

Star rating using pure css

Hi all, Below is an example, how to make star rating using pure css. CSS - .rate { float: left; } .rate:not(:checked) > input { position:absolute; top:-9999px; } .rate:not(:checked) > label { float:right; ...

What is input pattern ?

The pattern value is use in input box which tells the user, In which pattern value will store in database. If the value is according to pattern then data will store otherwise it will shows an error. Its works with following input types:- t...

Displaying Map using HTML5

Html5 provides geolocation API by using which we can display the results in a Map. Following example shows how we can show the Map in html5. To display the result in a map, you need access to a map service, like Google Maps. <!DOCTYPE html&...

Geolocation API in HTML5

HTML5 Provides new feature of geolocation API which can help user to find his current location and share the location to the web site. It works with the javascript which capture the latitude and longitude of the user. It works with the global ...

How CSS triangles work?

Hello folks, How css triangle works ? actually when we create css triangle, its means we are just showing and hiding borders of any element. The angle intersects at (45) so the intersection edge is used by border here and we can also skew a...

HTML5 Web Worker

A web worker is basically a javascript code that runs in the background. It does not effect the performance of the Page. Usually When we run some script in our html page the page do not response until the script finishes. By using Web Workers ...

Custom select box

Hello Friends, If you are looking to create a custom select box, you can use below HTML and CSS code I have provided. Below an example of custom select box. HTML - <div class="wrapper"> <input id="textfield" type="te...

How to Make SlideShow in HTML5

In the past year, We were using Javascript and jQuery for image slideshow(image Slider), But nowadays we can make slideshow easily with the help of HTML5. In this blog I am going to discuss about how to make slideshow in HTML5 with complete exp...

How to upload image using simle Jquery and HTML5

Hello Reader's! If you are developing the html5 based ajax image uploader then you can look this jquery as the best and easy to use. Lets see how to upload images 1) include two JS file <script src="jslibs/jquery.js" type="text/javascri...

SVG Matrix transformation

The SVG stands for "scalable vector Graphic" and below are the example for SVG matrix. The matrix looks like this: a c e b d f 0 0 1 There is only first 6 values can be specified, you only provide 6 values to the matrix transfo...

Draggable and resizable a block using HTML5 and Javascript

If you want your block draggable and resizable, the following code will help you for the same: HTML: <section class="map"> <div class="container-fluid"> <div class="this-week panel-group dayListing" id="ac...
Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: