Wednesday, August 3, 2011

Best Web Templates

Preview

Download

Download

CSS Tutorial pdfs

Click on below links to download free css tutorial pdfs

CSS Pdf download

CSS Tutorial pdf book

HTML Tutorials pdfs

Click on below links to download html tutorial pdfs

Download HTML Tutorial

Download XHTML Tutorial

Another HTML Tutorial Pdf

CSS3 allows for multiple column without explicitly having to code for it.Just by using the tags directly the multiple column division could be formed easily.

CSS3 provides 3 attributes for multiple column property as
column-count,column-gap and column-rule.

column-count
Specifies the number of columns an element should be divided into

column-fill
Specifies how to fill columns

column-gap
Specifies the gap between the columns

column-rule
A shorthand property for setting all the column-rule-* properties

column-rule-color
Specifies the color of the rule between columns

column-rule-style
Specifies the style of the rule between columns

column-rule-width
Specifies the width of the rule between columns

column-span
Specifies how many columns an element should span across

column-width
Specifies the width of the columns

columns
A shorthand property for setting column-width and column-count

Example

<div style="-moz-column-count:3;-webkit-column-count:3; column-count:3;<br />-moz-column-gap:60px; -webkit-column-gap:60px; column-gap:60px;-moz-column-rule:4px outset yellow;-webkit-column-rule:4px outset yellow;column-rule:4px outset yellow;"><br /><br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.<br /></div>

Which will result as follows

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.

CSS3 Transitions

CSS3 Transition is a fantastic feature of CSS3 which allows a animated effect to a division.This is achieved using the transition tag.

Copy and paste the below piece of code to know the effect

<head>
<br /><style type="text/css"> div{width:100px;
<br />height:100px;
<br />background:yellow;
<br />transition:width 2s, height 2s;
<br />-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
<br />-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
<br />-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
<br />}
<br />div:hover
<br />{
<br />width:200px;
<br />height:200px;
<br />transform:rotate(180deg);
<br />-moz-transform:rotate(180deg); /* Firefox 4 */
<br />-webkit-transform:rotate(180deg); /* Safari and Chrome */
<br />-o-transform:rotate(180deg); /* Opera */
<br />}</style></head><p><b>Note:</b> This example does not work in Internet Explorer.</p>
<br />
<br /><div>Hover over this to see the transition effect</div>

transition-property
Specifies the name of the CSS property to which the transition is applied

transition-duration
Defines the length of time that a transition takes. Default 0

transition-timing-function
Describes how the speed during a transition will be calculated. Default "ease"

transition-delay
Defines when the transition will start. Default 0

CSS3 2D/3D Transforms

CSS3 allows for 2d/3d Transforms which helps in giving the best look to any document.
This is performed using the transform tag.

CSS3 Transform Rotate
Example

<div style="background:yellow;height:100px;width:100px;-moz-transform:rotate(45deg);color:red;">hello from rotated div</div>

hello from rotated div

CSS3 Transform Translate

<div style="background:yellow;height:100px;width:100px;-moz-transform:translate(20px,70px);color:red;">hello from rotated div</div>

Which results as follows

hello from rotated div

CSS3 Transform Scale

<div style="background:yellow;height:100px;width:100px;-moz-transform:scale(1,1);color:red;">hello from scaled div</div>

hello from scaled div

CSS3 Transform Skew

<div style="background:yellow;height:100px;width:100px;-moz-transform:skew(30deg,20deg);color:red;">hello from skewed div</div>

Which results as follows

hello from skewed div

CSS3 Shadow Effects

CSS3 allows for shadow effect on text as well as on division.
Text effect is formed by using text-shadow.Word-wrap is used to fit the content in defined division.

Example

<div style="text-shadow:5px 5px 5px yellow;">CSS3 Text Shadow Effects</div>

which results as folows,

CSS3 Text Shadow Effects

CSS3 Border Shadow
Border Shadow can be implemented to any border using -moz-box-shadow

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;-moz-box-shadow:10px 15px 20px #ccc;">hello from shadow division</div>

Which results as follows

hello from shadow division

CSS3

CSS3 the new standard cascading style sheet.
CSS3 has the best features in it as multiple column concept and 2D/3D Transformations.
The CSS3 also has all the features which are existing in older version of CSS.

Most of all the browsers supports CSS3 features.

CSS3 Borders

CSS3 Borders helps in rounded corner border of division or any section this is achieved using -moz-border-radius as follows

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;">hello from rounded corner division</div>

Which results as follows

hello from rounded corner division

CSS3 Border Shadow
Border Shadow can be implemented to any border using -moz-box-shadow

<div style="border:5px solid blue;-moz-border-radius:5px;height:100px;width:200px;background:yellow;color:red;-moz-box-shadow:10px 15px 20px #ccc;">hello from shadow division</div>

Which results as follows

hello from shadowdivision

HTML5 Tags

Following is the list of HTML5 Tags

< abbr >  Specifies an abbreviation   <br />< address >  Specifies an address element   <br />< area >  Specifies an area inside an image map   <br />< article >  Specifies an article  <br />< aside >  Specifies content aside from the page content  <br />< audio >  Specifies sound content  <br />< b >  Specifies bold text   <br />< base >  Specifies a base URL for all the links in a page   <br />< bdo >  Specifies the direction of text display   <br />< blockquote >  Specifies a long quotation    <br />< button >  Specifies a push button   <br />< canvas >  Define graphics  <br />< caption >  Specifies a table caption   <br />< cite >  Specifies a citation   <br />< code >  Specifies computer code text   <br />< col >  Specifies attributes for table columns    <br />< colgroup >  Specifies groups of table columns   <br />< command >  Specifies a command  <br />< datalist >  Specifies an "autocomplete" dropdown list  <br />< dd >  Specifies a definition description   <br />< del >  Specifies deleted text   <br />< details >  Specifies details of an element  <br />< dfn >  Defines a definition term   <br />< div >  Specifies a section in a document   <br />< em >  Specifies emphasized text    <br />< embed >  Specifies external application or interactive content  <br />< eventsource >  Specifies a target for events sent by a server  <br />< fieldset >  Specifies a fieldset   <br />< figcaption >  Specifies caption for the figure element.  <br />< figure >  Specifies a group of media content, and their caption  <br />< footer >  Specifies a footer for a section or page  <br />< header >  Specifies a group of introductory or navigational aids, including hgroup elements  NEW<br />< hgroup >  Specifies a header for a section or page  <br />< iframe >  Specifies an inline sub window (frame)   <br />< ins >  Specifies inserted text   <br />< kbd >  Specifies keyboard text   <br />< keygen >  Generates a key pair  <br />< legend >  Specifies a title in a fieldset   <br />< mark >  Specifies marked text  <br />< map >  Specifies an image map    <br />< menu >  Specifies a menu list   <br />< meter >  Specifies measurement within a predefined range  <br />< nav >  Specifies navigation links  <br />< noscript >  Specifies a noscript section   <br />< object >  Specifies an embedded object   <br />< optgrou p>  Specifies an option group   <br />< output >  Specifies some types of output  <br />< progress >  Specifies progress of a task of any kind  <br />< q >  Specifies a short quotation   <br />< ruby >  Specifies a ruby annotation (used in East Asian typography)  <br />< rp >  Used for the benefit of browsers that don't support ruby annotations  <br />< rt >  Specifies the ruby text component of a ruby annotation.  <br />< samp >  Specifies sample computer code   <br />< section >  Specifies a section  <br />< small >  Specifies small text   <br />< source >  Specifies media resources  <br />< sub >  Specifies subscripted text   <br />< summary >  Specifies a summary/caption for the <details> element  <br />< sup >  Specifies superscripted text   <br />< tfoot >  Specifies a table footer    <br />< var >  Specifies a variable   <br />< video >  Specifies a video  <br />< wbr >  Specifies a line break opportunity for very long words and strings of text with no spaces.

Following is the example.

< abbr > Specifies an abbreviation
< address > Specifies an address element
< area > Specifies an area inside an image map
< article > Specifies an article
< aside > Specifies content aside from the page content
< audio > Specifies sound content
< b > Specifies bold text
< base > Specifies a base URL for all the links in a page
< bdo > Specifies the direction of text display
< blockquote > Specifies a long quotation
< button > Specifies a push button
< canvas > Define graphics
< caption > Specifies a table caption
< cite > Specifies a citation
< code > Specifies computer code text
< col > Specifies attributes for table columns
< colgroup > Specifies groups of table columns
< command > Specifies a command
< datalist > Specifies an "autocomplete" dropdown list
< dd > Specifies a definition description
< del > Specifies deleted text
< details > Specifies details of an element
< dfn > Defines a definition term
< div > Specifies a section in a document
< em > Specifies emphasized text
< embed > Specifies external application or interactive content
< eventsource > Specifies a target for events sent by a server
< fieldset > Specifies a fieldset
< figcaption > Specifies caption for the figure element.
< figure > Specifies a group of media content, and their caption
< footer > Specifies a footer for a section or page
< header > Specifies a group of introductory or navigational aids, including hgroup elements NEW
< hgroup > Specifies a header for a section or page
< iframe > Specifies an inline sub window (frame)
< ins > Specifies inserted text
< kbd > Specifies keyboard text
< keygen > Generates a key pair
< legend > Specifies a title in a fieldset
< mark > Specifies marked text
< map > Specifies an image map
< menu > Specifies a menu list
< meter > Specifies measurement within a predefined range
< nav > Specifies navigation links
< noscript > Specifies a noscript section
< object > Specifies an embedded object
< optgrou p> Specifies an option group
< output > Specifies some types of output
< progress > Specifies progress of a task of any kind
< q > Specifies a short quotation
< ruby > Specifies a ruby annotation (used in East Asian typography)
< rp > Used for the benefit of browsers that don't support ruby annotations
< rt > Specifies the ruby text component of a ruby annotation.
< samp > Specifies sample computer code
< section > Specifies a section
< small > Specifies small text
< source > Specifies media resources
< sub > Specifies subscripted text
< summary > Specifies a summary/caption for the

element
< sup > Specifies superscripted text
< tfoot > Specifies a table footer
< var > Specifies a variable
< video > Specifies a video
< wbr > Specifies a line break opportunity for very long words and strings of text with no spaces.

HTML5

HTML5 is the new best version of HTML.
Most of all the browsers supports HTML5.
HTML5 has lot of advanced tags for better programming.

New elements like canvas,article, footer, header and nav section.

And the form controls like calendar, date, time, email, url and search.

HTML5 also provides tags for media content example audio and video and embed

Tuesday, August 2, 2011

CSS Styling

CSS can be used to style any of the document elements like
font,heading,paragraph,table,textbox,buttons,labels,textarea etc.

Styling the font

The following code

<font style="background:green;color:red;">styled font</font>

results in this format

styled font

Styling the label

The following code

<label style="background:red;color:yellow;">styled label</label>

results in this format

styled label

Styling the paragraph

The following code

<p style="background:orange;color:yellow;padding:30px;">styled label</p>

results in this format

styled paragraph

CSS Id and Class

CSS uses elements class and id to style the particular element

Id selector is indicated using the "#" symbol while defining the style and class selector is defined as dot "." to describe the style for particular style for that element.

Example

<html><head>
<br /><style type="text/css">#p1{color:red;background:blue;}.p2{background:yellow;color:red;}</style></head><body><p id="p1">Using Id selector</p><p class="p2">Using class selector</p></body></html>

Using Id selector

Using class selector

CSS

CSS is a Cascading Style Sheet which is used to style a Document.

This helps in styling every html elements using their attributes.

There are three ways of embeding a style sheet into a document

1.External Style sheet
2.Embedded style
3.Inline style

External Style sheet

Here the external style sheet is used to style the document
It is performed using the following tag inside "head" tag of document using "link" tag.

Example

<link rel="stylesheet" type="text/css" href="css/style.css">

Here rel is the relationship of the external file which is linking to the document and type indicates the type of external file linking to it and the href is the target url of the file.

Embedded Style

Here the style is written in the same document rather linking to other external file.
The style can be written either in the "head" section or "body" section of the document.

It uses the style tag to specify the style which has the closing and opening style tag.

Example

<br /><html><head><style type="text/css">h1{color:red;font-size:30px;background:green;}</style></head><body><h1>Hello from embedded style<h1></body></html>

Inline Style

Inline styles are always taken the most precedence over the other two way of styling the document.This is achieved by specifying the style in the same tag of the element of the document.

Example

<h1 style="color:blue;background:yellow;">Hello from Inline style for document</h1>

Which results as follows

Hello from Inline style for document

HTML Tables

HTML Tables are very user friendly they are used to display a set of records from database or to create a good look for a form.Table is created using "table" tag and it also has the closing tag.

Table has the attribute of height,width,cellpadding,cellspacing and border.
Height is used to set the height of the table
Width is used to set the width of the table
Cellpadding is the space between the cell and the text of the cell
Cellspacing is the space between adjacent cells
Border is used to set the border of table

Table includes table row and table cell indicated as tr and td.
TH tag is used to define the heading of columns
TR tag is used to start a new row and dislpay the data
TD tag is used to define the data of cell

Example

<table border="1" cellpadding="0" cellspacing="0" width="100px" height="50px"><th>Name</th><th>Age</th><tr><td>abc</td><td>22</td></tr><tr><td>xyz</td><td>25</td></tr></table>

This results in following table

Name	Age
abc	22
xyz	25

For every next row the current row has to be closed and new row has to be opened

HTML Forms

HTML Forms are used to pass data between client and server
These forms contains input fields like input text box,select box,text area any of these and more.

It is created using form tag with closing form tag as follows

<form name="form_name" method="post" action="url">

It takes name,method,action as its main parameters
Where name is the name of form,
method is the type of form as post or get
and action is the specified url to perform operations using the inout data

POST is used when data has to be hidden while passing between client and server
GET is used for small amount of data and when get is used the data is visible in the url.

HTML Form Elements

There are many HTML Form Elements as follows

Input Text Box

Password Text Field

Radio Buttons

Text area

Checkboxes

Submit Button

Input Text Box

This is used to get the input of user for name,age or city any data.

This is created as follows

<form name="form1"><input type="text" name="name_of_user" id="name_of_user"></form>

Password Field

This is used to get the password of user.

This is created as follows

<form name="form1"><input type="password" name="password_of_user" id="password_of_user"></form>

Radio Buttons

This is used to display an option for user among choices like male,female etc.

This is created as follows

<form name="form1"><input type="radio" name="sex" id="sex" value="m">male<input type="radio" name="sex" id="sex" value="f">Female</form>

maleFemale

Check Boxes

This is used to display an option for user among choices yes or no etc.

This is created as follows

<form name="form1"><input type="checkbox" name="ans" id="ans" value="y">Yes<input type="checkbox" name="ans" id="ans" value="n">No</form>

YesNo

Submit Button

This is used to submit form data to server to save them to database or manipulate them in any way.

This usedas follows

<form name="form1"><input type="checkbox" name="ans" id="ans" value="y">Yes<input type="checkbox" name="ans" id="ans" value="n">No<input type="submit" name="submit" value="Submit"></form>

This is used exclusively with forms which has n nunber of data to be processed.

Text area

This is used to get more data like address etc.

This is created as follows

<form name="form1"><input type="textarea" name="address" id="address" >

This takes rows and cols as its attributes where rows is the height of area and cols is the width of area

HTML Lists

HTML Lists are used to list the contents in order.
HTML lists are of 3 types Ordered,Unordered,Definition list.

Ordered lists are created using "ol" tag which displays list items in ordered way of numbers.It also has closing tag.each list item is embeded inside opening and closing of "li" tag

The ordered lis may look like the following

Name

Address

which is the output of following code

<ol><li>Name</li><li>Age</li><li>Address</li></ol>

Unordered lists are created using "ul" tag which displays list items in unordered way of bullets.It also has closing tag.each list item is embeded inside opening and closing of "li" tag

The ordered lis may look like the following

Name

Address

which is the output of following code

<ul type="square"><li>Name</li><li>Age</li><li>Address</li></ul>

The ul tag has following types
disc
square
circle

Definition lists are created using "dl" tag which displays list items as its description.It also has closing tag.each item is embeded inside opening and closing of "dd" tag which is a data description followed by "dt" which defines the item list.

The ordered lis may look like the following

Fruits: - apple; - orange
Laptops: - DELL; - HCL

which is the output of following code

<<dl><dt>Fruits</dt><dd>- apple</dd><dd>- orange</dd><dt>Laptops</dt><dd>- DELL</dd><dd>- HCL</dd></dl>

HTML Images

HTML doc allows to use images in the document these images can be any of the .jpeg,.jpg,.gif or .png format.

It uses img as its specification inside the open and <> close tag.

It has the attributes as height,width and also the style can be written for the image.

It has "alt" as its attribute which specifies the alternate text for the image

Example:

<img src="your-iamge-path/image-name" alt="testing"/>

Which will results in following

Monday, August 1, 2011

HTML Links

HTML Links are used to link the external file source like html or css files.
These files are specified in the href attribute and are embedded to the executing file.

It includes "rel","type","href" as major three parameters
"rel" indicates the relation of the external file as stylesheet or any other help files which has to be included.
"type" indicates the type of the file as text/css or text/javascript
"href" is the parameter to indicate the file name

Example

<link rel="stylesheet" type="text/css" href="style.css">

It also has the attributes as "target" which can be any of the following
_blank
_self
_top
_parent
frame_name
If _blank is specified it opens the url in new window

HTML Text Formatting

There are many tags used to format a text.
The text can be made bold, big, emphasized, italic ,small ,strong ,subscripted
superscripted ,inserted ,deleted text

The following snippet shows how to use these

<b>This is bold text</b><big>This is big text</big> <em> This is emphasized text </em> <i> This is italic text </i> <small> This is small text</small>
<br /><strong> This is strong text </strong> <sub> This is subscripted text</sub> <sup> This is superscripted text </sup> <ins> This is inserted text </ins> <del> This is deleted text</del>

This is bold text
This is big text
This is emphasized text
This is italic text
This is small text
This is strong text
_{This is subscripted text}
^{This is superscripted text}
This is inserted text
~~This is deleted text~~

HTML Paragraphs

Paragraph is just an indication of starting of a new topic or new information.
This can be defined in paragraph tag which uses P as its indication using opening and closing tags<>.

<p>Hello this is from paragraph</p>

This results like this

Hello this is from paragraph

Even this tag can be styled.

HTML Line Breaks

These are created using br tag which produces one line whenever used

Example

hello<br>this is in next line

which produces following output

hello
this is in next line

HTML FONTS

Fonts can be styled using font tag used inside opening and closing tag of font.

Here is an example showing how to format a text using font

<font style="font-size:30px;font-family:arial;background:green;font-weight:bold;">Hi this is styled font</font>

This will result as below

Hi this is styled font

HTML Headings

HTML allows user to specify the headings using Heading tags.
These are represented using "h" alphabet in opening and closing tags.

There are 5 headings available as H1,H2,H3,H4,H5 and H6.

H1 is the highest font size heading where H6 is the lowest font size heading.

<h1>This is H1 heading</h1><h2>This is h2 heading </h2><h3>This is h3 heading </h3><h4>This is h4 heading </h4><h5>This is h5 heading </h5><h6>This is h6 heading </h6>

This results in following output.

This is H1 heading

This is h2 heading

This is h3 heading

This is h4 heading

This is h5 heading

This is h6 heading

HTML Comments

As a programmer its a good practice to comment a piece of line in order to inform which code is for which logic and implemented by whom and why that particular code is used.

Therefor for this purpose the comments are used.
These are indicated using TWO FORWARD SLASHES to comment single line
and ONE FORWARD SLASH followed by * and ending the block comment using * followed by ONE BACKWARD SLASH

Example

//single line comment

/*block of code comments */

HTML Attributes

A HTML Attribute is the property of an HTML element.

Basically most of the HTML Elements has following as their attributes

Name
Id
Style

Name is the name given to identify the particular element and Id is used when javascript or jquery is implemented.

Other common attributes are

Height
Width
Border

Example the anchor tag has the attribute as "href" which requires user to specify the specified url.

<a href="www.google.com">Go to Google.com</a>

Almost all the HTML elements has the attribute which in turn will have a value.

HTML Elements

The HTML website consists of an HTML Document which is created using HTML elements.
These HTML elements have starting tag<> and ending tag
The elements can also have attributes

Example of HTML Element

<b>Hello</b>

The above element stands for bold tag which has opening <> tag and closing tag

HTML tutorials

This blog helps you learn the html and css basics.
This is a free html css tutorial blog which allows you to learn very quickly and faster.

Here you will learn the following topics.

1.What is HTML?
2.Uses of HTML?
3.Why HTML?
4.HTML Versions?

1.What is HTML?
HTML is a Hyper Text Mark Up Language used to create powerful websites.
HTML uses its own specific tags called as HTML Tags.

2.Uses of HTML?
HTML core use is to create the powerful website and include amazing features in it.It also allows to use JavaScript and CSS to embed in the website.

3.Why HTML?
HTML is chosen for web purpose which includes creation of good efficient website easily.

4.HTML Versions?
HTML 4.0
HTML 5(Latest)

Creating simple website

Here are the simple steps to create a simple HTML basic website

A website is complete when it has its header and footer and the body content as its main 3 parts.
Header indicates the MENUS or links to other pages and Footer indicates the copy right rules.
The Body describes the purpose and use of the website also involving brief content about the site.

Copy and paste below code for simple HTML website

<html><head><title>Website title</title></head><body>Hello world !</body></html>

Website concepts

Website is all about the online operations and online information about the contents.
These websites effectively increases the user friendly operations for any applications.

Website concepts mainly depend on following strategies

1.Website Design
2.Website Simplicity
3.Website Content
4.Site user friendly
5.Bugles Operations

Website accomplishing all above criteria could be called as the website

Programming Languages

There are hundreds of programming languages available now a days.
But the most popular ever green programming languages are as follows
1.C
2.C++
3.JAVA
4.J2EE
5.Dot NET
6.PHP
7.Python
8.PERL
9.RUBY ON RAILS
10.Delphi

What is Programming ?

Programming is a process of coding an application in order to output some concepts
These coding involves the following process
1. Analyzing
2.Thinking
3.Coding the piece of logic to create logical modules
4.Clubbing the logical modules.

Analyzing
The process of thinking in order to derive the solution in all perspective.
Thinking
The process of finding all possible ways of getting the result.
Coding
The process of writing using the control loops like if,if else to code the exact logic
Clubbing
The process of combining all logical modules together in order to form a complete solution.

Pages

Wednesday, August 3, 2011

Tuesday, August 2, 2011

Hello from Inline style for document

Monday, August 1, 2011

This is H1 heading

This is h2 heading

This is h3 heading

This is h4 heading

This is h5 heading

This is h6 heading