Scribd
Upload
11 views84 pages

WT Practical File Harshita Gupta COMPLETE

The document is a lab file for a Bachelor of Computer Applications course at Vivekananda Institute of Professional Studies, detailing various web technology assignments. It includes tasks such as creating web pages with specific HTML elements, designing forms, and implementing features like image maps and tables. Each assignment is accompanied by code examples and specifications for completion.

Uploaded by

Techaholic Hub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
11 views84 pages

WT Practical File Harshita Gupta COMPLETE

The document is a lab file for a Bachelor of Computer Applications course at Vivekananda Institute of Professional Studies, detailing various web technology assignments. It includes tasks such as creating web pages with specific HTML elements, designing forms, and implementing features like image maps and tables. Each assignment is accompanied by code examples and specifications for completion.

Uploaded by

Techaholic Hub
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 84

VIVEKANANDA INSTITUTE OF PROFESSIONAL STUDIES-

Technical Campus
VIVEKANANDA SCHOOL OF INFORMATION TECHNOLOGY

BACHELOR OF COMPUTER APPLICATIONS


Web Technology Lab File
Paper Code: BCA 105P

SUBMITTED TO: SUBMITTED BY:


Ms. Chhaya Gupta Name: Harshita Gupta
Assistant Professor Enrollment No.: 08117702024
VSIT,VIPS BCA -IB
INDEX
S.NO Name of the program Date Signature

1 Different 5 web pages for demonstrating 24/09/2024


usage of different tags and attribute
2 Unordered list nested inside ordered list 28/09/2024
with different specifications
3 Designing a table with usage of 28/09/2024
different
table attribute
4 Designing a specific frame 1/10/2024

5 Image map 1/10/2024

6 Student registration for 1/10/2024

7 Inline css ,internal css ,external css 6/10/2024

8 Background image and its attribute 6/10/2024

9 Usage of font styling attributes 10/10/2024

10 Usage of text styling attribute 12/10/2024

11 Usage of list styling attribute 12/10/2024

12 Three equal columns webpage 12/10/2024

13 Bootstrap table 12/10/2024

14 Various types of images 16/10/2024

15 Various types of buttons 18/10/2024

16 Various typography classe 18/10/2024

17 Displaying heading through jumbotron 23/10/2024

18 Inbuilt functions and dialog boxes 23/10/2024

19 Alert box and confirm box 23/10/2024

20 Questionnaire using form elements 23/10/2024

21 Website 2/11/2024
Q1. Make 5 different web pages out of which first page is your home page
with links to other four pages. The rest of the pages should have following :
i) Formatting styles and headings: include bold, italics, underline, strike,
subscript, superscript and all six types of headings ii) about font styles and
image tag. iii) Marquee: Move text, image and hyperlink. iv) Other tags: br,
hr, pre and p Include the following specifications:
• In all these webpages only mention about use, attributes apply them
. • Insert a background image on home page.
• Make all the topics as hyperlinks on this page 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

CODE

<!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>HOME PAGE</h1>

<a href="page1.html"> PAGE 1</a><br>

<a href="page2.html">PAGE 2</a><br>

<a href="page3.html">PAGE 3</a><br>

<a href="page4.html">PAGE 4</a><br>

<a href="page5.html">PAGE 5</a>

</body>
</html>

Page 1

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Formatting Styles and Headings</title>

</head>

<body>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p><strong>This is bold text</strong></p>

<p><em>This is italic text</em></p>

<p><u>This is underlined text</u></p>

<p><del>This is strikethrough text</del></p>

<p>This is a subscript<sub>2</sub> and a superscript<sup>2</sup></p>

<a href="page2.html">Go to Page 2</a> | <a href="Q1.html">Back to Home</a>

</body>

</html>

Page 2

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Font Styles and Image</title>

<style>

.fancy-font { font-family: 'Comic Sans MS', cursive, sans-serif; }

.serif-font { font-family: 'Times New Roman', Times, serif; }


</style>

</head>

<body>

<h1 class="fancy-font">Fancy Font Heading</h1>

<p class="serif-font">This is a paragraph with a serif font.</p>

<img src="VIPS-TC_Campus.jpg" alt="Image" width="300">

<a href="page3.html">Go to Page 3</a> | <a href="Q1.html">Back to Home</a>

</body>

</html>

Page 3

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Marquee Example</title>

</head>

<body>

<marquee behavior="scroll" direction="left">Welcome to the HTML!</marquee>

<a href="page4.html">Go to Page 4</a> | <a href="Q1.html">Back to Home</a>

</body>

</html>

Page 4

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Other HTML Tags</title>

</head>

<body>

<p>This is some text.</p>

<br>

<p>This is another paragraph after a line break.</p>

<hr>

<pre>

This is text in preformatted block.

It preserves spaces and line breaks.

</pre>

<a href="page5.html">Go to Page 5</a> | <a href="Q1.html">Back to Home</a>

</body>

</html>

Page 5

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Background Image Example</title>

<style>

body {

background-image: url('background.jpg');

background-size: cover;

</style>

</head>

<body>

<h1>Home Page with Background Image</h1>

<p><a href="page1.html">Formatting Styles and Headings</a></p>

<p><a href="page2.html">Font Styles and Image</a></p>


<p><a href="page3.html">Marquee Example</a></p>

<p><a href="page4.html">Other HTML Tags</a></p>

</body>

</html>

OUTPUT:
Q2 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 Marquee
. • Use different font styles and colors for different ordered list items.

• Insert Horizontal lines after each ordered item.

CODE

<html>

<head>

<title>Ordered and Unordered List Example</title>

<style>

.img {

position: absolute;

top: 10px;

right: 10px;

width: 100px;

.marquee {

font-size: 24px;

color: rgb(40, 31, 31);

.list {

color: red;

font-family: 'Arial', sans-serif;

.list2 {

color: green;

font-family: 'Courier New', monospace;


}

.list3 {

color: blue;

font-family: 'Georgia', serif;

.one {

margin-bottom: 10px;

ol li::after{

content: "";

display: block;

border-bottom: 1px solid #ccc;

margin-top: 10px;

</style>

</head>

<body>

<img src="sector.jpg" alt="Main Item">

<marquee class="marquee">ECONOMIC SECTORS</marquee>

<ol class="one">

<li class="list">Primary Sector

<ul>

<li class="list">Agriculture</li>

<li class="list2">Fishing</li>

<li class="list3">Dairy</li>

</ul>

</li>

<li class="list2">Secondary Sector

<ul>

<li class="list">Manufacturing Industries</li>

</ul>

</li>
<li class="list3">Tertiary Sector

<ul>

<li class="list">Service Sector</li>

</ul>

</li>

</ol>

</body>

</html>

OUTPUT
Q3. Design a table with row span and column span and make use of
attributes colspan, rowspan, width, height, cellpadding, cellspacing etc

CODE

<html>

<head>

<style>

.table {

width: 80%;

border-collapse: collapse;

height: 45%;

.heading{

border: 1px solid black;

padding: 20px;

text-align: center;

border-spacing: 30px;

</style>

</head>

<body>

<h2>Table </h2>

<table class="table">

<tr>

<th class="heading" rowspan="2">Name</th>

<th class="heading" colspan="2">Subject</th>

<th class="heading" rowspan="2">Age</th>

</tr>

<tr>

<th class="heading">Maths</th>

<th class="heading">WT</th>
</tr>

<tr>

<td class="heading">Reyansh</td>

<td class="heading">85</td>

<td class="heading">90</td>

<td class="heading">16</td>

</tr>

<tr>

<td class="heading">Ayanshi</td>

<td class="heading">78</td>

<td class="heading">95</td>

<td class="heading">17</td>

</tr>

<tr>

<td class="heading">Sanya</td>

<td colspan="2" class="heading">90</td>

<td class="heading">18</td>

</tr>

</table>

</body>

</html>
OUTPUT
Q4 Design Following Frame:

CODE:

<html>

<head>

</head>

<frameset cols="50%,50%">

<frame src="a.html">

<frameset rows="80%,20%">

<frame src="b.html">

<frame src="c.html">

</frameset>

</frameset>

</html>

A.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>MAIN MENU </h1>

<a href="topic 1">Topic 1</a><br>


<a href="topic 2">Topic 2 </a><br>

<a href="topic 3">Topic 3</a>

</body>

</html>

B.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>EXPLANATION</h1><br>

- - - - - - - - - - - - - - - - - - - - - - - <br>

- - - - - - - - - - - - - - - - - - - - - - - <br>

<br><br><br><br><br><br.<br>

<br><br><br><br><br><br><br>

<H2>VIEW EXAMPLE</H2>

</body>

</html>

C.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>EXAMPLE</h1>

</body>

</html>

OUTPUT:
Q5. Make an image map showing the usage of shape, cords, href attributes
in map. Link each hotspot to their respective details. All the web pages
should be designed with proper background color, images, font styles
and headings

CODE

<html>

<body>

<h1>IMAGE MAP</h1>

<img src="work.jpg" alt="workplace" usemap="#workplace" width="500" height="500" >

<map name="workplace">

<area shape="rect" coords="0,0,270,330" alt="computer" href="computer.html">

<area shape="circle" coords="400,290,120" alt="cup" href="cup.html">

<area shape="rect" coords="50,50,340,160 " alt="mobile" href="mobile.html">

</map>

</body>

</html>

COMPUTER.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>COMPUTER</h1>

<p>A computer is a machine that can be programmed to perform a set of arithmetic or logical operations
automatically.

Computers have become an integral part of our lives.

They are used in almost every field, from medicine and space exploration to business and
communication.<br>
Computers have made our lives easier in many ways. They help us perform tasks that would otherwise be
difficult or impossible.

For example, computers can help us keep track of large amounts of information, communicate with others
around the world, and entertain us with games and videos

</p>

</body>

</html>

CUP.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>

<h2>CUP</h2>

<p>

A cup is an open-top container used to hold liquids for pouring or drinking typically with a flattened
hemispherical shape,

and often with a capacity of about 100–250 millilitres (3–8 US fl oz)<br>

Cup measurements are commonly associated with cooking or serving.

A measuring cup generally measures liquids such as milk, water, oil, etc., and powdered substances such as
sugar, flour, baking soda, etc.

Based on these two types of measurements, it is respectively divided into:

Liquid measuring cup

Dry measuring cup

</p>

</body>

</html>

MOBILE.HTML

<!DOCTYPE html>

<html lang="en">

<head>
<title>Document</title>

</head>

<body>

<h1>Mobile</h1>

<p>

A mobile phone makes our lives easier. It can be used for work/business purposes, attending online classes,
entertainment, or just talking with friends and family members.

Modern smartphones have many useful features.

They also have a high-speed internet connection that helps us get what we need quickly and easily.

</p>

</body>

</html>

Output
Q6. Design Student Registration Form for admission in college.
CODE

<html>

<body>

<h1>College Admission Form</h1>

<form action="/submit" method="POST">

<fieldset>

<label for="fullname">Full Name:</label><br>

<input type="text" id="fullname" name="fullname" placeholder="Enter your full name" ><br><br>

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

<input type="date" id="dob" name="dob" ><br><br>

<label for="gender">Gender:</label><br>

<input type="radio" id="male" name="gender" value="Male" required> Male

<input type="radio" id="female" name="gender" value="Female" required> Female<br><br>

<label for="phone">Phone Number:</label><br>

<input type="text" id="phone" name="phone" placeholder="Enter your phone number"


required><br><br>

<label for="email">Email Address:</label><br>

<input type="email" id="email" name="email" placeholder="Enter your email address"


required><br><br>

<label for="address">Address:</label><br>

<textarea id="address" name="address" placeholder="Enter your address" rows="4"


required></textarea><br><br>

<label for="school">School Name:</label><br>

<input type="text" id="school" name="school" placeholder="Enter your school name"


required><br><br>

<label for="hspercentage">School Percentage:</label><br>


<input type="number" id="hspercentage" name="hspercentage" placeholder="Enter your school
percentage" required><br><br>

<label for="year">Year of Passing:</label><br>

<input type="number" id="year" name="year" placeholder="Enter year of passing" required><br><br>

<label for="course">Preferred Course:</label><br>

<select id="course" name="course" required>

<option value="">--Select Course--</option>

<option value="BSc">BSc</option>

<option value="BA">BA</option>

<option value="BCom">BCom</option>

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

<option value="BCA">BCA</option>

</select><br><br>

<label for="hobbies">Hobbies and Interests:</label><br>

<textarea id="hobbies" name="hobbies" placeholder="Enter your hobbies"


rows="4"></textarea><br><br>

<label for="terms">

<input type="checkbox" id="terms" name="terms" required> I agree to the terms and conditions.

</label><br>

<input type="submit" value="Submit" class="btn">

</form>

</fieldset>

</body>

</html>
OUTPUT
Q7 Create a webpage and show the usage of inline, internal and external
Stylesheets
CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Internal and External Stylesheets</title>

<link rel="stylesheet" href="styles.css">

<style>

h1 {

text-align: center;

.internal-style {

color: green;

font-style: italic;

</style>

</head>

<body>

<h1>Using Internal and External Stylesheets</h1>

<p>This paragraph uses the styles from the external stylesheet.</p>

<p class="internal-style">This paragraph uses styles from the internal stylesheet.</p>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>


</body>

</html>

#STYLE.CSS

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

h1 {

color: navy;

p{

font-size: 20px;

color: #d00c0c;

OUTPUT
Q8. Create a webpage containing a background image and apply all the
background styling attributes.

CODE

<html>

<head>

<style>

body {

background-image: url(VIPS-TC_Campus.jpg);

background-color: #f0f0f0;

background-repeat: no-repeat;

background-attachment: fixed;

background-position: center;

background-size: cover;

background-blend-mode: multiply;

font-family: Arial, sans-serif;

color: white;

margin: 0;

padding: 0;

height: 100vh;

.content {

text-align: center;

padding-top: 20%;

.heading {

font-size: 3em;

margin-bottom: 10px;

.line{

font-size: 1.2em;

</style>
</head>

<body>

<div class="content">

<h1 class="heading">Welcome to My Webpage</h1>

<p class="line">This webpage uses all CSS background properties.</p>

</div>

</body>

</html>

OUTPUT
Q9.Create a awebpage showing the usage of font styling attributes.
CODE

<html>

<head>

<style>

.body{

font-family: Arial, sans-serif;

line-height: 1.6;

margin: 20px;

background-color: #f9f9f9;

.heading {

font-size: 2.5em;

font-weight: bold;

font-style: italic;

text-align: center;

color: #333;

text-transform: uppercase;

letter-spacing: 2px;

.head{

font-size: 2em;

font-weight: normal;

color: #555;

text-align: left;

.paragraph {

font-size: 1.2em;

font-style: normal;

font-weight: 300;
text-align: justify;

color: #666;

line-height: 1.8;

.highlight {

font-weight: bold;

font-style: italic;

text-decoration: underline;

color: #d9534f;

</style>

</head>

<body class="body">

<h1 class="heading">CSS Font styling</h1>

<h2 class="head">My Name is harshita gupta</h2>

<p class="paragraph">This paragraph shows various <span class="highlight">font styling attributes</span>


like font size, weight, style, and color.</p><br>

<p class="paragraph"> You can also use <strong>bold</strong>, <em>italic</em>, and <u>underline</u>
within text.</p><br>

<p class="paragraph">The text here is aligned <strong>justified</strong> and has a comfortable line-
height.</p><br>

</body>

</html>
OUTPUT
Q10.Create a web page and apply all the text styling attributes use id and
class selector
CODE

<html>

<head>

<style>

#main-title {

font-family: 'Arial', sans-serif;

font-size: 36px;

text-align: center;

color: #333;

text-transform: capitalize;

letter-spacing: 2px;

.text-paragraph {

font-size: 16px;

line-height: 1.5;

margin-bottom: 20px;

.bold-text {

font-weight: bold;

.italic-text {

font-style: italic;

.underline-text {

text-decoration: underline;

.text-color {

color: #3498db;
}

.uppercase {

text-transform: uppercase;

.lowercase {

text-transform: lowercase;

.letter-spacing {

letter-spacing: 3px;

.text-center {

text-align: center;

.text-right {

text-align: right;

.heading {

font-family: 'Georgia', serif;

font-size: 24px;

color: #2c3e50;

text-transform: uppercase;

margin-bottom: 10px;

</style>
</head>

<body>

<h1 id="main-title">Text Styling Attributes </h1>

<p class="text-paragraph">

Text styling with <span class="bold-text">bold</span>,

<span class="italic-text">italic</span>, and <span class="underline-text">underline</span> text.

</p>

<h2 class="heading"> Text Styles</h2>

<p class="text-paragraph">

<span class="uppercase">Uppercase text</span><br>

<span class="lowercase">lowercase text</span> <br>

We can change <span class="text-color">text color</span> or even adjust the

<span class="letter-spacing">letter spacing</span>

</p>

<h3 class="heading">Text Alignment </h3>

<p class="text-center">

Centered

</p>

<p class="text-right">

Right-aligned

</p>

</body>

</html>
OUTPUT
Q11Create a webpage and implement all list styling attributes

CODE

<html>

<head>

<style>

body {

font-family: 'Arial', sans-serif;

margin: 20px;

line-height: 1.6;

h1 {

text-align: center;

font-size: 36px;

color: #2c3e50;

h2 {

font-size: 24px;

color: #34495e;

margin-top: 30px;

text-transform: uppercase;

.list-disc {

list-style-type: disc;

.list-circle {

list-style-type: circle;

margin-left: 20px;

.list-square {

list-style-type: square;

}
.list-decimal {

list-style-type: decimal;

.list-lower-alpha {

list-style-type: lower-alpha;

.list-upper-roman {

list-style-type: upper-roman;

.list-lower-greek {

list-style-type: lower-greek;

.list-outside {

list-style-position: outside;

margin-left: 20px;

.list-inside {

list-style-position: inside;

margin-left: 20px;

</style>
</head>

<body>

<h1 id="main-title">List Styling Attributes</h1>

<section>

<h2>VEHICLES</h2>

<ul class="list-disc">

<li>Car</li>

<li>Bus</li>

</ul>

<ul class="list-circle">

<li>Bike</li>

<li>Truck</li>

</ul>

<ul class="list-square">

<li>Scooter</li>

<li>Aeroplane</li>

</ul>

</section>

<section>

<h2>Animals</h2>

<ol class="list-decimal">

<li>Cat</li>

<li>Dog</li>

</ol>
<ol class="list-lower-alpha">

<li> Cow</li>

<li>Buffalo</li>

</ol>

<ol class="list-upper-roman">

<li>Lion</li>

<li>Tiger</li>

</ol>

<ol class="list-lower-greek">

<li>Fox</li>

<li>Cheetah</li>

</ol>

</section>

<section>

<h2>Nested Lists</h2>

<ul class="list-outside">

<li>Fruits

<ul>

<li>Mango</li>

<li>Kiwi</li>

<li>Papaya</li>

</ul>

</li>

</ul>

<ul class="list-inside">

<li>Vegetable

<ul>
<i>Potato</i>

<i>Tomato</i>

<i>Onion</i>

</ul>

</li>

</ul>

</section>

</body>

</html>

OUTPUT
Q12.Create a web page with three equal columns

CODE

<html>

<head>

<title>Bootstrap </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link

rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"

/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h1>THREE EQUAL COLUMNS</h1>

<div class="row">

<div class="column1" style= "background-color: rgb(132, 149, 161);">COLUMN 1</div>

<div class="column2" style="background-color: lavenderblush">

COLUMN 2

</div>

<div class="column3" style="background-color: lavender">COLUMN 3</div>

</div>

</div>

</body>

</html>
OUTPUT
Q13.Create a webpage containing bootstrap table

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<title>Bootstrap tables</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Bootstrap Table</h2>

<table class="table table-striped table-bordered">

<thead class="thead-dark">

<tr>

<th>Name</th>

<th>Phone no.</th>

<th>Age</th>

<th>Occupation</th>

</tr>

</thead>

<tbody>

<tr>

<td>Reyansh</td>

<td>7876699572</td>

<td>28</td>

<td>Software Engineer</td>
</tr>

<tr>

<td>Anaya</td>

<td>8168389045</td>

<td>34</td>

<td>Data Scientist</td>

</tr>

<tr>

<td>Risabh</td>

<td>9997802255</td>

<td>45</td>

<td>Project Manager</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>
OUPUT
Q14.Create a webpage containing various types of tables.

CODE

<html>

<head>

<title>Bootstrap Example</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<h2>Images Types</h2>

<img src="garden.webp" class="img-rounded" alt="garden" width="304" height="299">

<img src="flower.avif" class="img-circle" alt="flower" width="304" height="299">

<img src="bird.jpg" class="img-thumbnail" alt="bird" width="304" height="299">

</div>

</body>

</html>

OUTPUT
Q15.Create a webpage containing various types of buttons

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Buttons</title>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container ">

<h2>Bootstrap Buttons</h2>

<h4>Button Styles</h4>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-light">Light</button>

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn">Basic</button>

<button type="button" class="btn btn-default">Default</button>

<h4 class="mt-4">Button Sizes</h4>

<button type="button" class="btn btn-primary btn-lg">Large Button</button>


<button type="button" class="btn btn-primary btn-normal">Normal</button>

<button type="button" class="btn btn-primary btn-sm">Small Button</button>

<h4 class="mt-4">Block Button (Full Width)</h4>

<button type="button" class="btn btn-primary btn-block">Block Button</button>

<h4 class="mt-4"> Active / Disabled Buttons</h4>

<button type="button" class="btn btn-primary">Primary Button</button>

<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary disabled">Disabled Primary</button>

</div>

</body>

</html>
OUTPUT
Q16 Create a webpage containing various Bootstrap typography classes.

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap Typography </title>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container mt-5">

<h2>Bootstrap Typography Classes</h2>

<h4>Headings</h4>

<h1>h1. Bootstrap heading</h1>

<h2>h2. Bootstrap heading</h2>

<h3>h3. Bootstrap heading</h3>

<h4>h4. Bootstrap heading</h4>

<h5>h5. Bootstrap heading</h5>

<h6>h6. Bootstrap heading</h6>

<h4 class="mt-4">Display Headings</h4>

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h1>

<h1 class="display-3">Display 3</h1>

<h1 class="display-4">Display 4</h1>


<h4 class="mt-4">Paragraphs</h4>

<p>This is a regular paragraph.<br>

My name is Hrshita Gupta</p>

<p class="lead">This is a lead paragraph.<br>

My name is Harshita Gupta

</p>

<h4 class="mt-4">Inline Text Elements</h4>

<p>You can use <mark>highlighted text</mark> using typography.</p>

<p><strong>This text is bold.</strong></p>

<p><em>This text is italic.</em></p>

<p><small>This text is small.</small></p>

<p><del>This text is deleted.</del></p>

<p><u>This text is underlined.</u></p>

<h4 class="mt-4">Blockquote</h4>

<blockquote class="blockquote">

<p class="mb-0">This is a blockquote.</p>

<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source


Title</cite></footer>

</blockquote>

<h4 class="mt-4">Text Alignment</h4>

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text. This text takes up the full width of the container .</p>

<p class="text-nowrap">No wrap text. This text won't wrap even if it's very long and overflows its
container.</p>
<h4 class="mt-4">Text Transformation</h4>

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

<h4 class="mt-4">Text Colors</h4>

<p class="text-primary">Primary text color.</p>

<p class="text-success">Success text color.</p>

<p class="text-danger">Danger text color.</p>

<p class="text-warning">Warning text color.</p>

<p class="text-info">Info text color.</p>

<p class="text-light bg-dark">Light text on dark background.</p>

<p class="text-dark">Dark text color.</p>

<p class="text-muted">Muted text color.</p>

<h4 class="mt-4">Font Weight and Italics</h4>

<p class="font-weight-bold">Bold text.</p>

<p class="font-weight-normal">Normal weight text.</p>

<p class="font-weight-light">Light weight text.</p>

<p class="font-italic">Italic text.</p>

</div>

</body>

</html>
OUTPUT
Q17.Create a web page containing to display the heading using Jumbotron.

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap </title>

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</head>

<body>

<div class="jumbotron">

<h1>Bootstrap</h1>

<p>Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile-first projects on

the web.</p>

</div>

<div class="container">

<p> A jumbotron indicates a big box for for calling extra attention to some special content or
information.</p>

</div>
</body>

</html>

OUTPUT
Q18.Write a program to show the usage of inbuilt functions and dialog
boxes.

CODE

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

button {

padding: 10px 20px;

font-size: 16px;

margin: 10px;

</style>

</head>

<body>

<h1>JavaScript Dialog Boxes and Inbuilt Functions</h1>

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

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

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

<button onclick="useInbuiltFunctions()">Use Inbuilt Functions</button>

<p id="output"></p>

<script>

function showAlert() {
alert("This is an alert dialog box!");

function showConfirm() {

let userResponse = confirm("Do you like JavaScript?");

if (userResponse) {

document.getElementById('output').innerHTML = "You clicked OK!";

} else {

document.getElementById('output').innerHTML = "You clicked Cancel!";

function showPrompt() {

let userName = prompt("Please enter your name:", "John Doe");

if (userName != null) {

document.getElementById('output').innerHTML = "Hello, " + userName + "!";

} else {

document.getElementById('output').innerHTML = "No name entered!";

function useInbuiltFunctions() {

let randomNumber = Math.floor(Math.random() * 100) + 1;

let str = "Hello, World!";

let upperStr = str.toUpperCase();

document.getElementById('output').innerHTML =

"Random number (1-100): " + randomNumber + "<br>" +

"Uppercase string: " + upperStr;

}
</script>

</body>

</html>

OUTPUT
Q19.Write a program to show the usage of alert box and confirm box\
CODE

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

button {

padding: 10px 20px;

font-size: 16px;

margin: 10px;

p{

font-size: 18px;

</style>

</head>

<body>

<h1>Alert Box and Confirm box</h1>

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

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

<p id="output"></p>
<script>

function showAlert() {

alert("This is an alert box! Click OK to continue.");

function showConfirm() {

let userResponse = confirm("Do you want to proceed?");

if (userResponse) {

document.getElementById('output').innerHTML = "You chose to proceed!";

} else {

document.getElementById('output').innerHTML = "You chose to cancel!";

</script>

</body>

</html>

OUTPUT
Q20.Create a questionnaire related to any topic of your choice by using
Form Elements.

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<title> Form</title>

</head>

<body>

<h2> Form</h2>

<form action="/submit" method="POST">

<label for="name">Full Name:</label><br>

<input type="text" id="name" name="name"><br><br>

<label for="email">Email:</label><br>

<input type="email" id="email" name="email" required><br><br>

<label for="age">Age:</label><br>

<input type="text" id="age" <br><br>

<label for="gender">Gender:</label><br>

<input type="radio" id="male" name="gender" value="male">

<label for="male">Male</label><br>

<input type="radio" id="female" name="gender" value="female">

<label for="female">Female</label><br>

<input type="radio" id="other" name="gender" value="other">

<label for="other">Other</label><br><br>

<label for="satisfaction">What was your cet rank?</label><br>

<select id="satisfaction" name="satisfaction" required>


<option value="satisfaction">-select-</option>

<option value="satisfaction">0-300</option>

<option value="satisfaction">300-600</option>

<option value="satisfaction">600-900</option>

<option value="satisfaction">900-above</option>

</select><br><br>

<label for="recommend">Which language have you studied?</label><br>

<input type="checkbox" id="JAVA" name="recommend" value="JAVA">

<label for="JAVA">JAVA</label><br>

<input type="checkbox" id="C++" name="recommend" value="C++">

<label for="C++">C++</label><br>

<input type="checkbox" id="HTML" name="recommend" value="HTML">

<label for="HTML">HTML</label><br><br>

<label for="comments">FEEDBACK</label><br>

<textarea id="comments" name="comments" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>
OUTPUT
Q21. Design a website and apply all the features of HTML,CSS,Javascript
and bootstrap to make the website attractive.

CODE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Silk Muse Jewelry Shop</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<div class="logo">

<img src="logo.png" alt="Silk Muse Logo">

</div>

<nav>

<a href="home.html" class="active">Home</a>

<a href="shop.html">Shop</a>

<a href="contact.html" >Contact</a>

</nav>

</header>

<div class="section">

<div class="hero"></div>

<div class="content">

<div class="image">

<img src="cover.png" alt="Jewelry">

</div>

<div class="text">

<h1>Jewellery Shop</h1>

<p>Discover exquisite jewelry that tells your story</p>


<a href="shop.html" class="button">Shop Now</a>

</div>

</div>

</div>

<section class="most-loved">

<h2>Our Most Loved Pieces</h2>

<div class="product-gallery">

<div class="product">

<img src="necklace.jpeg" alt="NECKLACE">

<p> Necklace</p>

</div>

<div class="product">

<img src="earnings.jpeg" alt="EARINGS">

<p>Earings</p>

</div>

<div class="product">

<img src="rings.jpeg" alt="RINGS">

<p>Rings</p>

</div>

<div class="product">

<img src="bracelet.jpeg" alt="BRACELET">

<p>Bracelet</p>

</div>

</div>

<div class="story">

<section class="our-story">

<div class="story-text">

<h2>Our Story</h2>

<p>We curate a collection of exquisite pieces, from timeless classics to modern trends.</p>

<button>Read More</button>

</div>

<div class="story-image">

<img src="story.jpeg" alt="Jewelry Collection">


</div>

</section>

</div>

<footer class="footer">

<p>© 2024. All Rights Reserved.</p>

</footer>

</body>

</html>

#styles.css

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

font-family: 'Arial', sans-serif;

background-color: #a0956b;

color: #2c2c2c;

header {

display: flex;

justify-content: space-between;

align-items: center;

padding: 20px;

background-color: #a0956b;

.logo img {

height: 180px;
width: auto;

nav a {

color: #f1eede;

text-decoration: none;

margin-left: 20px;

font-size: 1.2em;

nav a.active {

border-bottom: 2px solid #f1eede;

nav a:hover {

color: #ddd;

.section {

background-image: url(background.jpeg);

height: 400px;

width: 1550px; ;

.content {

display: flex;

justify-content: center;

align-items: center;

gap: 40px;

}
.image img {

border-radius: 50%;

height: 270px;

width: 270px;

object-fit: cover;

border: 5px solid #f1eede;

.text h1 {

font-size: 4em;

font-weight: bold;

color: #2c2c2c;

.text p {

font-size: 1.8em;

margin: 20px 0;

color: #555;

.button {

display: inline-block;

padding: 12px 22px;

background-color: #a0956b;

color: #f1eede;

font-weight: bold;

text-decoration: none;

border-radius: 9px;

border-color: #555;

border-width: 4px;

transition: background-color 0.3s;

}
.button:hover {

background-color: #8a7a5f;

*{

margin: 0;

padding: 0;

box-sizing: border-box;

.most-loved {

text-align: center;

background-color: #a0956b ;

padding: 40px;

border-radius: 8px;

max-width: 800px;

margin: auto;

.most-loved h2 {

font-size: 2em;

color: #fff;

margin-bottom: 20px;

.product-gallery {

display: flex;

justify-content: space-around;

flex-wrap: wrap;

gap: 20px;

}
.product {

width: 150px;

text-align: center;

.product img {

width: 100%;

height: 200px;

border-radius: 10px;

.product p {

margin-top:20px;

font-size: 2em;

color: #fff;

*{

margin: 0;

padding: 0;

box-sizing: border-box;

.story {

background-image: url(background\ 2.jpeg);

.our-story {

display: flex;

background-color: #f0e8d8 ;

padding: 50px;

border-radius: 8px;

max-width: 800px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);


}

.story-text {

flex: 1;

display: flex;

flex-direction: column;

justify-content: center;

padding-right: 20px;

.story-text h2 {

font-size: 2em;

color: #787450;

margin-bottom: 10px;

.story-text p {

font-size: 1.1em;

color: #555;

margin-bottom: 20px;

.story-text button {

background-color: #a2a382;

color: white;

padding: 10px 20px;

border: none;

border-radius: 5px;

font-size: 1em;

cursor: pointer;

transition: background 0.3s;

}
.story-text button:hover {

background-color: #909a72;

.story-image {

flex: 1;

display: flex;

align-items: normal;

.story-image img {

width: 100%;

height: auto;

border-radius: 8px;

body {

margin: 0;

font-family: Arial, sans-serif;

.footer {

background-color:#a0956b;

color: white;

text-align: center;

padding: 20px;

font-size: 16px;

.footer p {

margin: 0;

font-weight: bold;

.social-icons {
margin-top: 10px;

.icon {

color: white;

font-size: 20px;

margin: 0 10px;

text-decoration: none;

.icon:hover {

color: #ddd;

.our-collection h2 {

font-size: 2em;

color: #fff;

margin-bottom: 20px;

.our-collection {

text-align: center;

background-color: #a0956b ;

padding: 40px;

border-radius: 8px;

max-width: 800px;

margin: auto;

.item img {

width: 120%;

height: 240px;

border-radius: 10px;

.item-gallery {

display: flex;

justify-content: space-around;
flex-wrap: wrap;

gap: 50px;

.item {

width: 150px;

text-align: center;

.item p {

margin-top:20px;

font-size: 2em;

color: #fff;

*{

box-sizing: border-box;

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

.container {

display: flex;

max-width: 1600px;

border: 1px solid #e2e2e2;

box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

.image-section img {

width: 150%;

height: 600px;

.form-section {
background-color: #e8dfc8;

padding: 40px;

flex: 1;

.form-section h1 {

font-size: 2rem;

color: #9d9468;

margin-bottom: 20px;

.input-group {

display: flex;

gap: 10px;

margin-bottom: 15px;

input, textarea {

width: 100%;

padding: 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 1rem;

textarea {

height: 100px;

resize: none;

button {

background-color: #9d9468;

color: white;

padding: 10px 20px;


border: none;

border-radius: 5px;

cursor: pointer;

font-size: 1rem;

button:hover {

background-color: #8a7f5a;

Shop.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Silk Muse Jewelry Shop</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<div class="logo">

<img src="logo.png" alt="Silk Muse Logo">

</div>

<nav>

<a href="home.html" >Home</a>

<a href="shop.html" class="active">Shop</a>

<a href="contact.html" >Contact</a>

</nav>

</header>

<section class="our-collection">

<h2>Our Collection</h2>

<div class="item-gallery">

<div class="item">
<img src="necklace.jpeg" alt="NECKLACE">

<p> Necklace</p>

</div>

<div class="item">

<img src="earnings.jpeg" alt="EARINGS">

<p>Earings</p>

</div>

<div class="item">

<img src="rings.jpeg" alt="RINGS">

<p>Rings</p>

</div>

<div class="item">

<img src="bracelet.jpeg" alt="BRACELET">

<p>Bracelet</p>

</div>

<div class="item">

<img src="nose rings.jpeg" alt="NOSE RINGS">

<p>Nose Rings</p>

</div>

<div class="item">

<img src="toe rings.jpeg" alt="Toe Rings">

<p>Toe Rings</p>

</div>

<footer class="footer">

<p>© 2024. All Rights Reserved.</p>

</footer>

</div>

</section>

</body>

</html>

Contact.html

<!DOCTYPE html>

<html lang="en">
<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Silk Muse Jewelry Shop</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<div class="logo">

<img src="logo.png" alt="Silk Muse Logo">

</div>

<nav>

<a href="home.html" >Home</a>

<a href="shop.html" >Shop</a>

<a href="contact.html" class="active" >Contact</a>

</nav>

</header>

<div class="container">

<div class="image-section">

<img src="contact.jpeg" alt="Jewelry Image">

</div>

<div class="form-section">

<h1>Let's Chat</h1>

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

<div class="input-group">

<input type="text" placeholder="First Name*" required>

<input type="text" placeholder="Last Name*" required>

</div>

<div class="input-group">

<input type="email" placeholder="Email Address*" required>

<input type="tel" placeholder="Phone Number*" required>

</div>

<textarea placeholder="Message*" required></textarea>


<button type="submit">Send</button>

</form>

</div>

</div>

<footer class="footer">

<p>© 2024. All Rights Reserved.</p>

</footer>

</body>

</html>

OUTPUT:

You might also like