AITpractical 180

Q1.
Design MCA Timetable Using HTML5 and CSS3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schedule</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<style>
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
.min-h-screen {
min-height: 100vh;
.bg-gray-100 {
background-color: #f7fafc;
.p-8 {
padding: 2rem;
}
.overflow-x-auto {
overflow-x: auto;
.min-w-full {
min-width: 100%;
.bg-white {
background-color: #fff;
.border-b {
border-bottom: 1px solid #e2e8f0;
.text-left {
text-align: left;
.p-4 {
padding: 1rem;
.font-medium {
font-weight: 500;
}
</style>
<body>
<div class="min-h-screen bg-gray-100 p-8">
<div class="overflow-x-auto">
<table class="min-w-full bg-white">
<thead class="border-b">
<tr>
<th class="text-left p-4 font-medium">Time/Day</th>
<th class="text-left p-4 font-medium">09:45-10:45</th>
</tr>
</thead>
<tbody>
<tr class="border-b">
<td class="p-4">Monday</td>
<td class="p-4">OC4</td>
<td class="p-4">Python Prog</td>
<td class="p-4">-</td>
<td class="p-4">SPM</td>
<td class="p-4">ADBMS</td>
<td class="p-4">AIT Lab</td>
<td class="p-4">Guide Interaction (Mini Project)</td>

</tr>
<td class="p-4">Tuesday</td>
<td class="p-4">OT</td>
<td class="p-4" rowspan="2">SHORT RECESS</td>
<td class="p-4">AIT</td>
<td class="p-4">LUNCH</td>
<td class="p-4">Python Lab</td>
<td class="p-4">Mini Project-II</td>
</tr>
<td class="p-4">Wednesday</td>
<td class="p-4" colspan="2">Language Lab/SS-II</td>
<td class="p-4">OC3</td>
<td class="p-4">Tutorial/Theory Practical /HR/IS</td>
</tr>
<td class="p-4">Thursday</td>
<td class="p-4" colspan="3">-</td>

</tr>
<td class="p-4">Friday</td>
</tr>
<td class="p-4">Saturday</td>
<td class="p-4">Mini Project-II</td>
<td class="p-4">Academic Activity/ Tutorial/Theory Practical /HR/IS</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Output:
Q2.Design the following web page by using HTML5 and CSS3.Using Client side image mapping
display following Output. After image click show the health benefits of fruits page
respectively.
a.Change the background color, font and font size and color of text. And display at center in
header b. Change color of footer and write given tex
<!DOCTYPE html>
<html lang="en">
<head>
<title>Fruits</title>
</head>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
font-size: 2em;
nav {
text-align: center;
img {
width: 700px;
height: 400px;
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
</style>
<body>
<header>
<h1>Fruits</h1> </header>
<nav>
<img src="fruits.png" alt="Fruits" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="120,20,280,200" href="apple.html" alt="Apple">
<area shape="circle" coords="400,100,80" href="orange.html" alt="Orange">
<area shape="poly" coords="580,20,680,20,680,120,580,120" href="grapes.html" alt="Grapes">
</map>
</nav>
<footer>
<p>© 2023 Organization Name</p>
</footer>
</body>
</html>
Output:
Q3 Programs using Canvas and SVG

<!DOCTYPE html>
<html lang="en">
<head>

<title>Static Traffic Signal</title>
</head>
<body>
<svg id="traffic-signal-svg" width="200" height="400" xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="#ddd"/>

<circle id="red-light" cx="100" cy="100" r="40" fill="red"/>

<circle id="yellow-light" cx="100" cy="200" r="40" fill="yellow"/>

<circle id="green-light" cx="100" cy="300" r="40" fill="green"/>
</svg>
<canvas id="traffic-signal-canvas" width="200" height="400"></canvas>
<script>
// Get reference to the canvas
const canvas = document.getElementById('traffic-signal-canvas');
const ctx = canvas.getContext('2d');
// Draw background
ctx.fillStyle = '#ddd';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw red light

ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
// Draw yellow light
ctx.beginPath();
ctx.arc(100, 200, 40, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
// Draw green light
ctx.beginPath();
ctx.arc(100, 300, 40, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();
</script>
</body>
</html>
Output:
Q4 Show the following output using Canvas and SVG example
<!DOCTYPE html>
<html lang="en">
<head>
<title>House with Trees</title>
</head>
<body>
<svg id="house-svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg">

<rect x="100" y="200" width="200" height="150" fill="yellow"/>

<polygon points="100,200 300,200 200,100" fill="blue"/>

<rect x="130" y="230" width="40" height="40" fill="orange"/>

</svg>
<canvas id="house-canvas" width="400" height="400"></canvas>
<script>
// Get reference to the canvas

const canvas = document.getElementById('house-canvas');
// Draw House Walls
ctx.fillRect(100, 200, 200, 150);
// Draw Roof
ctx.beginPath();
ctx.moveTo(100, 200);
ctx.lineTo(300, 200);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();
// Draw Windows
ctx.fillStyle = 'orange';
ctx.fillRect(130, 230, 40, 40);
ctx.fillRect(230, 230, 40, 40);
// Draw Door
ctx.fillRect(180, 300, 40, 50);
// Draw Trees
drawTree(ctx, 20, 200);
drawTree(ctx, 360, 200);
// Function to draw a tree

function drawTree(context, x, y) {
// Draw trunk
context.fillStyle = 'brown';
context.fillRect(x - 10, y + 60, 20, 40);
// Draw leaves
context.beginPath();
context.moveTo(x, y);
context.lineTo(x + 40, y + 40);
context.lineTo(x - 40, y + 40);
context.closePath();
context.fillStyle = 'green';
context.fill();
</script>
</body>
</html>
Output:
Q5 Program to design form using HTML5 elements, attributes and Semantics for your web
page Program to design form using HTML5 elements, attributes and Semantics for your web
page
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>Contact Us</h1>
<form action="/submit-form" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</div>
<div>
<input type="submit" value="Submit">
</div>
</form>
</body>
</html>
Output:
Q6. Programs using Canvas and SVG.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Olympic Rings</title>
</head>
<body>
<canvas id="olympic-rings-canvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('olympic-rings-canvas');
// Draw white background
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Define circle properties
const circleProps = [
{ x: 100, y: 100, radius: 40, color: 'blue' },
{ x: 180, y: 100, radius: 40, color: 'black' },
{ x: 260, y: 100, radius: 40, color: 'red' },
{ x: 140, y: 150, radius: 40, color: 'yellow' },
{ x: 220, y: 150, radius: 40, color: 'green' }
];
// Draw circles
circleProps.forEach(circle => {
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
ctx.fillStyle = circle.color;
ctx.fill();
ctx.closePath();
});
// Draw rings
ctx.lineWidth = 8;
ctx.strokeStyle = 'white';
circleProps.forEach(circle => {
ctx.beginPath();
ctx.arc(circle.x, circle.y, circle.radius + ctx.lineWidth / 2, 0, Math.PI * 2);
ctx.stroke();
ctx.closePath();
});
</script>
</body>
</html>
Output:
Q7. Programs using Canvas and SVG

<!DOCTYPE html>
<html lang="en">
<head>
<title>Shapes Stack</title>
</head>
<body>
<svg id="shapes-svg" width="400" height="400" xmlns="http://www.w3.org/2000/svg">

<line x1="50" y1="50" x2="350" y2="50" stroke="black" stroke-width="2"/>

<rect x="50" y="70" width="300" height="50" fill="brown"/>

<circle cx="200" cy="145" r="40" fill="yellow"/>


<polygon points="200,220 215,255 255,255 225,275 240,310 200,280 160,310 175,275 145,255
185,255" fill="yellow"/>
</svg>
<canvas id="shapes-canvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('shapes-canvas');
// Draw line
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
// Draw rectangle
ctx.fillStyle = 'brown';
ctx.fillRect(50, 70, 300, 50);
// Draw circle
ctx.beginPath();
ctx.arc(200, 145, 40, 0, Math.PI * 2);
ctx.fill();
// Draw star
ctx.beginPath();
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
Output:
Q8. Programs using Canvas and SVG.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Faces</title>
</head>
<body>
<svg id="faces-svg" width="400" height="200" xmlns="http://www.w3.org/2000/svg">

<circle cx="100" cy="100" r="50" fill="yellow"/>
<circle cx="80" cy="80" r="10" fill="black"/>
<circle cx="120" cy="80" r="10" fill="black"/>
<path d="M80 120 Q100 140 120 120" stroke="black" fill="transparent" stroke-width="4"/>

<circle cx="300" cy="100" r="50" fill="orange"/>
</svg>
<canvas id="faces-canvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('faces-canvas');

// Smiley Face
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.arc(80, 80, 10, 0, Math.PI * 2);
ctx.arc(120, 80, 10, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.quadraticCurveTo(100, 140, 120, 120);
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
// Angry Face
ctx.beginPath();
ctx.arc(300, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
Q9. Write a Program to design web page using HTML5 elements, attributes and Semantics
Show the following output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Gift and Greeting House</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #c3dafe; /* Equivalent to bg-blue-200 in Tailwind CSS */
margin: 0;
padding: 0;
}
.container {
max-width: 960px; /* Equivalent to max-w-6xl in Tailwind CSS */
margin: 0 auto; /* Equivalent to mx-auto in Tailwind CSS */
padding: 20px;
.card {
background-color: #ffffff; /* Equivalent to bg-white in Tailwind CSS */
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Equivalent to shadow-md in Tailwind CSS */
overflow: hidden;
.card-header {
padding: 20px;
text-align: center;
.card-body {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
.image {
width: 100%;
max-height: 400px;
.text {
flex-basis: calc(50% - 20px);
padding: 0 10px;
.advertisement {
margin-top: 20px;
.footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #4b5563; /* Equivalent to text-gray-600 in Tailwind CSS */
</style>
</head>
<body>
<div class="container">
<div class="card">
<div class="card-header">
<h1 class="text-lg font-semibold text-gray-700">Gift and Greeting House</h1>
</div>
<div class="card-body">
<div class="image">
<img src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-
Z4nfEDaxRZMLLsvkUtarndlT/user-HEQW8znOgvSHX0At9Wit8Qry/img-
G290sxk87l11bbwbN4cqGPqg.png?st=2024-02-11T12%3A43%3A59Z&se=2024-02-
11T14%3A43%3A59Z&sp=r&sv=2021-08-
06&sr=b&rscd=inline&rsct=image/png&skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skt=2024-02-
11T09%3A41%3A05Z&ske=2024-02-12T09%3A41%3A05Z&sks=b&skv=2021-08-
06&sig=iQ2JkHCWrPS4A7F7ALHs/xMSKNtrYwifhaDiyNTVZpU%3D" alt="Balloons and confetti with
text Birthday Wishes, Messages, Quotes, & Greetings" class="w-full h-auto">
</div>
<div class="text">
<h2 class="text-xl font-bold text-gray-800 mb-3">Birthday Wishes, Messages, Quotes, &

Greetings</h2>
<p class="text-gray-600">Create your own Greeting using CSS properties like background text
etc</p>
</div>
</div>
<div class="advertisement">
<h3 class="text-lg font-semibold text-gray-700">Advertisement</h3>
<p class="text-gray-600">Scrolling/Slide show Gifts</p>
</div>
<div class="footer">
<p class="text-sm text-gray-600">Add footer</p>
</div>
</div>
</div>
</body>
</html>
Output:
Q10. Write CSS code for creating following External Style Sheet and link to HTML
page.
a) Apply for heading <h1> background color red
b) Change text color to white for <h1>.
c) Text having 18px font-size, italic and underline
d) Apply border for division tag (left side: dotted, right side: dashed top: double
bottom: Single)
e) Hyper link without underline
f) In paragraph each word first letter must be in capital letters rest all in small case.
g) Display Text with following effect 25% off Now 60%
h) Background colour with div as blue & heading as aqua.
i) Specify the space between two sentences
j) Add margin 2inch and Padding for your webpage
k) Rotate image by 15deg.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Styling Example</title>
</head>
<body>
<h1>Heading with Red Background</h1>
<p class="text-styling">Text with 18px font-size, italic, and underline</p>
<div>Border Applied: Left (dotted), Right (dashed), Top (double), Bottom (solid)</div>
<a href="#">Hyperlink without underline</a>
<p>This is a paragraph. Each word's first letter is capitalized.</p>
<p class="text-effect">Text effect: 25% off Now 60%</p>
<h2>Heading with Aqua Background</h2>
<img src="example.jpg" alt="Image" />
</body>
</html>
style.css
/* External Stylesheet - styles.css */
/* a) Apply background color red for heading <h1> */
h1 {
background-color: red;
/* b) Change text color to white for <h1> */
h1 {
color: white;
}
/* c) Text with 18px font-size, italic, and underline */
.text-styling {
font-size: 18px;
font-style: italic;
text-decoration: underline;
/* d) Apply border for division tag */
div {
border-left: 1px dotted black;
border-right: 1px dashed black;
border-top: 2px double black;
border-bottom: 1px solid black;
/* e) Hyperlink without underline */
a{
text-decoration: none;
/* f) Capitalize the first letter of each word in paragraph */
p{
text-transform: capitalize;
/* g) Text effect: 25% off Now 60% */
.text-effect {
font-size: 24px;
color: blue;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* h) Background color with div as blue & heading as aqua */
body {
background-color: blue;
h1 {
background-color: aqua;
/* i) Specify space between two sentences */
p{
white-space: normal;
/* j) Add margin 2 inches and Padding for your webpage */
body {
margin: 2in;
padding: 2in;
/* k) Rotate image by 15deg */
img {
transform: rotate(15deg);
}
Q11.Design Webpage using HTML5 and CSS3
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Orphanage Support Page</title>
<link href="styles.css" rel="stylesheet">
</head>
<body class="bg-orange-100">
<header class="text-center p-6 bg-black text-white">
<h1 class="text-4xl font-bold">
Give them a chance to be happy
</h1>
</header>
<nav class="flex justify-center space-x-4 py-3 bg-orange-300">
<a class="text-black hover:text-orange-700" href="#">Home</a>
<a class="text-black hover:text-orange-700" href="#">About Us</a>
<a class="text-black hover:text-orange-700" href="#">Sign Up/Sign In</a>
<a class="text-black hover:text-orange-700" href="#">Photo Gallery</a>
<a class="text-black hover:text-orange-700" href="#">Donation</a>
</nav>
<div class="flex flex-col items-center py-8">
<div class="mb-6">
<img class="border-dashed border-4 border-gray-400"

src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-Z4nfEDaxRZMLLsvkUtarndlT/user-
HEQW8znOgvSHX0At9Wit8Qry/img-POCk8ZS2mff5K8ORbs1hWv8g.png?st=2024-02-
11T12%3A56%3A48Z&se=2024-02-11T14%3A56%3A48Z&sp=r&sv=2021-08-
06&sig=ciVymv3KLji142JazA/WeZ5UqK0VwEASj9Hm2ZE86m0%3D" alt="A smiling child with a
headband, representing the happiness of children supported by the orphanage" height="200"
width="200">
</div>
<div class="flex space-x-8 mb-6">
<i class="fas fa-volume-up fa-2x"></i>
<i class="fas fa-video fa-2x"></i>
</div>
<div class="text-lg">
<ul class="list-decimal list-inside">
<li>"Together we can change their story"</li>
<li>"Help make their dreams come true"</li>
<li>"Be the hope in their lives"</li>
<li>"Every child deserves a family"</li>
<li>"Orphans are our responsibility"</li>
<li>"Lend a helping hand to the helpless"</li>
<li>"Be the difference in their lives"</li>
<li>"No child should be alone"</li>
<li>"Change a life, adopt an orphan"</li>
<li>"One act of kindness can change everything"</li>
<li>"Give them a chance to be happy"</li>
</ul>
</div>
</div>
</body>
</html>
style.css
body {
font-family: 'Open Sans', sans-serif;
.text-center {
text-align: center;
.bg-black {
background-color: black;
.text-white {
color: white;
.bg-orange-100 {
background-color: #FBD38D;
.flex {
display: flex;
.justify-center {
justify-content: center;
.space-x-4 > * + * {
margin-left: 1rem;
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
.border-dashed {
border-style: dashed;
.border-4 {
border-width: 4px;
.border-gray-400 {
border-color: #CBD5E0;
.mb-6 {
margin-bottom: 1.5rem;
.fa-volume-up, .fa-video {
font-size: 2rem;
.text-lg {
font-size: 1.125rem;
.list-decimal {
list-style-type: decimal;
.list-inside {
list-style-position: inside;
Output:
Q12.Design Webpage using HTML5 and CSS3
<!DOCTYPE html>
<html lang="en">
<head>
<title>Orphanage Registration Form</title>
<style>
body {
background-color: #edf2f7;
padding: 32px;
.container {
max-width: 600px;
margin: 0 auto;
background-color: #ffffff;
padding: 24px;
border: 1px solid #000000;
.heading {
text-align: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 16px;
}
.image-container {
display: flex;
justify-content: flex-end;
.image-container img {
width: 96px;
height: 96px;
border: 4px dashed #000000;
.details {
font-weight: bold;
.details-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
.documents {
}
.documents ul {
list-style-type: none;
padding-left: 0;
.documents ul li {
margin-bottom: 8px;
.school-certify {
</style>
</head>
<body>
<h1 class="heading">Orphanage Registration Form</h1>
<div class="image-container">
<img src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-
FMKcEqLfageqyTTZmpjRpbG5.png?st=2024-02-11T13%3A03%3A24Z&se=2024-02-
11T15%3A03%3A24Z&sp=r&sv=2021-08-
06&sig=GaTW1r1LDSnUxwktVXxvuH%2BuYNNMwcjEn%2BqNrLUcm30%3D" alt="Placeholder for
recent photo">
</div>
<div class="details">
<h2>DETAILS OF ORPHAN</h2>
<div class="details-grid">
<div>Name: ______________________________________________________</div>
<div>Male/Female: _______________ Birth Place ____________________</div>
<div>Date of Birth ________________________</div>
<div>School ______________________________________ Class__________</div>
<div>Madrasa ______________________________________ Class__________</div>
<div>No. of Brothers________________ No. of Sisters________________</div>
</div>
</div>
<h2>DETAILS OF PARENTS/GUARDIAN</h2>
<div class="details-grid">
<div>Father's Name_______________________________________________</div>
<div>Date Of Death ____________________Cause Of Death______________</div>
<div>Mother's Name:______________________________________________</div>
<div>Is Mother Alive?________ If Dead, Give Cause___________________</div>
<div>Guardians Name And Relationship With Orphan___________________</div>
<div>Family Situation Of The Orphan/Source Of Income:_______________</div>
<div>Parents / Guardian's Address -</div>
<div>House Name/ House No ________________________________________</div>
<div>Place/Mohalla ______________________ Village/Town______________</div>
<div>Tehsil _________________ District_____________ State___________</div>
<div>Mobile No______________________ PIN__________________________</div>
<div>Orphan's /Mother's Bank A/c Detail_____________________________</div>
</div>
</div>
<h2>Attach Following Documents With The Application:</h2>
<div class="documents">
<ul>
<li>Father's Death Certificate</li>

<li>Copy Of Orphans Birth Certificate / School Bonafied Certificate</li>
<li>Four Copies Of Passport Size Photo (Colour)</li>
<li>Mother's ID Copy</li>
</ul>
</div>
</div>
<div class="school-certify">
<p>To be filled up by School</p>
<p>This is to certify that this orphan student name______________________</p>
<p>Is studying in our school ___________________________ during the year__________</p>
<p>His/Her date of birth as per our school record.__________________________</p>
<p>His/Her father has expired on______________________ as per record / death certificate.</p>
</div>
</div>
</body>
</html>
Output:
Q 13. Design the web page using HTML5 and CSS3 semantic elements
<!DOCTYPE html>
<html lang="en">
<head>
<title>The best time to be in sport</title>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-

awesome/5.15.3/css/all.min.css">
<style>
body {
font-family: 'Open Sans', sans-serif;
background-color: #f0f4f8;
.container {
max-width: 768px;
margin: 0 auto;
padding: 32px;
.bg-white {
padding: 24px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);

}
.border-b-4 {
border-bottom-width: 4px;
border-bottom-style: solid;
border-bottom-color: #1a365d;
padding-bottom: 2px;
margin-bottom: 6px;
.text-blue-800 {
color: #1a365d;
.text-5xl {
font-size: 2.5rem;
.col-span-2 {
grid-column: span 2;
.mb-4 {
.mb-2 {
margin-bottom: 8px;
}
.text-2xl {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 8px;
.border-t-2 {
border-top-width: 2px;
border-top-style: solid;
border-top-color: #1a365d;
padding-top: 2px;
margin-top: 6px;
.text-xl {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 4px;
.rounded-full {
border-radius: 50%;
.mr-2 {
margin-right: 8px;
}
.text-lg {
font-weight: bold;
margin-bottom: 4px;
.text-sm {
</style>
</head>
<body class="bg-blue-100">
<div class="bg-white">
<div class="border-b-4">
<h1 class="text-5xl font-bold uppercase">The best time to be in sport</h1>
</div>
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">
<img class="mb-4" src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-

eymHbQuI56iN8inlSgVcDXy9.png?st=2024-02-11T13%3A10%3A35Z&se=2024-02-
11T15%3A10%3A35Z&sp=r&sv=2021-08-
06&sig=ic8GF8bHswKlbnkRyRn1BD96w5by%2BNOappwQDF/W9Yc%3D" alt="A group of people
playing a sport on a field" width="600" height="400">
<div class="flex items-center mb-4">
<div class="bg-blue-800 text-white rounded-full h-10 w-10 flex items-center justify-center

mr-2">
<i class="fas fa-bullhorn"></i>

</div>
<h2 class="text-2xl font-bold">How an interest turned into a career in Spain</h2>
</div>
<p class="text-lg mb-4">From lucrative deals to international opportunities, it's not all work
and cubicles for students today</p>
<div class="border-t-2 pt-2">
<h3 class="text-xl font-bold mb-2">Sourav Dutta | Hitting Targets, Despite The Pain</h3>
<p class="text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center">
<img class="rounded-full mr-2"

src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-Z4nfEDaxRZMLLsvkUtarndlT/user-
HEQW8znOgvSHX0At9Wit8Qry/img-WEg3f2oXW1YuAnW3fyvBtwt1.png?st=2024-02-
11T13%3A10%3A34Z&se=2024-02-11T15%3A10%3A34Z&sp=r&sv=2021-08-
06&sig=xRzHWV%2BFSHjIkSMJZruHK86Vo7uqVqq8GKZRSin1otE%3D" alt="Portrait of Aakanksha
Srinath Haganwane" width="100" height="100">
<div>
<h4 class="text-lg font-bold">Aakanksha Srinath Haganwane</h4>
<p class="text-sm">Genius moves</p>
</div>
</div>
<div class="flex items-center">
<img class="rounded-full mr-2" src="https://placehold.co/100x100" alt="Portrait of

Makarand Madhukar Mane" width="100" height="100">
<div>
<h4 class="text-lg font-bold">Makarand Madhukar Mane</h4>

<p class="text-sm">Trouble for France next?</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Q14 Write a Program to design web page using HTML5 elements, attributes and Semantics
Show the following output
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Site Name (Add animation to text)</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
padding: 1rem;
background-color: #90cdf4;
.animated-text {
animation: textAnimation 2s ease-in-out infinite alternate;
@keyframes textAnimation {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
.flex {
display: flex;
.flex-col {
flex-direction: column;
.h-screen {
height: 100vh;
.p-4 {
padding: 1rem;
}
.text-center {
text-align: center;
.bg-blue-300 {
background-color: #90cdf4;
.bg-blue-100 {
.grid {
display: grid;
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
.gap-4 {
gap: 1rem;
.col-span-2 {
grid-column: span 2;
}
.bg-white {
.border-2 {
border-width: 2px;
border-style: solid;
.border-black {
border-color: #000000;
.mb-4 {
margin-bottom: 1rem;
.mb-2 {
.w-6 {
width: 1.5rem;
.h-6 {
height: 1.5rem;
}
.rounded-full {
border-radius: 9999px;
.mr-2 {
margin-right: 0.5rem;
ul {
list-style-type: none;
padding: 0;
li {
display: flex;
align-items: center;
span {
</style>
</head>
<body class="bg-blue-100">
<div class="flex flex-col h-screen">

<header class="text-center p-4 bg-blue-300">
<h1 class="text-xl font-bold animated-text">Web Site Name (Add animation to text)</h1>

</header>

<div class="flex-grow grid grid-cols-3 gap-4 p-4">

<div class="col-span-2 p-4 bg-white border-2 border-black">
<h2 class="text-lg mb-4">Create your own Greeting using Css properties like background text
properties etc</h2>
<ul>
<li>
<div class="w-6 h-6 bg-red-500 rounded-full mr-2"></div>
<span>Ease-in</span>
</li>
<li>
<div class="w-6 h-6 bg-green-500 rounded-full mr-2"></div>
<span>Ease-out</span>
</li>
<li>
<div class="w-6 h-6 bg-blue-500 rounded-full mr-2"></div>
<span>Linear</span>
</li>
<li>
<div class="w-6 h-6 bg-yellow-500 rounded-full mr-2"></div>
<span>Ease</span>
</li>
<li>
<div class="w-6 h-6 bg-orange-300 rounded-full mr-2"></div>
<span>Ease-in-out</span>
</li>
</ul>
</div>

<div class="flex flex-col">

<div class="p-4 bg-white border-2 border-black mb-4">
<p class="text-center">Advertisement</p>
</div>

<div class="flex-grow p-4 bg-white border-2 border-black">
<p class="text-center">Scrolling/Slide show</p>
</div>
</div>
</div>

<footer class="text-center p-4 bg-blue-300">
<p>Add footer</p>
</footer>
</div>
</body>
</html>
Output:
Q15 Programs to demonstrate external and internal styles in the web page using font,
text,background, borders, opacity and other CSS 3 properties
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>House Design</title>
</head>
<body>
<div class="house">
<div class="roof"></div>
<div class="sun"></div>
<div class="chimney"></div>
<div class="window"></div>
<div class="window"></div>
<div class="door"></div>
</div>
</body>
</html>
style.css
body {
background-color: #87CEEB; /* Light blue */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
.house {
position: relative;
width: 200px;
height: 200px;
background-color: green;
.roof {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;

border-bottom: 100px solid red;
position: absolute;
top: -100px;
left: 0;
.sun {
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 50%;
position: absolute;
top: -25px;
left: 75px;
.chimney {
width: 20px;
height: 50px;
background-color: brown;
position: absolute;
top: -150px;
left: 90px;
.window {
width: 40px;
height: 40px;
background-color: white;
border: 2px solid black;
position: absolute;
top: 70px;
.window:nth-child(1) {
left: 30px;
.window:nth-child(2) {
right: 30px;
.door {
width: 60px;
height: 100px;
background-color: blue;
position: absolute;
bottom: 0;
left: 70px;
Output

AITpractical 180

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AITpractical 180

Uploaded by

Copyright:

Available Formats

Q1.

Design MCA Timetable Using HTML5 and CSS3

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="styles.css">

font-family: 'Roboto', sans-serif;

border-bottom: 1px solid #e2e8f0;

<div class="min-h-screen bg-gray-100 p-8">

<table class="min-w-full bg-white">

<th class="text-left p-4 font-medium">Time/Day</th>

<th class="text-left p-4 font-medium">09:45-10:45</th>

<th class="text-left p-4 font-medium">10:45-11:45</th>

<th class="text-left p-4 font-medium">11:45-12:00</th>

<th class="text-left p-4 font-medium">01:00-02:00</th>

<th class="text-left p-4 font-medium">02:00-02:45</th>

<th class="text-left p-4 font-medium">02:45-03:45</th>

<th class="text-left p-4 font-medium">03:45-04:45</th>

<th class="text-left p-4 font-medium">04:45-05:15</th>

<td class="p-4">Python Prog</td>

<td class="p-4">AIT Lab</td>

<td class="p-4">Guide Interaction (Mini Project)</td>

<td class="p-4">Python Prog</td>

<td class="p-4" rowspan="2">SHORT RECESS</td>

<td class="p-4">Python Lab</td>

<td class="p-4">Mini Project-II</td>

<td class="p-4" colspan="2">Language Lab/SS-II</td>

<td class="p-4">Tutorial/Theory Practical /HR/IS</td>

<td class="p-4">Python Prog</td>

<td class="p-4" colspan="3">-</td>

<td class="p-4">AIT Lab</td>

<td class="p-4">Guide Interaction (Mini Project)</td>

<td class="p-4" colspan="3">-</td>

<td class="p-4">Python Lab</td>

<td class="p-4">Guide Interaction (Mini Project)</td>

<td class="p-4">AIT Lab</td>

<td class="p-4">Python Lab</td>

<td class="p-4" colspan="2">-</td>

<td class="p-4">Mini Project-II</td>

<td class="p-4">Academic Activity/ Tutorial/Theory Practical /HR/IS</td>

<td class="p-4">Guide Interaction (Mini Project)</td>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

font-family: Arial, sans-serif;

<img src="fruits.png" alt="Fruits" usemap="#image-map">

<area shape="rect" coords="120,20,280,200" href="apple.html" alt="Apple">

<area shape="circle" coords="400,100,80" href="orange.html" alt="Orange">

<area shape="poly" coords="580,20,680,20,680,120,580,120" href="grapes.html" alt="Grapes">

<p>© 2023 Organization Name</p>

Q3 Programs using Canvas and SVG

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<svg id="traffic-signal-svg" width="200" height="400" xmlns="http://www.w3.org/2000/svg">

<rect width="100%" height="100%" fill="#ddd"/>

<circle id="red-light" cx="100" cy="100" r="40" fill="red"/>

<circle id="yellow-light" cx="100" cy="200" r="40" fill="yellow"/>

<circle id="green-light" cx="100" cy="300" r="40" fill="green"/>

<canvas id="traffic-signal-canvas" width="200" height="400"></canvas>

// Get reference to the canvas

const canvas = document.getElementById('traffic-signal-canvas');

const ctx = canvas.getContext('2d');

ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw red light