Web Lab Sanju
Web Lab Sanju
(6-2-441-224-2019)
RECORD
BCA
(II YEAR – III SEM)
(2019 BATCH)
DEPARTMENT OF
HUMANITIES AND SOCIAL SCIENCE
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
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.
PROGRAM:
homepage.html:
<html>
<frameset rows="15%,9%,76%" bordercolor="pink">
<frameset cols="20%,80%" bordercolor="red">
<frame src="logo.html" scrolling="no">
<frame src="title.html" >
</frameset>
<frame src="menu.html" name="f2" scrolling="no">
<frameset cols="15%,85%" bordercolor="red">
<frame src=" branches.html" name="f31">
<frame src="homedes.html" name="f32">
</frameset> </frameset> </html>
logo.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(pink))
fixed; }
</style> </head>
<body>
<center><img src=" logo csc(youtube).png" width="150" height="120"><center>
</body>
</html>
title.html:
<html>
<head><style>body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(yellow))
fixed;
}
.gradient-text {
background-color: #CA4246;
background-image: linear-gradient(
45deg,
#CA4246 16.666%,
#E16541 16.666%,
#E16541 33.333%,
#F18F43 33.333%,
#F18F43 50%,
#8B9862 50%,
#8B9862 66.666%,
#476098 66.666%,
#476098 83.333%,
#A7489B 83.333%);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rainbow-text-simple-animation-rev 0.75s ease forwards;
.gradient-text:hover{
animation: rainbow-text-simple-animation 0.5s ease-in forwards;
}
@keyframes rainbow-text-simple-animation-rev {
0% {
Prepared by Sanjay Kumar Mahato
3|Page
background-size: 650%;
}
40% {
background-size: 650%;
}
100% {
background-size: 100%;
}
}
@keyframes rainbow-text-simple-animation {
0% {
background-size: 100%;
}
80% {
background-size: 650%;
}
100% {
background-size: 650%;
}
}
header {
margin-top: 1em;
margin-top: calc(50vh - 3em);
}
h1 {
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 2em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 605px;
}</style></head>
<body>
<header>
<h1 class="gradient-text">ONLINE BOOK SHOP</h1>
</header>
</body>
</html>
Prepared by Sanjay Kumar Mahato
4|Page
menu.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightyellow), to(red)) fixed;
}</style></head>
<body>
<table width="100%">
<tr>
<td> <a href="homedes.html" target="f32"><font color="blue">Home </font></a></td>
<td> <a href="login.html" target="f32"><font color="blue">Login</font> </a></td>
<td> <a href="registration.html" target="f32"><font color="blue">Registration</font></a></td>
<td> <a href="catalogue.html" target="f32"><font color="blue">Catalogue</font></a></td>
<td> <a href="cart.html" target="f32"><font color="blue">Cart</font> </a></td>
</tr>
</table>
</body>
</html>
homedes.html:
<html>
<head><style>
body {
background: -webkit-gradient(linear, left top, left bottom, from(lightgreen), to(yellow)) fixed;
}
h1 {
font-family: "Archivo Black", sans-serif;
font-weight: normal;
font-size: 6em;
text-align: center;
margin-bottom: 0;
margin-bottom: -0.25em;
display: block;
margin-left: auto;
margin-right: auto;
cursor: pointer;
width: 605px;
}
.rainbow-text {
background: yellow;
background-color: red;
background: conic-gradient(
#CA4246 16.666%,
#E16541 16.666%,
#E16541 33.333%,
#F18F43 33.333%,
#F18F43 50%,
#8B9862 50%,
#8B9862 66.666%,
#476098 66.666%,
#476098 83.333%,
Prepared by Sanjay Kumar Mahato
5|Page
#A7489B 83.333%);
background-size: 57%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
cursor: pointer;
}
.rainbow-text:hover {
animation: rainbow-text-animation 0.5s ease forwards;
}
@keyframes rainbow-text-animation {
0% {
background-size: 57%;
background-position: 0 0;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 300%;
background-position: -9em 1em;
}
}
@keyframes rainbow-text-animation-rev {
0% {
background-size: 300%;
background-position: -9em 1em;
}
20% {
background-size: 57%;
background-position: 0 1em;
}
100% {
background-size: 57%;
background-position: 0 0;
}
}
</style>
</head>
<body>
<h1 class="rainbow-text">ONLINE BOOK SHOP</h1><br><br>
<p align="center"><font size="7">This website contains various books.</font></p>
</body></html>
login.html:
<html>
<head> <title> Login Page </title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(lightgreen)) fixed;
}</style>
</head>
<body>
<form name="login">
<h3> <u> Login Page </u> </h3>
username: <input type="text" name="uname" placeholder="enter username"><br>
password: <input type="password" name="pwd" placeholder="enter password"><br>
<input type="submit" value="Submit" >
<input type="reset" value="reset">
</center> </form>
</body></html>
registration.html:
<html>
<head><title>Registration Form</title>
<style>
body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(lightblue)) fixed;
}</style>
</head>
<body bgcolor="pink">
<center><font color="red" size="6" face="arial"><b>Registration Form</b></font></center><br />
<form action="submiting.html">
First Name<font color="red">*</font>
<input type='text' id='firstname' placeholder="Enter your first name" /><br /><br />
submiting.html:
<html>
<head>
<title>submiting
</title></head>
<body bgcolor="pink"><font color="red"><b>Your form is successfully submitted!</b></font>
<br><p align="center"><a href="registration.html">Go to Form</a></p>
</body>
</html>
catalogue.html:
<html>
<head>
<title> Catalogue </title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(lightblue), to(pink)) fixed;
}</style>
</head>
<body bgcolor="pink">
<form action="order.html">
<table border="1" width="100%">
<tr>
<td>
<img src="mathematics.jpg" width=100 height=100/>
</td>
<td> Book: A Textbook of Mathematics-I For BCA First Semester<br> Author:Dr. Durga Jang K.C., Ganga D.C,
Khagendra Adhikari, Ramesh Gautam,Tek Bahadur Budhathoki <br> Publication:Heritage Publications
</td> <td>Rs.405 </td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
<tr>
<td> <img src="m.jpg" width=100 height=100/></td>
<td> Book: A Text Book Of Mathematics-Ii For Bca Second Semester <br> Author:Dr.Durga Jang K.C,Ramesh
Gautam,Tek Bahadur Budhathoki <br> Publication:Heritage Publications</td> <td> Rs.425
</td>
<td> <input type="submit" value="Add to cart"/></td> </tr>
</table> </form>
</body> </html>
cart.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(pink), to(yellow)) fixed;
}</style></head>
<body bgcolor="pink">
<table style="background-color: gold; width: 80%; margin: 0 auto; border: 2px solid blue">
<colgroup>
<col style="background-color: blue">
<col style="background-color: red">
<col style="background-color: green">
<col style="background-color: yellow">
</colgroup>
<tr>
<td><b><font color="white">Book name</font></b></td>
<td><b><font color="white">Price</font></b></td>
<td><b><font color="yellow">Quantity</font></b></td>
<td><b><font color="red">Amount</font></b></td>
</tr>
<tr>
<td><i>Mathematics-I</i></td>
<td><i>Rs.405</i></td>
<td><i>2</i></td>
<td><i>Rs.810</i></td>
</tr>
<tr>
<td><i>Mathematics-II</i></td>
<td><i>Rs.425</i></td>
<td><i>1</i></td>
<td><i>Rs.425</i></td>
</tr> <tr>
<td></td>
<td></td>
<td><b><font color="white">Total amount </font></b></td>
<td>Rs.1235 </td>
</tr>
<marquee><b><font color="red" size="5">Here are the some of books and their price availabe in our Online
Store</font></b></marquee> <br/><br/>
</body>
</html>
branches.html:
<html>
<head><style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red)) fixed;
}</style></head>
<body>
<table cellspacing=15>
<tr><td> <a href="bca.html" target="f32">BCA </a></td></tr>
<tr><td><a href="bsccsit.html" target="f32"> Bsc.CSIT </a> </td></tr>
<tr><td><a href="btech.html" target="f32">B-tech </a></td></tr>
Prepared by Sanjay Kumar Mahato
9|Page
</table>
</body>
</html>
bca.html:
<html>
<head><title>BCA</title>
<style> body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(cyan)) fixed;
}</style>
</head>
<body bgcolor="cyan">
<center><font color="blue"><h1>Bachelore of Computer Applications</h1></font></center>
<br>
<table align="center">
<tr>
<td>Semester</td>
<td>
<select >
<option value="select the semester" selected>Select the semester
<option value="First semester">First semester
<option value="Second semester">Second semester
<option value="Third semester">Third semester
<option value="Fourth semester">Fourth semester
<option value="Fifth semester">Fifth semester
<option value="Sixth semester">Sixth semester
<option value="Seventh semester">Seventh semester
<option value="Eight semester">Eight semester
</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> Cost of one book is"700" + shipping "100" </pre>
</center>
</body>
</html>
bsccsit.html:
<html>
Prepared by Sanjay Kumar Mahato
10 | P a g e
<body bgcolor="Plum">
<h1><font color="blue">Bachelor of computer science and information technology</font></h1>
<h2>
<ul>
<li>Digital Logic</li> <li>Core java</li> <li>DBMS</li>
</ul>
</h2>
</body>
</html>
btech.html:
<html>
<body bgcolor="Plum">
<h1><font color="blue">Bachelor of Technology</font></h1>
<h2>
<ul type="square">
<li>C programming</li>
<li>Advance java</li>
<li>Python programming</li>
</ul>
</h2>
</body>
</html>
Outputs:
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
4) Add customized cursors for links.
PROGRAM:
style.css
p.left
{
text-align:left;
color:blue;
font-family:Cambria;
font-size:large;
text-indent:20px;
}
p.center
{
text-align:center;
text-decoration:underline;
text-transform:uppercase;
letter-spacing:-3px;
word-spacing:20px;
font-size:larger;
}
p.right
{
text-align:right;
color:red;
font-family:Tahoma;
font-size:15pt;
text-decoration:overline;
font-style:italic;
}
b#headline
{
color:orange;
font-size:22px;
font-
family:arial;
text-decoration:underline;
}
lab-2.html
<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:pink;
}
a:link { text-decoration:none;color:orange; } a:visited { text-decoration:none;color:red; }
a:hover { text-decoration:underline;color:blue; }
a:active { text-decoration:underline;color:purple; }
h3 { color:green; }
.c1{cursor:crosshair}
.c2{cursor:pointer}
.c3{cursor:move}
.c4{cursor:text}
.c5{cursor:wait}
.c6{cursor:help}
</style>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="cyan">
<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="c6">The cursor over this element is a question mark</h3>
</html>
OUTPUT 1:
LAB - 3:
Write an HTML page that contains a selection box with a list of 5 Province. When the user selects a
Province, its capital should be printed next in the list. Add CSS to customize the properties of the
font of the capital (color,bold and font size).
Lab-3.html:
<html>
<head>
<title>WT Lab manual program no. 3</title>
</head>
<style>
h1
{
color: white;
text-align: center;
}
.textbox1
{
color: purple;
font-size: 30px;
font-weight: bold;
}
body {
background: -webkit-gradient(linear, left top, left bottom, from(yellow), to(red)) fixed;
}
</style>
<body bgcolor="pink">
<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>
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
Lab41.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE notes SYSTEM "details.dtd">
<notes>
<note>
<Name> Sanjay Kumar Mahato </Name>
<rollno> 21 </rollno>
<College> Model Multiple College </College>
<Branch> BCA </Branch>
</note>
<note>
<Name> Rajan Kumar Mahato </Name>
<rollno> 20 </rollno>
<College> Model Multiple College </College>
<Branch> BCA </Branch>
</note>
<note>
<Name> Rajesh Kumar Mahato </Name>
<rollno> 212 </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:
Lab42.xml:
<?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>
books.dtd:
<!ELEMENT books(book+)>
<!ELEMENT book(name,author_name,publication)>
<!ELEMENT name(#PCDATA)>
<!ELEMENT author_name(#PCDATA)>
<!ELEMENT publication(#PCDATA)>
<!ATTLIST book ISBN CDATA #REQUIRED>
Output:
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
Source code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="insert.aspx.cs" Inherits="Insertdata.insert" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Insert Data into Table</title>
</head>
<body>
Prepared by Sanjay Kumar Mahato
23 | P a g e
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)
{
Output:-