[go: up one dir, main page]
Scribd
Upload
18 views23 pages

Web Technology Journal Part a-2

The document contains multiple HTML code examples for creating web pages for a college, including a homepage with college details, a class timetable, a student registration form, multimedia content, frames, and CSS styling for an ID card. Each section demonstrates different HTML and CSS techniques such as lists, tables, forms, multimedia embedding, and layout design. The examples are structured to provide practical applications of web development concepts.

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
18 views23 pages

Web Technology Journal Part a-2

The document contains multiple HTML code examples for creating web pages for a college, including a homepage with college details, a class timetable, a student registration form, multimedia content, frames, and CSS styling for an ID card. Each section demonstrates different HTML and CSS techniques such as lists, tables, forms, multimedia embedding, and layout design. The examples are structured to provide practical applications of web development concepts.

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/ 23

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>

</dl>

</body>

</html>
Output:

//After Clicking College Logo


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>Maths</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>

Output:
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>


<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>

<!--<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>

Output:

//After Clicking Submit Button


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="doremon.jpg" width="300" height="400" alt="Sample Image">

<h2>Audio Example</h2>

<audio controls>

<source src="song.mp3" type="audio/mp3">

Your browser does not support the audio element.

</audio>

<h2>Video Example</h2>

<video width="1000" height="550" controls>

<source src="video.mp4" type="video/mp4">

Your browser does not support the video element.

</video>

<h2>GIF Example</h2>

<img src="GIFs.gif" alt="Funny GIF">

<img src="GIF.gif" alt="Funny GIF">

</body>
</html>

Output:
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>
Output:
6. Write 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>
<head>
<title>Two Frames with Equal Coluumns</title>
<style>
.container
{
display: flex;
flex-direction: column;
height:100vh;
}
.frame
{
display: flex;
flex:1;
}
.column
{
flex: 1;
padding: 20px;
box-sizing:border-box;
text-align:center;
font-size: 20px;
font-weight: bold;
}
.frame1
{
background-color:lightblue;
}
.frame2
{
background-color: lightgreen;
}
.column{
border:2px solid white;
}
</style>
</head>

<body>
<div class="container">
<div class="frame frame1">
<div class="column">Column 1 (Frame1)></div>
<div class="column">Column 2(Frame1)</div>
</div>

<div class="frame frame2">


<div class="column">Column 1 (Frame2)></div>
<div class="column">Column 2(Frame2)</div>
</div>

</div>

</body>

</html>

Output:
7.Write CSS code to Use Inline CSS to format your ID Card.

<!DOCTYPE html>

<html>
<head>

<title>Student ID Card</title>

<style>

*{

padding: 0;

margin: 0;

}
.card

width: 300px;

background-color: lightyellow;

margin: 20px auto;

padding: 50px;

border-radius: 10px;

box-shadow: 10px 10px 10px rgba(177,12,12,0.1);


text-align: center;

.passs

border: solid black;

border-radius: 15px;
}

</style>

</head>
<body>

<div class="card">

<img class="pass" style="height: 90px; width: 90px;"

src="KLE_logo.jpg" alt ="KLE Logo">


<h2 style="color: red;">K.L.E SOCIETY'S</h2>

<h3 style="color: darkblue;">Shri Kadasiddeshwar Arts College & H S Kotambari


Science Institute</h3>
<img class="pass" style="height: 140px; width: 100px;"

src="Nobita.jpg" alt="passport size photo">

<h1 style="color: blue;">Nobita</h1>

<p style="color: red;">Course: B.Sc I/II/III Year</p>

<h3 style="color: blue;">Validity:Nov 2022 to 2025</h3>

</div>

</body>
</html>

Output:
8.Using HTML, CSS create display a text called—Hello India! On top of an image of

India map using overlay.

<html>

<head>
<title>overlap</title>

<style>

*{

margin: 0;padding: 0;

.overlap{

text-align: center;
margin-top: 40px;

.overlap h1{

position: absolute;

font-size: 120px;

color: blue;

top: 20%;

left: 22%;
}

</style>

<body>

<div class="overlap">

<img src="India.jpg" alt="map">

<h1>Hello India!</h1>

</div>
</body>

</head>

</html>
Output:

You might also like