Web BJ

GURU GOVIND SINGH INDRAPRASTHA UNIVERSITY
INSTITUTE OF INNOVATION IN TECHNOLOGY & MANAGEMENT
WEB TECH LAB

BCA 175
PRACTICAL FILE
Submitted To: Submitted By:

Mr. Mingma Bhutia Name: Tariq Aziz Khan
(Assistant Professor) Class: BCA (E2)

Enrolment No. 05124402024
1
Exp. Problem Statement Date of Signature
No. Practical
Given
1.  Write A Paragraph In Html Using Various

Tags And Alignment
 Write A Quadratic Equation Using Html Tags :

Ax2 + Bx + C=0
2.  Create A Web Page Describing Yourself.

 Use ‘Pre-Tag’ For Sub Heading.
 Use ‘Em’ Tag Where Ever You Are Using
Numbers.
 Use Big and Small Tag for Address
 Create A Web Page That Uses Various
Attributes of Font.
3.  Write A Code to Display the Names of

Beverages, Dishes & Desserts Using Unordered
Lists
 Write A Code to Display the Different Courses
Available in Your Institute. Show The Use of
Different Types of Ordered Lists.
4.
Write A Code for Creating Definition List That Shows
Beverages with Description.
5. Write An Html Code to Display the Syllabus Off Bab
(Cam) V, Clicking on Each Subject Should Open Its
Description in A New Document
6. Write Html Code to Insert Three Images Aligned Left,

Right and Centre. Also Change the Background Colour
to Blue and Give a Suitable Heading to The Web Page
7. Insert An Image in A Document and Link It to Some

Other Page.
Create A Table Containing Sunoo, Name and Marks Of

5 Students.
8. Create A Table Using Cellpadding, Cells pacing, Col
span And Row span Which Shows the Prices of Various
Cars of Different Brands
2
9.
Create A Webpage Showing the Usage of Marquee
Tag Attributes.
10. Create A Webpage Displaying the Table With 4 Cells- 1st
Cell Should Consist of Unordered List of Subjects In 4th
Sem, 2nd Cell Should Consist of Some Image, 3rd Cell
Should Show the Usage of Anchor Tag And 4th Tag
Should Contain Some Text with Background Colour as
Red
11. Create A Website Which Shows the Usage of
Navigation Frames.
12.
Write An Html Code Using Frameset in Which Each
Section Contains Different Colour
13. Create A Registration Form Using Different Elements
of Form Tag.
14. Create a webpage describing yourself using inline style

sheet?
15. Create a web page showing the grouping in internal

style sheet?
16. Create a webpage describing about incredible India

using external style sheet?
17. Create a webpage containing a background image and

apply all the background styling attribute?
18. Create a web page showing the usage of font styling

attributes
19. Create a web page containing two paragraph 1st

paragraphs should be your qualification, 2nd is your
hobbies and interest. (Both paragraphs have same
heading)
20. Create a web page showing the usage of ID and class

Selector?
3
21. create a web page showing the grouping in internal
style sheet?
22. WAP In JavaScript to Display a Username by Taking

the Input from The User
23. Perform The Following Operations Using JavaScript:

Addition, Subtraction, Division and Multiplication by
Taking the Input from The User.
24. Perform swapping of two numbers by using temporary

variable.
25. Check whether the number entered by the user is even

or odd
26. WAP to find the greatest number among three numbers

with or without using functions.
27. WAP to show the usage of confirm box, alert box and
prompt box
28.
WAP to print the numbers from 1 to 10 using for loop
29.
WAP to show the usage of math object.
30. WAP to show the usage of external JavaScript file
31. Write a program to show the usage of date object
32. Write a program to show the usage of string object
33. Write a program to implement window object
34. Write a program to implement document object
4
Q1) Write A Paragraph in Html Using Various Tags and Alignment and
Write A Quadratic Equation Using Html Tags:
Ax2 + Bx + C=0
Solution-
Code
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Practical Q1</title>
</head>
<body>
<h1 style="text-align: left;">About The Institute</h1>
<p style="text-align: right;">
<b>The Institute</b> aims to develop as a Centre of
<i>Excellence</i> for imparting technical education and generating
competent professionals with a high degree of <strike>credibility,
integrity and ethical standards</strike>. The Institute is passionate
about grooming leaders who are not only thorough <u>professionals</u>,
but also good human beings with values and <a href="#">“sanskars”</a>.
</p>
<p style="text-align: center;">

Ax<sup>2</sup>+Bx+C
</p>
</body>
</html>
5
Output-
6
Q2) 1. Create A Web Page Describing Yourself.
 Use ‘Pre Tag’ For Sub Heading.

 Use ‘Em’ Tag Where Ever You Are Using Numbers.
 Use Big And Small Tag For Address
2.Create A Web Page That Uses Various Attributes Of Font.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>practical</title>
</head>
<body>
<h1>About Me</h1>
<pre>Introduction</pre>
<hr>
<p>
Hello! My Name is Bhavjot Singh and I am <em>18</em> year
old
</p>
<p>
I am currently pursing BCA and I am currently in my
<em>1<sup>st</sup></em> year
</p>
<hr>
<p>
<big>Address :</big> <br>
<small>345/1 ,than singh
nagar anand parvat
</p> street no 1 </small>
</body>
</html>
7
Output :
8
2.
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Attributes</title>
</head>
<body>
<h1>Various Font Attributes</h1>
<p style="font-family: Arial, sans-serif;">

This text is in Arial font family.
</p>
<p style="font-size: 20px;">

This text has a font size of 20 pixels.
</p>
<p style="font-weight: bold;">

This text is bold.
</p>
<p style="color: red;">

This text is in red color.
</p>
<p style="text-decoration: underline;">

This text is underlined.
</p>
</body>
</html>
9
Output :
10
Q3) 1. Write A Code To Display The Names Of Beverages, Dishes &
Desserts Using Unordered Lists
2. Write A Code To Display The Different Courses Available In Your
Institute. Show The Use Of Different Types Of Ordered Lists.
Solution-
Code
Code :
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Practical</title>
</head>
<body>
<h1 style="text-align: center;">Menu</h1>
<br>
<h3>Beverages</h3>
<ul>
<li>Soft drinks <ul style="list-style-type: square;">
<li>Coca cola</li>
<li>Pespi</li>
<li>Miranda</li>
<li>Sting</li>
</ul>
</li>
<li>Hot drinks <ul style="list-style-type: square;">

<li>Tea</li>
<li>Coffee</li>
<li>Hot Chocolate</li>
</ul>
</li>
</ul>
<h3>Dishes</h3>
11
<ul>
<li>Rajma Chawal</li>
<li>Chole kulche</li>
<li>Burger</li>
<li>Momos</li>
<li>Shahi Paneer</li>
</ul>
<h3>Dessert</h3>
<ul>
<li>Ice Cream</li>
<li>Gulab Jamun</li>
<li>Rasgulla</li>
<li>Pastery <ul style="list-style-type: square;">
<li>Chocolate</li>
<li>Pineapple</li>
<li>Dark Forest</li>
</ul></li>
</ul>
</body>
</html>
Output :
12
2.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
</head>
<body>
<h1 style="text-align: center;">Institute of Innovation in
Technology and Management</h1>
<h3>Available Courses</h3>
<ol>
<li type="i">BCA</li>
<li type="A">BBA</li>
<li type="I">B.Com</li>
<li type="1">B.tech</li>
</ol>
</body>
</html>
Output :
13
Q4) Write A Code for Creating Definition List That Shows Beverages
With Description.
Solution-
Case
Code :
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
</head>
<body>
<h1>Beverages</h1>
<dl>
<dt>Coffee</dt>
<dd>A brewed drink prepared from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>An aromatic beverage prepared by pouring hot or boiling
water over cured or fresh leaves of Camellia sinensis</dd>
<dt>Hot Chocolate</dt>
<dd>A heated drink consisting of shaved or melted chocolate or
cocoa powder, heated milk or water, and usually a sweetener</dd>
<dt>Juice</dt>
<dd>A drink made from extracting or pressing the natural
liquid contained in fruits or vegetables</dd>
</dl>
</body>
</html>
14
Output :
15
Q5)Write An Html Code To Display The Syllabus Off Bba(Cam) V,
Clicking On Each Subject Should Open Its Description In A New Document
Solution-
Code :
Main.html
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
</head>
<body>
<h1 style="text-align: center;">BBA(CAM) V syllabus</h1>
<h2><pre>Subjects</pre></h2>
<ol type="I">
<li><a href="FM.html">FINANCIAL MANAGEMENT</a></li>
<li><a href="CB.html">CONSUMER BEHAVIOUR</a></li>
<li><a href="MIS.html">MANAGEMENT INFORMATION SYSTEM</a></li>
<li><a href="WDD.html">WEB DESIGNING & DEVELOPMENT</a></li>
<li><a href="BPS.html">BUSINESS POLICY & STRATEGY</a></li>
</ol>
</body>
</html>
16
Output :
17
FM.html
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Document</title>
</head>
<body>
<h1 style="text-align: center;">Financial Management</h1>
<h4>Unit 1</h4>
<p>
<b>Financial Management :</b> Meaning, Scope, Objectives of
Financial Management – Profit
Vs. Wealth Maximization, Financial Management and other Areas
of Management, Liquidity Vs. Profitability,
Methods of Financial Management, Organization of Finance
Function
</p>
<h4>Unit 2</h4>
<p>
<b>Capital Budgeting :</b> Concept, Importance, Appraisal
Methods: Pay back period, DCF techniques,
Accounting rate of return, Capital Rationing, Concept of Risk,
Incorporation of Risk Factor, General Techniques:
Risk adjusted discount return, certainty equivalent
coefficient and Quantitative Techniques: Sensitivity
analysis, Probability assignment, Standard deviation,
Coefficient of variation, Decision tree.
</p>
<h4>Unit 3</h4>
<p>
<b>Capital Structure :</b> Meaning, Capital Structure and
Financial Structure, Patterns of Capital Structure,
Optimum Capital Structure, Capital Structure Theories, Factors
Determining Capital Structure, Capital Structure
Practices in India.
</p>
<h4>Unit 4</h4>
<p>
<b>Sources of Finance :</b> Classification of Sources of
Finance, Security Financing, Loan Financing, Project
Financing, Loan Syndication- Book Building, New Financial
Institutions and Instruments viz., Depositories,
18
Factoring, Venture Capital, Credit Rating, Commercial Paper,
Certificate of Deposit, Stock Invest, Global
Depository Receipts.
</p>
</body></html>
Output :
19
Q6) Write Html Code To Insert Three Images Aligned Left, Right And
Center. Also Change The Background Color To Blue And Give A Suitable
Heading To The Web Page
Solution-
Code
<html>
<head>
scale=1.0">
<title>Image Alignment Example</title>
</head>
<body style="background-color: blue; color: white; text-align: center;
padding: 20px;">
<h1>Image Alignment Example</h1>
<img src="left-image.jpg" alt="Left Image" align="left">

<img src="center-image.jpg" alt="Center Image" align="center">
<img src="right-image.jpg" alt="Right Image" align="right">
</body>
</html>
20
Output-
21
Q7)1.Insert An Image In A Document And Link It To Some Other Page.
2.Create A Table Containing S.No, Name And Marks Of 5 Students.
Solution
Code 1.
<html >
<head>
scale=1.0">
<title>Linked Image Example</title>
</head>
<body>
<h1>Linked Image Example</h1>
<a href="practice2.html">
<img src="example-image.jpg" alt="Example Image">
</a>
</body>
</html>
22
Output –
23
2.
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Student Information Table</title>
</head>
<body>
<h1>Student Information</h1>
24
<table border="1">
<thead>
<tr>
<th>S.No</th>
<th>Name</th>
<th>Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John </td>
<td>85</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>92</td>
</tr>
<tr>
<td>3</td>
<td>Robert </td>
<td>78</td>
</tr>
<tr>
<td>4</td>
<td>Brown</td>
<td>95</td>
</tr>
<tr>
25
<td>5</td>
<td>Wilson</td>
<td>88</td>
</tr>
</tbody>
</table>
</body>
</html>
Output-
26
27
Q8) Create A Table Using Cellpadding, Cellspacing, Colspan And
Rowspan Which Shows The Prices Of Various Cars Of Different Brands
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Car Prices Table</title>
</head>
<body>
<h1>Car Prices Table</h1>
<table cellpadding="10" cellspacing="5" border="1">

<thead>
<tr>
<th>Brand</th>
<th>Car Model</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Toyota</td>
<td>Camry</td>
<td>$30,000</td>
</tr>
<tr>
<td>Corolla</td>
<td>$25,000</td>
</tr>
<tr>
<td colspan="2">Honda</td>
<td>$28,000</td>
</tr>
<tr>
<td>BMW</td>
28
<td>X5</td>
<td>$60,000</td>
</tr>
<tr>
<td colspan="2">Mercedes</td>
<td>$55,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output-
29
Q9) Create A Webpage Showing The Usage Of Marquee Tag Attributes.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Tag Example</title>
</head>
<body>
<h1>Marquee Tag Example</h1>


<marquee behavior="scroll" direction="left" scrollamount="5">
<div class="marquee-content">
This is a sample text inside a marquee. You can customize thebehavior, direction,
and speed using attributes.
</div>
</marquee>
</body>
</html>
30
Output
31
Q10) Create A Webpage Displaying the Table With 4 Cells- 1st Cell
Should Consist of Unordered List of Subjects In 4th Sem, 2nd Cell Should
Consist of Some Image, 3rd Cell Should Show the Usage of Anchor Tag
And 4th Tag Should Contain Some Text with Background Colour as Red.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Webpage with Table</title>
</head>
<body>
<h1>Table Example</h1>
<table border="1">
<tr>

<td>
<h2>Subjects in 4th Sem</h2>
<ul>
<li>Web Development</li>
<li>Database Management</li>
<li>Software Engineering</li>
<li>Computer Networks</li>
</ul>
</td>


<td>
<img src="example-image.jpg" alt="Sample Image"
width="200">
</td>
32

<td>
<h2>Visit our Website</h2>
<p>Click the link below:</p>
<a href="https://www.example.com"
target="_blank">Example.com</a>
</td>


<td style="background-color: red; color: white; padding:
10px;">
<h2>Important Notice</h2>
<p>This is some important information with a red
background.</p>
</td>
</tr>
</table>
</body>
</html>
Output-
33
Q11) Create A Website Which Shows The Usage Of Navigation Frames.
Solution-
Code
<File 1>
<html>
<frameset rows="15%,70%,15%", border="0">
<frameset cols="10%,90%">
<frame src="top file.html">
<frame src="middle file.html">
</frameset>
<frameset cols="10%,90%">
<frame src="left file.html">
<frame src="toprightfile.html" name="toprightframe">
</frameset>
<frame src="bottom file.html">
</frameset>
</html>
<File 2>
<html>
<body style="padding-top: 70; font-size: x-large;background-color:
deepskyblue;">
<p><h3><a href="https://iitmjp.ac.in/about-the-institute"
target="toprightframe">About Us</a></h3></p><br>
target="toprightframe">Academics</a></h3></p><br>
target="toprightframe">Faculty</a></h3></p><br>
target="toprightfile">Naac</a></h3></p><br>
</html>
34
Output-
35
Q12) Write an Html Code Using Frameset In Which Each Section
Contains Different Color
Solution-
Code
<!DOCTYPE html>
<html>
<head>
<title>Frameset Example with Different Colors</title>
</head>
<frameset cols="33%,34%,33%">
<frame src="frame1.html" name="frame1" style="background-color:#ffcccc;">
<frame src="frame2.html" name="frame2" style="background-color:#ccffcc;">
<frame src="frame3.html" name="frame3" style="background-color:#ccccff;">
<noframes>
<body>
Your browser does not support frames. Please update your browser.
</body>
</noframes>
</frameset>
</html>
36
Output-
37
Q13) Create A Registration Form Using Different Elements Of Form
Tag.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration Form</title>
</head>
<body>
<form action="#" method="post">

<h2>Registration Form</h2>
<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>
<label for="confirm_password">Confirm Password:</label>

<input type="password" id="confirm_password" name="confirm_password"required><br><br>
<label for="gender">Gender:</label><br><br>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>
<label for="dob">Date of Birth:</label><br><br>
38
<input type="date" id="dob" name="dob">
<br><br>
<button type="submit">Register</button>
</form>
</body>
</html>
Output-
39
Q14) Create a webpage describing yourself using inline style sheet?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>About Me</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4;color: #333; text-align: center;
margin: 0; padding: 20px;">
<h1 style="color: #0066cc;">Hello, I'm Tejashvi Choudhary</h1>
<p style="font-size: 18px;">I am a BCA Student living in Delhi.</p>
<p style="font-size: 16px;">Here are a few things about me:</p>
<ul style="list-style-type: none; padding: 0;">

<li style="margin-bottom: 10px;">Ncc B certificate Holder</li>
<li style="margin-bottom: 10px;">Eager to learn new technology</li>
<li style="margin-bottom: 10px;"> Wish to roam around world</li>
</ul>
<p style="font-size: 16px;">Connect with me on social media:</p>
<div style="margin-bottom: 20px;">

<a href="www.Twitter.com" style="text-decoration: none; color:#0066cc; margin: 0
10px; font-size: 20px;">🔗 Twitter</a>
<a href="www.linkedin.com" style="text-decoration: none; color:#0066cc; margin: 0 10px;
font-size: 20px;">🔗 LinkedIn</a>

</div>
</body>
</html>
40
Output-
41
Q15) Create a web page showing the grouping in internal style sheet?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Grouping in Internal Style Sheet</title>
<style>
body {
font-family: Arial, sans-serif;background-
color: #f4f4f4; color: #333;
text-align: center;margin:
0; padding: 20px;
}
h1, h2 {
color: #0066cc;
}
p{
font-size: 18px;
}
ul {
list-style-type: none;padding:
0;
}
li {
margin-bottom: 10px;
}
a{
42
text-decoration: none;color:
#0066cc; margin: 0 10px;
font-size: 20px;
}
footer {
font-size: 14px;color:
#777;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4;color: #333; text-align: center;
margin: 0; padding: 20px;">
<h1 style="color: #0066cc;">Hello, I'm Tejashvi Choudhary</h1>
<p style="font-size: 18px;">I am a BCA Student living in Delhi.</p>
<p style="font-size: 16px;">Here are a few things about me:</p>
<ul style="list-style-type: none; padding: 0;">

<li style="margin-bottom: 10px;">Ncc B certificate Holder</li>
<li style="margin-bottom: 10px;">Eager to learn new technology</li>
<li style="margin-bottom: 10px;"> Wish to roam around world</li>
</ul>
<p style="font-size: 16px;">Connect with me on social media:</p>
<div style="margin-bottom: 20px;">

<a href="www.Twitter.com" style="text-decoration: none; color:#0066cc; margin: 0
10px; font-size: 20px;">🔗 Twitter</a>
<a href="www.linkedin.com" style="text-decoration: none; color:#0066cc; margin: 0 10px;
font-size: 20px;">🔗 LinkedIn</a>

</div>
</body>
</html>
43
Output-
44
Q16) Create a webpage describing about incredible India using external
style sheet?
Solution-
Code
<Html File>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<title>Incredible India</title>
</head>
<body>
<header>
<h1>Incredible India</h1>
</header>
<div id="introduction">
<p>Welcome to the diverse and culturally rich land of India. From themajestic Himalayas in the
north to the serene beaches in the south, Indiaoffers a plethora of experiences for every traveler.</p>
</div>
<div id="highlights">
<h2>Highlights of India</h2>
<ul>
<li>Taj Mahal - A symbol of love and architectural marvel.</li>
<li>Varanasi - The spiritual capital on the banks of theGanges.</li>
<li>Jaipur - The Pink City known for its vibrant culture.</li>
<li>Goa - Famous for its beautiful beaches and vibrantnightlife.</li>
</ul>
</div>
45
<div id="culture">
<h2>Cultural Diversity</h2>
<p>India is known for its diverse cultures, languages, and traditions.
The country celebrates various festivals, each with its unique charm andsignificance.</p>
</div>
</body>
</html>
<External Css File>

/* styles.css */body {
font-family: 'Arial', sans-serif;

background-color: #f5f5f5;color:
#333;
margin: 0;
padding: 20px;
}
header {
background-color: aqua;color:
#fff;
text-align: center;
padding: 10px;
}
h1 { margin: 0;
}
section {
}
h2 {
color: #e74c3c;
46
}
ul {
list-style-type: none;padding:
0;
}
li {
margin-bottom: 5px;
}
footer {
text-align: center;font-
size: 14px; color: #777;
}
Output-
47
Q17) Create a webpage containing a background image and apply all the
background styling attribute?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Styling Example</title>
<style>
body {
font-family: Arial, sans-serif; background-image:
url('image.jpg');background-color: #f4f4f4;
background-repeat: no-repeat; background-
size: cover;
background-position: center center;
background-attachment: fixed; color: #333;
margin: 0;
padding: 20px;
}
h1 {
color: #0066cc;
}
p{
font-size: 18px;
}
div {
background-color: rgba(255, 255, 255, 0.8);padding: 20px;
border-radius: 10px;
}
</style>
48
</head>
<body>
<h1>Welcome to My Website</h1>
<div>
<p>This is an example webpage with a background image and variousbackground styling
attributes applied.</p>
</div>
</body>
</html>
Output-
49
Q18) Create a web page showing the usage of font styling attributes ?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Styling Example</title>
<style>
body {
font-family: 'Arial', sans-serif;background-
margin: 0;
padding: 20px;
text-align: center;
}
h1 {
color: #0066cc; font-
size: 36px; font-weight:
bold;
text-decoration: underline;
}
p{
font-size: 18px; font-
style: italic;
}
span {
font-family: 'Courier New', monospace;font-size:
20px;
color: #e74c3c; letter-
spacing: 2px;
}
50
strong {
font-weight: 700;color:
#27ae60;
}
em {
font-style: normal; /* Resetting to normal style */color: #e67e22;
}
a{
text-decoration: none;color:
#3498db;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Font Styling Example</h1>
<p>This is a demonstration of various font styling attributes.

<span>Monospaced text</span> is styled differently, and some words areemphasized using the
<strong>strong</strong> tag or the
<em>emphasized</em> tag. You can also create <a href="#">hyperlinks</a>with custom
styles.</p>
</body>
</html>
51
Output-
52
Q19) Create a web page containing two paragraph 1st paragraph should be
your qualification, 2nd is your hobbies and interest. (Both paragraphs have
same heading)
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Qualifications and Hobbies</title>
<style>
body {
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
text-align: center;
}
h2 {
color: #0066cc;
}
p {
font-size: 18px;
line-height: 1.6;
}
</style>
</head>
<body>
<h2>About Me</h2>
<p><strong>Qualifications:</strong></p>
<p>I have completed my High School Studis in Huamntites Stream from
DPS Greater Noida School. Additionally, I have accomplished National
Cadet Corps 'B' Certificate.</p>
53
<p><strong>Hobbies and Interests:</strong></p>
<p>In my free time, I enjoy exploring new technologies and
frameworks. I also love bing watching, listening soft music, and
travelling.</p>
</body>
</html>
Output-
54
Q20) Create a web page showing the usage of ID and class Selector?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>ID and Class Selector Example</title>
<style>
body {
font-family: 'Arial', sans-serif;background-
margin: 0;
padding: 20px;
text-align: center;
}
#header {
background-color: #3498db;color:
#fff;
padding: 10px;
}
.content {
margin-top: 20px; padding:
15px; background-color: #fff;
border: 1px solid #ddd;border-
radius: 5px;
}
.important-text { color:
#e74c3c; font-weight:
bold;
}
55
.highlighted {
background-color: #ffffcc;
}
</style>
</head>
<body>
<div id="header">
<h1>ID and Class Selector Example</h1>
</div>
<div class="content">
<p>This is a simple example demonstrating the usage of ID and ClASSselectors in CSS.</p>
<p class="important-text">The Header Section is styled using IDselector and the text
below is styled using CLASS selector.</p>
<p>This paragraph has a class of <span class="highlighted">"highlighted"</span>, which gives it a

backgroundcolor.</p>
</div>
</body>
</html>
56
Output-
57
Q21) create a web page showing the grouping in internal style sheet?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Grouping in Internal Style Sheet</title>
<style>
body {
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 20px;
text-align: center;
}
h1, h2 {
color: #0066cc;
}
p {
font-size: 18px;
line-height: 1.6;
}
ul {
list-style-type: none;
padding: 0;
}
li {
}
a {
text-decoration: none;
color: #3498db;
font-weight: bold;
}
58
</style>
</head>
<body>
<h1>Grouping in Internal Style Sheet</h1>
<p>This is an example of grouping styles in an internal style sheet.

Styles for headings, paragraphs, lists, links, and the footer are
grouped for better organization.</p>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</body>
</html>
Output-
59
Q22) WAP In JavaScript To Display A Username By Taking The Input
From The User
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Username Display</title>
</head>
<body>
<div>
<label for="username">Enter your username: </label>
<input type="text" id="username" placeholder="Type your usernamehere">
<button onclick="displayUsername()">Display Username</button>
<p id="output"></p>
</div>
<script>
function displayUsername() {
// Get the value entered by the user
var username = document.getElementById('username').value;
// Display a personalized message

var outputElement = document.getElementById('output'); outputElement.textContent =
'Hello, ' + username + '! Welcome to our
website.';
}
</script>
</body>
</html>
60
Output-
61
Q23) Perform The Following Operations Using JavaScript: Addition,
Subtraction, Division And Multiplication By Taking The Input From The
User.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Calculator</title>
</head>
<body>
<div>
<label for="num1">Enter first number: </label>
<input type="number" id="num1" placeholder="Enter a number">
<label for="num2">Enter second number: </label>

<input type="number" id="num2" placeholder="Enter another number">
<button onclick="performOperations()">Calculate</button>
<p id="addition"></p>
<p id="subtraction"></p>
<p id="multiplication"></p>
<p id="division"></p>
</div>
<script>
function performOperations() {
// Get the values entered by the user
var num1 = parseFloat(document.getElementById('num1').value);var num2 =
parseFloat(document.getElementById('num2').value);
// Check if the input is valid if (isNaN(num1)

|| isNaN(num2)) {
62
alert('Please enter valid numbers');return;
}
// Perform basic arithmetic operations

var additionResult = 'Addition: ' + (num1 + num2);
var subtractionResult = 'Subtraction: ' + (num1 - num2);
var multiplicationResult = 'Multiplication: ' + (num1 * num2);
// Check for division by zero

var divisionResult = num2 !== 0 ? 'Division: ' + (num1 / num2) :'Cannot divide by zero';
// Display the results document.getElementById('addition').textContent = additionResult;

document.getElementById('subtraction').textContent =
subtractionResult;
document.getElementById('multiplication').textContent =
multiplicationResult;
document.getElementById('division').textContent = divisionResult;
}
</script>
</body>
</html>
63
Output-
64
Q24) Perform swapping of two numbers by using temporary variable.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Number Swapping</title>
</head>
<body>
<div>
<label for="num1">Enter the first number: </label>
<label for="num2">Enter the second number: </label>

<button onclick="swapNumbers()">Swap Numbers</button>
<p id="result"></p>
</div>
<script>
function swapNumbers() {
var num1 = parseFloat(document.getElementById('num1').value);var num2 =
// Check if the input is valid if (isNaN(num1)

|| isNaN(num2)) {
alert('Please enter valid numbers');return;
}
// Swap numbers using a temporary variablevar temp =

num1;
65
num1 = num2;
num2 = temp;
// Display the swapped numbers document.getElementById('result').textContent =

'Swapped Numbers: '
+ num1 + ' and ' + num2;
}
</script>
</body>
</html>
Output-
66
Q25) Check whether the number entered by the user is even or odd
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Even/Odd Checker</title>
</head>
<body>
<div>
<label for="number">Enter a number: </label>
<input type="number" id="number" placeholder="Enter a number">
<button onclick="checkEvenOdd()">Check</button>
<p id="result"></p>
</div>
<script>
function checkEvenOdd() {
// Get the value entered by the user
var number = parseInt(document.getElementById('number').value);
// Check if the input is validif

(isNaN(number)) {
alert('Please enter a valid number');return;
}
// Check if the number is even or odd

var result = (number % 2 === 0) ? 'Even' : 'Odd';
// Display the result document.getElementById('result').textContent = 'The number ' +

number + ' is ' + result + '.';
67
}
</script>
</body>
</html>
Output-
68
69
Q26) WAP to find the greatest number among three numbers with or
without using functions.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Greatest Number Finder</title>
</head>
<body>
<div>
<label for="num1">Enter the first number: </label>
<label for="num2">Enter the second number: </label>

<label for="num3">Enter the third number: </label>

<button onclick="findGreatest()">Find Greatest Number</button>
<p id="result"></p>
</div>
<script>
function findGreatest() {
var num1 = parseFloat(document.getElementById('num1').value); var num2 =
parseFloat(document.getElementById('num2').value); var num3 =
// Check if the input is valid

if (isNaN(num1) || isNaN(num2) || isNaN(num3)) {alert('Please
enter valid numbers');
70
return;
}
// Find the greatest number without using functionsvar greatest =

num1;
if (num2 > greatest) {greatest
= num2;
}
if (num3 > greatest) {greatest
= num3;
}
// Display the result

document.getElementById('result').textContent = 'The greatest numberis: ' + greatest;
}
</script>
</body>
</html>
71
Output-
72
Q27) WAP to show the usage of confirm box, alert box and prompt box.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>JavaScript Boxes Example</title>
</head>
<body>
<script>
// Function to show an alert box
function showAlert() {
alert("This is an alert box!");
}
// Function to show a confirm box

function showConfirm() {
// The confirm box returns true if the user clicks "OK" and false
if they click "Cancel"
var result = confirm("Do you want to proceed?");
if (result) {
alert("You clicked OK!");
} else {
alert("You clicked Cancel!");
}
}
// Function to show a prompt box

function showPrompt() {
// The prompt box takes an optional default value as an argument
var userInput = prompt("Enter something:", "Default value");
}
</script>

73
<button onclick="showAlert()">Show Alert Box</button>


<button onclick="showConfirm()">Show Confirm Box</button>


<button onclick="showPrompt()">Show Prompt Box</button>
</body>
</html>
Output-
<Alert Box>
74
<Confirm Box>
<Prompt Box>
75
Q28) WAP to print the numbers from 1 to 10 using for loop
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
scale=1.0">
<title>Print Numbers</title>
</head>
<body>
<div>
<h2>Numbers from 1 to 10:</h2>
<script>
// Use a for loop to print numbers from 1 to 10
for (var i = 1; i <= 10; i++) {
document.write(i + '<br>');
}
</script>
</div>
</body>
</html>
76
Output-
77
Q29) WAP to show the usage of math object.
Soluton-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Math Object Example</title>
</head>
<body>
<div>
<h2>Math Object Example</h2>
<p>Random number between 0 and 1: <strong
id="randomNumber"></strong></p>
<p>Square root of 25: <strong id="squareRoot"></strong></p>
<p>Rounded value of 3.75: <strong id="roundedValue"></strong></p>
<p>Maximum of 10 and 20: <strong id="maximumValue"></strong></p>
<p>Minimum of 10 and 20: <strong id="minimumValue"></strong></p>
<script>
// Random number between 0 and 1var
randomNumber = Math.random();
document.getElementById('randomNumber').textContent =
randomNumber.toFixed(4);
// Square root of 25
var squareRoot = Math.sqrt(25); document.getElementById('squareRoot').textContent
= squareRoot;
// Rounded value of 3.75

var roundedValue = Math.round(3.75);
document.getElementById('roundedValue').textContent = roundedValue;
// Maximum of 10 and 20
var maximumValue = Math.max(10, 20);
78
document.getElementById('maximumValue').textContent = maximumValue;
// Minimum of 10 and 20
var minimumValue = Math.min(10, 20);
document.getElementById('minimumValue').textContent = minimumValue;
</script>
</div>
</body>
</html>
Output-
79
Q30) WAP to show the usage of external javascript file
Solution-
Code
<Html File>
<!DOCTYPE html>
<html lang="en">
<head>
<title>External JavaScript Example</title>

<script src="script.js"></script>
</head>
<body>
<div>
<button onclick="showGreeting()">Show Greeting</button>
</div>
</body>
</html>
<External Javascript File>

// script.js
function showGreeting() {
var greeting = "Hello, welcome to the external JavaScript example!";
alert(greeting);
}
80
Output-
81
Q31) Write a program to show the usage of date object.
Solution
Code
<html>
<head><title>Q17 Malkeet</title>
<h1> Show Date and Time Object</h1>
</head>
<script type="text/javascript">var
myd=new Date();
var d=myd.getDate();
var m=myd.getMonth()+1;
var y=myd.getFullYear();
document.write("Today date is: "+d+"/"+m+"/"+y+"<br>");
var myt=new Date();
var h=myt.getHours(); var
m=myt.getMinutes();var
s=myt.getSeconds();
document.write("Time is: "+h+":"+m+":"+s+"<br>");
</script>
</html>
82
Output-
83
Q32) Write a program to show the usage of string object.
Solution
Code
<html>
</head>
<script>
var mystr="Welcome to Java Script";
document.write("String: "+mystr+"<br>");
document.write("Length: "+mystr.length+"<br>");
document.write("Bold: "+mystr.bold()+"<br>");
document.write("Upper Case: "+mystr.toUpperCase()+"<br>");
document.write("Lower Case: "+mystr.toLowerCase()+"<br>");
document.write("strike: "+mystr.strike()+"<br>");
document.write("split: "+mystr.split('to')+"<br>");
document.write("indexof: "+mystr.indexOf('Java')+"<br>");
document.write("substr: "+mystr.substr(3,4)+"<br>");
document.write("replace: "+mystr.replace('to','you all
to')+"<br>");
document.write("match: "+mystr.match('HTML')+"<br>");
document.write("character at: "+mystr.charAt(11)+"<br>");
document.write("Concat: "+mystr.concat(' Classes')+"<br>");
document.write("Search: "+mystr.search('Script')+"<br>");
</script>
</html>
84
Output-
85
Q33) Write a program to implement window object ?
Solution
Code
<html>
<style>
body{
text-align: center;
padding-top: 20%;
}
input {
padding: 10px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<script>
function win_open()
{
var
mywindow=window.open("http://www.google.com","blank","height=500","wid
th=500");
}
function win_close()
{
window.close();
}
</script>
</head>
<body>
<form>
<input type="button" value="openwindow" onclick="win_open()">
<input type="button" value="minimizewindow"
onclick="win_close()">
</form>
</body>
86
</html>
Output-
87
Q34) Write a program to implement document object
Solution
Code
<html>
<head><title>Q17 Malkeet</title></head>
<a href="important.docx">Document</a>
<script> document.bgColor="pink";
document.fgColor="red";
document.write("Hello world");
document.title="Document Object";
document.linkColor="green";
document.alinkColor="pink";
document.vlinkColor="red";
</script>
</html>
Output-
88

Web BJ

Uploaded by

Copyright:

Available Formats

Web BJ

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

Web BJ

Uploaded by

Copyright:

Available Formats

GURU GOVIND SINGH INDRAPRASTHA UNIVERSITY

INSTITUTE OF INNOVATION IN TECHNOLOGY & MANAGEMENT

WEB TECH LAB

Submitted To: Submitted By:

(Assistant Professor) Class: BCA (E2)

1.  Write A Paragraph In Html Using Various

 Write A Quadratic Equation Using Html Tags :

2.  Create A Web Page Describing Yourself.

3.  Write A Code to Display the Names of

6. Write Html Code to Insert Three Images Aligned Left,

7. Insert An Image in A Document and Link It to Some

Create A Table Containing Sunoo, Name and Marks Of

14. Create a webpage describing yourself using inline style

15. Create a web page showing the grouping in internal

16. Create a webpage describing about incredible India

17. Create a webpage containing a background image and

18. Create a web page showing the usage of font styling

19. Create a web page containing two paragraph 1st

20. Create a web page showing the usage of ID and class

22. WAP In JavaScript to Display a Username by Taking

23. Perform The Following Operations Using JavaScript:

24. Perform swapping of two numbers by using temporary

25. Check whether the number entered by the user is even

26. WAP to find the greatest number among three numbers

30. WAP to show the usage of external JavaScript file

31. Write a program to show the usage of date object

32. Write a program to show the usage of string object

33. Write a program to implement window object

34. Write a program to implement document object

<p style="text-align: center;">

 Use ‘Pre Tag’ For Sub Heading.

<p style="font-family: Arial, sans-serif;">

<p style="font-size: 20px;">

<p style="font-weight: bold;">

<p style="color: red;">

<p style="text-decoration: underline;">

<li>Hot drinks <ul style="list-style-type: square;">

<h1>Image Alignment Example</h1>

<img src="left-image.jpg" alt="Left Image" align="left">

2.Create A Table Containing S.No, Name And Marks Of 5 Students.

<h1>Linked Image Example</h1>

<h1>Car Prices Table</h1>

<table cellpadding="10" cellspacing="5" border="1">

<h1>Marquee Tag Example</h1>

<form action="#" method="post">

<label for="confirm_password">Confirm Password:</label>

<label for="dob">Date of Birth:</label><br><br>

<h1 style="color: #0066cc;">Hello, I'm Tejashvi Choudhary</h1>

<p style="font-size: 18px;">I am a BCA Student living in Delhi.</p>

<p style="font-size: 16px;">Here are a few things about me:</p>

<ul style="list-style-type: none; padding: 0;">

<p style="font-size: 16px;">Connect with me on social media:</p>

<div style="margin-bottom: 20px;">

<h1 style="color: #0066cc;">Hello, I'm Tejashvi Choudhary</h1>

<p style="font-size: 18px;">I am a BCA Student living in Delhi.</p>

<p style="font-size: 16px;">Here are a few things about me:</p>