Sure! Below is an example of a simple HTML web page presenting information about "Sea Urchins." This web page includes five links with descriptions, an image, and a sound clip related to the topic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Sea Urchins</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #e0f7fa;
color: #00695c;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
}
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
.links {
margin-top: 20px;
}
.links p {
margin: 5px 0;
}
</style>
</head>
<body>
<h1>All About Sea Urchins</h1>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Sea_urchin_2.jpg/640px-Sea_urchin_2.jpg" alt="Sea Urchin">
<h2>Description</h2>
<p>Sea urchins are small, spiny sea creatures that play a vital role in marine ecosystems.</p>
<div class="links">
<h2>Useful Links</h2>
<a href="https://en.wikipedia.org/wiki/Sea_urchin" target="_blank">Wikipedia: Sea Urchin</a>
<p>A comprehensive overview of sea urchins, including biology, habitat, and behavior.</p>
<a href="https://ocean.concordia.ca/faq-sea-urchins/" target="_blank">Sea Urchin FAQ</a>
<p>Frequently asked questions about sea urchins and their ecological significance.</p>
<a href="https://www.youtube.com/watch?v=k3nmuO2_mdo" target="_blank">YouTube: Sea Urchin Exploration</a>
<p>A video documentary showcasing various types of sea urchins in their natural habitat.</p>
<a href="https://www.seaurchin.com/" target="_blank">Sea Urchin Sustainability</a>
<p>A discussion on the sustainability of sea urchin harvesting and their culinary uses.</p>
<a href="https://oceanconservancy.org/wildlife-videos/sea-urchins/" target="_blank">Ocean Conservancy: Sea Urchins</a>
<p>Information on how sea urchins contribute to ocean health.</p>
</div>
<h2>Sound Clip</h2>
<audio controls>
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Explanation of the Code:
- HTML Structure: The code is structured using standard HTML elements like
<html>,<head>,<body>, and so on. - Head Information: The
<head>section includes metadata, the title, and inline CSS for basic styling. - Image: An image of a sea urchin is included with a relevant source link.
- Links: Five links are provided with corresponding descriptions. Each link opens in a new tab (
target="_blank"). - Sound Clip: An audio clip is embedded using the
<audio>tag with controls so the user can play/pause it. The sound file is linked from an external URL. You can replace it with your own URL if you'd like.
You can copy and paste this code into an HTML file and open it in a web browser to see how it looks!
1 answer