Ipdc 2 (Paper)

Web Development (3151606) (220760116016)
Practical : 1 & 2
AIM : Write a Program to use basic tags of HTML.
 HTML Document Structure :-

<html>
<head>
<title> website title </title>
</head>
<body>
Page content……………..
……………………………
<!- - for commenting Code - ->
</body>
</html>
● Formatting and Font Tags :
Tag Description Tag Description

<b> Bold effect to text <br> Break the line
<i> Italic effect to the text <hr> Draw the horizontal line
<u> Underline effect to the text <p> Paragraph tag
<tt> Typewriter effect to the text <pre> Pre formatted tag
<del> Delete effect to the text line <sup> Superscripted text
<big> Define Big text <sub> Subscripted text
<small> Define Small text <center Define the text at center
>
<marquee Rotated effect to the text <font> Font tag
>
1
Web Development (3151606) (220760116016)
Html code (for Formatting Tag):
<html>
<head>
<title>This is my first web page </title>
</head>
<body>
<b>ssasit</b><br>
<i> ssasit </i><br>
<u> ssasit </u><br>
<del> ssasit </del><br>
<big> web devlopment </big><br>

<small> web devlopment </small><br>
<marquee>This is the marquee tage to use slide effect </marquee><br><hr>
<p> My name is Krish Gabani. This is my first practical in web development. </p>
<pre>Web development
A html practical program for web development.
</pre>
<p> Math expression :10x<sup>2</sup></p>
<p><b>Chemical formula of water:</b> H<sub>2</sub>O </p>
<center>Web Development</center>
<font size="5">Welcome To My First WD Program</font>

</body>
</html>
2
Web Development (3151606) (220760116016)
● Heading tags :
Tag Point Size
<h1> 24 pt
<h2> 18 pt
<h3> 12 pt
<h4> 12 pt Bold
<h5> 10 pt
<h6> 7 pt
Html code (for Heading Tag) :
<html>
<head>
<title> Heading Tags </title>
</head>
<body>
<h1>wd </h1>
<h2> wd </h2>
<h3> wd </h3>
<h4> wd </h4>
<h5> wd </h5>
<h6> wd </h6>
3
Web Development (3151606) (220760116016)
</body> </html>
● List Tag :
Tag Description
<ol> Define an Ordered list
<ul> Define an Unordered list
<li> List item
<dl> Define a definition list
<dt> Define an item in as definition list
<dd> Define a description of an item in a definition list
Html code (for List Tag) :
<html>
<head>
<title> List Tag </title>
</head>
<body>
<h2><b><center>List Tag</center></b>
<h4>List of available courses:</h4>
<ul>
4
Web Development (3151606) (220760116016)
<li>Data Structures & Algorithm</li>

<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
</ul>
<b><h4>Data Structures topics:</h4></b>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
</ol>
<h4>Roman Numbers Ordered List :</h4>
<ol type="I">
<li> JavaScript
<ol type="a">
<li>React</li>
<li>Vue.js</li>
</ol></li>
<li>Python
<ol type="a">
<li>Django</li>
<li>Flask</li>
</ol>
</li>
<li>Java</li>
<li>C++</li>
</ol>
<h4>Grocery List :</h4>
<ul type="circle">
<li>Bread</li>
<dl>
<li><dt>Coffee</dt></li>
<dd>- 500 gms</dd>
<li><dt>Milk</dt></li>
<dd>- 1 ltr Tetra Pack</dd>
</dl>
</ul>
</body>
</head>
5
Web Development (3151606) (220760116016)
● Image Tag :
<img> : Display the Image (It have align, src, border, width, height, alt, hspace, vspace etc.
attribute )
Html code (for Image tag) :

<html>
<head>
<title> image tag </title>
</head>
<body>
<img src="C:\Users\krish\Downloads\ai-generated-picture-of-a-tiger-walking-in-the-forest-
photo.jpg" align="left" width="600" height="400" hspace="200" vspace="50" border="5"
alt="Tiger" >
</body>
6
Web Development (3151606) (220760116016)
</html>
● Hyper link:-
<html>
<head>
<title>hyper link </title>
<body>
<a href="D:\I.T. - 5 SEM\WD\Practical\Practical-1.html"> press hear 1! </a> <br>
<a href="D:\I.T. - 5 SEM\WD\Practical\Practical-1-1.html"> press hear 2! </a> <br>
<a href="D:\I.T. - 5 SEM\WD\Practical\list.html"> press hear 3! </a> <br>
<a href="D:\I.T. - 5 SEM\WD\Practical\image.html"> press hear 4! </a> <br>
<br>
<a href="D:\I.T. - 5 SEM\WD\Practical\student.html">Visit!</a>
</body>
</head>
</html>
7
Web Development (3151606) (220760116016)
● Media tag:-
⮚ Two type of the media tag..
1.Audio
2.Video
Html code (for Media tag) :
<html>
<head>
<title> Audio And Video </title>
<body>
8
Web Development (3151606) (220760116016)
<br>
<br>
<b><h3> Video Tag </h3></b>

<video width="600" controls>
<source src="C:\Users\krish\Downloads\181015_Extra_DanangDrone_004.mp4">
</video>
<br>
<br>
<b><h3> Audio Tag </h3></b>
<audio controls>
<source src="C:\Users\krish\Downloads\small-group-laughing-6192.mp3">
</audio>
</body>
</head>
</html>
9
Web Development (3151606) (220760116016)
● Table tag:-
<html>
<head>
<title> Table Tag </title>
</head>
<body>
<h2> Table Tag</h2>
<table border="width:50%">
<tr>
<th colspan="2">Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
<tr>
<td>KRISH</td>
<td>MEET</td>
<td>19</td>
<td rowspan="2"> Male </td>

</tr>
10
Web Development (3151606) (220760116016)
<tr>
<td>Prins</td>
<td>Yash</td>
<td>25</td>
</tr>
</table>
</body>
</html>
11
Web Development (3151606) (220760116016)
● Frameset tag:-
<html>
<head>
<title>frameset attribute</title>
</head>
<frameset rows="20%, 30%, 20%">

<frame name="top" src="C:\Users\Student\Desktop\CSS- Syntax.webp" />
<frame name="main" src="C:\Users\Student\Desktop\CSS- Syntax.webp" />
<frame name="bottom" src="C:\Users\Student\Desktop\CSS- Syntax.webp" />
<noframes>
<body>The browser you are working does not support frames.</body>

</noframes>
</frameset>
</html>
12
Web Development (3151606) (220760116016)
● Meta tag:-
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>All meta information goes in the head section... It is the end of the practical 1 and 2……</p>
</body>
</html>
13
Web Development (3151606) (220760116016)
PRACTICAL :- 3
AIM :- HTML code for Student Registration Form.
<html>
14
Web Development (3151606) (220760116016)
<head>
<title> Student Registration Form </title>
</head>
<body>
<h2 align="middle"> Student Registration Form </h2>
<form>
<label> First Name : </label>

<input type="text" name="first name" size="15"><br><br>
<label> Middle Name : </label>

<input type="text" name="middle name" size="15"><br><br>
<label> Last Name : </label>

<input type="text" name="last name" size="15"><br><br>
<label> Address : </label>

<textarea type="textarea" id="address" name="address" required=""></textarea><br><br>
<label> Gender : </label>

<input type="radio" id="gender" name="gender" value="male">
<label> Male </label>
<input type="radio" id="gender" name="gender" value="female">
<label> Female </label><br><br>
<label> Course : </label>

<select>
<option> Select Option : </option>
<option> BE </option>
<option> BCA </option>
<option> BBA </option>
<option> BSC </option>
</Select><br><br>
<label> Email : </label>

<input type="email" id="email" name="email" required=""><br><br>
<label> Password : </label>

<input type="password" name="password" required=""><br><br>
15
Web Development (3151606) (220760116016)
<label> Select a file : </label>

<input type="file" id="myfile" name="myfile"><br><br>
<label> Submit </label>

<input type="submit" name="submit" required=""><br>
</form>
</body>
</html>
AIM :- HTML code for Railway Registration Form.
<html>
<head>
<title> railway Registration Form </title>
</head>
<body>
16
Web Development (3151606) (220760116016)
<h2 align="middle"> Railway Registration Form </h2>
<form>
<label> First Name : </label>

<input type="text" name="first name" size="15"><br><br>
<label> Middle Name : </label>

<input type="text" name="middle name" size="15"><br><br>
<label> Last Name : </label>

<input type="text" name="last name" size="15"><br><br>
<label> Address : </label>

<textarea type="textarea" id="address" name="address" required=""></textarea><br><br>
<label> Gender : </label>

<input type="radio" id="gender" name="gender" value="male">
<label> Male </label>
<input type="radio" id="gender" name="gender" value="female">
<label> Female </label><br><br>
<label> DOB : </label>

<select>
<option> DATE </option>
<option> 1 </option>
17
Web Development (3151606) (220760116016)
</select>
<select>
<option> MONTH </option>
</select>
<select>
<option> YEAR </option>
</select><br><br>
<label> AADHAR CARD NO : </label>

18
Web Development (3151606) (220760116016)
<input type="text" name="aadhar" size="12" required><br><br>
<label> OCCUPATION : </label>

<input type="text" name="occupation" required><br><br>
<label> EMAIL : </label>

<input type="email" id="email" name="email" required=""><br><br>
<label> CONTACT NO : </label>

<input type="text" name="contect" size="10" required=""><br><br>
<label> PINCODE : </label>

<input type="text" name="pincode" size="6" required=""><br><br>
<label> STATE : </label>

<input type="text" name="state" required=""><br><br>
<label> NATIONALITY </label>

<select>
<option> Select Your Nation </option>
<option> India </option>
<option> U.S.A </option>
<option> Canada </option>
</Select>
<br><br>
<label> Submit </label>

<input type="submit" name="submit" required=""><br>
</form>
</body>
</html>
19
Web Development (3151606) (220760116016)
PRACTICAL :- 4
AIM :- Create a RESUME using HTML and CSS.
<!DOCTYPE html>
20
Web Development (3151606) (220760116016)
<html lang="en">
<head>
<title>Resume</title>
<style>
body {
font-family: 'Times New Roman';
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.resume {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: relative;
}
header {
text-align: left;
margin-bottom: 20px;
position: relative;
}
header img {
position: absolute;
top: 0;
right: 0;
width: 130px;
height: auto;
border-radius: 50%;
border: 2px solid #333;
}
header h1 {
font-size: 2.5em;
21
Web Development (3151606) (220760116016)
margin: 0;
color: #333;
}
header p {
margin: 5px 0;
font-size: 1.2em;
color: #666;
}
address p {
margin: 5px 0;
font-size: 1em;
color: #444;
}
section {
}
h2 {
border-bottom: 2px solid #333;
padding-bottom: 5px;
font-size: 1.5em;
color: #333;
}
ul {
list-style: disc;
margin: 0;
padding-left: 20px;
}
.job,
.degree {
}
.job h3, .degree h3 {

22
Web Development (3151606) (220760116016)
margin: 0;
font-size: 1.2em;
color: #333;
}
.job p,
.degree p {
margin: 5px 0;
color: #666;
}
.job ul, .degree ul {

margin-top: 5px;
}
@media (max-width: 600px) {

.resume {
padding: 10px;
}
header h1 {
font-size: 2em;
}
header p {
font-size: 1em;
}
h2 {
font-size: 1.2em;
}
header img {
width: 100px; /* Adjust the size of the photo for smaller screens */
}
}
</style>
</head>
<body>
<div class="resume">
23
Web Development (3151606) (220760116016)
<header>
<img src="D:\I.T. - 5 SEM\WD\Practical\2806146a-8fa3-425b-8793-cf5102ee12ad.jpeg"
alt="KRISH GABANI">
<h1>KRISH GABANI</h1>
<p>Web Developer</p>
<p>Email: <a
href="mailto:krishgabani13@gmail.com">krishgabani13@gmail.com</a></p>
<p>Phone: +91 9510289648</p>
<a href="https://www.linkedin.com/in/krish-gabani-a40045247?
utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_ap
p">LinkedIn</a>
</header>
<section class="summary">
<h2>Summary</h2>
<p>Enthusiastic and results-driven web developer with 5+ years of experience in
building scalable web applications. Adept at both front-end and back-end technologies, with a
keen eye for detail and a passion for solving complex problems.</p>
</section>
<section class="skills">
<h2>Skills</h2>
<ul>
<li>HTML, CSS, JavaScript</li>
<li>React, Node.js</li>
<li>Python, Django</li>
<li>Git, Docker</li>
</ul>
</section>
<section class="experience">
<h2>Experience</h2>
<div class="job">
<h3>Senior Web Developer</h3>
<p><strong>ABC Corp</strong> | June 2024 - Present</p>
<ul>
<li>Led the development of a high-traffic e-commerce platform, increasing sales by
30%.</li>
<li>Implemented new features and improved existing ones based on client
feedback.</li>
24
Web Development (3151606) (220760116016)
<li>Collaborated with designers and product managers to ensure optimal user

experience.</li>
</ul>
</div>
<div class="job">
<h3>Web Developer</h3>
<p><strong>XYZ Inc</strong> | January 2020 - May 2024</p>
<ul>
<li>Developed and maintained company website and intranet.</li>
<li>Optimized web applications for performance and scalability.</li>
<li>Provided technical support and training to team members.</li>
</ul>
</div>
</section>
<section class="education">
<h2>Education</h2>
<div class="degree">
<h3>Gujarat Technological University</h3>
<p><strong>Bachelor of Technology in Information Technology</strong> |
Graduated: 2019</p>
</div>
</section>
</div>
</body>
</html>
25
Web Development (3151606) (220760116016)
PRACTICAL :- 5
26
Web Development (3151606) (220760116016)
AIM : Create simple application that will do the following Declare

And assign variable, Operators and expression in JavaScript,
Looping in JavaScript, Declare an Array, User defined functions in
Javascript, Built in functions in Javascript, Dialog boxes.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practical 5</title>
</head>
<body>
<script>
let sum = 0;
const a = [1, 2, 3, 4, 5];
document.write("Maximum: " + Math.max(...a) + "<br>");
function add() {
for (let i = 0; i < a.length; i++) { // Declare 'i' with 'let'
sum += a[i]; // Use shorthand += for addition
}
document.write("Addition: " + sum + "<br>");
}
add();
alert("Start");
</script>
</body>
</html>
27
Web Development (3151606) (220760116016)
PRACTICAL :- 6
28
Web Development (3151606) (220760116016)
AIM: For the Form created in HTML provide various form values
checking passed by the user.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background-color: gray;
font-family: Arial, sans-serif;
color: white;
padding: 20px;
}
label {
display: block;
margin-top: 10px;
}
input {
padding: 8px;
margin-top: 5px;
}
input[type="submit"] {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>Registration Form</h1>
<form onsubmit="return validateForm()" action="pra-6.html">

<label for="nl">Name:</label>
29
Web Development (3151606) (220760116016)
<input type="text" id="nl" name="name"><br>
<label for="n2">Contact no:</label>

<input type="text" id="n2" name="phone" size="10"><br>
<label for="n3">Password:</label>
<input type="password" id="n3" name="pass"><br>
<label for="n4">Confirm password:</label>

<input type="password" id="n4" name="repass"><br>
<label for="n5">Email:</label>
<input type="email" id="n5" name="email"><br>
<input type="submit" value="Submit"/>

</form>
<script>
function validateForm() {
var a = document.getElementById('nl').value;
var b = document.getElementById('n2').value;
var c = document.getElementById('n3').value;
var d = document.getElementById('n4').value;
var e = document.getElementById('n5').value;
if (a === "" || b === "" || c === "" || d === "" || e === "") {
alert("All the fields are mandatory...");
return false;
} else if (b.length !== 10) {
alert("Contact number should be 10 digits...");
return false;
} else if (isNaN(b)) {
alert("Characters not allowed in contact number...");
return false;
} else if (c !== d) {
alert("Password and confirm password should match...");
return false;
} else if (!isValidEmail(e)) {
alert("Please enter a valid email...");
return false;
} else {
30
Web Development (3151606) (220760116016)
return true;
}
}
function isValidEmail(e) {
var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
return emailRegex.test(e);
}
</script>
</body>
</html>
PRACTICAL :- 7
31
Web Development (3151606) (220760116016)
AIM :- Write a JavaScript that uses a function to calculate how

many days are left on your birthday?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Birthday Countdown</title>
</head>
<body>
<h3>Enter Your Birthday:</h3>
<input type="date" id="bday" />
<button onclick="calculateDays()">Submit</button>
<h1 id="op"></h1>
<script>
function calculateDays() {
const input = document.getElementById('bday').value;
const op = document.getElementById('op');
if (!input) {
op.innerText = "Please select your birthday!";
return;
}
const bdate = new Date(input);

const today = new Date();
bdate.setFullYear(today.getFullYear());
if (bdate < today) {

bdate.setFullYear(today.getFullYear() + 1);
}
const remainingDays = (bdate - today) / (1000 * 60 * 60 * 24);

op.innerText = `Your birthday is in ${Math.ceil(remainingDays)} days!`;
}
</script>
</body>
</html>
32
Web Development (3151606) (220760116016)
PRACTICAL :- 8
33
Web Development (3151606) (220760116016)
AIM: Write a JavaScript that handles following mouse events and

add necessary elements.
1) Java Script gives the key code for the key pressed.
2) When the key is released the background should change to blue.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Changing BG and Text Colour</h1>
<label for="bgColorSelect">Background colour:</label>

<select id="bgColorSelect" onchange="changeBgColor()">
<option>Select Background Colour</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
<option value="pink">pink</option>
</select> <br> <br>
<label for="textColorSelect">Text colour:</label>

<select id="textColorSelect" onchange="changeTextColor()">
<option>Select Text Colour</option>
<option value="white">white</option>
<option value="green">green</option>
<option value="red">red</option>
</select>
<script>
function changeBgColor() {
var selectBgColor = document.getElementById('bgColorSelect').value;
document.body.style.backgroundColor = selectBgColor;
}
function changeTextColor() {
34
Web Development (3151606) (220760116016)
var selectTextColor = document.getElementById('textColorSelect').value;

document.body.style.color = selectTextColor;
}
</script>
</body>
</html>
35

Ipdc 2 (Paper)

Uploaded by

Copyright:

Available Formats

Ipdc 2 (Paper)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Ipdc 2 (Paper)

Uploaded by

Copyright:

Available Formats

Web Development (3151606) (220760116016)

AIM : Write a Program to use basic tags of HTML.

 HTML Document Structure :-

● Formatting and Font Tags :

Tag Description Tag Description

Html code (for Formatting Tag):

<big> web devlopment </big><br>

<marquee>This is the marquee tage to use slide effect </marquee><br><hr>

<p> Math expression :10x<sup>2</sup></p>

<p><b>Chemical formula of water:</b> H<sub>2</sub>O </p>

<font size="5">Welcome To My First WD Program</font>

Html code (for Heading Tag) :

Html code (for List Tag) :

<li>Data Structures & Algorithm</li>

Html code (for Image tag) :

⮚ Two type of the media tag..

Html code (for Media tag) :

<b><h3> Video Tag </h3></b>

<h2> Table Tag</h2>

<td rowspan="2"> Male </td>

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

<body>The browser you are working does not support frames.</body>

AIM :- HTML code for Student Registration Form.

<label> First Name : </label>

<label> Middle Name : </label>

<label> Last Name : </label>

<label> Address : </label>

<label> Gender : </label>

<label> Course : </label>

<label> Email : </label>

<label> Password : </label>

<label> Select a file : </label>

<label> Submit </label>

AIM :- HTML code for Railway Registration Form.

<h2 align="middle"> Railway Registration Form </h2>

<label> First Name : </label>

<label> Middle Name : </label>

<label> Last Name : </label>

<label> Address : </label>

<label> Gender : </label>

<label> DOB : </label>

<label> AADHAR CARD NO : </label>

<input type="text" name="aadhar" size="12" required><br><br>

<label> OCCUPATION : </label>

<label> EMAIL : </label>

<label> CONTACT NO : </label>

<label> PINCODE : </label>

<label> STATE : </label>

<label> NATIONALITY </label>

<label> Submit </label>

.job h3, .degree h3 {

.job ul, .degree ul {

@media (max-width: 600px) {

<li>Collaborated with designers and product managers to ensure optimal user

AIM : Create simple application that will do the following Declare

document.write("Maximum: " + Math.max(...a) + "<br>");

<form onsubmit="return validateForm()" action="pra-6.html">

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

<label for="n2">Contact no:</label>