Scribd
Upload
26 views

Sky File

Uploaded by

Tariq Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
26 views

Sky File

Uploaded by

Tariq Khan
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 92

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

10
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

10
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 4 th
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?

10
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

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

10
Output-

10
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>practical</title>
</head>
<body>
<h1>About Me</h1>
<pre>Introduction</pre>
<hr>
<p>
Hello! My Name is Tariq Aziz Khan and I am <em>19</em>
ol year
d
</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>F-287 Shaheen
Bagh Jamia
</ Nagar,<br> City,
p> Country</small>
</
body>
</
html>

10
Output :
2.

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
Output :
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>
<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 :
2.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Practical</title>
</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 :
Q4) Write A Code for Creating Definition List That Shows
Beverages With Description.
Solution-

Case

Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Practical</title>
</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>
Output :
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Practical</title>
</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>
Output :
FM.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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,
Factoring, Venture Capital, Credit Rating, Commercial
Paper, Certificate of Deposit, Stock Invest, Global
Depository Receipts.
</p>
</body></html>

Output :
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>
Output-
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>
Output –
2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Student Information Table</title>

</head>
<body>

<h1>Student Information</h1>
<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>
<td>5</td>
<td>Wilson</td>
<td>88</td>
</tr>
</tbody>
</table>

</body>
</html>

Output-
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>
<td>X5</td>
<td>$60,000</td>
</tr>
<tr>
<td colspan="2">Mercedes</td>
<td>$55,000</td>
</tr>
</tbody>
</table>

</body>
</html>

Output-
Q9) Create A Webpage Showing The Usage Of Marquee Tag Attributes.

Solution-

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Tag Example</title>
</head>
<body>

<h1>Marquee Tag Example</h1>

<!-- Usage of the <marquee> tag with attributes -->


<marquee behavior="scroll" direction="left" scrollamount="5">
<div class="marquee-content">
This is a sample text inside a marquee. You can customize the behavior, direction,
and speed using attributes.
</div>
</marquee>

</body>
</html>
Output
Q10) Create A Webpage Displaying the Table With 4 Cells- 1 st Cell
Should Consist of Unordered List of Subjects In 4 th Sem, 2nd Cell
Should Consist of Some Image, 3 rd 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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpage with Table</title>
</head>
<body>

<h1>Table Example</h1>

<table border="1">
<tr>
<!-- 1st Cell: Unordered List of Subjects -->
<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>

<!-- 2nd Cell: Image -->


<td>
<img src="example-image.jpg" alt="Sample Image"
width="200">
</td>
<!-- 3rd Cell: Usage of Anchor Tag -->
<td>
<h2>Visit our Website</h2>
<p>Click the link below:</p>
<a href="https://www.example.com"
target="_blank">Example.com</a>
</td>

<!-- 4th Cell: Text with Red Background -->


<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-
Q11) Create A Website Which Shows The Usage Of Navigation Frames.

Solution-

Co
de <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>
<p><h3><a href="https://iitmjp.ac.in/about-the-
institute"
target="toprightframe">Academics</a></h3></p><br>
<p><h3><a href="https://iitmjp.ac.in/about-the-
institute"
target="toprightframe">Faculty</a></h3></p><br>
<p><h3><a href="https://iitmjp.ac.in/about-the-
institute" target="toprightfile">Naac</a></h3></p><br>

</html>
Output-
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>
Output-
Q13) Create A Registration Form Using Different Elements Of
Form Tag.
Solution-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>


<input type="date" id="dob" name="dob">
<br><br>
<button type="submit">Register</button>
</form>

</body>
</html>

Output-
Q14) Create a webpage describing yourself using inline style sheet?
Solution-
Code
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
<!-- Add more social media links as needed -->
</div>

</body>
</html>
Output-
Q15) Create a web page showing the grouping in internal style sheet?

Solution-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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{
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>
<!-- Add more social media links as needed -->
</div>

</body>
</html>
Output-
Q16) Create a webpage describing about incredible India using
external style sheet?
Solution-

Code

<Html File>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 the majestic
Himalayas in the north to the serene beaches in the south, India offers 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 the Ganges.</li>
<li>Jaipur - The Pink City known for its vibrant culture.</li>
<li>Goa - Famous for its beautiful beaches and vibrant nightlife.</li>
</ul>
</div>
<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 and significance.</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 {
margin-bottom: 20px;
}

h2 {
color: #e74c3c;
}

ul {
list-style-type: none; padding:
0;
}

li {
margin-bottom: 5px;
}

footer {
text-align: center; font-
size: 14px; color: #777;
}

Output-
Q17) Create a webpage containing a background image and apply all
the background styling attribute?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
</head>
<body>

<h1>Welcome to My Website</h1>

<div>
<p>This is an example webpage with a background image and various background
styling attributes applied.</p>
</div>
</body>
</html>

Output-
Q18) Create a web page showing the usage of font styling attributes ?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Styling Example</title>
<style>
body {
font-family: 'Arial', sans-serif; background-
color: #f4f4f4; color: #333;
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;
}
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 are emphasized 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>
Output-
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Qualifications and Hobbies</title>
<style>
body
{
font-family: 'Arial', sans-
serif; background-color:
#f4f4f4;
color: #333;
margin: 0;
padding:
20px;
text-align: center;
}

h2 {
color: #0066cc;
}

p {
font-size: 18px;
line-height: 1.6;
margin-bottom:
20px;
}
</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>
<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-
Q20) Create a web page showing the usage of ID and class Selector?
Solution-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID and Class Selector Example</title>
<style>
body {
font-family: 'Arial', sans-serif; background-
color: #f4f4f4; color: #333;
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;
}
.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 ClASS selectors in CSS.</p>

<p class="important-text">The Header Section is styled using ID selector 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


background color.</p>
</div>

</body>
</html>
Output-
Q21) create a web page showing the grouping in internal style sheet?
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- scale=1.0">
<title>Grouping in Internal Style Sheet</title>
<style>
body
{
font-family: 'Arial', sans-
serif; 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 {
margin-bottom: 10px;
}

a {
text-decoration:
none; color:
#3498db;
font-weight: bold;
}
</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>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

</body>
</html>

Output-
Q22) WAP In JavaScript To Display A Username By Taking The
Input From The User

Solution-

Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Username Display</title>
</head>
<body>

<div>
<label for="username">Enter your username: </label>
<input type="text" id="username" placeholder="Type your username here">
<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>
Output-
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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)) {
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>
Output-
Q24) Perform swapping of two numbers by using temporary variable.
Solution-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Swapping</title>
</head>
<body>

<div>
<label for="num1">Enter the first number: </label>
<input type="number" id="num1" placeholder="Enter a number">

<label for="num2">Enter the second number: </label>


<input type="number" id="num2" placeholder="Enter another number">

<button onclick="swapNumbers()">Swap Numbers</button>

<p id="result"></p>
</div>

<script>
function swapNumbers() {
// 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)) {
alert('Please enter valid numbers'); return;
}

// Swap numbers using a temporary variable var temp =


num1;
num1 = num2;
num2 = temp;

// Display the swapped numbers document.getElementById('result').textContent =


'Swapped Numbers: '
+ num1 + ' and ' + num2;
}
</script>

</body>
</html>

Output-
Q25) Check whether the number entered by the user is even or odd
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 valid if


(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 + '.';
}
</script>

</body>
</html>

Output-
Q26) WAP to find the greatest number among three numbers with
or without using functions.
Solution-
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greatest Number Finder</title>
</head>
<body>

<div>
<label for="num1">Enter the first number: </label>
<input type="number" id="num1" placeholder="Enter a number">

<label for="num2">Enter the second number: </label>


<input type="number" id="num2" placeholder="Enter another number">

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


<input type="number" id="num3" placeholder="Enter another number">

<button onclick="findGreatest()">Find Greatest Number</button>

<p id="result"></p>
</div>

<script>
function findGreatest() {
// Get the values entered by the user
var num1 = parseFloat(document.getElementById('num1').value); var num2 =
parseFloat(document.getElementById('num2').value); var num3 =
parseFloat(document.getElementById('num3').value);

// Check if the input is valid


if (isNaN(num1) || isNaN(num2) || isNaN(num3)) { alert('Please
enter valid numbers');
return;
}

// Find the greatest number without using functions var greatest =


num1;
if (num2 > greatest) {
greatest = num2;
}
if (num3 > greatest) {
greatest = num3;
}

// Display the result


document.getElementById('result').textContent = 'The greatest number is: ' + greatest;
}
</script>

</body>
</html>
Output-
Q27) WAP to show the usage of confirm box, alert box and prompt box.
Solution-

Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>

<!-- Button to trigger alert box -->


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

<!-- Button to trigger confirm box -->


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

<!-- Button to trigger prompt box -->


<button onclick="showPrompt()">Show Prompt Box</button>

</body>
</html>

Outpu
t-
<Alert Box>
<Confirm Box>

<Prompt Box>
Q28) WAP to print the numbers from 1 to 10 using for loop

Solution-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial- 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>
Output-
Q29) WAP to show the usage of math object.
Soluton-
Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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 1 var
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);
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-
Q30) WAP to show the usage of external javascript file
Solution-
Co
de
<Html File>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External JavaScript Example</title>
<!-- Link to the external JavaScript file -->
<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);
}
Output-
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>
Output-
Q32) Write a program to show the usage of string object.
Solution
Code

<html>
<head><title>Q17 Malkeet</title>
</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>
Output-
Q33) Write a program to implement window object ?

Solution

Code

<html>
<head><title>Q17 Malkeet</title>
<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","heigh
t=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>
</html>

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

You might also like