<!
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: example@email.com</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>
© 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>© 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>
© 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;">
© 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>
