Total Pageviews

Tuesday, January 27, 2015

How to Create Kite Shape menu using HTML CSS or javascipt

In this tutorial we are going to create Kite Shape menu using HTML CSS and JavaScript. using this method you can create different shape menu as per your interest basic requirement is image you need to set. lets start step by step.



Step 1: Create or download image you want here we are going to use kite image as shown
 Step 2: open image with Microsoft picture manager and create two different images using picture-> Color option create Black and White image for above picture as shown in picture


 Using This Tool create black and white image and colorful image


Step 3: create a HTML page paste kitemenu.html  following code in body tag

<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
        <a href="home.html">   Home</a>
 </td>
<td background="Kite.jpg" width="18%">
               <a href="galary.html">Gallary   </a>
 </td>
<td background="Kite.jpg" width="18%">
         <a href="aboutus.html">
          About Us
          </a>
           </center>
         </td>
<td background="Kite.jpg" width="18%">
        <a href="contactus.html">    Contact Us<</a>
 </td>
</table>
</body>

Step 4: write CSS Class or Copy paste following  CSS code to to <head> tag
  
   <style type="text/css">
a{ 
   font-weight:bold;
   color:yellow;
   font-size:25px;
  }
td{  text-align:center;    }
td:hover,td:active
{  background-image:url('kite5.jpg');
}
</style>


complete code is 
_____________________________________________


<html>
<head>
<title>IMS</title>

<style type="text/css">
a{ 
   font-weight:bold;
   color:yellow;
   font-size:25px;
  }
td{
   text-align:center;
  }

td:hover,td:active
{
background-image:url('kite5.jpg');
}

</style>
</head>
<body>
<center>
<table height="190" width="56%">
<td background="Kite.jpg" width="18%">
        <a href="home.html">
            
            Home</a>
          
</td>
<td background="Kite.jpg" width="18%">
               <a href="galary.html">
   
        Galary
   
                 </a>
        </center>
</td>
<td background="Kite.jpg" width="18%">
         <a href="aboutus.html">
          About Us
          </a>
           </center>
         </td>
<td background="Kite.jpg" width="18%">
        <a href="contactus.html">
    Contact Us<</a>
        </center></td>
</table>

Design By:
<br>
Sayali Bhore MCA Student IMSCDR, Ahmednagar
</body>
</html>


_________________________________________________________

You can down lode the complete HTML CSS Template  source code with example on following link

Design By:
Sayali Bhore MCA Student IMSCDR, Ahmednagar
Template Design During HTML5 CSS3 Sesson

click to Download HTML5 CSS3 Kite Template source code with example 


Friday, January 23, 2015

HTML Tutorial how to create Horizontal HTML Menu, Vertical HTML Menu, HTML Drop down Menu Step by Step

In this HTML Tutorial we are going to learn how to create Different type of Menu using CSS and HTML
UN order list tag <UL> we are gonging to create 

1.Horizontal HTML Menu using  CSS < UL> unordered list,  
2.Vertical HTML Menu CSS < UL> unordered list,
3.HTML Drop down Menu template CSS < UL> unordered list
Step by Step.









 you can download complete HTML Menu  tutorial  with CSS and Source code here
 you can download download Horizontal HTML Menu using  CSS < UL> unordered list here ,  
 you can download download Vertical HTML Menu CSS < UL> unordered list here ,
 you can download download HTML Drop down Menu template CSS < UL> unordered list here


Tutorial 1

 Create following  Horizontal HTML Menu using  CSS < UL> unordered list create Mouse Hover class , 


Lets We Learn How to create HTML Horizontal menu step by step

Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown








<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>

in this code we are going to use UN order list of HTML tag. we have created 4 links in each list item of un order list

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag

<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:Red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}

</style>
</head>

in this css code  understand importance of  
list-style-type:none 
and  overflow:hidden;  and display:block;

 Step 3: you can copy paste following code in any text editor and save as menu.html  extentsion
 
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:Red;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}

</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>


Tutorial 2

 Create following  Vertical  HTML Menu using  CSS < UL> unordered list create Mouse Hover class 

Lets We Learn How to create HTML Vertical  menu step by step








Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>

in this code we are going to use UN order list of HTML tag. we have created 4 links in each list item of un order list

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:red;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}
</style>
</head>
in this css code  understand importance of  in first and 2nd tutorial of following css Properties
list-style-type:none 
and  overflow:hidden;  and display:block;

 Step 3: you can copy paste following code in any text editor and save as menu.HTML  extension








<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:red;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:pink;
}
</style>
</head>

<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>


Tutorial3

 Create following   HTML Drop Down Menu using  CSS < UL> unordered list create Mouse Hover class


Step 1: create A HTML Page copy paste following code in to your HTML <body>tag as shown

     <body>
    <div id="horizontalmenu">
        <ul> <li><a href="#">Subjects</a>
                <ul> <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">SEO</a></li>
                     </ul>
             </li>
           
             <li> <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li>
                     <li><a href="#">Hardware</a></li>
            <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li> </ul>               
            </li>
            <li> <a href="#">Class</a>
                 <ul> <li><a href="#">MCA </a></li>
                     <li><a href="#">BE</a></li>
                     <li><a href="#">BCA</a></li>
                      <li><a href="#">M.TECH</a></li>
                 </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul>
                 <li><a href="#">India</a></li>
                <li><a href="#">America</a></li>
                  <li><a href="#">France</a></li>
                 <li><a href="#">Pakistaan</a></li>
               </ul>
       
            </li>
        </ul>
</div>
</body>

step 2: create A HTML Page copy paste following <style> or CSS code in to your HTML <head>  tag

<head>
<title>Example of HTML Menu Drop down menu</title>
<style type="text/css">
#horizontalmenu ul {
padding:1;
margin:1;
list-style:inline;

}
a{

text-decoration:none;

}
#horizontalmenu li {
float:left;
position:relative;
padding-right:100;
 display:block;
width:80px;
height:28px;
border-style:none;
 background:red;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:pink;
height:auto; width:8em;
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}

#horizontalmenu li ul li:hover{
      background:pink;}

</style>
</head>

 Step 3: you can copy paste following code in any text editor and save as menu.HTML  extension

<html>
<head>
<title>Example of HTML Menu Drop down menu</title>
<style type="text/css">
#horizontalmenu ul {
padding:1;
margin:1;
list-style:inline;

}
a{

text-decoration:none;

}
#horizontalmenu li {
float:left;
position:relative;
padding-right:100;
 display:block;
width:80px;
height:28px;
border-style:none;
 background:red;
}
#horizontalmenu li ul {
    display:none;
position:absolute;
}
#horizontalmenu li:hover ul{
    display:block;
    background:pink;
height:auto; width:8em;
}
#horizontalmenu li ul li{
    clear:both;
border-style:none;}

#horizontalmenu li ul li:hover{
      background:pink;}


</style>
</head>
<body>
<div id="horizontalmenu">
        <ul> <li><a href="#">Subjects</a>
                <ul> <li><a href="#">HTML</a></li>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">SEO</a></li>
                     </ul>
             </li>
           
             <li> <a href="#">Technology</a>
        <ul> <li><a href="#">IT/Software</a></li>
                     <li><a href="#">Hardware</a></li>
            <li><a href="#">Iphone</a></li>
                    <li><a href="#">Neuro-Science</a></li> </ul>               
            </li>
            <li> <a href="#">Class</a>
                 <ul> <li><a href="#">MCA </a></li>
                     <li><a href="#">BE</a></li>
                     <li><a href="#">BCA</a></li>
                      <li><a href="#">M.TECH</a></li>
                 </ul>
            </li>
            <li>
            <a href="#">Country</a>
                <ul>
                 <li><a href="#">India</a></li>
                <li><a href="#">America</a></li>
                  <li><a href="#">France</a></li>
                 <li><a href="#">Pakistaan</a></li>
               </ul>
       
            </li>
        </ul>
</div>
</body>
</html>









Thursday, January 22, 2015

how to create html template using table tag

how to create html template using table tag











<TABLE> </TABLE>  The Table Tag

<table > tag is paired Tag  
Let’s Take Coding example of table of 2 by 2
<table>  <tr>
               < td> Name </td>           
                <td> Roll No </td>
              </tr>
                <tr>
               < td> Prakash </td>           
                <td> 56</td>
              </tr>
 </table>
output
Name
Roll No
Prakash
56
Lets understand  attribute of each tag


<TABLE  BORDER=??> </TABLE> (pixels)
<table border=0>
0
0
0
0
<table border=1>
1
1
1
1
<table border=5>
5
5
5
5
<TABLE  CELLSPACING=?> </TABLE> (pixels)
<table cellspacing=0>
0
0
0
0
<table cellspacing=1>
1
1
1
1
<table cellspacing=4>
8
8
8
8
Cellspacing refers to the width between border lines.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE CELLPADDING=?> </TABLE> (pixels)
<table cellpadding=0>
0
0
0
0
<table cellpadding=3>
3
3
3
3
<table cellpadding=9>
9
9
9
9
Cellpadding refers to the minimum space between objects and the inner table border.
Can be used to put space between cells / objects in invisible tables - ie border=0.
<TABLE WIDTH=?> </TABLE> (in pixels)
<table width=50>
*
*
*
*
<table width=75
*
*
*
*
<table width=100>
*
*
*
*
The width of these tables have each been set to a fixed number of screen pixels.
<TABLE WIDTH=%> </TABLE> (percentage of ??)
<table width=25%>
*
*
*
*
<table width=45%>
*
*
*
*
<table width=90%>
*
*
*
*

<TR> </TR>
Table Rows <tr> enclose the Table Data Cells <td>. TR tags must be a pair. <tr>...</tr>
<table><tr><td>......</td>
<td>......</td></tr></table>
To have a data cell you must first have a Table, a Row <tr> and then the data cells(s) <td>. In other words, all data cells must be contained within Table Rows (see TD below).
<TD> </TD> (must appear within table rows)
Table Data cells contain the objects placed in a table. Table Data cells <td> must be enclosed by Table Row tags <tr>. TD tags must be a pair. <td>...</td>
<table><tr><td>......</td>
<td>......</td></tr></table>

<TD ALIGN=left|right|center> </TD>
Alignment controls the justification of objects in a data cell.
<td align=left>
Foo Bar
</td>
<td align=center>
Foo Bar
</td>
<td align=right>
Foo Bar
</td>
The alignment attributes listed in the heading should be self explanatory.
<TD VALIGN=top|middle|bottom> </TD>
Vertical Alignment controls the position of objects in a data cell.
<td valign=top>
...</td>
<td valign=center>
...</td>
<td valign=bottom>
...</td>
just
some
fill
text
The vertical alignment attributes listed in the heading should be self explanatory.
<TD NOWRAP> </TD>
Nowrap means no line breaks in text objects.
Foo Bar and waffle!
Foo Bar and waffle etc!
<td nowrap>...</td>
Here the table has been forced to a minimum size of 100 pixels, although it can not reduce to this size because the right hand cell is set with the <td nowrap>...</td> attribute. The text in the left hand cell has wrapped because its width is minimised by the force of the text in the "nowrap" cell.
<TD COLSPAN=?> </TD>
Make one data cell wider than others above and/or below. (spans multiple columns)
Table Data 1
Table Data 2
<tr>
<td>Table Data 1</td>
<td>Table Data 2</td>
</tr><tr>
<td colspan=2>This cell</td>
</tr>

<TD ROWSPAN=?> </TD>
Make one column cell higher than others next to it. (spans multiple rows)
Table Data 1
<tr>
<td>Table Data 1</td>
<td rowspan=2>This cell</td>
</tr><tr>
<td>Table Data 2</td>
</tr>
Table Data 2

<TD WIDTH=?> </TD> (in pixels)
Set the width of individual Table Cells in pixels.
75
15
40
"
"
"
Each data cell <td> tag includes a width=??? attribute. (a minimum width in screen pixels)
<TD WIDTH="??%"> </TD> (percentage of table)
Equal Table Data cells.
33
33
33
%
Uneven cells
15
35
50
%
%
Uneven cells
20
20
60
%
%

<TD BGCOLOR="#rrggbb"> </TD>
Setting the background colour of individual Table Data cells
#999900
#FF9900
#996699

<TH> </TH> (same as TD, except text is bold)
Table Header cell.
Table Header cell
Table Data cell
<tr>
<th align="center" width="50%">Table Header cell</th>
<td align="center" width="50%">Table Data cell</td>
</tr>
<tr>
<td colspan="2" align="center">This is this cell</td>
</tr>

<TH ALIGN=left|right|center> </TH>
Default Bold text, otherwise refer to the <TD ALIGN= attributes.
<TH VALIGN=top|middle|bottom> </TH>
Default Bold text, otherwise refer to the <TD VALIGN= attributes.
<TH NOWRAP> </TH>
Default Bold text, otherwise refer to the <TD NOWRAP= attributes.
<TH COLSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD COLSPAN= attributes.
<TH ROWSPAN=?> </TH>
Default Bold text, otherwise refer to the <TD ROWSPAN= attributes.
<TH WIDTH=?> </TH> (in pixels)
Default Bold text, otherwise refer to the <TD WIDTH= attributes.
<TH WIDTH="%"> </TH> (percentage of table)
Default Bold text, otherwise refer to the <TD WIDTH= % attributes.
<TH BGCOLOR="#rrggbb"> </TH>
Default Bold text, otherwise refer to the <TD BGCOLOR= attributes. an extention.
<CAPTION> </CAPTION> (above or below table)
A Table Caption appears without table borders.
<table><caption>Foo Bar</caption>...
Table Data cell
Table Data cell
Table Data cell - colspan=2








This table tag and its attributes are used to place captions at the top or bottom of tables.
<CAPTION ALIGN=top|bottom> </CAPTION>

Popular Posts

Follow by Email