Essential Question: How can I create a website using semantic elements?
Mastery Objectives:
SWBAT create a website using semantic elements.
SWBAT insert an audio file and player.
SWBAT insert a video file and player.
SWBAT embed a video.
After researching Boston, you decide to create a blog for your viewers who want to know more about the city. It’s time to create a blog to show off how amazing Boston is. You got this!
Note: While you are developing the webpage, you will notice that the elements are automatically assigned colors, borders, and positioned properly. This is because of the CSS file. Don’t worry about CSS right now, it’s only there so that the webpage looks nice.
A common usage of a navigation bar is to create shortcuts for a webpage. This will allow the user to go directly to the information they want to access through the navigation links.
Create a <nav> element underneath the opening <body> tag.
Within the <nav> element, create a <ul> element to create an unordered list.
The unordered list should contain the following three items:
Blog
Media
About
Use an <li> element with <a href=""></a> nested within the <li> element to link the content to the nav bar. You may notice that the navbar doesn’t work right now but don’t worry, once the content is added, the navbar will be fully functional!
You need to title your blog, so people know what you’re writing about. Create a <header> element under the closing </nav> tag.
Within the <header> element, create an <h1> element which should contain the following:
City of Boston Blog
Create a <main> element below the closing </header> tag.
Within the <main> element, create a <section> element with an id of “blog”.
This <section> element will hold the main content of your webpage. You are giving this element an id so that you can target it with the nav bar. https://www.w3schools.com/html/html_id.asp
Create an <article> element within the <section> element.
Then, create a <p> element within <article> that has the following:
Boston is the capital and most populous city in the Commonwealth of Massachusetts in the United States. The city serves as the cultural and financial center of the New England region of the Northeastern United States. It has an area of 48.4 sq mi (125 km2) and a population of 675,647 as of the 2020 census, making it the third-largest city in the Northeast after New York City and Philadelphia. The larger Greater Boston metropolitan statistical area, which includes and surrounds the city, has a population of 4,919,179 as of 2023, making it the largest in New England and eleventh-largest in the country.
Now that our blog has some content, the next step is adding media to enhance our blog.
You can do this by using the <figure> element. Under the closing </section> tag create a <figure> element.
Create an <img> tag within <figure> and use the following link as the src:
https://en.wikipedia.org/wiki/Boston#/media/File:Boston_-_panoramio_(23).jpg
Let’s describe the image for those who don’t know what statue this is!
Using <figcaption> add this description of the image:
Picture of Boston Harbor
For our blog post, you need to add additional content to enhance the post, you can do this by using the <aside> element.
Under the closing </figure> tag create an <aside> element.
Within <aside>, create a <p> element containing the following information:
Boston is very popular for the variety of great food it has. Some of the top food items in Boston include:
Boston is known for its amazing food. Our blog should list some of the top food options in Boston. You can do this by creating an ordered list!
Create an ordered list by using the <ol> element within the <aside> element. In an ordered list the first item is ranked one, the second item is ranked two and so on.
The ordered list should contain the following seven items in this order:
Fried Clam Platter
Clam Chowder
Boston Baked Beans
Clambake
Boston Cream Pie
Cannoli
Lobster Roll
Lobster Mac
11. Right now our blog post consists of only one image. Adding more media can help give a better visual representation of Boston. Let’s create a section for the media content.
Create a <section> element with an id of “media” under the closing </aside> tag.
Within the new <section> element, create an <article> element.
Then, create an <h2> element within <article> that says:
The Scenery in Boston
12. You are going to add a little description to explain the media. Add a <p> element directly underneath the closing
</h2> tag but within the <article> element with the following paragraph:
While the view in the city is beautiful, the sounds are not as lovely. Below you'll see an example of the view and the sounds you'll deal with in Boston on a daily basis.
13. Boston has a beautiful skyline, so let’s show that with a video.
Under the closing </article> tag, create a <video> element with the attribute controls. Use the following URL as the src: "https://content.codecademy.com/courses/Semantic%20HTML/nyc-skyline-timelapse.mp4". https://www.w3schools.com/html/html5_video.asp
14. During the night time, the Boston skyline can light up the whole sky! This time you are going to use <embed> to display an image of the skyline.
Create an <embed> element under the closing </video> tag. Use the following URL as the src: "https://en.wikipedia.org/wiki/Boston#/media/File:Boston_skyline_from_Longfellow_Bridge_September_2017_panorama_2.jpg".
15. Boston is known as “the city of champions” At any point in the day, you can hear the traffic as you make your way through the city. Let’s add an audio clip to show how loud Boston can be.
Create an <audio> tag with the attribute controls directly below the <embed> element. (Don’t forget the closing tag.) https://www.w3schools.com/html/html5_audio.asp
Inside the <audio> tag, insert an audio file with the following URL as the src: "https://content.codecademy.com/courses/Semantic%20HTML/nyc-sounds.mov".
Footer
16. At the bottom of a page, you can add a footer to credit you for the creation of this blog!
Create a <footer> element with an id of “about” under the closing </main> tag.
Inside, add the following content:
A <p> tag with “Posted by:” followed by your name.
A <p> tag that provides one type of contact information for people to reach you at. For example:
Contact information: Blogger@Boston.com
Congratulations! You successfully created a webpage using only semantic elements. Now that you’ve learned about the importance of Semantic HTML along with its benefits, it’s time to incorporate this knowledge into your future projects.
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
style.css
body {
background: #e6e6e6;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #010e80;
display: table;
width: 100%;
}
nav li {
display: table-cell
}
li a {
display: block;
color: white;
text-align: center;
padding: 30px 30px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
h2 a {
padding: 33px 25px;
color: white;
text-decoration: none;
}
h2 a:hover {
background-color: #111;
}
figcaption{
text-align:left;
}
header {
margin-left: 14px;
}
article {
text-align: left;
margin: 15px;
max-width: 80%;
font-size: 18px;
line-height: 32px;
}
img {
width: 400px;
height: 300px;
position:relative;
right:28px;
}
aside {
left: 10px;
border: 1px solid black;
padding: 15px;
max-width: 80%;
position: relative;
border-color: #010e80;
border-width: 5px;
font-size: 18px;
}
footer {
position: relative;
width: 100%;
bottom: -100px;
background-color: #010e80;
}
footer p {
color: white;
text-decoration: none;
padding: 10px;
text-align: center;
width: 100%;
box-sizing: border-box;
}
footer a {
color: white;
text-decoration: none;
text-align: center;
width: 100%;
}
video {
display: block;
width: 420px;
height: 250px;
padding:15px;
}
audio {
padding: 15px;
width: 98%;
box-sizing: border-box;
}
embed {
width: 400px;
height: 458px;
padding:15px;
}