Trang chủ
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 |
|
|
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.
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àyKiể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
- Hai dạng ảnh nào được sử dụng cho World Wide Web?
- 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?
- 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?
- 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?
