- Đơn chưa đặt hàng: 1,

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

(1891 Từ tổng cộng trong nội dung này)
(3636 lần đọc)   Trang In


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?





  • 0. Tiêu chuẩn của HTML (2919 lần đọc) Trang In
  • Soạn thảo HTML (4672 lần đọc) Trang In
  • 1. Tạo tài liệu HTML đầu tiên (10501 lần đọc) Trang In
  • 2. Điều chỉnh một tài liệu HTML (2417 lần đọc) Trang In
  • 3. Sáu mức tiêu đề (2038 lần đọc) Trang In
  • 5. Làm việc với các kiểu mẫu (2059 lần đọc) Trang In
  • 4. Chia văn bản ra thành nhiều đoạn (3007 lần đọc) Trang In
  • 6. Danh sách, Danh sách, và Danh sách (1891 lần đọc) Trang In
  • 7. Thêm hình ảnh vào trang Web (3637 lần đọc) Trang In
  • 7a. Hình ảnh Inline (4511 lần đọc) Trang In
  • 8. Tạo Liên kết bằng Anchors (2620 lần đọc) Trang In
  • 8a. Liên kết đến tập tin cục bộ (6185 lần đọc) Trang In
  • 8b. URLs - Con trỏ đến Internet (1913 lần đọc) Trang In
  • 8c. Liên kết đến các site Internet bên ngoài (2412 lần đọc) Trang In
  • 8d. Liên kết Các phần của một Trang (3025 lần đọc) Trang In
  • 8e. Liên kết Siêu Hình ảnh (8042 lần đọc) Trang In
  • 9. Preformatted Text (1878 lần đọc) Trang In
  • 10. Các kí tự đặc biệt (24225 lần đọc) Trang In
  • 11. Danh sách mô tả (1838 lần đọc) Trang In
  • 12. Danh thiếp Địa chỉ và Liên kết E-Mail (2239 lần đọc) Trang In
  • 13. Blockquote ! (2807 lần đọc) Trang In
  • 14. Gộp lại (Lumping) hay Phân mảnh (Splitting) (18344 lần đọc) Trang In
  • 15. HTML "tiêu chuẩn" và "nâng cao" (2815 lần đọc) Trang In
  • 16. Màu sắc và Cấu trúc cho Nền (3472 lần đọc) Trang In
  • 17. Đừng làm cho chữ nhấp nháy! (3428 lần đọc) Trang In
  • 19. Easy Hard Rules (1811 lần đọc) Trang In
  • 20. Xét thêm về Sự Chỉnh lề (7553 lần đọc) Trang In
  • 21. Bảng (Table) (3236 lần đọc) Trang In
  • 22. Xét thêm về Hình ảnh và Danh sách (14739 lần đọc) Trang In
  • 23. Bản đồ Hình ảnh Liên kết (3864 lần đọc) Trang In
  • [ Mục lục chuyên mục ]

    Tìm kiếm
     Tìm theo từ: