Trang chủ
Liên kết Siêu Hình ảnh
Không phải chỉ có văn bản mới làm được "hyper"... hãy mở rộng khả năng cho các trang web
của bạn để các hình ảnh hoạt động như một siêu liên kết (hyperlink) (Thử click
vào hình hộp!).
Mục đích
Sau bài này bạn có thể:- Chèn một button hình trong trang web của bạn để nó liên kết tới một tài liệu HTML khác.
- Chèn một hình ảnh nhỏ hoạt động như là một "tem thư" (postage stamp) để liên kết đến việc trình bày một bản sao lớn của hình ảnh đó.
Bài học
Lưu ý: Nếu bạn chưa có tài liệu từ bài học trước, bạn có thể download lại ngay bây giờ.Button siêu liên kết
Từ những bài học trước bạn đã dễ dàng (hy vọng là vậy) trong việc tạo ra siêu văn bản, tức là đoạn văn bản trong tài liệu của bạn cho phép người xem nối đến những thông tin có liên quan. Bạn cũng có thể làm cho hình ảnh inline (xem bài 7a) hoạt động theo cách giống như "hyper" này. Nếu bạn nhớ lại, trong bài học mới đây chúng ta đã liên kết một đoạn văn bản trong trang Volcano Web,index.htm, đến trang thứ hai là msh.htm để miêu tả Mount St. Helens. Bây giờ trong trang web này chúng ta muốn thêm một button mà khi được click vào sẽ đưa người đọc trở về bài học chính.
Cách để làm được điều này là đặt các tag HTML sao cho các hình ảnh inline ở bên trong phần siêu văn bản của tag anchor:
<a href="fileX.htm"> <img src="graphic.gif">
Go to Document X</a>
Trong trang web của bạn HTML này sẽ hiển thị một hình ảnh inline và đoạn chữ Go to Document X. Cả hai sẽ hoạt động như một siêu liên kết; khi nhấn vào đoạn chữ hay vào hình ảnh sẽ báo cho web browser đi đến tập tin HTML fileX.htm. Riêng hình ảnh cũng có thể là một siêu liên kết. Nói chung, trong World Wide Web, một "HyperGraphic" sẽ được bao quanh bởi một hộp màu tương ứng với loại màu sử dụng cho siêu văn bản trong trang web của bạn, nhờ đó bạn biết rằng nó "hoạt động" (active).
Chú ý: Nhiều browser hiện nay có thể thay đổi màu của siêu văn bản và một số bỏ đi việc trình bày đường bao quanh các liên kết HyperGraphic. Nói chung, bạn có thể xác định một vùng siêu liên kết trong một trang web bằng cách xem sự thay đổi của dấu nháy (cursor) khi nó băng qua một vùng "nóng" (hot). Thông thường dấu nháy sẽ chuyển từ dấu mũi tên sang một bàn tay khi nó băng qua một liên kết hoạt động (active link).
Từ quan điểm của một nhà thiết kế, chúng tôi đề nghị khi bạn sử dụng một hình ảnh như là một siêu liên kết thì nên thêm một liên kết bằng văn bản hoặc là sử dụng thêm ALT= attribute trong tag <IMG...> để phục vụ cho trường hợp người xem tắt việc nạp các hình ảnh.Bây giờ chúng ta sẽ tạo ra một button hình ảnh "hyper". Trước hết, bạn cần chép một bản sao của button mũi tên.
Bạn nên có một bản sao của tập tin hình ảnh ở đâu đó trên máy của bạn (Bạn nên cất lại nó vào trong folder/directory pictures trong vùng làm việc của bạn).
Tiếp theo, thêm vào HTML để button hoạt động được:
- Mở tập tin HTML thứ hai msh.htm trong trình soạn thảo văn bản.
- Ở dưới cùng, điều chỉnh dòng cuối thành:
<hr> <a href="index.htm"> <img src="../pictures/left.gif"> Return to <i>Volcano Web</i></a>Lưu ý : Tag hình ảnh inline (<img...>) hoàn toàn nằm trong anchor giữa > đánh dấu kết thúc URL và </a> đánh dấu sự kết thúc của siêu văn bản. Ngoài ra cũng chú ý tag <i> được sử dụng trong siêu văn bản để nhấn mạnh tiêu đề của bài. Và cuối cùng, chúng ta đã sử dụng tag <hr> để tạo một dòng thẳng trên hình button (xem tag này trong bài 4).
- Lưu trữ tập tin HTML.
- Trở về web browser, Open Local từ thực đơn File để đọc tập tin "msh.htm".
- Chọn Reload từ thực đơn File để điều chỉnh các thay đổi.
- Thử siêu liên kết đến trang Mount St. Helens và button mới để trả bạn lại trang Volcano Web.
Các hình ảnh "Tem thư"
Trước đây, chúng tôi có đề nghị không nên sử dụng các hình ảnh inline lớn trong trang web của bạn bởi vì người sử dụng phải mất thời gian chờ đợi để hình ảnh được download vào máy tính của họ. Một cách khác ở đây là tạo một bảng sao bé nhỏ của hình ảnh, hay được gọi là "tem thư" (postage stamps) để trình bày như là hình ảnh inline. Sau đó sử dụng những bước tương tự như trên bạn có thể làm cho "tem thư" hoạt động như một siêu liên kết đến hình với kích thước thật của nó. Theo cách này hình ảnh lớn thật sự chỉ được download nếu người xem quyết định muốn coi nó. Trước hết bạn cần sao chép hai tập tin ảnh từ Trung tâm Download Hình ảnh Bài 8e. (Các tập tin này nên được cất vào folder/directory pictures trong vùng làm việc của bạn).Sau đó, tạo các liên kết tem thư trong tập tin văn bản chính:
- Mở tập tin index.htm trong trình soạn thảo
- Dưới tiêu đề Long Valley đánh vào:
This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. <p> <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [View the full size image] -- </a> <p> This seismometer measures earthquakes associated with subsurface volcanic forces.Hình ảnh inline, stamp.gif, hoạt động như một siêu liên kết đến hình lớn hơn, seismo.jpg. Khi người sử dụng click trên "tem thư" hay trên đoạn văn "View the full size image --", browser của bạn sẽ trình bày ảnh lớn trong một cửa sổ riêng hay trong một trang trắng.
- Lưu và Reload trong web browser của bạn.
Kiểm tra lại công việc của bạn
So sánh trang web của bạn với ví dụ mẫu để biết tài liệu nên xuất hiện như thế nào. Nếu trang web của bạn không giống như ví dụ mẫu, hãy kiểm tra lại văn bản bạn đã đánh trong trình soạn thảo. Lỗi thường gặp là sự khác biệt khi đánh vần tên tập tin và mã HTML cho liên kết anchor, hoặc là không có tập tin hình ảnh tại thư mục chỉ định. Nếu bạn thấy một biểu tượng hình :
thì thường có nghĩa là HTML không tìm thấy tập tin có trong tag <img> hoặc là ảnh không thuộc dạng GIF hay JPEG.
Xem lại
Những vấn đề ôn lại của bài này là:- Làm thế nào tạo một button hình ảnh trong trang web của bạn?
- Liên kết "tem thư" tiện lợi như thế nào khi thêm hình ảnh vào trang web của bạn?
- Làm thế nào tạo ra liên kết "tem thư" trong tài liệu của bạn?
