Easy Web Design - Demystifying Basic HTML

Demystifying Basic HTML

Specifying the Background and Link Colors

Print This Procedure ( doc :: pdf )

You can include attributes in the <body> tag to add background colors, background images, default text link colors, and so forth, as described in the following steps:

Open Notepad, WordPad, or TextEdit, and then open the C:\music\index.html file from within the text editor. If you don’t see the file index.html listed in the Open dialog box, ensure that the Files Of Type list box displays All Files (*.*). If you’re using Mac OS X, TextEdit automatically displays an HTML document as a Web page by default. To open and display the HTML code instead of the Web page, select the Ignore Rich Text Commands check box in the Open File dialog box (note that you can select this option in the program’s Preferences dialog box as well, if you don’t want to select the check box on a case-by-case basis).

tip You must open your HTML file by using the text editor’s Open command, by dragging the document’s icon into the text editor’s window, or by right-clicking the HTML file and choosing Notepad on the Open With menu. If you double-click an HTML file in folder view, you’ll display the HTML document in your Web browser.

17. In the <body> tag, click after the Y and before the >, press the spacebar, and then enter the following attributes and values, including the quotation marks:

bgcolor="#ffffff" background="images/bg.gif" link="blue" vlink="purple" alink="red"

The <body> attributes you just added are defined as follows:

· bgcolor defines a background color. Although the music site uses an image for the background, we defined a white background for folks who view the site with images turned off. In the color chart shown on www.creationguide.com/colorchart, you can see that #ffffff is a hexadecimal number that equates to white.

note Hexadecimal numbers are base 16 numbers that includes 0 -- 9 and a -- f

· background enables you to specify a graphics file to use as a background image. Remember that browsers automatically tile background images to fill the browser window. The music page uses the bg.gif file, which is stored in the images subfolder of the music folder, as a background image. Because both the index.html document and the images folder reside in the music folder, you don’t have to indicate the image’s complete address. If your image was saved elsewhere (that is, not within a subfolder of the folder that contains the index.html document), you’d have to enter the entire address that points to the image.

lingo Tiling refers to repeating an image across a window’s area and down until the entire window is filled with the repeating image.

· link enables you to specify the color in which unvisited text hyperlinks display.

· vlink enables you to specify the color in which visited hyperlinks display. In other words, after a user visits a site’s Contacts page, any text links pointing to the Contacts page will display in the visited link color (purple, in this case).

· alink enables you to specify the color in which links display while users click the links. Showing a different color while the users click links clearly indicates to users that they are activating a hyperlink.

Your HTML code should now display as shown in the following figure.

Page formatting attributes in the <body> tag (the newly added code shown in red)

tip Whenever you enter HTML code, always verify that you’ve included all angle brackets (<>) and quotation marks ("") in your HTML code as well as spelled the HTML commands properly. Missing small elements or misspelling commands can cause your Web document to display incorrectly or not at all. We’ve included screen shots of the code you’re creating throughout this walkthrough so that you can easily check your work.

18. Save your HTML document, open your browser, and view index.html in your browser window. (You don’t have to close your text document, but you do have to ensure that you’ve saved your most recent changes.) The index.html file should now display the background image in your browser window.

tip You must save changes made in a text document before the updates will display in a browser. If changes don’t display in the browser and you have refreshed, return to your text document, save, and then refresh the view in the browser again.

Now that the standard HTML tags, default background image, and link colors are in place, the next step is to begin to format your Web page’s <body> area.

Next section