Basic HTML Elements In Brief

html project arrangment










A simplest html project will be arranged as above image and a simplest webpage may contain following items:

Starting (Header)
Html 5
<!DOCTYPE html>
Html 4 strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Html 4 transaction
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Html 4 frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Opening
<html lang="en">
Character encoding
<meta charset="UTF-8">
Title
<title></title>
Keyword
<meta name="Keywords" content="">
Description
<meta name="Description" content="">
Icon
<link rel="icon" href="" type="image/x-icon">
Css
<style></style>
<link rel="stylesheet" type="text/css" href="">
Javascript
<script></script>
<script src=""></script>
Authour
<meta name="author" content="nikhil">
Redirection
<meta http-equiv="refresh" content="30">

Commenting

HTML
<!-- -->
Css
/* */, //
Javascript
/* */, //

Pixel to em

1 em= 16px

Css properties for div

Property
Usage
Example (if necessary)
Width
width:;

max/min-width:;

Height
height:;

max/min-height:;

Border/outline
Outline/border-style:dotted/dashed/solid/double/groove/ridge/inset/outset/hidden;
short hand example – outline/border-color: top right bottom left;
Outline/border-left/right/top/bottom-style:;
Outline/border-color:;
Outline/border-left/right/top/bottom-color:;
short hand example – outline/border-width: top right bottom left;
Outline/border-width:;
Outline/border-left/right/top/bottom-width:;
Outline/border: 1px solid black;
Margin/Padding
Padding/margin:;
short hand example – padding/margin: top right bottom left;
Padding/margin-top/bottom/left/right:;
Position
position:static/relative/fixed/absolute;
relative- is positioned relative to its normal position.

absolute- is positioned relative to the nearest positioned ancestor
Left/top/bottom/right:;
z-index:;
float:left/right;
clear property specifies on which sides of an element floating elements are not allowed to float
clear:left/right;
display: inline/block/none;
visibility: hidden;
Overflow
overflow: visible|hidden|scroll|auto|initial|inherit;
overflow-x/y:;
Opacity
filter: alpha(opacity=40); /* Opacity for IE8 and earlier */
opacity: 0.4;
Shaddow
box-shadow: h-shadow v-shadow blur color;
box-shadow: 10px 10px 5px #888888;
Important
Tag important force particular css property
<div style=" width:250px !important; width:500px;"></div>

here effective with is 250

Some Other useful css properties

Property
Usage
Example
Background
background-color:;
background: #ffffff url("img_tree.png") no-repeat right top;
background-image:ulr("");
background-position:;
background-repeat:;
background-repeat: repeat-x/no-repeat/repeat-y;
background-attachment:;
background-attachment: fixed;
Font
font-family:;

font-style:normal/italic/oblique;

font-size:;

font-weight:normal/bold;

font-variant:normal/small-caps;

Link
a:link - a normal, unvisited link
a:active - the moment it is clicks
a:visited - a link the user has visited
a:hover - when the user mouses over it
Ordered/Unordered List
list-style-image: url('sqpurple.gif');
baseline - Align element with the baseline of the parent (default)
length - Raises or lower an element by the specified length.
% - Raises or lower an element in a percent
super - Aligns the element as if it was superscript
top - The top of the element is aligned with the top of the tallest element
middle - The element is placed in the middle of the parent element
bottom - The bottom of the element is aligned with the lowest element
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.
list-style-type:none/circle/square/upper-roman/lower-alpha;
Text
color:;
text-align:center/left/right/justify;
text-decoration:none/overline/line-through/underline;
line-height:;
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;


Css tips and tricks

Property
Usage
Example
::selection
apply effect on selection
p::selection { color: red; background: yellow;}
::before/::after
put some object befoer or after perticular object
example h1::after/before {content: url(smiley.gif);}
::hover
put effect on mouse hover.
a:hover { background-color: yellow;}
:focus
put effecut on foucs some object
input:focus { background-color: yellow; }
:checked
put effect to radio/check box on selection
input:checked { height: 50px; width: 50px;}
CSS [attribute]
is used to select elements with a specified attribute
input[type="text"]{color:red}
descendant selector (space)
descendant selector matches all elements that are descendants of a specified element
div p {}
child selector (>)
child selector selects all elements that are the immediate children of a specified element
div > p {}
adjacent sibling selector (+)
adjacent sibling selector selects all elements that are the adjacent siblings of a specified element
div + p {}
general sibling selector (~)
general sibling selector selects all elements that are siblings of a specified element
div ~ p {}

Css transaction

Property
Usage
Example
transition-timing-function
transition-timing-function:linear/ease/ease-in/ease-out/ease-in-out;
specifies a transition speed

transition-property: width;
-webkit-transition-delay: 1s;

-webkit- for chrome and safari, -moz- for mozilla,
 -o- for opera

transition-duration: 2s;

transition-timing-function: linear;
example for shorthand
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;

Animation Using Css

<style>
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate;
}

/*you can define div as below also
div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}*/

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
</style>
<div></div>



Xml Sitemap

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
    <url>
             <loc>http://example.com</loc>
             <lastmod>2014-12-26</lastmod>
             <changefreq>daily</changefreq>
             <priority>1</priority>
    </url>
</urlset>