Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 2-Bài 12. Các thẻ (tag) tạo Siêu liên kết (hyperlink)

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: 22/2/2025, 12:11

Lượt xem: 1304

Siêu liên kết (hyperlink) là gì?

Thiết kếmột dự án web chính là chúng ta sẽ tạo nhiều trang web và liên kết chúng lại với nhau.

Trong HTML5, đã hỗ trợ chúng ta thẻ <a></a> dùng để liên kết các trang web lại với nhau.
Thẻ này có thẻ đóng.
Cú pháp:

<a href="dia_chi_lien_ket">Nội dung hiển thị</a>

Các thuộc tính (attributes) hỗ trợ trong thẻ <font>

Thuộc tính (Attribute)	Giá trị (Value)	Diễn giải (Description)
href	địa chỉ liên kết	Dùng để quy định màu chữ cho văn bản
target	loại liên kết (name, _blank, _parent, _self, _top)	Các loại liên kết name: Tải trang web vào frame có tên là name _blank: Tải trang web vào cửa sổ mới _parent: Tải trang web vào cửa sổ cha _self: Tải trang web vào chính cửa sổ hiện hành _top: Tải trang web vào cửa sổ mức cao nhất

Các loại siêu liên kết trong HTML5

Liên kết ngoài (external link)

Là liên kết đến các trang không phải nằm trong cùng thư mục dự án của bạn. Có thể là:

Liên kết đến một trang web khác (thông qua địa chỉ web URL).
Liên kết gởi EMAIL.
Liên kết gọi điện thoại.

Ví dụ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Liên kết ngoài - URL</h1>
  <a href="https://google.com">Bấm vào đây để đến Google</a><br />
  <a href="https://facebook.com">Ghé thăm Fanpage của tôi</a>

  <h1>Liên kết ngoài - Gởi mail</h1>
  <a href="mailto:phucuong@ctu.edu.vn">Gởi mail phucuong@ctu.edu.vn</a><br />
  <a href="mailto:kinhdoanh@nentang.vn">kinhdoanh@nentang.vn</a><br />

  <h1>Liên kết ngoài - Gọi điện thoại</h1>
  <a href="tel:+84915659223">HOTLINE 0915-659-223</a>
</body>
</html>

Liên kết trong cùng dự án (internal link)

Là liên kết đến các trang nằm trong cùng thư mục dự án của bạn.
Cho cấu trúc thư mục sau:

nentang.vn/                     <- Thư mục gốc dự án
├── index.html                  <- File HTML Trang chủ
├── pages/                      <- Thư mục Chứa các Trang con
│   ├── gioi-thieu.html         <- File HTML Trang Giới thiệu
│   └── lien-he.html            <- File HTML Trang Liên hệ
└── products/                   <- Thư mục Chứa các Trang về Sản phẩm
    ├── laptop/                 <- Thư mục Chứa các Trang về dòng Sản phẩm Laptop
    │   ├── asus.html           <- File HTML Trang Sản phẩm ASUS
    │   └── mac-pro.html        <- File HTML Trang Sản phẩm MAC PRO
    └── phone/                  <- Thư mục Chứa các Trang về dòng Sản phẩm Điện thoại
        ├── iphone.html         <- File HTML Trang Sản phẩm Điện thoại IPHONE
        └── samsung-j7.html     <- File HTML Trang Sản phẩm Samsung J7

Liên kết trong cùng dự án (internal link) thường sử dụng Đường dẫn tương đối (relative path). Đường dẫn tương đối (relative path) được tính từ file bạn đang viết.

Ví dụ 1: tạo đường dẫn liên kết từ Trang chủ `index.html` -> Trang Giới thiệu `gioi-thieu.html`

Cho cấu trúc thư mục dự án như sau:

Chúng ta đang viết code trong Trang chủ (file index.html). Từ Trang chủ (index.html) muốn thấy được file gioi-thieu.html phải đi vào thư mục pages.
Code tạo link từ Trang chủ (index.html) -> đến trang Giới thiệu (gioi-thieu.html) như sau:

<!-- Chúng ta đang viết code trong file index.html -->

<a href="pages/gioi-thieu.html">Nhấp vào đây để đến trang Giới thiệu</a>

Ví dụ 2: tạo đường dẫn liên kết từ Trang Giới thiệu `gioi-thieu.html` -> quay về Trang chủ `index.html`

<!-- Chúng ta đang viết code trong file pages/gioi-thieu.html -->

<a href="../index.html">Nhấp vào đây để quay về Trang chủ</a>

Liên kết trong cùng tập tin (cùng file code HTML)

Là liên kết đến các điểm neo (anchor) đã được đặt tên trong file HTML.
Gồm 2 bước:

Step 1: tạo điểm neo (anchor)

Tạo điểm neo (anchor), sử dụng thẻ <a name="ten_diem_neo"></a>, với:

Giá trị của thuộc tính name phải được đặt theo tên biến (variable): không có dấu cách, không có những ký tự lạ (chỉ là chữ và số), không bắt đầu bằng số
Ví dụ: <a name="chuong18"></a>