In this exercise, you will build your own webpage using semantic tags. You can use anything (school appropriate) as the topic of your webpage. Your webpage will be an article with three sections.
Some styles have been set up for you so that if you set up your page correctly, the header, article, and footer will be styled like the image above. The background image has been set, but you can remove or change it.
Webpage Requirements
Create a webpage that uses the following semantic tags:
header
article
footer
Header
In the header, put an <h1> with the title of your page.
Article
Inside of the article, you should have three <section> elements. Each section should be a subtopic that provides more information about the main topic of your page. Start each section with an <h2> tag that titles the section and a <p> tag that contains a sentence or two with information about the subtopic.
Footer
In the footer, put links to where people could learn more about each of the sections you mentioned. Wikipedia is a great resource for this purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Webpage Title Here</title>
<style>
body {
background-image: url('https://source.unsplash.com/random');
font-family: Arial, sans-serif;
color: white;
margin: 0;
padding: 0;
}
header {
background-color: rgba(0, 0, 0, 0.5);
padding: 1em;
}
article {
background-color: rgba(0, 0, 0, 0.5);
padding: 1em;
}
footer {
background-color: rgba(0, 0, 0, 0.5);
padding: 1em;
}
a, a:visited {
color: aqua;
text-decoration: none;
}
</style>
</head>
<body>
<header>
<h1>Your Webpage Title</h1>
</header>
<article>
<section>
<h2>Subtopic 1</h2>
<p>Information about subtopic 1 goes here.</p>
</section>
<section>
<h2>Subtopic 2</h2>
<p>Information about subtopic 2 goes here.</p>
</section>
<section>
<h2>Subtopic 3</h2>
<p>Information about subtopic 3 goes here.</p>
</section>
</article>
<footer>
<p>Learn more about the topics:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Subtopic_1" target="_blank">Subtopic 1</a></li>
<li><a href="https://en.wikipedia.org/wiki/Subtopic_2" target="_blank">Subtopic 2</a></li>
<li><a href="https://en.wikipedia.org/wiki/Subtopic_3" target="_blank">Subtopic 3</a></li>
</ul>
</footer>
</body>
</html>