Khi bạn học lập trình web, việc hiểu và sử dụng đường dẫn trong HTML là một phần quan trọng của quá trình phát triển trang web. Đường dẫn cho phép bạn liên kết đến các tài nguyên như hình ảnh, tệp tin CSS, mã JavaScript, và nhiều thứ khác. Trong bài viết này, chúng ta sẽ tìm hiểu về ba loại đường dẫn chính trong HTML: đường dẫn tuyệt đối, đường dẫn tương đối và đường dẫn cơ sở (base path).
Video hướng dẫn 3 loại dường dẫn trong website
Tôi đã tạo video hướng dẫn và ví dụ ở dưới để bạn dễ dàng thực hành và hiểu cách sử dụng đường dẫn trong lập trình web.
1. Đường Dẫn Tuyệt Đối (Absolute Paths)
Đường dẫn tuyệt đối chỉ định một địa chỉ chính xác từ gốc của trang web hoặc máy chủ đến tệp mục tiêu. Chúng được sử dụng khi bạn biết chính xác nơi tệp cần đến.
Ví dụ: Giả sử bạn có một hình ảnh có tên “myimage.jpg” nằm trong thư mục “/images” trên trang web của bạn.
<img src="https://example.com/images/myimage.jpg">
2. Đường Dẫn Tương Đối (Relative Paths)
Đường dẫn tương đối dựa trên vị trí tệp HTML hiện tại và tệp mục tiêu. Chúng thường được sử dụng khi bạn muốn liên kết đến các tệp trong cùng cấu trúc thư mục.
Ví dụ: Giả sử bạn có một trang HTML và một hình ảnh “myimage.jpg” trong cùng thư mục.
<img src="myimage.jpg">
Ví dụ: Nếu hình ảnh “myimage.jpg” nằm trong thư mục con “images” của thư mục hiện tại:
<img src="images/myimage.jpg">
Trong dường dẫn tương đối có 2 loại
2.1. Đường Dẫn Tiến (Forward Path)
Đường dẫn tiến (forward path) sử dụng để truy cập các tệp hoặc thư mục con (subfolders) nằm bên trong thư mục hiện tại. Điều này hữu ích khi bạn muốn liên kết đến các tài nguyên ở cùng một cấp hoặc trong một thư mục con.
Ví dụ: Giả sử bạn có cấu trúc thư mục sau:
- root/
- index.html
- images/
- myimage.jpg
- css/
- style.css
Trong tệp HTML “index.html”, bạn muốn sử dụng hình ảnh “myimage.jpg” trong thư mục “images.” Bạn có thể sử dụng đường dẫn tiến như sau:
<img src="images/myimage.jpg">
2.2. Đường Dẫn Lùi (Backward Path)
Đường dẫn lùi (backward path) được sử dụng để truy cập các tệp hoặc thư mục cha (parent folders) so với thư mục hiện tại. Điều này hữu ích khi bạn muốn truy cập tài nguyên nằm ở thư mục cha hoặc các mức thư mục cao hơn.
Ví dụ: Giả sử bạn có cấu trúc thư mục sau:
- root/
- index.html
- projects/
- project1.html
- project2.html
- images/
- myimage.jpgTrong tệp “project1.html,” bạn muốn sử dụng hình ảnh “myimage.jpg” trong thư mục “images,” nằm ở cùng một cấp với thư mục “projects.” Bạn có thể sử dụng đường dẫn lùi như sau:
<img src="../images/myimage.jpg">
Trong trường hợp này, đường dẫn ../ cho biết bạn muốn đi từ tệp “project1.html” lên thư mục cha (root) và sau đó vào thư mục “images.”
Tương tự, nếu bạn muốn đi lùi bao nhiêu thư mục bạn sử dụng cú pháp “../” để lùi bấy nhiêu thư mục tương ứng.
3. Đường Dẫn Cơ Sở (Base Path)
Đường dẫn cơ sở (base path) được định nghĩa bằng cách sử dụng thẻ <base> trong phần <head> của tài liệu HTML. Nó thiết lập một đường dẫn gốc cho toàn bộ tài liệu, từ đó tất cả đường dẫn tương đối sẽ dựa vào nó.
Ví dụ: Trong thẻ <head> của tài liệu HTML, bạn định nghĩa một đường dẫn cơ sở:
<base href="https://example.com/mywebsite/">
Sau đó, trong phần thân của tài liệu, bạn có thể sử dụng đường dẫn tương đối mà không cần bắt đầu từ gốc:
<img src="images/myimage.jpg">
Khi đó, trình duyệt sẽ tự động kết hợp đường dẫn cơ sở với đường dẫn tương đối, tạo thành đường dẫn tuyệt đối đúng.
Tổng kết
Việc hiểu cách sử dụng các loại đường dẫn trong HTML quan trọng vì nó ảnh hưởng đến cách trang web của bạn tải và hiển thị tài nguyên. Sử dụng đúng loại đường dẫn giúp tránh lỗi tải tệp, cải thiện hiệu suất trang web và làm cho việc phát triển trang web dễ dàng hơn.
Theo kinh nghiệm của tôi nếu dự án có cấu trúc folder phức tạp bạn nên sử dụng đường dẫn cơ sở đễ dễ dàng kiểm soát các đường dẫn đi vào các tài nguyên như hình ảnh, file css, file js của dự án.
Khi đó vị trí tương đối được xét từ root dự án được khai báo ở base – đường dẫn cơ sở.
Việc của bạn ngay bây giờ hãy bật Visual Studio Code sau đó thử code lại các ví dụ trên để hiểu về đường dẫn trong html.
Tiện thể, nếu bạn muốn học bài bản và đi theo lập trình web nhưng đang bế tắc không biết học thế nào cho hiệu quả thì hãy khám phá ngay lộ trình học web đi làm unitop đã giúp cho hàng ngàn người học và đi làm lập trình web thu nhập 8-30tr chỉ sau 5-6 tháng nỗ lực dưới sự kèm cặp trực tiếp của tôi và trên 1.200 bài học chất lượng.
Phan Văn Cương founder unitop.vn
Tìm kiếm liên quan:
The path trong HTML
Đường dẫn tương đối trong HTML
Đường dẫn tương đối là gì
Đường dẫn tương đối và tuyệt đối
Đường dẫn tương đối trong Windows
Đường dẫn ảnh trong HTML
Lấy đường dẫn file trong JavaScript
