Scribd
Upload
4 views

HTML_CSS_JS_Programs

The document contains various HTML, CSS, and JavaScript examples demonstrating fundamental web development concepts. It includes examples of hyperlinks, tables, forms, buttons, lists, styling with CSS, and basic JavaScript functions. Each example is presented as a complete HTML document showcasing specific functionalities.

Uploaded by

220160203084.gargi
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
4 views

HTML_CSS_JS_Programs

The document contains various HTML, CSS, and JavaScript examples demonstrating fundamental web development concepts. It includes examples of hyperlinks, tables, forms, buttons, lists, styling with CSS, and basic JavaScript functions. Each example is presented as a complete HTML document showcasing specific functionalities.

Uploaded by

220160203084.gargi
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/ 5

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>

You might also like