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
HTML oninput event
This event will be fired when user enter an input. This event is mostly used with the input and textareat elements. This event is similar to onchange event. But there is a bit difference between them, oninput event will fired after the value of a...
HTML LAYOUTS
A layout of a webpage plays an important role in providing a good look to our webpage. A good,attractive and beautiful design can be provided only by a person having good creativity skills that's why designing part of a website is not a easy task...
HTML BACKGROUNDS
Usually any webpage that has been created is with a white background by default unless until we provide some styling to it.like background color,background image,border-,any pattern or transparent backgrounds etc.
HTML background styling ca...
HTML onblur event
This event will be fired when the element loses focus. Mostly it is used with the form validation code(e.g. with the input field in a form). onfocus event is the opposite to the onblur attribute.
Syntax :
<element onload="script">
...
HTML onload event
This event is fired when an object has been loaded. This event is used mostly with the body element to execute a script, after the page loaded all content (including images, script files, CSS files, etc.), this event will be fired. It also help u...
Difference between Frame and IFrame
Frame
Frames are HTML tag which divides the browser's window into multiple parts where each part can load a separate HTML document.
<frame> tag specifies each frame within a frameset tag.
A collection of frames in the browser window...
Comparision between Bootstrap and Foundation Framework
Cheat-Sheet for Comparison between Bootstrap and Foundation Classes and Elements
Introduction of Bootstrap and Foundation
Bootstrap and foundation frameworks are very well known font-end framework for Respons...
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 use image in background with color ?
Hi Guys,
Here i am posting that how you can use image with color in background.
<div>
block {
background: #1e7f00 url("http://api.ning.com/files/rBZCY6X2uOlTJ8P9qLiTaHrX71x-bhRd9qAkTQBwNkSJPHtbC0Md09jy7l2JFbAGIWeexn8YrPUqqxKklZ5...
How to disappear a div with explode effect using Jquery
Hello Reader if you want to hide or disappear a div then you can do it by exlpode effect. This will driven by Jquery.
First create a blank html file name is exlodeeffect.html and its code will go like this:-
<html lang="en">
&...
How to make Login and Signup in a single template
Hello Reader's if you are making the resposive website then you can make login and signup in same desing template.
Then you just have to create a front page in html and use the following code:-
<link href="//maxcdn.bootstrapcdn.com/font-...
How to use image in background with color ?
Hi Guys,
Here i am posting that how you can use image with color in background.
<div>
block {
background: #1e7f00 url("http://api.ning.com/files/rBZCY6X2uOlTJ8P9qLiTaHrX71x-bhRd9qAkTQBwNkSJPHtbC0Md09jy7l2JFbAGIWeexn8YrPUqqxKklZ5...
How to show pdf file in html page
Hello all,
While playing with of code, we came across a situation where had to show a pdf file in our html page and to do that, I found a very simple solution where showed the file by passing the file path to the src attribute of the iframe.
...
How to change the color of placeholder ?
Here I am posting that how to change the color of placeholder.
you can use the code below.
::-webkit-input-placeholder { color: red; }
:-moz-placeholder { /* Firefox 18- */ color: red; }
::-moz-placeholder { /* Firefox 19+
*/ ...
How to show user's Lat and Long using google script
Hello User if want to show user's lat and long to screen then you can use the code as below:-
First you have to create a html page and named it file.html and paste the following code in it.
<!DOCTYPE html>
<html>
<body>
...
How to make drag an drop in website
Hello Reader's if you want to use drag and drop feature in website then you can use the code as below:-
First create file drag.html and paste the following code in it.
<img id="source" src="../files/images/yourimage.jpg...
How to integrate music player in your webpage
Hello Reader's if you want to integrate the audio player which play mp3 music from your server, Then this blog is helpful to you.
Now html5 offers you very convenient way to use multimedia in web page. You just have to use the <audio co...
How to draw shapes using HTML5 tag
Hello Reader's! in this blog you will learn how to draw the shapes and figure using just html5 tags.
In html 5 you can draw some basic shape like square and rectangle and circles. Let's see some of them no
<svg width="300" height="100">...
How to write using custom font in HTML
Hello Reader's if you want to write special heading in the custom way in web page then you can use the custom html function as below:-
This function will take the font face and size from user and generate the given text into a picture.
&l...
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 insert special symbols in HTML
Hello Reader! If you are new to web desingning and you need to insert some special symbols in your web page then this blog is very helpful for you.
You might have seen copyright symbol , This type of symbol will only generate if you insert their...
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....
Bootstrap Sticky Footer
Many times the webpage footer comes up due to no or less content on the webpage. We can resolve that with the help of Bootstrap CSS this is also known as Sticky Footer. This CSS will make sure that the footer will remain at the bottom of the scre...
Bootstrap Popover with Laravel 5.0 Both with and without Ajax
Sometimes we need to provide the link of the webpage specially if the content is coming from Ajax or we have multiple contents everyone opening on different webpage in a popover. At that time we can use this functionality of Bootstrap to get the ...
JQuery - eq( index ) Method
JQuery have DOM filter methods which we can use to filter out elements from a list of DOM elements.
It provides DOM traversal methods to help us select elements in a document randomly as well as in sequential method.
DOM Traversal Methods...
How to show custom lines on Google Map
Hello Reader's if you are integrating the Google Map in the website and you also want to show custom line on the map, Then this blog is very helpful you.
Lets see the working of this custom map.
<!DOCTYPE html>
<html>
<head&g...
How to show bounce effect on google map marker
Hello Reader's if you are integrating the google map with marker showing your address, Then you can also make the marker with bounce effect.
Lets see my code as below:-
<!DOCTYPE html>
<html>
<head>
<script
src="http:...
How to put all the links target to sections of home
Hello readers if you want a single page website in which all the pages and links will be the sections of Home page. By using the bootstrap you can make it. Here you can see my code working as single page website.:-
<!DOCTYPE html>
...
The best Carousel slider for website
Hello Reader's if you are looking for the simple and light Slider to integrate into your website then Carousel slider is the best. You can take my code as below:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta ch...
How to expand the div with a click using Bootstrap
Hello Reader's if you are new to Bootstrap, And you want to expand the div with a single click.
Lets see the example below:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-sc...
How to show animated image upload status bar
Hello Reader's if you are making the file upload in html form, Then you can also show the status of the file to upload.
Lets see the example code as below:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="styles...
How to make a download link ?
Hi Reader's,
Welcome to FindNerd, today we are going to discuss how to make a download link ?
So we will use HTML anchor download attribute for making a download link.Because The download attribute is used to specifies that the target will...
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...
JSON
Javascript Object Notation
JSON is a way to transfer data or information from one page to another page.
JSON stands for JavaScript Object Notation
JSON is a lightweight data transfer format
JSON is language indepe...
DOM in HTML JQUERY
DOM Document Object Model
DOM is structure that is used to invoke the elements of a page or a script file. It is the hierarchy of structure that
a particular document have where we want to invoke the elements of that particular document.
F...
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...
Bootstrap float
how to float an element to left or right.
Bootstrap provides predefined classes pull-right and pull-left which floats an element to the left or right according to the requirement. For example if you want to float an image to the right and text...
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 css gradients ?
Hello All,
Earlier, we have used image for gradients effect but now we will use gradient using css3 and we will see how to use many colors in gradient and only one color in gradient.
Gradients are declared by background-color but according ...
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...
Table in HTML
With the help of HTML table, we can arrange the data in a proper format. HTML table consist of rows and columns.we use various tags for creating HTML table.
Tags used for creating HTML table:-
Table :- This is the very first tag for creati...
html link
How can you create image as a link in html.
You can make an image as an link as through following coding.This make your link more eye-catchy and you can also make logo as link thus making your page more effective.
<a href="default.asp"&g...
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...
html address
html address.
html5 provides an inbuilt tag <address>.Through this tag you can define contact information of a document or article.The element between the address is displayed in italic and also most browsers will also add line break bef...
Column offseting.
How can we increase the left margin of a column in bootstrap.
In bootstrap we can increase the left margin of a column by adding class offset. for example by adding
.col-md-offset-4 moves .col-md-4 by four places.
<div class="row">
...
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...
