HTML and CSS Reference
In-Depth Information
For a quick review of HTML heading elements, check out Nick Pettit's video on Treehouse at
ht-
Using a Heading for the Logo
The logo for Joe's Pizza Co. is very simple—only text—so you can just use an
<h1>
element that contains the com-
pany name. This text will then be styled by the CSS that you included at the end of Chapter 2.
The code for the exercises in this chapter can be downloaded from the topic's website at
http://wiley.com/
go/treehouse/html5foundations
.
This code is in folder 1 of the Chapter 3 download code.
Follow these steps to create the logo:
1.
Open the
index.html
file from your project folder in a text editor.
2.
Find the
<div>
element that has the ID of
logo
. This
<div>
element is located in the header of your page
layout. It looks like this:
<div id="logo">The Logo Goes Here</div>
3.
Replace the dummy text inside the
<div>
with a new
<h1>
heading element that contains the text
Joe's
Pizza Co.
(including the period). Your logo
<div>
should now look like the following:
<div id="logo">
<h1>Joe's Pizza Co.</h1>
</div>
4.
Save the
index.html
file.
5.
Repeat this process for your content page template that is stored in the
about.html
file.
Open the home page in your browser. Figure 3-2 shows how your home page should look with the new logo.
