Web programs
Web programs
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>
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  ILoveMyIndia</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: