Visual Elements and Graphics - Web Development and Design Foundations with XHTML - page 168

● Configure the libertyvillethumb.jpg as an image link to libertyville.jpg.
Assign the <img /> element to a class named property. Code appropriate
attributes on the <img /> element, including align="left" .
● Configure an unordered list with the following text:
Close to train
Two bedrooms
Two baths
Two indoor parking spaces
Listing #3432432
● Configure a line break after the unordered list.
Save the listings.html file. If you test your page in a browser you'll notice that it
looks different from Figure 4.47—you still need to configure style rules.
2. Configure the CSS. Open prime.css in Notepad. Edit the style rules as indicated.
● Configure the img selector to not display a border.
● Configure the nav id for the new page design. Remove the existing style rules.
Configure .70em font size.
● Configure a class named property to have 30 pixels of right padding, and
5 pixels of top padding.
Save the prime.css file.
3. Test. Test the listings.html page in a browser. If your images do not appear or
your image links do not function, examine your work carefully. Use Windows
Explorer to verify that the images are saved in your prime folder. Examine the
src attributes on the <img /> tags to be sure you spelled the image names
correctly.
4. The Home and Financing Pages. Modify the Home page (index.html) and
Financing page (financing.html) to be similar to the Listings page you just cre-
ated. Pay close attention to the navigation buttons. Refer to Step 2 if necessary.
Save and test your pages. Isn't it interesting how just a few images can add a
professional look to a Web site?