WEB TECHNOLOGY PROJECT FILE – B.
Tech CSE
Complete practical file including theory + code for all experiments.
Index
1. Basic HTML Elements 2. Table Tag – Class Timetable 3. Profile Page 4. External CSS
Stylesheet 5. Multimedia Webpage 6. Signup Form with JavaScript Validation 7. JavaScript Leap
Year Program 8. JavaScript Temperature Converter
1. Basic HTML Elements – Theory + Code
HTML uses tags to structure a webpage. Below is sample code showing headings, paragraph, link,
image and lists:
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Elements</title>
</head>
<body>
<h1>Welcome to HTML</h1>
<p>This is a paragraph example.</p>
<a href="[Link] Site</a>
<img src="[Link]" width="200">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
</body>
</html>
2. Table Tag – Class Timetable
Tables are created using <table>, <tr>, <td> tags.
<table border="1">
<tr>
<th>Day</th>
<th>9-10</th>
<th>10-11</th>
</tr>
<tr>
<td>Monday</td>
<td>Maths</td>
<td>Physics</td>
</tr>
<tr>
<td>Tuesday</td>
<td>EG</td>
<td>Programming</td>
</tr>
</table>
3. Profile Page – HTML Code
<!DOCTYPE html>
<html>
<head><title>My Profile</title></head>
<body>
<h2>My Profile</h2>
<p>Name: Knight</p>
<p>Course: [Link] CSE</p>
<p>Hobbies: Coding, Reading</p>
<p>Achievements: Hackathon Winner</p>
</body>
</html>
4. External CSS Stylesheet
/* [Link] */
body {
background-color: #f0f0f0;
font-family: Arial;
}
h1 {
color: blue;
}
p{
font-size: 18px;
}
5. Multimedia Web Page
<!DOCTYPE html>
<html>
<body>
<h2>Multimedia Page</h2>
<video width="300" controls>
<source src="video.mp4" type="video/mp4">
</video>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
</body>
</html>
6. Signup Form with JavaScript Validation
<!DOCTYPE html>
<html>
<body>
<form onsubmit="return validate()">
Username: <input type="text" id="user"><br>
Password: <input type="password" id="pass"><br>
Phone: <input type="text" id="phone"><br>
<input type="submit">
</form>
<script>
function validate(){
let u = [Link]("user").value;
let p = [Link]("pass").value;
let ph = [Link]("phone").value;
if([Link] < 3) { alert("Username too short"); return false; }
if([Link] < 6) { alert("Password too short"); return false; }
if([Link] != 10) { alert("Invalid phone"); return false; }
return true;
}
</script>
</body>
</html>
7. JavaScript Leap Year Program
let year = prompt("Enter year:");
year = parseInt(year);
if((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)){
alert("Leap Year");
}
else{
alert("Not a Leap Year");
}
8. JavaScript Temperature Converter
function toF(c){
return (c * 9/5) + 32;
}
function toC(f){
return (f - 32) * 5/9;
}
alert("25C in Fahrenheit = " + toF(25));
alert("77F in Celsius = " + toC(77));