Scribd
Upload
13 views37 pages

WP SL

The document outlines various practical exercises in HTML for a web programming course, including creating headings, paragraphs, lists, tables, forms, and using tags like <img>, <iframe>, and <frameset>. Each practical section includes an aim, program code, and expected output. The exercises demonstrate fundamental web development concepts and HTML syntax.

Uploaded by

gamingwithblaster11
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
13 views37 pages

WP SL

The document outlines various practical exercises in HTML for a web programming course, including creating headings, paragraphs, lists, tables, forms, and using tags like <img>, <iframe>, and <frameset>. Each practical section includes an aim, program code, and expected output. The exercises demonstrate fundamental web development concepts and HTML syntax.

Uploaded by

gamingwithblaster11
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/ 37

NAME: SHUBHAM M.

LAD Web Programming (3160713)

PRACTICAL – 1

Design a simple HTML

PRACTICAL - 1.1

AIM - WAP in html containing following tag.

- <h1 to h6></h1 to /h6>


- <p></p>
- <br> and <hr>
- &nbsp;
- <!-->
PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Webpage</title>
</head>
<body>
<!-- This is a comment -->
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is a paragraph. It may contain some text or other elements.</p>
<!-- Line break -->
<br>
<p>This is some text before a horizontal rule.</p>
<!-- Horizontal rule -->
<hr>
<p>This is some text after the horizontal rule.</p>
<!-- Non-breaking space -->
This is some text with&nbsp;non-breaking space.
</body>
</html>
</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 1
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 2
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.2

AIM: WAP in html, which demonstrate all the formatting tag.

PROGRAM:

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

<body>
<p>
<strong>Bold Text</strong>,<br>
<em>Italic Text</em>,<br>
<u>Underline Text</u>,<br>
<del>Strikethrough Text</del>,<br> H
<sub>2</sub>O,<br> E=mc
<sup>2</sup>,<br>
<mark>Marked Text</mark>,<br>
<ins>Inserted Text</ins>,<br>
<s>Deleted Text</s>
</p>
</body>

</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 3
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.3

AIM: WAP in html which demonstrate <font> tag.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Tag Demo</title>
</head>
<body>
<p>
This is a
<font color="red">red</font> text.<br> This is a
<font size="5">larger</font> text.<br> This is a
<font face="Arial">different font</font> text.
</p>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 4
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.4

AIM: WAP in html, which demonstrate all types of List.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List Types Demo</title>
</head>
<body>
<h2>Unordered List:</h2>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Banana</li>
</ul>

<h2>Ordered List:</h2>
<ol>
<li>BMW</li>
<li>Toyota</li>
<li>Honda</li>
</ol>

<h2>Definition List:</h2>
<dl>
<dt>Apple</dt>
<dd>A fruit with a sweet taste.</dd>
<dt>BMW</dt>
<dd>A luxury car manufacturer.</dd>
</dl>

<h2>Unstyled List:</h2>
<ul style="list-style-type: none;">
<li>Mercedes</li>
<li>Cherry</li>
<li>Ford</li>
</ul>
</body>
</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 5
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 6
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.5

AIM: WAP in html, which demonstrates color and background facility.

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color and Background Demo</title>
</head>

<body style="color: blue; background-color: lightgray;">


<h1>This is a Heading</h1>
<p>This is a paragraph with some <span style="color: red;">red</span> text.</p>
<p style="background-color: yellow;">This paragraph has a yellow background.</p>
</body>

</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 7
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.6

AIM: WAP in html to demonstrate use of <img> and <area> tag.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Map Demo</title>
</head>
<body>
<h1>Image tag example</h1>
<img src="/fruits.png" usemap="#fruit" alt="Fruit Image">

<map name="fruit">
<area shape="rect" coords="0,0,50,50" href="apple.html" alt="apple">
<area shape="circle" coords="100,100,50" href="orange.html" alt="orange">
<area shape="polygon" coords="200,200,250,250,200,300" href="banana.html"
alt="banana">
</map>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 8
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.7

AIM: WAP in html to demonstrate Timetable document using fully<table> tag.

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timetable</title>
<style>
table {
width: 100%;
border-collapse: collapse
}

th,
td {
border: 1px solid;
padding: 8px;
text-align: center
}
</style>
</head>

<body>
<h1>Weekly Timetable</h1>
<table>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>9:00 - 10:00</td>
<td>Math</td>
<td>Science</td>
<td>English</td>

VIEAT/B.E/SEM-VI/230943107029 Page - 9
NAME: SHUBHAM M. LAD Web Programming (3160713)

<td>History</td>
<td>Geography</td>
</tr>
<tr>
<td>10:00 - 11:00</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Math</td>
<td>Biology</td>
<td>Computer Science</td>
</tr>
<tr>
<td>11:00 - 12:00</td>
<td>History</td>
<td>Geography</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Math</td>
</tr>
</table>
</body>

</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 10
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 1.8
AIM: WAP in html which demonstrate <frameset><frame><noframe> and <iframe>.

PROGRAM:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frames Example</title>
</head>

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


<frame src="left.html">
<frame src="right.html">
<noframes>

<body>
<p>This browser does not support frames.</p>
</body>
</noframes>
</frameset>

<body>
<h1>Frames Example</h1>
<h2>Inline Frame (iframe)</h2>
<iframe src="iframe_content.html" width="300" height="200" frameborder="0"
scrolling="auto"></iframe>
</body>s
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 11
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 2

Design a simple Form for

PRACTICAL - 2.1

AIM: Student Registration

PROGRAM:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h2 {
text-align: center;
}

form {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 10px;
}

input[type="text"],

VIEAT/B.E/SEM-VI/230943107029 Page - 12
NAME: SHUBHAM M. LAD Web Programming (3160713)

input[type="email"],
select {
width: calc(100% - 22px);
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

input[type="submit"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>Student Registration Form - GTU University</h2>
<form action="#" method="post">
<label>Student Name: <input type="text" name="student_name" required></label>
<label>Student ID: <input type="text" name="student_id" required></label>
<label>Email: <input type="email" name="email" required></label>
<label>Department:
<select name="department">
<option value="Computer Engineering">Computer Engineering</option>
<option value="Information Technology">Information Technology</option>
<option value="Mechanical Engineering">Mechanical Engineering</option>
<option value="Civil Engineering">Civil Engineering</option>
<option value="Electrical Engineering">Electrical Engineering</option>
</select>
</label>
<label>Semester: <input type="text" name="semester" required></label>
<input type="submit" value="Submit">
</form>
</body>
</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 13
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 14
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL - 2.2
AIM - Railway Reservation

PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Railway Reservation Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

h2 {
text-align: center;
}

form {
max-width: 400px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-bottom: 10px;
}

input[type="text"],
input[type="date"],
select {
width: calc(100% - 22px);
padding: 8px;
margin-bottom: 10px;

VIEAT/B.E/SEM-VI/230943107029 Page - 15
NAME: SHUBHAM M. LAD Web Programming (3160713)

border: 1px solid #ccc;


border-radius: 4px;
box-sizing: border-box;
}

input[type="submit"] {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}

input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>

<body>
<h2>Railway Reservation Form</h2>
<form action="#" method="post">
<label>Passenger Name: <input type="text" name="passenger_name" required></label>
<label>Train Number: <input type="text" name="train_number" required></label>
<label>Departure Station: <input type="text" name="departure_station"
required></label>
<label>Destination Station: <input type="text" name="destination_station"
required></label>
<label>Departure Date: <input type="date" name="departure_date" required></label>
<input type="submit" value="Reserve Ticket">
</form>
</body>

</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 16
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 17
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 3

AIM: Write HTML to generate structure like Resume with all required
Details & candidate photo.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resume</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
}
h1, h2 {
color: #007bff;
}
img {
max-width: 200px;
height: auto;
border: 2px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
}
p{
margin-bottom: 10px;
}
.section {
border-bottom: 1px solid #ccc;
margin-bottom: 20px;
padding-bottom: 20px;

VIEAT/B.E/SEM-VI/230943107029 Page - 18
NAME: SHUBHAM M. LAD Web Programming (3160713)

}
</style>
</head>
<body>
<div class="container">
<img src="/profile.png" alt="Candidate Photo">
<h1>Jason Statham</h1>
<div class="section">
<h2>Summary</h2>
<p>My name is Jason Statham. I'm a student currently studying at Vidhyadeep
University pursuing a Bachelor of Engineering in Computer Engineering. I was born on 25-
10-2003. You can reach me at [email protected] or 9562177796. I reside in Varachha,
Surat, Gujarat.</p>
</div>
<div class="section">
<h2>Education</h2>
<p>Bachelor of Engineering in Computer Engineering, Vidhyadeep University</p>
</div>
<div class="section">
<h2>Experience</h2>
<p>No work experience</p>
</div>
</div>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 19
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 4

AIM: Develop HTML Page using CSS, which cover image, colour, text,
font, border, box, and margin.

PRACTICAL – 4.1
AIM: Internal
PROGRAM:

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}

.container {
width: 80%;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 2px solid #007bff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #007bff;
margin-bottom: 20px;
}

p{
font-size: 16px;
line-height: 1.6;

VIEAT/B.E/SEM-VI/230943107029 Page - 20
NAME: SHUBHAM M. LAD Web Programming (3160713)

color: #333;
margin-bottom: 20px;
}

img {
display: block;
margin: 0 auto;
max-width: 50%;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
</style>
</head>

<body>
<div class="container">
<h1>Fruits</h1>
<img src="fruits.png" alt="Example Image">
<p>Fruits, with their vibrant colors, succulent textures, and tantalizing flavors, are nature's
delectable treasures. These botanical wonders come in an array of shapes and sizes, each
bearing unique characteristics that appeal to both the palate
and the senses. From the sweet juiciness of a ripe mango to the crisp bite of a freshly
picked apple, fruits offer a symphony of tastes and aromas that elevate culinary experiences
around the globe.</p>
<p>Beyond their delightful taste, fruits are powerhouses of nutrition, packed with
essential vitamins, minerals, and antioxidants that promote overall health and well-being.
Whether it's the vitamin C-rich citrus fruits boosting the immune system
or the potassium-packed bananas supporting heart health, each fruit contributes its own
set of nutritional benefits. Moreover, their high fiber content aids in digestion and helps
maintain a healthy weight, making them indispensable components
of a balanced diet.</p>
<p>Fruits also play a crucial role in cultural traditions and culinary practices worldwide.
They feature prominently in celebrations, rituals, and festive feasts, symbolizing abundance,
prosperity, and vitality. From the pomegranate seeds sprinkled
during Greek weddings to the ceremonial offering of oranges during Chinese New
Year, fruits serve as potent symbols of auspiciousness and good fortune.</p>
</div>
</body>

</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 21
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 22
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 4.2
AIM: External

PROGRAM:
Styles.css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #007bff;
margin-bottom: 20px;
}

p{
font-size: 16px;
line-height: 1.6;
color: #333;
margin-bottom: 20px;
}

img {
display: block;
margin: 0 auto;
max-width: 100%;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

VIEAT/B.E/SEM-VI/230943107029 Page - 23
NAME: SHUBHAM M. LAD Web Programming (3160713)

Index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fruits</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<div class="container">
<h1>Fruits</h1>
<img src="fruits.png" alt="Example Image">
<p>Fruits, with their vibrant colors, succulent textures, and tantalizing flavors, are nature's
delectable treasures. These botanical wonders come in an array of shapes and sizes, each
bearing unique characteristics that appeal to both the palate
and the senses. From the sweet juiciness of a ripe mango to the crisp bite of a freshly
picked apple, fruits offer a symphony of tastes and aromas that elevate culinary experiences
around the globe.</p>
<p>Beyond their delightful taste, fruits are powerhouses of nutrition, packed with
essential vitamins, minerals, and antioxidants that promote overall health and well-being.
Whether it's the vitamin C-rich citrus fruits boosting the immune system
or the potassium-packed bananas supporting heart health, each fruit contributes its own
set of nutritional benefits. Moreover, their high fiber content aids in digestion and helps
maintain a healthy weight, making them indispensable components
of a balanced diet.</p>
</div>
</body>

</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 24
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 25
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 4.3
AIM: Inline CSS
PROGRAM:
<!DOCTYPE html>
<html lang="en">

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

<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding:


0;">
<div class="container" style="max-width: 800px; margin: 20px auto; padding: 20px;
background-color: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 0 10px
rgba(0, 0, 0, 0.1);">
<h1 style="text-align: center; color: #007bff; margin-bottom: 20px;">Fruits</h1>
<img src="fruits.png" alt="Example Image" style="display: block; margin: 0 auto; max-
width: 100%; border-radius: 8px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);">
<p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 20px;">Fruits,
with their vibrant colors, succulent textures, and tantalizing flavors, are nature's delectable
treasures. These botanical wonders come in an array of shapes and sizes, each bearing unique
characteristics that appeal to both the palate
and the senses. From the sweet juiciness of a ripe mango to the crisp bite of a freshly
picked apple, fruits offer a symphony of tastes and aromas that elevate culinary experiences
around the globe.</p>
<p style="font-size: 16px; line-height: 1.6; color: #333; margin-bottom: 20px;">Beyond
their delightful taste, fruits are powerhouses of nutrition, packed with essential vitamins,
minerals, and antioxidants that promote overall health and well-being. Whether it's the vitamin
C-rich citrus fruits boosting the immune system
or the potassium-packed bananas supporting heart health, each fruit contributes its own
set of nutritional benefits. Moreover, their high fiber content aids in digestion and helps
maintain a healthy weight, making them indispensable components
of a balanced diet.</p>
</div>
</body>

</html>

VIEAT/B.E/SEM-VI/230943107029 Page - 26
NAME: SHUBHAM M. LAD Web Programming (3160713)

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 27
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 5

AIM: Create one box model with its all style properties.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Model Example</title>
<style>
.box {
width: 300px;
height: 200px;
padding: 20px;
margin: 20px;
border: 2px solid #333;
background-color: #f4f4f4;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 10px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 18px;
color: #333;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 28
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 6

AIM: Make an application which check user name and password with java
script. And user name and password are correct then navigate next page.

PROGRAM:

Index.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
</head>

<body>
<h2>Login</h2>
<form id="loginForm" onsubmit="return checkCredentials()">
<label for="username">Username:</label>
<input type="text" id="username" required><br><br>

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

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


</form>

<script>
function checkCredentials() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;

if (username === "admin" && password === "admin123") {


window.location.href = "nextpage.html";
return false;
} else {
alert("Incorrect username or password. Please try again.");
return false;
}
}
</script>
</body>

VIEAT/B.E/SEM-VI/230943107029 Page - 29
NAME: SHUBHAM M. LAD Web Programming (3160713)

</html>

nextpage.html
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Page</title>
</head>

<body>
<h2>Welcome to the Next Page!</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione beatae eius similique
veniam ipsam possimus tempora sapiente, natus voluptate rem! Quisquam dolore officiis, sunt
corporis tempore vero ipsum fugit obcaecati repudiandae nesciunt atque explicabo praesentium
id quidem dignissimos. Similique commodi magnam culpa nemo a ad ut eius enim eos
aliquid.</p>
</body>

</html>a

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 30
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 7

AIM: Write a JavaScript that uses a loop, which searches a word in


sentence held in an array, returning the index of the word.

PROGRAM:

function searchWord(sentence, targetWord) {


for (let i = 0; i < sentence.length; i++) {
if (sentence[i] === targetWord) {
return i;
}
}
return -1;
}

// Example usage:
const sentence = ["Vidhya", "deep", "University", "Kim", "Anita", "Surat", "Gujarat",
"India"];
const targetWord = "Kim";
const index = searchWord(sentence, targetWord);
if (index !== -1) {
console.log(`The word "${targetWord}" is found at index ${index}.`);
} else {
console.log(`The word "${targetWord}" is not found in the sentence.`);
}

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 31
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 8

AIM: Write a JavaScript that handles following mouse events add necessary
elements.
(i) JavaScript gives the key code for the key pressed.
(ii) If the key pressed is “a”,”e”,”i”,”o”,”u” the script should announce that vowel is
pressed.
(iii) When the key is released background should change to blue.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Event Handling</title>
</head>
<body>
<h1 id="text"></h1>
<h1 id="isVovel"></h1>
<script>
document.addEventListener("keydown", function(event) {
var keyCode = event.keyCode;
document.getElementById('text').innerText = keyCode;
if (keyCode === 65 || keyCode === 69 || keyCode === 73 || keyCode === 79 ||
keyCode === 85) {
document.getElementById('isVovel').innerText = "Vowel is pressed.";
} else {
document.getElementById('isVovel').innerText = "";
}
});
document.addEventListener("keyup", function(event) {
document.body.style.backgroundColor = "blue";
});
</script>
</body>
</html>
OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 32
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 9

AIM: Write a PHP program to find whether entered year is leap year or
not.

PROGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
</head>
<body>
<h2>Leap Year Checker</h2>
<form method="post">
Enter a year: <input type="text" name="year">
<input type="submit" name="submit" value="Check">
</form>

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$year = $_POST["year"];
if (is_numeric($year)) {
echo ($year % 4 == 0 && $year % 100 != 0) || ($year % 400 == 0) ? "<p>$year is a
leap year.</p>" : "<p>$year is not a leap year.</p>";
} else {
echo "<p>Please enter a valid year.</p>";
}
}
?>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 33
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 10

AIM: Write a program to Sum and multiply two numbers using


JavaScript.
PROGRAM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum and Multiply</title>
</head>
<body>
<h2>Sum and Multiply</h2>
<form id="calculatorForm" onsubmit="return calculate()">
<label for="num1">Enter first number:</label>
<input type="number" id="num1" required><br><br>
<label for="num2">Enter second number:</label>
<input type="number" id="num2" required><br><br>

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


</form>
<script>
function calculate() {
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);

var sum = num1 + num2;


var product = num1 * num2;
alert("Sum: " + sum + "\nProduct: " + product);

return false; // Prevent form submission


}
</script>
</body>
</html>
OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 34
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 11

AIM: Introduction to php.

PHP, which stands for "Hypertext Preprocessor", is a widely-used server-side scripting


language designed for web development. It was originally created by Danish-Canadian
programmer Rasmus Lerdorf in 1994 and has since become one of the most popular
programming languages for web development.

Instead of lots of commands to output HTML (as seen in C or Perl), PHP pages contain HTML
with embedded code that does "something" (in this case, output "Hi, I'm a PHP script!"). The
PHP code is enclosed in special start and end processing instructions <?php and ?> that allow
you to jump into and out of "PHP mode."

What distinguishes PHP from something like client-side JavaScript is that the code is executed
on the server, generating HTML which is then sent to the client. The client would receive the
results of running that script, but would not know what the underlying code was. You can even
configure your web server to process all your HTML files with PHP, and then there's really no
way that users can tell what you have up your sleeve.

The best part about using PHP is that it is extremely simple for a newcomer, but offers many
advanced features for a professional programmer. Don't be afraid to read the long list of PHP's
features. You can jump in, in a short time, and start writing simple scripts in a few hours.

Features of PHP:

1. Server-Side Scripting: PHP is primarily used for server-side scripting, meaning that PHP
scripts are executed on the server, generating dynamic web pages which are then sent to the
client's web browser.
s
2. Open Source: PHP is an open-source scripting language, which means it is freely available
to download, use, and modify. This has contributed to its widespread adoption and continuous
improvement through community contributions.

3. Cross-Platform Compatibility: PHP is compatible with various operating systems


including Windows, macOS, Linux, and Unix, making it a versatile choice for web
development on different platforms.

VIEAT/B.E/SEM-VI/230943107029 Page - 35
NAME: SHUBHAM M. LAD Web Programming (3160713)

4. Easy to Learn: PHP has a simple and straightforward syntax, making it relatively easy for
beginners to learn and start developing web applications quickly.

5. Integration with HTML: PHP code can be embedded directly into HTML, allowing
developers to mix PHP and HTML seamlessly within the same document, making it easy to
create dynamic web pages.

6. Support for Databases: PHP provides built-in support for a wide range of databases
including MySQL, PostgreSQL, SQLite, and more, allowing developers to interact with
databases to store and retrieve data easily.

7. Extensive Library Support: PHP comes with a rich set of built-in functions and libraries,
as well as a large ecosystem of third-party libraries and frameworks, which provide additional
functionality and help streamline development tasks.

8. Scalability: PHP is suitable for developing small personal websites as well as large-scale
enterprise applications, making it a scalable solution for a wide range of web development
projects.

Applications of PHP:

Dynamic Websites: PHP is commonly used for building dynamic websites, where content can
be generated and customized based on user interactions or database queries.

Web Applications: PHP is used to develop various web-based applications such as content
management systems (e.g., WordPress, Joomla), e-commerce platforms (e.g., Magento,
WooCommerce), and social networking sites.

API Development: PHP can be used to create APIs (Application Programming Interfaces) to
enable communication between different software applications, allowing them to exchange
data and interact with each other.

Command-Line Scripting: PHP can also be used for command-line scripting, allowing
developers to automate tasks and perform system administration tasks directly from the
command line.

VIEAT/B.E/SEM-VI/230943107029 Page - 36
NAME: SHUBHAM M. LAD Web Programming (3160713)

PRACTICAL – 12

AIM: Write a program to Addition of two numbers using php.

PORGRAM:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Addition of Two Numbers</title>
</head>
<body>
<h2>Addition of Two Numbers</h2>
<form method="post">
<label for="num1">Enter first number:</label>
<input type="number" id="num1" name="num1" required><br><br>

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


<input type="number" id="num2" name="num2" required><br><br>

<input type="submit" name="submit" value="Add">


</form>

<?php if ($_SERVER["REQUEST_METHOD"] == "POST") {


echo "<h1>The sum is: " . ($_POST["num1"] + $_POST["num2"]) . "</h1>";
} ?>
</body>
</html>

OUTPUT:

VIEAT/B.E/SEM-VI/230943107029 Page - 37

You might also like