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-
tp:// .
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
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>
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.
Search WWH ::

Custom Search