Featured
-
Creating Horizontal Menu Bar Using Html and CSS
Hello readers, If you want to create a horizonta
by nitish.rawat -
Custom checkbox using jquery
Hello Reader ! Here is an example how to make
by mukul.kant -
How to make Sticky navigation
Hello Readers ! Below is an example of sticky n
by mukul.kant -
Smoke Font Animation
Hello Friends, The following codes below is an an
by kushal.kant -
How to Make A Simple DropDown in HTML With The Help of Jquery and CSS
You Can Use Below Code to Make A Simple Drop D
by indresh.kumar
Tags
Why you Need to be Ready for Flash to HTML5 Conversion?
It's been only 8 years since Steve Jobs announced the death of Flash, but in the field of computing, that's a long time. Steve Jobs is no longer in this world now, but his prophecy came true. His decision to block the use of...
How to Use Parameters in HTML5 Video Tags/Attributes
One Of the Most powerful elements of HTML5 is Video. The video element is used to embed the video in the HTML page.
There is no need of any plugin or other markup, and the best thing is that it supports all the major browsers. You have to just...
How to use HTML5 download attribute
HTML5 provides download attribute that can be used in place of PHP-driven file download scripts. In this article, you will come to know about this new attribute of html5.
One Attribute, Two Functions
download attribute sets a file download na...
Storing Objects in HTML5 localStorage
In HTML5 there is a new feature of localStorage. With this feature web pages store data locally inside the user’s web browser.
Earlier, cookies were used for storing data. The data is used only when it is asked. also you can not store larg...
How to disable zoom via mouse scroll on embedded Google Maps?
Hello, Readers!
I worked on a PSD recently and it required me to embed a map into it which was done successfully. I embedded a Google Map using iFrames.
But in doing so, I came across a problem. The problem was: When we/user scroll the page...
SVG element in HTML5
Hi Readers!
This blog post will discuss the basic concepts of HTML5 SVG element.
SVG stands for Scalable Vector Graphics. It is used for describing 2D-graphics and graphical applications in XML. SVG is used to define vector-based graphics i...
How to remove the space between inline-block elements?
Hey Readers!
We must have all used the display property. One of the values for the property is inline-block. There is a certain problem with these. Inline Blocks have this weird space in-between them. The actual space is in the HTML.
I am p...
Why does CSS work with fake elements?
Hi Readers!
The other day I was experimenting a little with CSS and this is what I came up with.
<style>
imsocool {
color:blue;
}
</style>
<body>
<imsocool>HELLO</imsocool&g...
Uses of dragging and dropping elements in HTML5
Dragging and dropping can enable users to drag an object from one destination point and drop it to different location into the same webpage. This is a very instinctive way for users to interact with your webpage.
Where we have to use Drag and ...
Password Validation using HTML5
Hello Readers
In my last blog I have explained about how you can validate password with regular expressions using JavaScript, now in this blog, I’m going to tell you the HTML5 process for the same, so basically this article will guide yo...
How to draw different shapes with canvas?
Hello readers, today we will discuss canvas element for drawing different shapes like triangle and square. Canvas element of HTML is used to draw graphics on the web page. In my example, I am using this element to draw a triangle and square...
Checkbox validation with Html5
Hello Readers!
In my earlier blog post, I explained about the checkbox validation using Javascript. This blog post will explain you the same thing using HTML5. Let me give a brief overview of checkbox validation here too.
While fi...
Chapter 5: Audio and video
HTML5 have native feature for audio and video facility and for it you do not need to have flash.
There are two tags <audio> and <video> it is very simple to add media in your website for it you just have to set the source path. B...
Chapter 2: HTML5 syntax
Hi All,
HTML5 is much smarter, so its need simple syntax to specify it, Few of them are below:
Quotes are optional for attributes.
Uppercase tag names.
Closing empty elements are optional.
Attribute values are optional.
...
Chapter 1: An Introduction to HTML5
Hello readers,
This is the my first post for html5 tutorial. Here are some basics for HTML's which will help you for the forthcoming post.
HTML5 is the most latest version of HTML. HTML5 is a markup language HTML documents described by ...
Type attribute of script and style ?
Hello Readers,
Probably sometimes you see it when you use internal CSS, internal JS or in link text, and you are not if you are not using this (eg.- type="text/css"), also your script and CSS works.
So why we need this?
In the ...
HTML Embed Multimedia
Many times you have to include music or video into your website. The most effortless approach to add video or sound to your website is to use the HTML tag called <embed>. This label makes the web browser to itself incorporate controls for t...
Use of dir attribute in Html
dir attribute:
It is used to specify the direction of text in Html element content. In Html5 it can be used with any html element. Prior to Html5 it cannot be used with <base>, <br>, <frame>, <frameset>, <hr>, <...
contenteditable attribute in html5
contenteditable attribute is a new feature added to HTML5. By the terminology, we understand that this attribute is used to specify that whether the contents of an element are editable or not. This attribute was designed and implemented by Micros...
Pattern Attribute in Html5
Pattern Attribute:
Pattern attribute is used for input field validation and used to provide a regular expression which is used to match the input fields value whether the value is according to the pattern specified or n...
Autofocus Attribute in Html
Autofocus Attribute:
It is a boolean attribute used with input fields, button that set focus on that element on which autofocus attribute has been used when a page is loaded. But we can focus only one element at a time using this attribute.
...
contenteditable Attribute in Html5
contenteditable Attribute:
ContentEditable attribute provides the user to edit the content of html element. If the attribute is present and its value is true user can easily edit content of an html element and if value is false user cannot edi...
spellcheck Attribute in Html
spellcheck Attribute:
It is used to specify whether to check the spelling and grammar of the text in an editable html element. This attribute can be used with input elements, textarea and other editable html elements.
Syntax:
<ele...
Custom Tooltip using Html and CSS
Tooltip:
A tooltip is generally used to indicate hints (extra information) about something when the user moves the mouse pointer over an element.
We can use either bootstrap tooltip plugin or we can create our own tooltip using html a...
Tabindex attribute in Html
Tabindex attribute:
User uses tab key in a webpage to navigate through interactive elements(links,input fields etc) and navigation depends upon the elements order in Html code. But with the help of tabindex attribute we can change ...
Use of accesskey Attribute in Html
accesskey Attribute:
Accesskey attribute is used in html forms and links. It provides the user to use keyboard keys for functions which are usually done by a mouse. Example: Like user clicks on links in a webpage using mouse , so with th...
Pure CSS3 mobile menu
Hello reader's, in this blog we are going to create a navigation menu for mobile with CSS3 and HTML. I am using the Javascript for the clicking function. Here i used "+" Adjacent sibling combinator selector to make click function fo...
Control Attributes in HTML5
There are certain attributes that add up in HTML5 which makes the form attributes much more interactive and validation free.
There are certain example for control attribute:
1. Read only - This will make the input type in read only mode.
E...
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...
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...
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...
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 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...
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....
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 ...
