Scribd
Upload
45 views

IKHLAAS

The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

Uploaded by

Suhail Malik
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
45 views

IKHLAAS

The document contains an HTML program to perform hyperlinking. It defines the HTML structure with <head> and <body> tags. Within the <body> there is a <div> containing an <h1> heading "It is an example of Hyperlink" and two <p> paragraphs. The first paragraph contains a link to ChatGPT and the second contains a link to Netflix, defined using <a> tags and href attributes.

Uploaded by

Suhail Malik
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/ 10

Program 4 – Write a program to perform hyperlink.

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink</title>
</head>
<body>
<div >
<div >
<h1> It is a example of Hyperlink</h1>
<p>Here is a <a href="https://chat.openai.com/">link</a> to ChatGPT</p>
<p>
And here is another <a href="https://www.netflix.com/in/">link</a> to
netflix.
</p>
</div>
</div>
</body>
</html>

Output:
Program 5 – Write a Program to Perform Image Mapping

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>

<img src="india.jpg" usemap="#image-map" />

<map name="image-map">
<area
target=""alt="Rajathan"title="Rajathan"href="https://rajasthan.gov.in/"coords="93,330,303,4
95"shape="rect"/>
</map>

<map name="image-map"> <area


target=""alt="Kerla"title="Sikkim"href="https://www.keralatourism.org/"coords="684,386,6
78,358,693,357,702,363,704,378"shape="rect"/>
</map>

<map name="image-map">
<area target="" alt="Tripura" title="Tripura" href="https://tripura.gov.in/"
coords="821,486,800,497,786,514,796,530,808,533,814,511,825,507,825,493"
shape="poly">
</map>

<map name="image-map">
<area target="" alt="Akhand Bharat" title="Akhand Bharat"
href="https://akhandbharatlive.com/"
coords="197,448,203,440,209,436,206,429,201,421,201,406,200,394,199,386,203,376,208,3
70,218,365,225,365,235,364,248,359,259,359,271,354,280,361,297,358,294,342,334,321,37
2,328,375,344,389,367,393,387,391,394,401,395,414,400,421,402,433,407,443,413,447,418,
450,426,457,440,459,453,464,462,471,467,492,462,517,457,525,464,521,471,514,484,517,4
89,525,498,536,503,541,511,542,521,545,534,539,545,521,567,506,555,495,543,486,544,47
9,542,479,552,478,564,478,576,482,580,494,588,498,593,506,600,510,611,530,694,490,664,
485,648,466,628,451,613,332,530,332,538,326,570,324,580,338,582,348,600,336,609,310,5
93,300,579,292,562,289,542,277,517,276,485,266,490,255,484,255,467,241,462,233,452,22
0,450" shape="poly">
</map>
</map>
</body>
</html>

Output
Experiment No. 7 – Write a program to show embedded Audio &
Video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<audio controls>
<source src="./Pinda Aale Jatt (Dil Diyan Gallan) - Parmish Verma.mp3" />
</audio>
<video style="height: 12%;width: 15%;" controls>
<source src="./pexels-mart-production-7565439-1080x1920-25fps.mp4" />
</video>
</body>
</html>
Output –
Experiment 8 – Design a working Calculator using Javascript.

<!DOCTYPE html>
<html>
<head>
<title>Simple Calculator</title>
<style>
.calculator {
width: 200px;
margin: auto;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
}

input[type="text"] {
width: 100%;
margin-bottom: 10px;
padding: 5px;
font-size: 20px;
}

button {
width: 50px;
height: 50px;
font-size: 20px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 5px;
border: none;
outline: none;
background-color: #f1f1f1;
color: #333;
}

button:hover {
background-color: #ccc;
cursor: pointer;
}

</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" placeholder="0" disabled>
<button onclick="clearResult()">C</button>
<button onclick="backspace()"><</button>
<button onclick="display('/')">/</button>
<button onclick="display('7')">7</button>
<button onclick="display('8')">8</button>
<button onclick="display('9')">9</button>
<button onclick="display('*')">*</button>
<button onclick="display('4')">4</button>
<button onclick="display('5')">5</button>
<button onclick="display('6')">6</button>
<button onclick="display('-')">-</button>
<button onclick="display('1')">1</button>
<button onclick="display('2')">2</button>
<button onclick="display('3')">3</button>
<button onclick="display('+')">+</button>
<button onclick="display('0')">0</button>
<button onclick="display('.')">.</button>
<button onclick="calculate()">=</button>
</div>

<script >
var result = document.getElementById("result");

function display(value) {
result.value += value;
}
function clearResult() {
result.value = "";
}
function backspace() {
result.value = result.value.slice(0, -1);
}
function calculate() {
result.value = eval(result.value);
}
</script>
</body>
</html>

Output
Experiment 9: Registration Form Validation on Email, Name and Id.

<!DOCTYPE html>
<html>
<head>
<title>Registration Form Validation</title>
<style>
.container {
width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}

h1 {
text-align: center;
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"] {
width: 100%;
padding: 5px;
margin-bottom: 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ccc;
}

button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<h1>Registration Form</h1>
<form id="registrationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

<label for="id">ID:</label>
<input type="text" id="id" name="id" required>

<button type="submit">Register</button>
</form>
</div>

<script >
var registrationForm = document.getElementById("registrationForm");
var nameInput = document.getElementById("name");
var emailInput = document.getElementById("email");
var idInput = document.getElementById("id");

registrationForm.addEventListener("submit", function(event) {
event.preventDefault();
if (validateName() && validateEmail() && validateId()) {
alert("Registration Successful!");
registrationForm.reset();
}
});

function validateName() {
var name = nameInput.value;
var nameRegex = /^[a-zA-Z ]+$/;
if (!nameRegex.test(name)) {
alert("Invalid name. Only alphabets and spaces allowed.");
return false;
}
return true;
}
function validateEmail() {
var email = emailInput.value;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email)) {
alert("Invalid email address.");
return false;
}
return true;
}
function validateId() {
var id = idInput.value;
var idRegex = /^\d{9}$/;
if (!idRegex.test(id)) {
alert("Invalid ID. Must be a 9-digit number.");
return false;
}
return true;
}
</script>
</body>
</html>
Output-:
Experiment 10: - Embed Geolocation in your Page and it should update
your updated location.
<!DOCTYPE html>
<html>
<head>
<title>Geolocation Example</title>
</head>

<body>
<h2>My Current Location:</h2>
<p>Latitude: <span id="latitude"></span></p>
<p>Longitude: <span id="longitude"></span></p>

<script>
// Define a function to update the user's location
function updateLocation(position) {
// Extract the latitude and longitude from the position object
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;

// Update the corresponding HTML elements with the latitude and longitude
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
}

// Check if the browser supports geolocation


if (navigator.geolocation) {
// If it does, call the getCurrentPosition method to get the user's current location
navigator.geolocation.getCurrentPosition(updateLocation);
} else {
// If geolocation is not supported, display an error message
alert("Geolocation is not supported by this browser.");
}
</script>
</body>
</html>

Output
Experiment 11 - Write an HTML page that contains a selection box with a list of 5 countries,
when the user selects a country, its capital should be printed next to the list; Add CSS to
customize the properties of the font of the capital (color, bold and font size).

<!DOCTYPE html>
<html>
<head>
<title>Country Capital</title>
<style>
/* CSS for capital text */
#capital {
color: navy;
font-weight: bold;
font-size: 20px;
}
</style>
</head>
<body>
<label for="countries">Select a country:</label>
<select id="countries" onchange="showCapital()">
<option value="">--Please choose a country--</option>
<option value="Australia">Australia</option>
<option value="India">India</option>
<option value="France">France</option>
</select>
<p>Capital: <span id="capital"></span></p>
<script>
function showCapital() {
var country = document.getElementById("countries").value;
var capital = "";
switch (country) {
case "Australia":
capital = "Canberra";
break;
case "France":
capital = "Paris";
break;
break;
case "India":
capital = "New Delhi";
break;
default:
capital = "";
}
document.getElementById("capital").innerHTML = capital;
}
</script>
</body>
</html>
Output:

You might also like