HTML and CSS Reference
In-Depth Information
3. The Music Page.
Use the Menu page as the starting point for the Music page.
Launch Notepad and open the menu.html file in the javajam folder that you
previously created. Save the file as music.html.
Modify the music.html file to look similar to the Music page, as shown in
Figure 4.27:
●
Change the page title to an appropriate phrase.
●
Delete the definition list from the page.
●
The main content in the page will consist of an introductory paragraph below
the navigation and two sections describing music performances.
●
The content of the paragraph is as follows:
The first Friday night each month at JavaJam is a special night. Join us from
8pm to 11pm for some music you won't want to miss!
Place a line break tag after the first sentence.
●
The section describing each music performance consists of an
<h3>
element, a
paragraph, and an image link. You'll need to configure the paragraph, so
assign it to a class named
content
.
●
January Music Performance:
Configure an
<h2>
with the following text: January
Configure a paragraph assigned to the
content
class with the following text:
Melanie Morris entertains
with her melodic folk style.
Check out the podcast!
CDs are now available.
Add line breaks as indicated above.
●
Configure the melaniethumb.jpg as an image link to melanie.jpg. Code appro-
priate attributes on the
<img />
element, including
align="right"
●
February Music Performance:
Configure an
<h2>
with the following text: February
Configure a paragraph assigned to the
content
class with the following text:
Tahoe Greg's back from his tour.
New songs
New stories
CDs are now available.
Add line breaks as indicated above.
●
Configure the gregthumb.jpg as an image link to greg.jpg. Code appropriate
attributes on the
<img />
element, including
align="right"
●
Save the music.html file. If you test your page in a browser you'll notice that it
looks different from Figure 4.27—you still need to configure style rules.
4. Configure the CSS.
Open javajam.css in Notepad. Edit the style rules as follows:
Modify the body selector style rules. Configure background.gif (see Figure
4.34) as the background image.
●
Modify the container id. Configure the background color to be #ffffcc.
Configure a minimum width of 700px (use min-width).
●
Search WWH ::
Custom Search