	Sign In Sign-Up

Soaïn thaûo HTML | Giôùi thieäu | FAQ | Alumni | Caùc Tag | Muïc Luïc | Baøi tröôùc | Baøi keá tieáp |

7. Theâm hình aûnh vaøo trang Web

Vieäc gôûi moät vaên baûn thoâng qua Internet chæ laø moät caùch cuõ cuûa thö tín ñieän töû. Ngöôøi ta ñaõ laøm ñöôïc ñieàu ñoù trong nhieàu thaäp kyû! Khi baïn coù theå bao goàm caû hình aûnh, thoâng baùo cuûa baïn seõ trôû neân nhieàu thoâng tin hôn. Coù phaûi laø moät böùc hình seõ ñaùng giaù hôn caû ngaøn töø khoâng ?

Muïc ñích

Sau baøi hoïc naøy, baïn coù khaû naêng:

Nhaän ra nhöõng daïng hình aûnh cho World Wide Web.
Thaûo luaän veà nhöõng ñieåm chính ñeå caân nhaéc khi cheøn hình aûnh vaøo taøi lieäu WWW.
Download moät taäp tin hình aûnh veà heä thoáng cuûa baïn.
Söû duïng ñuùng nhöõng daïng HTML cho vieäc cheøn hình aûnh trong trang web cuûa baïn.

Baøi hoïc

Baïn seõ caûm thaáy thoaûi maùi vôùi baøi hoïc naøy! Baøi naøy chæ giôùi thieäu sô qua veà hình aûnh cho WWW. Nhöng chuùng toâi muoán baïn hoaït ñoäng moät chuùt.

Caùc daïng hình aûnh cuûa Web

Coù voâ soá daïng taäp tin hình aûnh cho maùy tính: PICT, GIF, TIFF, roài thì EPS, BMP, PCX, JPEG ... Caùch ñoïc cuûa noù gioáng nhö moät baøi thô bí aån. Moät baøi thô toài.

Caùch thöùc ñeå cho Web browser hieån thò hình aûnh laø moät söï ñònh daïng cuûa HTML ñeå chæ ra vò trí cuûa taäp tin hình aûnh sao cho söï ñònh daïng ñoù coù theå thoâng dòch ñöôïc trong caùc maùy tính khaùc nhau. Ví duï nhö, thoâng tin theo daïng ñoù ñöôïc nhaän bôûi maùy Macintosh thì browser seõ hieån thò hình aûnh theo daïng hình aûnh cuûa maùy Macintosh. Tuy nhieân, khi cuõng thoâng tin ñoù gôûi cho browser treân Windows, noù ñöôïc hieån thò theo cheá ñoä ñoà hoïa cuûa Windows.

Theo thuaät ngöõ kyõ thuaät, chuùng ta seõ noùi raèng daïng hình aûnh laø ñoäc laäp vôùi platform (platform independent). Baûn thaân HTML cuõng laø ñoäc laäp vôùi platform vì caùc kyù töï vaên baûn trôn cuûa noù ñeàu coù theå hieåu ñöôïc trong moïi maùy tính.

Daïng chuaån coù theå hieån thò trong moät trang web laø GIF hay Graphics Interchange Format. GIF neùn caùc thoâng tin cuûa hình aûnh (giaûm kích thöôùc cuûa taäp tin) vaø chuyeån noù thaønh maõ nhò phaân ñeå coù theå truyeàn qua Internet. Kyõ thuaät neùn theo GIF laø kyõ thuaät neùn coù hieäu quaû cao nhaát khi hình aûnh coù nhöõng vuøng lieân tuïc coù cuøng moät maøu, vaø vieäc neùn caøng lôùn hôn khi coù söï laëp laïi maøu theo chieàu ñöùng. Daïng hình aûnh khaùc söû duïng trong web laø JPEG (ñöôïc ñaët teân sau khi Joint Photographic Engineering Group thieát keá ra daïng naøy). Tröôùc ñaây, caùc aûnh JPEG khoâng ñöôïc hieån thò trong cuøng trang maø ñöôïc hieån thò trong moät cöûa soå khaùc nhôø vaøo moät chöông trình "trôï giuùp" ñöôïc caøi ñaët theâm vaøo. Nhöng hieän nay haàu heát caùc browser ñeàu hoå trôï vieäc hieån thò aûnh JPEG ngay trong trang web.

Kyõ thuaät neùn JPEG raát coù hieäu quaû vôùi caùc aûnh chuïp maø maøu saéc thay ñoåi lieân tuïc trong caùc phaàn raát nhoû cuûa aûnh (caùc aûnh "grainy"). Tuøy thuoäc vaøo söï thoûa hieäp vôùi chaát löôïng aûnh, JPEG cung caáp caùc loaïi heä soá neùn veà kích thöôùc thaät laø coù aán töôïng, ñoâi khi ñaït ñeán 10 (töùc laø taäp tin 1500KB giaûm coøn 150KB).

Ñeå coù nhieàu thoâng tin hôn veà caùc daïng taäp tin naøy, haõy xem trang SITO taïi Graphics File Compression. Neáu baïn muoán coù moät cuoán saùch lôùn, haõy xem Designing Web Graphics cuûa Lynda Weinman.

Raát nhieàu chöông trình xöû lyù ñoà thò coù saün chöùc naêng löu tröõ taäp tin theo daïng GIF. Neáu khoâng, döôùi ñaây laø moät vaøi chöông trình/trình tieän ích shareware ñeå thöïc hieän vieäc chuyeån ñoåi. Baïn coù theå tìm thaáy chuùng taïi caùc site nhö shareware.com, Jumbo , hay Yahoo.

Vaøi trình tieän ích cho Ñoà Hoïa

Macintosh Windows

GIFConverter
GraphicConverter
clip2gif
PhotoGIF
(plugin for PhotoShop)

WinGif 1.4
Lview 3.1
PaintShop Pro

Vaøi trình tieän ích cho Ñoà Hoïa
Macintosh	Windows
GIFConverter GraphicConverter clip2gif PhotoGIF (plugin for PhotoShop)	WinGif 1.4 Lview 3.1 PaintShop Pro

Vaøi ñieåm caàn bieát khi söû duïng Ñoà hoïa

Vôùi taøi lieäu naøy, baïn khoâng caàn thieát phaûi söû duïng moät trong caùc chöông trình xöû lyù ñoà hoïa noùi treân. Chuùng toâi seõ trình baøy ñeán caùc baïn caùch ñeå löu tröõ laïi moät baûn sao cuûa baát kyø hình aûnh naøo baïn nhìn thaáy treân trang web.

Tuy vaäy, vì baïn baét ñaàu phaùt trieån caùc trang web cuûa baïn, baïn cuõng neân laøm quen vôùi caùch taïo ra caùc hình aûnh ôû daïng GIF hay JPEG. Neáu trang web cuûa baïn coù theâm hình aûnh, baïn neân chuù yù caùc vaán ñeà sau ñaây:

Taêng soá löôïng vaø kích thöôùc cuûa hình aûnh coù theå xem toát hôn treân maùy tính, nhöng chuùng cuõng laøm cho ngöôøi söû duïng phaûi chôø ñôïi hình aûnh ñöôïc gôûi thoâng qua maïng (cuõng gioáng nhö coù ñöôïc bao nhieâu ngöôøi trong chuùng ta coù maùy Sun SparcStation taïi nhaø?) Chuùng toâi ñeà nghò neân giöõ kích thöôùc cuûa hình aûnh ít hôn 100K (vôùi chuùng toâi thì ít hôn 50B). Caøng nhoû caøng toát.
Cuõng vôùi moät ghi chuù töông töï, khoâng phaûi moïi ngöôøi trong chuùng ta ñeàu coù maøn hình 21 inch! Neân giöõ caùc hình aûnh khoâng roäng hôn 480 ñieåm vaø khoâng cao hôn 300 ñieåm ñeå traùnh cho ngöôøi söû duïng phaûi scroll hay ñònh laïi kích thöôùc cöûa soå browser cuûa hoï.
Nhieàu caáp ñoä maøu laøm cho aûnh coù veû ñeïp hôn nhöng vôùi caùc hình GIF chuùng seõ khoâng neùn ñöôïc nhieàu nhö caùc khoái cuøng maøu vaø ñoâi khi chuùng khoâng gheùp nhoùm ñöôïc
Moät soá chöông trình xöû lyù hình aûnh coù cheá ñoä "no dithering" khi chuyeån sang daïng GIF -- vieäc naøy coù theå laøm giaûm "söï hoãn ñoän" (noise) trong caùc khoái neàn.
Nhieàu toâng maøu toái treân maùy Macintosh khoâng theå hieån thò ñöôïc treân maùy Windows.
Thay vì hieån thò taát caû caùc hình aûnh trong trang web, coù theå taïo lieân keát chuùng nhö laø caùc hình aûnh beân ngoaøi ñeå chuùng chæ ñöôïc naïp veà khi ngöôøi xem click vaøo hypertext lieân keát (ñieàu naøy ñöôïc xeùt kyõ hôn sau naøy trong baøi 8a vaø trong baøi 8d). Neáu baïn coù nhieàu hình caàn trình baøy, haõy thöû chia nhoû trang web cuûa baïn thaønh moät chuoãi caùc trang lieân keát nhau.
Moät hình aûnh nhoû (nhö laø moät "bullet" nhoû) coù theå xuaát hieän nhieàu laàn trong moät trang maø chæ bò chaäm raát ít thôøi gian cho moãi laàn söû duïng laïi aûnh ñoù.
Hieän nay nhieàu browser "cache" ñöôïc caùc hình aûnh (caát chuùng laïi trong maùy cuûa baïn), ñieàu naøy coù nghóa laø khi söû duïng cuøng moät taäp tin trong nhieàu trang web seõ laøm cho chuùng ñöôïc naïp vaøo töø ngay treân maùy tính cuûa chính baïn chöù khoâng phaûi töø treân Internet.
Ñieàu quan troïng nhaát, haõy chaéc chaén raèng caùc hình aûnh laø nhöõng thöù taïo theâm nghóa cho taøi lieäu HTML cuûa baïn.

Baïn coù theå thieát keá ra moät trang web ñeïp, coù nhieàu hình aûnh lôùn, ñöôïc naïp deã daøng töø maùy tính cuûa baïn, nhöng maø noù laïi coù theå chòu caûnh chaäm theâ thaûm vôùi caùc ngöôøi xem söû duïng moät modem toác ñoä thaáp qua moät maïng raát baän roän. Maïng laø choã luùc naøo cuõng bò baän.

Löu tröû vaø Theâm Hình aûnh vaøo Trang Web cuûa Baïn

Ñeå ñeán ñöôïc baøi keá tieáp, ñaàu tieân baïn caàn cheùp laïi moät baûn sao hình aûnh cuûa söï buøng noå cuûa nuùi löõa (haõy xem caùc dung nham noùng boûng cuûa noù!).

Chæ caàn theo caùc höôùng daãn trong Trung taâm Download Hình aûnh cuûa Baøi 7 roài sau ñoù trôû laïi ñaây ñeå hoaøn taát baøi hoïc naøy

Kieåm tra laïi coâng vieäc cuûa baïn

Haõy kieåm tra ñeå bieát raèng taäp tin "lava.gif" ñöôïc caát vaøo cuøng moät directory/folder vôùi taäp tin vaên baûn HTML cuûa baïn "Volc.htm". Neáu noù khoâng coù, haõy kieåm tra laïi baïn coù caát nhaàm vaøo moät directory/folder khaùc khoâng. Neáu ñuùng nhö vaäy, chuyeån noù vaøo laïi ñuùng vò trí.

Xem laïi

Hai daïng aûnh naøo ñöôïc söû duïng cho World Wide Web?
Laøm theá naøo ñeå caùc taäp tin hình aûnh ñöôïc trình baøy treân caùc maùy tính khaùc nhau?
Vaøi ñieåm löu yù naøo caàn xeùt ñeán khi theâm hình aûnh vaøo caùc trang web?
Laøm theá naøo ñeå baïn caát laïi hình aûnh dung nham ñeå söû duïng trong taøi lieäu WWW cuûa baïn?

Thöïc taäp töï do

Löôùt treân web vaø tìm moät vaøi hình aûnh. Thöû download ít nhaát moät hình aûnh coù theå höõu ích cho trang cuûa baïn. Vaøi nôi baïn coù theå thöû laø: Yahoo Picture Archive, SpriteLib, hay Rob's Multimedia Lab

Ñi ñeán phaàn tieáp theo....

Baïn ñaõ coù hình aûnh... Baây giôø, baïn laøm theá naøo trong HTML ñeå theå hieän hình aûnh trong trang web cuûa baïn?

ÑEÁN.... | Muïc Luïc | Baøi tröôùc: "Danh saùch" | Baøi keá tieáp: "Inline Images" |

Soaïn thaûo HTML Baøi 7: Hình aûnh trong trang Web

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tut7.html