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ẻ

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

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

<a href="...">
    ...
a>

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

<a href="...">
    My Great Link
a>

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

<a href="...">
    My Great Link
a>

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ụ

<a href="...">
    My Great Link
a>

Để 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

<a href="https://pagedart.com">
  My Great Link
a>

Đả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ẻ

<a href="...">
    My Great Link
a>

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

<a href="...">
    My Great Link
a>

Để tạo thẻ

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

<img src="/favicon-32x32.png">

Đ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ẻ

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

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ẻ

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
a>

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

Bằng cách thêm thẻ

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

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ẻ

<a href="...">
    My Great Link
a>

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
  PageDart Home 
a>

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

<a href="...">
    My Great Link
a>

<a href="...">
    My Great Link
a>

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

<a href="...">
    My Great Link
a>

Đó là thuộc tính

<a href="https://pagedart.com">
  My Great Link
a>

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

<a href="https://pagedart.com">
  My Great Link
a>

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

<a href="https://pagedart.com">
  My Great Link
a>

<a href="...">
    My Great Link
a>

<a href="https://pagedart.com">
  <img alt="PageDart.com" src="/favicon-32x32.png">
a>

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ẻ

<a href="...">
    My Great Link
a>

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

<style>
  a {
    background-image: url("/favicon-32x32.png");
    display: block;
    height:32px;
    width:32px;
  }
style>
<a href="https://pagedart.com">a>

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

<a href="...">
    My Great Link
a>

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

<img src="/favicon-32x32.png">

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ẻ

<img src="/favicon-32x32.png">

<a href="...">
    My Great Link
a>

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

<style>
  .link {
    background-image: url("/favicon-32x32.png");
    border: 0;
    height:32px;
    width:32px;
  }
style>
<script>
  function goHome() {
    return window.open("https://pagedart.com", "_blank")
  }
script>
<input type="button" class="link" onclick="goHome()"/>

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

<img src="/favicon-32x32.png">

<img src="org.png" alt="Staff Organisation Chart" usemap="#Map">

<map name="Map" id="Map">
	<area
		shape="rect"
		coords="176,14,323,58"
		href="…"
		alt="Chairman"
	>
  <area 
    shape="rect" 
    coords="81,75,226,114" 
    href="…"
    alt="Secretary"
  >
  <area 
    shape="rect" 
    coords="6,138,155,182" 
    href="…"
    alt="Marketing Director"
  >
  <area 
    shape="rect"
    coords="175,138,323,182"
    href="…"
    alt="Sales Director"
  >
  <area
    shape="rect" 
    coords="345,136,496,186" 
    href="…"
    alt="Finance Director"
  >
map>

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

<img src="/favicon-32x32.png">

<a href="...">
    My Great Link
a>

Sau đó, trong thẻ

<img src="/favicon-32x32.png">

<a href="https://pagedart.com">
  <img src="/favicon-32x32.png">
a>