Lessons IX : Thêm hình ảnh vào trang Web

7. Thêm hình ảnh vào trang Web

Việc gởi một văn bản thông qua Internet chỉ là một cách cũ của thư tín điện tử. Người ta đã làm được điều đó trong nhiều thập kỷ! Khi bạn có thể bao gồm cả hình ảnh, thông báo của bạn sẽ trở nên nhiều thông tin hơn. Có phải là một bức hình sẽ đáng giá hơn cả ngàn từ không ?

Mục đích

Sau bài học này, bạn có khả năng:

  • Nhận ra những dạng hình ảnh cho World Wide Web.
  • Thảo luận về những điểm chính để cân nhắc khi chèn hình ảnh vào tài liệu WWW.
  • Download một tập tin hình ảnh về hệ thống của bạn.
  • Sử dụng đúng những dạng HTML cho việc chèn hình ảnh trong trang web của bạn.

Bài học

Bạn sẽ cảm thấy thoải mái với bài học này! Bài này chỉ giới thiệu sơ qua về hình ảnh cho WWW. Nhưng chúng tôi muốn bạn hoạt động một chút.

Các dạng hình ảnh của Web

Có vô số dạng tập tin hình ảnh cho máy tính: PICT, GIF, TIFF, rồi thì EPS, BMP, PCX, JPEG … Cách đọc của nó giống như một bài thơ bí ẩn. Một bài thơ tồi.

Cách thức để cho Web browser hiển thị hình ảnh là một sự định dạng của HTML để chỉ ra vị trí của tập tin hình ảnh sao cho sự định dạng đó có thể thông dịch được trong các máy tính khác nhau. Ví dụ như, thông tin theo dạng đó được nhận bởi máy Macintosh thì browser sẽ hiển thị hình ảnh theo dạng hình ảnh của máy Macintosh. Tuy nhiên, khi cũng thông tin đó gởi cho browser trên Windows, nó được hiển thị theo chế độ đồ họa của Windows.

Theo thuật ngữ kỹ thuật, chúng ta sẽ nói rằng dạng hình ảnh là độc lập với platform (platform independent). Bản thân HTML cũng là độc lập với platform vì các ký tự văn bản trơn của nó đều có thể hiểu được trong mọi máy tính.

Dạng chuẩn có thể hiển thị trong một trang web là GIF hay Graphics Interchange Format. GIF nén các thông tin của hình ảnh (giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để có thể truyền qua Internet. Kỹ thuật nén theo GIF là kỹ thuật nén có hiệu quả cao nhất khi hình ảnh có những vùng liên tục có cùng một màu, và việc nén càng lớn hơn khi có sự lặp lại màu theo chiều đứng. Dạng hình ảnh khác sử dụng trong web là JPEG (được đặt tên sau khi Joint Photographic Engineering Group thiết kế ra dạng này). Trước đây, các ảnh JPEG không được hiển thị trong cùng trang mà được hiển thị trong một cửa sổ khác nhờ vào một chương trình “trợ giúp” được cài đặt thêm vào. Nhưng hiện nay hầu hết các browser đều hổ trợ việc hiển thị ảnh JPEG ngay trong trang web.

Kỹ thuật nén JPEG rất có hiệu quả với các ảnh chụp mà màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh (các ảnh “grainy”). Tùy thuộc vào sự thỏa hiệp với chất lượng ảnh, JPEG cung cấp các loại hệ số nén về kích thước thật là có ấn tượng, đôi khi đạt đến 10 (tức là tập tin 1500KB giảm còn 150KB).

Ðể có nhiều thông tin hơn về các dạng tập tin này, hãy xem trang SITO tại Graphics File Compression. Nếu bạn muốn có một cuốn sách lớn, hãy xem Designing Web Graphics của Lynda Weinman.

Rất nhiều chương trình xử lý đồ thị có sẵn chức năng lưu trữ tập tin theo dạng GIF. Nếu không, dưới đây là một vài chương trình/trình tiện ích shareware để thực hiện việc chuyển đổi. Bạn có thể tìm thấy chúng tại các site như shareware.com, Jumbo , hay Yahoo.

Vài trình tiện ích cho Ðồ Họa
Macintosh Windows
  • GIFConverter
  • GraphicConverter
  • clip2gif
  • PhotoGIF
    (plugin for PhotoShop)
  • WinGif 1.4
  • Lview 3.1
  • PaintShop Pro

Vài điểm cần biết khi sử dụng Ðồ họa

Với tài liệu này, bạn không cần thiết phải sử dụng một trong các chương trình xử lý đồ họa nói trên. Chúng tôi sẽ trình bày đến các bạn cách để lưu trữ lại một bản sao của bất kỳ hình ảnh nào bạn nhìn thấy trên trang web.

Tuy vậy, vì bạn bắt đầu phát triển các trang web của bạn, bạn cũng nên làm quen với cách tạo ra các hình ảnh ở dạng GIF hay JPEG. Nếu trang web của bạn có thêm hình ảnh, bạn nên chú ý các vấn đề sau đây:

 

  • Tăng số lượng và kích thước của hình ảnh có thể xem tốt hơn trên máy tính, nhưng chúng cũng làm cho người sử dụng phải chờ đợi hình ảnh được gởi thông qua mạng (cũng giống như có được bao nhiêu người trong chúng ta có máy Sun SparcStation tại nhà?) Chúng tôi đề nghị nên giữ kích thước của hình ảnh ít hơn 100K (với chúng tôi thì ít hơn 50B). Càng nhỏ càng tốt.
  • Cũng với một ghi chú tương tự, không phải mọi người trong chúng ta đều có màn hình 21 inch! Nên giữ các hình ảnh không rộng hơn 480 điểm và không cao hơn 300 điểm để tránh cho người sử dụng phải scroll hay định lại kích thước cửa sổ browser của họ.
  • Nhiều cấp độ màu làm cho ảnh có vẻ đẹp hơn nhưng với các hình GIF chúng sẽ không nén được nhiều như các khối cùng màu và đôi khi chúng không ghép nhóm được
  • Một số chương trình xử lý hình ảnh có chế độ “no dithering” khi chuyển sang dạng GIF — việc này có thể làm giảm “sự hỗn độn” (noise) trong các khối nền.
  • Nhiều tông màu tối trên máy Macintosh không thể hiển thị được trên máy Windows.
  • Thay vì hiển thị tất cả các hình ảnh trong trang web, có thể tạo liên kết chúng như là các hình ảnh bên ngoài để chúng chỉ được nạp về khi người xem click vào hypertext liên kết (điều này được xét kỹ hơn sau này trong bài 8a và trong bài 8d). Nếu bạn có nhiều hình cần trình bày, hãy thử chia nhỏ trang web của bạn thành một chuỗi các trang liên kết nhau.
  • Một hình ảnh nhỏ (như là một “bullet” nhỏ) có thể xuất hiện nhiều lần trong một trang mà chỉ bị chậm rất ít thời gian cho mỗi lần sử dụng lại ảnh đó.
  • Hiện nay nhiều browser “cache” được các hình ảnh (cất chúng lại trong máy của bạn), điều này có nghĩa là khi sử dụng cùng một tập tin trong nhiều trang web sẽ làm cho chúng được nạp vào từ ngay trên máy tính của chính bạn chứ không phải từ trên Internet.
  • Ðiều quan trọng nhất, hãy chắc chắn rằng các hình ảnh là những thứ tạo thêm nghĩa cho tài liệu HTML của bạn.

Bạn có thể thiết kế ra một trang web đẹp, có nhiều hình ảnh lớn, được nạp dễ dàng từ máy tính của bạn, nhưng mà nó lại có thể chịu cảnh chậm thê thảm với các người xem sử dụng một modem tốc độ thấp qua một mạng rất bận rộn. Mạng là chỗ lúc nào cũng bị bận.

Lưu trử và Thêm Hình ảnh vào Trang Web của Bạn

Ðể đến được bài kế tiếp, đầu tiên bạn cần chép lại một bản sao hình ảnh của sự bùng nổ của núi lữa (hãy xem các dung nham nóng bỏng của nó!).

Chỉ cần theo các hướng dẫn trong Trung tâm Download Hình ảnh của Bài 7 rồi sau đó trở lại đây để hoàn tất bài học này


Kiểm tra lại công việc của bạn

Hãy kiểm tra để biết rằng tập tin "lava.gif" được cất vào cùng một directory/folder với tập tin văn bản HTML của bạn "Volc.htm". Nếu nó không có, hãy kiểm tra lại bạn có cất nhầm vào một directory/folder khác không. Nếu đúng như vậy, chuyển nó vào lại đúng vị trí.

Xem lại

  1. Hai dạng ảnh nào được sử dụng cho World Wide Web?
  2. Làm thế nào để các tập tin hình ảnh được trình bày trên các máy tính khác nhau?
  3. Vài điểm lưu ý nào cần xét đến khi thêm hình ảnh vào các trang web?
  4. Làm thế nào để bạn cất lại hình ảnh dung nham để sử dụng trong tài liệu WWW của bạn?

Thực tập tự do

Lướt trên web và tìm một vài hình ảnh. Thử download ít nhất một hình ảnh có thể hữu ích cho trang của bạn. Vài nơi bạn có thể thử là: Yahoo Picture Archive, SpriteLib, hay Rob’s Multimedia Lab


Ði đến phần tiếp theo….

Bạn đã có hình ảnh… Bây giờ, bạn làm thế nào trong HTMLđể thể hiện hình ảnh trong trang web của bạn?

 

ÐẾN…. | Mục Lục | Bài trước: “Danh sách” | Bài kế tiếp: “Inline Images” |

Soạn thảo HTML Bài 7: Hình ảnh trong trang Web

?1995, 1996 Maricopa Center for Learning and Instruction (MCLI)
Maricopa County Community College District, ArizonaThe Internet Connection at MCLI is Alan Levine –}
Comments to levine@maricopa.edu

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

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: