HTML Record
HTML Record
1
College WebSite
1
Write names of several countries in a paragraph and store it as an HTML
document, world.html. Each country name must be a hot text. When you 6
2
click India (for example), it must open india.html and it should provide a
brief introduction about India.
3 i) 11
Display Text with Bullets and Numbers
5 28
Bio-Data
6 33
Registration Form for an inter-collegiate function.
7 39
Customer Details
8 PrimeNumbers 51
1. CODE
<html>
<head>
<title>
College Department Details
</title>
</head>
<body bgcolor="lightgray">
<h1 align="center" style="color: red;">SALEM SOWDESWARI COLLEGE (SFCW)</h1>
<h2 align="center" style="color: blue;">SALEM-10</h2>
<h3 align="center" style="color: black;">Afliated to Periyar University,Salem-11</h3>
<hr>
<h2 align="center" style="color: green;">About College </h2>
<p style="font-family:courier";>Salem Sowdeswari College (SSC) was founded in 1975 by Dr.
J.K.K. Angappa Chettiar and Amarar Thiru. T.N.K. Govindaraju Chettiar, under the management of
Sri Sowdeswari Mahajana Charitable Trust.
SSC was declared open on 14.07.1975 by the Founder Chairman Amarar Thiru. T.N.K. Govindaraju
Chettiar, an eminent Philanthropist-Industrialist from Madras and by the Vice Chairman, Secretary
and Managing Trustee, Thiru. J.K.K.Angappa Chettiar, another eminent Philanthropist-Industrialist
from Komarapalayam.
</p>
<h2><b>Courses Offered</b></h2>
<ul>
<li>Bsc Computer Science</li>
<li>Bsc Physics</li>
<li>Bsc Chemistry</li>
<li>Bsc Bio Tech</li>
<li>Bsc Mathematics</li>
<li>Bsc Fashion Textails</li>
1
</ul>
<h2>Department of Computer Science</h2>
<p style="font-family:courier">To educate the young
minds with the ability to manage real world problem with the latest technology,
to inculcate professional behaviors, strong ethical values, innovative research capability and
leadership ability.
Help the students to explore the depths of computer science, exalt in them and at the same time join
hands with the other
branches of science to turn something virtual into real and vice versa.</p>
<h2>Faculties of Computer Science</h2>
<ol>
<li>Mr.S.Kumar</li>
<li>Mrs.K.Rajeswari</li>
<li>Mr.A.Sampath Kumar</li>
<li>Mrs.M.Srividya</li>
</ol>
<h3>Condact as </h3>
<p>Phone Number: 0427 2270537</p>
<p>Email:[email protected]</p>
</body>
</html>
OUTPUT
2
2.CODE
<!DOCTYPE html>
3
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>World Countries</title>
</head>
<body>
<p>
Here are some countries: <a href="C:\Users\user9\Desktop\india.html">India</a>, <a
href="C:\Users\user9\Desktop\USA.html">USA</a>, <a href="C:\Users\user9\Desktop\
France.html">France</a>, <a href="C:\Users\user9\Desktop\Japan.html">Japan</a>.
</p>
</body>
</html>
"C:\Users\user9\Desktop\india.html">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About India</title>
</head>
<body>
<h1>India</h1>
<p>India is a vast South Asian country with diverse cultures, languages, and traditions. It is
known for its rich history, vibrant festivals, and iconic landmarks like the Taj Mahal.</p>
</body>
</html>
"C:\Users\user9\Desktop\USA.html">
4
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About USA</title>
</head>
<body>
<h1>USA</h1>
<p>The United States of America (USA), commonly known as the United States (U.S.) or
America, is a country primarily located in North America. It is a federal union of 50 states and a
federal capital district, Washington, D.C. The 48 contiguous states border Canada to the north and
Mexico to the south, with the states of Alaska to the northwest and the archipelagic Hawaii in the
Pacific Ocean.</p>
</body>
</html>
OUTPUT
5
3.i)CODE
6
<html>
<head>
<title>HTML Nested Unordered List</title>
</head>
<body>
<Ol>
<li>Fruits</li>
<ol type="A">
<li><td>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</Ol>
<li>Vegetables</li>
<ol type="A">
<li>Spinach</li>
<li>Cauliflower</li>
<li>Beetroot</li>
</ol>
<li>Cereals</li>
<li>Nuts</li>
</ul>
</body>
</html>
OUTPUT
7
3.ii)CODE
table border=1>
<tr>
8
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
<tr>
<td>Hillary</td>
<td>Nyakundi</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Lary</td>
<td>Mak</td>
<td>[email protected]</td>
</tr>
</table
OUTPUT
9
Ex. No: 4.
CODE
<html>
10
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="300, *">
<frame src="test2.php" name="menu_page" />
<frame src="demo.php" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
FRAMES
<html>
<head>
</head>
<body>
<h3>Contact us</h3>
<ul>
<LI>Doctor Appointments / Emergency</LI>
<LI> NAME: Dr.PON PRABHU</LI>
<LI> ADDRESS: MOGANUR,NAMAKKAL </LI>
<LI> PHONE NO. : 9566015479</LI>
<LI> EMAIL ID: [email protected]</LI>
<LI> Patient Admission & Liaison Services</LI>
<LI> +91-80560 02444</LI>
</ul>
</body>
</html>
11
FRAMESET
<html>
<body>
<h1 style="color:VIOLET;"><B><CENTER><COLOR="JHCSVH">PEPOLE CARE
INTERNATIONAL HOSPITAL</B></H1>
<h2 class="section-heading">All Disease</h2>
</a>
<section>
<a href="#">
<h3>COVID-19</h3>
</a>
<a href="#">
<p>
People may be sick with the virus for 1 to 14 days before developing symptoms. The most
common symptoms of coronavirus disease (COVID-19) are fever, tiredness, and dry cough.
Most people (about 80%) recover from the disease without needing special treatment.
More rarely, the disease can be serious and even fatal. Older people, and people with other
medical conditions (such as asthma, diabetes, or heart disease), may be more vulnerable to
becoming severely ill.
</section>
<section>
<a href="#">
<h3>TUBERCULOSIS</h3>
</a>
<a href="#">
<img src="C:\Users\Siddhant\Desktop\MY PROJECT\img\4.png" alt="Card Image">
</a>
<p>
A potentially serious infectious bacterial disease that mainly affects the lungs.
The bacteria that cause TB are spread when an infected person coughs or sneezes.
Most people infected with the bacteria that cause tuberculosis don't have symptoms. When
symptoms do occur, they usually include a cough (sometimes blood-tinged), weight loss,
night sweats and fever.
Treatment isn't always required for those without symptoms. Patients with active symptoms
will require a long course of treatment involving multiple antibiotics.
</p>
<a href="#" class="btn-readmore">Read More</a>
</div>
</section>
<section>
<a href="#">
<h3>CANCER</h3>
</a>
13
<a href="#">
<img src="C:\Users\Siddhant\Desktop\MY PROJECT\img\5.png" alt="Card Image">
</a>
</div>
<p>
Cancer is a group of diseases involving abnormal cell growth with the potential to invade or
spread to other parts of the body. These contrast with benign tumors, which do not spread
</p>
<a href="#" class="btn-readmore">Read More</a>
</section>
<a href="#">
<img src="C:\Users\Siddhant\Desktop\MY PROJECT\img\7.jpg" alt="Card Image">
</a>
<p>
Surgery is a medical specialty that uses operative manual and instrumental techniques on a
person to investigate or treat a pathological condition such as a disease or injury, to help
improve bodily function or appearance or to repair unwanted ruptured areas.
</p>
<a href="#" class="btn-readmore">Read More</a>
14
</section>
<section>
<a href="#">
<h3>Diagonistic </h3>
</a>
<a href="#">
<img src="C:\Users\Siddhant\Desktop\MY PROJECT\img\8.png" alt="Card Image">
</a>
<p>
Medical diagnosis is the process of determining which disease or condition explains a
person's symptoms and signs. It is most often referred to as diagnosis with the medical
context being implicit.
</p>
<a href="#" class="btn-readmore">Read More</a>
</section>
<section>
<a href="#">
<h3>Radiology</h3>
</a>
<a href="#">
<img src="C:\Users\Siddhant\Desktop\MY PROJECT\img\9.jpg" alt="Card Image">
</a>
<p>
Radiology is the medical discipline that uses medical imaging to diagnose and treat diseases
within the bodies of both humans and animals
15
</p>
<a href="#" class="btn-readmore">Read More</a>
</section>
OUTPUT
16
Ex.NO: 5.
CODE
17
<html>
<head>
<title>BIODATA</title>
</head>
<marquee>
<body bgcolor="pink"><font color="black"><font size=30>Biodata</font>
</marquee>
<hr>
<body><font size=5><font color="blue">
<img src="Desert.jpg" align="right" height=50 width=50 1px>
Name:S.Nandhini<br>
Father's name:S.Selvarajan<br>
Mothers's name:S.Usha<br>
DOB:18:12:1997<br>
Address:Salem-10<br>
Mobile no:9659908730<br>
Religion:Hindu<br>
Nationality:Indian<br>
Gender:Female<br>
Qualification:BCA<br>
<table style="width:50%"border=3>
<tr>
<th>semester</th>
<th>grade</th>
<th>cpga %</th>
</tr>
<tr>
<th>1</th>
<th>S</th>
<th>80%</th>
</tr>
18
<tr>
<th>2</th>
<th>A</th>
<th>78 %</th>
</tr>
</body>
</html>
OUTPUT
19
Ex.No: 6.
CODE
<Html>
20
<head>
<title>
Registration Form for an inter-collegiate function
</title>
</head>
<body bgcolor="red">
<br>
<br>
<h1> Registration Form for an inter-collegiate function</h1>
<form>
<label>
Event :
</label>
<select>
<option value="Event">Event</option>
<option value="Dance">Dance</option>
<option value="Singing">Singing</option>
<option value="Quize">Quize</option>
21
<option value="Painting">ainting</option>
<option value="mime">mime</option>
<option value="Rangoli">Rangoli</option>
</select>
<br>
<br>
<label>
Gender :
</label><br>
<input type="radio" name="male"/> Male <br>
<input type="radio" name="female"/> Female <br>
<input type="radio" name="other"/> Other
<br>
<br>
<label>
Phone :
</label>
<input type="text" name="country code" value="+91" size="2"/>
<input type="text" name="phone" size="10"/> <br> <br>
Address
<br>
<textarea cols="40" rows="2" value="address">
</textarea>
<br> <br>
<input type="button" value="Submit"/>
</form>
22
</body>
</html>
OUTPUT
23
Ex.No: 7.
Index.html
<!DOCTYPE html>
<html lang="en">
24
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CUSTOMER DETAILS</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.main h2 {
color: #4caf50;
margin-bottom: 20px;
}
label {
display: block;
25
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
}
</style>
</head>
<body>
26
<div class="main">
<h2>Customer details</h2>
<form action="test.php" method="post">
Test.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
27
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main {
background-color: #fff;
border-radius: 15px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 300px;
}
.main h2 {
color: #4caf50;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: bold;
}
input[type="text"],
input[type="email"],
input[type="password"],
select {
28
width: 100%;
margin-bottom: 15px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
}
button[type="submit"] {
padding: 15px;
border-radius: 10px;
border: none;
background-color: #4caf50;
color: white;
cursor: pointer;
width: 100%;
font-size: 16px;
}
</style>
</head>
<body>
<div class="main">
<h2>Registration Form</h2>
<form action="reg.php" method="post">
<label for="cn"> Customer ID:</label>
<input type="text" id="cid" name="cid" required />
29
<label for="ct"> City:</label>
<input type="text" id="ct" name="ct" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="male">
Male
</option>
<option value="female">
Female
</option>
<option value="other">
Other
</option>
</select>
30
</html>
Reg.php
<?php
$cid=$_POST['cid'];
$cn=$_POST['cn'];
$ct=$_POST['ct'];
$pc=$_POST['pc'];
$ph=$_POST['ph'];
$email=$_POST['email'];
$gender=$_POST['gender'];
$con=mysql_connect("localhost","root","")or die(mysql_error());
$seldb=mysql_select_db("customer",$con);
$query="insert into reg values('$cid','$cn','$ct','$pc','$ph','$email','$gender')";
$result=mysql_query($query);
?>
Ser.php
<!DOCTYPE html>
<html lang="en">
<body>
<br>
<br>
<label for="pc"> Pin code:</label>
31
<input type="text" id="pc" name="pc" maxlength="6" required />
<br>
<br>
<br>
<button type="submit" >
Open
</button>
</form>
</body>
</html>
Ck1.php
<?php
if(($cid=$_POST['cid'])&&($pc=$_POST['pc']))
{
$cid=$_POST['cid'];
$cn=$_POST['cn'];
$ct=$_POST['ct'];
$pc=$_POST['pc'];
$ph=$_POST['ph'];
$email=$_POST['email'];
$gender=$_POST['gender'];
$con=mysql_connect("localhost","root","")or die(mysql_error());
$seldb=mysql_select_db("customer",$con);
$q = mysql_query("SELECT * FROM reg WHERE cid ='".$cid."' AND pc ='".$pc."'") or
die(mysql_error());
echo "Customer name: ";
echo $cid;
echo "<br>";
echo $cn;
32
echo "<br>";
echo $ct;
echo "<br>";
echo $pc;
echo "<br>";
echo $ph;
echo "<br>";
echo $email;
echo "<br>";
echo $gender;
}
else
{
echo "Please Check.........";
}
?>
OUTPUT
33
34
35
Ex No :8
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Finder</title>
</head>
<body>
<h2>Find Prime Numbers Between Two Numbers</h2>
<form method="POST" action="">
<label for="n1">Enter First Number (n1): </label>
<input type="number" id="n1" name="n1" required><br><br>
<?php
36
$n1 = $_POST['n1'];
$n2 = $_POST['n2'];
38
OUTPUT
39