Liên kết được tìm thấy trong hầu hết các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác. Vậy liên kết là gì? Đường dẫn tuyệt đối là gì? Đường dẫn tương đối là gì?. Trong bài này tôi sẽ viết kỹ về cái này. Bài này là bài quan trọng các bạn hãy xem kỹ.
1. Liên kết (link) là gì?
Liên kết trong HTML được gọi là các siêu liên kết (Hyperlinks).
Bạn có thể nhấp vào liên kết và chuyển đến một tài liệu khác ví dụ như trang web khác, hình ảnh, video, file nhạc, …
Khi bạn di chuyển chuột qua liên kết, mũi tên chuột sẽ chuyển thành một bàn tay nhỏ.
Liên kết có thể được đại diện bởi:
– Một từ nào đó ví dụ Bấm vào đây để quay về trang chủ
– Hay một hình ảnh nào đó ví dụ
Để tạo ra một liên kết ta có cú pháp sau:
<a href=”url” title=”tiêu đề liên kết” target=”cách mở liên kết”>Bấm vào đây</a>
href – Địa chỉ của tài liệu muốn liên kết đến. Ví dụ địa chỉ là http://binhnet.com
title – Tiêu đề của liên kết, tiêu đề sẽ hiển thị như một thông tin thêm khi rê chuột vào liên kết.
target – Xác định cách mở tài liệu, nó có các giá trị như _blank (mở tài liệu trên cửa sổ mới), _self (mở tài liệu trên cửa sổ hiện tại, nếu bạn không khai báo thuộc tính target thì nó sẽ sử dụng giá trị này làm mặc định), _top (mở tài liệu trong nội dung trang hiện tại), _parent (mở tài liệu trên khung trình duyệt mẹ của nó), framename (mở tài liệu được liên kết trong một khung có tên).
Để các bạn dễ hiểu hơn tôi có ví dụ như hình dưới
Như hình trên bạn thấy bàn tay nhỏ và chữ Blog WordPress – Chia sẻ kiến thức chỉ hiển thị khi tôi rê chuột vào chữ Bấm vào đây. Nếu tôi bấm chuột vào chữ Bấm vào đây thì nó sẽ mở ra một cửa sổ mới và đi đến địa chỉ http://binhnet.com
2. Đường dẫn tuyệt đối, đường dẫn tương đối
Một đường dẫn tập tin mô tả vị trí của một tập tin trong một cấu trúc thư mục của trang web.
Đường dẫn tập tin được sử dụng khi liên kết tới các tập tin bên ngoài như:
+ Trang web
+ Hình ảnh
+ Style sheets
+ JavaScripts
Như hình trên đã sử dụng đường dẫn tuyệt đối (một địa chỉ web đầy đủ). Đường dẫn tuyệt đối thường dùng để liên kết đến một website khác.
Liên kết cục bộ (liên kết đến cùng một trang web) thường được dùng với đường dẫn tương đối (không có http://www ….).
Chú ý: Sự khác nhau giữa hai đường dẫn tương đối <img src=”hinh_anh/buc_tranh.jpg”> và <img src=”/hinh_anh/buc_tranh.jpg”>
<img src=”hinh_anh/buc_tranh.jpg”> có nghĩa là thư mục hinh_anh nằm tại thư mục nào đó (không phải là thư mục gốc)
<img src=”/hinh_anh/buc_tranh.jpg”> có nghĩa là thư mục hinh_anh nằm tại thư mục gốc (ở trong thư mục html_public hay htdocs)
3. Các ví dụ về đường dẫn tuyệt đối và đường dẫn tương đối
| Đường dẫn | Loại |
| http://binhnet.com | Tuyệt đối |
| http://ift.tt/2ccUSbt | Tuyệt đối |
| http://ift.tt/2vZtTaS | Tuyệt đối |
| http://ift.tt/2nS90r1 | Tuyệt đối |
| /series/hoc-lam-website-ban-hang-voi-plugin-woocommerce | Tương đối |
| /category/wordpress-tutorials | Tương đối |
| hoc-wordpress-huong-dan-cai-dat-wordpress-phien-ban-cu.html | Tương đối |
Như các ví dụ trên bạn thấy, đường dẫn tuyệt đối là một địa chỉ web đầy đủ (http://tenmien/duongdandentaptin) còn đường dẫn tương đối là một phần của đường dẫn tuyệt đối (nó là phần duongdandentaptin).
Cũng ví dụ trên http://ift.tt/2ccUSbt và /series/hoc-lam-website-ban-hang-voi-plugin-woocommerce cùng đi đến một địa chỉ web.
Tương tự http://ift.tt/2vZtTaS và /category/wordpress-tutorials cùng đi đến một địa chỉ web
Tương tự http://ift.tt/2nS90r1 và hoc-wordpress-huong-dan-cai-dat-wordpress-phien-ban-cu.html cùng đi đến một địa chỉ web.
4. Ưu và nhược điểm của hai loại đường dẫn
4.1 Đường dẫn tương đối
Ưu điểm:
Có thể sử dụng cho các tên miền khác nhau
Nhược điểm:
Khó sử dụng. (dễ bị sai khi chưa quen cách sử dụng)
4.2 Đường dẫn tuyệt đối
Ưu điểm:
Dễ dàng xác định đến một địa chỉ nào đó.
Dễ sử dụng.
Nhược điểm:
Không thể sử dụng cho các tên miền khác nhau.
Ví dụ trong bài viết này tôi liên kết đến một địa chỉ với cụm từ là Học WordPress với đường dẫn http://ift.tt/2vZtTaS. Nếu tôi tải lên toàn bộ mã nguồn của tên miền binhnet.com cho nguyenbinh.com thì khi vào bài viết này và bấm vào liên kết Học WordPress thì nó sẽ đi đến http://ift.tt/2vZtTaS. Chứ không phải đi đến http://ift.tt/2w7YR0t. Có nghĩa là nó chỉ thay đổi được tên của các bài viết chẳng hạn như http://ift.tt/2qkOan5 thì thành http://ift.tt/2w8f0TE Nhưng các liên cục bộ (liên kết đến cùng một trang web) trong bài viết thì không thay đổi chẳng hạn như trong bài viết http://ift.tt/2qkOan5 có liên kết đến http://ift.tt/2cgsFAB thì khi thành http://ift.tt/2w8f0TE trong bài viết này có liên kết đến vẫn là http://ift.tt/2cgsFAB chứ không phải là http://ift.tt/2w7YRxv
Qua các ưu và nhược điểm như trên thì lời khuyên của tôi là các bạn nên dùng đường dẫn tương đối
5. Cách xác định đường dẫn tương đối
Để cho các bạn dễ hiểu tôi sẽ làm một ví dụ như sau:
Tôi tại thư mục gốc (root) hoặc là đang ở trong thư mục html_public (hay thư mục htdocs). Tôi tạo ra một thư mục với tên Thichvietcode và trong thư mục này tôi tạo ra tập tin là BaivietA.html Tương tư như vậy trong thư mục Thichvietcode tôi tạo ra Thumuc1 và trong Thumuc1 tôi tạo ra tập tin là BaivietB.html cứ làm tương tự như vậy tôi sẽ được như hình dưới
Lưu ý: ../ để chỉ đến thư mục trên một cấp so với vị trí hiện hành của tập tin (thường được gọi là thư mục cha). Tương tự nếu trên 2 cấp bạn có thể dùng như sau ../../ Và cứ như thế nếu trên 3 cấp ../../../
Như hình trên tôi sẽ làm vài ví dụ cho các bạn dễ hiểu sau đó tôi sẽ có các bài tập để các bạn tự làm (tất nhiên là có bài giải)
Ví dụ 1: Giả sử tôi đang ở BaivietC.html muốn đến BaivietB.html thì tôi sẽ viết đường dẫn như sau:
<a href=”../BaivietB.html”>Bấm vào đây để đến bài viết B</a>
Ví dụ 2: Giả sử tôi đang ở BaivietC.html muốn đến BaivietK.html thì tôi sẽ viết đường dẫn như sau:
<a href=”../../Thumuc6/Thumuc7/Thumuc8/BaivietK.html”>Bấm vào đây để đến bài viết K</a>
Ví dụ 3: Giả sử tôi đang ở trong thư mục htdocs muốn đến BaivietA.html thì tôi sẽ viết đường dẫn như sau:
<a href=”/Thichvietcode/BaivietA.html”>Bấm vào đây để đến bài viết A</a>
Qua 03 ví dụ trên tôi nghĩ các bạn đã biết cách xác định đường dẫn tương đối.
Để các bạn có thể sử dụng quen tay tôi sẽ có các bài tập như ở dưới và cũng sử dụng hình có cây thư mục như trên
5.1 Bài tập 1
Như hình trên giả sử bạn đang ở BaivietA.html muốn đến BaivietB.html
Câu trả lời của bài tập 1
<a href="Thumuc1/BaivietB.html">Bấm vào đây để đến bài viết B</a>
5.2 Bài tập 2
Như hình trên giả sử bạn đang ở BaivietA.html muốn đến BaivietE.html
Câu trả lời của bài tập 2
<a href="Thumuc1/Thumuc2/Thumuc4/BaivietE.html">Bấm vào đây để đến bài viết E</a>
5.3 Bài tập 3
Như hình trên giả sử bạn đang ở BaivietD.html muốn đến BaivietE.html
Câu trả lời của bài tập 3
<a href="../Thumuc4/BaivietE.html">Bấm vào đây để đến bài viết E</a>
5.4 Bài tập 4
Như hình trên giả sử bạn đang ở BaivietG.html muốn đến BaivietC.html
Câu trả lời của bài tập 4
<a href="../Thumuc1/Thumuc2/BaivietC.html">Bấm vào đây để đến bài viết C</a>
5.5 Bài tập 5
Như hình trên giả sử bạn đang ở BaivietA.html muốn đến BaivietK.html
Câu trả lời của bài tập 5
<a href="Thumuc6/Thumuc7/Thumuc8/BaivietK.html">Bấm vào đây để đến bài viết K</a>
6. Lời cuối bài
Dự kiến đầu tiên của tôi là còn viết thêm vài tiêu đề nữa nhưng khi viết đến đây thì tôi thấy bài viết đã khá dài nên đành tạm dừng để viết sang bài viết kế tiếp. Vì thế bài viết kế tiếp cũng sẽ có cùng chủ đề liên kết (link) nhưng tôi sẽ viết về những phần khác. Vì chủ đề liên kết (link) này tôi thấy nó quan trọng nên tôi sẽ viết thật kỹ và tôi nghĩ các bạn cũng nên xem kỹ.
The post [HTML bài 16] Liên kết (link), đường dẫn tuyệt đối (absolute) và tương đối (relative) appeared first on Học online.
from WordPress http://ift.tt/2w7Xmzm
via IFTTT
Không có nhận xét nào:
Đăng nhận xét