Question
You will create a web page to present information. The topic can be anything that you care about: basketball, a movie star, sea urchins, jigsaw puzzles . . . anything! Be sure that your web page includes the following elements:
At least five links (refer to the example above)
A description of each link (use the <p> tag to add your brief sentence description)
At least one image
A sound clip that loosely relates to your topic
To add a sound clip, use the following HTML code in your index.html file:
Inside the quotation marks for src, you can paste the URL to a sound clip, or you can upload a music file to CodeSandbox and paste the filename inside.
Here are some websites that you can use to find free, appropriate images and sound:
Safe Search Kids
Pics4Learning
You can use CSS to style your web page in any way that you would like. Here is a sample of what your web page might look like:
A sample web page on jigsaw puzzles.
When you are finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox. If you cannot get your code to work properly, write a paragraph explaining what you did to try to fix it and upload that document to the dropbox.
Think about what you learned from the video and from creating your own web page. Then, write a paragraph in your same word processing document explaining why links are so important to the internet.
At least five links (refer to the example above)
A description of each link (use the <p> tag to add your brief sentence description)
At least one image
A sound clip that loosely relates to your topic
To add a sound clip, use the following HTML code in your index.html file:
Inside the quotation marks for src, you can paste the URL to a sound clip, or you can upload a music file to CodeSandbox and paste the filename inside.
Here are some websites that you can use to find free, appropriate images and sound:
Safe Search Kids
Pics4Learning
You can use CSS to style your web page in any way that you would like. Here is a sample of what your web page might look like:
A sample web page on jigsaw puzzles.
When you are finished, click on the Share button, and click the Copy Sandbox Link button. Submit the link to the dropbox. If you cannot get your code to work properly, write a paragraph explaining what you did to try to fix it and upload that document to the dropbox.
Think about what you learned from the video and from creating your own web page. Then, write a paragraph in your same word processing document explaining why links are so important to the internet.
Answers
GPT-4o mini
Here's a simple outline for your web page based on the topic of basketball. We’ll include the required elements: five links with descriptions, an image, and a sound clip.
### HTML Code for Basketball Web Page
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Basketball</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS -->
</head>
<body>
<header>
<h1>Welcome to Basketball World!</h1>
</header>
<main>
<img src="https://example.com/basketball.jpg" alt="Basketball Hoops" width="600">
<h2>Related Links</h2>
<ul>
<li>
<a href="https://www.nba.com/" target="_blank">NBA Official Site</a>
<p>The official site of the National Basketball Association (NBA) featuring news, scores, and player information.</p>
</li>
<li>
<a href="https://www.espn.com/nba/" target="_blank">ESPN NBA</a>
<p>Your go-to source for NBA news, updates, and highlights.</p>
</li>
<li>
<a href="https://www.fiba.basketball/" target="_blank">FIBA Basketball</a>
<p>The official site of the International Basketball Federation (FIBA) with international tournament information.</p>
</li>
<li>
<a href="https://www.wikihow.com/Play-Basketball" target="_blank">How to Play Basketball</a>
<p>A comprehensive guide on the rules, techniques, and strategies of playing basketball.</p>
</li>
<li>
<a href="https://www.basketball-reference.com/" target="_blank">Basketball Reference</a>
<p>Statistics, scores, and historical data for players and teams.</p>
</li>
</ul>
<h2>Enjoy some Basketball!</h2>
<audio controls>
<source src="https://example.com/basketball-sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</main>
<footer>
<p>© 2023 Basketball Fan Page</p>
</footer>
</body>
</html>
```
### CSS Code for Styling (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
h2 {
color: #333;
}
ul {
list-style-type: none;
}
ul li {
background: #fff;
margin: 10px;
padding: 15px;
border-radius: 5px;
}
a {
text-decoration: none;
color: #007BFF;
}
a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
```
### Paragraph on the Importance of Links
Links are essential to the internet as they bridge different pieces of content, allowing users to navigate seamlessly between web pages. They enable the connection between information, create a network of knowledge, and enhance the user experience by providing easy access to related topics. Without links, the internet would be fragmented, making it difficult for users to find the information they need or to explore new content. Additionally, links play a critical role in improving website visibility and search engine optimization (SEO), helping content creators reach a broader audience.
### Submission Instructions
Once you have completed your webpage and the CSS, host it on an online platform such as CodeSandbox and generate a shareable link to submit. If you encounter any issues while coding, describe the challenges you faced and the steps you took in a separate document, alongside your link submission.
### HTML Code for Basketball Web Page
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Basketball</title>
<link rel="stylesheet" href="styles.css"> <!-- Link to your CSS -->
</head>
<body>
<header>
<h1>Welcome to Basketball World!</h1>
</header>
<main>
<img src="https://example.com/basketball.jpg" alt="Basketball Hoops" width="600">
<h2>Related Links</h2>
<ul>
<li>
<a href="https://www.nba.com/" target="_blank">NBA Official Site</a>
<p>The official site of the National Basketball Association (NBA) featuring news, scores, and player information.</p>
</li>
<li>
<a href="https://www.espn.com/nba/" target="_blank">ESPN NBA</a>
<p>Your go-to source for NBA news, updates, and highlights.</p>
</li>
<li>
<a href="https://www.fiba.basketball/" target="_blank">FIBA Basketball</a>
<p>The official site of the International Basketball Federation (FIBA) with international tournament information.</p>
</li>
<li>
<a href="https://www.wikihow.com/Play-Basketball" target="_blank">How to Play Basketball</a>
<p>A comprehensive guide on the rules, techniques, and strategies of playing basketball.</p>
</li>
<li>
<a href="https://www.basketball-reference.com/" target="_blank">Basketball Reference</a>
<p>Statistics, scores, and historical data for players and teams.</p>
</li>
</ul>
<h2>Enjoy some Basketball!</h2>
<audio controls>
<source src="https://example.com/basketball-sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</main>
<footer>
<p>© 2023 Basketball Fan Page</p>
</footer>
</body>
</html>
```
### CSS Code for Styling (styles.css)
```css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
}
header {
background: #333;
color: #fff;
padding: 10px 0;
text-align: center;
}
h2 {
color: #333;
}
ul {
list-style-type: none;
}
ul li {
background: #fff;
margin: 10px;
padding: 15px;
border-radius: 5px;
}
a {
text-decoration: none;
color: #007BFF;
}
a:hover {
text-decoration: underline;
}
footer {
text-align: center;
padding: 10px 0;
background: #333;
color: #fff;
position: relative;
bottom: 0;
width: 100%;
}
```
### Paragraph on the Importance of Links
Links are essential to the internet as they bridge different pieces of content, allowing users to navigate seamlessly between web pages. They enable the connection between information, create a network of knowledge, and enhance the user experience by providing easy access to related topics. Without links, the internet would be fragmented, making it difficult for users to find the information they need or to explore new content. Additionally, links play a critical role in improving website visibility and search engine optimization (SEO), helping content creators reach a broader audience.
### Submission Instructions
Once you have completed your webpage and the CSS, host it on an online platform such as CodeSandbox and generate a shareable link to submit. If you encounter any issues while coding, describe the challenges you faced and the steps you took in a separate document, alongside your link submission.