Scribd
Upload
15 views21 pages

12th IT Project

The document outlines ten experiments focused on web development using HTML, CSS, JavaScript, and PHP. Each experiment includes code snippets for creating webpages, implementing form validations, performing string manipulations, and conducting SEO analysis. The experiments cover a range of topics from webpage layout design to event-driven programming and server-side scripting.

Uploaded by

rohanmhetre93
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
15 views21 pages

12th IT Project

The document outlines ten experiments focused on web development using HTML, CSS, JavaScript, and PHP. Each experiment includes code snippets for creating webpages, implementing form validations, performing string manipulations, and conducting SEO analysis. The experiments cover a range of topics from webpage layout design to event-driven programming and server-side scripting.

Uploaded by

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

Title of Experiment 1: Create a webpage using HTML and CSS code to design a web page

as the layout displayed below.

Remark:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tourist Places</title>
<style>
/* Internal stylesheet for left and right sections */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
}
.left-section {
width: 50%;
padding: 20px;
background-color: #fdfd96; /* Light yellow */
}
.right-section {
width: 50%;
padding: 20px;
background-color: #f4c2c2; /* Light pink */
}
.left-section h2,
.right-section h2 {
margin-top: 0;
}
</style>
</head>
<body>
<!-- Inline style for the header -->
<header style="background-color: #add8e6; text-align: center; padding: 20px;">
<h1 style="color: #e75480; font-size: 2.5em; margin: 0;">Tourist Places</h1>
1

</header>
Page
<div class="container">
<!-- Left Section -->
<div class="left-section">
<h2>City</h2>
<ul>
<li>Pune</li>
<li>Bangalore</li>
<li>Hyderabad</li>
<li>Delhi</li>
</ul>
</div>

<!-- Right Section -->


<div class="right-section">
<h2>Tourist Places in Pune</h2>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad Fort</li>
</ul>
</div>
</div>
</body>
</html>

2
Page
Title of Experiment 2: Creation of website using HTML5 and CSS. With Header
,footer ,aside, article tags
Remark:-
HTML Code (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>News</title>
</head> <body>
<header>
<h1>News</h1>
<nav>
<a href="#">Home</a>
<a href="#">Archives</a>
<a href="#">About</a>
</nav>
</header>
<main>
<section>
<h2>Local News</h2>
<article>
<h3>Fire fighters rescue man from building</h3>
<p>(Reporter name, date)</p>
<p>This is the story of fighters.</p>
</article>
3
Page
<article>
<h3>New Library to be built</h3>
<p>(Reporter name, date)</p>
<p>This is the story text.</p>
</article>
</section>
<section>
<h2>National News</h2>
<article>
<h3>Snow storm is making travel difficult</h3>
<p>(Reporter name, date)</p>
<p>This is the story of storm.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(Reporter name, date)</p>
<p>This is the story of power.</p>
</article>
</section>
<aside>
<h2>Be a news reporter</h2>
<p>If you see news happening - Send us a Text.</p>
</aside>
</main>
<footer>
<p>Footer Information</p>
</footer>
4

</body></html>
Page
Page
5
Title of Experiment 3: Navigation on an image using Client side image Mapping in web
page using html 5.
Remark:-

Program:-
<!DOCTYPE html><html><head><title>Image Map Example</title></head><body>
<h2>Image Map Navigation</h2>
<img src="example.jpg" alt="Example Image" usemap="#imagemap" height="300px"
width="300px">
<map name="imagemap">
<area shape="rect" coords="50,50,200,150" href="https://wikipedia/circle.com"
alt="Rectangle Area">
<area shape="circle" coords="300,100,50" href="https://anotherexample.com"
alt="Circle Area">
<area shape="poly" coords="400,50,450,150,350,150" href="localpage.html"
alt="Polygon Area">
</map>
</body></html>

6
Page
Page
7
Title of Experiment 4: Use of SEO methodology to improvise the website.
Remark:-

Selected Website: www.amazon.com


SEO Software Used: Ahrefs
Findings from the analysis:
1. Duplicate Meta Tags: Some product pages have duplicate meta titles and descriptions.
2. Page Speed Issues: Certain pages have a slower load time due to high-resolution images
and large JavaScript files.
3. Broken Links: A few links redirect to non-existent pages.
4. Content Gaps: Missing keywords for certain high-volume searches in product categories.

Suggestions to Optimize Web Pages


1. Fix Duplicate Meta Tags: Ensure all product pages have unique and descriptive meta
titles and descriptions.
2. Improve Page Speed: Compress images, minify JavaScript, and implement lazy loading
for content.
3. Repair Broken Links: Identify and fix or redirect broken links to maintain user
experience.
4. Address Content Gaps: Create keyword-rich descriptions and add new content to target
missing search terms.

Importance of SEO
SEO is essential for a global e-commerce platform like Amazon to maintain visibility in search
engine rankings. It drives organic traffic, improves user satisfaction, and enhances customer
retention. Effective SEO practices ensure better discoverability of products, leading to
increased sales and market competitiveness.
8

By addressing these issues and implementing suggested optimizations, Amazon can further
Page

strengthen its position as a leading e-commerce platform.


Title of Experiment 5: Create JavaScript program for the following form validations. Make
use of HTML5 properties to do the following validations Remark:-
Program:-
<!DOCTYPE html>
<html>
<head><title>Form Validation</title></head>
<body>
<form>
<label>Name: <input type="text" required></label><br>
<label>Address: <input type="text" placeholder="Enter your address"
required></label><br>
<label>Contact: <input type="tel" maxlength="10" pattern="[0-9]{10}"
required></label><br>
<label>Email: <input type="email" required pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-
]+\.[a-zA-Z]{2,}"></label><br>
<button type="submit">Submit</button>
</form><script>
document.querySelector('input[placeholder]').addEventListener('focus', function() {
this.placeholder = '';
});
document.querySelector('input[placeholder]').addEventListener('blur', function() {
this.placeholder = 'Enter your address';
});
</script></body></html>
9
Page
Page
10
Title of Experiment 6: Create event driven JavaScript program for the following. Make use of
appropriate variables, JavaScript inbuilt string functions and control structures.

<!DOCTYPE html>
<html>
<head><title>Palindrome Checker</title></head>
<body>
<h3>Check if a String is a Palindrome</h3>
<label>Enter a string: <input type="text" id="userString"></label>
<button onclick="checkPalindrome()">Check</button>
<p id="result"></p>

<script>
function checkPalindrome() {
let input = document.getElementById("userString").value;
let reversed = input.split("").reverse().join(""); // Reverse the string
let result = (input === reversed)
? `"${input}" is a Palindrome!`
: `"${input}" is NOT a Palindrome.`;
document.getElementById("result").innerText = result;
}
</script>
</body>
</html>
11
Page
Page
12
Title of Experiment 7: Create event driven JavaScript program for the following. Make use of
appropriate variables, JavaScript inbuilt string functions and control structures.
Remark:-
<!DOCTYPE html>
<html>
<head>
<title>Event-Driven String Reversal</title>
</head>
<body>
<h3>Reverse a String</h3>
<label>Enter a string: <input type="text" id="inputString"></label>
<button onclick="reverseString()">Reverse</button>
<p id="output"></p>
<script>
function reverseString() {
let input = document.getElementById("inputString").value; // Get the string from the
user
let reversed = input.split("").reverse().join(""); // Reverse the string
document.getElementById("output").innerText = "Reversed String: " + reversed; //
Display the result
}
</script>
</body>
</html>
13
Page
Page
14
Title of Experiment 8: Create event driven JavaScript program to convert temperature
to and from Celsius, Fahrenheit. Remark:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Temp Converter</title>
</head>
<body>
<h1>Temp Converter</h1>
<input id="celsiusInput" type="number" placeholder="Celsius">
<button onclick="convertC()">To Fahrenheit</button>
<p id="celsiusToFahrenheitOutput"></p>

<input id="fahrenheitInput" type="number" placeholder="Fahrenheit">


<button onclick="convertF()">To Celsius</button>
<p id="fahrenheitToCelsiusOutput"></p>

<script>
function convertC() {
let c = parseFloat(document.getElementById('celsiusInput').value);
if (!isNaN(c)) document.getElementById('celsiusToFahrenheitOutput').textContent =
`${c}°C = ${(c * 9/5) + 32}°F`;
else document.getElementById('celsiusToFahrenheitOutput').textContent = "Invalid
input";
}
15

function convertF() {
Page
let f = parseFloat(document.getElementById('fahrenheitInput').value);
if (!isNaN(f)) document.getElementById('fahrenheitToCelsiusOutput').textContent =
`${f}°F = ${(f - 32) * 5/9}°C`;
else document.getElementById('fahrenheitToCelsiusOutput').textContent = "Invalid
input";
}
</script>
</body>
</html>

16
Page
Page
17
Title of Experiment 9: Write a PHP program to check if a person is eligible to vote or not.
The program should include the following-
Remark:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vote Eligibility Check</title>
</head>
<body>
<h1>Vote Eligibility Check</h1>
<form method="POST">
<label for="age">Enter your age:</label>
<input type="number" name="age" id="age" required>
<input type="submit" value="Check Eligibility">
</form>
<?php
function checkEligibility($age) {
if ($age >= 18) {
return "You are eligible to vote.";
} else { return "You are not eligible to vote."; } }
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$age = $_POST['age']; // Get age from the form
echo "<p>" . checkEligibility($age) . "</p>";
}
?>
</body>
</html>
18
Page
Page
19
Title of Experiment 10: Write a PHP function to count the total number of vowels
(a,e,i,o,u) from the string. Accept a string by using HTML form.
Remark:-
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Count Vowels</title></head>
<body>
<h1>Count Vowels in String</h1>
<form method="POST">
<label for="inputString">Enter a string:</label>
<input type="text" name="inputString" id="inputString" required>
<input type="submit" value="Count Vowels">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$inputString = $_POST['inputString'];
$vowels = "aeiouAEIOU"; $count = 0;
for ($i = 0; $i < strlen($inputString); $i++) {
if (strpos($vowels, $inputString[$i]) !== false) $count++;
}
echo "<p>Total vowels: $count</p>";
}
?>
</body>
20

</html>
Page
Page
21

You might also like