HTML 4.01 Weekend Crash Course 0764547461, 9780764547461

• CPU
  
  Session 6 — I mproving t he Look of Your Web Page’s Text
  
  83
  
  
• Hard disk
• CD-ROM

because of the inco nsistency that so me browsers provide with handling spaces between paragraphs.

쐌 By aligning yo ur text with the left edge of the browser window, the center of the window, o r the right edge of the window, yo u create a better page layo ut fo r yo ur text.

Session 6 — I mproving t he Look of Your Web Page’s Text

85

쐌 Keep yo ur text fro m wrapping when the user resizes the browser window. 쐌 The tag sets off lo ng passages of text, such as a quo tatio n. 쐌 Yo u’ll see the and tags still in use, but a move is under way to sto p using them because of the increased usage of style sheets.

쐌 HTML makes adding lists to yo ur Web sites easy with the ,

, and tags.

1.

What can yo u use as a substitute fo r the

tag to ensure that yo ur paragraphs break with a single blank line between them? ( See “ Better Paragraph Spacing.” )

2.

Which tag substitutes fo r

and enables yo u to center graphic images as well as paragraphs? ( See “ Paragraph Alignment.” )

3.

What is the primary reaso n why browsers do no t auto matically add line breaks when yo ur HTML co de includes text returns o n multiple lines? ( See “ Line Breaks and Spacing.” )

4.

What are the tags still in use that make text larger o r smaller than the base size? ( See “ Bigger and Smaller Fo nt Sizes.” )

5.

What is the difference between the three list styles? ( See “ Putting Lists in Yo ur Text.” )

Part I I — Sat urday Morning Session 6

QUI Z YOURSELF

SESSI ON

7 HTML Graphics

Session Checklist ✔ Add graphics to yo ur Web page and master the two primary graphic file types ✔ Use the tag to wo rk with images o n yo ur Web pages ✔ Specify the width and height of yo ur images ✔ Deal with users who turn off their image display ✔ Distinguish between interlaced and no ninterlaced images ✔ Adjust yo ur images’ gamma value

I

n this sessio n, yo u’ll learn the mechanics of placing graphic images o n yo ur Web pages. Yo u’ll also learn what attributes to use to speed up the lo ading of graphics and to get aro und users who turn off their image display. Much

of what yo u learn this weekend abo ut Web page graphics centers no t o nly o n the actual HTML tags needed to display the images, but also o n the graphic theo ry required to use graphics effectively.

88

Sat urday Morning

Kinds of Graphics and File Types The term picture actually do esn’t describe all the kinds of images a Web page can display. Yo ur Web page can display pictures, line drawings, co mputer- generated artwo rk, scanned images, images bro ught into the machine fro m an electro nic drawing tablet, images fo r free and fo r sale o n the Internet, clip art that co mes with drawing pro grams, and even mo use- drawn images created in paint pro grams. If yo ur co mputer can create o r lo ad it, a Web page can display it. The mo re graphics- intensive yo ur site is, the mo re visually appealing that it may be. However, it is less likely that users will wait o n the site to lo ad befo re giving up and go ing elsewhere. Obvio usly, if yo ur site is a graphics- o riented site, as wo uld be the case fo r an art gallery’s preview site, users know what to expect and are willing to wait lo nger than a po tential custo mer who simply wants to know what time yo ur custo mer service perso nnel begin wo rking. And, as yo u already know fro m Friday evening’s sessio ns, yo u sho uld keep yo ur ho me page free of intensive graphics no matter what service yo ur site provides and bury the intensive graphics deeper in the site where yo ur users will stick with yo u mo re. Many different graphic images exist. Yo u can lo cate graphic files sto red with many filename extensio ns, but yo u sho uld use o nly two image types when placing images o n yo ur Web page, and they are as fo llows:

쐌

GIF ( pro no unced “ jiff” ) files, also known as graphic inte rchange fo rmat

files, were o riginally develo ped fo r the Co mpuServe o nline service. GIF files can display up to 256 co lo rs and wo rk well fo r images with pure co lo rs such as lo go s and paint- pro duced pro grams.

쐌

JPEG o r JPG o r JPE ( pro no unced “ j-pe g” ) files, created fo r the Jo int Pho to graphic Expe rts Gro up, can display millio ns of co lo rs and are great fo r

high- reso lutio n images such as pho to s.

Never

Never embed an image wit h anot her f ile ext ension on your sit e, because a browser does not support ot her graphics f ile format s. Most graphics programs will convert your image t o GI F or JPG format wit h t he File ➪ Save As command.

Generally, yo u’ll use the JPEG fo rmat fo r pho to graphic images and GIF fo r all o ther kinds of graphics yo u place o n yo ur Web pages. JPEG’s high availability of co lo rs makes JPEG a go o d standard fo r pho to s. Small text o n to p of a JPEG image do es no t always display well because the edges can lo o k ro ugh and grainy. That’s why GIF wo rks well fo r lo go s and o ther images that typically include text as well as a graphic.

Session 7 — HTML Graphics

89

GIF images also provide exceptio nal suppo rt fo r a co ncept called transpare ncy. Yo u can specify a co lo r o n a GIF image that will be transparent to its backgro und.

Session 1 5 describes more about creat ing and placing t ransparent images on your pages. Cross-Ref

images with a high reso lutio n, yo u are wasting page- lo ading time. The o ne exceptio n is when yo ur users want to print yo ur site’s images. Printer reso lutio ns are higher than mo nito r reso lutio ns, with so me reaching 1200 dpi. Instead of providing these kinds of graphics o n yo ur primary Web pages, however, yo u may want to offer a Web page with special printer versio ns of images that yo ur users may need to print.

Working wit h Graphics Wo rking with images o n yo ur Web page takes little effo rt. The ( fo r image ) tag do es all the wo rk fo r yo u. The tag suppo rts several attributes, but the src= ( fo r so urce ) attribute is the o ne that specifies the name and lo catio n of the image.

Placing an image Here is the fo rmat of the tag that co llects the graphic image and displays the image o n the Web page:

No end tag is necessary. The lo catio n of image generally is the images fo lder yo u’ve sto red in the same lo catio n as yo ur site’s HTML files. Yo u also can add a link to an image lo cated o n ano ther Web site. If yo u first co py that image to yo ur own site’s images fo lder and refer to that co py, assuming yo u have permissio n to co py and use the image, yo ur Web site link will remain go o d even if the o ther site changes. The fo llowing tag tells the browser to lo cate and display the image named

ourhouse.gif:

Part I I — Sat urday Morning Session 7

When preparing yo ur images, remember that mo st co mputer mo nito rs have 72 pixels per inch ( usually referred to as dpi o r do ts pe r inch ) reso lutio n. If yo u offer

90

Sat urday Morning

If yo u co mbine this tag with o ther tags, the image appears inline with surro unding text. In such a case, the text and the image take different places o n the screen. The fo llowing co de pro duces the image shown o n the browser screen in Figure 7- 1.

Welcome to our new home Although we are snowed in, we love it here in the country.

(At least the gravel road doesn’t stir up much dust in the winter!)



Figure 7-1 The tag le ts yo u display image s o n yo ur page.

Session 7 — HTML Graphics

91

Framing an image Yo u can add a bo rder aro und yo ur images by using the border= ( fo r bo rde r) attribute inside the tag. If yo u specify a bo rder value higher than 0, the browser will place a bo rder aro und the image. The fo llowing co mmand tag draws a bo rder ten pixels wide aro und the image:

Aligning an image As with paragraphs, yo u can align graphic images to the left edge, center, o r right edge of the browser window. The align=left ( fo r align le ft ) and align=right ( fo r align right ) attributes handle the left and right alignment. Insert either

align=left o r align=right in the tag when yo u want to align the image against the window edge. The fo llowing tag places the image against the window’s right edge and adds a 10- pixel bo rder, as shown in Figure 7- 2:

To center an image, enclo se the image between the and tags like this:



Not e

The align at t ribut e overrides a t ag t hat may st ill be in ef f ect . I n ot her words, if an image appears inside a and pair of t ags, and t hat image cont ains an align=right at t ribut e, t he image will be right - aligned and not cent ered in t he browser’s window.

Part I I — Sat urday Morning Session 7

Not e

Keep in mind t hat many format t ing command t ags, including t hese graphic t ags, are also support ed by CSS, t he cascading st yle sheet s t hat you’ll learn about in Session 2 0 . I n addit ion, you can learn CSS rapidly af t er you’ve seen how t he individual t ags work t o format pages.

92

Sat urday Morning

Border

Figure 7-2 The image is right-aligne d against the window e dge with a frame d bo rde r.

Specifying t he I mage Size When a browser lo ads a Web page that co ntains o ne o r mo re images, the browser must calculate the size of each image to make ro o m fo r the graphics and to fo rmat the o ther text and images. Yo u can speed the lo ading of the pages yo u create with HTML by specifying image sizes inside the tag. Yo u can specify the number of pixels, high and wide, that the image requires.

Most of t oday’s graphics programs can det ermine t he exact pixel size of any image and display t he size. You can of t en locat e t he image size in t he menu opt ion labeled Propert ies. Tip

Use the width= ( fo r width ) attribute to specify the image’s pixel width, and use the height= ( fo r he ight ) attribute to specify the image’s pixel height. The

Session 7 — HTML Graphics

93

fo llowing line displays an image o n the Web page at an exact width of 600 pixels and a height of 400 pixels:

You can combine all of t he at t ribut es you’ve seen in t his session in a single t ag.

When yo u specify the inco ming graphic’s size, yo u no t o nly save lo ading time, but yo u also can resize the image to grow o r shrink in the receiving Web page. If yo u specify a width and height attribute value that is smaller than the image’s actual size, the Web page will shrink the image. If yo u specify a width and height attribute value that is larger than the image’s actual size, the Web page will expand the image. The actual width and height attributes o nly shrink o r grow the image’s size o n the Web page but do no t speed up o r slow down the lo ading of the image. In o ther wo rds, the full image lo ads with the Web page, and the width and height attributes o nly determine the size at which the Web page will display the image in the browser window.

Never

Never change an image ’s height or widt h value by it self unless you want t he image t o appear out of proport ion. I n ot her words, if you want t o shrink t he widt h of an image by 2 5 percent , be sure t o specif y a height at t ribut e value t hat is also 2 5 percent smaller t han t he image ’s original size.

Figure 7- 3 shows the same image with three different sizes. The first image is displayed witho ut height and width attributes in the tag, so the image co mes in at its actual size. The seco nd image is smaller because of smaller height and width attributes, and the third image is larger because of larger height and width attributes. Keep in mind that an image do es no t actually grow o r shrink when yo u change the height and width attributes. The image’s o riginal size determines what the browser receives, and the tag determines how the browser displays the image. If, fo r example, yo u attempt to display a larger image that runs far past its o riginal width and height size, the image will appear grainy because there is no t eno ugh of the image to expand well past a given po int.

Part I I — Sat urday Morning Session 7

Tip

94

Sat urday Morning

Figure 7-3 The same image appe ars o n this We b page in thre e diffe re nt size s.

If yo u want to take an image and expand its size dramatically, and the expansio n causes the image to appear grainy o n receiving Web pages, co nsider lo ading that image into a graphics pro gram such as PaintSho p Pro and enlarging the actual image. The graphics pro gram can help co rrect co lo r and reso lutio n pro blems that might arise when yo u grow the image to o large in HTML. Of co urse, increasing the size of the image in the graphics pro gram also increases the lo ading time when that larger image lo ads in the Web page. Lo ading time versus reso lutio n is o ne of the trade- off issues that yo u’ll co nstantly balance as yo u develo p Web pages.

Tip

Not e

Some graphics programs will remove header informat ion t hat comes embedded in many GI F images. You can reduce t he size of a GI F image by 1 0 percent and speed loading t ime by removing t he image’s header informat ion. Many HTML programmers at t empt t o keep t heir home pages 3 5 K or less, meaning t hat t he t ot al size of t he home page, including all t ext and graphics, comes t o no more t han 3 5 K. Even t his size can be t oo slow, so at t empt t o make t he size as compact as possible. A 3 5 K Web page t akes about 2 5 seconds t o download using a low- end 1 4 .4 Kbps modem, and 1 2 t o 1 5 seconds using a 2 8 .8

Session 7 — HTML Graphics

95

Kbps modem, which is t oo long for some users t o wait . Many Web pages are far great er t han 3 5 K, and such a limit can be ext remely f rust rat ing. The good news is t hat t he ent ire I nt ernet speed, it s bandwidt h, should be moving fast er as t echnologies improve.

When Users Turn Off t he I mage Display Therefo re, yo u must co nstantly keep tho se users in mind when designing yo ur Web page. Obvio usly, if yo ur Web page’s missio n is to display pictures o r show artwo rk, yo u can co nscio usly cater to the users who have high- speed Internet co nnectio ns o r to users who do n’t mind waiting o n the images to lo ad. The tag suppo rts the o ptio nal alt= ( fo r alte rnative image ) attribute that lets yo u display text in place of an image whenever the user turns off the display of graphics in the browser. The text that fo llows the alt= tag, enclo sed in quo tatio n marks, appears in the user’s browser window when graphics are turned off. The user, therefo re, knows what the image is suppo sed to be and can either decide to view that particular graphic image by clicking it o r igno re the image and co ncentrate o n the text. Generally, yo u sho uld add alternate text to yo ur tags whenever yo u place images o n yo ur page. The fo llowing line displays the message, Jayne’s Picture, instead of the actual picture if the user’s images are turned off:

Figure 7- 4 shows a Web page with the graphic images turned off but with alternative text descripto rs that describe what the user do es no t see.

Tip

Even if t he user ’s graphics are t urned on, t he alt= at t ribut e provides an addit ional benef it . When t he user hovers t he mouse point er over t he image, t he t ext pops up in a small box next t o t he mouse point er. Therefore, t he user might point t o an image t o read what your alt ernat ive at t ribut e says about t he image. Therefore, make your alt= at t ribut e values descript ive.

If yo u place bo rders aro und images that are deco rative o n yo ur Web page, yo u sho uld specify the alt= attribute fo r tho se images, to o , so that text can be displayed instead of the actual bo rder. Use a blank attribute value o n such images, as do ne here:

Part I I — Sat urday Morning Session 7

As no ted in Sessio n 3, so me users turn off the lo ading of graphic images.

96

Sat urday Morning

Alt ernat e image t ags

Figure 7-4 The alte rnative te xt give s the te xt-o nly browse r info rmatio n abo ut the picture s.

As an added bo nus fo r users who display pages with images turned off, if yo u specify the size of each image using the height= and width= attributes, the browser pads the space where the image wo uld no rmally go instead of displaying an unpadded, small ico n. The difference is that the browser respects yo ur page layo ut and do es no t change the lo catio n and spacing of headlines and o ther elements that might appear o n yo ur page. In Figure 7- 5, the browser pro perly fo rmats the page layo ut, even tho ugh graphics are no t present, because of the width= and

height= attributes o n each of the graphic’s tags. Figure 7- 6, o n the o ther hand, shows a jumble of ico ns; the browser do es no t lay o ut the page pro perly because it canno t make guesses as to how wide and high the images are suppo sed to be witho ut the pro per attributes.

Session 7 — HTML Graphics

97

Part I I — Sat urday Morning Session 7

Figure 7-5 With the width and he ight me asure me nts, ro o m is allo cate d fo r the actual image s.

I nt erlaced versus Nonint erlaced I mages An inte rlace d image is a GIF image that appears blurry at first and then slowly gets crisper as the page lo ads. A no ninterlaced image will no t appear in the user’s browser window until the browser gets the entire image. However, an interlaced image will appear altho ugh seemingly o ut of fo cus. The browser gets the image a layer at a time, with each layer making the image crisper and clearer. Nevertheless, even the blurred first o r seco nd versio n of the image that appears as the page lo ads is often eno ugh fo r the user to see what the image ho lds and make a decisio n to wait based o n the first impressio n.

I nt erlaced JPEG images, called progressive JPEGs, are now available but f ew browsers support t hem. Not e

98

Sat urday Morning

Figure 7-6 Witho ut width and he ight me asure me nts, the page layo ut is harme d.

The user might want to see the image in its final fo rm, o r the user might o pt to traverse to a different Web site befo re the image clears up. Either way, the user has the cho ice to decide so o ner than wo uld be po ssible if the image were a no ninterlaced image. The decisio n to use interlacing is no t do ne at HTML co ding time. Instead, yo u determine whether o r no t an image is interlaced when yo u save it in a graphics pro gram. As an HTML pro grammer, yo u sho uld care abo ut interlaced images because they affect how yo u want to design yo ur site. If yo u want yo ur images to be hidden until the entire image arrives o n the user’s page, do n’t use interlaced images. Yo u will save so me lo ading time because no ninterlaced images lo ad faster altho ugh the user wo n’t see any of the image until the entire image arrives in the browser.

99

Session 7 — HTML Graphics

Gamma Correct ion PC mo nito rs generally display images 20 percent darker than Mac mo nito rs do . When yo u develo p a graphic image in a graphics pro gram, the pro gram’s gamma co rre ctio n enables yo u to lighten o r darken the images to adjust the gamma value,

o r the value that determines the brightness. PCs usually require a gamma co rrectio n of 2.2 while the Mac requires a 1.7 to 1.9 gamma. As an HTML pro grammer, graphics do n’t lo o k co rrect o n either a PC o r a Mac, yo u may have to adjust the gamma value fo r tho se images in a graphics pro gram.

REVI EW 쐌 Graphics add flair to yo ur Web site. 쐌 JPEG images are generally used fo r pho to s, and GIF images are generally used fo r all o ther artwo rk.

쐌 Keep in mind the trade- off of lo ading speed versus graphic reso lutio n. 쐌 The tag with the align=left and align=right attributes lets yo u left- and right- align yo ur images pro perly in the Web page window.

쐌 The border= attribute inside the tag lets yo u add bo rders aro und the images yo u want framed o n yo ur Web page.

쐌 The tag suppo rts the o ptio nal alt= attribute that lets yo u display text in place of yo ur graphic images.

QUI Z YOURSELF 1.

Which graphics type is best fo r lo go s? ( See “ Graphic File Types.” )

2.

What is the screen reso lutio n of mo st mo nito rs? ( See “ Graphic File Types.” )

3.

How can yo u center an image in the window? ( See “Aligning an Image.” )

4.

True o r False: When yo u decrease the display size of an image by specifying small width= and height= attributes, yo u increase the page- lo ading speed. ( See “ Specifying the Image Size.” )

5.

Why wo uld yo u ever use a blank alt= attribute fo r an image o n yo ur Web site? ( See “ When Users Turn Off the Image Display.” )

Part I I — Sat urday Morning Session 7

yo u may wo rk with whatever images yo u receive, but if yo u see that yo ur page’s

SESSI ON

8 Working wit h Color in Text and Graphics

Session Checklist ✔ Determine yo ur Web page’s co lo r strategies ✔ Use co lo r co des to specify exact co lo rs ✔ Utilize browser- safe co lo rs to make yo ur Web site universal ✔ Add co lo r to text and yo ur Web page backgro und

B

e fo rewarned — this sessio n co ntains so me co lo r theo ry and less hands- o n HTML co ding than any sessio n so far. If yo u are no t an artist, yo u may have little interest in learning abo ut co lo rs and co lo r palettes. However,

understanding co lo rs as they apply to the Web is far different fro m understanding co lo rs that an artist must master. Here, yo u learn how to use Web co lo rs so that they display pro perly as o ppo sed to the millio ns of co lo rs that will mislead yo u into thinking that yo ur Web page lo o ks like what yo u intended when it do es no t.

102

Sat urday Morning

Color St rat egies: Codes and Safe Colors Altho ugh there might be so me o ne so me whe re using a mo no chro me mo nito r to browse the Web, yo u can igno re this lo nely user and assume that yo ur Web page users are go ing to be seeing yo ur pages in glowing co lo rs. In additio n, yo u can assume that yo ur users will view yo ur Web pages in mo re than 200 rich co lo rs. 200 o r mo re co lo rs o ught to be eno ugh to satisfy any Web designer, right? It turns o ut that 200 o r so co lo rs provide an extremely limited pale tte ( the co lo r co llectio n) of co lo rs fro m which yo u can use o n yo ur pages. A pho to graph co ntains millio ns of co lo rs, with many co lo rs shading and radiating into o ther co lo rs and moving to many different hues and tints. Yo u’ll recall fro m the previo us sessio n that JPEG files can co ntain millio ns of co lo rs. Such files immediately and co nsiderably downgrade in quality when viewed with little mo re than 200 to tal available co lo rs.

Tip

I f you have JPEG images t hat you want t o display on your Web page, and you use a paint program t o decrease t he number of colors in t hat image, you may act ually increase t he f ile size and t he t ime it t akes t o download an image! JPEG images are opt imized t o display a wide range of colors as ef f icient ly as possible. You are usually bet t er of f just let t ing t he JPEG image load int o t he reduced color palet t e. Decreasing colors of your GI F f iles, on t he ot her hand, can reduce bot h t he f ile size as well as t he image’s loading t ime.

Color codes and palet t es The three co lo rs red, green, and blue co mbine differently to repro duce every co lo r in nature. Actually, the human eye interprets co mbinatio ns of these co lo rs as o ther co lo rs. When the human eye sees red and green, a yellow tint fo rms fro m that co mbinatio n. Perhaps yo u’ve heard the terms RGB inputs o r RGB mo nito rs. The RGB simply stands fo r re d, gre e n, and blue and describes inputs o r mo nito rs that co mbine these three co lo rs to pro duce all o ther co lo rs that peo ple see o n such devices. Therefore, every color you see on a computer screen is comprised of a combination of red, green, and blue. To see the pure red color, for example, your monitor forms a combination of full red, no green, and no blue. Thought of another way, your monitor uses 100 percent of red, 0 percent of green, and 0 percent of blue to produce the red color. To produce the color cyan ( had anyone really heard of the color cyan before the first PC color graphics card used something called cyan as one of its 16 colors?) , which

Session 8 — Working wit h Color in Text and Graphics

103

is an aqua blue, your monitor uses 0 percent red, 100 percent green, and 100 percent blue to produce this blue-green color. Given the digital fo rmat of co mputer data, a single byte o r memo ry lo catio n can represent the value 0 thro ugh 255 ( fo r a to tal of 256 numbers) . Therefo re, to represent different co lo rs, a three- number co lo r co de is used to represent different co mbinatio ns of co lo rs. Gray requires an equal amo unt of light red, light green, and light blue. Instead of using the percentage scheme of 50 percent red, 50 0 to 255 to represent co lo rs. Therefo re, gray wo uld be 128- 128- 128. Many Windows pro grams offer a co lo r palette, such as the o ne in Wo rd 2000 shown in Figure 8- 1, to show a co lo r range fro m which yo u can select. No tice the co lo r values, red, green, and blue, with the values 0 thro ugh 255 next to each co lo r to specify the co lo r- co de co mbinatio n. Yo u can usually click o n a co lo r, and the pro gram auto matically determines the three- co lo r number co mbinatio n needed to represent the cho sen co lo r. In additio n, yo u can enter the three numbers next to Red, Green, and Blue, and the selectio n to o l moves to that co lo r in the vast co lo r array.

These t hree numbers produce an individual color

Figure 8-1 A co lo r pale tte auto matically displays co lo r co de s and pro duce s co lo rs.

By providing these palette selectio n to o ls, pro grams so mewhat hide the threenumber co mbinatio n that go es o n under the co mputer’s ho o d to pro duce the co lo rs that yo u see. In o ther wo rds, if yo u want to select a custo m co lo r fo r a wo rd pro cessing do cument, yo u o nly have to display the palette and click o n the co lo r witho ut wo rrying abo ut the three-number co mbinatio n that represents that co lo r internally.

Part I I — Sat urday Morning Session 8

percent green, and 50 percent blue, the co mputer uses the numeric range fro m

104

Sat urday Morning

If yo u co de in HTML ( fo r a to tal of 256 numbers) , however, the pro blem is that yo u do no t have such a palette in a text edito r. Even tho ugh so me text edito rs now suppo rt co lo r palette selectio ns ( yo u can click a co lo r, and the edito r auto matically places the numeric co mbinatio n in yo ur co de) , yo u must understand co lo rs and how the co mputer displays them in mo re detail than yo u wo uld if yo u pro grammed with so mething o ther than HTML. The bo tto m line is that yo u often must specify co lo rs in yo ur Web page using the numeric co lo r co des.

Browser-safe colors If yo u multiply 256 times 256 times 256 ( with each 256 representing o ne of three- number co lo r co des) , yo u get a large pro duct — 16,777,216 co mbinatio ns to be exact. Altho ugh nature co ntains an infinite amo unt of co lo rs in the analo g co lo r spectrum, 16 millio n co lo rs is an ample supply of co lo rs fo r yo ur site. Nevertheless, a pro blem exists with a vast number of yo ur users’ systems in that they use 8- bit co lo r cards and, co nsequently, even tho ugh they can display mo re than 16 millio n co lo rs, they can display o nly 256 of tho se co lo rs at any o ne time. Therefo re, yo ur Web sites sho uld co ntain no mo re than 256 co lo rs o n the page at o ne time.

Not e

8 - bit color cards allow for t he display of only 2 5 6 colors at once because 0 t hrough 2 5 5 is t he range t hat can be represent ed in 8 bit s of binary ( t he base- 2 numbering syst em used inside your comput er) .

To make matters wo rse, Windows-based co mputers suffer further because Windows reserves 20 co lo rs fo r its own use. That leaves o nly 236 co lo rs that yo u can be sure will be available to yo u. Altho ugh the Mac do esn’t limit these 20 co lo rs, even Mac browsers that can display 256 co lo rs do n’t offer a lo t mo re co lo r o ptio ns than a PC browser can offer. Can things get mo re limited? They can. To be as standard as po ssible and to utilize the three- number co lo r- co ding scheme efficiently, Web browser designers came up with a palette of 216 co lo rs that yo u, as a Web page creato r, can use safely. That is, with these 216 browse r-safe co lo rs, so metimes called We b-safe co lo rs, yo u can be assured that all Web browsers in the wo rld will display these

co lo rs pro perly witho ut relying o n disto rting trickery that washes o ut the effect of o ther co lo rs.

Session 8 — Working wit h Color in Text and Graphics

105

Specifying Browser-Safe Colors The browser- safe co lo rs cho sen by browser makers are an even sampling of co lo rs fro m each of the three red, green, and blue RGB co lo rs. The browser- safe co lo rs span the entire 16- millio n co lo r range, taking the sampling of 216 co lo rs, evenly spaced all alo ng the 16- millio n co lo r spectrum. The browser- safe co lo r values appear in Table 8- 1.

Browse r-Safe Co lo rs

De cimal

Hexade cimal Equivale nts

0

00

51

33

102

66

153

99

204

CC

255

FF

Igno ring the seco nd co lumn fo r a mo ment, if yo u keep the three numeric co lo r co des matched up with the values in Table 8-1, yo ur co lo rs will always be browsersafe. In additio n, the co lo rs that yo u see o n yo ur own browser will always match the co lo rs that every user will see when he o r she lo o ks at yo ur Web page. Therefo re, if yo u specify a green co lo r of 0-153-0, that co lo r appears o n everybo dy’s Web page in the same co lo r intensity, hue, and to ne. ( Keep in mind the RGB o rder in which the first value always determines how much red is in the co lo r, the seco nd determines how much green is in the co lo r, and the third value determines how much blue is in the co lo r.) In o ther wo rds, 0-153-0 is a safe co lo r to use o n yo ur site, as well as fo r text and the graphics yo u create, because that same co lo r will repro duce accurately in all o ther browser windows. Remember that the co lo r intensities increase as the values increase. In o ther wo rds, a red value of 102- 0- 0 will appear much darker than a red value of 255- 0- 0. A red value of 204- 0- 0 will be 20 percent less intense ( that is, 20 percent darker) than the red that 255- 0- 0 pro duces.

Part I I — Sat urday Morning Session 8

Table 8 -1

106

Sat urday Morning

Tip

Most graphics programs t hese days provide you wit h a browsersaf e color palet t e f rom which you can choose when creat ing GI F images, borders, and ot her graphic element s you might creat e for your Web pages. I nst ead of knowing t he color codes, you can just point - and- click on t he browser- saf e colors provided.

The seco nd co lumn in Table 8- 1 lists he xade cimal equivalents fo r the decimal numbers. A hexadecimal number ( also called a he x number) is a number based o n the base- 16 numbering system as o ppo sed to the usual base- 10, o r decimal number system, that everybo dy learns as a child. Hexadecimal numbers range fro m 0 to F because, after the number 9, the numbering system co ntinues A, B, C, D, E, and F ( lowercase equivalents are o kay) . The bo tto m line is that every decimal number has a hex number equivalent that must be used in yo ur HTML co de. Fro m Table 8- 1, yo u can see that 204 is the same as the CC hex value. Therefo re, if yo u represent the co lo r co de of 204- 51- 153, yo u can also specify the number using hex values such as CC- 33- 99. Fro m the CC, yo u know that a hex number is being used, but if the numeric value do es no t include any hex values that use letters, yo u wo n’t know if the value is suppo sed to be hex o r decimal. Therefo re, a sho rtcut exists in HTML that lets yo u specify hex values witho ut any redundancy o r co nfusio n to the decimal equivalents. Begin all hex values with a po und sign ( #) and do no t use the embedded dashes. Therefo re, #CC3399 ( o r #cc3399) is the same hex value fo r the co lo r co de CC-33-99 ( which is the same as 204-51-153 decimal) . What do es all this mean? When yo u cho o se co lo rs fro m a graphics pro gram, yo u will pro bably be able to po int to the co lo r yo u want o r enter decimal values fo r the red, green, and blue co mbinatio ns. But when co ding HTML, yo u’ll enter the hexadecimal value to represent yo ur Web page’s co lo rs.

Never

Never use nonbrowser- saf e colors. Act ually, you can use any color you want f rom t he 1 6 - million color palet t e, but be warned t hat your page may look ent irely dif f erent f rom what you expect because of t he color subst it ut ions t hat browsers will surely make. To be saf e, st ick t o t he browser- saf e colors.

The big 1 6 colors If yo u limit yo urself to o nly 16 co lo rs, and that is truly limiting, HTML has assigned names to the 16 mo st co mmo n co lo rs of the PC platfo rm. ( The PC was cho sen as a least- co mmo n- deno minating system.) Altho ugh I canno t show yo u the actual 16 co lo rs o n the pages of this bo o k, Table 8- 2 lists the HTML names fo r these 16 co lo rs, alo ng with their hex equivalents.

107

Session 8 — Working wit h Color in Text and Graphics

Table 8 -2 16 Co mmo n Co lo rs Yo u Can Re fe re nce by Name

Hexade cimal Value

HTML Color Name

Hexade cimal Value

Aqua

#00FFFF

Navy

#000080

Black

#000000

Olive

#808000

Blue

#0000FF

Purple

#800080

Fuchsia

#FF00FF

Red

#FF0000

Gray

#808080

Silver

#C0C0C0

Green

#008000

Teal

#008080

Lime

#00FF00

White

#FFFFFF

Maro o n

#800000

Yellow

#FFFF00

To use o ne of the 16 co lo rs, yo u can specify the name in any tag that accepts a hexadecimal co lo r value instead of using the hex value. The fo llowing tag changes the backgro und to teal:

If yo u misspell a co lo r in the tag, the browser will substitute a co lo r of its own cho o sing.

What about t hose nonbrowser-safe colors? Altho ugh yo u’ve displayed images with far mo re than 216 co lo rs and things seemed o kay, when mo re than the browser-safe co lo rs appear, yo ur browser so metimes plays a trick o n yo u to make yo u think that yo u are seeing mo re co lo rs than are actually po ssible. The browser dithe rs the co lo r by co mbining two o r mo re browser-safe co lo rs. If yo u magnify the screen, yo u see that the co lo rs are actually co mbinatio n pixels. At no rmal viewing levels, yo u do no t see that the co lo rs fo rm simply because two different co lo rs are side-by-side. So , yo u may wo nder why yo u simply do n’t let the browsers dither whatever co lo rs yo u uplo ad. One pro blem is that dithering pro duces impure co lo rs. That deep-o cean, squid-ink purple co lo r is no t really the co lo r yo u sent; instead, it is a bunch of tiny co lo r co mbinatio ns. The image with the dithered co lo rs will never lo o k as go o d as it wo uld lo o k if the browser displayed the actual, real co lo r sent to it.

Part I I — Sat urday Morning Session 8

HTML Color Name

108

Sat urday Morning

Even tho ugh dithering often go es unno ticed, and clear pho to s appear o n yo ur Web page in spite of it, yo u need to stick with the browser- safe co lo rs when yo u co ntro l the co lo rs yo u pick fo r text, lo go s, and GIF images. The mo re dithering that takes place o n yo ur Web page, the mo re grainy the page appears. Even if the user do esn’t no tice it, a Web page with dithering shown next to the same no ndithered Web page is less appealing. Therefo re, when yo u cho o se co lo rs fo r yo ur site, o n the items that yo u create and add to yo ur page, yo u sho uld use o nly the 216 browser- safe co lo rs.

Not e

Browsers rarely dit her background colors. A background image can consume t he ent ire background of a Web sit e. Somet imes, a background may only be a single solid color. Dit hering would be apparent on such a large colored image; t herefore, most browsers subst it ut e a close browser- saf e color for t he nonbrowser- saf e color t hat you select .

Adding Color t o Text and Backgrounds All that theo ry is wo rthless if yo u do n’t see the practical use of co lo r co des. Actually, applying the co lo r co des is simple using HTML co de. Yo u can co lo r text, backgro unds, and o ther Web page elements using the hex co des. The o nly pro blem is lo cating the hex value of the co lo r yo u want, but again, mo st graphics pro grams display browser- safe co lo r palettes now with the hex equivalents. Suppo se yo u want to make the text in yo ur entire Web page the highest intensive, o r brightest, green po ssible. Yo u can add the text= attribute to the tag as fo llows:

As wit h many at t ribut es, you’ll of t en see t he hex value enclosed wit hin opt ional quot at ion marks. Not e

The text= attribute changes all the text o n the Web page. To change o nly specific text, use the color= attribute inside a tag. The fo llowing co de displays the middle wo rd ( which is red) in red:



This text has a red word inside it.

The tag overrides any tag in effect.

Session 8 — Working wit h Color in Text and Graphics

109

If yo u want to change the backgro und co lo r of yo ur Web page, use the

bgcolor= attribute inside the tag. To create a blue backgro und fo r yo ur Web page, o n to p of which all subsequent text will appear, yo u co de the tag as fo llows:

REVI EW 쐌 쐌 쐌 쐌

Only a limited number of co lo rs are available to all Web users. All Web co lo rs are fo rmed by co mbining red, green, and blue. Co lo r co des represent the 16 millio n co lo rs po ssible o n to day’s co mputers. Graphics pro grams often eliminate the need fo r yo u to lo cate a co lo r co de, but yo u still must specify the hex number when yo u write HTML co de, with 16 exceptio ns.

QUI Z YOURSELF 1.

What do es RGB stand fo r? ( See “ Co lo r Co des and Palettes.” )

2.

How many co lo rs can an 8- bit graphics card display at o ne time? ( See “ Browser- Safe Co lo rs.” )

3.

What is the hexadecimal equivalent to the fo llowing decimal co de: 204- 0- 51? ( See “ Specifying Browser- Safe Co lo rs.” )

4.

True o r False: Yo u can specify the 216 browser- safe co lo rs by name inside co mmand tags. ( See “ The Big 16 Co lo rs.” )

5.

What do es the browser do when it receives a no nbrowser-safe co lo r ( assuming the user’s graphics card is an 8-bit card and 256 co lo rs already appear o n the screen) ? ( See “ What Abo ut Tho se No nbrowser-Safe Co lo rs?” )

Part I I — Sat urday Morning Session 8

Tip

Generally, light backgrounds wit h darker t ext are more readable t han dark backgrounds wit h light er t ext . When in doubt , hardly anyt hing works bet t er t han t he st andard whit e Web page background.

SESSI ON

9 Text and Graphics Organizat ion

Session Checklist ✔ Align an image’s surro unding text ho rizo ntally and vertically o n the Web page ✔ Add spacing aro und images and create yo ur own ho rizo ntal rules ✔ Use graphics in headlines and place yo ur own images o n the backgro und of yo ur Web pages

I

n the past few sessio ns, yo u’ve seen how to place text and yo u’ve seen how to place graphics o n yo ur Web pages. This sessio n shows yo u how to co mbine text and graphics o n a Web page to pro duce effective presentatio ns of yo ur

Web co ntent.

Aligning I mages and Text Co nsider the fo llowing HTML co de. The Web page that co ntains this HTML co de displays text, a graphic image next, and then mo re text. The image, o bvio usly, must appear so mewhere in the middle of the text. The questio n is how will the text surro und the image? Will the text wrap aro und the image o r will the three

112

Sat urday Morning

areas — the two text areas and the image area — co mprise three distinct bands o n the Web page?



When a Web page combines text and graphics, the placement and alignment of the image determines where the image falls in relation to the surrounding text.

The image can fall any number of places in relation to the text. You have full control, through HTML, on the alignment of the image and text.

Figure 9- 1 shows the Web page that results fro m this HTML co de. As yo u can see, by default, the page co ntains three distinct bands: the first text, the image, and the final text. Only a small po rtio n of the text resides o n the same line as the figure.

Figure 9-1 By de fault, yo ur image s and te xt co nsume diffe re nt are as of the We b page.

Session 9 — Text and Graphics Organizat ion

113

The three separate areas appear because of the paragraph tags. If yo u remove the paragraph tags, things can get messy depending o n the browser. Witho ut the paragraph tags separating the figure fro m the surro unding text, the figure go es inline with the text and falls in the middle of the text witho ut any pro per line breaks.

Horizont al image alignment

The align=left and align=right attributes align the graphic image on the page. In addition, align=left and align=right affect how the image adjusts to surrounding text. That is, if you use the align=left or align=right attribute in the tag, subsequent text appears to the left or right of the image.

Not e

Remember t hat t he align=left and align=right at t ribut es det ermine how subsequent t ext appears, not t ext already displayed. Therefore, all previous t ext t hat appears in your HTML code displays on t he page in it s normal fashion. When t he t ag appears wit h an align=left or align=right at t ribut e, any remaining t ext on t hat page begins next t o t he image.

The fo llowing co de is identical to what yo u have seen in the previo us example except that the tag includes the align=right attribute. This means that the image, no t the text, aligns ho rizo ntally to the right side of the window and the text appears to the left of that image, as Figure 9- 2 shows. The text that fo llows the tag appears to the left of the image; this text is no t extremely lengthy, but as yo u can see fro m the figure, it appears o n the same ho rizo ntal area as the image and do es no t wait to appear after the image downlo ads. If yo u include the align=left attribute, the image will appear o n the window’s left side.



When a Web page combines text and graphics, the placement and alignment of the image determine where the image falls in relation to the surrounding text.

The image can fall any number of places in relation to the text. You have full control, through HTML, on the alignment of the image and text.



Part I I — Sat urday Morning Session 9

The tag supports the align= attribute that you learned about in Session 7.

114

Sat urday Morning

Figure 9-2 The align= attribute can de te rmine o n which side of the image the te xt appe ars.

Vert ical image alignment The text that appears to the left and right of the image in Figure 9- 2 lo o ks so mewhat strange because of a few reaso ns: The text is no t lo ng eno ugh to fill the area next to the image, and the text aligns at the to p of the image and do es no t rest o n the image’s baseline, no r is it centered to the image’s vertical area. The tag suppo rts three vertical alignment attributes with which yo u can better align the image to the text. Yo u can specify align=top ( the default) ,

align=middle, o r align=bottom to determine how the image aligns with the base of the text. Figure 9- 3 shows the result of all three vertical alignment attributes by showing an image aligned to the to p of the text’s baseline, the middle, and the bo tto m of the text’s baseline, acco rding to the fo llowing HTML co de:



Aligns with the align=top attribute.



Session 9 — Text and Graphics Organizat ion

115



Aligns with the align=middle attribute.

Aligns with the align=bottom attribute.

Part I I — Sat urday Morning Session 9

Figure 9-3 The image is aligne d with the te xt’s ve rtical base line in thre e diffe re nt ways.

Never

Never mix an align=left or align=right at t ribut e wit h one of t he vert ical alignment at t ribut es. HTML goes by only t he f inal align= at t ribut e t hat you specif y in an t ag list . I f you want t he image t o align on t he lef t or right side of t he t ext when you use one of t he vert ical alignment at t ribut es, ent er t he t ext before t he t ag. Ent er t he t ext af t er t he t ag if you want t he image t o appear t o t he lef t of t he t ext . The t ext precedes t he image placement , hence t he t ext appears t o t he right of t he image.

116

Sat urday Morning

Tip

The
t ag support s clear=left, clear=right, and clear=all at t ribut es t hat enable you t o st op or change t he alignment of an image f rom t hat point forward in t he t ext . I n ot her words, if you lef t - align an image so t hat t he subsequent t ext appears t o t he right of t he image, place t he
at t he point where you want t he t ext t o st op appearing next t o t he image. The t ext will st op appearing unt il t he ent ire lef t margin is clear of t he image. I f you specif y
, t he subsequent t ext in t he HTML page st ops appearing unt il t he right margin is f ree of t he image. The
t ag resumes t he display of t ext once bot h margins are clear of any images.

A special vertical alignment attribute, align=absmiddle, aligns an image in the very center of a ho rizo ntal line of o ther graphics and text. If yo u want an image to appear in the center of its surro unding images and text, instead of aligning the image o nly to text alo ne, use align=absmiddle.

Spacing I mages and Creat ing Horizont al Rules Several metho ds enable yo u to co ntro l exact spacing between images, and the next sectio n explains o ne of the easiest ways. In additio n, yo u can create yo ur own images that beco me ho rizo ntal rules to eliminate the bo ring gray ho rizo ntal rule that appears as a result of the tag that yo u learned abo ut in Sessio n 6.

I ncreasing image space The tag suppo rts the hspace= attribute that determines how much blank space, in pixels, an image co ntains o n its left and right sides. The vspace= attribute co ntro ls blank space at the to p and bo tto m of an image. The best way to learn these spacing attributes is to see them in actio n. Figure 9-4 shows the same image displayed three times with text appearing to the right of the image in each case. Listing 9- 1 co ntains the co de necessary to pro duce Figure 9- 4. The first image shows the text as it appears with no added spacing specified aro und the image. The seco nd image appears with ho rizo ntal space added to the image. The final image appears with vertical space at the to p and bo tto m of the image.

117

Session 9 — Text and Graphics Organizat ion

Part I I — Sat urday Morning Session 9

Figure 9-4 The e ffe ct of adding e xtra ho rizo ntal and ve rtical space aro und an image

Listing 9 -1 Incre asing the blank pixe l are a o n an image ’s side s

The image aligns with no extra space around the image. Notice the image appears to the left of the text due to the image’s align= attribute and no extra space appears on the side of the image. The image contains micro-spacing on its sides automatically.



Co ntinue d

118

Sat urday Morning

Listing 9 -1

Co ntinue d

The image aligns with extra space around the image. Notice the image appears to the left of the text due to the image’s align= attribute and extra space appears on the sides of the image. The image contains micro-spacing on its sides automatically.



The image aligns with no extra space around the image. Notice the image appears to the left of the text due to the image’s align= attribute and extra space appears on the top and bottom sides of the image. The image contains micro-spacing on its sides automatically and vspace= adds additional space on the top and bottom of the image.



Creat ing your own horizont al rules If yo u want to spruce up the gray ho rizo ntal rules that appear as a result of the

tag, yo u can create yo ur own. Feel free to create all the ho rizo ntal rules yo u want. The ho rizo ntal rule files sho uld be GIF images. The o nly thing yo u need to remember when using GIF files as ho rizo ntal rules is that yo u sho uld perfo rm an align=center co mmand befo re using yo ur own rule images so that text do es no t flow o ddly aro und a graphic ho rizo ntal rule that’s suppo sed to be separating text sectio ns.

Use graphic horizont al rules t hat repeat a simple pat t ern t o creat e separat ing rules t hat do not dist ract f rom t he t ext and, more import ant ly, t he images on your Web page. Tip

Just abo ut any graphics pro gram will create fancy ho rizo ntal rules with little effo rt o n yo ur part. So metimes, a simple co lo red line, three o r fo ur pixels wide, makes the perfect ho rizo ntal rule fo r a page. Altho ugh the standard ho rizo ntal rule that appears because of the tag wo rks well fo r just abo ut any page of any design, unique rules can help distinguish yo ur Web page.

Session 9 — Text and Graphics Organizat ion

119

Using Headline and Background I mages Two additional uses of graphics are their placement in headlines ( which are covered in Session 5) , such as banner ads, and as background images produced from an enlarged version of a graphic image. The next two sections discuss these two additional uses.

When yo u use an image in a headline, as yo u might do when placing a banner advertisement at the to p of yo ur Web page, be sure to enclo se the image inside the page’s tag. Co nsider the fo llowing co de:



A headline image can appear bet ween any of t he headline t ags, t hrough . The headline t ags are explained in Session 5 . Not e

Figure 9- 5 shows the result of placing an image inside headline tags. Altho ugh the headline tags are no t required fo r the image to appear befo re the text, since yo u can easily use an tag inside the Web page bo dy to display an image befo re text begins, the headlines enable yo u to easily maintain the headline placement later. Yo u can add additio nal headline levels o r change the headline level of the image witho ut having to restructure the bo dy of yo ur page.

Background images As yo u learned in Sessio n 5, the bgcolor= attribute of the tag co lo rizes yo ur Web page backgro und. Yo u are no t limited to single co lo rs that the tag provides. Yo u can place yo ur own image o n the backgro und of yo ur Web pages. Use the background= attribute inside the tag using this fo rmat:

Part I I — Sat urday Morning Session 9

Headline graphics

120

Sat urday Morning

Figure 9-5 Image s wo rk we ll inside he adline s.

No t every image wo rks well as a backgro und fo r yo ur Web page. Keep the fo llowing in mind:

쐌 Do no t make yo ur backgro und image stro nger than yo ur Web page. If the backgro und includes rich co lo rs and crisp lines, the text and graphics that yo u intend to place over the image will be less no ticeable. The backgro und is exactly that: a backgro und.

쐌 A light backgro und is almo st always preferable to a dark backgro und. Several exceptio ns to this exist, however. Black actually makes a go o d backgro und fo r so me text. Yo u will have to experiment.

쐌 Yo u can create yo ur own backgro und images. All yo u need to do , if yo u create a backgro und that co ntinually repeats a pattern, is create o nly the small, single instance of the pattern, and the browser will repeat that image until the Web page backgro und is full.

쐌 Even tho ugh the image repeats, the browser o nly has to lo ad the image o ne time. Therefo re, a backgro und takes o nly as lo ng to lo ad as the single pattern image takes to lo ad.

쐌 When yo u create yo ur backgro und’s pattern, make sure that the pattern has no bo rder.

쐌 Your background image patterns can be large, but make sure the pattern fits well within a small browser. Then, when the image repeats, even inside the small browser, at least two full images will appear in the browser background.

Session 9 — Text and Graphics Organizat ion

121

Figure 9- 6 shows an effective backgro und image that is rather different fro m the typical repeated pattern image. The image repeats o nly o nce, but the do uble image enclo ses the rest of the page fairly effectively. ( On large mo nito rs powered by high- reso lutio n graphic adapters, the image repeats three o r mo re times.)

Part I I — Sat urday Morning Session 9

Figure 9-6 Whe n a backgro und image re pe ats, the lo ad time take s o nly as lo ng as the single image take s to lo ad.

REVI EW 쐌 Yo u can align yo ur images pro perly with text and with o ther images o n yo ur Web page.

쐌 Extra space aro und so me graphics often set apart the image fro m o ther elements o n yo ur Web page.

쐌 Yo u can create yo ur own ho rizo ntal rule images with just abo ut any graphics pro gram when the no rmal gray ho rizo ntal rules are no t eno ugh.

122

Sat urday Morning

쐌 Headline graphics, such as banner ads, can be enclo sed inside tags. 쐌 A backgro und image repeats until yo ur entire Web page backgro und is filled.

QUI Z YOURSELF 1.

Which attributes align graphics with text o n yo ur Web page? ( See “Aligning Images and Text.” )

2.

What happens if yo u mix vertical and ho rizo ntal alignment attributes? ( See “ Vertical Image Alignment.” )

3.

How can yo u vertically center an image o n an area of the Web page that co ntains o ther images and text? ( See “ Vertical Image Alignment.” )

4.

Which attributes increase the ho rizo ntal and vertical spacing of blanks aro und yo ur Web page? ( See “ Increasing Image Space.” )

5.

True o r False: A light backgro und typically, but no t always, wo rks best with light text in the fo regro und. ( See “ Backgro und Images.” )

SESSI ON

10 Hyperlinks Connect t he Web

Session Checklist ✔ Master URL basics ✔ Specify hyperlinks to o ther Web pages ✔ Insert thumbnail pictures in hyperlinks ✔ Specify hyperlinks within yo ur own Web pages with bo o kmarks ✔ Distinguish between base URLs and relative URLs

I

n this sessio n, yo u learn how to create the links, also called hyperlinks, which enable yo ur Web page users to jump to and fro m yo ur page to o ther pages of info rmatio n o n the Web. Yo u also learn how to create bo o kmarks that allow

users to jump to and fro m areas of interest o n the same Web page. It is the hyperlink that made HTML such a required fo rmat fo r Web pages. Hyperlinks are simple because of the ancho r tag, , that makes the links po ssible.

URL Basics As yo u know, a URL ( Unifo rm Reso urce Lo cato r) is the Web address of a specific do cument. URLs no t o nly po int to Web pages, they also might po int to o ther items

124

Sat urday Morning

such as graphic images. Therefo re, if a Web page co ntains a JPEG, and yo u know the name of that JPEG, yo u can type the URL fo r that page fo llowed by /item.jpeg/ and yo ur browser will display that figure inside yo ur browser window.

Never leave a space bet ween t he t ag and t he closing anchor t ag. Ot herwise, a small blank space, called a t ick, might appear on your Web page bet ween t he image and t he next it em on t he page.

Never

The standard fo rmat of URLs is:

protocol://site address/directory/filename Mo st Web pages co ntain a ho me page, named index.html, which appears by default when a browser po ints to that address. Therefo re, in mo st cases, the fo llowing URLs are equivalent:

http://www.goodsite.com/index.html/ http://www.goodsite.com/ The pro to co l is often http that represents a Web page, but the pro to co l can also be any of the pro to co ls listed in Table 10- 1.

Table 1 0 -1 Pro to co l Value s

Protocol

De scription

file

A file o n the lo cal co mputer

ftp

File transfer pro to co l fo r file downlo ads

http

Transfer pro to co l fo r Web pages

mailto

A Simple Mail Transfer Pro to co l ( also known as SMTP) window fo r sending e- mail

nntp

A specific newsgro up article

news

A newsgro up

By far, the mo st co mmo n pro to co l used is the http pro to co l that represents o ther Web pages. Many of the pro to co ls require special handling.

Session 1 0 — Hyperlinks Connect t he Web

125

I n t he next session, you learn how t o use t he mailto prot ocol t o embed mail links inside your page. Cross-Ref

Specifying Hyperlink Tags The primary metho d fo r representing a hyperlink is to use the tag with the

href= attribute. The tag includes the URL fo r the hyperlinked Web page. The a in the tag means ancho r. A hyperlink’s end po ints are known as ancho rs, hence the tag. The tag also requires an end tag, . Here is the basic fo rmat of the

tag: hot spot text The reference inside the tag represents the hyperlink, also known as the ho t spo t ( o r the ancho r) , that the browser jumps to when the user clicks o n the

ho t spo t ( o r hyperlink) text. The fo rmat’s ho t spo t te xt represents the text that appears in yo ur Web page that the user clicks o n to move to that new ancho r. The fo llowing co mmand directs the user to Micro soft’s ho me page:

Check for a new Windows release When the browser gets to this co de, the browser displays the text, Check for a new Windows release, and the browser turns that text into a hyperlink by typically underlining that text. When the user po ints to that hyperlink, the user’s mo use po inter often turns into a po inting hand to indicate that the text represents a link and is no t simply regular underlined text.

Never underline regular, nonhyperlinked t ext because users get conf used when some underlined t ext indicat es a hyperlink and ot her underlined t ext does not . Never

Part I I — Sat urday Morning Session 1 0

Never

Never use t he file prot ocol t o link t o a f ile on your own comput er unless you use a reliable and fast server t hat is up 2 4 / 7 ( 2 4 hours a day, 7 days a week) . I f , for example, you link t o a f ile on your home comput er, you cannot ensure t hat your comput er will be logged ont o t he I nt ernet all t he t ime, and several users at once will slow t he syst em and prot ocol t o a halt .

126

Sat urday Morning

Not e

Browsers dif f er in how t hey display hyperlinks. I n addit ion, t he user might t urn of f t he underlining of hyperlinks. For example, in Windows 9 x running I nt ernet Explorer 4 and higher, users can, at t he operat ing syst em level, display hyperlinks t hat appear in a new color but not underlined unt il t he user point s t o t he hyperlink, at which t ime Windows underlines t he link. Using st yle sheet s ( see Session 2 0 ) enables you t o t urn of f t he default underlining beneat h links complet ely.

The lo catio n of the tag inside surro unding text determines exactly where the hyperlink falls. In o ther wo rds, o nly the text indicated as the ho t spo t text is the actual hyperlink. Figure 10- 1 shows how each of the fo llowing three similar ho t spo ts differ:



Your version of Windows determines whether or not you have Internet Connection Sharing.
Check for a new Windows release



Your version of Windows determines whether or not you have Internet Connection Sharing.
Check for a new Windows release.



Your version of Windows determines whether or not you have Internet Connection Sharing.
Check for a new Windows release. In the first sectio n in Figure 10- 1, the hyperlink is “ Check fo r a new Windows release” because this phrase is indicated as the ho t spo t text in the first example above. The seco nd hyperlink is “ Windows,” and the third hyperlink is “ Windows

Session 1 0 — Hyperlinks Connect t he Web

127

release,” since these paragraphs serve as the ho t spo ts in the seco nd and third examples above.

Part I I — Sat urday Morning Session 1 0

Figure 10-1 The ho t spo t te xt de te rmine s what the use r clicks.

Not e

Many browsers display an unclicked link ( called an unvisit ed link) in one color, a clicked link ( called a visit ed link) in anot her, and a link- in- progress ( a link you’ve clicked but for which t he page has not opened yet , called an act ive link) in a t hird color. These colors inform t he user of which links have been visit ed.

Text is no t the o nly item yo u can place inside the ancho r tags. Yo u can also place graphic images. The sectio n o n thumbnail pictures discusses the use of images as hyperlinks.

Never

Never omit t he closing t ag even t hough some HTML programmers do. Talk is under way bet ween some browser makers t o require t he end t ag, alt hough t o do so will make many exist ing Web pages t hat don’t specif y t he t ag work improperly.

128

Sat urday Morning

Cont rolling hyperlink colors As mentio ned in the previo us sectio n, Web page hyperlinks change co lo rs to indicate whether o r no t the user has selected tho se links yet. Yo u have the o ptio n of leaving the cho ice of link co lo rs up to the user’s browser o r specifying the hyperlink co lo rs yo urself. ( The co lo rs that change as the user visits links are called link re nde rings. )

The fo llowing attributes specify co lo rs fo r the ancho r’s links:

link=

Determines the co lo r of the unvisited hyperlink

alink=

Determines the co lo r of the active link, the link that the user has clicked but who se page has no t yet o pened

vlink=

Determines the co lo r of the visited link, a link that the current user has visited

Suppo se yo ur user visits yo ur Web site fo r the first time. All the hyperlinks will be o ne co lo r, the link= attribute’s co lo r. When the user clicks a link, that link changes to the alink= attribute’s co lo r until the link lo ads. Then, when the user returns to yo ur page, the link appears in the vlink= attribute’s co lo r. If yo u have no t specified o ne o r mo re of the co lo rs, the user’s browser will determine the links’ co lo rs. The co lo r yo u specify can be a hexadecimal co lo r co de o r o ne of the 16 co lo r values suppo rted by name as explained in Sessio n 8.

Never

Never st ray t oo far f rom t he browser’s default hyperlink color scheme or you will conf use t he users. Some Web sit es t hat have ext remely dif f erent t hemes, such as a science f ict ion- based Web sit e, might work well wit h a new set of hyperlink colors, but generally, t he browser’s default colors are t he ones t hat you should st ick wit h.

Specifying hyperlink t it les Use the title= ( o r title) attribute with the and tags when yo u want a po p- up descriptio n, called a to o l tip, to appear when the user po ints the mo use to the hyperlink. Witho ut a title, the to o l tip will be the URL that the link references. Here is an example of the title= attribute:

To mail letters Figure 10- 2 shows such a title at a hyperlink. After a mo ment, the hovering mo use curso r pro duces the title text.

Session 1 0 — Hyperlinks Connect t he Web

129

Part I I — Sat urday Morning Session 1 0

Figure 10-2 The addre ss info rmatio n to o l tip appe ars whe n the mo use po ints to the hype rlink.

Opening a new window When the user clicks o n the hyperlinks yo u’ve seen so far in this sessio n, the user’s browser window changes to the page of the new link. If, instead, yo u want to o pen a new window when the user clicks yo ur hyperlink’s ancho r tag, use the

target=”_blank” attribute. The o riginal window, such as yo ur ho me page, will remain o pen, and the new, seco nd window will co ntain the hyperlinked Web page. The fo llowing line o pens the image in a new window:

No rmally, the target= attribute suppo rts the use of frames that yo u’ll learn abo ut in Sessio n 18, but the target=”_blank” attribute wo rks with o r witho ut frames and provides a way fo r yo u to o pen a new window to display the target of the hyperlink. The new window po ps up o n to p of the user’s window so that bo th co ntain info rmatio n.

130

Sat urday Morning

Specifying t he t ab order of hyperlinks The ancho r tag suppo rts the tabindex= attribute, which determines the tab o rde r of the links o n the Web page. Suppo se a Web page co ntains 20 hyperlinks. The user can press the Tab key to highlight each link in successio n and press Enter when the link that the user wants to see is highlighted. This way, the user can view links with o nly a keybo ard instead of using the mo use. The value that fo llows the

tabindex= attribute must be a po sitive number, beginning at 1, that determines the o rder of the links highlighted as the user presses Enter. No two numbers can be the same thro ugho ut a page’s links. The fo llowing statement ensures that the link is the first thing the user tabs to :

Tip

WebTV I nt ernet users of t en use keyboard commands inst ead of mouse- based commands. I n addit ion, when you add t he keyword selected t o one of your page’s links, t hat link will be t he default link when t he WebTV user f irst views your Web page.

The pro blem with the tabindex= attribute is that tabindex= is no t suppo rted by all browsers. The tabindex= attribute is a new feature of HTML 4.01. No pro blem o ccurs if the user’s browser fails to reco gnize the tabindex= attribute. If the browser do es no t reco gnize the attribute, the user’s tab o rder will be the default tab o rder generated by the browser.

Thumbnail Pict ures As no ted earlier, yo u can place graphic images inside yo u ancho r tags. When yo u enclo se an image instead of text between the and tags, the image beco mes the ho t spo t that pro duces the hyperlink when the user clicks the image. Typically, the o nly hint that the image is a hyperlink is the co ntext of the image o n the page ( such as a po inting finger that indicates a co ntinued tho ught) and the curso r that changes to the po inting hand shape when the user hovers the mo use po inter over the image.

Not e

I f t he hyperlink image has a border set t o a value great er t han one pixel, t he border color will be t he same color as t he link= at t ribut e color in ot her hyperlinks. Such a border adds anot her clue t hat t he image act s as a hyperlink.

131

Session 1 0 — Hyperlinks Connect t he Web

A thumbnail image is a small, fast- lo ading versio n of a larger picture. Yo u can place a thumbnail image o n a Web page with any image tab and then make the thumbnail a link to the larger versio n. The fo llowing co de turns a small thumbnail image into a link to a larger image:

Figure 10- 3 shows what happens when the user clicks a thumbnail image o n a Web page that uses the target=”_blank” attribute: The hyperlink pro duces the full- sized image in a new window. By o pening the larger image in a separate window, the user can go ahead and visit o ther links while the image lo ads in its own window.

Thumbnail

Larger image window

Figure 10-3 The thumbnail give s the use r a pre vie w of the large r image.

Part I I — Sat urday Morning Session 1 0



132

Sat urday Morning

Tip

Always specif y t he f ile size if a hyperlink is going t o load an ext remely large graphic image or Web page. You might want t o add a t ool t ip or include t ext below t he image t hat specif ies t he f ile size, such as Beautiful car (140K).

I nsert ing Bookmarks t o Links on t he Same Page Bo o kmarks, also known as marke rs o r fragme nts, are hyperlinks to areas o n the

same page instead of a different Web page. One of the mo st useful places to insert a bo o kmark is at the bo tto m of a lo ng Web page. With the bo o kmark at the bo tto m of the page, the so urce wo uld, when clicked, return the user to the to p of the page ( the so urce ) . Bo o kmarks, unlike regular links, never send the user to a different page, o nly to a destinatio n o n the current Web page. The bo o kmarks eliminate the need fo r scro lling back to the to p of a lo ng Web page. Yo u might include a bo o kmark that reads, Go to Top of Page, and when the user clicks this bo o kmark, the browser jumps to the to p of the page, eliminating the user’s need to scro ll up a lengthy page. Yo u must use two ancho r tags to create a bo o kmark link — the bo o kmark’s so urce tag and the bo o kmark’s destinatio n tag. The destinatio n tag uses the name= attribute to determine the hyperlink’s destinatio n. In such a tag, yo u co mpletely replace the href= attribute with the name= attribute, as in the fo llowing example that names the current spo t, the to p of the Web page, to p:

Later, o ne o r mo re regular links, the destinatio n links, might appear so that when the user clicks the link, the browser scro lls back to the to p of the page. If yo u type text between a bo o kmark’s destinatio n ancho r tag, the text appears o n the screen but will no t be underlined o r co lo red as it wo uld be if the tag indicated a hyperlink. Therefo re, the fo llowing creates a destinatio n bo o kmark named PeachPit and displays the text Peaches o n the screen:

Peaches The reaso n that the bo o kmark is no t indicated by co lo ring o r underlining is that the bo o kmark is simply a tag that defines the lo catio n of a bo o kmarked link. This lo catio n, peachPit, is where the browser will jump to when the user clicks a bo o kmark so urce link that sends the browser to this destinatio n.

Session 1 0 — Hyperlinks Connect t he Web

133

Altho ugh yo u can co mbine name= and href= in the same tag, do ing so can co nfuse yo u later when yo u maintain the page. Yo u can mo re easily maintain two separate tags fo r the two different kinds of links. Thro ugho ut yo ur Web page, o ne o r mo re ancho r tags, the destinatio n tags, can reference that so urce bo o kmark. When the user clicks o ne of these references, the Web browser jumps to the bo o kmark specified. To set up a link that directs the browser to the bo o kmark, create an ancho r tag using the no rmal href= attribute The fo llowing line creates a po inter to the bo o kmark named to p:

Go to top of page Altho ugh this destinatio n link lo o ks like a regular hyperlink, with the appro priate co lo r and link underline, the user’s screen will no t lo ad a new Web page; instead, it will jump to the to p of the current page where yo u’ve specified a bo o kmark such as the fo llowing:

Never

Never begin a hyperlink ’s t ext wit h t he phrase, “ Click here, ” as in “ Click here t o see a pict ure. ” Such links are considered redundant at best and show a lack of prof essionalism in a sit e ’s creat ion. You can assume t hat your users underst and simple Web operat ions, such as hyperlinks. Maint ain more prof essional links, such as “ Mary’s phot o, ” inst ead of wordy ones, such as “ Click here t o see Mary’s phot o. ”

Absolut e URLs versus Relat ive URLs No t every hyperlink requires a co mplete Web address. HTML suppo rts bo th base URLs ( also called abso lute URLs, tho se URLs with the co mplete pathname, such as

http://www.myWeb.com/photos.html/) and re lative URLs ( such as photos.html) . The difference is that yo u can specify a relative URL as lo ng as the link resides in the same directo ry as the current Web page. Suppo se yo ur Web page resides at http://www.myWeb.com/ and is named

index.html, which implies that the full path to yo ur Web page is this: http://www.myWeb.com/index.html/

Part I I — Sat urday Morning Session 1 0

but insert a po und sign ( #) befo re the bo o kmark’s name.

134

Sat urday Morning

As lo ng as photos.html also resides in the same directo ry as index.html, the fo llowing references are exactly the same:

http://www.myWeb.com/photos.html and

photos.html Relative links really do no t lo ad any quicker than abso lute links, but relative links do offer the advantage of being easier to move. If yo ur base directo ry changes, yo u wo n’t have to change any link that is relative based o n yo ur directo ry. Yo u’ll o nly need to change the abso lute URLs that refer to the o ld path.

Not e

All t he st andard direct ly t raversal codes work in relat ive URLs, such as t he single dot t hat means current direct ory and t he double dot t hat means t he parent direct ory. The following t ag cont ains a relat ive URL t hat begins t wo direct ories higher t han t he current one:

REVI EW 쐌 URLs include an item’s pro to co l, which is often http. 쐌 The and end tags specify the ancho r po int of a hyperlink. 쐌 Only rarely will yo u want to change a hyperlink’s co lo r scheme. It’s better to stick with the browser’s default co lo rs.

쐌 Yo ur page’s hyperlinks can replace the current browser window with a new page o r o pen a new window with the linked page, depending o n the presence of the target=_blank attribute.

쐌 Thumbnail images are go o d uses of hyperlinks that link to larger images. 쐌 Altho ugh yo u can specify the tab o rder of the links o n a Web page, many browsers do no t suppo rt the tab o rder that yo u request.

쐌 Relative URLs are quicker to co de than full, abso lute URLs, as well as being easier to maintain.

Session 1 0 — Hyperlinks Connect t he Web

135

QUI Z YOURSELF 1.

Which attribute specifies the hyperlink’s URL? ( See “ Specifying Hyperlink Tags.” )

2.

Why is it better no t to use underlines when specifying no nhyperlink text? ( See “ Specifying Hyperlink Tags.” ) What is the difference between a Web page’s unvisited hyperlink, an active hyperlink, and a visited hyperlink? ( See “ Co ntro lling Hyperlink Co lo rs.” )

4.

What is the difference between a bo o kmark and a hyperlink? ( See “ Inserting Bo o kmarks to Links o n the Same Page.” )

5.

What directo ry do es a relative URL use fo r its base directo ry? ( See “Abso lute URLs versus Relative URLs.” )

Part I I — Sat urday Morning Session 1 0

3.

SESSI ON

11 E-mail Links, Comment s, and Special Charact ers

Session Checklist ✔

Make it easy for users to send you e-mail with e-mail hyperlinks ✔ Add ample comments throughout your HTML code ✔ Use character codes when you want to display special characters on your Web page

n the previous session, you learned how to set up hyperlinks that jump from page to page and between bookmarks of a current page. One of the protocols you read about was the mailto protocol. In this session, you learn how to use the mailto protocol to set up e-mail links in your Web page, enabling users to send e-mail to you easily. This session then branches off into two new topics. It shows you how to add as many comments as is reasonable to your HTML code to make maintenance easier, as well as how to use character codes to display special characters on your Web page.

I

140

Sat urday Aft ernoon

Creat ing E-mail Links When you offer your users a chance to give you feedback, you can supply them with a link that opens their default mail system’s new e-mail message window. If you choose not to provide such a simple link, your users probably won’t go through the trouble of contacting you. Consider the Web pages you visit. Are you more likely to send e-mail to someone who supplies only their e-mail address or send e-mail to someone who adds an e-mail link right on the page you are visiting? Without the link, you must type the e-mail address (assuming it appears on the page) or, at best, copy and paste the address into your e-mail program that you must start yourself. An e-mail link both starts the user’s default e-mail program and opens a new message window to make completing and sending the e-mail quick and easy. Uses for e-mail links

E-mail links on your site are useful for many reasons, including: 쐌 Getting feedback about your site’s usefulness 쐌 Receiving requests for different information on the site 쐌 Contacting a customer service department 쐌 Providing an online employee directory

Specifying e-mail links

To specify an e-mail link, simply use the mailto protocol in place of the typical http protocol. The following line adds an e-mail link to a Web page: Customer Service

The e-mail anchor looks and acts just like other kinds of hyperlinks. The link appears underlined and in the browser’s default link color. (You can override the colors using the link color attributes you learned in the previous session.) When the user clicks the e-mail link, a mail window, such as the one in Figure 11-1, opens. The user can type a subject, a message, and then click Send to get the message to the address you specified in the link.

Session 1 1 — E-mail Links, Comment s, and Special Charact ers

141

The o pe ning of a mail window with a click make s it e asy fo r We b use rs to se nd yo u e -mail.

Not e

Ot her mailto prot ocol at t ribut es are somet imes available, such as subject= t hat f ills in t he subject for you, but most browsers do not support t hese opt ions because no indust ry st andard has been agreed upon. Some day, ext ra mailto at t ribut es might become st andard, but it will t ake a while for t he majorit y of users t o updat e t heir browsers. I t is bet t er t o let your users f ill in t he subject and message body t han t o at t empt t o use some of t hese unusual mailto prot ocol at t ribut es.

Problems rarely, but might, occur if the user does not have an e-mail program set up within the browser’s options. If no e-mail program is set up, the selected mailto hyperlink will produce an error message within the user’s browser as a result of the Web page link. Such an error happens so rarely that you can safely ignore the potential problem; most users have e-mail accounts readily set up for use.

Part I I I — Sat urday Af t ernoon Session 1 1

Figure 11-1

142

Sat urday Aft ernoon

Adding Comment s t o HTML Code As you write more HTML code, your Web pages will become larger, making the maintenance of your HTML complicated. One of the best favors you can do for yourself is to add ample comments as you write HTML code. Anot her reason for learning how t o code comment s is t hat more advanced Web page element s, such as JavaScript , require t he use of comment s. Tip

A comment is a note that you include inside your HTML code. The browser completely ignores comments! Your comment can span 30 lines of HTML code, and the browser gracefully ignores all of the comment’s text. Comments are not browser commands. They are notes for the programmer that explain the HTML code. Some uses for comments are: 쐌 Displaying a list of changes made to the Web page since its original publication to the site, along with the HTML programmers who made those changes. 쐌 Explaining sections of HTML code; when some code or a graphic image name seems to be cryptic, a well-placed comment can explain what the HTML programmer had in mind. 쐌 Executing JavaScript code that can activate your site and make your Web page interactive. 쐌 Reminding you to add certain features that you may have omitted from the early versions of the site. 쐌 Explaining why you used a certain tag when another, more recent tag, may be more acceptable. For example, you may want to explain why you used individual tags and no style sheets if you know your audience generally uses older browsers. 쐌 Commenting out a section of HTML code that you want to hide from the browser, perhaps to test another area of the Web page or to eliminate a new feature for a specified period, at which time you remove the comment. 쐌 Inserting a comment to inform your clients where certain data goes when the client is ready, if you create Web pages for others to use. For example, a comment can inform a client where a new price goes when the price becomes available.

Session 1 1 — E-mail Links, Comment s, and Special Charact ers

143

If you’ve ever written computer programs in a non-HTML programming language, you’ve seen comments before. Comments, like tags, are enclosed by . The HTML code continues immediately after the comment. Consider the following code:

Often, the names of graphic files are cryptic, but the comment can help clarify the image’s purpose. Doing so at the comment, so close to the image, will keep the HTML programmer from having to maintain a table of image descriptions and filenames displayed on the page. Comments make great holding areas for contact information. The following comment at the top of the HTML code tells subsequent HTML coders where to locate the original page authors:

144

Sat urday Aft ernoon

I nsert ing Special Charact ers on Web Pages When you must display special characters, your browser might interpret those characters as HTML code instead of displayable characters. In addition, some special characters don’t appear on your keyboard. To display special characters, you must use character codes that represent these symbols. For example, suppose you create a Web site that explains how to write HTML code. On such a site, it would be reasonable to assume that the following text may need to appear on the site: Use the paragraph tag,

, to insert a blank line between paragraphs.

The problem with such text is that if you embed this inside HTML code, you’ll get results that look something like that in Figure 11-2. The

, a special character, does not show up because the browser thinks the

is a tag. The browser, therefore, performs the tag’s purpose instead of simply displaying the tag.

Figure 11-2 The browse r tho ught that a tag was e mbe dde d in the te xt.

Not only might you want to display tags themselves on your Web page, but you also may want to display special characters that do not appear on the typical computer keyboard, such as the copyright or foreign currency symbols. HTML supports numerous codes that you can use to represent special characters on your Web page. Table 11-1 lists several of the special characters and the corresponding codes. Although the table is lengthy, spend the rest of this session looking

Session 1 1 — E-mail Links, Comment s, and Special Charact ers

145

through the characters so you know what is available for you to use. To produce the line that included the paragraph tag in the previous example, you could use the greater-than and less-than character codes on the screen like this: Use the paragraph tag,

, to add a blank line between paragraphs.

Many of the character codes have an equivalent characte r e ntity (also shown in Table 11-1) that enables you to use a more memorable mnemonic for some of the codes. For example, you can specify è or è when you want to display the small e with a grave accent, è. Table 1 1 -1

Characte r

Code

Characte r Entity

“

"

"

#

#

$

$

%

%

&

&

‘

'

&

&

&




í

¡

¡

¢

¢

¢

£

£

£

¤

¤

¥

¥

¥

쩴

¦

&brkbar;

Part I I I — Sat urday Af t ernoon Session 1 1

Spe cial Characte r Co de s

Co ntinue d

146

Sat urday Aft ernoon

Table 1 1 -1

Co ntinue d

Characte r

Code

Characte r Entity

§

§

§

¨

¨

¨

©

©

©

ª

ª

ª

«

«

«

¬

¬

¬

®

®

®

¯

¯

&hibar;

°

°

°

±

±

±

2

²

²

3

&$179;

³

´

´

´

>

µ

µ

¶

¶

¶

·

·

&midot;

¸

¸

¸

1

¹

¹

º

º

º

»

»

»

⁄4

¼

¼

⁄2

½

½

3

⁄4

¾

¾

¿

¿

¿

1

1

Session 1 1 — E-mail Links, Comment s, and Special Charact ers

Code

Characte r Entity

À

À

À

Á

Á

Á

Â

Â

Â

Ã

Ã

Ã

Ä

Ä

Ä

Å

Å

Å

Æ

Æ

Æ

Ç

Ç

Ç

È

È

È

É

É

É

Ê

Ê

Ê

Ë

Ë

Ë

Ì

Ì

Ì

Í

Í

Í

Î

Î

Î

Ï

Ï

Ï

F

Ð

Ð

Ñ

Ñ

Ñ

Ò

Ò

Ò

Ó

Ó

Ó

Ô

Ô

Ô

Õ

Õ

Õ

Ö

Ö

Ö

×

×

Ø

Ø

Part I I I — Sat urday Af t ernoon Session 1 1

Characte r

147

Ø Co ntinue d

148

Sat urday Aft ernoon

Table 1 1 -1

Co ntinue d

Characte r

Code

Characte r Entity

Ù

Ù

Ù

Ú

Ú

Ú

Û

Û

Û

Ü

Ü

Ü

Y´

Ý

Ý

T

Þ

Þ

ß

ß

ß

à

à

à

á

á

á

â

â

â

ã

ã

ã

ä

ä

&aauml;

å

å

å

æ

æ

æ

ç

ç

ç

è

è

è

é

é

í

ê

ê

î

ë

ë

&emul;

ì

ì

ì

í

í

í

î

î

î

ï

ï

ï

D

ð

ð

Session 1 1 — E-mail Links, Comment s, and Special Charact ers

Code

Characte r Entity

ñ

ñ

ñ

ò

ò

ò

ó

ó

ó

ô

ô

ô

õ

õ

õ

ö

ö

ö

÷

÷

ø

ø

ø

ù

ù

ù

ú

ú

ú

û

û

û

ü

ü

ü

y´

ý

ý

p

þ

þ

ÿ

ÿ

ÿ

One code not included in the table is   that creates a nonbreaking space. If you embed   between two words, for example, the browser will not break a line between them but will keep the two words together. Most browsers provide support for most of the characters in Table 11-1. If you use the special characters, test your page in several of the more popular browsers to make sure that the codes work as you expect. (Such advice is true of all pages; always view your Web pages in as many browsers and in as many different resolution levels as possible to ensure that your Web page retains the look you prefer.)

Tip

When you use one of t he special charact ers, a comment is necessary t o inform ot her HTML coders, as well as yourself , exact ly what t he charact er code represent s. Also, some, but not all, of t he special charact ers follow t he same charact er- code pat t ern as t he ASCI I t able.

Part I I I — Sat urday Af t ernoon Session 1 1

Characte r

149

150

Sat urday Aft ernoon

REVI EW 쐌 When clicked, e-mail links open up a mail window in your Web site that enables users to write to you easily. 쐌 An e-mail hyperlink includes the standard underlining and hyperlink colors. 쐌 Comments in your HTML code, such as a note to remind yourself to add a feature later on, make Web site maintenance much simpler. 쐌 Use character codes when you cannot produce special characters from your keyboard or when a special character, such as the less-than sign, might be interpreted as a command tag.

QUI Z YOURSELF 1.

Name three reasons to provide an e-mail hyperlink on your site. (See “Uses for E-mail Links.”)

2.

What is the protocol value that opens the user’s default e-mail’s new message window? (See “Creating E-mail Links.”)

3.

Why does the browser ignore comments? (See “Adding Comments to HTML Code.”)

4.

Why should you put contact information in your HTML code comments? (See “Adding Comments to HTML Code.”)

5.

Why must you use special character codes to display special characters on your Web page? (See “Inserting Special Characters on Web Pages.”)

SESSI ON

12 Tables Organize Dat a

Session Checklist ✔ Learn the ways that tables can help yo u o rganize data o n yo ur Web site ✔ Learn how to prepare a spreadsheet- like table that yo u can use as a basis fo r co mplex tables ✔ Improve the lo o k of yo ur tables by adding bo rders, aligning data, and spanning cells acro ss co lumns and rows ✔ Use so me advanced page layo ut tricks to make mo re powerful tables

o me of the mo st interesting Web sites wo rk well because they are built o n

S

tables. Mo st HTML tuto rials begin teaching HTML tables by making spreadsheet analo gies. The spreadsheet makeup of cells and rows is so familiar

that such an analo gy makes a go o d place to start. Nevertheless, tables do n’t sto p with tabular data. Tables can ho ld any kind of data, no t just text. Unfo rtunately, a weekend crash co urse do es no t provide eno ugh time to make yo u an official Table Guru, but yo u will, befo re this sessio n ends, ho ld many table tips in yo ur bag of tricks that yo u will ho ne as yo ur use of tables grows.

152

Sat urday Aft ernoon

How Tables Help You Organize Dat a Tables help yo u o rganize data o n yo ur Web site. So me of the ways yo u can use tables are to :

쐌 Present newsletter info rmatio n in co lumns, as shown in Figure 12- 1. 쐌 Display tabular info rmatio n, in a spreadsheet- like manner, such as price lists and invento ries.

쐌 Add bo rders aro und text and graphic images in a unifo rm manner. 쐌 Fo rmat yo ur entire Web page layo ut, including the placement of graphics, text, banners, sidebars, headers, and fo o ters.

Figure 12-1 Table s he lp o rganize the data in ne wsle tte r We b site s.

As yo u can see, tables are no t limited to simple spreadsheet- like fo rmatting, even tho ugh the best place to begin learning abo ut tables is to see them in use with such data. The rest of this sessio n develo ps such a spreadsheet- like table so yo u can learn the fundamentals. Yo u then can apply tho se fundamentals to o ther kinds of tables.

Session 1 2 — Tables Organize Dat a

153

Preparing Columnar Dat a Tables Tables co nsist of rows and co lumns. A useful table might co ntain o nly o ne row and three co lumns. The purpo se of the table determines how elabo rate the table must beco me. Tables can be nested, which means that they can reside inside o ther tables. Therefo re, a single cell might co ntain an entire table, and o ne of the inside table cells might ho ld yet ano ther table.

Never

Tables require several different kinds of table- related co mmand tags. Yo u canno t type table text directly into HTML as rows and co lumns of info rmatio n because browsers igno re all extra spaces and tabs in yo ur HTML so urce.

Creat ing t ables All tables begin with the