Scribd
Upload
37 views35 pages

PRACTICAL12

Uploaded by

sujiblessy0604
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
37 views35 pages

PRACTICAL12

Uploaded by

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

EX NO:1

DATE: INTERNAL LINKS AND IMAGES

AIM:

To Create a Website Using Internal Links and Images.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link rel="icon" href="images/logo.jpg">

<title>Modern Website with Visuals and Links</title>

<style>

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

margin: 0;

padding: 0;

background-color: #f4f4f9;

color: #333;

.navbar {
background-color: #3b5998;

overflow: hidden;

position: fixed;

top: 0;

width: 100%;

z-index: 1000;

.navbar a {

float: right; /* Float items to the right */

display: block;

color: #f4f4f9;

text-align: center;

padding: 14px 20px;

text-decoration: none;

font-weight: bold;

.navbar a:hover {

background-color: #2b3d69;

.section {

padding: 80px 20px;

text-align: center;

margin-top: 60px;

.section img {
max-width: 100%;

height: auto;

border-radius: 15px;

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

.section h1 {

color: #3b5998;

font-size: 36px;

margin-bottom: 20px;

.section p {

font-size: 18px;

line-height: 1.8;

max-width: 800px;

margin: 20px auto;

color: #555;

.btn {

display: inline-block;

padding: 12px 30px;

background-color: #bed638;

color: #fff;

text-decoration: none;

font-size: 18px;

border-radius: 25px;
transition: background-color 0.3s ease;

.btn:hover {

background-color: #a5c82b;

.content-section {

display: flex;

justify-content: space-around;

align-items: center;

padding: 60px 20px;

background-color: #fff;

.content-section img {

max-width: 400px;

border-radius: 10px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.content-section div {

max-width: 500px;

text-align: left;

.content-section h2 {

font-size: 28px;

color: #3b5998;

margin-bottom: 20px;
}

.content-section p {

font-size: 18px;

color: #666;

line-height: 1.7;

footer {

background-color: #282828;

color: #f4f4f9;

padding: 60px 20px;

text-align: center;

margin-top: 40px;

footer .footer-content {

display: flex;

flex-direction: column;

align-items: center;

gap: 25px;

footer h3 {

margin-bottom: 20px;

font-size: 28px;

color: #bed638;

footer p {
font-size: 16px;

max-width: 800px;

text-align: center;

line-height: 1.6;

.contact-info {

font-size: 18px;

margin-top: 30px;

iframe {

width: 100%;

max-width: 600px;

height: 300px;

border: none;

margin-top: 20px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

</style>

</head>

<body>

<h2> SUGATHI </h2>

<h2>RCAS2023BIT025</h2>

<div class="navbar">

<a href="contactus.html">Contact Us</a>


<a href="gallery.html">Gallery</a>

<a href="services.html">Services</a>

<a href="aboutus.html">About Us</a>

<a href="home.html">Home</a>

</div>

<centre><h1>Sachin Immanuel Leo.S</h1>

<h2>RCAS2023BIT007</h2></centre>

<div class="section">

<h1>Welcome to Our Modern Website</h1>

<p>Explore a world of premium services and high-quality products. We are committed to delivering
exceptional experiences tailored to your needs.</p>

<img src="bg1.jpg" alt="Website Image">

<br><br>

<a href="services.html" class="btn">Learn More</a>

</div>

<div class="content-section">

<img src="services.png" alt="Our Services">

<div>

<h2>Our Services</h2>

<p>We offer a wide range of services including custom solutions, professional consulting, and
product delivery. Our team is dedicated to providing the highest level of quality in everything we do.
Whether you’re looking for a personalized experience or ready-to-go products, we’ve got you
covered.</p>

<a href="services.html" class="btn">Explore Services</a>

</div>

<footer>

<div class="footer-content">
<h3>About Us</h3>

<p>We are passionate about creating experiences that leave a lasting impact. Our mission is
to offer products and services that enhance your life and make your journey unforgettable.</p>

<p>Location: 1234 Example Street, City Name, Country</p>

<iframe

src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345095563!2d144.963
0579159044!3d-37.81410797975171!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642
af0f11fd81%3A0xf0727c2d8aa93e0b!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1634613557643!5
m2!1sen!2sau"

allowfullscreen=""

loading="lazy">

</iframe>

<div class="contact-info">

<p><strong>Contact Us:</strong></p>

<p>Email: [email protected]</p>

<p>Phone: +123-456-7890</p>

</div>

</div>

</footer>

</body>

</html>
EX NO:2

DATE:
CALENDER

AIM:

To Design a Calender Using Table Tag.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple Calendar</title>

<style>

table {

margin: 0 auto;

border-collapse: collapse;

th, td {

padding: 10px;

border: 1px solid #ccc;

text-align: center;

th {

background-color: #f2f2f2;

}
caption {

margin-bottom: 10px;

font-size: 25px;

font-weight: bold;

.sunday{

color: #ff0000;

</style>

</head>

<body>

<center>

<h2>SUGATHI<br>RCAS2023BIT025</h2></center>

<table>

<caption>October 2024</caption>

<thead>

<tr>

<th class="sunday">Sunday</th>

<th>Monday</th>

<th>Tuesday</th>

<th>Wednesday</th>

<th>Thursday</th>

<th>Friday</th>

<th>Saturday</th>

</tr>
</thead>

<tbody>

<tr>

<td></td>

<td></td>

<td>1</td>

<td>2</td>

<td>3</td>

<td>4</td>

<td>5</td>

</tr>

<tr>

<td class="sunday">6</td>

<td>7</td>

<td>8</td>

<td>9</td>

<td>10</td>

<td>11</td>

<td>12</td>

</tr>

<tr>

<td class="sunday">13</td>

<td>14</td>

<td>15</td>

<td>16</td>
<td>17</td>

<td>18</td>

<td>19</td>

</tr>

<tr>

<td class="sunday">20</td>

<td>21</td>

<td>22</td>

<td>23</td>

<td>24</td>

<td>25</td>

<td>26</td>

</tr>

<tr>

<td class="sunday">27</td>

<td>28</td>

<td>29</td>

<td>30</td>

<td>31</td>

<td></td>

<td></td>

</tr>

</tbody>

</table>

</body></html>
EX NO:3

DATE:
LIST OF FIVE FLOWERS

AIM:

To Create a HTML document to display a list of five flowers and link each oneto another
document displaying brief description of the flower, Add picture wherever possible.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>flowers</title>

</head>

<body>

<h2> SUGATHI </h2>

<h2> RCAS2023BIT025 </h2>

<ol>

<li><a href="ghost orchid.html">ghost orchid</a></li>

<li><a href="flame lily.html">flame lily</a></li>

<li><a href="Hydrangea.html">Hydrangea</a></li>

<li><a href="jade vine.html">jade vine</a></li>

<li><a href="Boganvilla.html">boganvilla</a></li>

</ol>

</body>

</html>
GHOST ORCHID

<!DOCTYPE html>

<html>

<head>

<title>ghost orchid</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<p><h3>GHOST ORCHID</h3></p>

<img src="C:\Users\santh\OneDrive\Desktop\ghost orgid.jpeg">

<p><h2>GHOST ORCHID</h2></p>

<p> the ghost orchid is a rare perennial<br> epiphyte from the orchid family.<br>

It is native to Florida, the Bahamas, and Cuba.<br> Other common names include palm
polly<br> and white frog orchid.</p>

</body>

</html>

FLAME LILY

<!DOCTYPE html>

<html>

<head>

<title>Flame lily</title>

</head>

<body>
<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<p><h2>FLAME lily</h2></p>

<img src="C:\Users\santh\OneDrive\Desktop\flame lily.jpeg">

<p><h2>BENIFITS OF FLAME LILY</h2></p>

<p>Gloriosa is a genus of 12 species in the plant family Colchicaceae, <br>and includes the
formerly recognised genus Littonia.<br> They are native in tropical and southern Africa to Asia,<br> and
naturalised in Australia and the Pacific <br>as well as being widely cultivated</p>

</body>

</html>

HYDRANGEA

<!DOCTYPE html>

<html>

<head> `

<title>Hydrangea</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<p><h2>Hydrangea</h2></p>

<img src="C:\Users\santh\OneDrive\Desktop\hydrangea.jpeg">

<p><h2>BENIFITS OF HYDRANGEA</h2></p>

<p>You know summer is here when big, showy hydrangea bushes<br> begin gracing gardens
across the country. This perennial,<br> a native of East Asia and the Americas, <br>comprises more than
75 species and 600 cultivated varieties, <br>of which mophead, lacecap, oakleaf, and peegee are the
most common.<br> Some hydrangea flowers can turn a pretty<br> pink or blue depending on the
acidity or alkalinity of the soil, while others will remain white. Mopheads, lacecaps<br>, and oakleafs
bloom on the previous year's wood and can be pruned in the summer after flowering; peegees<br>
bloom on this year's wood and can be pruned in the late winter, before the new spring growth.</p>

</body>

</html>

JADE VINE

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<p><h2>jade vine</h2></p>

<img src="C:\Users\santh\OneDrive\Desktop\jade vine.jpeg">

<p><h2>BENIFITS OF JADE VINE</h2></p>

<p>Strongylodon macrobotrys, commonly known as the jade vine, emerald vine, <br>or
turquoise jade vine, is a leguminous vine endemic to the Philippines.<br> It is a popular ornamental
plant known for its cascading clusters <br>of vibrant turquoise or greenish-blue claw-shaped
flowers.</p>

</body>

</html>
BOGANVILLA

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Document</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<p><h2>Boganvilla</h2></p>

<img src="C:\Users\santh\OneDrive\Desktop\Boganvilla.jpeg">

<p><h2>BENIFITS OF BOGANVILLA</h2></p>

<p>boganvilla are one of the most popular flower types and are best known for<br> their dazzling
yellow color and large size. They generally<br> symbolize adoration, loyalty, and longevity in the
language of flowers.<br> Native Americans view boganvilla as a symbol <br>of harvest and bounty since
the flower provides seeds and pigments,<br> in addition to being visually beautiful.<br> boganvilla need
direct sunlight for six to eight hours per day and <br>require hot conditions to flower well. boganvilla
<br>also have long roots that require plenty of room to spread out, so soil should be well dug and not
too dense for growth.</p>

</body>

</html>
EX NO:4

DATE:
FRAME SET

AIM:

To Write an HTML code to display a list of 5 carsin a frame, Link each one to a brief description
in second frame. The left frame should display the list and the right frame should display the
paragraph about the frame.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Cars List with Iframe</title>

<style>

#carList {

width: 30%;

float: left;

#carDisplay, #carDisplay2 {

width: 35%;

float: left;

text-align: center;

iframe {
border: 1px solid #ccc;

width: 500px;

height: 500px;

iframe img {

width: 10px;

height: 5px;

</style>

<script>

function displayCar(imageUrl, descriptionUrl) {

document.getElementById('carFrame').src = imageUrl;

document.getElementById('carFramedes').src = descriptionUrl;

</script>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BITO25</h2>

<div id="carList">

<h2>Car List</h2>

<ul>

<li><a href="#"
onclick="displayCar('toyota.jpg', 'toyota-des.html')">Toyota</a></li>
<li><a href="#" onclick="displayCar('mustang.jpg',
'mustang- des.html')">Ford Mustang</a></li>

<li><a href="#" onclick="displayCar('bmw-i8.jpg', 'bmw- des.html')">BMW


i8</a></li>

<li><a href="#" onclick="displayCar('audi-r8.jpg', 'audi- des.html')">Audi


R8</a></li>

<li><a href="#" onclick="displayCar('corvette.jpg',


'corvette- des.html')">Chevrolet Corvette</a></li>

</ul>

</div>

<div id="carDisplay">

<h2>Car Image</h2>

<iframe id="carFrame" src="" frameborder="0"></iframe>

</div>

<div id="carDisplay2">

<h2>Car Description</h2>

<iframe id="carFramedes" src="" frameborder="0"></iframe>

</div>

</body>

</html>

TOYOTA

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

<head>

<meta charset="UTF-8">

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

<title>Toyota Camry</title>

</head>

<body>

<h2> SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<h1>Toyota Camry</h1>

<img src="C:\Users\santh\OneDrive\Desktop\download 1 C.jpeg">

<p>The Toyota Camry is a mid-size sedan known for its reliability, <br>comfort, and fuel efficiency. It's a
popular choice for daily commuting and family travel.</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.<br> Doloremque vero deserunt vitae
qui ullam laudantium sequi<br> autem sapiente asperiores! Vel quasi fuga ipsa pariatur, tempore,
exercitati</p>

</body>

</html>

MUSTANG

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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


<title>Toyota Camry</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<h3>Ford Mustang</h3>

<img src="C:\Users\santh\OneDrive\Desktop\download 2 c.jpeg">

<p>The Ford Mustang is a mid-size sedan known for its reliability,<BR> comfort, and racing. It's a
popular choice for daily commuting </p>

<p>Lorem, ipsum dolor sit amet consectetur elit.<BR> Doloremque vero deserunt vitae qui ullam
laudantium sequi <br>autem sapiente asperiores! Vel quasi fuga ipsa pariatur, tempore, exercitati</p>

</body>

</html>

BMW

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>BMW</title>

</head>

<body>

<h2>SUGATHI.A</h2>
<h2>RCAS2023BITO25</h2>

<h3>bmw-i8</h3>

<img src="C:\Users\santh\OneDrive\Desktop\BMW.jpeg">

<p>The BMW is a mid-size sedan known for its reliability,<BR> comfort, and fuel efficiency. It's a
popular choice <br>sfor daily commuting and family travel.</p>

</body>

</html>

AUDI

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Audi</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<h3>Audi R8</h3>

<img src="C:\Users\santh\OneDrive\Desktop\download 3 c.jpeg">

<p>The Audi R8is a mid-size sedan known for its reliability, <br>comfort, and fuel
efficiency.<br> It's a popular choice for daily commuting and family travel.</p>
</body>

</html>

CHEVROLET

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Chevrolet Corvette</title>

</head>

<body>

<h2>SUGATHI.A</h2>

<h2>RCAS2023BIT025</h2>

<h3>Chevrolet Corvette</h3>

<img src="C:\Users\santh\OneDrive\Desktop\download4 c.jpeg">

<p>The Chevrolet Corvette is a mid-size sedan known for its reliability, <br>comfort, and
fuel efficiency.<br> It's a popular choice for daily commuting and family travel.</p>

</body>

</html>
EX NO:5

DATE:
FORM

AIM:

To Create a simple HTML Form covering major form elements.

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>SUGA</title>

<style>

.bg{

color:white;

background-color:black;

</style>

</head>

<body>

<h2> SUGATHI</h2>

<h2> RCAS2023BIT025</h2>

<form>

<center>

<div class="bg">
<lable>username</lable>

<input type="text" id="ds" name="jack" placeholder="user name"><br></br>

<lable>password</lable>

<input type="password"><br></br>

<lable>email</lable>

<input type="email" id="ss" name="nila"><br></br>

<lable>phone.no</lable>

<input type="number" ><br></br>

<lable>age</age>

<input type="number"><br></br>

<label>gender</label>

<input type="radio"name="radio">

<label>Male</label>

<input type="radio"name="radio">

<label>Female</label><br></br>

<p id="demo"></p>

<button type="button" onclick='document.getElementById()'></button>

<label>singing</label>

<input type="checkbox" name="checkbox"><br></br>

<label>reading</label>

<input type="checkbox" name="checkbox"><br></br>

<label>choose a department</label>

<select>
<option value="gg"></option>

<option value="dd">CSE</option>

<option value="ss">EEE</option>

<option value="cc">IT</option>

</select><br></br>

<label>file</label>

<input type="file"><br></br>

<label>address</label>

<textarea>

</textarea>

<p id="demo"></p>

<button type="button" onclick='document.getElementById("demo").innerHTML="you have


submited"'>submit</button>

<p id="hi"></p>

<button type="button" onclick='document.getElementById("hi").innerHTML="your form has


beeen cancelled"'>cancel</button>

</div>

</center>

</form>

</body>

</html>
EX NO :6

DATE:
EMBED MEDIA

AIM:

To Create a Embed Audio and Video in an HTML Page.

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Embed Audio and Video</title>

</head>

<body>

<h2> SUGATHI </h2>

<h2> RCAS2023BIT025 </h2>

<h1>Embedded Audio and Video</h1>

<!-- Audio Embed -->

<h2>Audio Example</h2>

<audio controls>

<source src="Badass Leo 128 .mp3.mp3" type="audio/mp3">

Your browser does not support the audio element.

</audio>

<!-- Video Embed -->

<h2>Video Example</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/73QmOb3L0fU?si=1SVOnDl5YOWqJnBx" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>

</body>

</html>
EX NO:7

DATE:
CSS

AIM:

To Rotate a Element Using Css

PROGRAM:

<!DOCTYPE html>

<html>

<head>

<title>Rotate Element</title>

<style>

body {

background: linear-gradient(135deg, #a2d2ff, #cdb4db);

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

.rotate-box { width: 200px; height: 200px;

background: linear-gradient(135deg, #ffafbd, #ffc3a0); border-radius: 20px;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); text-align: center;

line-height: 200px; font-size: 24px; font-weight: bold; color: white;


transition: transform 0.6s ease, box-shadow 0.6s ease, background 0.6s ease; transform:
rotate(45deg) scale(1);

.rotate-box:hover {

transform: rotate(360deg) scale(1.1);

box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);

background: linear-gradient(135deg, #6dd5ed, #2193b0);

h1 {

color: #333;

text-align: center;

</style>

</head>

<body>

<div class="rotate-box"> Hover Me!

</div>

</body>

</html>
EX NO: 8

DATE:
SIMPLE QUIZ

AIM:

To Build a Simple Quiz

PROGRAM:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Simple Quiz</title>

<style>

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

padding: 20px;

.quiz-container {

background: white;

padding: 20px;

border-radius: 5px;

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

button {
margin-top: 20px;

padding: 10px 15px;

background-color: #28a745;

color: white;

border: none;

border-radius: 5px;

cursor: pointer;

button:hover {

background-color: #218838;

</style>

</head>

<body>

<H2>SUGATHI.A</H2>

<H2> RCAS2023BIT025</H2>

<div class="quiz-container">

<h1>Simple Quiz</h1>

<form id="quizForm">

<div>

<h3>1. What is the capital of France?</h3>

<label><input type="radio" name="q1" value="a"> A) Paris</label><br>

<label><input type="radio" name="q1" value="b"> B) London</label><br>

<label><input type="radio" name="q1" value="c"> C) Berlin</label><br>


</div>

<div>

<h3>2. Who wrote 'Romeo and Juliet'?</h3>

<label><input type="radio" name="q2" value="a"> A) Charles Dickens</label><br>

<label><input type="radio" name="q2" value="b"> B) William Shakespeare</label><br>

<label><input type="radio" name="q2" value="c"> C) Mark Twain</label><br>

</div>

<div>

<h3>3. What is the largest planet in our solar system?</h3>

<label><input type="radio" name="q3" value="a"> A) Earth</label><br>

<label><input type="radio" name="q3" value="b"> B) Jupiter</label><br>

<label><input type="radio" name="q3" value="c"> C) Mars</label><br>

</div>

<button type="button" onclick="submitQuiz()">Submit</button>

</form>

<div id="result" style="margin-top: 20px;"></div>

</div>

<script>

function submitQuiz() {

const answers = {

q1: 'a',

q2: 'b',

q3: 'b'

};
let score = 0;

const form = document.forms['quizForm'];

for (const question in answers) {

const userAnswer = form[question].value;

if (userAnswer === answers[question]) {

score++;

const totalQuestions = Object.keys(answers).length;

document.getElementById('result').innerText = `You scored ${score} out of ${totalQuestions}.`;

</script>

</body>

</html>

You might also like