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
How to reload the webpage if user make no activity
Hello Reader's! If you are looking for functionality for reloading a web page only when user makes no activity for a while, Then you can use the ajax technology for making the html tag refresh.
Lets see the example below:-
<html>
...
HTML List attributes and types
HTML Lists
i)Unordered HTML Lists
An unordered list starts with the ul tag. Each list item starts with the li tag.
Unordered HTML Lists - The Style Attribute
1)Disc: All the list items will be marked with bullets.
eg:
<ul st...
html5 new input attribute- Part 2
Hello
This blog is in continuation with my previous blog about the html5 input attributes.
Here is the link:
html5 new input attribute
1)FORMMETHOD
This attribute is used for submiting data to the given action url overriding the metho...
Non-Semantic Elements and Semantic Elements in HTML5
Non Semantic Elements:- Traditionally, developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content. It tells nothing about its content. The element has no special meaning at ...
Html5 new input attributes
1)AUTOCOMPLETE:- AUTOCOMPLETE attributes is having two features either on or off. If autocomplete is on then the browser automatically complete the values based on values that the user has entered before. This attribute works with form and the fo...
Working with MathML in HTML5
MathMl is a easy way to insert math symbols, expressions and formulas into your web page. The supported browser can convert them to numeric values and symbols. To start writing the math code you have to use <math></math> tag for creat...
How to get size of a file using HTML 5
Hello Reader's! If you are looking for an HTML 5 validation which tell user the size of an file the code will help you:-
In HTML fileL
<input type="file" id="file" />
In the JS file
//binds to onchange event of your input fiel...
How to use iframe to open a website in it
You can use a perticlualr custom window on your website to open another website, Iframe gives you this feature to do. You can see the example below :-
<iframe id="if1" width="100%" height="254" style="visibility:visible" src="http://www.fin...
Diffrence between ' and "
Both the ' and " are same and does same function but it's just the coding standard followed by coders
Using double quotes for HTML
i.e.
<div class="colorFont"></div>
Using single quotes for JavaScript
i.e.
$('#cont...
How to make image download with a link
Hello Reader! if you want to link up your images to make it download with just a click then you can use the code below
<a href="/local/project/image.jpg" download="myimage.jpg"><img src="/ocal/project/image.jpg" /></a>
T...
Correct way to write disabled textbox
Hello Reader!
If you got confuse to write the correct syntax of writing the disabled text box then you can use these types of code as below:-
<input type="text" disabled />
<input type="text" disabled="" />
<input type="text"...
how to print the HTML code in PHP
If you want to print the html tags and code inside the PHP code you can do it by putting all the html code inside the echo syntax:-
Consider the following two cases:-
1. In between PHP tags
<?php if(condition){ ?> //In this case th...
What is meant by Doctype
The DOCTYPE specify the user's web browser and the search engines that what type of document is written.
One final thought is that the new HTML5 standard proposes using a very simple DOCTYPE:
<!DOCTYPE html>
Always add the &l...
How to make multiple submit button in a form
Hello Reader if you need two or more submit button in a single html form then you learn from the code below:-
For the form the html will go like this:-
<input type="submit" name="submit_button" value="Submit" />
<input type="subm...
How to scale and strech the image in a fix size?
If you have a fixed div and you want the image to be put over it by stretch and scaling then you can use the following code for html and css:-
In the html page add class 'background' and 'stretch'
<div id="background">
<img sr...
Important HTML meta tags for SEO
Hi Guys,
In todays blog post , we are discussing the HTML meta tags as SEO propective.
What is this meta Tags ?
Meta tags are a great way for webmasters to provide search engines with information about their sites. (They) can be used to...
How to show alternate or default image in web page
Here, We are working on web application then facing issue in image loading and error, so we need to set alternate or default image in the web application.
Many ways to set default image in the web page :
Set default image using CSS
img
...
HTML onload Event Attribute
when an object is loaded The onload attribute fires.
whenever a page is loaded, it executes a javascript.
The onload attribute can also be used with cookies
Example
<!DOCTYPE html>
<html>
<head>
<script>
functi...
marquee tag in HTML
The HTML marquee tag is used to scroll the portion of text written either horizontally or vertically in your web site page. You can also scroll image in similar manner.
By default, the direction is left. So, if you will not mention the directi...
Some Important HTML Codes for Blogging
Either you are a Professional Blogger or doing Guest posting just for Knowledge sharing you must face HTML code problems. I know HTML is a web designing/ programming language but I think every Blogger must know some Basic HT...
How to install wordpress using Softaculous
Hello reader!
Installing WordPress is a bit of lengthy task for a beginner but in this blog you can learn installing the WordPress using a application from you cpanel. There is a application names 'Softaculous automatic app installer' and using...
Introduction of HTML5 LocalStorage
HTML5 Local Storage Introduction:
HTML5 Local Storage is a web and mobile based standard technology which allow a user to store and retrieve data in a person's local device.
By using local storage, web based appl...
How to Redirect a Website using HTML Code
Hi Friends,
After my previous blog post on How to Optimize Image for Website, today we will discuss about some best programming ways to Redirect a website. I am covering this topic as point of SEO Expert. Some points of this topic I have alr...
HTML5 Geolocation API
HTML5 Geolocation API
The Geolocation API specifies a general putting into effect for the objects, properties,
and methods to unite with the Geolocation interface. One object holds the whole
implementation of the W3C Geolocation APIthe Geolo...
Animating Placeholder
Making Animated Placeholder
To make a Placeholder animation we need to make custom placeholder, for this I have used span tag.
HTML -
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">...
Set color in ul or ol list
change the color of a bullets in a list
Hello friends,
Some times we need to provide color in <ul> or <ol> List for that you can simply use the below code.
<ul>
<li style="color: red;"><span style="color: gr...
CSS document for printing
Hello everyone,
Lots of web pages have a print-friendly version and many of them don't. I realize that there's no need because you can set up a second CSS document to be called up when a user prints the page.
So, basically we need two css i...
How to set space in table row ?
HI all,
We can't add the margin between row in table but we can add space using an alternative method.
for this you have to add some property in your style.
table {
border-spacing: 0 5px ;
border-collapse: separate...
Draw Circle in HTML Canvas
Draw circle in HTML: In this article I will show you how we can draw circle in HTML canvas. To draw circle in web page we will use Canvas API, we will draw the circle on canvas using the arc() method. Following is the simple example to draw circl...
How To Create a Modal in Bootstrap
With the help of Bootstrap we can create a Modal plugin. In the example given below , I am using attributes data-toggle=model ( which is used to open the model window ) and data- target=#Model (which points to the id of the target model ). ...
How To Create a Scrollspy in Bootstrap
With the help of Bootstrap we can create a Scrollspy function.The Scrollspy plugin is used to automatically update links in a navigation list based on scroll position. According to the below example, i am using data-spy=scroll it is used to scol...
HTML5 Datalist Element
Hi all,
Datalist is a new element in HTML5 and very useful. Basically it works with input box and when we write text in it, it will show a related item in list like option box.
Example :-
<label>Select your preferred code editor:&...
What is CSS attribute selectors ?
HI all,
CSS attribute selectors is a great way to manipulate your style may be you have used this before but it really awesome and I am sure using it you can make more easy your style.
Lets understand this with below example -
I have a s...
Progress bar
A Progress bar indicates the current percentage for completeness of an operation or process.
jQueryUI provides an easy-to-use progress bar widget that we can use to let users know the percent of completeness of an operation. jQueryUI provides...
How to make custom attribute in Html5 ?
Hi all,
You can make your own custom attribute using data-. It allows possessive exchanged information between HTML and its DOM representation. It can work with javascript also, every browser will let you fetch and modify data- attributes usin...
HTML Interview Questions and Answers
HTML Interview Questions and Answers for Beginners
Hello
This tutorial, will provide you HTML questions and answers. The content here will help people to get through with their interviews for software industry. If you want to get to get int...
What are the latest html elements added in html5
Here are various html elements which has been added to html5, some of the important elements are listed bellow:
. <header>
This html element is used for define the header section of the html page.
<header>
<p>this...
How to Avoid HTML Mistakes
Hello Reader's
Here is the article which will help you to know, How to Avoid HTML Mistakes
In this article I will guide you how to avoid minor mistakes when create an HTML Page.
1) Don't use block elements within Inline elements.
**Wrong ...
How to Create Custom Jquery Tabs
Hello Reader's
In this article I will guide you how to create custom responsive tabs without use of any Jquery plugin.
This will surely make your web page faster because its not an plugin. Its an simple custom Jquery HTML & css.
Copy and p...
HTML Canvas Linear Gradient
Draw Rectangle with Linear Gradient : In this article I will show you how to use Linear Gradient to draw the graphics. To draw graphics with Linear Gradient in web page we will use Canvas API, we will draw the createLinearGradient() method. Follo...
Explain Manifest file?
Manifest file : - " Manifest is a simple text file that tells browser what to cache" and what not.
The browser only cache the Manifest file content and does not cache the rest.
Manifest file contains three sections :-
(1) CACHE...
How to centralize div horizontally and vertically ?
Hi all,
Here are two method to center align a position of div.
div{
height: 200px;
width: 200px;
background: #ccc;
top:0;
bottom: 0;
left:0;
right: 0;
margin: auto;
position: absolute;
}
In...
Horizontal slide toggle
Hi all,
If you would like to have the horizontal toggle options, according to example when you click on the button to slide, it will play the animation reversed and hide the element. See the below example to toggle slide a div.
Script:-
...
How to use DIV tags as TABLE layout ?
Hi Folks,
This article is about, how to use DIV tags as table layout using CSS. Sometime we all face some problem with table layout in creating responsive design. Here I am using the class name same as table layout and I hope it will be more c...
Approximative sibling
pre{border-radius:0;padding:5px;line-height:25px;}
Hi all,
The approximative sibling or adjacent sibling combines two selectors. + works as combinator.
For example:
p {color : green;}
p + p { color:red;}
HTML:-
<div&g...
Screen sliding using css
Hi all,
Below is an example of slide screen using css.
HTML:-
<input type="checkbox" id="opci" />
<div class="baseM">
<label for="opci" class="nombre"></label>
<div class="nextSlide "></div&g...
Draw Stroke Text on HTML Canvas
Draw Stroke Text in HTML : In this article i will show you how we can draw Stroke Text in HTML canvas. To draw Stroke Text in web page we will use Canvas API, we will draw the Stroke Text on canvas using the strokeText() method. Following is the...
Draw Text on HTML Canvas
Draw Text in HTML : In this article i will show you how we can draw Text in HTML canvas. To draw Text in web page we will use Canvas API, we will draw the Text on canvas using the fillText() method. Following is the simple example to draw Text on...
Draw Line in HTML
Draw line in HTML Canvas : In this article i will show you how we can draw line in HTML canvas. To draw line in HTML we will use Canvas API, we will draw the line on canvas using the lineTo() method. Following is the simple example to draw line ...
Draw Rectangle in HTML Canvas
Draw Rectangle in web page: We can now draw the graphics in web pages. Html provides the Canvas API for drawing graphics. Html5 has the <canvas> tag to draw the graphics using JavaScript. Using <canvas> element we can draw rectangle, ...
