0% found this document useful (0 votes)
333 views16 pages

Practical No.1: Design A Home Page For Business To Consumer Website

The document describes the design of a home page for a business to consumer website. It includes the HTML code for the home page and login page. The home page code contains the website logo, navigation links, banner image and sections for watches and clocks. The login page code contains fields for users to enter their email/mobile number and password for login verification.

Uploaded by

viraj14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
333 views16 pages

Practical No.1: Design A Home Page For Business To Consumer Website

The document describes the design of a home page for a business to consumer website. It includes the HTML code for the home page and login page. The home page code contains the website logo, navigation links, banner image and sections for watches and clocks. The login page code contains fields for users to enter their email/mobile number and password for login verification.

Uploaded by

viraj14
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Practical No.

1
Aim :- Design a home page for business to consumer website
Code:
Home.html

<html>

<head>

<title>Powerlook Website</title>

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

<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">

<a href="#" style="color:gray"> Track Order </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="#"style="color:gray"> Store Locator </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="#"style="color:gray">Contact us </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="login.html"style="color:gray">Login </a>&nbsp;&nbsp;

<hr></div>

TYBCA VIRAJ DHURI


<div class="b">

<br><b>

<a href="c-tshit.html" style="color:black">WATCHES</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> NEW ARRIVALS </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> OFFERS </a>&nbsp;&nbsp;&nbsp;&nbsp;

<img src="logo.png" width="174px" height="54px" align="center">

<a href="#" style="color:black"> SMART </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> CLOCKS </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> ACCESSORIES </a></b>

<img src="fav.png" width="39px" height="36px" align="right">

<img src="shop.png" width="39px" height="36px" align="right">

</div>

<center>

<img src="banner2.jpg" width="1220px" height="511px"></center>

<br><br><br>

<h2 style="font-family:Maiandra GD" align="center">TITAN CLOCKS</h2>

<p style="font-family:Maiandra GD;color:gray" align="center">Clocks For Every Moment</p>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="1.jpg" width="360px"


height="279px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<img src="2.jpg" width="360px"


height="279px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<img src="3.jpg" width="360px"


height="279px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

</body>

</html>

Login.html

<html>

<head>

<title>Login Page</title>

<style>

div.a {

font-family:Nirmala UI;

font-size:14;

color:gray;

TYBCA VIRAJ DHURI


line-height : 5px;

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>

<h3 style="font-family:Nirmala UI " class="a">

Login to your account</h3>

<p class="a" style="color:gray"><b>EMAIL/MOBILE NUMBER<br>

<input type="text"" size="25" name="userid" ><br>

PASSWORD<br>

<input type="password"" size="25" name="pwd" "><br>

<input type="Reset">

<input type="submit" onclick="return check(this.form)" value="login">

<script language="javascript">

function check(form) {

if(p.userid.value == "viraj" && form.pwd.value == "viraj1234") {

window.open(pract1.html)

return true;

else {

alert("Error Password or Username")

TYBCA VIRAJ DHURI


return false;

}}

</script>

</body>

</html>

Output:-

TYBCA VIRAJ DHURI


TYBCA VIRAJ DHURI
Practical No.2
Aim:- Design a page to enter customer details such as name address phone number apply proper
validation.
Code:-
Index.html:

<html>

<head>

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

<script src="script.js"></script>

<style>

h2.a{

line-height : 2px;

margin-bottom:1;

</style>

</head>

<body>

<div id="mainform">

<div class="innerdiv">

<!-- Required Div Starts Here -->

<h2 class="a" style="font-family:Nirmala UI">Sign Up</h2>

<form action='#' id="myForm" method='post' name="myForm">

<h3><img src="logo 2.jpg" width="174px" height="50px" align="left">Fill Your Information!</h3>

<table>

<tr>

<td>Username</td>

<td><input id='username1' name='username' onblur="validate('username', this.value)"


type='text'></td>

<td>

<div id='username'></div>

</td>

</tr>

<tr>

<td>Password</td>

TYBCA VIRAJ DHURI


<td><input id='password1' name='password' onblur="validate('password', this.value)"
type='password'></td>

<td>

<div id='password'></div>

</td>

</tr>

<tr>

<td>Email</td>

<td><input id='email1' name='email' onblur="validate('email', this.value)" type='text'></td>

<td>

<div id='email'></div>

</td>

</tr>

<tr>

<td>Phone no.</td>

<td><input id='website1' name='website' onblur="validate('website', this.value)" type='text'></td>

<td>

<div id='website'></div>

</td>

</tr>

</table>

<input onclick="checkForm()" type='button' value='Submit'>

</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

TYBCA VIRAJ DHURI


}

#mainform h2{

width:100%;

float:left;

text-align:center;

margin-top:35px

.innerdiv{

width:65%;

float:left

form{

background-color:#fff;

color:#123456;

box-shadow:0 1px 1px 1px gray;

width:500px;

margin:50px 250px 0 50px;

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;

box-shadow:0 1px 1px 0 #a9a9a9;

margin:10px

input[type=button]{

background-color:#0B87AA;

border:1px solid #fff;

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.

var name = document.getElementById("username1").value;

var password = document.getElementById("password1").value;

var email = document.getElementById("email1").value;

var website = document.getElementById("website1").value;

//Check input Fields Should not be blanks.

if (name == '' || password == '' || email == '' || website == '') {

alert("Fill All Fields");

} else {

//Notifying error fields

var username1 = document.getElementById("username");

var password1 = document.getElementById("password");

var email1 = document.getElementById("email");

var website1 = document.getElementById("website");

//Check All Values/Informations Filled by User are Valid Or Not.If All Fields Are invalid Then Generate

alert.

if (username1.innerHTML == 'Must be 3+ letters' || password1.innerHTML == 'Password too short'

|| email1.innerHTML == 'Invalid email' || website1.innerHTML == 'Invalid website') {

alert("Fill Valid Information");

} else {

//Submit Form When All values are valid.

document.getElementById("myForm").submit();

}
TYBCA VIRAJ DHURI
// AJAX code to check input field values when onblur event triggerd.

function validate(field, query) {

var xmlhttp;

if (window.XMLHttpRequest) { // for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else { // for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

xmlhttp.onreadystatechange = function() {

if (xmlhttp.readyState != 4 && xmlhttp.status == 200) {

document.getElementById(field).innerHTML = "Validating..";

} else if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

document.getElementById(field).innerHTML = xmlhttp.responseText;

} else {

document.getElementById(field).innerHTML = "Error Occurred. <a href='index.php'>Reload Or Try

Again</a> the page.";

xmlhttp.open("GET", "validation.php?field=" + field + "&query=" + query, false);

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) {

echo "Password too short";

} else {

echo "<span>Strong</span>";

// Check Valid or Invalid email when user enters email in email input field.

?>

Output:-

TYBCA VIRAJ DHURI


Practical No.9
Aim :- Design a catalogue using any web technologies.
Code :
c-tshit.html:

<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">

<a href="#" style="color:gray"> Track Order </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="#"style="color:gray"> Store Locator </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="#"style="color:gray">Contact us </a>&nbsp;&nbsp;| &nbsp;&nbsp;

<a href="#"style="color:gray">Login </a>&nbsp;&nbsp;

<hr></div>

<img src="logo.png" width="174px" height="54px" align="left">

<div class="b">

<br><b>

<a href="#" style="color:black"> T-SHIRTS</a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> SHIRTS </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> BOTTOMS </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> JACKET </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> TRACK-SUIT </a>&nbsp;&nbsp;&nbsp;&nbsp;

<a href="#" style="color:black"> ACCESSORIES </a></b>


TYBCA VIRAJ DHURI
<img src="fav.png" width="39px" height="36px" align="right">

<img src="shop.png" width="39px" height="36px" align="right">

</div>

<table border="1">

<tr>

<th colspan="4"><img src="offer.png" width="1259px" height="31px" align="right"></th>

</tr>

<tr>

<td>

<img src="11.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Black Chest Printed High Neck Full Slives</h4>

<p>rs.549</p>

</a>

</td>

<td>

<img src="22.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Neon Green Oversize Hooded Half Sleeves T Shirt

</h4>

<p>rs.580</p>

</a>

</td>

<td>

<img src="33.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Mustard Basic Henley Full Sleeves T Shirt

</h4>

<p>rs.549</p>

</a>

</td>

TYBCA VIRAJ DHURI


<td>

<img src="44.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Sky Blue Arrow Stripe Full Sleeves T Shirt

</h4>

<p>rs.570</p>

</a>

</td>

</tr>

<tr>

<td>

<img src="55.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Black and White Stripe Chest Printed Full Sleeves T Shirt

</h4>

<p>rs.549</p>

</a>

</td>

<td>

<img src="66.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Urban Maroon Signature Oversize T Shirt</h4>

<p>rs.460</p>

</a>

</td>

<td>

<img src="77.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>Peach White Collar Full Sleeves T Shirt</h4>

<p>rs.770</p>

</a>

</td>

<td>

TYBCA VIRAJ DHURI


<img src="88.jpg" width="300px" height="350px">

<a href="#" style="color:black">

<h4>White Chest Printed High Neck Full Sleeves T Shirt</h4>

<p>rs.549</p>

</a>

</td>

</tr>

</table>

</body>

</html>

Output:-

TYBCA VIRAJ DHURI

You might also like