Easy Web Design - Demystifying Basic HTML

Demystifying Basic HTML

Using the Music Site’s Framework as a Template

Print This Procedure ( doc :: pdf )

After all your hard work creating the music site, we wanted you to have a useful HTML template that you can easily customize. Therefore, we’re going to let you in on a little secret. You can create a Web site using the music template even if you don’t have any graphics. You don’t have to have a background image, banner graphics, or buttons. Instead, you can create an entire Web site using text links and color backgrounds by replacing the content elements in the music site’s Web pages. The following figure illustrates a Web site that uses the music Web site without graphics.

note Many times, an existing Web site can provide a structure for Web sites that might look significantly different.

Using the music site as a template

tip The small graphics on the sample page in the preceding figure are clip-art images downloaded and pasted together to create a simple picture. If you prefer not to include a graphic on your page, simply delete the <img> tag in your HTML document.

The next two figures show the template page and some of the template’s source code.

Viewing the sample template available online

Viewing the template’s source code

To speed along your progress when using a template to build a custom page, display the template’s source code by clicking the View menu and then clicking Source. Then in the source code window, click the File menu, click Save As, and save the source code to your computer. At that point, you’re free to modify your local version of the template by replacing the placeholder text with your custom content.

lingo In the template code (see the preceding image), you can see HTML code entries that begin with an exclamation point and two dashes: . These types of entries are called comments. Comments don’t display on a Web page; they’re used as notes to developers to help label parts of the HTML document. Comments have been added to the sample template to help you identify HTML components when you customize the source code.

Finally, notice that the template's <body> tag’s bgcolor attribute has been changed from white (#ffffff) to purple (#ccccff), and that the first <td> tag in each table row contains a bgcolor attribute set to gold (#ffcc00). You can use the bgcolor attribute to color your page’s background as well as to color your table’s cells if you’re not using a background image. You can get fairly creative with color by coloring the background one color and then selectively coloring table cells various other colors. (You don’t have to color all your table cells the same color.) Just remember to make sure you use a background that ensures that your text is easy to read.

tip To view a color chart of Web safe colors along with their hex codes, students can visit http://www.creationguide.com/colorchart.html

Next section