B.9 Graphics and Images


B.9.1 Creating an Inline Image

To include an image inline ( next to text) or otherwise , use the form:

<IMG SRC="ImageName">

Graphic files are usually .gif or .jpg. .jpg appears as . jpeg in Windows environments. While the .jpg extension can be used on Windows, most UNIX environments currently do not support .jpeg .

B.9.2 The Complex Tag

The coding used to create and place images introduces complexity to the tag. The opening anchor tag <A> for a hyperlink uses this complexity to identify the link (HREF). The image tag <IMG> adds SRC to identify the image. Since images on a page create complexity (increased load time, increased file size), complex, not to say complicated, tags become the norm. You use this complex tag form to define other elements of the Web page such as headings, paragraphs, and tables.

B.9.3 Sizing and Placing the Image

The warring factions of the Web world are constantly debating what a Web site should be. Much of the debate centers on images and their effect on page loading time. While many points of the image debate are beyond the scope of this overview, one is not: the image size attributes. Everyone agrees that it is best to include the width and height of an image to speed page loading. The browser window can give you the information if you know what to do and where to look. We will use Netscape directions for our example.

Launch Netscape, click on File in the text menu bar, select Open Page , then Choose File in the pop-up window, and locate the image on your computer. NOTE: make sure the "Types of Files" bar is set to "All Files (*.*)." Select the image whose dimensions you want to know and click the OK button. The blue bar at the very top of the browser window contains the measurements in pixels: width then height.

<IMG SRC=picture.gif WIDTH="40" HEIGHT="100" >

You position the image on the page by adding ALIGN="LEFT" (or "RIGHT" or "CENTER" ) inside the image tag.

B.9.4 Creating a Text Alternative for an Image

Not all browsers support graphics; LYNX, one of the oldest, does not.

Some users turn image-loading off, and most graphics are impractical for sight- impaired users. Using a text label to identify graphic images is good manners and practical. The ALT tag inside the <IMG> tag identifies text alternatives for graphics.

<IMG SRC="UpArrow.gif" ALT="UP">

The portion identifying the image does not have to be one word or a repeat of the image filename. Newer Browsers show ALT text when you "mouse over" the image, and inserting a user -friendly phrase such as View of downtown Rochester, 1948 or Back to Top rather than photo_main_47.jpg and arrow.gif can provide additional information to Web spiders that the image would otherwise conceal.

B.9.5 Where Do I Find Graphics?

The Web has many sites full of free graphics. You need to use discretion since some folks think that if butterflies are free, so are Bugs Bunny, Snoopy, Homer Simpson, and the Nike Swoosh, and there they all are on their "free graphics" Web site. The most useful graphics are part of the 4 B's: buttons , bars, ball, and backgrounds. They used to be very easy to find; every free Web graphics site had them, but with the new Web tools the trend is toward the "unique" (read baroque). One site that has the old reliables is the All Free Original Clipart page. Their URL is http://www.free-graphics.com/. The site is well organized so it is easy to review the small graphic objects you want. To get to the type of item you want, choose a category from the menu on the left side of the page. Each section has directions on how to download the image you want to use. When you work on the exercise to create a page of images you may want to use selections from this site.

B.9.6 Background Graphics

All but the earliest versions of Netscape and Microsoft Internet Explorer support background graphics, colors, and textures. You can get images from a Web graphic site such as the one listed above. Since some early browsers (and they're still out there) don't support background images, you can include code in the tag for a background color as well. The browser will pick up the color . This is useful, too, for those users who turn graphics off.

B.9.7 Creating Backgrounds

Since a background color or image can be included in as an attribute, the <BODY> tag can become quite complex. For a background image the form is the following:

<BODY BACKGROUND="filename.gif">

Background color is a bit tricky; it uses hexadecimals, but there are several sites on the Web that list these, and Web building tools include these codes. Basically, 000000 represents black and FFFFFF represents white. The form for background color follows :

<BODY BGCOLOR="#FF90CB">

To simplify things, there are some standard colors you can add using their name only. The current HTML standard names 16 of these colors; aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, and white.

B.9.8 Default Colors

When the standards for the Web were first created, color monitors were VGA at best, and modems were 300 to 1200 baud. So, the default colors are rather mundane. The default background, referred to as light gray, is more of a battleship gray. Regular text is black. For hotlinks, "Unvisited" hotlink text is blue, an "Active" hotlink text is red, and "Visited" hotlink text is violet . Additionally, All hotlinks are underlined .

Now in the time of streaming media, monitors capable of displaying thousands of colors, and 56K modems, backgrounds can be anything, and an Active link changes so quickly to Visited it hardly matters what color it is. For best contrast on background, try white ( FFFFFF ) or black ( 000000 ). Experiment with near misses; word on the street is that off-white or black is easier on the eyes.

Besides the 16 named colors there are 216 "Websafe" colors that work on most browsers without doing strange things. Most graphics tools have a Websafe palette option. See Tables B.1 and B.2.

Hotlinks should be obvious to the user. Purists say stick to the default blue and purple for unvisited and visited. Newer browsers can disable hotlink underline . Leave the underline intact when you build a site and let the user decide.

Table B.1. Named colors for HTML 4.01 and CSS2.

Color Name

Hex 6

Hex 3

RGB

RGB%

Websafe

Reallysafe

black

#000000

#000

0,0,0

0%,0%,0%

Yes

Yes

silver

#C0C0C0

#CCC

192,192,192

75%,75%,75%

No

No

gray

#808080

#888

128,128,128

50%,50%,50%

No

No

white

#FFFFFF

#FFF

255,255,255

100%,100%,100%

Yes

Yes

maroon

#800000

#800

128,0,0

50%,0%,0%

No

No

red

#FF0000

#F00

255,0,0

100%,0%,0%

Yes

Yes

purple

#800080

#808

128,0,128

50%,0%,50%

No

No

fuchsia

#FF00FF

#F0F

255,0,255

100%,0%,100%

Yes

Yes

green

#008000

#080

0,128,0

0%,50%,0%

No

No

lime

#00FF00

#0F0

0,255,0

0%,100%,0%

Yes

Yes

olive

#808000

#880

128,128,0

50%,50%,0%

No

No

yellow

#FFFF00

#FF0

255,255,0

100%,100%,0%

Yes

Yes

navy

#000080

#008

0,0,128

0%,0%,50%

No

No

blue

#0000FF

#00F

0,0,255

0%,0%,100%

Yes

Yes

teal

#008080

#088

0,128,128

0%,50%,50%

No

No

aqua

#00FFFF

#0FF

0,255,255

0%,100%,100%

Yes

Yes

The HTML 4.01 and CSS2 color names with their corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked . The information in this table is copyright 2003 Jupitermedia Corporation. All rights reserved. Used with permission from http://www. webreference .com.

Table B.2. Proprietary color names for Internet Explorer.

Color Name

Hex 6

Hex 3

RGB

RGB%

Websafe

Reallysafe

aliceblue

#F0F8FF

#FFF

240,248,255

94%,97%,100%

No

No

antiquewhite

#FAEBD7

#FED

250,235,215

98%,92%,84%

No

No

aqua

#00FFFF

#0FF

0,255,255

0%,100%,100%

Yes

Yes

aquamarine

#7FFFD4

#7FD

127,255,212

49%,100%,83%

No

No

azure

#F0FFFF

#FFF

240,255,255

94%,100%,100%

No

No

beige

#F5F5DC

#FFD

245,245,220

96%,96%,86%

No

No

bisque

#FFE4C4

#FEC

255,228,196

100%,89%,76%

No

No

black

#000000

#000

0,0,0

0%,0%,0%

Yes

Yes

blanchedalmond

#FFEBCD

#FEC

255,235,205

100%,92%,80%

No

No

blue

#0000FF

#00F

0,0,255

0%,0%,100%

Yes

Yes

blueviolet

#8A2BE2

#82E

138,43,226

54%,16%,88%

No

No

brown

#A52A2A

#A22

165,42,42

64%,16%,16%

No

No

burlywood

#DEB887

#DB8

222,184,135

87%,72%,52%

No

No

cadetblue

#5F9EA0

#59A

95,158,160

37%,61%,62%

No

No

chartreuse

#7FFF00

#7F0

127,255,0

49%,100%,0%

No

No

chocolate

#D2691E

#D61

210,105,30

82%,41%,11%

No

No

coral

#FF7F50

#F75

255,127,80

100%,49%,31%

No

No

cornflowerblue

#6495ED

#69E

100,149,237

39%,58%,92%

No

No

cornsilk

#FFF8DC

#FFD

255,248,220

100%,97%,86%

No

No

crimson

#DC143C

#D13

220,20,60

86%,7%,23%

No

No

cyan

#00FFFF

#0FF

0,255,255

0%,100%,100%

Yes

Yes

darkblue

#00008B

#008

0,0,139

0%,0%,54%

No

No

darkcyan

#008B8B

#088

0,139,139

0%,54%,54%

No

No

darkgoldenrod

#B8860B

#B80

184,134,11

72%,52%,4%

No

No

darkgray

#A9A9A9

#AAA

169,169,169

66%,66%,66%

No

No

darkgreen

#006400

#060

0,100,0

0%,39%,0%

No

No

darkkhaki

#BDB76B

#BB6

189,183,107

74%,71%,41%

No

No

darkmagenta

#8B008B

#808

139,0,139

54%,0%,54%

No

No

darkolivegreen

#556B2F

#562

85,107,47

33%,41%,18%

No

No

darkorange

#FF8C00

#F80

255,140,0

100%,54%,0%

No

No

darkorchid

#9932CC

#93C

153,50,204

60%,19%,80%

No

No

darkred

#8B0000

#800

139,0,0

54%,0%,0%

No

No

darksalmon

#E9967A

#E97

233,150,122

91%,58%,47%

No

No

darkseagreen

#8FBC8B

#8B8

143,188,139

56%,73%,54%

No

No

dodgerblue

#1E90FF

#19F

30,144,255

11%,56%,100%

No

No

forestgreen

#228B22

#282

34,139,34

13%,54%,13%

No

No

indianred

#CD5C5C

#C55

205,92,92

80%,36%,36%

No

No

lavender

#E6E6FA

#EEF

230,230,250

90%,90%,98%

No

No

lemonchiffon

#FFFACD

#FFC

255,250,205

100%,98%,80%

No

No

lightgrey

#D3D3D3

#DDD

211,211,211

82%,82%,82%

No

No

lightseagreen

#20B2AA

#2BA

32,178,170

12%,69%,66%

No

No

mediumslateblue

#7B68EE

#76E

123,104,238

48%,40%,93%

No

No

navy

#000080

#008

0,0,128

0%,0%,50%

No

No

orange

#FFA500

#FA0

255,165,0

100%,64%,0%

No

No

salmon

#FA8072

#F87

250,128,114

98%,50%,44%

No

No

slateblue

#6A5ACD

#65C

106,90,205

41%,35%,80%

No

No

yellowgreen

#9ACD32

#9C3

154,205,50

60%,80%,19%

No

No

Internet Explorer's proprietary color names with their corresponding numerical values. Members of the Websafe and Reallysafe palletes are marked. The information in this table is copyright 2003 Jupitermedia Corporation. All rights reserved. Used with permission from http://www.webreference.com.

B.9.9 Bars, Bullets, and Icons

You can get these simple graphics from the All Free Graphics Web site to spruce up your page. The temptation is to use a lot of them because you can; don't yield to it. Be especially careful with animated GIFs. An envelope or mailbox constantly opening and closing at the bottom of a Web page can be mighty irritating .

Use bars in place of <HR> (hard rule) separators. Position them carefully .

<P ALIGN="CENTER"><IMG SRC="somebar.gif"><P>

Bullets are used to attract attention. (NEW!) is always popular. Small balls fall into the bullet category.

Icons, those small graphical representations, make great clickable images (links to other files). The image replaces the text that identifies the hotlink. This is the principle behind all those "Click here for " banner graphics you see on every Web site.

<A HREF="Some.html"><IMG SRC="icon.gif"></A>

To eliminate the "hot" blue border around a linked icon, add BORDER="0" to the image tag.

<A HREF="Some.html"><IMG SRC="icon.gif" BORDER ="0"></A>

B.9.10 Graphics Update

Flash 5 ” Need I say more? Types of graphics fall in and out of favor. The understated look is always good.

B.9.11 External Sights 'n' Sounds

You can use anchor and reference to link to an image as a separate entity. This will open a page to a stand-alone image. Many sites use this device to keep slow loading, large graphics below the main page.

<A HREF="Image.gif">link anchor</A>

The syntax is the same for a sound ( .au, .wav ) or movie ( .mov , . mpg )

NOTE : Sound and movies are slow loaders and not everyone can access these.



JavaScript by Example
JavaScript by Example (2nd Edition)
ISBN: 0137054890
EAN: 2147483647
Year: 2003
Pages: 150
Authors: Ellie Quigley

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net