1. HTML - Hyperlinks (a.
Navigation from one page to another)
<!-- file: page1.html -->
<!DOCTYPE html>
<html>
<head><title>Page 1</title></head>
<body>
<h1>This is Page 1</h1>
<a href="page2.html">Go to Page 2</a>
</body>
</html>
1. HTML - Hyperlinks (b. Navigation within the same page)
<!DOCTYPE html>
<html>
<head><title>Same Page Navigation</title></head>
<body>
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
<p>This is section 2.</p>
</body>
</html>
2. HTML - Table (3x3)
<!DOCTYPE html>
<html>
<head><title>Table</title></head>
<body>
<table border="1">
<tr>
<td>Row 1, Col 1</td><td>Row 1, Col 2</td><td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td><td>Row 2, Col 2</td><td>Row 2, Col 3</td>
</tr>
<tr>
<td>Row 3, Col 1</td><td>Row 3, Col 2</td><td>Row 3, Col 3</td>
</tr>
</table>
</body>
</html>
3. HTML - Registration Form
<!DOCTYPE html>
<html>
<head><title>Registration Form</title></head>
<body>
<form>
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
Password: <input type="password" name="password"><br>
<input type="submit" value="Register">
</form>
</body>
</html>
4. HTML - Button
<!DOCTYPE html>
<html>
<head><title>Button</title></head>
<body>
<button>Click Me</button>
</body>
</html>
5. HTML - Lists
<!DOCTYPE html>
<html>
<head><title>Lists</title></head>
<body>
<h3>Unordered List</h3>
<ul>
<li>Apple</li><li>Banana</li><li>Mango</li>
</ul>
<h3>Ordered List</h3>
<ol>
<li>Math</li><li>Science</li><li>English</li>
</ol>
</body>
</html>
6. CSS - Background Color
<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: lightblue; }
</style>
</head>
<body></body>
</html>
7. CSS - Text Color
<!DOCTYPE html>
<html>
<head>
<style>
p { color: red; }
</style>
</head>
<body>
<p>This is a red paragraph.</p>
</body>
</html>
8. CSS - Font Style and Size
<!DOCTYPE html>
<html>
<head>
<style>
h1 { font-family: Arial; font-size: 36px; }
</style>
</head>
<body>
<h1>Styled Heading</h1>
</body>
</html>
9. CSS - Border Around Table
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td { border: 2px solid black; }
</style>
</head>
<body>
<table><tr><td>Cell</td><td>Cell</td></tr></table>
</body>
</html>
10. CSS - Padding and Margin
<!DOCTYPE html>
<html>
<head>
<style>
p { padding: 20px; margin: 30px; background-color: #eee; }
</style>
</head>
<body>
<p>This paragraph has padding and margin.</p>
</body>
</html>
11. CSS - Center Align Heading
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center; }
</style>
</head>
<body>
<h1>Centered Heading</h1>
</body>
</html>
12. JS - Alert Hello World
<!DOCTYPE html>
<html>
<head><title>Hello World</title></head>
<body>
<script>
alert("Hello, World!");
</script>
</body>
</html>
13. JS - Ask Name and Display
<!DOCTYPE html>
<html>
<head><title>Name Alert</title></head>
<body>
<script>
let name = prompt("What is your name?");
alert("Hello, " + name + "!");
</script>
</body>
</html>
14. JS - Square Function
<!DOCTYPE html>
<html>
<head><title>Square Function</title></head>
<body>
<script>
function square(num) {
return num * num;
}
console.log(square(5));
</script>
</body>
</html>
15. JS - Positive, Negative, or Zero
<!DOCTYPE html>
<html>
<head><title>Number Check</title></head>
<body>
<script>
let number = prompt("Enter a number:");
number = Number(number);
if (number > 0) {
alert("Positive");
} else if (number < 0) {
alert("Negative");
} else {
alert("Zero");
}
</script>
</body>
</html>
16. JS - Leap Year Check
<!DOCTYPE html>
<html>
<head><title>Leap Year</title></head>
<body>
<script>
let year = prompt("Enter a year:");
year = Number(year);
if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
alert(year + " is a leap year.");
} else {
alert(year + " is not a leap year.");
}
</script>
</body>
</html>
17. JS - Calculate Area Function
<!DOCTYPE html>
<html>
<head><title>Calculate Area</title></head>
<body>
<script>
function calculateArea(length, width) {
return length * width;
}
let area1 = calculateArea(5, 10);
let area2 = calculateArea(7, 3);
console.log("Area 1: " + area1);
console.log("Area 2: " + area2);
</script>
</body>
</html>
