Scribd
Upload
794 views

Design The Following Static Web Pages Required For An Online Book Store Web Site

The document describes the design of static web pages for an online bookstore website. It includes 10 HTML pages: a home page with three frames, login, catalog, registration pages, and pages for different book categories. Frames are used to divide pages into sections. The home page frames display the logo, navigation links, and content. Other pages display book details, registration forms, and order confirmations. The pages are created using basic HTML tags and linked together within the frameset.

Uploaded by

Anu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
794 views

Design The Following Static Web Pages Required For An Online Book Store Web Site

The document describes the design of static web pages for an online bookstore website. It includes 10 HTML pages: a home page with three frames, login, catalog, registration pages, and pages for different book categories. Frames are used to divide pages into sections. The home page frames display the logo, navigation links, and content. Other pages display book details, registration forms, and order confirmations. The pages are created using basic HTML tags and linked together within the frameset.

Uploaded by

Anu
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 24

WEB TECHNOLOGY DATE:-

LAB 1

. Design the following static web pages required for an online book store web site
1) HOME PAGE: The static home page must contain three frames.
2) LOGIN PAGE
3) CATOLOGUE PAGE: The catalogue page should contain the details of all the
books available in the web site in a table.
4) REGISTRATION PAGE
5) AIM:-Design the following static web pages required for online book store.

1. Home page:- the static home page must contains three pages
2. Top frame:- logo and college name and links to homepage, login page, registration
page and catalogue page
3. Left frame:- at least four links for navigation which will display the
catalogue of Respective links
4. Right frame:- the pages to links in the left frame must be loaded here initially it
Contains the description of the website.
DESCRIPTION: In this program the entire web paged are created by using basic
HTML tags. Home page is divided into 3 frames by using <frameset> and <frame>
tags. A frame is used to display a web page within a web page.
<frameset>:
 The <frameset> tag defines a frameset.
 The <frameset> element holds one or more <frame> elements.
 Each <frame> element can hold a separate document.
 The <frameset> element specifies HOW MANY columns or rows there will be
in the frameset, and HOW MUCH percentage/pixels of space will occupy each
of them.
<frame>:
 The <frame> tag defines one particular window (frame) within a <frameset>.
 Each <frame> in a <frameset> can have different attributes, such as border,
scrolling, the ability to resize, etc.

PROGRAMS
1. HOMEPAGE.html

PREPARED BY NIRAJ SAH


Web technology date:-

<frameset rows="40%,*"> <frame src="top.html" noresize scrolling="NO" name="topframe">


<frameset cols="15%,*">
<frame src="left.html" noresize scrolling="NO" name="leftframe">
<frame src="right.html" noresize name="rightframe" scrolling="auto">
</frameset>
</frameset>

2. TOP.html
<html>
<head>
<title> Top frame</title>
</head>
<body bgcolor="#orange">
<img src="cram.jfif" width="125" height="115" align="left">
<font face="times" size="3" color="#black"><b> WEB TECHNOLOGIES LAB MMC </b>
</font>
<img src="sram.jfif" width="200" height="153" align="right">
<center>
<marquee bgcolor="red" width="700" behavior="alternate">
<font face="Brush Script MT" size="8" color="#c4aead"><b><i> निरज पु स्तक भण्डार <img src="non.jfif"
width="90" height="55"></i></b>
</font>
</marquee> <br>
<font face="times" size="5" color="black"> <b> Created By NIRAJ SAH</b> </font>
</center>
<br>
<table width="100%" height="50%" cellspacing=10>
<tr align="center">
<td> <a href="Home.html" target="_parent"> <font face="Brush Script" size="6" color="#0000cd">HOME
</a> </td>
<td> <a href="login.html" target="rightframe"> <font face="Brush Script" size="6"
color="#004040">LOGIN</a> </td>
<td> <a href="registration.html" target="rightframe"> <font face="Brush Script" size="6"
color="#560319">REGISTER</a> </td>
<td> <a href="catalogue.html" target="rightframe"> <font face="Brush Script" size="6"
color="#ff4500">CATALOGUE</a> </td>

PREPARED BY NIRAJ SAH


Web technology date:-

</tr>
</table>
</body> </html>

3. LEFT.html
<html>
<body align="center" bgcolor="#00ffff"><br>
<a href="cse.html" target="rightframe"><font size="6">CSE</font></a><br><br>
<a href="ece.html" target="rightframe"><font size="6">ECE</font></a><br><br>
<a href="eee.html" target="rightframe"><font size="6">EEE</font></a><br><br>
<a href="mech.html" target="rightframe"><font size="6">MECH</font></a><br><br>
</body>
</html>

4. RIGHT.html
<html>
<body bgcolor="#12346">
<center>
<img src="book.jpg" height="170"> <br>
<font face="Copperplate, Papyrus, fantasy" size="5" color="#grey">
<h1><b> Welcome to the onlinebook store!!! </b></font><br/>
<font face="times" size="5" color="red">
<h2><b> "A Huge collection of Engineering E-books"</b></h2></font>
</center>
</body> </html>

5. CSC.html
<body bgcolor="#BLUE">
<center><font color="black"><h1>Computer science and engineering</h1></font></center> <br>
<table align="center">
<tr>
<td>Text Books</td>
<td>

PREPARED BY NIRAJ SAH


Web technology date:-

<select>
<option value="select the book" selected> Selected the book
<option value="DSA">DSA
<option value="Web Technologies">Web Technologies
<option value="Java">Java
<option value="System Analysis">System Analysis
<option value="Statistics">Statistics
<option value="Database">Database
</select>
</td>
</tr>
<tr>
<td>Quantity</td>
<td><input type="text" id="q"></td>
</tr>
<tr>
<td></td>
<td>
<form method=post action="order.html">
<input type="submit" value=ok />
</form>
</td>
</tr>
</table>
<center>
<pre><marquee>Cost of one book "500"+shipping"100" (BUY 5 GET 1 FREE....)</marquee></pre>
</center>
</body>
</html>

6. ECE.html
<html>
<body bgcolor="BLUE">
<h1><font color="#GREEN">Electronic and communication Engineering</font></h1>

PREPARED BY NIRAJ SAH


Web technology date:-

<h2>
<ul>
<li>Digital Circuits</li> <li>Signals and system</li> <li>Digital Communication</li>
</ul>
</h2>
</body> </html>

7. MECH.html

<html>
<body bgcolor="#940094">
<h1><font color="#ccff00">Electronic and Communication Engineering</font></h1>
<h2>
<ul>
<li>Theory of machines</li>
<li>Automation and Robotics</li>
<li>Engineering Fluid Mechanics</li>
</ul>
</h2>
</body>
</html>

8. CATALOGUE.html
<html>
<head>
<title>Catalogue</title>
</head>
<body bgcolor="YELLOW">
<form action="order.html">
<table border="1" width=100%">
<tr> <td>
<img src="web.jfif" width=100 height=100/>
</td>
<td> Book: WEB TECHNOLOGIES <br> Author:SONOO SHAH <br> Publication:JANKI UNIVERSITY
</td> <td>531 &nbsp;&nbsp;&nbsp;</td>

PREPARED BY NIRAJ SAH


Web technology date:-

<td> <input type="submit" value="Add to cart"/></td>


</tr>
<tr>
<td>
<img src="Sys.jfif" width=100 height=100/>
</td>
<td> Book:SYSTEM ANALYSIS AND DESIGN <br> Author:NIRAJ SAH <br> Publication:SHREE RAM
UNIVERSITY</td> <td>898 &nbsp;&nbsp;&nbsp</td>
<td> <input type="submit" value="Add to cart"/></td>
</tr>
</table>
</form>
</body> </html>

9. LOGIN.html
<html>
<body bgcolor="#grey">
<basefont face="Brush Script" size="4"> <br>
<center>
<img src="on.jfif" width=385" height="135"/> <br/>
<font face="Brush Script MT" size="7" color="#purple">
<b>Enter Login Details:</b>
</font>
</center>
<form name="f1" method="post" action="right.html">
<table align="center" width="100" height="150" cellspacing="15">
<tr><td><b> Login ID:</b></td>
<td><input type="text" name="t1"></td>
</tr>
<tr>
<td><b> Password:</b></td>
<td><input type="password" name="t2"></td>

PREPARED BY NIRAJ SAH


Web technology date:-

</tr>
<tr align="center">
<td><input type="submit" name="b1" value="submit"></td>
<td><input type="reset" name="b2" value"reset"></td>
</tr>
</table>
</form>
</basefont>
</body> </html>

10. REGISTRATION.html
<html>
<head><title>Registration Form</title></head>
<body bgcolor="#f4bbff">
<center><font color="blue" size="6" face="arial">Registration Form</font></center><br/>
<form action="right.html">
First Name(Minimum 6 characters)<font color="red">*</font>
<input type='text' id='firstname'/> <br/><br/>
Last name<font color="red"><font color="red">*</font></font> &nbsp;&nbsp;&nbsp;
<input type='text' id='lastname'/> <br/><br/>
EmailAddress<font color="red">*</font> &nbsp;&nbsp;&nbsp;
<input type='text' id='email'/><br/>
<font color="red">(one email id only):</font> &nbsp;&nbsp;&nbsp;
<font color="#800010">e.g. [email protected]</font><br/><br/>
Password(minimum 6 characters) <font color="red">*</font> &nbsp;&nbsp;&nbsp;
<input type='password' id='pass'> <br/><br/>
Address<font color="red">*</font> &nbsp;&nbsp;&nbsp;
<textarea rows="2" cols="20" id='addr'/> </textarea> <br/> </br>
Mobile No <font color="red">* </font> &nbsp;&nbsp;&nbsp;
<input type='text' id='mobile no.'/> <br/>
Gender: <input type='radio' name="gender">male
<input type='radio' name="gender">female <br/> <br/>
<input type='Submit' value='submit'/>

PREPARED BY NIRAJ SAH


Web technology date:-

<input type='Reset' value='reset'/>


</form> </body>
</html>

11. ORDER.html
<html>
<head><title>order conformation</title></head>
<body bgcolor="#fdd5b1">
<center>
<pre><strong>
<b> Your order is conformed </strong></pre>
<h2><b> THANK YOU....."~" Visit again</h2>
</center>
</body> </html>

OUTPUTS
1. PROGRAM

PREPARED BY NIRAJ SAH


Web technology date:-

2. PROGRAM

3. PROGRAM

4. PRGRAM

PREPARED BY NIRAJ SAH


Web technology date:-

5. PROGRAM

6. Program

7. program

PREPARED BY NIRAJ SAH


Web technology date:-

8. program

9. program

PREPARED BY NIRAJ SAH


Web technology date:-

10. Program

11. PROGRAM

PREPARED BY NIRAJ SAH


Web technology date:-

LAB-2

Develop and demonstrate the usage of inline, internal and external


style sheet using CSS.
Aim: Design a web page using CSS which includes the following:
1) Use different font styles
2) Control the repetition of image with background-repeat and no-repeat property
3) Define style for links as a: link, a: active, a: hover, a: visited
Add customized cursors for links

Source code

<html>
<head>
<style type="text/css">
body {
background-image:url('images/cse.png'); background-repeat:no-repeat;
background-position:center center; background-attachment:fixed;
background-color:#ab4e52;
}
a:link {text-decoration:underline;color:#00ced1;} a:visited
{text-decoration:underline;color:#ffd700;} a:hover {text-
decoration:underline;color:#blue;} a:active {text-
decoration:underline;color:purple;} h3 {color:#7cfc00;}

.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>

PREPARED BY NIRAJ SAH


Web technology date:-

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


</head>
<body bgcolor="oyan">
<h1 style=color:blue;text-align:center;">CSS (Inline, Internal and External) </h1>
<p> This paragraph is a not styled </p>
<p class="left"> This paragraph is styled by class "left"</p>
<p class="center"> This paragraph is styled by class "center"</p>
<p class="right"> This paragraph is styled by class "right"</p>
<b> This is normal Bold </b><br>
<b id="headline"> This Bold Text is styled </b>
<h2><b><a href=" "> This is a link </a></b></h2>
<h3 class="c1"> The cursor over this element is plus sign </h3>
<h3 class="c2"> The cursor over this element is a pointing hand </h3>
<h3 class="c3"> The cursor over this element is a grasping hand </h3>
<h3 class="c4"> The cursor over this element is a I bar </h3>
<h3 class="c5"> The cursor over this element is a wait </h3>
<h3 class="c5"> The cursor over this element is a question mark </h3>
</body> </HTML>

OUTPUT

PREPARED BY NIRAJ SAH


Web technology date:-

LAB 3
TITLE
. Write an HTML page that contains a selection box with a list of 5 ProvinceWhen the user selects a Province, its
capital should be
printed next in the list Add CSS tocustomize the properties of the font of the capital (color,bold and font size).

PROGRAMS
<html>

<head>

<title>WT Lab manual program no. 3</title>

</head>

<style>

h1

PREPARED BY NIRAJ SAH


Web technology date:-

color: #ff0800; text-

align: center;

.textbox1

color: #PINK; font-

size: 30px; font-

weight: bold;

</style>

<body bgcolor="#GREY">

<center>

<h1><i> Select the province to find its capital</h1></i>

<form name="myform">

Select province <select name="province" id="sbox1" onClick="myFunction()"


required>

<option value=""> </option>

<option value="Biratnagar">Province 1</option>

<option value="Janakpur">Province 2</option>

<option value="Hetauda">Bagmati province</option>

<option value="Pokhara"> Gandaki Province</option>

<option value="Deukhuri">Lumbini Province</option>

<option value="Birendranagar"> Karnali Province</option>

<option value="Godawari">Sudurpashchim Province</option>

</select><br><br>

Capital <input type="text" class="textbox1" id="sbox2">

</form>

</center> <script>

function

myFunction()

PREPARED BY NIRAJ SAH


Web technology date:-

{ var a=document.getElementById("sbox1").value;

document.getElementById("sbox2").value=a; }

</script> </body> </html>

OUTPUT

LAB-4
1. Write a XML program to validate student details(Rno, Name, college & branch)
using DTD and Schemas.

2. Write a XML program to validate book details( Title of the book, Author Name, ISBN no
& Publication) using DTD and Schemas

AIM: Design XML documents to demonstrate above criteria

PROGRAM 1:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE notes SYSTEM "details.dtd">

<notes>

<note>

<Name> niraj sah </Name>

<rollno> 14 </rollno>

<College> Model Multiple College </College>

<Branch> BCA </Branch>

PREPARED BY NIRAJ SAH


Web technology date:-

</note>

<note>

<Name> sonoo sah teli</Name>

<rollno> 24 </rollno>

<College> Model Multiple College </College>

<Branch> BCA </Branch>

</note>

<note>

<Name> abhishek thakur</Name>

<rollno> 9 </rollno>

<College> Model Multiple College </College>

<Branch> BCA </Branch>

</note>

</notes>

details.dtd:
<!ELEMENT notes(note+)>

<!ELEMENT notes(Name, rollno, College, Branch)>

<!ELEMENT Name(#PCDATA)>

<!ELEMENT roll no(#PCDATA)>

<!ELEMENT College(#PCDATA)>

<!ELEMENT Branch(#PCDATA)>

OUTPUT

PREPARED BY NIRAJ SAH


Web technology date:-

PROGRAM-2:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE books SYSTEM "books.dtd">

<books>

<book ISBN="978993">

<name> Web technology </name>

<author_name> Ramesh singh saud </author_name>

<author_name> Sravan ghimire </author_name>

<publication> KEC </publication>

</book>

<book ISBN="7724524">

<name> OOPS IN JAVA </name>

<author_name> Bhoj raj joshi </author_name>

<author_name> Bhupendra singh saud </author_name>

<publication> KEC </publication>

</book>

</books>

OUTPUT

PREPARED BY NIRAJ SAH


Web technology date:-

LAB-5

1. .Design login page (username, password, button, level to show message) using ASP
and insert username and password into table in database.
2. Display inserted data from database

PREPARED BY NIRAJ SAH


Web technology date:-

PROGRAM:- 1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="insert.aspx.cs"
Inherits="Insertdata.insert" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Insert Data into Table</title>
</head>
<body>
<form id="form1" runat="server">
<asp:Label ID="LabelMessage" runat="server" Text=""></asp:Label>
<div>
<asp:Label ID="LabelUsername" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="TextBoxUsername" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorUsername" runat="server"
ErrorMessage="Enter Username"
ControlToValidate="TextBoxUsername"></asp:RequiredFieldValidator>
</div>
<div>
<asp:Label ID="LabelPassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBoxPassword" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorPassword" runat="server"
ErrorMessage="Enter Password" ControlToValidate="TextBoxPassword"></asp:RequiredFieldValidator>
</div>
<asp:Button ID="ButtonSave" runat="server" Text="Save User" onclick="ButtonSave_Click" />

PREPARED BY NIRAJ SAH


Web technology date:-

<asp:SqlDataSource ID="SqlDataSource1" runat="server"


ConnectionString="<%$ ConnectionStrings:mycon %>"
SelectCommand="SELECT * FROM [usertable]"></asp:SqlDataSource>
</form>
</body>
</html>

Insert data .asx.cs :-

using System;
using System.Collections.Generic;
using System.Linq; using
System.Web; using
System.Web.UI; using
System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

namespace Insertdata
{
public partial class insert : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void ButtonSave_Click(object sender, EventArgs e)


{
string username = TextBoxUsername.Text;
string password = TextBoxPassword.Text; try
{
SqlConnection con=new
SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
con.Open();
string qry="insert into usertable values" +"('"+username +"','"+ password
+"')";

PREPARED BY NIRAJ SAH


Web technology date:-

Insert data .asx.cs :-

using System;
using System.Collections.Generic;
using System.Linq; using
System.Web; using
System.Web.UI; using
System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;

namespace Insertdata
{
public partial class insert : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

protected void ButtonSave_Click(object sender, EventArgs e)


{
string username =
TextBoxUsername.Text; string password =
TextBoxPassword.Text; try {
SqlConnection con=new
SqlConnection(ConfigurationManager.ConnectionStrings["mycon"].ToString());
con.Open();
string qry="insert into usertable values" +"('"+username +"','"+ password
+"')";
SqlCommand cmd=new SqlCommand(qry, con);
int row=cmd.ExecuteNonQuery();
if(row ==1)
{
LabelMessage.Text="Insert Success";
}
else
{

PREPARED BY NIRAJ SAH


Web technology date:-

LabelMessage.Text="Insert failed";
}
con.Close();
}
catch (Exception ex)
{
LabelMessage.Text=ex.Message;
} }}}

output

Niraj

PREPARED BY NIRAJ SAH

You might also like