BÀI 2. TỔNG QUAN VỀ NGÔN NGỮ HTML
5. S IÊU LIÊN KẾT – H YPERLINK
Siêu liên kết – Hyperlink – là mối liên kết giữa hai phần tử thông tin trong một siêu văn bản. Có 3 loại siêu liên kết:
Liên kết trong (Internal link): liên kết các phần tử thông tin trong cùng một tài liệu.
Hình 1-3-1: Liên kết trong Liên kết ngoài (External link): liên kết đến một
tài liệu khác, tài liệu được liên kết tới có thể nằm trong cùng một Website hoặc liên kết ra Website khác.
Hình 1-3-2: Liên kết ngoài
Liên kết có thể thực thi được (Executable): liên kết gọi thực thi một chương trình hoặc một đoạn mã lệnh. Liên kết này cho phép truy xuất đến cơ sở dữ liệu.
Hình 1-3-3: Liên kết có thể thực thi được
5.1. Liên kết trong
Đôi khi nội dung trang Web quá dài, chiếm nhiều trang màn hình, nhưng các phần nội dung lại có mối liên hệ chặt chẽ. Khi đó ta cần đặt các liên kết để khi cần người dùng có thể click chọn phần nội dung họ quan tâm mà không cần phải kéo thanh trượt để tìm kiếm đoạn đó.
Để thực hiện điều này, trước tiên cần định nghĩa vị trí đích – nơi sẽ được liên kết đến, ta sử dụng thẻ <a> … </a> theo cú pháp:
Khi đã có các vị trí đích, bạn chỉ cần tạo liên kết để người dùng click vào theo cú pháp:
Để hiểu rõ hơn về cách hoạt động của liên kết trong, mời các bạn tham khảo ví dụ bên dưới
<a href=“#TenViTri”> Từ hiển thị liên kết </a>
Hình 1-3-4: Trang Vidu1-3-1.html Ví dụ 1-3-1: Liên kết trong
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ví dụ 1-3-1</title> </head>
<body>
<p align="center"><font color="violet" size="6"><a name="dautrang">Tìm hiểu về siêu liên kết</a></font></p>
<p align="justify">
Siêu liên kết – Hyperlink – là mối liên kết giữa hai phần tử thông tin trong một siêu văn bản. Có 3 loại siêu liên kết:</p>
<ol type="a">
<li><a href="#IL">Liên kết trong (Internal link)</a></li>
<li><a href="#EL">Liên kết ngoài (External link)</a></li>
<li><a href="#EX">Liên kết có thể thực thi được (Executable)</a></li>
</ol>
Trong đó
<p align="justify"><a name="IL">Liên kết trong (Internal link):</a> liên kết các phần tử thông tin trong cùng một tài liệu.</p>
Hình ảnh minh họa liên kết trong: <br>
<img src="hinhanh/lien ket trong.png">
<p align="justify"><a name="EL">Liên kết ngoài (External link):</a> liên kết đến một tài liệu khác, tài liệu được liên kết tới có thể nằm trong cùng một Website hoặc liên kết ra
Website khác.</p>
Hình ảnh minh họa liên kết ngoài: <br> <img src="hinhanh/lien ket ngoai.png">
<p align="justify"><a name="EX">Liên kết có thể thực thi được (Executable):
</a>liên kết gọi thực thi một chương trình hoặc một đoạn mã lệnh. Liên kết này cho phép truy xuất đến cơ sở dữ liệu.</p>
Hình ảnh minh họa liên kết có thể thực thi được: <br>
<img src="hinhanh/lien ket co the thuc thi.png"> <a href="#dautrang">Về đầu trang</a>
</body>
</html>
5.2. Liên kết ngoài
Đối với liên kết ngoài, chúng ta chỉ dùng một cú pháp duy nhất là:
<a href=“URL” target="_blank/_new/_parent/_seft/_top/frame-name"> Từ hiển thị liên kết </a>
Trong đó:
URL có thể là địa chỉ tương đối hoặc tuyệt đối, có thể là đường dẫn đến một tập tin HTML khác trong cùng một Website hay địa chỉ của một Website khác.
Target là thuộc tính quy định cách mở liên kết. Mặc định là mở trên chính trang hiện hành _parent / _seft. Nếu bạn muốn hiển thị nội dung sắp được liên kết đến trong một khung nào đó (định nghĩa khung sẽ được nói rõ ở phần sau) thì hãy đặt target chính bằng tên khung.
Ví dụ 1-3-2: Liên kết ngoài
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ví dụ 1-3-2</title> </head>
<body>
<p align="center"><font color="violet" size="6">Ví dụ về liên kết ngoài
</font> </p>
Danh sách các ví dụ:<br>
<a href="Vidu1-2-1.html">Ví dụ thẻ div</a> <br> <a href="vidu1-2-2.html">Ví dụ thẻ p</a><br>
<a href="vidu1-2-3.html">Ví dụ các thẻ Heading</a><br> <a href="vidu1-2- 4.html"> Ví dụ các thẻ định dạng chữ</a><br>
<a href="vidu1-2-5.html">Ví dụ thẻ marquee</a><br> <a href="vidu1-2- 6.html">Ví dụ thẻ ul</a><br>
<a href="vidu1-2-7.html">Ví dụ thẻ ol</a><br> <a href="vidu1-2-8.html">Ví dụ thẻ img</a><br> <a href="vidu1-2-9.html">Ví dụ thẻ bgsound và
embed</a><br>
<a href="vidu1-3-1.html">Ví dụ liên kết trong</a><br> <a href="vidu1-3- 2.html">Ví dụ liên kết ngoài</a><br> Danh sách liên kết Website:<br>
<a href="http://google.com">Tìm kiếm với google</a><br> <a
href="http://tvu.edu.vn">Website trường Cao đẳng nghề CN Việt Hàm</a>
</body>
</html>