Khi website có nhiều tệp và thư mục, bạn cần viết đường dẫn đúng để liên kết, ảnh, CSS hoạt động. Bài này cũng hướng dẫn đặt tiêu đề trang và biểu tượng favicon trên tab trình duyệt.
Bạn sẽ học được
- Viết đường dẫn tuyệt đối và tương đối
- Dùng ../ và / đúng cách
- Đặt title phù hợp SEO
- Thêm favicon cho website
Thuật ngữ cần biết
- Đường dẫn tương đối
- Tính từ vị trí tệp hiện tại.
- ../
- Đi lên thư mục cha.
- / đầu đường dẫn
- Tính từ thư mục gốc website.
- Favicon
- Biểu tượng nhỏ hiển thị trên tab.
Khái niệm và lý thuyết
website/
├── index.html
├── css/style.css
├── images/logo.png
└── bai-viet/
└── bai-1.html| Đứng ở | Muốn trỏ tới | Đường dẫn |
|---|---|---|
| index.html | images/logo.png | images/logo.png |
| bai-viet/bai-1.html | images/logo.png | ../images/logo.png |
| bất kỳ trang nào | images/logo.png | /images/logo.png (từ gốc) |
| bất kỳ | trang ngoài | https://tuhoctin.net |
Nên dùng đường dẫn tương đối cho tệp trong cùng website: khi đổi tên miền, các liên kết vẫn đúng.
Tiêu đề trang
<head>
<title>Học HTML cơ bản - Tự Học Tin</title>
</head>Tiêu đề hiển thị trên tab, khi lưu dấu trang và là dòng xanh trong kết quả Google. Viết 50–60 ký tự, chứa từ khóa chính, mỗi trang một tiêu đề riêng.
Favicon
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180x180 -->Tạo favicon nhanh từ ảnh logo bằng realfavicongenerator.net.
Mẹo hay
Trên Windows, đường dẫn trong máy dùng dấu \, nhưng trong HTML luôn dùng dấu /.
Lưu ý
Đường dẫn kiểu C:\Users\...\anh.jpg chỉ chạy trên máy bạn; đưa lên mạng sẽ hỏng.
Thực hành
- Tạo cấu trúc thư mục như trên và liên kết đúng giữa các trang.
- Đặt title riêng cho 3 trang.
- Tạo favicon cho website cá nhân.
Tóm tắt bài học
- Tương đối cho tệp nội bộ, tuyệt đối cho trang ngoài.
- ../ lên thư mục cha, / bắt đầu từ gốc.
- title quan trọng với SEO; favicon nhận diện website.