Scribd
Upload
2 views

Adp Record

The document contains multiple HTML examples demonstrating various web page structures and functionalities. It includes basic HTML elements, forms, lists, tables, and JavaScript functionalities such as event handling and callbacks. Each section showcases different aspects of web development, from layout to interactivity.

Uploaded by

ashwinkumar03032006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Adp Record

The document contains multiple HTML examples demonstrating various web page structures and functionalities. It includes basic HTML elements, forms, lists, tables, and JavaScript functionalities such as event handling and callbacks. Each section showcases different aspects of web development, from layout to interactivity.

Uploaded by

ashwinkumar03032006
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<!-- Header -->
<h1>Welcome to My Basic HTML Page</h1>

<!-- Paragraphs -->


<p>This is a simple webpage created using only basic HTML text elements.</p>

<!-- Heading 2 -->


<h2>About This Page</h2>

<!-- Unordered List -->


<ul>
<li>HTML stands for HyperText Markup Language.</li>
<li>It is used to structure content on the web.</li>
<li>This page demonstrates the usage of basic text elements.</li>
</ul>

<!-- Heading 2 -->


<h2>Contact Information</h2>

<!-- Ordered List -->


<ol>
<li>Email: [email protected]</li>
<li>Phone: +123-456-7890</li>
</ol>

<!-- Blockquote -->


<blockquote>
"The only way to do great work is to love what you do." - Steve Jobs
</blockquote>

<!-- Footer -->


<footer>
&copy; 2023 My Basic HTML Page
</footer>
</body>
</html>

1a_text_elements_only.html
Open with Google Docs

___________________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Basic Website</title>
</head>
<body>
<!-- Header -->
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<!-- Main Content -->


<div id="content">
<!-- Section: Home -->
<section id="home">
<h2>Home</h2>
<p>Welcome to our website! We provide valuable information and services to our
visitors.</p>
</section>

<!-- Section: About -->


<section id="about">
<h2>About Us</h2>
<p>We are a team of dedicated professionals who aim to make the web a better
place.</p>
</section>

<!-- Section: Contact -->


<section id="contact">
<h2>Contact Us</h2>
<p>If you have any questions or inquiries, please fill out the form below:</p>

<!-- Contact Form -->


<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>

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

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" required></textarea><br>

<input type="submit" value="Submit">


</form>
</section>
</div>

<!-- Footer -->


<footer>
<p>&copy; 2023 My Basic Website</p>
</footer>
</body>
</html>
_________________________________________________________________
l<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List and Table Example</title>
</head>
<body>
<!-- Unordered List -->
<h1>List of Fruits</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Orange</li>
<li>Strawberry</li>
</ul>

<!-- Table -->


<h1>Student Grades</h1>
<table border="1">
<tr>
<th>Student</th>
<th>Math</th>
<th>Science</th>
<th>History</th>
</tr>
<tr>
<td>Alice</td>
<td>90</td>
<td>88</td>
<td>92</td>
</tr>
<tr>
<td>Bob</td>
<td>85</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td>Charlie</td>
<td>78</td>
<td>84</td>
<td>90</td>
</tr>
</table>
</body>
</html>
____________________________________________________________________
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
h1 {
margin: 0;
}
nav {
margin-top: 10px;
}
nav a {
text-decoration: none;
color: #fff;
margin: 0 15px;
}
main {
padding: 20px;}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;}
</style>
</head>
<body>
<header>
<h1>Welcome to My Web Page</h1>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
</header>
<main>
<h2>About Us</h2>
<p>Welcome to our website. We provide various services and information.</p>
<h2>Our Services</h2>
<ul>
<li>Web Design</li>
<li>Graphic Design</li>
<li>Programming</li>
</ul>
</main>
<footer>
&copy; 2023 My Web Page. All rights reserved.
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
</head>
<body>
<header style="background-color: #333; color: #fff; text-align: center; padding: 20px 0;">
<h1 style="margin: 0;">My Website</h1>
</header>
<nav>
<ul style="list-style: none; background-color: #333; padding: 0;">
<li style="display: inline; margin-right: 20px;">
<a href="#" style="text-decoration: none; color: #fff;">Home</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#" style="text-decoration: none; color: #fff;">About</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#" style="text-decoration: none; color: #fff;">Services</a>
</li>
<li style="display: inline; margin-right: 20px;">
<a href="#" style="text-decoration: none; color: #fff;">Contact</a>
</li>
</ul>
</nav>
<div class="container" style="max-width: 1200px; margin: 0 auto; display: flex; flex-
wrap: wrap; justify-content: space-between;">
<main style="flex: 2; padding: 20px;">
<h2>Welcome to My Website</h2>
<p>This is the main content area.</p>
</main>
<aside style="flex: 1; padding: 20px; background-color: #f5f5f5;">
<h2>Sidebar</h2>
<p>Content in the sidebar goes here.</p>
</aside>
</div>
<footer style="background-color: #333; color: #fff; text-align: center; padding: 10px 0;">
&copy; 2023 My Website
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Odd or Even Checker</title>
<script>
function checkOddOrEven() {
let userInput = prompt("Enter a number:");
let number = parseInt(userInput);

if (!isNaN(number)) {
let result = number % 2 === 0 ? "Even" : "Odd";
document.getElementById("result").innerHTML = `${number} is ${result}.`;
} else {
document.getElementById("result").innerHTML = "Please enter a valid number.";
}
}
</script>
</head>
<body>
<h2>Odd or Even Checker</h2>

<button onclick="checkOddOrEven()">Check Odd/Even</button>

<p id="result"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of Natural Numbers</title>
<script>
function findSumOfNaturalNumbers() {
let userInput = document.getElementById("numberInput").value;
let number = parseInt(userInput);
if (!isNaN(number) && number > 0) {
let result = 0;
for (let i = 1; i <= number; i++) {
result += i;
}
document.getElementById("result").innerHTML = `The sum of natural numbers up
to ${number} is ${result}.`;
} else {
document.getElementById("result").innerHTML = "Please enter a valid natural
number.";
}
}
</script>
</head>
<body>
<h2>Sum of Natural Numbers</h2>
<label for="numberInput">Enter a natural number:</label>
<input type="text" id="numberInput">
<button onclick="findSumOfNaturalNumbers()">Calculate Sum</button>
<p id="result"></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Content Example</title>
</head>
<body>
<h1 id="exampleHeading">Hello, World!</h1>
<p id="exampleParagraph">This is an example paragraph.</p>
<script>
function changeContent() {
var headingElement = document.getElementById('exampleHeading');
var paragraphElement = document.getElementById('exampleParagraph');
if (headingElement && paragraphElement) {
headingElement.textContent = 'New Heading Content';
paragraphElement.textContent = 'This is the updated paragraph content.';
} else {
console.error('One or more elements not found.');
}
}
changeContent();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
</head>
<body>
<h1 id="exampleHeading">Click the button!</h1>
<button id="exampleButton">Click me</button>

<script>
function handleButtonClick() {
var headingElement = document.getElementById('exampleHeading');
if (headingElement) {
headingElement.textContent = 'Button clicked!';
} else {
console.error('Heading element not found.');
}
}

var buttonElement = document.getElementById('exampleButton');


if (buttonElement) {
buttonElement.addEventListener('click', handleButtonClick);
} else {
console.error('Button element not found.');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Callback Function Example</title>
</head>
<body>
<h1 id="result">Result:</h1>

<script>
function processData(data, callback) {
setTimeout(function() {
var processedData = data.toUpperCase();
callback(processedData);
}, 2000);
}

function displayResult(result) {
var resultElement = document.getElementById('result');
if (resultElement) {
resultElement.textContent = 'Result: ' + result;
} else {
console.error('Result element not found.');
}
}

processData('hello, world!', displayResult);


</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setTimeout Example</title>
</head>
<body>
<p id="displayText">Text will appear after 3 seconds.</p>

<script>
function displayTextAfterDelay() {
var displayElement = document.getElementById('displayText');
if (displayElement) {
setTimeout(function() {
displayElement.textContent = 'Text displayed after 3 seconds.';
}, 3000);
} else {
console.error('Display element not found.');
}
}

displayTextAfterDelay();
</script>
</body>
</html>

You might also like