HTML and CSS Reference
In-Depth Information
Within each of the paragraphs, let's use the line-break element,
<br>
, to place
breaks within the address and in between the website and phone number.
For the
<section>
element with the
class
attribute value of
venue-
theatre
, the HTML looks like this:
1.
<section class="venue-theatre">
2.
3.
<div class="col-1-3">
4.
<h2>Chicago Theatre</h2
>
5.
<p>175 N State St <br> Chicago, IL 60601</p>
6.
<p><a href="http://www.thechicagotheatre.com/">
thechicagotheatre.com</a> <br> (312) 462-6300</p>
7.
</div><!--
8.
9.
--><iframe class="col-2-3"></iframe>
10.
11.
</section>
The same pattern shown here for the theatre should also be applied to the hotel (us-
ing, of course, the proper address, website, and phone number).
6.
We can search for these addresses in Google Maps (
google.com/maps/
)
. Once we
locate an address and create a customized map, we have the ability to embed that
map into our page. Following the instructions on Google Maps for how to share
and embed a map will provide us with the HTML for an
<iframe>
element.
Let's copy the HTML—
<iframe>
element,
src
attribute, and all—onto our
page where our existing
<iframe>
element resides. We'll do this for each loca-
tion, using two different
<iframe>
elements.
In copying over the
<iframe>
element from Google Maps we need to make sure
we preserve the
class
attribute and value,
col-2-3
, from our existing
<i-
frame>
element. We also need to be careful not to harm the HTML comment that
closes directly before our opening
<iframe>
tag.
Looking directly at the
<section>
element with the
class
attribute value of
venue-theatre
again, the HTML looks like this:
1.
<section class="venue-theatre">
2.
3.
<div class="col-1-3">
4.
<h2>Chicago Theatre</h2>
5.
<p>175 N State St <br> Chicago, IL 60601</p>
Search WWH ::
Custom Search