Here are 10 assignments based on the best practices for writing HTML. The assignments focus on clean, accessible, and maintainable HTML code, and each assignment is followed by its solution.
Assignment 1: Create a Basic HTML Page with Semantic Tags
Task: Write a basic HTML page using semantic tags (<header>, <footer>, <nav>, <main>, <section>, <article>).
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Semantic HTML Page</title>
</head>
<body>
<header>
<h1>Welcome to Our 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>
<section>
<h2>About Us</h2>
<p>We are a company focused on delivering quality products.</p>
</section>
<article>
<h3>Our Mission</h3>
<p>To provide innovative solutions to our customers.</p>
</article>
</main>
<footer>
<p>© 2024 Our Company</p>
</footer>
</body>
</html>
Assignment 2: Add Alt Text to Images
Task: Add alt attributes to all images on a webpage. Use the <img> tag to display an image with appropriate alt text.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Images with Alt Text</title>
</head>
<body>
<h1>Gallery</h1>
<img src="logo.png" alt="Company logo" />
<img src="team.jpg" alt="Team working in the office" />
<img src="product.jpg" alt="New product launched by the company" />
</body>
</html>
Assignment 3: Create an Accessible Button with ARIA Label
Task: Create a button with an aria-label to improve accessibility.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Button</title>
</head>
<body>
<button aria-label="Close the modal" onclick="closeModal()">X</button>
<script>
function closeModal() {
alert("Modal closed!");
}
</script>
</body>
</html>
Assignment 4: Create a Navigation Bar Using Semantic Elements
Task: Create a navigation bar using semantic elements and lists.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
Assignment 5: Write Comments to Explain HTML Code
Task: Write an HTML page with comments explaining each section.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML with Comments</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Welcome to Our Website</h1>
</header>
<!-- Main Content Section -->
<main>
<section>
<h2>Our Services</h2>
<p>We offer web development, design, and digital marketing services.</p>
</section>
</main>
<!-- Footer Section -->
<footer>
<p>© 2024 Web Company</p>
</footer>
</body>
</html>
Assignment 6: Replace Deprecated Tags with Modern Alternatives
Task: Replace deprecated tags (<font>, <center>) with modern alternatives like CSS.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Modern HTML</title>
<style>
.center-text {
text-align: center;
}
.highlight {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<!-- Replacing <font> tag with CSS -->
<p class="highlight">This is highlighted text.</p>
<!-- Replacing <center> tag with CSS -->
<p class="center-text">This text is centered using CSS.</p>
</body>
</html>
Assignment 7: Organize HTML Code into Logical Sections
Task: Organize an HTML page into logical sections with appropriate comments.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Organized HTML</title>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Company Name</h1>
</header>
<!-- Main Content Section -->
<main>
<section>
<h2>Products</h2>
<p>Here are some of our best-selling products.</p>
</section>
</main>
<!-- Footer Section -->
<footer>
<p>© 2024 Company Name</p>
</footer>
</body>
</html>
Assignment 8: Create a Table with Accessible Headers
Task: Create a table that has appropriate table headers for accessibility.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Accessible Table</title>
</head>
<body>
<table>
<caption>Employee Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Manager</td>
<td>HR</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>Developer</td>
<td>IT</td>
</tr>
</tbody>
</table>
</body>
</html>
Assignment 9: Validate HTML Code Using W3C Validator
Task: Write a simple HTML page and validate it using the W3C HTML Validator.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Validation</title>
</head>
<body>
<h1>Welcome to the HTML Validator Test</h1>
<p>This page can be validated using the W3C HTML Validator.</p>
</body>
</html>
Steps for Validation:
1. Go to W3C Validator.
2. Copy the code and paste it in the validator.
3. Click "Check" to see if the code is valid.
Assignment 10: Create a Footer with Social Media Links
Task: Create a footer section with social media links. Make sure the links are accessible.
Solution:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Footer with Social Links</title>
</head>
<body>
<footer>
<p>Follow us on:</p>
<ul>
<li><a href="https://facebook.com" aria-label="Facebook">Facebook</a></li>
<li><a href="https://twitter.com" aria-label="Twitter">Twitter</a></li>
<li><a href="https://instagram.com" aria-label="Instagram">Instagram</a></li>
</ul>
</footer>
</body>
</html>
These assignments cover a range of concepts, including semantic HTML, accessibility, image handling, navigation, and HTML structure, giving students a comprehensive understanding of best practices.
4o mini
You said: