Sự khác biệt giữa URL tương đối và URL tuyệt đối là gì?
Liên kết và hình ảnh là hai trong số các tài nguyên phổ biến nhất mà bạn sẽ thêm vào các trang web của mình, vì vậy biết cách giải quyết chúng một cách chính xác là chìa khóa.
Mọi trang web cần tham chiếu đến một số tài nguyên nhất định, cho dù đó là hình ảnh, tệp hay các trang web khác. Quyết định cách liên kết đến các tệp khác là cực kỳ quan trọng để đảm bảo rằng các trình duyệt định vị chúng một cách chính xác.
Bạn có thể liên kết đến các tài nguyên bằng cách sử dụng URL tương đối hoặc tuyệt đối. Điều này áp dụng cho cả tệp cục bộ trên máy tính và URL dựa trên giao thức được truy cập qua web.
Mục Lục
Cách sử dụng đường dẫn URL tuyệt đối
Một URL tuyệt đối chứa toàn bộ đường dẫn đến một vị trí tệp cụ thể. Ví dụ về những điều này bao gồm đường dẫn đầy đủ đến các tệp trên máy tính của bạn:
- tệp: /// C: /Users/Sharl/Desktop/test.html
- tệp: /// C: /Users/John/Documents/Work/Q4Summary.docx
- tệp: /// C: /Users/Mark/Documents/Music/Recording.mp3
Một ví dụ khác bao gồm URL giao thức đầy đủ mà bạn có thể sử dụng để xác định tài nguyên để gửi qua internet. Thông thường nhất, chúng bắt đầu bằng “https” hoặc “http”:
- https://www.google.com
- https://calendar.google.com/calendar
- https://www.airbnb.com.au/rooms
URL tuyệt đối chứa tất cả thông tin cần thiết để định vị tệp hoặc tài nguyên mà bạn đang cố gắng truy cập. Điều này là bắt buộc nếu bạn đang liên kết đến một trang web bên ngoài.
- Xây dựng một trang web đơn giản bằng HTML bằng cách tạo một thư mục mới và thêm hai tệp mới được gọi là index.html và styles.css.
- Trong index.htmlthêm một số mã HTML để tạo một trang web cơ bản:
<!DOCTYPE html>
<html lang="en">
<head>
<title> My Website </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
</div>
</body>
</html> - Trong styles.cssthêm một số kiểu cho trang web.
body {
font-family: Arial, Helvetica, sans-serif;
}.container {
display: flex;
flex-direction: column;
align-items: center;
}.mb28 {
margin-bottom: 28px;
} - Trong index.htmlthêm thẻ bên trong div vùng chứa và thêm URL tuyệt đối vào trang web chính của Google (https://www.google.com).
<a href="https://www.google.com" class="mb28">Google.com</a> - Bạn cũng có thể truy cập hình ảnh trực tuyến bằng cách sử dụng đường dẫn tuyệt đối đầy đủ đến tệp được lưu trữ. Bạn cũng có thể thực hiện các bước bổ sung để đảm bảo rằng bạn đã thêm hình ảnh đáp ứng vào trang web HTML của mình.
<img src="https://images.unsplash.com/photo-1583768138297-718a9cc5b746?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80" alt="Cute bird photo" class="mb28" width="900" height="600"> - Bấm vào index.html để mở nó trong trình duyệt và xem hình ảnh được truy xuất từ vị trí bên ngoài của nó.
- Từ thư mục gốc của trang web của bạn, hãy tạo một thư mục mới để lưu trữ hình ảnh, được gọi là Hình ảnh. Bên trong thư mục, hãy thêm một hình ảnh mới và đặt tên cho nó, chẳng hạn như CuteBird.jpg.
- Xác định đường dẫn tuyệt đối đến tệp hình ảnh bạn vừa thêm. Bạn có thể thực hiện việc này bằng cách tìm nó trong đường dẫn điều hướng của ứng dụng quản lý tệp trên hệ điều hành của bạn. Bạn cũng sẽ cần thêm tên tệp vào cuối đường dẫn. Ví dụ: “C: Users Sharl Desktop Website Images CuteBird.jpg”
- Trong index.htmlhãy thay thế thẻ hình ảnh của bạn bằng một hình ảnh mới sử dụng đường dẫn tuyệt đối trỏ đến CuteBird.jpg tệp được lưu trữ trên máy tính của bạn. Hãy nhớ thêm tiền tố tệp: // để chỉ ra tài nguyên hệ thống tệp cục bộ. Trên Unix và macOS, sau đó bạn có thể nối thêm đường dẫn tuyệt đối mà bạn đã xác định ở bước trước. Trên Windows, bạn sẽ cần thay thế dấu gạch chéo ngược bằng dấu gạch chéo về phía trước và thêm dấu gạch chéo lên trước ký tự ổ đĩa, ví dụ:
<img src="file:///C:/Users/Sharl/Desktop/Website/Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700">
- Bấm vào index.html để mở tệp trong trình duyệt và xem hình ảnh được lưu trữ trên máy tính của bạn.
Cách sử dụng đường dẫn URL tương đối
URL tương đối chỉ lưu trữ một phần của URL hoặc đường dẫn và thường liên quan đến vị trí của tệp hoặc phần hiện tại của trang web.
Trong ví dụ trên, để truy cập Logo.ico từ index.html sử dụng URL tương đối, bạn sẽ sử dụng đường dẫn “Hình ảnh / Biểu tượng / Logo.ico”. Các ví dụ khác bao gồm:
- Pages / Bird1.html
- Hình ảnh / CuteBird.jpg
- styles.css
Khi bạn sử dụng cùng một cấu trúc thư mục trên máy tính khác, trang web sẽ vẫn có thể truy xuất tệp. Khi định tuyến trên web, thay vì sử dụng liên kết đầy đủ, chẳng hạn như “https://example.com/about”, bạn có thể sử dụng định tuyến tương đối để thay thế:
- /Về
- /tiếp xúc
- / project / local-client
Bạn có thể sử dụng một URL tương đối để tạo liên kết hoặc hình ảnh tham chiếu bên trong trang web HTML của mình.
- Bên trong thư mục gốc của thư mục trang web của bạn, hãy tạo một thư mục mới có tên là Các trang.
- Bên trong thư mục Pages mới, hãy tạo một tệp mới có tên Bird1.html.
- Dân cư Bird1.html với mã HTML để tạo trang.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bird 1 </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<div class="container">
<h1> Coffee </h1>
<p> Coffee is a sweet bird who loves to game! </p>
</div>
</body>
</html> - Bên trong div vùng chứa, hãy thêm thẻ hình ảnh và sử dụng URL tương đối để liên kết đến CuteBird.jpg hình ảnh.
<img src="../Images/CuteBird.jpg" alt="Cute bird photo" class="mb28" width="900" height="700"> - bên trong index.html , xóa nội dung hiện có bên trong div vùng chứa. Thay thế nó bằng một một thẻ sử dụng liên kết tương đối để mở Bird1.html tập tin.
<div class="container">
<h1> My Website </h1>
<p> Welcome to my website. </p>
<a href="Pages/Bird1.html" class="mb28">Bird 1: Coffee</a>
</div> - Bấm vào index.html để mở tệp trong trình duyệt và nhấp vào liên kết mới để điều hướng đến Bird1.html.
Truy cập tệp bằng liên kết URL tuyệt đối hoặc tương đối
Bây giờ bạn có thể xác định sự khác biệt giữa URL tuyệt đối và URL tương đối. Giờ đây, bạn có thể cẩn thận hơn để đảm bảo tài nguyên của mình luôn được truy xuất.
Bạn cũng phải luôn đảm bảo rằng tất cả các liên kết mà người dùng của bạn có thể truy cập đều an toàn và bảo mật.