1. Link đến trang khác bằng phần tử Anchor trong HTML
Nếu bạn muốn Link sang một trang khác trên trang của mình hay trang của người khác thì bạn có thể sử dụng các phần tử Anchor trong HTML.
VD: Đây là một Link sử dụng thuộc tính Anchor trỏ đến trang chủ NIIT - ICT Hà Nội
Trong đó:
-
NIIT - ICT Hà Nội là văn bản neo (Anchor text)
-
Khi bạn click vào thì chuyển hướng đến trang chủ niithanoi.edu.vn.
Các phần tử Anchor cần có một địa chỉ đích (href) để trỏ đến, và nó sử dụng thuộc tính href. Và nó cần một phần tử để hiện ra màn hình giúp người dùng có thể ckick vào, ví dụ: Neo văn bản, ảnh, nút,…
Đây là đoạn code ví dụ về phần tử Anchor trong HTML bên trên:
Bài tập 1: Sử dụng thẻ a để tạo liên kết cho ảnh con mèo trỏ đến website niithanoi.edu.vn với "cat photos" làm văn bản neo
2. Liên kết đến phần nội bộ (internal link) của trang có phần tử Anchor
Các phần tử Anchor cũng có thể được sử dụng để tạo các liên kết bên trong (internal link) để chuyển đến các phần khác nhau trong một trang web.
Để tạo liên kết nội bộ, bạn chỉ định thuộc tính href của liên kết bằng dấu # cộng với giá trị của thuộc tính id cho phần tử mà bạn muốn tạo liên kết nội bộ, thường là dùng để di chuyển nhanh đến các phần trong 1 trang.
Sau đó, bạn cần phải thêm thuộc tính id giống với phần tử bạn đang liên kết đến. Id là một thuộc tính mô tả một phần tử duy nhất.
Khi người dùng nhấp vào liên kết ‘Cuộn lên top’, cho dù màn hình của bạn đang ở vị trí nào trong trang web, nó cũng sẽ tự động cuộn đến vị trí thẻ h2 có id=”topHeader”
Thay đổi liên kết bên ngoài trang của bạn thành liên kết nội bộ bằng cách thay đổi thuộc tính href thành 'footer' và văn bản từ 'cat photos' thành 'Jump to Bottom'.
Bài tập 2:
-
Thay đổi đia chỉ trong thuộc tính href=” http://niithanoi.edu.vn” bằng “#footer” và thay đổi văn bản neo bằng “Jum to Boottom”
-
Hãy Loại bỏ thuộc tính target = '_ blank' khỏi thẻ anchor vì nếu để thế này thì liên kết sẽ mở trong một cửa sổ mới.
-
Sau đó, thêm thuộc tính id với giá trị 'footer' vào phần tử <footer> ở cuối trang.
3. Lồng phần tử Anchor trong phần tử HTML khác
Bạn có thể đặt tạo liên kết ở rất nhiều nơi, lồng bên trong các phần tử khác, ví dụ:
Khi người dùng nhấp vào văn bản neo Link đến niithanoi.edu.vn, trình duyệt sẽ chuyển hướng bạn đến trang đích là https://niiticthanoi.edu.vn
Chia nhỏ ví dụ trên:
-
Văn bản thông thường được bao bọc trong phần tử p: <p>Đây là … để bạn chuyển đến khi click vào link</p>
-
Tiếp đến là thẻ link, <a target="_blank" href="http://niithanoi.edu.vn">Link đến niithanoi.edu.vn</a>
-
target là thuộc tính chỉ định vị trí mở liên kết và giá trị '_blank' chỉ định để mở liên kết trong tab mới.
-
href là thuộc tính thẻ liên kết chứa địa chỉ URL của liên kết:
Văn bản, ‘Link đến niithanoi.edu.vn’, trong phần tử a được gọi là văn bản neo, sẽ hiển thị liên kết để người dùng có thể nhấp vào:
4. Bài tập về phần tử Anchor trong HTML
Bây giờ, hãy lồng phần tử a hiện có của bạn trong một phần tử p mới (ngay sau phần tử main hiện có).
Đoạn mới phải có văn bản cho biết 'Xem thêm ảnh con mèo', trong đó 'ảnh con mèo' là một liên kết và phần còn lại của văn bản là văn bản thuần túy.
Đôi khi bạn muốn tạo thẻ link nhưng chưa nhập địa chỉ vào thuộc tính href = ””, trong trường hợp này thì bạn có thể để href = "#".
Điều này cũng hữu ích khi thông thường chúng ta sẽ thiết kế HTML trước, sau đó tùy yêu cầu mà thay đổi ảnh động bằng cách sử dụng JavaScript (chúng ta sẽ tìm hiểu cách làm đó về sau này).