pdf

By: Unknown 0 comments

https://drive.google.com/file/d/0B9yJU3RvKCkQRzhwS2tkVjNjSHM/edit?usp=sharing

https://drive.google.com/file/d/0B9yJU3RvKCkQRzhwS2tkVjNjSHM/edit?usp=sharing

download

Read More

GREAT HTML TABLES - FOR BLOGGER, WORDPRESS, JOOMLA, PROJECTS.

By: Unknown 0 comments

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 1: Simple Table

Demo:

Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag.

One column:

100

One row and three columns:

100

200

300

Two rows and three columns:

100	200	300
400	500	600

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 2: Tables Without Borders

Demo:

This table has no borders:

100	200	300
400	500	600

And this table has no borders:

100	200	300
400	500	600

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 3: Table Header

Demo:

Table headers:

Name	Telephone	Telephone
Bill Gates	555 77 854	555 77 855

Vertical headers:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

CODE: Get its code


--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 4: Table with a Caption

Demo:

Monthly savings

Month	Savings
January	$100
February	$50

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 5: Table cells than span more than one row/column 

Demo:

Cell that spans two columns:

Telephone

Name

Bill Gates
555 77 854
555 77 855

Cell that spans two rows:

Telephone:

First Name:	Bill Gates

555 77 854
555 77 855

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 6: Tags inside a table

Demo:

This is a paragraph This is another paragraph	This cell contains a table: A B C D
This cell contains a list apples bananas pineapples	HELLO

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 7: Cell padding (controls white space between text and borders)

Demo:

Without cell padding:

First	Row
Second	Row

With cell padding:

First	Row
Second	Row

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Table 8: Cell spacing (controls space between cells)

Demo:

Without cellspacing:

First	Row
Second	Row

With cellspacing="0":

First	Row
Second	Row

With cellspacing="10":

First	Row
Second	Row

CODE: Get its code

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Read More

CSS: CSS List - Learn CSS for Free and Fun ......

By: Unknown 0 comments

CSS List

With the help of CSS list properties; you can set an image as the list-item marker and place the list-item marker.

With CSS you can prepare your list item

You can add properties like

 image

 style

Tag:ol {list-style-type: decimal;}

The CSS list property allocates you to set an image as the list-item marker and place the list-item marker. You can easily add properties like image and style.

Example:

<html>

<head>

<style type="text/css">

ul.disc {list-style-type: disc;}

ul.circle {list-style-type: circle;}

ul.square {list-style-type: square;}

ul.none {list-style-type: none;}

</style>

</head>

<body>

<ul class="disc">

     <li>Sun</li>

     <li>Moon</li>

     <li>Stars</li>

</ul>

<ul class="circle">

     <li>Sun</li>

     <li>Moon</li>

     <li>Stars</li>

</ul>

 <ul class="square">

       <li>Sun</li>

       <li>Moon</li>

       <li>Stars</li>

</ul>

<ul class="none">

      <li>Sun</li>

      <li>Moon</li>

      <li>Stars</li>

</ul>

</body>

</html>

Read More

CSS: CSS Outline - Learn CSS for Free and Fun

By: Unknown 0 comments

With CSS we can draw a line bounding your element. We can add properties like

 color
 style
 width

Remember this option does not work with internet explorer.

Tag: outline: green dotted thick;

The CSS outline is used to make an element “stand out’. It is a line that is drawn around the
outside the border edge. Additional properties like color, style and width can be added.

Example:

<html>
<head>
<style type="text/css">
p {
border: red solid thin;
outline: green dotted thick;
}
</style>
</head>
<body>
<p>Some text.</p>
</body>
</html>

Read More

CSS: CSS Padding - Learn CSS for Free and Fun .......

By: Unknown 0 comments

With CSS we can define the space between the element border and the element content. Padding can be applied at

 top of the page
 left of the page
 bottom of the page
 right of the page

Tags:

padding-top: 2cm;
padding-left: 3cm;
padding-bottom: 4cm;
padding-right: 5cm;
padding: 2cm 3cm 4cm 5cm;

The CSS padding identifies the space between the element border and the element content.
CSS padding can be applied to the top, bottom, left and right of the web page.

Example:

<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm;}
td.test2 {padding: 0.5cm 2.5cm;}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
This is a tablecell with equal padding on each side.
</td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="test2">
This tablecell has a top and bottom padding of 0.5cm
and a left and right padding of 2.5cm.
</td>
</tr>
</table>
</body>
</html>

Demo:

This is a tablecell with equal padding on each side.

This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm.

Read More

CSS; CSS Margin - Learn CSS for Free and Fun ......

By: Unknown 0 comments

With CSS we can set Margins at the

 top of the page
 bottom of the page
 right of the page
 left of the page

Tags:

margin-top: 5cm;
margin-right: 6cm;
margin-bottom: 7cm;
margin-left: 8cm;
margin: 5cm 6cm 7cm 8cm;

A margin is a space around an object. We can set margin in web pages using CSS. Using
separate properties within margin syntax we can define space all around the element.

Example:

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm;}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class="margin">This is a paragraph with specified margins</p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>

Read More

CSS: CSS Border - Learn CSS for Free and Fun

By: Unknown 0 comments

What we can do with CSS Border?

 We can set the color of the border
 We can set the style of the border
 We can set the width of the border

The CSS border is used for the purpose of changing color, style and the width of the border.
The CSS border allows to use each side of the separately from the other three sides. Each of
the sides can have different color, style and width.

The color of the border also has different syntaxes for the top, bottom, left and right. To set the color of four borders the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-color: #0000ff;
}
p.two {
border-style: solid;
border-color: #ff0000 #0000ff;
}
p.three {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff;
}
p.four {
border-style: solid;
border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);
}
</style>

The style of the CSS border varies in case of top, bottom, right and left borders. The syntax used in case of dotted, dashed, solid, double, groove, ridge, inset, outset paragraphs are

<style type="text/css">
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
</style>

The width of the CSS border also varies in case of top, bottom, right and left. To set the width
of the bottom border the syntax used is

<style type="text/css">
p.one {
border-style: solid;
border-top-width: 15px;
}
p.two {
border-style: solid;
border-top-width: thin;
}
</style>

Read More