Check Effects using Glyphicon & Font Awesome

 

 View  View

 

Codepen Live View

jsFiddle Live View

KASLAB Login Panel

 

 View  View  View

 

Codepen Live View

jsFiddle Live View

HTML 5 and CSS3 Stylish Login Panel

 

 View  View

 

Set UI List using HTML, CSS & Icon

 

 View  View

 

Awesome responsive navigation menu bar using bootstrap html css jquery

 

 View  View

 

Login Session Manager

 

 View  View

 

Stylish Tasking listing and Managing Panel Using HTML, CSS

 

 View  View

 

CSS3 rolled corners and shadow effect

 

 View  View

 

Dynamic HTML control add and remove on just click

 

 View  View

 

Codepen Live View

jsFiddle Live View

Checks Effect

• Example View
• HTML
• CSS
• Script
• Plugins
• Downloads

	<div class="kas-checks-slideOne"> <input type="checkbox" name="Status1" class="" id="slide1" checked="checked"> <label for="slide1"></label> </div>
	<div class="kas-checks-slideTwo bg"> <input type="checkbox" name="Status2" class="" id="slide2" checked="checked"> <label for="slide2"></label> </div>
	<div class="kas-checks-slideThree bg"> <input type="checkbox" name="Status3" class="" id="slide3"> <label for="slide3"></label> </div>
	<div class="kas-checks-slideFour bg-dr-gray"> <input type="checkbox" name="Status9" class="" id="slide9"> <label for="slide9"></label> </div>
	<div class="kas-checks-slideFive bg-dr-gray"> <input type="checkbox" name="Status10" class="" id="slide10" checked="checked"> <label for="slide10"></label> </div>
	<div class="kas-checks-slideSix bg-lg-gray"> <input type="checkbox" name="Status11" class="" id="slide11" checked="checked"> <label for="slide11"></label> </div>
	<div class="kas-checks-roundedOne"> <input type="checkbox" name="Status4" class="" id="slide4" checked="checked"> <label for="slide4"></label> </div>
	<div class="kas-checks-roundedTwo"> <input type="checkbox" name="Status5" class="" id="slide5" checked="checked"> <label for="slide5"></label> </div>
	<div class="kas-checks-roundedThree"> <input type="checkbox" name="Status12" class="" id="slide12" checked="checked"> <label for="slide12"></label> </div>
	<div class="kas-checks-squaredOne"> <input type="checkbox" name="Status6" class="" id="slide6" checked="checked"> <label for="slide6"></label> </div>
	<div class="kas-checks-squaredTwo"> <input type="checkbox" name="Status7" class="" id="slide7" checked="checked"> <label for="slide7"></label> </div>
	<div class="kas-checks-squaredThree"> <input type="checkbox" name="Status8" class="" id="slide8" checked="checked"> <label for="slide8"></label> </div>
	<div class="kas-checks-squaredFour"> <input type="checkbox" name="Status13" class="" id="slide13" checked="checked"> <label for="slide13"></label> </div>
	<div class="kas-checks-squaredFive"> <input type="checkbox" name="Status14" class="" id="slide14" checked="checked"> <label for="slide14"></label> </div>

...

<script type="text/javascript" src="https://cdn.datatables.net/r/dt/dt-1.10.9/datatables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>

https://www.dropbox.com/s/muhew123ti5m2eb/kaslab-design.css?dl=0
https://www.dropbox.com/s/ytmxir23hkueznl/kaslab-checks-effect.css?dl=0

 

 View  View

 

Step by Step for HTML Beginner

Write HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Editor	Description	Downlaod
Adobe Dreamweaver		Download
Microsoft Expression Web		Download
CoffeeCup HTML Editor		Download
Netbeans		Download
Eclipse		Download
Notepad ++		Download
Sublime		Download

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the 4 steps below to create your first web page with Notepad.

---

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:

Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.

To open Notepad in Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

---

Step 2: Write Some HTML

Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<head>
  <title> My First web page </title>
</head>
<body>
  <h1>My First Heading</h1>
  <p>My first paragraph.</p>
</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer.

Select File > Save as in the Notepad menu.
Name the file "index.html" or "index.htm" or any name ending with ".html".
UTF-8 is the preferred encoding for HTML files. ANSI encoding covers US and Western European characters only.

You can use either .htm or .html as file extension. There is no difference, it is up to you.

---

Step 4: View HTML Page in Your Browser

Open the saved HTML file in your favorite browser. The result will look much like this:

To open a file in a browser, double click on the file, or right-click, and choose open with.

<a> Anchor Tag

The <a> tag defines a hyperlink, which is used to link from one page to another.

A link(hyperlink link) with Text

<a href="http://www.kaslab.in" target="new">Visit learn2new.in !</a> 

hyperlink link with Image

<a href="http://www.kaslab.in" target="new"><img src="images/1.jpg" /></a> 

Attributes

• href can be used to specify the target of a link.
• charset can be used to specify the character set of the target of a link.
• type can be used to specify the MIME type of the target of a link.
• hreflang can be used to specify the language (in the form of a language code) of the target of a link. It should only be used when href is also used.
• rel can be used to specify the relationship of the target of the link to the current page.
• rev can be used to specify the relationship of the current page to the target of the link.
• accesskey can be used to associate a keyboard shortcut to the element.
• tabindex can be used to specify where the element appears in the tab order of the page.

Reference Links

1	http://htmldog.com/reference/htmltags/a/Website
2	http://www.w3schools.com/tags/tag_a.aspWebsite

HTML <!DOCTYPE> Declaration

Having trouble with your Web pages? Can't get them to display correctly in your browser? It might be that your page is a little "quirky."

There are several reasons why Web pages do not display properly, such as omitting a required end tag, improperly formatting a table, JavaScript errors, CSS errors, incorrect server requests, etc. Often, these errors happen because Web developers do not take the time to validate their work. In other cases they are a result of a lack of knowledge regarding the proper formatting and coding of Web pages.
Even if you take care of all these errors, something else may be causing your Web pages to display incorrectly or even not at all: failure to use a <DOCTYPE> statement or, if used, failure to use the right one.

A large number of Web pages don't use the <DOCTYPE> statement (Interestingly, many of them are Web development sites). Does it really make a difference? For the most part, not much. But if you want to make sure your Web site renders correctly in various browsers, then it's best to use it. You'll also need it if you plan on validating your Web pages.

What Is It?

The <DOCTYPE> declaration tells the browser what version of (X)HTML is being used so it will know how to display the page. The declaration may also provide a link to a text file (i.e., the loose DTD) which the browser uses to obtain further information. It's similar to having a tune-up done on your car. In order to perform it correctly, the mechanic must know the make, model, and year of the car. He must also know how many cylinders the engine has and its horsepower. Once he knows this, he can move forward and properly tune the engine.

Usage

The <DOCTYPE> declaration must be the very first thing in your document, before the <html> tag. Then, when the browser begins to load the page, it knows how to treat the code within the page.
There are three different document types for HTML 4.01: Strict, Transitional, and Frameset. The Strict type is used with Cascading Style Sheets and helps to ensure clutter-free coding.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The Transitional type is used when HTML presentational features are included in the document instead of in a style sheet. This is done to accomodate older browsers that don't support CSS.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The Frameset type is used in documents that have frames.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

The same three document types are also used in XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Since the <DOCTYPE> declaration is actually a comment tag, it won't confuse older browsers that don't understand the statement.

Syllabus of HTML

HTML Tutorial

HTML Introduction
HTML Editors
HTML Elements
HTML Attributes
HTML Headings
HTML Paragraphs
HTML Styles
HTML Formatting
HTML Quotations
HTML Computercode
HTML Comments
HTML CSS
HTML Links
HTML Images
HTML Tables
HTML Lists
HTML Blocks
HTML Classes
HTML Layout
HTML Responsive
HTML Iframes
HTML Color Names
HTML Color Values
HTML Color Shades
HTML JavaScript
HTML Head
HTML Entities
HTML Symbols
HTML Charset
HTML URL Encode
HTML XHTML
HTML Forms
HTML Forms
HTML Form Elements
HTML Input Types
HTML Input Attributes

View All[ HTML Post ]

HTML Version and References

Version List and History
xHTML Rule
Difference between HTML, xHTML and dHTML
Character set and Code
Color Code List
HTML Editor
How to Create a First Page

HTML 5

HTML5 Intro
HTML5 Support
HTML5 Elements
HTML5 Semantics
HTML5 Migration
HTML5 Style Guide
HTML Graphics
HTML Canvas
HTML SVG
HTML Media
HTML Media
HTML Video
HTML Audio
HTML Plug-ins
HTML YouTube
HTML APIs
HTML Geolocation
HTML Drag/Drop
HTML Local Storage
HTML App Cache
HTML Web Workers
HTML SSE

HTML Tags

• <!-->
• <!DOCTYPE>
• <a>
• <abbr>
• <address>
• <applet>
• <area>
• <article>
• <aside>
• <audio>
• <b>
• <basefont>
• <bdi>
• <bdo>
• <blockquote>
• <body>
• <br>
• <button>
• <canvas>
• <caption>
• <center>
• <cite>
• <code>
• <col>
• <colgroup>
• <datalist>
• <dd>
• <del>
• <details>
• <dfn>
• <dialog>
• <dir>
• <div>
• <dl>
• <dt>
• <em>
• <embed>
• <figcaption>
• <figure>
• <font>
• <footer>
• <form>
• <frame>
• <head>
• <header>
• <hgroup>
• <h1> - <h6>
• <hr>
• <html>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <keygen>
• <label>
• <legend>
• <li>
• <link>
• <main>
• <map>
• <mark>
• <menu>
• <menuitem>
• <meta>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <optgroup>
• <option>
• <output>
• <p>
• <param>
• <pre>
• <progress>
• <q>
• <rp>
• <rt>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <source>
• <span>
• <strike>
• <strong>
• <style>
• <sub>
• <summary>
• <sup>
• <table>
• <tbody>
• <td>
• <textarea>
• <tfoot>
• <th>
• <thead>
• <time>
• <title>
• <tr>
• <track>
• <tt>
• <u>
• <ul>
• <var>
• <video>
• <wbr>

This post is related to navigation :- Very low wait navigation example, only by HTML and CSS basics

HTML Code

<div class="menu_comp">
<ul>
<li class="selected"><a href="#">About us</a></li>
<li><a href="#">Menu - 1</a>
    <ul>
        <li><a href="#">Menu level 1</a></li>
        <li><a href="#">Menu level 2</a></li>
    </ul>
</li>
<li><a href="#">Menu - 2</a>
    <ul>
        <li><a href="#">Menu level 1</a>
            <ul>
                <li><a href="#">Kanha Sahu</a></li>
                <li><a href="#">9755685222</a></li>
                <li><a href="#">Bangalore</a></li>
            </ul>
        </li>
    </ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>

CSS Code

<style type="text/css">
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
 /* ------------------------------------- */

.menu_comp{margin:3px auto;}
.menu_comp ul{width:auto; height:45px;line-height:45px;display:block; }
.menu_comp ul li{float:left;background:#FAFAFC;} 
.menu_comp ul li a{float:left;padding:0px 8px;margin:0 1px 0 0;color:#666;-moz-box-shadow:0 1px 1px #CCCCCC;-webkit-box-shadow:0 1px 1px #CCCCCC;-o-box-shadow:0 1px 1px #CCCCCC;-ms-box-shadow:0 1px 1px #CCCCCC;box-shadow:0 1px 1px #CCCCCC;}
.menu_comp ul li a:hover{background:#FFFFFF;color:#333;-moz-box-shadow:0 1px 3px #CCCCCC;-webkit-box-shadow:0 1px 3px #CCCCCC;-o-box-shadow:0 1px 3px #CCCCCC;-ms-box-shadow:0 1px 3px #CCCCCC;box-shadow:0 1px 3px #CCCCCC;}
.selected, .selected a{  border-bottom:1px solid #F00;}
.selected a, .menu_comp ul li:hover,
.menu_comp ul li a:hover{background:#FFFFFF;color:#333;}
.menu_comp ul li a img{position:relative;width:auto;height:18px;padding:0 2px;top:4px;}
.menu_comp ul li ul{display:none;}
.menu_comp ul li:hover > ul{clear:both;display:block;position:absolute;width:auto;height:auto;margin-top:45px; -moz-box-shadow:0 2px 3px #666666;-webkit-box-shadow:0 2px 3px #666666;-o-box-shadow:0 2px 3px #666666;-ms-box-shadow:0 2px 3px #666666;box-shadow:0 2px 3px #666666;}
.menu_comp ul li:hover ul li{  float:none;  width:auto;  height:auto;  display:block;  margin:0;  }
.menu_comp ul li:hover ul li:first-child a{  /*border-top:1px solid #CCC;*/  }
.menu_comp ul li:hover ul li:last-child a{  border-bottom:2px solid #CCC;  }
.menu_comp ul li:hover ul li a{  padding:0px 8px;  margin:1px 0 0 0;  color:#666;  background:#FAFAFA;  width:100%;    /*background:#f5f5f5;*/    -moz-box-shadow:0 1px 1px #CCCCCC;  -webkit-box-shadow:0 1px 1px #CCCCCC;  -o-box-shadow:0 1px 1px #CCCCCC;  -ms-box-shadow:0 1px 1px #CCCCCC;  box-shadow:0 1px 1px #CCCCCC;  }
.menu_comp ul li:hover ul li a:hover{  background:#FFFFFF;  color:#333;  }
.menu_comp ul li:hover ul li a ul{  display:none;  }
.menu_comp ul li:hover ul li:hover ul{  display:block;  background:#FFFFFF;  color:#333;  margin-left:100px;  margin-top:-0px;  position:absolute;  }
</style>

How to download

Download

HTML Introduction

Html stands for "Hyper-Text Markup Language. This is the language that Web pages are written in. Also known as hypertext documents, Web pages must conform to the rules of HTML in order to be displayed correctly in a Web browser. The HTML syntax is based on a list of tags that describe the page's format and what is displayed on the Web page.

What is HTML?

HTML is a markup language for describing web documents (web pages).

• HTML stands for Hyper Text Markup Language
• A markup language is a set of markup tags
• HTML documents are described by HTML tags
• Each HTML tag describes different document content

Basic Structure of HTML

<html>
<head>
<title> Html Tutorial </title>
</head>
<body bgcolor="yellow">

  <h1>
My first website. </h1>
<h2>
My first website. </h2>
<p>
My first website. </p>
</body>
</html> 

Why HTML?

HTML is used in the creation of web pages. The HTML language marks up the data returned from the server, is read by the browser, and rendered. HTML isn't a programming language, but it is part of a group of languages called "mark-up languages" that are widely used for a variety of tasks.

Extension

".html"   ".htm"

HTML Comment <!---->

Comment Tags <!--  --> are used to insert comments in HTML.

Struture of Comment

 <!-- Write your comments --> 

Advantage of Comment

• Comments are not displayed by the browser, but most of the Designer and Developer using this Comment Tag <!--  --> for Future Implementation.
• With comments you can place message, code, notifications and reminders in your HTML Document. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Comment Tag with Message

<html>
  <head>
  <title>My First Page</title>
  </head>
  <body>
  <!---------    header part -----------------   -->
  <div id="header"></div>
 
 <div id="container">

  <!---------    sidebar part   ------------------->
  <span id="sidebar"></span>
  <!---------    content part   ------------------->
  <span id="blog"></span>

  </div>
  <!---------    Footer part   ------------------->
  <div id="footer"></div>
  </body>
</html>

Comment Tag with Code

<html>
  <body>
  <!---------     Header part     ----------->
  <div id="header"></div>
  
 <div id="container">
        <!---------      Sidebar part     ----------->
        <span id="sidebar"></span>
        <!---------      Content part     ----------->
        <span id="blog"></span>
  </div>
  
  
 <!--------- 
    Footer part
  <div id="footer"></div>
    -->
  </body>
</html>

In this example, footer is not require currently, so we can comment it, can be use in Future