0% found this document useful (0 votes)
8 views14 pages

Web programs

The document contains multiple HTML programs showcasing various web development concepts. It includes a final timetable for BSC courses, multimedia webpage elements, frameset examples, ID card design, and lists of courses and topics. Each program demonstrates different HTML and CSS features for layout and styling.

Uploaded by

hnharsha311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views14 pages

Web programs

The document contains multiple HTML programs showcasing various web development concepts. It includes a final timetable for BSC courses, multimedia webpage elements, frameset examples, ID card design, and lists of courses and topics. Each program demonstrates different HTML and CSS features for layout and styling.

Uploaded by

hnharsha311
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Program - 1

Output :
Program - 2
<html>
<head>
<title>TIME TABLE</title>
</head>
<body BGCOLOR="GREY">
<style> table,th,td
{ border: 4px solid
black; color:
DARKBLUE; fontfamily:
Gill Sans MT;
padding: 10px;
}
td {
background-color: lightgreen; }
th { text-align:
center; background-color:
red;
}
table { font-family: arial,
sans-serif;
bordercollapse:
collapse; width: 100%;
} td,th { border: 1px
solid black;
padding: 8px;
} </style>
<br>
<h1><b><u><center>FINAL BSC-(MCs/PCs)- TIME TABLE - 2023-2024
EVEN SEMESTER</center></u></b></h1><br>
<table STYLE="TABLE-LAYOUT:FIXED;WIDTH:100%;">
<tbody>
<tr align="center">
<th><u>Timings /<br>Day</u></th>
<th><u>9-10AM</u></th>
<th><u>10-11AM</u></th>
<th><u>11-12AM</u></th>
<th><u>12-1PM</u></th>
<th><u>1-2PM</u></th>
<th><u>2-2:30PM</u></th>
<th><u>2:30-3:30PM</u></th>
<th><u>3:30-4:30PM</u></th> <th><u>4:30-5:30PM</u></th>
</tr>
<tr>
<th><u>MONDAY</u></th>
<td >-----------</td>
<td>R-PROG</td>
<td>PHYSICS</td>
<td>MATHS-SEC</td>
<td>PHYSICS</td>
<td
rowspan="6"><CENTER><b>L<br>U<br>N<br>C<br>H<br><br>B<br>R<br>E<br>A<br>K</
b></td> <td COLSPAN="3"> <--LAB-R-PROG/WEBTECHNOLOGY/MATHS/PHYSICS-->
</CENTER></td>
</tr>
<tr>
<th><u>TUESDAY</u></th>
<td >------------</td>
<td>R-PROG</td>
<td>MATHS</td>
<td>PHYSICS</td>
<td>WEBTECHNOLOGY</td>
<td COLSPAN="3"> <--LAB-R-PROG/WEBTECHNOLOGY/MATHS/PHYSICS--> </td>
</tr>
<tr>
<th><u>WEDNESDAY</u></th>
<td >------------</td>
<td>R-PROG</td>
<td>PHYSICS</td>
<td>WEBTECHNOLOGY</td>
<td>MATHS</td>
<td COLSPAN="3"> <--LAB-R-PROG/WEBTECHNOLOGY/MATHS/PHYSICS--> </td>
</tr>
<tr>
<th><u>THURSDAY</u></th>
<td >MATHS</td>
<td>R-PROG</td>
<td>PHYSICS</td>
<td>WEBTECHNOLOGY</td>
<td>MATHS</td>
<td COLSPAN="3"> <--LAB-R-PROG/WEBTECHNOLOGY/MATHS/PHYSICS--> </td>
</tr>
<tr>
<th><u>FRIDAY</u></th>
<td >------------</td>
<td>MATHS</td>
<td>PHYSICS</td>
<td>MATHS</td>
<td>PHYSICS</td>
<td COLSPAN="3"> <--LAB-R-PROG/WEBTECHNOLOGY/MATHS/PHYSICS--> </td>
</tr>
<tr>
<th><u>SATURDAY</u></th>
<td>WEBTECHNOLOGY</td>
<td>MATHS</td>
<td>PHYSICS</td>
<td COLSPAN="2">OPEN ELECTIVE</td>
</tr>
</tbody>
</table>
</body>
</html>

OUTPUT:
Program -3
<!DOCTYPE html> <html
lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Webpage</title>
<style> body
{
font-family: Arial, sans-
serif; margin: 0;
padding: 0;
background-color: #f4f4f9;
color: #333;
}
header {
text-align: center; padding:
20px;
background-color: #6200ea;
color: white;
}
.container { max-
width: 800px; margin:
20px auto; padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
img, video, audio {
display: block; margin:
20px auto; max-
width: 100%;
border-radius: 8px;
}
.description { text-
align: center;
margin-top: 10px;
font-size: 1.1em;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My Multimedia Webpage</h1>
</header>
<div class="container">
<!-- Image Section -->
<h2>Image</h2>
<img src="scenery.jpg" alt="Beautiful Scenery">
<p class="description">A beautiful scenery to brighten your day.</p>

<!-- GIF Section -->


<h2>GIF</h2>
<img src="giff.gif" alt="Funny Animation">
<p class="description">A funny GIF to make you smile!</p>

<!-- Audio Section -->


<h2>Audio</h2>
<audio controls> <source
src="audio.mp3" type="audio/mpeg"> Your
browser does not support the audio element.
</audio>
<p class="description">Listen to this soothing audio clip.</p>

<!-- Video Section -->


<h2>Video</h2>
<video controls> <source
src="video.mp4" type="video/mp4"> Your
browser does not support the video tag.
</video>
<p class="description">Watch this inspiring video clip.</p>
</div>
</body>
</html>

OUTPUT:
Program-4
<HTML>
<HEAD>
<TITLE> Frameset Exmaple </TITLE>
</HEAD>
<frameset cols="50%, 50%" bordercolor="blue" noresize="noresize">
<frameset rows="50% ,50%" bordercolor="red" >
<frame name="first-frame" style="background-color:black" >
<frame style="background-color:blue" name="second-frame" >
</frameset>
<frameset rows="50%,50%" bordercolor="green" noresize="noresize">
<frame style="background-color:violet"name="third-frame" >
<frame style="background-color:pink" name="fourth-frame" >
</frameset>

<noframes>
<p> This document contains frames content. You browser does not support it. </p>
</noframes>
</frameset>
</HTML>
OUTPUT:
Program-5
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style> .containe
r { position:
relative;
width: 50%;
}
.image { opacity:
1; display: block;
width: 100%;
height: auto;
transition: .5s
ease;
backface-visibility: hidden;
}
.middle { transition: .5s ease; opacity:
0; position: absolute; top: 50%; left:
50%; transform: translate(-50%, -50%);
-ms-
transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.2;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #04AA6D;
color: white; fontsize: 16px;
padding: 16px 32px;
}
</style>
</head>
<body>
<h2>Opacity with Box</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://indiamap360.com/img/0/india-regions-map.jpg"
alt="India" class="image" style="width:70%"> <div class="middle"> <div
class="text">IndiaIndia &nbspILoveMyIndia</div>
</div>
</div>
</body>
</html>
OUTPUT:
Before After

Program-6
<!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 style="font-family: Arial, sans-serif; background-color: #f0f0f5; display: flex;
justifycontent:
center; align-items: center; height: 100vh; margin: 0;">
<div style="width: 300px; border: 2px solid #333; border-radius: 10px; backgroundcolor:
#fff; boxshadow: 0 4px 8px rgba(0, 0, 0, 0.2); text-align: center; padding: 20px;"> <!--
Profile Picture -->
<img src="profile.jpg" alt="Profile Picture" style="width: 100px; height: 100px;
border-radius:
50%; border: 2px solid #6200ea; margin-bottom: 15px;">
<!-- Name -->
<h2 style="margin: 0; color: #333; font-size: 1.5em;">ABCD-JSSCACS</h2>
<!-- Title -->
<p style="margin: 5px 0 10px 0; color: #555; font-size: 1em;">Software Engineer</p>
<!-- ID Information -->
<div style="text-align: left; margin-top: 10px; font-size: 0.9em; color: #444;">
<p><strong>ID:</strong> 123456789</p>
<p><strong>Email:</strong> [email protected]</p>
<p><strong>Phone:</strong> +91 9999-999-999</p>
</div>
<!-- Footer -->
<div style="margin-top: 20px; font-size: 0.8em; color: #777;">
<p>Issued by: ABC Corporation</p>
<p>Valid Until: Jan 20, 2025</p>
</div>
</div>
</body> </html>
output:

Program-7
<html>
<head>
<title>TYPES LISTS </title>
</head>
<body>
<h1>List of available courses</h1>
<ul TYPE ="DISC">
<li>Data Structures & Algorithm</li>
<li>Web Technology</li>
<li>Aptitude & Logical Reasoning</li>
<li>Programming Languages</li>
</ul>
<h2>Data Structures topics</h2>
<ol>
<li>Array</li>
<li>Linked List</li>
<li>Stacks</li>
<li>Queues</li>
<li>Trees</li>
<li>Graphs</li>
</ol>
<h2>TYPES OF QUEUES</h2>
<ul TYPE="SQUARE">
<li>CIRCULAR QUEUE</li>
<li>DQUEUE</li>
<li>PRIORITY QUEUE</li>
<li>LINEAR QUEUE</li>
</ul>
<h1 style="color: green">WEB TECHNOLOGY</h1>
<h3>HTML ol tag</h3>

<p>reversed attribute</p>
<ol reversed>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

<p>start attribute</p>

<ol start="5">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>

<p>type attribute</p>
<ol type="i">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
<h2>A Description List</h2>
<dl>
<dt>CSS</dt>
<dd>-CASCADING STYLE SHEET</dd>
<dt>JSON</dt>
<dd>- JAVA SCRIPT OBJECT NOTATION</dd>
</dl>
</body>
</html>
OUTPUT:

You might also like