AITpractical 180

Download as pdf or txt
Download as pdf or txt
You are on page 1of 56

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>

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

</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">-</td>

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

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


</tr>

<tr class="border-b">

<td class="p-4">Tuesday</td>

<td class="p-4">Python Prog</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">SPM</td>

<td class="p-4">LUNCH</td>

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

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

</tr>

<tr class="border-b">

<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">SPM</td>

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

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

</tr>

<tr class="border-b">

<td class="p-4">Thursday</td>

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

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

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

<td class="p-4">OT</td>

<td class="p-4">ADBMS</td>

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

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


</tr>

<tr class="border-b">

<td class="p-4">Friday</td>

<td class="p-4">ADBMS</td>

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

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

<td class="p-4">OT</td>

<td class="p-4">ADBMS</td>

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

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

</tr>

<tr class="border-b">

<td class="p-4">Saturday</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">-</td>

<td class="p-4">Guide Interaction (Mini Project)</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>

<meta charset="UTF-8">

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

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

<meta charset="UTF-8">

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


<title>Static Traffic Signal</title>

</head>

<body>

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

<!-- Background -->

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

<!-- Red Light -->

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

<!-- Yellow Light -->

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

<!-- Green Light -->

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

<meta charset="UTF-8">

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

<title>House with Trees</title>

</head>

<body>

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

<!-- House Walls -->

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

<!-- Roof -->

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

<!-- Windows -->

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

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

<!-- Door -->

<rect x="180" y="300" width="40" height="50" fill="orange"/>

</svg>

<canvas id="house-canvas" width="400" height="400"></canvas>

<script>

// Get reference to the canvas


const canvas = document.getElementById('house-canvas');

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

// Draw House Walls

ctx.fillStyle = 'yellow';

ctx.fillRect(100, 200, 200, 150);

// Draw Roof

ctx.beginPath();

ctx.moveTo(100, 200);

ctx.lineTo(300, 200);

ctx.lineTo(200, 100);

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>

<meta charset="UTF-8">

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

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

<meta charset="UTF-8">

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

<title>Olympic Rings</title>

</head>

<body>

<canvas id="olympic-rings-canvas" width="600" height="400"></canvas>

<script>

const canvas = document.getElementById('olympic-rings-canvas');

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

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

<meta charset="UTF-8">

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

<title>Shapes Stack</title>

</head>

<body>

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

<!-- Line -->

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

<!-- Rectangle -->

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

<!-- Circle -->

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


<!-- Star -->

<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');

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

// Draw line

ctx.beginPath();

ctx.moveTo(50, 50);

ctx.lineTo(350, 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.fillStyle = 'yellow';

ctx.fill();
// Draw star

ctx.beginPath();

ctx.moveTo(200, 220);

ctx.lineTo(215, 255);

ctx.lineTo(255, 255);

ctx.lineTo(225, 275);

ctx.lineTo(240, 310);

ctx.lineTo(200, 280);

ctx.lineTo(160, 310);

ctx.lineTo(175, 275);

ctx.lineTo(145, 255);

ctx.lineTo(185, 255);

ctx.closePath();

ctx.fillStyle = 'yellow';

ctx.fill();

</script>

</body>

</html>

Output:
Q8. Programs using Canvas and SVG.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Faces</title>

</head>

<body>

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

<!-- Smiley Face -->

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

<!-- Angry Face -->

<circle cx="300" cy="100" r="50" fill="orange"/>

<line x1="270" y1="80" x2="290" y2="100" stroke="black" stroke-width="4"/>

<line x1="330" y1="80" x2="310" y2="100" stroke="black" stroke-width="4"/>

<line x1="270" y1="130" x2="330" y2="130" stroke="black" stroke-width="4"/>

</svg>

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

<script>

const canvas = document.getElementById('faces-canvas');

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


// Smiley Face

ctx.beginPath();

ctx.arc(100, 100, 50, 0, Math.PI * 2);

ctx.fillStyle = 'yellow';

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.moveTo(80, 120);

ctx.quadraticCurveTo(100, 140, 120, 120);

ctx.strokeStyle = 'black';

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.moveTo(270, 80);

ctx.lineTo(290, 100);

ctx.moveTo(330, 80);

ctx.lineTo(310, 100);

ctx.moveTo(270, 130);

ctx.lineTo(330, 130);

ctx.strokeStyle = 'black';

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>

<meta charset="UTF-8">

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

<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&amp;se=2024-02-
11T14%3A43%3A59Z&amp;sp=r&amp;sv=2021-08-
06&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-02-
11T09%3A41%3A05Z&amp;ske=2024-02-12T09%3A41%3A05Z&amp;sks=b&amp;skv=2021-08-
06&amp;sig=iQ2JkHCWrPS4A7F7ALHs/xMSKNtrYwifhaDiyNTVZpU%3D" alt="Balloons and confetti with
text Birthday Wishes, Messages, Quotes, &amp; 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, &amp;


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>
<meta charset="UTF-8">

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

<title>Styling Example</title>

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

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

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

<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&amp;se=2024-02-11T14%3A56%3A48Z&amp;sp=r&amp;sv=2021-08-
06&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-02-
11T13%3A16%3A06Z&amp;ske=2024-02-12T13%3A16%3A06Z&amp;sks=b&amp;skv=2021-08-
06&amp;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>

<meta charset="UTF-8">

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

<title>Orphanage Registration Form</title>

<style>

body {

font-family: Arial, sans-serif;

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;

margin-bottom: 24px;

.image-container img {

width: 96px;

height: 96px;

border: 4px dashed #000000;

.details {

font-weight: bold;

margin-bottom: 16px;

.details-grid {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 16px;

.documents {

margin-bottom: 16px;

}
.documents ul {

list-style-type: none;

padding-left: 0;

.documents ul li {

margin-bottom: 8px;

.school-certify {

margin-bottom: 16px;

</style>

</head>

<body>

<div class="container">

<h1 class="heading">Orphanage Registration Form</h1>

<div class="image-container">

<img src="https://oaidalleapiprodscus.blob.core.windows.net/private/org-
Z4nfEDaxRZMLLsvkUtarndlT/user-HEQW8znOgvSHX0At9Wit8Qry/img-
FMKcEqLfageqyTTZmpjRpbG5.png?st=2024-02-11T13%3A03%3A24Z&amp;se=2024-02-
11T15%3A03%3A24Z&amp;sp=r&amp;sv=2021-08-
06&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-02-
11T13%3A51%3A09Z&amp;ske=2024-02-12T13%3A51%3A09Z&amp;sks=b&amp;skv=2021-08-
06&amp;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>

<div class="details">

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

<div class="details">

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

<meta charset="UTF-8">

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

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

background-color: #ffffff;

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 {

margin-bottom: 16px;

.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-size: 1.125rem;

font-weight: bold;

margin-bottom: 4px;

.text-sm {

font-size: 0.875rem;

</style>

</head>

<body class="bg-blue-100">

<div class="container">

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


Z4nfEDaxRZMLLsvkUtarndlT/user-HEQW8znOgvSHX0At9Wit8Qry/img-
eymHbQuI56iN8inlSgVcDXy9.png?st=2024-02-11T13%3A10%3A35Z&amp;se=2024-02-
11T15%3A10%3A35Z&amp;sp=r&amp;sv=2021-08-
06&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-02-
11T13%3A17%3A03Z&amp;ske=2024-02-12T13%3A17%3A03Z&amp;sks=b&amp;skv=2021-08-
06&amp;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&amp;se=2024-02-11T15%3A10%3A34Z&amp;sp=r&amp;sv=2021-08-
06&amp;sr=b&amp;rscd=inline&amp;rsct=image/png&amp;skoid=6aaadede-4fb3-4698-a8f6-
684d7786b067&amp;sktid=a48cca56-e6da-484e-a814-9c849652bcb3&amp;skt=2024-02-
11T14%3A10%3A34Z&amp;ske=2024-02-12T14%3A10%3A34Z&amp;sks=b&amp;skv=2021-08-
06&amp;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>

<meta charset="UTF-8">

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

<title>Web Site Name (Add animation to text)</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #edf2f7;

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 {

background-color: #edf2f7;

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

background-color: #ffffff;

.border-2 {

border-width: 2px;

border-style: solid;

.border-black {

border-color: #000000;

.mb-4 {

margin-bottom: 1rem;

.mb-2 {

margin-bottom: 0.5rem;

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

margin-bottom: 0.5rem;

display: flex;

align-items: center;

span {

font-size: 0.875rem;

</style>

</head>

<body class="bg-blue-100">

<div class="flex flex-col h-screen">

<!-- Header -->

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

<!-- Main Content -->

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

<!-- Left Column -->

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

<!-- Right Column -->

<div class="flex flex-col">

<!-- Advertisement Box -->

<div class="p-4 bg-white border-2 border-black mb-4">

<p class="text-center">Advertisement</p>

</div>

<!-- Slideshow Box -->

<div class="flex-grow p-4 bg-white border-2 border-black">

<p class="text-center">Scrolling/Slide show</p>

</div>

</div>

</div>

<!-- Footer -->

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

<meta charset="UTF-8">

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

<title>House Design</title>

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

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

You might also like