Khả năng chính của HTML là hỗ trợ liên kết. Một liên kết là sự kết nối đến tài liệu hay tập tin khác hoặc đến một phần khác trong cùng tài liệu đó.
Các địa chỉ đặt liên kết đến có thể là: - Một phần khác trong cùng tài liệu. - Một tài liệu khác.
- Một phần trong tài liệu khác.
- Các tập tin khác: văn bản, hình ảnh, âm thanh,.. - Vị trí hoặc máy chủ khác.
Một liên kết được xác định bởi một địa chỉ URL của tập tin liên kết. Địa chỉ URL phân làm 2 loại:
- Địa chỉ tuyệt đối : Là vị trí tuyệt đối so với mạng Internet, bao gồm một chuỗi đầy đủ giao thức, vị trí mạng, đường dẫn và tên tập tin. Ví dụ: https://www.w3schools.com
- Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang chứa liên kết, chỉ bao gồm một phần nhỏ của đường dẫn tuyệt đối. Một số ký hiệu đường dẫn đặc biệt:
Bảng 2.5. Ký hiệu đƣờng dẫn
Ký hiệu Ý nghĩa
/ Trở về thư mục gốc của website
./ Thư mục hiện tại của trang web sử dụng link (mặc định) ../ Quay ra thư mục cha / đi ngược lại 1 cấp thư mục
Mặc định trong tất cả các trình duyệt các vị trí có liên kết đều được gạch chân, liên kết chưa thăm có màu xanh, liên kết đã thăm có màu tím và liên kết đang nhấn chọn sẽ có màu đỏ.
2.5.1. Tạo liên kết đến tài liệu khác
- Cú pháp:
<a [thuộc tính] > siêu văn bản </a>
- Thuộc tính:
Bảng 2.6. Các thuộc tính thẻ <a>
Thuộc tính Giá trị Ví dụ Mơ tả
href URL href="index.html" Địa chỉ đến liên kết.
target _blank _parent _self _top Target="_blank" Xác định nơi để mở tài liệu.
_blank: mở tài liệu ở cửa sổ mới
_parent: mở tài liệu ở cửa sổ cha của trang hiện hành.
_self: mở tài liệu ở cửa sổ hiện hành
_top: mở tài liệu vào cửa sổ cao nhất
title text title = "trang chủ" Văn bản hiển thị khi di chuyển chuột trên liên kết.
Ví dụ 17: tạo liên kết từ baihoc1.html đến baihoc2.html; baihoc1.html và baihoc2.html đều nằm trong cùng thư mục baihoc
<a href="baihoc2.html">
Bài học 2
Ví dụ 18: tạo liên kết từ baihoc1.html đến baitap1.html; baihoc1.html nằm trong thư mục baihoc, baitap1.html nằm trong thư mục baitap. Baitap va baihoc có cùng thư mục cha là thietkeweb
<a href="../baitap/baitap1.html">Bài tập 1 </a>
Ví dụ 19: tạo liên kết đến trang web ở máy chủ khác
<a href="http://www.intel.com">Intel Home Page
</a>
Ví dụ 20: tạo liên kết đến email
<a href="mailto:hotec@hotec.edu.vn">email Hotec </a>
Ví dụ 21: mở (hay download) một file (file word, excel, pdf, image, ...)
<a href="doc/vidu.doc"> Mở file vidu.doc trong thư mục "doc"</a>
2.5.2. Tạo liên kết đến các phần trong cùng một tài liệu
Để tạo liên kết đến các phần trong cùng một tài liệu thực hiện qua 2 bước: + Bước 1: đánh dấu vị trí neo bằng cách thêm thuộc tính id=“TenViTriNeo” vào thẻ đóng vai trị là điểm tham chiếu (thẻ <p>, thẻ tiêu đề <h1>, <h2>, …)
+ Bước 2: tạo liên kết đến vị trí neo bằng thẻ với thuộc tính href=“#TenViTriNeo”
<a href=“#TenViTriNeo”> Text đại diện </a>
Ví dụ 22: người dùng nhấn vào vị trí „Về Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trong cùng trang web
<h2 id="Chuong1"> Chương 1 </h2>
<!-- Nội dung chương 1 -->
<a href="#Chuong1"> Về Chương 1</a>
Ví dụ 23: người dùng nhấn vào vị trí „Đén Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trên trang web baihoc.html <h2 id="Chuong1"> Chương 1 </h2>
<!-- Nội dung chương 1 -->
2.6. LÀM VIỆC VỚI BẢNG BIỂU TRÊN TRANG WEB 2.6.1. Tạo bảng đơn giản