HTML and CSS Reference
In-Depth Information
width="240" height="280">
Adding Content to the Locations Page
Okay, so now you can add images using HTML. Next, let's start adding content for the Locations page.
The code for this exercise can be found in folder 5.
Follow these instructions:
1. First, download the following map images that you will be using in this section: map1.png , map2.png ,
and map3.png . These can be found in the img folder in folder 5 . Place these in the img folder in your
project directory.
2. Create a new locations.html file in your project folder.
3. Open the about.html file and copy its contents into your new locations.html file.
4. Update the <title> and <meta> elements to reflect the content of the new Locations page. I have
provided some examples:
<title> Locations - Joe's Pizza Co.</title>
<meta name="description" content=" Locations of Joe's Pizza Co.
restaurants in New York City. ">
<meta name="keywords" content="new york pizza,pizza
restaurants,joe's pizza,joe's new york">
5. Remove the class attribute from the About link in the navigation and move this to the Locations link.
6. Locate the <section> element with the ID page-text and delete any content that is in this element.
7. Create a new <h1> element in this section and give it the text Locations .
8. Add the following code underneath this <h1> element. This provides the information about the first restaur-
ant location. The id and class attributes here are used for styling purposes. The <br> element used here
creates a line break in the text. You can find more information about the <br> element in Appendix A.
<section id="location1">
<h1>310 West 38th Street, NY</h1>
<img src="img/map1.png"
alt="Joe's Pizza at 310 West 38th Street, NY “>
<p class="location-phone">212 012 3456</p>
<h2>Opening Hours:</h2>
Mon-Fri: 12:00 - 22:00<br>
Sat-Sun: 11:00 - 23:00
9. Underneath this, add the following code for restaurant location number 2.
Search WWH ::

Custom Search