Cách liên kết hình ảnh trong html

Hình ảnh thu nhỏ

Bạn có thể liên kết đến một phiên bản lớn hơn của một hình ảnh nhỏ hơn. Hình ảnh nhỏ hơn thường được gọi là "hình thu nhỏ" hoặc đơn giản chỉ là "hình thu nhỏ"

Để làm điều này, bạn nên có hai hình ảnh; . e. hình thu nhỏ] và một hình ảnh lớn

Có thể sử dụng một hình ảnh và chỉ cần thay đổi kích thước bằng HTML nhưng điều đó thường đánh bại mục đích tạo hình thu nhỏ. Tạo một hình ảnh thu nhỏ riêng biệt cho phép bạn sử dụng một hình ảnh nhỏ hơn, tốn ít băng thông hơn cho hình thu nhỏ và một hình ảnh lớn hơn, chi tiết hơn cho hình ảnh có kích thước đầy đủ. Chỉ cần thay đổi kích thước hình ảnh sẽ sử dụng cùng một băng thông bất kể

Sử dụng hình ảnh thu nhỏ, bạn có thể liên kết đến hình ảnh có kích thước đầy đủ thực tế hoặc đến trang HTML nhúng hình ảnh có kích thước đầy đủ. Cách nào cũng được. Nếu bạn nhúng hình ảnh lớn hơn vào trang HTML, ít nhất bạn có thể thêm những thứ khác vào trang [chẳng hạn như điều hướng, v.v.]

Đến cuối bài viết này, bạn sẽ tạo các liên kết hình ảnh trên khắp trang web của mình và Internet

Chúng tôi cũng sẽ xem xét một số kỹ thuật nâng cao hơn ở cuối bài viết nếu bạn cảm thấy dũng cảm.

Lấy một ly cà phê, chúng ta hãy đi sâu vào

Làm thế nào để bạn tạo một siêu liên kết?

Để có được các liên kết trên trang chủ của bạn, bạn cần tạo một siêu liên kết. Để làm điều này trong HTML, bạn cần sử dụng thẻ

    My Great Link

    My Great Link

Đây là một ví dụ

    ...

Ở phần trên, bạn có thể thấy rằng thẻ mở

    My Great Link

Tạo điểm bắt đầu của siêu liên kết. Sau đó, chúng tôi đóng thẻ với

    My Great Link

Bất kỳ văn bản nào chúng tôi viết giữa thẻ mở và thẻ đóng đều là văn bản liên kết của bạn. Ví dụ

    My Great Link

Để biến điều này thành một liên kết, chúng ta cần thêm một URL. Để làm điều này, chúng tôi thêm URL vào thuộc tính href. URL có thể trỏ đến bất kỳ đâu trên internet. Đối với ví dụ này, chúng tôi sẽ sử dụng trang chủ PageDart

  My Great Link

Đảm bảo bao gồm URL đầy đủ với HTTPS ở phía trước

Đó là tất cả những gì cần làm để tạo một liên kết chỉ có văn bản trong HTML. Tiếp theo, hãy xem cách chúng ta có thể thêm hình ảnh vào trang web bằng HTML

Làm thế nào để bạn tạo một hình ảnh trong HTML?

Để thêm hình ảnh vào trang web của bạn, hãy sử dụng thẻ

    My Great Link

Thẻ này hơi khác với thẻ

    My Great Link

Để tạo thẻ

    My Great Link

    My Great Link

Điều này sẽ thêm một hình ảnh vào màn hình như thế này

Bây giờ chúng tôi có một hình ảnh, chúng tôi cần biến nó thành một liên kết. Để làm được điều đó, chúng ta cần thêm thẻ

    My Great Link

    My Great Link

Hãy xem một ví dụ tiếp theo

Hình ảnh như một liên kết

Để biến một hình ảnh thành một liên kết, bạn cần thêm thẻ

    My Great Link

    My Great Link

Cái nào sẽ tạo ra HTML này

Bằng cách thêm thẻ

    My Great Link

    My Great Link

Nếu bạn đang sử dụng WordPress thì bạn có thể thêm mã HTML này vào trang của mình bằng chế độ xem văn bản trong trình chỉnh sửa trang

Bạn cũng có thể thêm văn bản và hình ảnh bên trong liên kết, hãy xem cái này

Hình ảnh và Văn bản dưới dạng Liên kết

Ví dụ trên cho thấy cách chỉ thêm một hình ảnh dưới dạng liên kết

Điều gì sẽ xảy ra nếu chúng tôi muốn thêm cả hình ảnh và văn bản vào một liên kết

Chà, trong trường hợp này, chúng tôi cần đảm bảo rằng chúng tôi thêm văn bản trước khi đóng thẻ

    My Great Link

  
  PageDart Home 

Ở trên, chúng tôi đã thêm “PageDart Home” bên trong thẻ

    My Great Link

    My Great Link

Còn một thuộc tính nữa trên thẻ

    My Great Link

Đó là thuộc tính

  My Great Link

Liên kết hình ảnh và thuộc tính Alt

Hình ảnh trên internet phải có thuộc tính

  My Great Link

Trình đọc màn hình sử dụng văn bản thay thế để trợ giúp người dùng khiếm thị. Trình đọc màn hình sẽ đọc mô tả văn bản khi tìm thấy hình ảnh

Để làm điều này, chúng tôi thêm một thuộc tính

  My Great Link

    My Great Link

Bây giờ khi bộ đọc màn hình đọc hình ảnh này, nó sẽ nói “PageDart. com” thành tiếng

Điều quan trọng là phải tuân theo các phương pháp hay nhất khi viết văn bản thay thế hình ảnh

Đảm bảo rằng bạn nghĩ về người đang sử dụng trình đọc màn hình. Viết mô tả văn bản thay thế của bạn cho họ và mô tả hình ảnh tốt nhất có thể

Đây là tất cả những gì bạn cần để tạo các hình ảnh liên kết trong HTML. Tuy nhiên, có một số kỹ thuật nâng cao hơn mà bạn có thể sử dụng. Nếu bạn cảm thấy dũng cảm, chúng ta sẽ xem xét những điều này tiếp theo

Kỹ thuật nâng cao. Hình ảnh dưới dạng Liên kết bằng CSS

Một kỹ thuật nâng cao hơn là sử dụng CSS. CSS là viết tắt của Cascading Style Sheet và nó cho phép bạn thay đổi giao diện của trang HTML

Với CSS, bạn có thể đặt hình nền trên một phần tử, chẳng hạn như thẻ

    My Great Link

Ở đây chúng ta sẽ có HTML trông như thế này

  a {
    background-image: url["/favicon-32x32.png"];
    display: block;
    height:32px;
    width:32px;
  }

Vì vậy, lần này không có gì bên trong thẻ

    My Great Link

Chúng ta có thể sử dụng kỹ thuật tương tự với thẻ

Kỹ thuật nâng cao. Sử dụng một nút

Trong ví dụ này, chúng tôi sẽ sử dụng thẻ

    My Great Link

Chúng ta có thể tạo đầu ra giống như ví dụ trên bằng cách sử dụng HTML này

  .link {
    background-image: url["/favicon-32x32.png"];
    border: 0;
    height:32px;
    width:32px;
  }


  function goHome[] {
    return window.open["//pagedart.com", "_blank"]
  }

Cái nào tạo ra đầu ra này

Ở đây chúng tôi đang sử dụng JavaScript để mở một tab trình duyệt mới. Gửi người dùng đến trang chủ PageDart

Tôi không biết tại sao bạn lại làm điều này. Tuy nhiên, tôi muốn cho bạn thấy những gì có thể và HTML, CSS và JavaScript có thể linh hoạt như thế nào

Ví dụ cuối cùng tôi sẽ trình bày là sử dụng bản đồ hình ảnh

Kỹ thuật nâng cao. Bản đồ hình ảnh

Bản đồ hình ảnh là những hình ảnh đơn lẻ với các khu vực có thể nhấp được. Chúng đã không còn phổ biến trong những năm qua nhưng chúng vẫn là một phần của đặc tả HTML5. Điều này có nghĩa là các trình duyệt như Internet Explorer, Chrome và Safari sẽ hỗ trợ chúng

Biểu đồ là những ví dụ điển hình về Bản đồ hình ảnh, chẳng hạn như biểu đồ tổ chức, như thế này

Sau đó, để biến mỗi khu vực màu hồng thành một liên kết có thể nhấp, chúng tôi sẽ tạo một

Chúng tôi đã thêm thuộc tính

    My Great Link

Sau đó, trong thẻ