Scribd
Upload
3 views

Web Technology lab Program 1-5

The document contains HTML code examples for creating various web pages for a college, including a main page with college details, a class timetable, a student registration form, a multimedia page, and a frameset example. Each section demonstrates different HTML elements such as lists, tables, forms, and multimedia integration. The code is structured to provide essential functionalities for a college's online presence.

Uploaded by

pubgupdate711
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
3 views

Web Technology lab Program 1-5

The document contains HTML code examples for creating various web pages for a college, including a main page with college details, a class timetable, a student registration form, a multimedia page, and a frameset example. Each section demonstrates different HTML elements such as lists, tables, forms, and multimedia integration. The code is structured to provide essential functionalities for a college's online presence.

Uploaded by

pubgupdate711
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/ 12

PART A

1.Design web pages for your college containing college name and Logo, departments list
using href, list tags.

<!DOCTYPE html>

<html>

<head>

<title>K.L.E. Society's Shri Kadasiddheshwar Arts College</title>

</head>

<body bgcolor="silver">

<h1>K.L.E. Society's Shri Kadasiddheshwar Arts College & H.S.Kotambri Science


Institute</h1>

<!-- College Logo using href tag -->

<a href = " " height="400" width="100">College Logo</a>

<h2>Department List</h2>

<ul>

<li>Physics</li>

<li>Chemistry</li>

<li>Mathematics</li>

<li>Biology</li>

<li>Computer Science</li>

</ul>
<h2>Steps to Apply for Admission</h2>

<ol>

<li>Visit the college website</li>

<li>Fill out the application form</li>

<li>Upload required documents</li>

<li>Pay the application fee</li>

<li>Submit and wait for confirmation</li>

</ol>

<h2>Common College Terms</h2>

<dl>

<dt>Semester</dt>

<dd>An academic term that divides the year into two parts.</dd>

<dt>Credit Hours</dt>

<dd>The number of hours a student spends in class per week.</dd>

<dt>GPA</dt>

<dd>Grade Point Average, a measure of a student’s academic performance.</dd>

</dl>

</body>

</html>
2.Create a class timetable using table tag.

<html>

<head>

<title>Class Timetable</title>

<style>

table{width:100%;border:1px solid black;}

th, td{border: 1px solid black;padding: 8px;text-align: center;}

</style>

</head>

<body>

<h2>Class Timetable</h2>

<table>

<tr>

<th>Day</th>

<th>10.00-11.00</th>

<th>11.00-12.00</th>

<th>12.00-1.00</th>

<th>1.00-2.00</th>

<th>3.00-4.00</th>

</tr>

<tr>

<td>Monday</td>

<td>Math</td>

<td>Physics</td>
<td>Chemistry</td>

<td>Lunch</td>

<td>Computer Science</td>

</tr>

<tr>

<td>Tuesday</td>

<td>Physics</td>

<td>Maths</td>

<td>Computer Science</td>

<td>Lunch</td>

<td>Chemistry</td>

</tr>

<tr>

<td>Wednesday</td>

<td>Physics</td>

<td>Chemistry</td>

<td>Computer Science</td>

<td>Lunch</td>

<td>Maths</td>

</tr>

<tr>

<td>Thursday</td>

<td>Maths</td>

<td>Computer Science</td>
<td>Physics</td>

<td>Lunch</td>

<td>Chemistry</td>

</tr>

<tr>

<td>Friday</td>

<td>Chemistry</td>

<td>Computer Science</td>

<td>Maths</td>

<td>Lunch</td>

<td>Physics</td>

</tr>

<tr>

<td>Saturday</td>

<td>Maths</td>

<td>Computer Science</td>

<td>Physics</td>

<td>Lunch</td>

<td>Chemistry</td>

</tr>

</table>

</body>
</html>

3.Write a HTML code to design Student registrations form for your college Admission.

<!DOCTYPE html>

<html>

<head>

<title>Student Registration Form</title>

<style>

body {

background-color: Lightskyblue;

text-align: center;

font-family: 'Times New Roman', Times, serif;

#confirmation

display: none; /* Hide confirmation initially */

font-size: 20px;

font-weight: bold;

color: green;

margin-top: 20px;

</style>

</head>

<body>

<h2>College Admission - Student Registration</h2>


<!-- Registration Form -->

<form id="registrationForm">

<fieldset>

<legend><b>Personal Details</b></legend>

<label>Firstname:</label>

<input type="text" name="firstname" size="15" required><br><br>

<label>Middlename:</label>

<input type="text" name="middlename" size="15"><br><br>

<label>Lastname:</label>

<input type="text" name="lastname" size="15" required><br><br>

<label>Course:</label>

<select name="course" required>

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

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

<option value="BSc">B.Sc</option>

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

<option value="BCom">B.Com</option>

</select><br><br>

<label>Gender:</label><br>
<input type="radio" name="gender" value="Male" required> Male <br>

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

<input type="radio" name="gender" value="Other"> Other <br><br>

<label>Phone:</label>

<input type="text" name="country_code" value="+91" size="2" readonly>

<input type="text" name="phone" size="10" required><br><br>

<label>Address:</label><br>

<textarea name="address" cols="50" rows="4" required></textarea><br><br>

<label>Email:</label>

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

<label>Password:</label>

<input type="password" id="pass" name="pass" required><br><br>

<label>Re-type Password:</label>

<input type="password" id="repass" name="repass" required><br><br>

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

</fieldset>

</form>
<!-- Confirmation Message -->

<!--<div id="confirmation">

Form has been submitted successfully!

</div>

<script>

document.getElementById("registrationForm").onsubmit = function(event) {

event.preventDefault(); // Prevent form from reloading the page

document.getElementById("registrationForm").style.display = "none"; // Hide form

document.getElementById("confirmation").style.display = "block"; // Show


confirmation

};

</script>

</body>

</html>

4.Design Web Pages with includes Multi-Media data (Image, Audio, Video, GIFs etc).

<!DOCTYPE html>

<html>

<head>

<title>Simple Multimedia Web Page</title>

</head>

<body>

<h1>Welcome to My Simple Multimedia Web Page</h1>


<h2>Image Example</h2>

<img src="C:\Users\vijay\OneDrive\Desktop\kle-logo.gif" alt="Sample Image">

<h2>Audio Example</h2>

<audio controls>

<source src="C:\Users\vijay\OneDrive\Desktop\sample-6s.mp3" type="audio/mp3">

Your browser does not support the audio element.

</audio>

<h2>Video Example</h2>

<video controls>

<source src="C:\Users\vijay\OneDrive\Desktop\file_example_MP4_480_1_5MG.mp4"
type="video/mp4">

Your browser does not support the video element.

</video>

<h2>GIF Example</h2>

<img src="C:\Users\vijay\OneDrive\Desktop\SampleGIFImage_40kbmb.gif" alt="Funny


GIF">

</body>

</html>
5.Create a web page using frame.

#main.html

#Note: Run main.html file to execute frame

<!DOCTYPE html>

<html>

<head>

<title>Frameset Example with Columns</title>

</head>

<frameset cols="33%, 33%, 34%">

<frame src="program5frame1.html">

<frame src="program5frame2.html">

<frame src="program5frame3.html">

</frameset>

</html>

# program5frame1

<!DOCTYPE html>

<html>

<body bgcolor="red"

<h3>frame 2</h3>

<p> This content is in frame 2 </p>

</body>

</html>
# program5frame2

<!DOCTYPE html>

<html>

<body bgcolor="red"

<h3>frame 2</h3>

<p> This content is in frame 2 </p>

</body>

</html>

# program5frame3

<!DOCTYPE html>

<html>

<body bgcolor="skyblue"

<h3>frame 3</h3>

<p> This content is in frame 3</p>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy