A background image appears behind the text on a page . By default, the image is tiled to fill the page and scrolls with the page .
Unfortunately, there are plenty of examples of ineffective or distracting backgrounds on the Web . Here are some tips for making yours better than those:
Choose images that are designed to be tiled so that each copy blends smoothly into the next . When the image’s edges blend well, it will look like a single, large image . In the fol-lowing figure, the edges do not blend well:
Specifying a Background Image File 63
On the other hand, the edges of the tiled copies of the following image blend together well in both directions .
Use subtle patterns that don’t distract from the text . The preceding examples fail that test; they impede readability . Here’s a better one:
If you specify a background image, you should also specify a background color . The color will not be visible unless the image fails to display for some reason, or unless the image has transparent areas in it . The background color is especially important if you use a dark background image and a light foreground color; if the image does not appear, the text still must appear on a dark background to be readable .
To use a background image file, use a style=”background-image: url(image)” attribute in the opening <body> tag, as you did for foreground and background colors in the preceding section . For example, to use the background image file called granite.gif that is located in the same folder as the HTML file, you would write:
<body style="background-image: url(granite.gif)">
Notice that you must enclose the image file name in parentheses following the url . The <body> tag can hold many style specifications in a single style= attribute . Separate them with semicolons, as you did earlier with the foreground and background colors . For example, to combine the background image, background color, and foreground color in a single attribute, do the following:
<body style="background-image: url(granite.gif); color: green; background-color:
beige">
By default, the background image is repeated both horizontally and vertically to fill the window . You can force it not to repeat by adding the background-repeat= attribute to the <body> tag and specifying repeat-x (repeat horizontally only), repeat-y (repeat verti-cally only), or no-repeat . For example, to prevent any repeating, use the following:
<body style="background-image: url(granite.gif); background-color: beige; back-ground-repeat: no-repeat">
By default, the background image scrolls with the text when the user scrolls down the page . To force the image to stay fixed, add the background-attachment=fixed attribute to the <body> tag, as follows:
<body style="background-image: url(granite.gif); background-color: beige;
background-attachment=fixed">
In this exercise, you will display an image as a Web page background .
SET UP Use the foliage.htm and stucco.jpg files in the practice file folder for this topic. These practice files are located in the Documents\Microsoft Press\HTML5 SBS\04Lists\SpecifyingImages folder. Open the foliage file in Notepad and in Internet Explorer.
Key Points 65
1.
Replace the existing opening <body> tag with this one:<body style="background-image: url(stucco.jpg); background-color: beige">
Note To avoid having to specify a path to the image file, place the image file and the HTML file in the same folder.
2.
Save the file, and then refresh the Internet Explorer display to check your work . CLEAN UP Close the Notepad and Internet Explorer windows.Key Points
●
● To create a numbered (ordered) list, use the <ol> tags . For a bulleted (unordered) list, use the <ul> tags .
●
● Within the <ol> or <ul> tags, use <li> tags for each list item . These tags are all two-sided . HTML does not require the closing </li>, but XHTML does .
●
● Ordered and unordered lists can be nested . Enclose the second-level <ul> or <ol>
list within a <li></li> tag inside the main list .
●
● To use a different bullet character or numbering style, use the style=”list-style-type:
type” attribute in the <ul> or <ol> opening tag .
●
● To create a definition list, use the <dl></dl> tags . Within the <dl> tags, enclose each term in a <dt></dt> tag, and enclose each definition in a <dd></dd> tag .
●
● You can display special characters on a Web page by using HTML character entity references .
●
● To insert a horizontal line, use the <hr> tag . This is a one-sided tag . Put any specifi-cations for the line within it, such as color, height, and width .
●
● You can specify colors by using basic or extended names, RGB values, or hexadeci-mal values .
●
● To assign a background color to a page, insert a style=”background-color: color”
attribute into the <body> opening tag . For a foreground color, use style=”color:
color” . These attributes can be combined into a single statement with a semicolon separator, like this: style=”background-color: red; color: white” .
●
● To assign a background image to a page, insert a style=”background-image: image”
attribute into the <body> opening tag .
Download from Wow! eBook <www.wowebook.com>
Chapter at a Glance
Hyperlink to an e-mail address,
page 71
Hyperlink to other content, page 78 Hyperlink to
a Web page, page 68
67
5 Creating Hyperlinks and Anchors
In this chapter, you will learn how to 4 Hyperlink to a Web page .
4 Hyperlink to an e-mail address . 4 Create and hyperlink to anchors . 4 Hyperlink to other content .
The Web is based on hyperlinks . Each Web page contains active links to other pages, which in turn link to even more pages, until presumably the entire Web (or at least a great chunk of it) is bound together . In fact, that’s where the name “web” comes from . Hyperlinks can connect to other places on a Web page, to other pages within your Web site, to pages outside your site, and to many types of Web and non-Web content .
You activate a hyperlink by clicking a designated bit of text or a graphic that, depending on the link, takes you to a different location on the page, opens a different Web page, starts an e-mail message, downloads a file, lets you view a movie or listen to a sound clip, starts a Web-based program, and so on . You have probably clicked thousands of hyper-links, perhaps without thinking much about the coding behind them . After this chapter, you’ll understand how they work, and you’ll be able to create your own .
In this chapter, you’ll learn about the <a> tag, which is used to create various types of hyperlinks . You’ll find out how to create hyperlinks to Web pages and e-mail addresses, how to create anchor points within a document, and how to hyperlink directly to an anchor point . I’ll also show you how to hyperlink to non-Web content, like a Microsoft Word document or Microsoft Excel spreadsheet .
See Also Do you need only a quick refresher on the topics in this chapter? See the Key Points section at the end of this chapter.
Practice Files Before you can use the practice files provided for this chapter, you need to download and install them from the book’s companion content location. See “Using the Practice Files” at the beginning of this book for more information.