HTML Complete Course, Wiley Publishing, 2003
| Highlights | Tutorial | Bonus | Errata |
Written by Web design expert Donna L. Baker, and illustrated throughout in full color, this Complete Course shows you how to master the ins and outs of HTML, the language of the Web, while working on a single project. Fifteen sessions and nearly 100 step-by-step tutorials, accompanied by vivid color images and screen shots, walk you through building a slick, fully functional Web site from start to finish, using HTML and JavaScript. After completing the course, you'll have an impressive portfolio piece, a professional-looking Web site you can adapt to meet your needs, and a thorough understanding of HTML fundamentals. All of the files used to build the Web site conform to XHTML and CSS standards. (Includes a CD-ROM containing the images and files for the project, plus freeware tools.)
Looking for downloads? Check the listings in the Baker Communications Downloads area.
HTML Complete Course was the 2003 winner of an Award of Excellence from the Canada West Coast chapter of the STC (Society for Technical Communication.)
View the book's page at Wiley Publishing.
Highlights of the Book
Learn to use write XHTML code and stylesheets that are valid according to W3C standards. The sample shows a variety of the pages you construct in the book's project.
- frameset
- navigation, header, and content frames
- controlled-size pages
- slideshow
- imagemap
Learn to work with graphics and images. This sample shows the main logo you construct and assemble for the site along with examples of other graphics used.
Learn to use JavaScript for a variety of purposes:
- changing the browser's status bar message
- adding an automatic date to your site
- controlling the size and location of pages
- navigation buttons
Tutorials
Styles are important. Not only can you write styles for virtually any and all elements of a page, but you can also write pseudo-styles for specific purposes. Customize the first letter or first line of a paragraph using a pseudo-element style; assign different styles to different link states using pseudo-class styles. Working with Pseudo-Elements and Pseudo-Classes shows you how to do it.
To read a sample tutorial from the book, view the PDF version (right-click to download).
Bonus CD Session: Posting Your Site
The bonus session was omitted from the book's CD. Click to download a PDF version of the session ( 704KB).
Errata
Session 2 Tutorial: Adding Tables to the Navigation Pages (page 64)
On page 65, Step 9 reads: "On
line 13, replace <td>Cell
B</td>".
The sentence should read: "On line 13, replace <td>Cell
A</td>".
Session 3 Tutorial: Testing the Navigation Tables’ Tiled Image (page 84)
In Step 2, the description
of the image is given as "Images/stripe.gif".
The step should read: "Images/stripe.jpg" as
shown in the figure.
The correct file name is noted in the chapter's introduction,
in the CD listing, and in the tutorial's figures.
Session 4 Tutorial: Finishing the Sizzle Logo (starting page 101)
On page 103, steps 25 and
27 refer to using the Blur effect.
The steps read: "Choose Edit->Blur->Soften".
The steps should read: "Choose Image->Blur->Soften".
Session 5 Tutorial: Attaching Styles to the Booking Information Page (page 132)
Step 1 reads:" Open
the Image Sources folder, and select booking_bkgd.jpg."
The step should read: "Open the Image Sources
folder, and select pool_bkgd.jpg."
The correct file name is noted in the chapter's introduction,
in the CD listing, and in the tutorial's figures.
Garbled Page Display for booking. html page
While this is not an errata as such, some monitors are unable to redraw the screen correctly to display the booking.html page when the bookingbkgd class has been applied to the page. If you have experienced garbling when you view the page on your browser, try substituting the body class with an image and inline style.
Follow these steps:
1. On the booking.html page, delete the reference to the class used for the <body> tag. That is, change from <body class="bookingbkgd"> to <body>.
2. In the line following the <body> tag
add this code:
<img src="Images/pool_bkgd.jpg" style="position:
absolute; left: 100px; top: 150px; z-index:-1" alt="image
of a pool background in four colors"/>
This tag places the same image on the page at the same location as the body style; since it has a z-index attribute of -1 it places the image behind the rest of the content, just as the background class does.