Các trang web không giống như bất kỳ phương tiện truyền thông nào đến trước chúng. Một trong những điều chính mà thiết lập các trang web ngoài các định dạng phương tiện truyền thông trước đó như in ấn, đài phát thanh, và thậm chí truyền hình là khái niệm về " siêu liên kết ".
Siêu liên kết, cũng thường được gọi là "liên kết", là những gì làm cho Web trở nên năng động. Không giống như một ấn phẩm in có thể tham khảo một bài viết hoặc tài nguyên khác, các trang web có thể sử dụng các liên kết này để thực sự gửi khách truy cập đến các trang và tài nguyên khác đó. Không có phương tiện quảng bá nào khác có thể làm điều này. Bạn có thể nghe thấy một quảng cáo trên radio hoặc xem trên TV, nhưng không có siêu liên kết nào có thể đưa bạn đến các công ty trong những quảng cáo đó theo cách mà trang web có thể dễ dàng thực hiện. Liên kết thực sự là một công cụ giao tiếp và tương tác tuyệt vời!
Thông thường, các liên kết được tìm thấy trên trang web là nội dung văn bản hướng khách truy cập đến các trang khác của cùng một trang web đó. Điều hướng của trang web là một ví dụ về liên kết văn bản trong thực tế nhưng các liên kết không cần phải dựa trên văn bản. Bạn cũng có thể dễ dàng liên kết hình ảnh trên trang web của mình. Hãy xem cách thực hiện điều này, tiếp theo là một số trường hợp bạn muốn sử dụng siêu liên kết dựa trên hình ảnh.
Cách liên kết hình ảnh
Điều đầu tiên bạn cần làm là đặt chính hình ảnh đó vào tài liệu HTML của bạn. Việc sử dụng phổ biến liên kết dựa trên hình ảnh là hình ảnh biểu tượng của trang web, sau đó được liên kết lại với trang chủ của trang web. Trong mã ví dụ của chúng tôi bên dưới, tệp chúng tôi đang sử dụng là SVG cho biểu tượng của chúng tôi. Đây là một lựa chọn tốt vì nó sẽ cho phép hình ảnh của chúng tôi mở rộng cho các độ phân giải khác nhau, tất cả trong khi vẫn duy trì chất lượng hình ảnh và kích thước tệp tổng thể nhỏ.
Đây là cách bạn sẽ đặt hình ảnh của mình trong tài liệu HTML:
Xung quanh thẻ hình ảnh, bây giờ bạn sẽ thêm liên kết neo, mở phần tử neo trước hình ảnh và đóng neo sau hình ảnh. Điều này tương tự như cách bạn liên kết văn bản, chỉ thay vì gói các từ bạn muốn là một liên kết với các thẻ neo, bạn quấn hình ảnh. Trong ví dụ của chúng tôi bên dưới, chúng tôi đang liên kết quay lại trang chủ của trang web của chúng tôi, đó là "index.html".
Khi thêm HTML này vào trang của bạn, không đặt bất kỳ khoảng trắng nào giữa thẻ liên kết và thẻ hình ảnh. Nếu bạn làm như vậy, một số trình duyệt sẽ thêm các dấu tích nhỏ bên cạnh hình ảnh, trông sẽ rất kỳ quặc.
Hình ảnh logo bây giờ cũng sẽ hoạt động như một nút trang chủ, đó là khá nhiều một tiêu chuẩn web những ngày này. Lưu ý rằng chúng tôi không bao gồm bất kỳ kiểu trực quan nào, chẳng hạn như chiều rộng và chiều cao của hình ảnh, trong đánh dấu HTML của chúng tôi. Chúng tôi sẽ để lại các kiểu trực quan này cho CSS và duy trì sự tách biệt rõ ràng về cấu trúc HTML và các kiểu CSS.
Khi bạn truy cập vào CSS, kiểu bạn viết để nhắm mục tiêu đồ họa biểu trưng này có thể bao gồm định cỡ hình ảnh, bao gồm kiểu phản hồi cho hình ảnh thân thiện với nhiều thiết bị cũng như bất kỳ hình ảnh nào bạn muốn thêm vào hình ảnh / liên kết, như đường viền hoặc CSS đổ bóng. Bạn cũng có thể cung cấp cho hình ảnh của bạn hoặc liên kết một thuộc tính lớp nếu bạn cần thêm "móc" để sử dụng với các kiểu CSS của bạn.
Trường hợp sử dụng cho liên kết hình ảnh
Vì vậy, việc thêm một liên kết hình ảnh là khá dễ dàng. Như chúng ta vừa thấy, tất cả những gì bạn phải làm là bọc hình ảnh với các thẻ neo thích hợp. Câu hỏi tiếp theo của bạn có thể là "khi nào bạn thực sự thực hiện điều này trong thực tế bên cạnh ví dụ về liên kết biểu trưng / trang chủ nói trên?"
Dưới đây là một số suy nghĩ:
- Hình thu nhỏ trong thư viện liên kết đến phiên bản lớn hơn của những hình ảnh đó.
- Hình ảnh được sử dụng một mình để đại diện cho nội dung, như ảnh sản phẩm cho trang web thương mại điện tử.
- Hình ảnh quảng cáo là một phần của nội dung khác, như bài viết trên blog hoặc thông cáo báo chí, lôi kéo mọi người chú ý rằng nội dung cung cấp cho họ khu vực mục tiêu để nhấn hoặc nhấp để đọc toàn bộ bài viết.
- Hình ảnh biểu tượng được sử dụng làm nút để kết nối với các chức năng cụ thể hoặc các trang trong trang web.
- Các liên kết truyền thông xã hội sử dụng các biểu tượng dễ nhận biết của các trang web truyền thông xã hội khác nhau quan trọng đối với trang web hoặc công ty đó.
- Hình ảnh được sử dụng làm nút cho chức năng nhất định, như gửi biểu mẫu (lưu ý thực hành tốt nhất - từ góc độ hiệu suất trang web, các nút được tạo kiểu hoàn toàn bằng CSS là lựa chọn tốt hơn so với nút hình ảnh).
Nhắc nhở khi sử dụng hình ảnh
Hình ảnh có thể đóng một vai trò quan trọng trong thành công của trang web. Một trong những ví dụ được đưa ra ở trên được đề cập bằng cách sử dụng hình ảnh cùng với nội dung khác để thu hút sự chú ý đến nội dung đó và khiến mọi người đọc nó.
Khi sử dụng hình ảnh, bạn phải lưu ý chọn hình ảnh phù hợp với nhu cầu của mình , điều này bao gồm hình ảnh, định dạng chính xác và cũng đảm bảo rằng bất kỳ hình ảnh nào bạn sử dụng trên trang web của mình đều được tối ưu hóa đúng cách để phân phối trang web . Điều này có vẻ như rất nhiều công việc chỉ để thêm hình ảnh, nhưng phần thưởng xứng đáng! Hình ảnh thực sự có thể thêm rất nhiều vào sự thành công của trang web.
Đừng ngần ngại sử dụng hình ảnh thích hợp trên trang web của bạn và liên kết những hình ảnh đó khi cần để thêm một số tương tác vào nội dung của bạn, đồng thời chú ý đến những phương pháp hay nhất này và sử dụng các đồ họa / liên kết này một cách chính xác và có trách nhiệm trong công việc thiết kế web của bạn.