Tutorial:-5
v Create a block layout of webpage using HTML Table Tag.
<html>
<head>
<title>Table-1</title>
<style>
body
{
background-color: #580001;
background-image: url(images/top-rept.jpg);
background-repeat: repeat-x;
background-position: left top;
}
.banner
{
background-image: url(images/header.jpg);
background-repeat: no-repeat;
background-position: left top;
width:100%;
height: 100px;
float: left;
text-align:center;
color:white;
}
.topmenu ul li
{
display: inline;
padding: 0px 22px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #FFFFFF;
}
.topmenu ul li a
{
font-family: "Monotype Corsiva", Times, serif;
font-size: 20px;
font-weight: bold;
line-height: 10px;
color: #FFFFFF;
text-decoration: none;
}
.topmenu ul li a:hover
{
text-decoration: underline;
}
.title
{
font-family: "Times New Roman", Times, serif;
font-size: 24px;
line-height: 25px;
color: #fafafa;
background-color: #898989;
height: 25px;
padding-left: 34px;
margin-top:-180px;
}
.title span
{
background-color: #646363;
padding-right: 5px;
padding-left: 5px;
}
.d
{
height:54px;
}
.menu
{
padding:4px;
margin:5px;
}
.menu li
{
margin-top:-4px;
list-style-type:none;
float:left;
padding:10px;
background-image: url(images/menu.jpg);
background-repeat: no-repeat;
background-position: left top;
width:7em;
display:block;
text-align:center;
margin-left:22px;
border: 3px solid black;
border-radius:10px;
color:white;
}
.menu li:hover
{
text-decoration: underline;
cursor:pointer;
}
#form
{
font-family:"Monotype Corsiva";
margin-left:0px;
font-size:19;
color:white;
}
#right
{
border-radius:15px;
}
</style>
</head>
<body>
<table border="1" width="100%" height="100%">
<tr height="15%">
<td colspan="3">
<div class="banner">
<h1>Nakum Anil</h1>
</div>
</td>
</tr>
<tr height="6%">
<td colspan="3">
<div class="topmenu">
<ul>
<li style="border-left: medium none;"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Recent articles</a></li>
<li><a href="#">Email</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td width="20%">3</td>
<td>
<h2 class="title"><span>Welcome</span></h2>
</td>
<td width="22%" id="right">
<table height="100%" border="0">
<tr height="70%">
<td>
<h3><u><font color="white">* Contact Form :: </font></u></h3>
<div>
<form action="" name="">
<table id="form">
<tr>
<td><b>User Name : </b></td>
<td><input type="text" Value="" style="border-color:red" name="txtname" id=""/></td>
</tr>
<tr>
<td><b>Phone No : </b></td>
<td><input type="text" Value="" style="border-color:red" name="num" id=""/></td>
</tr>
<tr>
<td><b>Email : </b></td>
<td><input type="text" Value="" style="border-color:red" name="email" id=""/></td>
</tr>
<tr>
<td><b>Query : </b></td>
<td>
<textarea rows="3" cols="20" style="border-color:red;">
</textarea>
</td>
</tr>
<tr>
<td><input type="submit" name="button" id="button" value="Submit" /></td>
<td><input type="reset" name="button2" id="button2" value="Reset" /></td>
</tr>
</table>
<form>
</div>
</td>
</tr>
<tr>
<td height="30%">
<marquee style="color:white;" behavior="scroll" direction="up" scrolldelay="300" height="100px" align="top">
<b>
Nakum Anil R.
{E. No :130590107023}
G.K.Bharad institute of Engineering
Computer Engineering
</b>
</marquee>
</td>
</tr>
</table>
<table>
</table>
</td>
</tr>
<tr height="8%">
<td colspan="3">
<font face="Monotype Corsiva" size="5">
<div class="d">
<ul class="menu">
<li>M1</li>
<li>M2</li>
<li>M3</li>
<li>M4</li>
<li>M5</li>
<li>M6</li>
</ul>
</div>
</font>
</td>
</tr>
<tr height="5%">
<td colspan="3" bgcolor="#333" style="text-align:center; color:#FFF;"><b>@by Nakum Anil <a href=http://anilnakum.blogspot.in/> Blog </a> From... G.K. Bharad institute of Engineering</b></td>
</tr>
</table>
</body>
</html>
No comments:
Post a Comment