Một trang web có thể chứa các đường liên kết khác nhau để liên kết trực tiếp với các trang khác hoặc trong một phần của trang. Những liên kết này được gọi là Hyperlinks (siêu liên kết)

Siêu liên kết cho phép khách truy cập vào các trang web khác nhau bằng cách nhấn chuột vào từ, cụm từ và hình ảnh. Vì vậy, bạn có thể tạo các đường Siêu liên kết sử dụng văn bản hoặc hình ảnh có trên trang web của bạn

I. Liên kết văn bản trong HTML

Gắn thẻ trong HTML

Một liên kết được xác định bằng cách sử dụng thẻ . Thẻ này gọi là thẻ neo (anchor tag), và bất kỳ ở giữa thẻ mở và thẻ đóng trở thành một phần của đường liên kết và khi người sử dụng có thể nhấn chuột vào phần đó để tới với tài liệu được gán liên kết. Dưới đây là cú pháp sử dụng thẻ .

 href="đường dẫn url tới trang HTML" .. danh-sách-thuộc-tính>Link Text

Ví dụ liên kết văn bản trong HTML

Hãy cùng xem ví dụ sau mà liên kết với trang http. //vietjack. com trong trang của bạn

Click chuot vao duong link sau:
 href="http://vnexpress.net" target="_self">

Một trang web có thể chứa các đường liên kết khác nhau để liên kết trực tiếp với các trang khác hoặc trong một phần của trang. Những liên kết này được gọi là Hyperlinks (siêu liên kết)

Siêu liên kết cho phép khách truy cập vào các trang web khác nhau bằng cách nhấn chuột vào từ, cụm từ và hình ảnh. Vì vậy, bạn có thể tạo các đường Siêu liên kết sử dụng văn bản hoặc hình ảnh có trên trang web của bạn

Thuộc tính mục tiêu trong HTML

Chúng ta đã sử dụng thuộc tính mục tiêu trong ví dụ trước. Thuộc tính này được sử dụng để xác định vị trí nơi đường liên kết được mở. Dưới đây là các tùy chọn

Tùy chọnMiêu tả_trốngMở trang liên kết trong cửa sổ new_selfMở trang liên kết trong cùng một khung giống với khung chứa liên kết_parentMở trang liên kết trong khung nguồn chứa đường link_topMở trang liên kết trong cửa sổ toàn màn hình targetframeMở tài liệu được liên kết trong khung mục tiêu đã đặt

Ví dụ

Dưới đây là ví dụ để hiểu sự khác nhau của các cơ bản trong các tùy chọn ở trên

 href="../html/">


Click chuot vao mot trong cac link sau:
 href="../html/text_link_trong_html.jsp" target="_blank">Vi du gia tri _blank |
 href="../html/text_link_trong_html.jsp" target="_self">Vi du gia tri _self |
 href="../html/text_link_trong_html.jsp" target="_parent">Vi du gia tri _parent |
 href="../html/text_link_trong_html.jsp" target="_top">Vi du gia tri _top

Nó sẽ hiển thị kết quả sau đó, bạn nhấp chuột vào các đường liên kết khác nhau để hiểu sự khác nhau giữa các tùy chọn trên thuộc tính mục tiêu

Click chuột vào một trong các link sau

Vi du gia tri _blank. Vi du gia tri _self. Vi du gia tri _parent. Vi du gia tri _top

Use Base Link in HTML

Khi bạn liên kết tài liệu HTML với cùng một trang web, nó không yêu cầu một địa chỉ URL đầy đủ cho tất cả mọi link. Bạn có thể từ bỏ nó nếu bạn sử dụng thẻ trong phần tiêu đề tài liệu. Thẻ này được sử dụng để cung cấp một đường link cơ sở cho tất cả các link. Vì thế, trình duyệt sẽ xâu chuỗi các đường link liên quan với đường link cơ sở và sẽ làm cho nó thành một đường link đầy đủ.

Ví dụ

Dưới đây là ví dụ về sử dụng thẻ để xác định đường link cơ sở URL và sau đó chúng ta có thể sử dụng các đường liên quan cho tất cả các đường link mà không cần cung cấp đường liên kết đầy đủ cho các link.

 href="../html/">


Click chuot vao duong link sau:
 href="../html/text_link_trong_html.jsp" target="_blank">Bai huong dan HTML

Kết quả là khi bạn nhấn vào đường liên kết. Bai huong dan HTML

Now now, URL has for

Bấm chuột vào đường link sau

Bai huong dan HTML

Liên kết tới một vùng trang trong HTML

Bạn có thể tạo một liên kết đến khu vực cụ thể trong trang web bằng cách sử dụng thuộc tính tên. Bạn đã thực hiện qua 2 bước

Đầu tiên tạo một liên kết tới khu vực trong trang mà bạn muốn tới và đặt tên nó sử dụng thẻ như ở dưới đây:

Vi du text link trong HTML  name="top">

Bước 2, bạn tạo ra một siêu liên kết để kết nối tài liệu và xác định vị trí mà bạn muốn truy cập

 href="../html/text_link_trong_html.jsp#top">Ve dau trang

Nó sẽ tạo ra đường liên kết sau, từ đó bạn nhấn chuột vào Ve dau trang để về phần đầu của trang

Vệ dầu trang

Thiết lập màu cho các liên kết trong HTML

Bạn có thể thiết lập màu cho link của bạn, ví dụ: active link và visited link bằng cách sử dụng các thuộc tính link, alink và vlink của thẻ .

Ví dụ

Dưới đây là một ví dụ. You save code in test. htm và mở nó bằng bất kỳ trình duyệt nào để hiểu cách các thuộc tính liên kết, alink và vlink đang làm việc này

 href="../html/">

 alink="#54A250" link="#040404" vlink="#F40633">
Click chuot vao duong link sau:
 href="../html/text_link_trong_html.jsp" target="_blank" >Bai huong dan HTML

Nó sẽ tạo ra kết quả sau

Bấm chuột vào đường link sau

Bai huong dan HTML

Tạo liên kết tải xuống trong HTML

Bạn có thể tạo các liên kết văn bản cho các tài liệu PDF, DOC hoặc ZIP được tải về máy khi người dùng nhấn vào liên kết đó. Điều này vô cùng đơn giản, bạn chỉ cần cung cấp đầy đủ tên URL của tệp đó. Ví dụ

 href="../html/test.pdf">Download PDF File

Nó sẽ tạo ra kết quả sau

Tải xuống tệp PDF

II. Liên kết hình ảnh trong HTML

Ví dụ Liên kết hình ảnh trong HTML

Dưới đây là một ví dụ về việc sử dụng hình ảnh như một siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong một siêu liên kết tại vị trí của văn bản

________số 8

Kết quả là khi bạn nhấn chuột vào hình ảnh, bạn sẽ truy cập trang được liên kết bởi hình ảnh đó

Bấm vào liên kết sau

Đó là cách đơn giản nhất để tạo ra một đường liên kết sử dụng hình ảnh. Tiếp theo chúng ta học cách tạo các Đường liên kết sử dụng hình ảnh có độ nhạy chuột – Mouse-Sensitive Image Links

Hình ảnh chuột cảm ứng trong HTML

Chuẩn HTML và XHTML cung cấp một tính năng cho phép bạn nhúng nhiều liên kết khác nhau trong một hình ảnh đơn. Bạn có thể tạo ra các liên kết khác nhau trên nền tảng của các liên kết khác nhau có trên hình ảnh. Khi các liên kết khác nhau được đính kèm với các vị trí khác nhau, chúng ta nhấn chuột vào các phần khác nhau của ảnh để mở các vị trí của trang. Những hình ảnh có độ nhạy chuột như vậy được gọi là Image Map

Có 2 cách để tạo Image Map

• Image Map trên Server – Được kích hoạt bởi các thuộc tính imap của thẻ

  Nó được tạo ra bởi đoạn mã trích dẫn sau

  
  
  
  
  
  
  Click vao link sau:
   href="../index.jsp" target="_self"> 
      ismap src="./images/logo3.png" alt="Vietjack Homepage" border="0"/> 
  
  
  

  Sau đó, trình duyệt gửi các tham số tìm kiếm tới Máy chủ mà có thể được xử lý bởi ismap. cgiscript hoặc map file và bạn có thể liên kết bất kỳ tài liệu (web) nào bạn thích tới các liên kết này

  
  
  
  
  
  
  Click chuot vao duong link sau:
   href="http://vnexpress.net" target="_self">

  0

  Theo cách này, bạn có thể gán các liên kết khác nhau cho các tọa độ khác nhau của hình ảnh và khi các tọa độ được nhấn chuột vào, bạn có thể mở các trang web tương ứng. Để hiểu rõ hơn về thuộc tính ismap, bạn có thể theo dõi trong Cách sử dụng Image ismap?

  Image Map trên Client

  Image Map trên Client được cho phép bởi thuộc tính usemap của thẻ và được định nghĩa bởi các thẻ mở rộng đặc biệt

  Hình ảnh dự định để tạo bản đồ được chèn vào trang sử dụng thẻ được coi như là một hình ảnh thông thường, trừ khi nó mang thêm một thuộc tính là usemap. Giá trị của thuộc tính usemap được sử dụng để thẻ

  Thẻ thẻ map xác định hình khối và tọa độ để xác định ranh giới của mỗi lần nhấn chuột vào hình ảnh. Sau đây là ví dụ:

  
  
  
  
  
  
  Click chuot vao duong link sau:
   href="http://vnexpress.net" target="_self">

  1

  Hệ thống tọa độ trong HTML

  Giá trị thực của các tham số phụ thuộc hoàn toàn vào khối hình trong câu hỏi. Dưới đây là tóm tắt sơ lược

  rect = x1 , y1 , x2 , y2x1 và y1 là các góc nghiêng bên trái của hình chữ nhật; . circle = xc , yc ,radiusxc và yc là các tọa độ ở trung tâm của hình tròn, vàradius là bán kính hình tròn. Một vòng tròn trung tâm tại 200,50 với bán kính 25 sẽ có thuộc tính coords=”200,50,25″poly = x1 , y1 , x2 , y2 , x3 , y3 , … xn , yn Các cặp x-y xác định các đỉnh . Và các điểm rộng nhất có thuộc tính coords=”20,20,40,40,20,60,0,40″

  Tất cả các tọa độ đều có quan hệ với góc trên bên trái của ảnh (0,0). Mỗi hình có một URL tương ứng. Bạn có thể sử dụng các hình ảnh trong phần mềm để xem tọa độ của các vị trí khác nhau

  III. Liên kết email trong HTML

  Gắn thẻ email trong HTML

  Thẻ cung cấp cho bạn lựa chọn xác định một địa chỉ email để gửi thư. Trong khi sử dụng thẻ này như một thẻ email, bạn sẽ sử dụng mailto: địa chỉ email cùng với thuộc tínhhref. Dưới đây là cú pháp sử dụng mailto thay vì sử dụng http:

  
  
  
  
  
  
  Click chuot vao duong link sau:
   href="http://vnexpress.net" target="_self">

  2

  Đoạn mã này tạo ra đường liên kết sau mà bạn có thể sử dụng để gửi email

  
  
  
  
  
  
  Click chuot vao duong link sau:
   href="http://vnexpress.net" target="_self">

  3

  Bây giờ nếu người sử dụng nhấn vào liên kết này, nó sẽ chạy một ứng dụng Email (giống như Lotus Notes, Outlook Express…) được cài đặt trong máy tính của người sử dụng. Sẽ không có nguy cơ rủi ro hay nguy hiểm gì khi sử dụng lựa chọn này để gửi email bởi vì nếu người sử dụng không có email Ứng dụng khách cài đặt trên máy, khi đó nó sẽ không thể gửi email được

  Thiết lập mặc định cho email trong HTML

  Bạn có thể thiết lập tiêu đề email mặc định và nội dung email bài hát với địa chỉ email. Dưới đây là ví dụ thiết lập mặc định cho chủ ngữ và nội dung