bài 11: liên kết trong html

Liên kết được tìm thấy ở gần như tất cả các trang web. Liên kết cho phép người dùng nhấp vào đường từ trang này sang trang.

---

Liên kết HTML - Hyperlinks

HTML liên kết là các siêu liên kết.

Một liên kết là một văn bản hoặc hình ảnh mà bạn có thể nhấp vào, và nhảy đến một tài liệu khác.

---

Liên kết HTML - Cú pháp

Trong HTML, các liên kết được định nghĩa với các từ khóa <a>:

<a href=" url "> link text </a>

Thí dụ

<a href="http://www.w3schools.com/html/">Visit our HTML tutorial</a>

Các thuộc tính href xác định địa chỉ đích (http://www.w3schools.com/html/)

Các văn bản liên kết là phần nhìn thấy được (Thăm hướng dẫn HTML của chúng tôi).

Nhấp chuột vào các văn bản liên kết, sẽ đưa bạn đến các địa chỉ quy định.

	Các văn bản liên kết không phải là văn bản. Nó có thể là một hình ảnh HTML hoặc bất kỳ phần tử HTML khác.

	Nếu không có một dấu gạch chéo trên các địa chỉ thư mục con, bạn có thể tạo ra hai yêu cầu đến máy chủ. Nhiều máy chủ sẽ tự động thêm một dấu gạch chéo vào địa chỉ, và sau đó tạo ra một yêu cầu mới.

---

Liên kết trong nước

Ví dụ trên sử dụng một URL tuyệt đối (Một trang web địa chỉ đầy đủ).

Một liên kết cục bộ (liên kết đến các trang web tương tự) được quy định với một URL tương đối (không có http: // www ....).

Thí dụ

<a href="html_images.asp">HTML Images</a>

---

Liên kết HTML - Màu sắc

Khi bạn di chuyển chuột qua một liên kết, hai điều sẽ thường xảy ra:

• Chuột mũi tên sẽ biến thành một bàn tay nhỏ
• Màu sắc của các yếu tố liên kết sẽ thay đổi

Theo mặc định, một liên kết sẽ xuất hiện như thế này (trong tất cả các trình duyệt):

• Một liên kết unvisited là gạch dưới và màu xanh
• Một liên kết đến thăm là gạch dưới và màu tím
• Một liên kết hoạt động là gạch chân và đỏ

Bạn có thể thay đổi màu sắc mặc định, bằng cách sử dụng phong cách:

Thí dụ

<style>
a:link    {color:green; background-color:transparent; text-decoration:none}
a:visited {color:pink; background-color:transparent; text-decoration:none}
a:hover   {color:red; background-color:transparent; text-decoration:underline}
a:active  {color:yellow; background-color:transparent; text-decoration:underline}
</style>

---

Liên kết HTML - Các mục tiêu Attribute

Các thuộc tính mục tiêu xác định nơi để mở tài liệu được liên kết.

Ví dụ này sẽ mở tài liệu được liên kết trong một cửa sổ trình duyệt mới hoặc trong một tab mới:

Thí dụ

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Target Value	Description
_blank	Opens the linked document in a new window or tab
_self	Opens the linked document in the same frame as it was clicked (this is default)
_parent	Opens the linked document in the parent frame
_top	Opens the linked document in the full body of the window
framename	Opens the linked document in a named frame

Nếu trang web của bạn bị khóa trong một khung hình, bạn có thể sử dụng target = "_ top" để thoát ra khỏi khung:

Thí dụ

<a href="http://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

---

HTML Links - Hình ảnh như Link

Nó được phổ biến để sử dụng hình ảnh là liên kết:

Thí dụ

<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

	border: 0 được thêm vào để tránh IE9 (và trước đó) hiển thị một đường viền xung quanh hình ảnh.

---

HTML Links - Tạo Bookmark

đánh dấu HTML được sử dụng để cho phép người đọc để nhảy đến các bộ phận cụ thể của một trang Web.

Đánh dấu là thực tế nếu trang web của bạn có các trang web dài.

Để làm cho một chỉ, trước tiên bạn phải tạo các bookmark, và sau đó thêm một liên kết đến nó.

Khi liên kết được nhấp, trang sẽ di chuyển đến vị trí có dấu.

Thí dụ

Đầu tiên, tạo một bookmark với thuộc tính id:

<h2 id="tips">Useful Tips Section</h2>

Sau đó, thêm một liên kết đến các trang đánh dấu ( "Lời khuyên hữu ích Phần"), từ bên trong cùng một trang:

<a href="#tips">Visit the Useful Tips Section</a>

Hoặc, thêm một liên kết đến các trang đánh dấu ( "Lời khuyên hữu ích Phần"), từ một trang khác:

Thí dụ

<a href="html_tips.html#tips">Visit the Useful Tips Section</a>

---

Chương Tóm tắt

• Sử dụng các phần tử HTML <a> để xác định một liên kết
• Sử dụng các thuộc tính href HTML để xác định địa chỉ liên kết
• Sử dụng các thuộc tính mục tiêu HTML để xác định nơi để mở các tài liệu liên quan
• Sử dụng các phần tử HTML <img> (bên <a>) để sử dụng một hình ảnh như một liên kết
• Sử dụng các thuộc tính id HTML (id = "giá trị") để xác định bookmark trong một trang
• Sử dụng các thuộc tính href HTML (href = "# giá trị") để liên kết đến bookmark

---