Bạn sẽ nối ba trang của website, hiểu đường dẫn tương đối, tuyệt đối và liên kết trong trang, đồng thời tránh lỗi ảnh hoặc liên kết hoạt động trên máy mình nhưng hỏng khi triển khai.

Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.

Liên kết giúp người đọc đi tới đâu?

a với href tạo liên kết tới một tài nguyên hoặc vị trí. Nội dung liên kết nên cho biết điều sẽ xảy ra, như “Đọc bài giới thiệu HTML”, thay vì nhiều liên kết cùng ghi “Bấm vào đây”. Liên kết dùng để điều hướng; button dùng để thực hiện một hành động, chẳng hạn mở hộp thoại.

Mở một trang khác không phải lý do để dùng div có sự kiện click. Phần tử a đã có hành vi bàn phím, menu ngữ cảnh và các khả năng trình duyệt hỗ trợ sẵn.

Vẽ cấu trúc thư mục trước

goc-hoc-web/
├── index.html
├── bai-viet.html
├── lien-he.html
└── images/
    └── goc-hoc-web.png

Từ index.html, href=”bai-viet.html” tìm tệp cùng thư mục. href=”images/goc-hoc-web.png” đi vào thư mục con. Nếu tệp hiện tại nằm trong thư mục con, ../ giúp đi lên một cấp. Cần hiểu vị trí của tệp hiện tại chứ không sao chép đường dẫn theo cảm tính.

Tương đối, từ gốc website và tuyệt đối

Đường dẫn bắt đầu bằng / khi mở qua file:/// có thể không dẫn tới nơi bạn mong đợi. Các ví dụ tải về dùng đường dẫn tương đối cho ba trang, còn khi kiểm tra đường dẫn từ gốc website nên dùng máy chủ cục bộ. Không dùng C:\Users\… làm địa chỉ ảnh của website cho người khác.

Đi tới một mục ngay trong trang

Gắn id=”tai-lieu” cho heading và tạo href=”#tai-lieu”. Trình duyệt dùng fragment để tìm phần tử có ID tương ứng. Trong một tài liệu, ID phải là duy nhất. Có thể kết hợp đường dẫn trang và fragment, ví dụ bai-viet.html#chuan-bi.

Tên tệp và tên fragment nên dễ đọc, ổn định. Tránh dùng khoảng trắng hoặc đổi tên sau khi đã phát hành mà không cập nhật các liên kết. Phân biệt chữ hoa và thường có thể khác giữa hệ thống máy bạn với hosting; dùng tên chữ thường nhất quán là lựa chọn thuận tiện.

Mở tab mới có chủ đích

Không cần ép mọi liên kết mở tab mới. Nếu thật sự cần, dùng target=”_blank” và thông báo phù hợp trong nội dung. rel=”noopener” làm rõ việc không cung cấp window.opener cho trang mới; trình duyệt hiện đại cũng có hành vi bảo vệ liên quan.

Tự thử đường đi index → bài viết → liên hệ → trang chủ. Với ví dụ nhúng trong bài, một số chức năng như mở tab mới có thể bị sandbox giới hạn; hãy mở bộ ví dụ trong tab riêng hoặc tải về khi cần kiểm tra đủ hành vi.

Ví dụ để tự chạy

Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.

<h1>Góc học web</h1>
<p><a href="bai-viet.html">Đọc bài giới thiệu HTML</a></p>
<p><a href="lien-he.html">Liên hệ với Góc học web</a></p>
<p><a href="#tai-lieu">Đến mục tài liệu</a></p>
<h2 id="tai-lieu">Tài liệu</h2>
<p><a href="https://developer.mozilla.org/" target="_blank" rel="noopener">Mở MDN trong tab mới</a></p>

Kết quả hiển thị

Liên kết tới hai tệp hoạt động khi chúng cùng tồn tại trong thư mục. Liên kết tài liệu dùng ID để điều hướng trong trang; bộ tải về có các trang đích sẵn.

Mở ví dụ bài 05 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• href=”#” không thay thế một đích đến thật: điền đúng URL hoặc dùng button cho hành động.
• Dùng dấu gạch chéo ngược của Windows: dùng / trong URL.
• Đổi tên tệp nhưng quên liên kết: kiểm tra lại mọi đường dẫn liên quan.

Tự kiểm tra

• Tạo liên kết từ trang bài viết về trang chủ.
• Chuyển tệp vào thư mục con rồi tính lại đường dẫn, không thử ngẫu nhiên nhiều dấu ../.

Tra cứu khi cần

• Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng
• Phân biệt ID và Class trong HTML

Tài liệu gốc về chủ đề này trên MDN / HTML Standard

Mục lục lộ trình HTML 16 bài · Thư viện bài HTML tra cứu