Vineet WT File

VINEET PANDEY BCA E2
GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY
COURSE – BCA (1ST YEAR)

SEMESTER 1
WEB TECHNOLOGY
SUBJECT CODE: BCA-105P
LAB FILE
Submitted To: Submitted By:

Ms. Sarita Name: VINEET PANDEY
(Assistant Professor) Enrollment no.: 08924402024
Class & Section: BCA E2
INSTITUTE OF INNOVATIONIN
TECHNOLOGY & MANAGEMENT
08924402024
INDEX
S.NO. PROBLEM STATEMENT PAGE DATE SIGNATURE

Make five different web pages using:
1. i. Formatting styles and Headings:
Include Bold, Italics, Underline,
Strike, Subscript, superscript and
all six types of headings.
ii. Font Styles and Image tag.
- iii. Marquee: Move text, image and
hyperlink
iv. Other tags: br, hr, pre, p
Include following specifications:
 In all these web pages only mention
5. about use, attributes apply them.
 Insert a background image on home
page.
 Make all the topics as hyperlinks and
go to some other page for description.
 Insert a marquee showing HTML
Tutorial as moving text.
 Use different font style for different
topics.
 On every page, make a hyperlink for
going back to home page and internal
link also.
6. Create an unordered list nested inside ordered

list and apply the following:
 Insert an image of Main item on top
right corner of web page.
 Display heading as a marquee.
 Use different font styles and colors for
different ordered list items.
 Insert horizontal line after each
ordered item.
7. Design a table for your Time Table with row

span and column span and make use of
attributes colspan, rowspan, width, height,
cellpadding, cellspacing etc.
8. Design a frame
08924402024
9. Make an image map showing the usage of

shape, cords, href attributes in map definition.
Link each hotspot to their respective details.
All the web pages should be designed with
proper background color, images, font styles
and headings.
10. Design Student registration form for
admission in college.
11. Create a webpage and show the usage of

inline and internal style sheet and external
style sheet.
12. Create a webpage containing a background

image and apply all the background styling
attributes.
13. Create a webpage showing the usage of font

styling attributes.
14. Create a webpage and apply all text styling

attributes, use id and class selector.
15. Create a webpage and implement all list

styling attributes.
16. Create a webpage with three equal columns.
17. Create a webpage containing bootstrap table.
18. Create a webpage containing various types of

images.
08924402024
19. Create a webpage containing various types of

buttons.
20. Create a webpage containing various

typography classes.
21. Create a webpage containing to display the

heading using Jumbotron.
22. Write a program to show the usage of inbuilt

functions & dialog boxes.
23. Write a program to show the usage of alert

box and confirm box.
24. Write a program to implement event handling

using onclick, onmousehover, and
onmouseout events.
25. Write a program to show the usage of all the

date, math and string object functions.
26. Design a website and apply all the features of

Html, Css, JavaScript and Bootstrap to make
the website attractive.
27. Write a JavaScript function that creates a

table, accept row, column numbers from the
user, and input row-column number as content
(e.g. Row-0 Column-0) of a cell.
28. Design the registration form for a web site

and when the user clicks on submit button the
login form should be appeared on the screen
(use external javascript file).
08924402024
Q1-5. Make five different web pages using the following:

On every page, make a hyperlink for going back to home page and internal link also.
Include following specifications:
 In all these web pages only mention about use, attributes apply them.
 Insert a background image on home page.
 Make all the topics as hyperlinks and go to some other page for description.
 Insert a marquee showing HTML Tutorial as moving text.
 Use different font style for different topics.
 Formatting styles and Headings: Include Bold, Italics,

Underline, Strike, Subscript, and all six types of headings.
CODING:
<html>
<head>
<title>
Q1
</title>
</head>
<body>
<b>Bold</b> <br>
<i>Italics</i> <br>
<u>Underline</u> <br>
<s>Strike</s> <br>
H<sub>2</sub>O <br>
E=mc<sup>2</sup> <br>
<H1>This is heading one.</H1>
<H2>This is heading two.</H2>
<H3>This is heading three.</H3>
<H4>This is heding four.</H4>
<H5>This is heading five.</H5>
<H6>This is heading six.</H6>
</body>
</html>
08924402024
OUTPUT:
 Font styles and Image tag.

CODING:
<html>
<head>
Q2
</head>
<body>
<h1 style="font-family:Arial;">This is heading 1
using 'ARIAL' font.</h1>
<p style="font-family:Times New Roman;">This is a
paragraph where 'Times New Roaman' font is used.</p> <br>
<img src="C:\Users\Admin\Downloads\coderslife.jpeg"
height="200" width="250">
</body>
</html>
OUTPUT:
08924402024
 Marquee Tag & Hyperlink

CODE:
<HTML>
<HEAD>
<TITLE>Q1 III: MEGHA</TITLE>
</HEAD>
<BODY>
<h1> <MARQUEE>This is the marquee tag which moves.</MARQUEE></h1>
<a href="p.html">Return Home</a>
</BODY>
</HTML>
OUTPUT:
 Other tags: hr, br, pre..
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Other Tags: MEGHA</title>
<style>
h1{
font-size:40px;
08924402024
color:crimson;
h2{
font-size:30px;
p{
font-size:25px;
a{
font-size: 30px;
</style>
</head>
<body>
<h1>Other Tags</h1>
<h2>Line Break Tag</h2>
<p>for example:</p>
<p>The future <br>
belongs to those<br>
who believe of their<br>
dreams.</p>
<h2>Horizontal Line</h2>
<hr size="5" color="black">
<br>
<h2>Paragraph Tag</h2>
<p> this is a sample paragraph that contains
a lot of lines.
this is sample paragraph that contains a
lot of lines. </p>
<h2>Preformatted Tag</h2>
<pre> Text in a pre element is
08924402024
displayed in a fixed width and font,
and it preserves both spaces and line breaks.
</pre>
<a href="index.html">GO TO HOME PAGE</a>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 6:
Create an unordered list nested inside an ordered list and apply the
following:
 Insert an image of the Main item on the top right corner of
the web page.
 Display heading as a marquee.
 Use different font styles and colors for different ordered list
items.
 Insert a horizontal line after each ordered item.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>PROGRAM 6: MEGHA</title>
<style>
h1{
font-size: 40px;
color: rgb(128, 128, 156);
}
li{
font-size: 30px;
}
</style>
</head>
<img src="C:\Users\Admin\Downloads\html logo.jpeg"
alt="Practical file"
style="position: absolute; top: 10px; right: 10px;
width: 100px; height: 100px;">
<marquee><h1>NESTED LIST: PROGRAM 6</h1></marquee>
<ol type="I">
<li style="color: rgb(28, 59, 117));">Ordered List
Item 1</li>
<ul>
<li style="color: rgb(197, 226, 93);">Unordered
SubItem A</li>
08924402024
<li style="color:blueviolet">Unordered
SubItem B</li>
</ul>
<hr size="4" color="black">
<li style="color:rgb(91, 201, 201)">Ordered List Item
2</li>
<ul>
<li style="color:rgb(192, 178, 54)">Unordered SubItem
A</li>
<li style="color:rgb(87, 173, 87)"> Unordered
SubItem B</li>
</ul>
<hr size="4" color="bakerschocolate">
<li style="color:rgb(85, 14, 14)">Ordered List Item 3</li>
<ul>
<li style="color:rgb(99, 173, 173)">Unordered
SubItem A</li>
<li style="color:rgb(224, 194, 116)">Unordered
Sub Item B</li>
</ul>
</ol>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 7:
Design a table with row span and column span and use attributes
like colspan, rowspan, width, height, cell padding, cell spacing, etc.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Table Q3: MEGHA</title>
<style>
table,th,td{
border:solid black;
border-width: 3px;
}
</style>
</head>
<body>
<H1><CENTER>PROGRAM 7:
<U>TABLE TAG AND IT'S ATTRIBUTES</U></CENTER></H1>
<table border="2" cellpadding="5" align="center">
<tr>
<th>Days</th>
<th>10-11 am</th>
<th>11-12 noon</th>
<th rowspan="4"><pre> <font size="5">
B
R
E
A
K
</font></pre></th>
<th>1-2 pm</th>
<th>2-3 pm</th>
</tr>
<tr>
<td>Monday</td>
<td>WEB TECHNOLOGY</td>
<td>C PROGRAMMING</td>
<td>DISCRETE MATHS</td>
08924402024
</tr>
<tr>
<td>Tuesday</td>
<td colspan="2">WT LAB</td>
<td>DISCRETE MATHS</td>
</tr>
<tr>
<td>Wednesday</td>
<td>WEB TECHNOLOGY</td>
<td>FIT</td>
<td colspan="2">FIT LAB</td>
</tr>
</table>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 8:
Design the following frames:
MAIN MENU
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main menu program 8 : MEGHA</title>
<style>
h1{
font-size:40px;
}
p{
font-size: 40px;
}
</style>
</head>
<body>
<br>
<br>
<h1>Main Menu</h1>
<p><u>Topic 1</u></p>
</body>
</html>
08924402024
EXPLANATION PAGE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{
font-size: 40px;
}
</style>
</head>
<body>
<br>
<p>Explanation</p>
<p> </p>
<p> </p>
<p><u>View Example</u></p>
</body>
</html>
EXAMPLE PAGE
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
p{
font-size:40px;
text-align:center;
}
</style>
</head>
<body>
<p>Example</p>
</body>
</html>
08924402024
FRAMES
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Program 7: MEGHA</title>
</head>
<frameset rows="100%">
<frameset cols="50%,50%"
<frame src="menu.html">
<frameset rows="70%,30%">
<frame src="explanation.html">
<frame src="example.html">
</frameset>
</frameset>
</frameset>
</html>
OUTPUT:
08924402024
PROGRAM 9:
Make an image map showing the usage of shapes, chords, and href
attributes in the map definition. Link each hotspot to their
respective details. All the web pages should be designed with
proper background color, images, font styles, and headings.
CODING:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Image Map Example: MEGHA</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
section {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Image Map Example</h1>
</header>
<section>
<img src="C:\Users\Admin\Downloads\socials.jpeg"
height="250" width="300" alt="Image Map" usemap="#map">
<map name="map">
08924402024
<area shape="circle"
coords="93,87,57"
href="https://www.youtube.com/" >
<area shape="rect"
coords="31,204,152,327"
href="https://twitter.com/?lang=en">
<area shape="poly"
coords="225,217,239,229"
href="https://www.facebook.com/">
<area shape="rect"
coords="218,44,343,129"
href="https://www.instagram.com/">
</map>
</section>
</body>
</html>
OUTPUT:
 When clicked on YouTube logo
08924402024
 When clicked on Twitter logo
 When clicked on Facebook Logo
 When clicked on Instagram Logo
08924402024
PROGRAM 10:
Design student registration forms for college admission.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
h1{
color:rgb(19, 18, 18);
text-align:center;
font-size: 30px;;
}
body{
background-color:rgba(218, 195, 224, 0.856);
}
label{
font-size: 25px;
color:rgb(17, 12, 12);
}
</style>
</head>
<body>
<h1>STUDENTS’ REGISTRATION FORM</h1>
<form>
<label> Firstname: </label>
<input type="text" name="firstname"
size="15" placeholder="Enter your full name"/> <br>
<BR>
<label>
Course :
</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
08924402024
<option value="BBA LLB">BBA LLB</option>

<option value="MBA">MBA</option>
<option value="BJMC">BJMC</option>
<option value="Eco.h">Eco.h</option>
</select>
<br> <br>
<label>
Gender :
<br>
<input type="radio" name="Gender"/>
Male <br>
Female <br>
Other
</label>
<br> <br>
<label>
Phone Number:
<input type="text" name="country code"
value="+91" size="2"/>
<input type="text" name="phone"
size="10"/> <br> <br>
</label>
<label>
Address :
<br>
<textarea cols="50" rows="3"
value="address">
</textarea>
</label>
<br> <br>
<label>
Email:
<input type="email" id="email"
name="email"/> <br>
</label>
<br> <br>
<label>
Password:
<input type="Password" id="pass"
name="pass"> <br>
08924402024
</label>
<br>
<input type="button" value="Submit">
<input type="Reset">
</form>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 11:
Create a webpage and show the usage of inline and
internal style sheet and external style sheet.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="STYLE.css">
<style>
.head{
color:blueviolet;
font-size: 50px;
}
</style>
</head>
<body>
<h1 style="color:blue ;font-size:50px ;">This
is inline css</h1>
<br>
<hr style="height: 4px; background-color:black; ">
<br>
<h1 class="head" >This is internal css</h1>
<br>
<hr style="height: 4px; background-color:black; ">
<h1 id="head1">This is external css</h1>
</body>
</html>
STYLE.CSS
#head1{
font-size:50px;
color:green;
}
08924402024
OUTPUT:
08924402024
PROGRAM 12:
Create a webpage containing a background image and apply all the
background styling attributes.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q8</title>
<style>
body{
background-
image:url('C:\Users\Admin\Downloads\Flowers.jpeg');
background-position:150px 90px ;
background-repeat: no-repeat;
background-size:750px;
background-origin: padding-box;
}
</style>
</head>
<body>
<h1 style="color:rgba(167, 49, 72, 0.363);font-
size:40px;"> this is the
background image </h1>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 13:
Create a web page showing the usage of font styling attributes.
CODE:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: #FCF5ED;
}
.normal{
font-style:normal;
font-size: 50px;
color:#1F1717
}
.italic{ font-style: italic;
font-size:50px;
color:#CE5A67
}
.oblique{ font-style: oblique;
font-size:50px;
color:#363062
}
</style></head>
<body>
<p class="normal">This is the Normal Font Styling.</p>
<p class="italic">This is the italic Font Styling.</p>
<p class="oblique">This is the oblique Font
styling.</p>
</body>
</html>
08924402024
OUTPUT:
08924402024
PROGRAM 14:
Create a web page and apply all Text styling attributes use Id and
class selector.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-color:#FDF0F0;
margin: 30px;
font-size: 40px;
line-height: 60px;
color:#132043
}
.text-color {
color:#190482
}
#text-decoration {
text-decoration: underline;
}
.text-transformation {
text-transform: capitalize;
}
.text-direction {
direction:rtl;
}
#text-shadow{
text-shadow:2px 2px rgb(255, 0, 0);
}
</style>
</head>
<body>
<div class="text-color">
This attribute will change the text color
</div>
<div id="text-decoration">
This attribute will provide underline in text
08924402024
</div>
<div class="text-transformation">
This attribute will change the lowercase alphabets into
capitalize alphabets
</div>
<div class="text-direction">
This attribute will change the direction of text
</div>
<div id="text-shadow">
This attribute will change the text shadow color
</div>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 15:
Create a webpage and implement all list styling attributes.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
body{
background-color:#FCE09B;
}
#OL{
color:#610C9F; font-weight:bold;
font-size:30px
}
#ol{
font-size:25px;
color:#DA0C81
}
#ul{ font-size:25px;
color:#ad2545
}
#ol1{
font-size:25px;
color:#3D0C11
}
</style>
</head>
<body>
<h1 style="color:rgb(39, 95, 39);font-
size:45px;">CATEGORIES OF COMPUTER</h1>
<ol type="I" id="OL">
<li>By Data Processing:</li>
<ol type="a" id="ol">
<li>Digital</li>
<li>Hybrid</li>
</ol>
08924402024
<br>
<li>By size:</li>
<ul type="disc" id="ul">
<li>Microcomputers</li>
<li>Minicomputers</li>
<li>MainFrames</li>
</ul>
<br>
<li>By Purpose:</li>
<ol type="i" id="ol1">
<li>General Purpose</li>
<li>Special Purpose</li>
</ol>
</ol>
</ol>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 16:
Create a webpage with three equal columns.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5
.2/css/bootstrap.min.css">
</head>
<body>
<h1><center>THREE EQUAL
COLUMNS</center></h1>
<BR>
<div class="container">
<div class="row">
<div class="col-4">
<h3>Column 1</h3>
<p>This is the content of first
column.</p>
</div>
<div class="col-4">
<h3>Column 2</h3>
<p>This is the content of
second column.</p>
</div>
<div class="col-4">
<h3>Column 3</h3>
<p>This is the content of third
column.</p>
</div>
</div>
</div>
</body>
</html>
08924402024
OUTPUT:
08924402024
PROGRAM 17:
Create a webpage containing bootstrap table.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dis
t/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-
T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwyk
c2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<h2 style="text-align:center"><Caption>Table-
Employee</Caption></h2>
<table class="table table-striped table-bordered ">
<thead>
<th>Serial No.</th>
<th> Employee Name</th>
<th> Salary</th>
<th>City</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Shaili Dashora</td>
<td>50,000</td>
<td>Bangalore</td>
</tr>
<tr>
<td>2</td>
<td>Sourabh Somani</td>
<td>1,20,000</td>
<td>Delhi</td>
</tr>
<tr>
<td>3</td>
<td>Milan</td>
08924402024
<td>40,000</td>
<td>Udaipur</td>
</tr>
<tr>
<td>4</td>
<td>Kumkum</td>
<td>30,000</td>
<td>Bangalore</td>
</tr>
</tbody>
</table>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 18:
Create a webpage containing various types of images.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<link
integrity="sha384-
<style>
body{
background-color:bisque
}
</style>
</head>
<body>
<h1 style="text-align: center;">Types Of
Images</h1>
<br>
<div class="Container">
<h2>1. Rounded Corners</h2>
<img src="C:\Users\Admin\Downloads\koala.jpg"
class="rounded"
alt="KOALA" width="300">
08924402024
<br>
<br>
<h2>2. Circle</h2>
<img src="C:\Users\Admin\Downloads\fruits.jpg"
class="rounded-circle" alt="fruits" width="300">
<br>
<br>
<h2>3. Thumbnail</h2>
<img src="C:\Users\Admin\Downloads\Butterfly.jpeg"
class="img-thumbnail" alt="Butterfly" width="300">
</div>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 19:
Create a webpage containing various types of buttons.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
t/css/bootstrap.min.css">
</head>
<body>
<h2>Types Of Buttons</h2>
<br>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-
primary">Primary</button>
secondary">Secondary</button>
success">Success</button>
<button type="button" class="btn btn-info">Info</button>
warning">Warning</button>
danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
</body>
</html>
08924402024
OUTPUT:
08924402024
PROGRAM 20:
Create a webpage containing various typography classes.
CODE:
<!DOCTYPE html>
<html>
<head>
<link
integrity="sha384-
</head>
<body>
<h1><b>TYPOGRAPHY CLASSES</b></h1>
<br>
<h2>I. <u>HTML Headings</u></h2>
<h1>h1.heading 1 </h1>
<h4>h4.heading 4</h4>
</div>
<br>
<h2>II. <u>Text Alignment</u></h2>
<p class="text-start">Left aligned text</p>
<p class="text-center">Center align text</p>
<p class="text-end">Right aligned text</p>
</div>
<br>
<h2>III. <u>Highlighted text</u></h2>
<p>Use the mark element to <mark>highlight</mark>
text.</p>
</div>
08924402024
<br>
<h2>IV. <u>Text Transform</u> </h2>
<p class="text-lowercase">The quick brown fox jumps
over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps
<p class="text-capitalize">The quick brown fox jumps
</div>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 21:
Create a webpage containing to display the heading using
Jumbotron.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/
css/bootstrap.min.css">
</head>
<body>
<div class="jumbotron">
<h1>Heading</h1>
<p>This is the section heading.</p>
</div>
<p>This is a random text.</p>
<p>This is another text.</p>
</div>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 22:
Write a program to show the usage of inbuilt functions and dialog
boxes.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
h1{
color:darkslategray;
}
p{
color:rgb(49, 58, 112), 100);
font-size: 20px;
}
</style>
</head>
<body>
<h1>Function in javascript</h1>
<p>Enter 2 numbers to add:</p>
<button onclick="enterNumbers()">Enter
Numbers</button>
<br>
<br>
<Script>
var num1, num2;
function enterNumbers() {
num1 = parseInt(prompt("Enter number
1:"));
num2 = parseInt(prompt("Enter number
2:"));
add();
}
function add() {
if (!isNaN(num1) && !isNaN(num2)) {
var result = num1 + num2;
alert("The sum is: " + result);
} else {
08924402024
alert("Please enter valid numbers.");

}
}
</Script>
</body>
</html>
OUTPUT:
08924402024
PROGRAM 23:
Write a program to show the usage of alert box and confirm box.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Q23</title>
</head>
<body>
<h1>Alert and Confirm Box example</h1>
<button onclick="showAlert()">Show Alert
Box</button>
<button onclick="showConfirm()">Show Confirm
Box</button>
<script>
function showAlert(){
alert("This is an alert box!");
}
function showConfirm(){
var result=confirm("Do you want
to proceed?");}
if:(result){
alert("You clicked OK!");
}
else{
alert("You clicked Cancel");
}
}
</script>
</body>
</html>
08924402024
OUTPUT:
08924402024
PROGRAM 24:
Write a program to implement event handling using onclick,
onmouseover and onmouseout events.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
.highlight {
color: red;
font-weight: bold;
cursor: pointer;
}
</style>
<script>
function onClickEvent() {
alert("Button Clicked!");
}
function onMouseOverEvent() {
document.getElementById("demoText").classList.add("highl
ight");
}
function onMouseOutEvent() {
document.getElementById("demoText").classList.remove("hi
ghlight");
}
</script>
</head>
<body>
<button onclick="onClickEvent()" onmouseover="onMouseOverEvent()"

onmouseout="onMouseOutEvent()">Click Me</button>
<p id="demoText">Hover over the button to see the effect.</p>
</body>
</html>
08924402024
OUTPUT:
08924402024
PROGRAM 25:
Write a program to show the usage of all the date, math and string
object functions.
CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>PROGRAM:MEGHA</title>
<script>
function demonstrateDateFunctions() {
// Date Object
const currentDate = new Date();
console.log("Current Date:", currentDate);
const year = currentDate.getFullYear();

console.log("Current Year:", year);
}
function demonstrateMathFunctions() {
// Math Object
const randomNumber = Math.random(); // Generates a
random number between 0 and 1
console.log("Random Number:", randomNumber);
const squareRoot = Math.sqrt(25); // Calculates the

square root
console.log("Square Root:", squareRoot);
}
08924402024
function demonstrateStringFunctions() {
// String Object
const originalString = "Hello, World!";
const uppercaseString = originalString.toUpperCase(); //
Converts to uppercase
console.log("Uppercase String:", uppercaseString);
const substringExample = originalString.substring(0, 5); //

Extracts substring
console.log("Substring:", substringExample);
}
</script>
</head>
<body>
<button onclick="demonstrateDateFunctions()">Demonstrate Date
Functions</button>
<button onclick="demonstrateMathFunctions()">Demonstrate Math
Functions</button>
<button onclick="demonstrateStringFunctions()">Demonstrate String
Functions</button>


</body>
</html>
OUTPUT:
08924402024
PROGRAM 26:
Design a website and apply all the features of Html, Css, JavaScript
and Bootstrap to make the website attractive.
CODE:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Megha's Attractive Website</title>
<link rel="stylesheet" href="styles.css">

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
" rel="stylesheet">
</head>
<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Megha's Attractive Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-

only">(current)</span></a>
</li>
08924402024
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>

<section id="hero" class="text-center">
<h1 class="display-4">Welcome to My Attractive Website!</h1>
<p class="lead">Explore the amazing features and content I have to

offer.</p>
</div>
</section>

<section id="features" class="bg-light py-5">
<div class="row">
<div class="col-md-4 mb-4">
<div class="card">
<img src="C:\Users\Admin\Downloads\fruits.jpg"
class="card-img-top" alt="Feature 1">
<div class="card-body">
<h5 class="card-title">Aesthetic Templates</h5>
<p class="card-text">Get aesthetic varieties of

templates here!</p>
</div>
08924402024
</div>
</div>

</div>
</div>
</section>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"><
/script>

<script src="script.js"></script>
</body>
</html>
CSS FILE:
body {
font-family: 'Arial', sans-serif;
#hero {
background: url('hero-bg.jpg') center/cover no-repeat;
color: #fff;
padding: 100px 0;
#features {
text-align: center;
08924402024
.card {
transition: transform 0.3s;
.card:hover {
transform: scale(1.05);
OUTPUT:
08924402024
PROGRAM 27:
Write a JavaScript function that creates a table, accept row, column
numbers from the user, and input row-column number as content
(e.g. Row-0 Column-0) of a cell.
CODE:
function createTable() {
// Get user input for row and column numbers
var rows = prompt("Enter the number of rows:");
var columns = prompt("Enter the number of columns:");
// Create table element
var table = document.createElement("table");
// Create rows and columns with input content
for (var i = 0; i < rows; i++) {
var row = table.insertRow(i);
for (var j = 0; j < columns; j++) {
var cell = row.insertCell(j);
cell.textContent = "row-" + i + ", column-" + j;

}
// Append the table to the body or any other desired container
document.body.appendChild(table);
// Call the function to create the table
createTable();
08924402024
PROGRAM 28:
Design the registration form for a web site and when the user clicks
on submit button the login form should be appeared on the screen
(use external javascript file).
CODE:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Registration: MEGHA</title>
<script src="script.js" defer></script>
</head>
<body>
<h2>User Registration</h2>
<form id="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<br>
<button type="button" onclick="submitRegistration()">Submit</button>
</form>
08924402024
<div id="loginForm" style="display: none;">
<h2>Login</h2>
<form>
<label for="loginUsername">Username:</label>
<input type="text" id="loginUsername" name="loginUsername"

required><br>
<label for="loginPassword">Password:</label>
<input type="password" id="loginPassword" name="loginPassword"

required><br>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
SCRIPT.JS
function submitRegistration() {
// Perform registration logic here
// Display the login form
document.getElementById("registrationForm").style.display = "none";
document.getElementById("loginForm").style.display = "block";
08924402024
OUTPUT:
After we click on SUBMIT
08924402024

Vineet WT File

Uploaded by

Copyright:

Available Formats

Vineet WT File

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Vineet WT File

Uploaded by

Copyright:

Available Formats

VINEET PANDEY BCA E2

GURU GOBIND SINGH INDRAPRASTHA UNIVERSITY

COURSE – BCA (1ST YEAR)

Submitted To: Submitted By:

S.NO. PROBLEM STATEMENT PAGE DATE SIGNATURE

6. Create an unordered list nested inside ordered

7. Design a table for your Time Table with row

9. Make an image map showing the usage of

11. Create a webpage and show the usage of

12. Create a webpage containing a background

13. Create a webpage showing the usage of font

14. Create a webpage and apply all text styling

15. Create a webpage and implement all list

16. Create a webpage with three equal columns.

17. Create a webpage containing bootstrap table.

18. Create a webpage containing various types of

19. Create a webpage containing various types of

20. Create a webpage containing various

21. Create a webpage containing to display the

22. Write a program to show the usage of inbuilt

23. Write a program to show the usage of alert

24. Write a program to implement event handling

25. Write a program to show the usage of all the

26. Design a website and apply all the features of

27. Write a JavaScript function that creates a

28. Design the registration form for a web site

Q1-5. Make five different web pages using the following:

Include following specifications:

 Formatting styles and Headings: Include Bold, Italics,

 Font styles and Image tag.

 Marquee Tag & Hyperlink

<TITLE>Q1 III: MEGHA</TITLE>

<h1> <MARQUEE>This is the marquee tag which moves.</MARQUEE></h1>

<a href="p.html">Return Home</a>

 Other tags: hr, br, pre..

<title>Other Tags: MEGHA</title>

<h2>Line Break Tag</h2>

<p>The future <br>

who believe of their<br>

<hr size="5" color="black">

<p> this is a sample paragraph that contains

this is sample paragraph that contains a

lot of lines. </p>

<pre> Text in a pre element is

displayed in a fixed width and font,

and it preserves both spaces and line breaks.

<a href="index.html">GO TO HOME PAGE</a>

 When clicked on YouTube logo

 When clicked on Twitter logo

 When clicked on Facebook Logo

 When clicked on Instagram Logo

<option value="BBA LLB">BBA LLB</option>

alert("Please enter valid numbers.");

<button onclick="onClickEvent()" onmouseover="onMouseOverEvent()"

<p id="demoText">Hover over the button to see the effect.</p>

const year = currentDate.getFullYear();

const squareRoot = Math.sqrt(25); // Calculates the

const substringExample = originalString.substring(0, 5); //