HTML 4_01 Weekend Crash Course - G. Perry
.pdf
Session 16—Advanced Color and Imaging Techniques |
215 |
Creating Banners for Style
The HTML programmer’s world includes the HTML editor, as well as one or more graphics programs. Adding just the right touch to a Web site may be difficult. Often, you will create the graphics that you use in your site, because not only do copyrights restrict your use of images you’ll find elsewhere, but also matching an image to the tone of the Web site seems impossible at times.
Therefore, you’ll don your chapeau (that’s French for hat and all the famous artists seem to wear them) and design images that complement your sites. HTML newcomers find that creating artistic banners that run across the top of a page or down a side is extremely easy. A banner can be just about anything that lies across your entire Web page or that takes space on the side or at the bottom. Many commercial Web sites use banners for advertisements. The banners must be eye-catching, use Web-safe colors, and load quickly, quite a challenge for such a small image space. Many banners take advantage of the capability to animate GIF images but consume very little page-loading time.
The following sections conclude this short session by describing guidelines you’ll want to follow when generating banner graphics with programs such as Adobe Illustrator, PhotoShop, PhotoDraw, or Paint Shop Pro.
Bordering banners
Place band (or bordering) banners that you want spread across the entire screen in a table consisting of a single cell, and set the cell width to 100 percent. The banner will stretch to the user’s screen. Obviously, if your banner includes a picture or text or both, such stretching won’t work. A stretched banner does work well, however, for a formatted set of bars and designs that run across the screen to add a ceiling to your page such as the one in Figure 16-4.
Session 12 explains how to work with tables.
Cross-Ref
Bands don’t have to cross the top of your Web page. Many fall down the left or right side of the page and separate a navigation bar or hyperlinks from the body of the Web page. To create vertical banners, a simple trick that you can use in almost any graphics program is to first create a rectangle with some pattern, such as the gradient fill shown in the Paint screen in Figure 16-5.
Afternoon Saturday—III Part
16 Session
216 |
Saturday Afternoon |
Figure 16-4
Stretch band banners across the screen in a table cell.
Figure 16-5
This simple rectangular image will help produce fantastic vertical banners.
Session 16—Advanced Color and Imaging Techniques |
217 |
Once you save your rectangle pattern, you can create a table on your Web page that begins in the upper-left corner and falls down the left side of the page. In other words, make the cell’s height 100 percent. By coloring the page’s background with the color on the right side, you instantly create an attractive theme-like Web page background even if you’re not an artist, as Figure 16-6 shows. The page now includes a vertical banner on the left side of the screen that you can use for a navigation bar’s background or for other kinds of hyperlinks.
Session 8 explains how to change the background color.
Cross-Ref
Afternoon Saturday—III Part
16 Session
Figure 16-6
The page now includes a vertical banner.
218 |
Saturday Afternoon |
|
Instead of putting the image in a table cell, you can create the |
|
image with a huge height, something like 2,000 pixels. You can |
Tip |
stretch the image to 2,000 pixels using most graphics programs. If |
the image is a GIF image, it consumes an extremely small amount |
|
|
of storage and takes hardly any time to load. When several pixels |
|
of the same color appear in a GIF file, the GIF algorithm squeezes |
|
the size of the file dramatically. Instead of storing all those same- |
|
colored pixels, the GIF file stores only the color and the number of |
|
pixels required at that point in the image. |
Advertising and headline banners
So many sites use advertising and headline banners that a site almost seems lost without them. Because banners often contain text, created as a graphic image, you’ll want to test the banners you create in several different browsers using several different resolutions to ensure that the banner looks like you want it to look.
Make banners accent the page, not distract from the page’s content. They should consume a reasonable amount of space. At the same time, you want a banner that contains your company logo to be seen and recognized, and you want your advertising banners to be noticed as well: You want the click-through credit often given for such banners, or if the advertising banner is your own company’s, you want the banner to generate sales of a product.
Keep the banner’s size limited to approximately 300 pixels wide. Keep the banner’s height limited to around 100 pixels tall. Center the banner on your Web page or place the banner inside a table’s cell that falls in the upper-center of the Web page or that remains in one of the corners. If you let the banner appear freestyle without any placement instructions, the banner can end up off-center on many browser screens. To make the banner appear quickly, reduce the number of colors (assuming the banner is a GIF file), even though you’re sticking to Web-safe colors to make the banner load quickly. As always, add alternative text tags to the banner so that the user who is viewing your page with graphics turned off knows what the banner represents.
Most of today’s Web-aware graphics programs will create a properly sized layout for banners that you want to produce.
Tip
Session 16—Advanced Color and Imaging Techniques |
219 |
Final Graphics Tips
After learning about Web page graphics and color techniques throughout this session and the previous ones, keep the following tips in mind:
Always design and create your graphics using your graphics program’s highest resolution. You have more control over the image’s specifics. Only when you finally save the image for your Web page using the GIF or JPEG format will you decrease the resolution for the Web page.
Utilize Web-safe colors. Generally, the graphics program will let you select a Web-safe palette so that only Web-safe colors are available to you.
Save the image in the program’s native format, as you design the image. For example, users of Microsoft PhotoDraw will create and save their images with the filename extension .mix. By saving with the program’s native extension, you keep the image intact and maintain important layers that you’ll further refine as you develop the image.
Save a copy of the image in the Web page format and desired resolution once you’ve created the design in the high-resolution and native file format. If the image doesn’t render properly on your Web page, you can always edit the high-resolution file.
Graphics programs enable you to save fancy text as a GIF image so that your user’s font selection won’t change the look of the text.
REVIEW
Even the black-and-white Web-safe colors can damage the look of JPEG files in many user’s browsers.
Ample whitespace keeps your site less cluttered and easier to navigate and maintain.
Navigation bars, which work like a menu and contain icons, provide a uniform traversal path for your site’s users.
Banners, which can spread across and down the left or right side of your Web page, provide colorful separating areas.
You should maintain the standard size guidelines when putting advertising and logo banners at the top of your sites.
Afternoon Saturday—III Part
16 Session
220 |
Saturday Afternoon |
QUIZ YOURSELF
1.How do the Web-safe colors affect blank-and-white photographs? (See “A Problem with Displaying Black-and-White Photos.”)
2.How does the use of whitespace improve your site’s tone? (See “Design Tip: White Works Well.”)
3.How does a user traverse your site’s navigation bar if the user has graphics turned off? (See “Creating Navigation Bars.”)
4.True or False: When creating images and banners in your graphics program, you should save the file in the GIF or JPEG format as you work to keep the image in its most optimum Web page format during the process. (See “Creating Banners for Style.”)
5.How does a 2,000-pixel-high GIF banner load quickly? (See “Bordering Banners.”)
S E S S I O N
17
Marketing Your Web Site
with HTML
Session Checklist
Use meta tags to describe your site to search engines and get it noticed
Understand how to push-market a Web site that works best as a pull-market product
Learn other methods besides meta tags to get your site noticed
Don’t resort to HTML trickery to get your site noticed
No tutorial on HTML would be complete without some discussion about marketing your Web site, or, in other words, how to get an audience for your Web site. This session continues your HTML tutorial by teaching you how
to use meta tags, the tags that determine how search engines locate your site. This session also discusses how to ensure that your site gets noticed by search engines in other ways without resorting to bait-and-switch techniques that will turn off your users and get your site booted from the search engines.
226 |
Saturday Evening |
Getting Your Site Noticed with Meta Tags
A meta tag (<meta>) is a tag that appears in the header section of your Web page that contains general information about your site. Place your page’s meta tags after the <title> and </title> tags but before the </head> tag that terminates the header section. As you can see, no end meta tag exists.
Here is an example of a meta tag:
<meta name=”description”
content=”Your best resource for water-related activities and fun! We sell boats, fishing gear, and skis online and we’ll ship anywhere!”>
Note
Current standards dictate that meta tags follow the <title> tag pair. Nevertheless, many HTML programmers and even Web page generators insert meta tag information before the <title> tag pair. For example, FrontPage 2000 always inserts the following code at the top of all Web pages:
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252”>
<meta name=”GENERATOR” content=”Microsoft FrontPage 4.0”> <meta name=”ProgId” content=”FrontPage.Editor.Document”> <title>New Page 1</title>
</head>
At first glance, meta tags seem to hold information that could appear inside comment tags. For example, FrontPage’s meta tags in the preceding code describe the version of FrontPage that generated the Web page, as well as the character set used for the text. Other more cryptic information also appears in the tag used internally by the FrontPage editor.
The advantage to using meta tags over comments for some information is that search engines utilize your page’s meta tags to determine how to index your page inside the search engine. In other words, if you want your page to appear on one of the many Web search engines, you need to include search information inside meta tags in your page.
Never rely solely on meta tags for search engine inclusion. Many ways exist to get listed in search engines. You’ll learn more ways to get your site noticed later in this session.
Never
Session 17—Marketing Your Web Site with HTML |
227 |
|
|
Many Web sites utilize usability studies to determine the best |
|
|
meta tags for their Web pages. A usability study has several |
|
Tip |
people sit down and perform routine searches and navigation of |
|
Web sites. All the while, the study’s researchers are looking at |
||
|
the ways that users search for things, the ways that they use the |
|
|
mouse and keyboard, and the ways that they click some areas |
|
|
more often than others. Usability studies have found that users |
|
|
may or may not notice something as simple as a Help button. |
|
|
When users get confused, they are likely to switch to another |
|
|
site, meaning that the site’s Help button is not obvious or that |
|
|
the site is too boring. No matter how much you love your site’s |
|
|
design, your users should determine how it performs. A usability |
|
|
study is one of the best ways to learn what typical users enter |
|
|
in a search engine to locate a given Web site. |
|
The name= and content= attributes
The name=”description” attribute specifies what the meta tag describes. The content= attribute tells search engines what your site is all about, in your own words. You’ll want to be as specific and descriptive as possible. Describe the specific content of the site. If you sell technical books, the following tag would be too general:
<meta name=”description” content=”We sell books”>
A better meta tag might be this one:
<meta name=”description” content=”We have tens of thousands of rare technical books discounted for sale online”>
Keep in mind that when you use a name=”description” attribute, you also need a content= attribute to complete that tag and supply the description.
The bottom-line reason for specifying the name=”description” and content= attributes is so that search engines will display your content in the first line in the search engine’s results. So, when a search engine returns your Web site in a list of valid search hits, the content= value appears after your site’s address. The user who views the search engine’s results reads through the content values looking for a site that might be of interest.
Evening Saturday—IV Part
17 Session
228 |
Saturday Evening |
Specifying keywords
Another meta tag attribute pair enables you to specify keywords about your site. Search engines look for key words in sites to match up against a user’s search query. For example, if a user goes to Yahoo! (http://www.yahoo.com/) and types online auction teddy bears, Yahoo! would use the keywords online, auction, teddy, and bears to match against sites’ keywords specified in meta tags.
Use the name=”keywords” attribute, followed by the content= attribute, to specify keywords that relate to your site. The following might contain the keywords for your online technical book site:
<meta name=”keywords” content=”technical, books, book, online, bookseller, rare, inexpensive, overnight”>
The keywords determine your Web page’s ranking when a search engine returns your page along with other Web pages. Therefore, the more keywords you specify, the more likely your site will match closely with someone searching for a site like yours.
If you do a Yahoo! search with the search phrase, hard disk drives, Yahoo! performs a series of two searches. The first search passes over Yahoo!’s own internal categories. If a search phrase makes a good match on a Yahoo! category, that category appears at the top of the search engine’s results. After Yahoo! displays the matched categories, Yahoo! then displays a more general Internet match list of sites. (Yahoo! makes sure that you know about its own sites before the general sites, which is fine, because Yahoo! is paying the bills for its free search engine.) Study the results that appear when you perform searches yourself. Yahoo! returns not just hard disk sales, but also disk repair sites. The more specific that you are with your search query, the more specific are the results that the search engine returns. But much of that specific match centers on the meta tag contents the HTML programmers included in the Web page. The more descriptive the meta
tags, the more likely your site will come up when it should.
Hiding from search engines
If you don’t want to appear in a search engine’s results, you can opt out of being included with the following meta tag:
<meta name=”robots” content=”noindex”>