A
PRACTICAL FILE ON
WEB DESIGNING
SESSION :- 2023-24
SUBMITTED TO:- SUBMITTED BY:-
Mrs. Aisha LALIT
{ Asst. Proff. In Comp. BCA 2nd year
Science} Roll No.=1221733011033
University Roll No.=221602014032
Department of Management and
Computer Science ,
Vaish College , Bhiwani
INDEX
Sr.
No. Topic Signature
1 Basic Program in HTML
2 Insert Image in HTML Program
3 Linking In HTML Program
4 Text Formatting In HTML Program
5 Lists in HTML Program
The Radio Button and Text Input in HTML
6
Program
Username and Password Field in HTML
7
Program
8 Checkbox in HTML Program
9 A Complete Form in HTML Program
To Changing BG color And FG color in Java
10
Script Program
Basic Program in HTML
<html>
<head>
<title>Basic Program</title>
</head>
<body>
<h1>My First Program</h1>
<p>Hello World !!</p>
</body>
</html>
Output
My First Program
Hello World !!
Insert Image in HTML Program
<html>
<head>
<title>Insert Image</title>
</head>
<body>
<h1>My Image</h1>
<img src="Image.jpg" >
</body>
</html>
My Image
Output
Linking In HTML Program
<html>
<head>
<title>Create A Link</title>
</head>
<body>
<h1>My Website </h1>
<p>Visit my Favorite website</p>
<a href=”https://www.google.com>Click For Google</a>
</body>
</html>
My Website
Visit my Favorite website
Click For Google
Output
Text Formatting In HTML
Program
<html>
<head>
<title>Text Formatting </title>
</head>
<body>
<b>This is Bold</b>
<i>This is Italic</i>
<u>This is Underline</u>
This is <sub>Subscript</sub> and <sup>Superscript</sup>
</body>
</html>
This is Bold
This is Italic
This is Underline
This is Subscript and Superscript
Output
Lists in HTML Program
<html>
<head>
<title>Lists in HTML </title>
</head>
<body>
<ul type=”Circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li> </ul><br>
<ol type =”1”>
<li>Car </li>
<li>Bike</li>
<li>Scooter</li>
</ol>
</body>
</html>
● Coffee
● Tea
● Milk
1. Car
2. Bike
3. Scooter
The Radio Button and Text Input in
HTML Program
<html>
<head>
<title>My forms</title>
</head>
<body>
<h2><u>Radio and Text</u></h2>
<form action="post">
<div>
<label for="name">Name : </label>
Output
<input type="text" id="name" name="name" placeholder="Enter
Your Name">
</div>
<br>
<div>
<label for="gender">Gender : </label>
<input type="radio" id="male" name="gender">
<label for="male">Male</label>
<input type="radio" id="female" name="gender">
<label for="female">Female</label>
Output
<input type="radio" id="other" name="gender">
<label for="other">Other</label>
</div>
</form>
</body>
</html>
Output
Username and Password Field in HTML
Program
<html>
<head>
<title>My forms</title>
</head>
<body>
<h2><u>Username and Password</u></h2>
<form action="post">
<label for="username">Username : </label>
<input type="text" id="uname" name="uname"
placeholder="Enter Username"> <br>
<label for="password">Password : </label>
<input type="password" id="password" name="password"
placeholder="Enter Your Password">
</form>
</body>
</html>
Output
Checkbox in HTML Program
<html>
<head>
<title>My forms</title>
</head>
<body>
<h2><u>Username and Password</u></h2>
<form action="post">
<div>
<label for="hobby">Hobby : </label>
<input type="checkbox" id="sing" name="hobby">
<label for="sing">Singing</label>
<input type="checkbox" id="dance" name="hobby">
<label for="dance">Dancing</label>
<input type="checkbox" id="play" name="hobby">
<label for="play">Playing</label>
</div>
</form>
</body>
</html>
Output
A Complete Form in HTML Program
<html>
<head>
<title>My forms</title>
</head>
<body>
<h2><u>STUDENT DETAILS</u></h2>
<form action=" post"="">
<div>
<label for="name">Name : </label>
<input type="text" id="name" name="name" placeholder="Enter
Your Name">
</div>
<br>
<div>
<label for="class">Class : </label>
<select name="class" id="class">
<option>Select</option>
<option>1st</option>
<option>2nd</option>
<option>3rd</option>
<option>4th</option>
<option>5th</option>
<option>6th</option>
<option>7th</option>
<option>8th</option>
<option>9th</option>
<option>10th</option>
<option>11th</option>
<option>12th</option>
</select>
</div>
<br>
<div>
<label for="rollno">Roll No. : </label>
<input type="number" id="rollno" name="rollno"
placeholder="Enter Your Roll No.">
</div>
<br>
<div>
<label for="fname">Father's Name : </label> <input type="text"
id="fname" name="fname" placeholder="Enter Your Father Name">
</div>
<br>
<div>
<label for="mname">Mother's Name : </label>
<input type="text" id="mname" name="mname" placeholder="Enter
Your Mother Name">
</div>
<br>
<div>
<label for="gender">Gender : </label>
<input type="radio" id="male" name="gender">
<label for="male">Male</label>
<input type="radio" id="female" name="gender">
<label for="female">Female</label>
<input type="radio" id="other" name="gender">
<label for="other">Other</label>
</div>
<br>
<div>
<label for="hobby">Hobby : </label>
<input type="checkbox" id="sing" name="hobby">
<label for="sing">Singing</label>
<input type="checkbox" id="dance" name="hobby">
<label for="dance">Dancing</label>
<input type="checkbox" id="play" name="hobby">
<label for="play">Playing</label>
</div>
<br>
<button type="reset" id="reset" value="reset">Reset</button>
<button type="submit" id="submit"
value="submit">Submit</button>
</form>
</body>
</html>
Output
To Changing BG color And FG color in Java
Script Program
<html>
<head>
<title>Change Colors</title>
<script>
function changeColors() {
var element = document.getElementById("targetElement");
element.style.backgroundColor = "lightblue"; element.style.color
= "darkred";
}
</script>
</head>
<body>
<h1 id="targetElement">Change My Colors</h1>
<button onclick="changeColors()">Change Colors</button>
</body>
</html>
Output
