Exercise 2-2 Edit and test the book page

In this exercise, you'll edit and test the book page that is shown in figure 2-14.

You should do this exercise whether you're using Aptana or another text editor.

Open the HTMI, and CSS files for the book page

1. Start your text editor.

2. Open this HTML file in your text editor:

• c:\htm15_css3_2\exercises\ch02\dreamweaver_book.html
• For Aptana users, this will be in the project named HTML5 Exercises.

3. Open the CSS file named book.css that's in the same folder. This should open in a new tab.

Test the book page in Firefox and Chrome

4. Run the HTML file in Firefox.

5. Run the HTML file in Chrome. Is there a difference in the pages? If so, this illustrates why you need to test a web page in more than one browser.

Modify the HTML and CSS code and test again

6. Go back to your text editor and click on the tab for the book.css file. Then, change the float property for the img element from left to right, and save the file. Now, test this change in both browsers.

7. Go back to the book.css file, and change the color for the hl element to "red" and change the font-size to 180%. Then, save the file, and test the change in one or both browsers.

8. Go back to the dreamweaver_book.html file, and add a <p> element at the bottom of the page that has this content: For customer service, call us at 1-555-555-5555. Then, save the file and test this change in both browsers. When you do, you will notice that this paragraph displays differently in the two browsers.

9. Go to the dreamweaver_book.html file and add an id attribute with the value "service" to the <p> element that you just entered. Then, go to the book.css file and enter a rule set for the <p> element with that id. This rule set should use the color property to change the text to red, and it should use the clear property with a value of both to stop the floating before the paragraph. If you need help doing this, refer to figures 2-5 and 2-6. Now, save both the html and css files, and test these changes.

Validate the HTML and CSS files

10. In the HTML file, delete the ending > for the img tag, and save the file. Then, go to the site in figure 2-15, and use the Validate by File Upload tab to validate the file. If you scroll down the page when the validation is done, you'll see 3 error messages, even though the file contains just one error. 
11. In the CSS file, delete the semicolon for the color rule in the hl rule set, and save the file. Then, go to the site in figure 2-16, and use the Validate by File Upload tab to validate the file. This time, you'll see 1 error message.

12. If you're using Aptana, note the error marker in the HTML file. Then, validate the HTML file by using the command in figure 2-15. This shows how much easier it is to validate files within the text editor or IDE that you're using.

13. If you're using Aptana, note the error marker in the CSS file. Then, validate the CSS file by using the command in figure 2-16. Note here that the valida-tion found no errors, which differs from the results for step 11.

14. Now, undo the errors in the files, save the files, and validate the HTML page again. This time, it should pass with one warning. Then, test the web page one last time.