[go: up one dir, main page]
Scribd
Upload
27 views8 pages

Part A Web Progg

Uploaded by

manohar bali
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
27 views8 pages

Part A Web Progg

Uploaded by

manohar bali
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/ 8

1.

Design web pages for your college containing college name and logo, departments list using list tags.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Your College Name</title>
</head>
<body>
<header>
<!-- College name centered at the top of the page -->
<h1 align="center">Government First Grade College Mahagaon Cross</h1>
<!-- College logo image centered below the college name -->
<img src="C:\Users\Manohar\OneDrive\Documents\OIP.jpeg" alt="College Logo" style="display:block;
margin-left:auto; margin-right:auto;">
</header>
<main>
<section>
<!-- Section for the list of departments -->
<h2 align="center">Departments</h2>
<!-- Unordered list to display departments -->
<ul>
<li>Computer Science</li>
<li>Physics</li>
<li>Statistics</li>
<!-- Add more departments as needed -->
</ul>
</section>
</main>
<footer>
<!-- Footer with copyright notice -->
<p align="center">© Government First Grade College Mahagaon Cross</p>
</footer>
</body>
</html>
2.create a class timetable using table tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
</head>
<body>
<!-- Table for the class timetable -->
<table border="1">
<!-- Table header row -->
<tr>
<!-- Day of the week -->
<th>Day</th>
<!-- Class start time -->
<th>Start Time</th>
<!-- Class end time -->
<th>End Time</th>
<!-- Subject -->
<th>Subject</th>
</tr>
<!-- Monday -->
<tr>
<td>Monday</td>
<td>09:00 AM</td>
<td>10:30 AM</td>
<td>Mathematics</td>
</tr>
<!-- Tuesday -->
<tr>
<td>Tuesday</td>
<td>11:00 AM</td>
<td>12:30 PM</td>
<td>Science</td>
</tr>
<!-- Wednesday -->
<tr>
<td>Wednesday</td>
<td>02:00 PM</td>
<td>03:30 PM</td>
<td>History</td>
</tr>
<!-- Thursday -->
<tr>
<td>Thursday</td>
<td>10:00 AM</td>
<td>11:30 AM</td>
<td>English</td>
</tr>
<!-- Friday -->
<tr>
<td>Friday</td>
<td>01:00 PM</td>
<td>02:30 PM</td>
<td>Computer Science</td>
</tr>
</table>
</body>
</html>

3. write a html code to design student registrations form for your college admissions
<!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>
</head>
<body>
<!-- Form for student registration -->
<form action="process_registration.php" method="post">
<!-- Personal Information Section -->
<fieldset>
<legend>Personal Information</legend>
<!-- Full Name -->
<label for="full_name">Full Name:</label>
<input type="text" id="full_name" name="full_name" required>
<!-- Date of Birth -->
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
</fieldset>

<!-- Contact Information Section -->


<fieldset>
<legend>Contact Information</legend>
<!-- Email Address -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<!-- Phone Number -->
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
</fieldset>

<!-- Academic Information Section -->


<fieldset>
<legend>Academic Information</legend>
<!-- High School Name -->
<label for="high_school">High School Name:</label>
<input type="text" id="high_school" name="high_school" required>
<!-- Major/Program of Interest -->
<label for="major">Major/Program of Interest:</label>
<input type="text" id="major" name="major" required>
</fieldset>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
</body>
</html>

4. write html code to include multimtdia data (image audio video)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Example</title>
</head>
<body>
<!-- Image -->
<h2>Image:</h2>
<img src="path_to_image.jpg" alt="Sample Image" width="300">

<!-- Audio -->


<h2>Audio:</h2>
<audio controls>
<source src="path_to_audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<!-- Video -->


<h2>Video:</h2>
<video controls width="400">
<source src="path_to_video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
5.create a webpage using frame

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">


<html>
<head>
<!-- Set the character encoding and provide a title for the page -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Webpage with Frames</title>
</head>
<body>
<!-- Define a frameset with two columns (20% and 80%) -->
<frameset cols="20%,80%">
<!-- Create a frame for navigation -->
<frame src="C:\Users\Manohar\Downloads\collegewebsite.html" name="navFrame" frameborder="1" scrolling="auto">
<!-- Create a frame for content -->
<frame src="C:\Users\Manohar\Downloads\multimedia.html" name="contentFrame" frameborder="1" scrolling="auto">
</frameset>
</html>

6 write a code in html to develop a webpage having two frames that divide the webpage into two equal rows and
then divide the row into equal columns fill each frame with a different background color

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Two-Row, Two-Column Frames</title>
<style>
/* Apply styles to the frames */
.frame {
width: 50%; /* Set the width of each frame to 50% of the parent */
height: 50%; /* Set the height of each frame to 50% of the parent */
border: 1px solid black; /* Add a border to each frame */
}
/* Set background colors for each frame */
#frame1 { background-color: #f0f0f0; } /* Light grey background for the first frame */
#frame2 { background-color: #e0e0e0; } /* Darker grey background for the second frame */
</style>
</head>
<frameset rows="50%,50%">
<!-- First row of frames -->
<frameset cols="50%,50%">
<!-- First column in the first row -->
<frame src="C:\Users\Manohar\Downloads\multimedia.html" class="frame" id="frame1">
<!-- Second column in the first row -->
<frame src="C:\Users\Manohar\Downloads\studregistration.html" class="frame" id="frame2">
</frameset>
<!-- Second row of frames -->
<frameset cols="50%,50%">
<!-- First column in the second row -->
<frame src="C:\Users\Manohar\Downloads\timetable.html" class="frame" id="frame1">
<!-- Second column in the second row -->
<frame src="C:\Users\Manohar\Downloads\collegewebsite.html" class="frame" id="frame2">
</frameset>
</frameset>
</html>

7. write css code to use inline css to format your id card.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ID Card</title>
</head>
<body>
<!-- ID Card container -->
<div style="width: 300px; height: 400px; border: 1px solid #000; margin: auto; text-align: center; background-color:
#f3f3f3;">
<!-- ID Card Header -->
<div style="background-color: #4CAF50; color: white; padding: 10px;">
<h2 style="margin: 0;">College Name</h2>
</div>
<!-- ID Card Image -->
<img src="path_to_image.jpg" alt="Profile Photo" style="width: 100px; height: 100px; margin-top: 15px;">
<!-- ID Card Details -->
<div style="margin-top: 20px;">
<p style="margin: 5px 0;"><strong>Name:</strong> John Doe</p>
<p style="margin: 5px 0;"><strong>Department:</strong> Computer Science</p>
<p style="margin: 5px 0;"><strong>ID:</strong> #123456</p>
</div>
<!-- ID Card Footer -->
<div style="position: absolute; bottom: 0; width: 100%; background-color: #4CAF50; color: white; padding: 5px;">
<p style="margin: 0;">Valid Through 12/2024</p>
</div>
</div>
</body>
</html>

You might also like