Practical No.1: Design A Home Page For Business To Consumer Website
Practical No.1: Design A Home Page For Business To Consumer Website
1
Aim :- Design a home page for business to consumer website
Code:
Home.html
<html>
<head>
<title>Powerlook Website</title>
<style>
a:link {
text-decoration: none;
div.a {
text-align: right;
font-family:Maiandra GD;
font-size:14;
color:gray;
div.b {
text-align:center;
font-family:Maiandra GD;
font-size:15;
font-style:bold;
</style>
</head>
<body>
<div class="a">
<hr></div>
<br><b>
</div>
<center>
<br><br><br>
</body>
</html>
Login.html
<html>
<head>
<title>Login Page</title>
<style>
div.a {
font-family:Nirmala UI;
font-size:14;
color:gray;
h3.a{
line-height : 3px;
margin-bottom:30;
p.a{
font-family:Nirmala UI;
font-size:12;
</style>
</head>
<body>
<div class="a">
Welcome Back!
</div>
PASSWORD<br>
<input type="Reset">
<script language="javascript">
function check(form) {
window.open(pract1.html)
return true;
else {
}}
</script>
</body>
</html>
Output:-
<html>
<head>
<script src="script.js"></script>
<style>
h2.a{
line-height : 2px;
margin-bottom:1;
</style>
</head>
<body>
<div id="mainform">
<div class="innerdiv">
<table>
<tr>
<td>Username</td>
<td>
<div id='username'></div>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<div id='password'></div>
</td>
</tr>
<tr>
<td>Email</td>
<td>
<div id='email'></div>
</td>
</tr>
<tr>
<td>Phone no.</td>
<td>
<div id='website'></div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Style.css
@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family:'Fauna One',serif
#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px
.innerdiv{
width:65%;
float:left
form{
background-color:#fff;
color:#123456;
width:500px;
float:left;
height:400px;
padding:10px
h3{
margin-top:0;
color:#fff;
background-color:#0B87AA;
text-align:center;
width:100%;
height:50px;
TYBCA VIRAJ DHURI
padding-top:30px
input{
width:250px;
height:30px;
margin-top:10px;
border-radius:3px;
padding:2px;
margin:10px
input[type=button]{
background-color:#0B87AA;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff;
width:50%;
margin-left:105px;
margin-top:30px
span{
color:green
#myForm div{
color:red;
font-size:14px
TYBCA VIRAJ DHURI
}
Script.js
function checkForm() {
// Fetching values from all input fields and storing them in variables.
} else {
//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate
alert.
} else {
document.getElementById("myForm").submit();
}
TYBCA VIRAJ DHURI
// AJAX code to check input field values when onblur event triggerd.
var xmlhttp;
xmlhttp.onreadystatechange = function() {
document.getElementById(field).innerHTML = "Validating..";
document.getElementById(field).innerHTML = xmlhttp.responseText;
} else {
xmlhttp.send();
Validation.php
<?php
$value = $_GET['query'];
$formfield = $_GET['field'];
// Check Valid or Invalid user name when user enters user name in username input field.
if ($formfield == "username") {
if (strlen($value) < 4) {
TYBCA VIRAJ DHURI
echo "Must be 3+ letters";
} else {
echo "<span>Valid</span>";
// Check Valid or Invalid password when user enters password in password input field.
if ($formfield == "password") {
if (strlen($value) < 6) {
} else {
echo "<span>Strong</span>";
// Check Valid or Invalid email when user enters email in email input field.
?>
Output:-
<html>
<head>
<style>
a:link {
text-decoration: none;
div.a {
text-align: right;
font-family:Nirmala UI;
font-size:14;
color:gray;
</style>
</head>
<body>
<div class="a">
<hr></div>
<div class="b">
<br><b>
</div>
<table border="1">
<tr>
</tr>
<tr>
<td>
<p>rs.549</p>
</a>
</td>
<td>
</h4>
<p>rs.580</p>
</a>
</td>
<td>
</h4>
<p>rs.549</p>
</a>
</td>
</h4>
<p>rs.570</p>
</a>
</td>
</tr>
<tr>
<td>
</h4>
<p>rs.549</p>
</a>
</td>
<td>
<p>rs.460</p>
</a>
</td>
<td>
<p>rs.770</p>
</a>
</td>
<td>
<p>rs.549</p>
</a>
</td>
</tr>
</table>
</body>
</html>
Output:-