Các liên kết trong HTML được gọi là siêu liên kết (hyperlinks). Một siêu liên kết có thể là văn bản hoặc hình ảnh, khi người dùng click vào sẽ chuyển sang một trang HTML hoặc đoạn văn bản khác.
13.1. Thẻ <a>: Định nghĩa một đường liên kết
Cú pháp:
<a href="url">Nhãn liên kết</a>
Trong đó:
- href: thuộc tính đường dẫn, url là địa chỉ liên kết muốn chuyển tới.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="http://minhhienict.blogspot.com/">Trang học lập trình miễn phí</a></p>
</body>
</html>
Kết quả:
13.2. Liên kết nội bộ: Liên kết sang một trang cùng địa chỉ web hiện tại. Liên kết không có dạng http://
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="link_basic.html">Trang chủ</a></p>
</body>
</html>
Kết quả:
13.3. Tạo một đánh dấu (bookmark): Mục đích để tạo liên kết tới một vị trí xác định trên trang web hoặc trang khác cùng một website.
Cú pháp:
<a name="tên bookmark">Nhãn liên kết</a>Nội dung
<a href="#tên bookmark">Nhãn của văn bản liên kết</a>
Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<A href = "#Internet">Giới thiệu về Internet</A><br>
<A href = "#HTML">Giới thiệu về HTML</A><br>
<A name = "Internet">Giới thiệu về Internet</A><br>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính được liên kết với các mạng khác, nối các nước và ngày nay là toàn cầu. Giao thức truyền thông là TCP/IP cung cấp liên kết với tất cả các máy tính trên thế giới.<br>
<A name = "HTML">Giới thiệu về HTML</A><br>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng để tạo và nhận ra tài liệu. Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML. SGML là một phương pháp trình bày các ngôn ngữ định dạng tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo tài liệu HTML. Các hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong trình duyệt
</body>
</html>
Kết quả:
Ví dụ 4:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="#C4">Chuyển tới chương 4</a></p>
<h2>Chương 1</h2>
<p>Giới thiệu chung</p>
<h2>Chương 2</h2>
<p>Bộ xử lý trung tâm</p>
<h2>Chương 3</h2>
<p>Hệ thống nhớ</p>
<h2 id="C4">Chương 4</h2>
<p>Tập lệnh và các chế độ địa chỉ</p>
<h2>Chương 5</h2>
<p>Hệ thống vào ra</p>
<h2>Chương 6</h2>
<p>Màn hình</p>
<h2>Chương 7</h2>
<p>Bàn phím</p>
<h2>Chương 8</h2>
<p>Ổ đĩa</p>
<h2>Chương 9</h2>
<p>Thiết bị ghép nối và truyền thông</p>
</body>
</html>
Kết quả:
13.4. Màu của liên kết
Mặc định, một liên kết sẽ xuất hiện như sau:
- Liên kết chưa được click sẽ có gạch dưới màu xanh lam
- Liên kết đã được click sẽ có gạch dưới màu tím
- Liên kết kích hoạt có gạch dưới màu đỏ
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<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>
</head>
<body>
<p>Bạn có thể thay đổi màu mặc định của liên kết</p>
<a href="link_internal2.html" target="_blank">Đề cương chi tiết</a>
</body>
</html>
Kết quả:
13.5. Thuộc tính target của thẻ a: Xác định vị trí mở văn bản liên kết
Cú pháp:
<a href="url" target="value">Nhãn liên kết</a>
Ví dụ 6:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="http://minhhienict.blogspot.com/" target="_blank">Trang blog lập trình</a>
</body>
</html>
Các giá trị của thuộc tính target:
- _blank: mở liên kết trong một cửa sổ mới hoặc tab mới.
- _self: mở liên kết trong khung hiện tại (mặc định).
- _parent: mở liên kết trong một khung cha.
- _top: mở liên kết trong một khung kín màn hình.
Kết quả:
13.6. Tạo liên kết bằng ảnh
Cú pháp:
<a href="url"><img src="url" alt="text" width="value" height="value"></a>
Ví dụ 7:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="link_basic.html">
<img src="1.jpg" alt="Hướng dẫn học HTML" width="210" height="116" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
Kết quả:
Cú pháp:
<a href="url">Nhãn liên kết</a>
Trong đó:
- href: thuộc tính đường dẫn, url là địa chỉ liên kết muốn chuyển tới.
Ví dụ 1:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="http://minhhienict.blogspot.com/">Trang học lập trình miễn phí</a></p>
</body>
</html>
Kết quả:
Ví dụ 2:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="link_basic.html">Trang chủ</a></p>
</body>
</html>
Kết quả:
Cú pháp:
<a name="tên bookmark">Nhãn liên kết</a>Nội dung
<a href="#tên bookmark">Nhãn của văn bản liên kết</a>
Ví dụ 3:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<A href = "#Internet">Giới thiệu về Internet</A><br>
<A href = "#HTML">Giới thiệu về HTML</A><br>
<A name = "Internet">Giới thiệu về Internet</A><br>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính được liên kết với các mạng khác, nối các nước và ngày nay là toàn cầu. Giao thức truyền thông là TCP/IP cung cấp liên kết với tất cả các máy tính trên thế giới.<br>
<A name = "HTML">Giới thiệu về HTML</A><br>
Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng để tạo và nhận ra tài liệu. Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML. SGML là một phương pháp trình bày các ngôn ngữ định dạng tài liệu. HTML là ngôn ngữ đánh dấu được sử dụng để tạo tài liệu HTML. Các hướng dẫn chỉ rõ một trang web nên được hiển thị như thế nào trong trình duyệt
</body>
</html>
Kết quả:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<p><a href="#C4">Chuyển tới chương 4</a></p>
<h2>Chương 1</h2>
<p>Giới thiệu chung</p>
<h2>Chương 2</h2>
<p>Bộ xử lý trung tâm</p>
<h2>Chương 3</h2>
<p>Hệ thống nhớ</p>
<h2 id="C4">Chương 4</h2>
<p>Tập lệnh và các chế độ địa chỉ</p>
<h2>Chương 5</h2>
<p>Hệ thống vào ra</p>
<h2>Chương 6</h2>
<p>Màn hình</p>
<h2>Chương 7</h2>
<p>Bàn phím</p>
<h2>Chương 8</h2>
<p>Ổ đĩa</p>
<h2>Chương 9</h2>
<p>Thiết bị ghép nối và truyền thông</p>
</body>
</html>
Kết quả:
13.4. Màu của liên kết
Mặc định, một liên kết sẽ xuất hiện như sau:
- Liên kết chưa được click sẽ có gạch dưới màu xanh lam
- Liên kết đã được click sẽ có gạch dưới màu tím
- Liên kết kích hoạt có gạch dưới màu đỏ
Ví dụ 5:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
<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>
</head>
<body>
<p>Bạn có thể thay đổi màu mặc định của liên kết</p>
<a href="link_internal2.html" target="_blank">Đề cương chi tiết</a>
</body>
</html>
Kết quả:
Cú pháp:
<a href="url" target="value">Nhãn liên kết</a>
Ví dụ 6:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="http://minhhienict.blogspot.com/" target="_blank">Trang blog lập trình</a>
</body>
</html>
Các giá trị của thuộc tính target:
- _blank: mở liên kết trong một cửa sổ mới hoặc tab mới.
- _self: mở liên kết trong khung hiện tại (mặc định).
- _parent: mở liên kết trong một khung cha.
- _top: mở liên kết trong một khung kín màn hình.
Kết quả:
Cú pháp:
<a href="url"><img src="url" alt="text" width="value" height="value"></a>
Ví dụ 7:
<!DOCTYPE html>
<html>
<head>
<title>http://minhhienict.blogspot.com/</title>
</head>
<body>
<a href="link_basic.html">
<img src="1.jpg" alt="Hướng dẫn học HTML" width="210" height="116" style="width:42px;height:42px;border:0">
</a>
</body>
</html>
Kết quả:
