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>
<p>
Mon-Fri: 12:00 - 22:00<br>
Sat-Sun: 11:00 - 23:00
</p>
</section>
9.
Underneath this, add the following code for restaurant location number 2.
