Bài trước: Web front-end (10) - HTML - Liên kết trang web_1
-----
1.1.1
Liên kết ngoài
Để tạo liên kết đến các trang bên ngoài website, cần sử dụng
URL tuyệt đối. Ví dụ,
[HTML]
<h3>Một
số trang để học làm web</h3>
<ul>
<li><a
href="https://www.w3schools.com/">W3Schools</a></li>
<li><a
href="https://stackoverflow.com/">Stack
Overflow</a></li>
<li><a
href="https://github.com/">Github</a></li>
</ul>
[Kết quả]
Một số trang để học làm web
·
W3Schools
·
Stack Overflow
·
Github
1.1.2
Liên kết trong một website
Phần lớn liên kết trong thực tế thuộc loại này, đó là các
liên kết giữa các trang thuộc cùng một website (hay cùng một server). Các liên
kết này sử dụng đường dẫn tương đối (hay đường dẫn tập tin), trình duyệt sẽ dựa
vào đường dẫn tập tin (pathname) để tìm được thư mục hoặc tập tin mong muốn.
Đường dẫn tâp tin được đặt theo quy ước của Unix, nghĩa là sẽ
sử dụng các dấu xuyệt (slash, forward slash
- /) để phân tách thư mục và tập tin, đừng nhầm với dấu xuyệt ngược
(backslash - \).
Đường dẫn tập tin sẽ mô tả cách để lấy được tài nguyên liên
kết, tính từ vị trí hiện hành.
Một số lưu ý liên quan đến cú pháp của đường dẫn tập tin:
– Không sử dụng dấu xuyệt ngược (\)
– Không để tên ổ đĩa (ví dụ, C:, D:) ở đầu đường dẫn
– Không sử dụng giao thức file://
Liên kết trong một website là việc liên kết giữa các tập tin
nằm trong cấu trúc thư mục của website. Ví dụ, liên kết các tập tin trong cùng
một thư mục, liên kết cha-con (từ thư mục cha tới thư mục con), liên kết
con-cha (từ thư mục con lên thư mục cha).
Hình dưới đây là cấu trúc thư mục của một website, có tên là
bookonline.
Liên kết trong cùng
thư mục
Đây là kiểu liên kết đơn giản nhất, để liên kết tới một tập
tin trong cùng một thư mục, chỉ cần đặt tên tập tin trong thuộc tính href của phần tử a.
Ví dụ, thực hiện liên kết từ trang index.html tới trang about.html,
– Đầu tiên, tạo thêm trang about.html trong cùng thư mục với trang index.html
[about.html]
<!DOCTYPE html>
<html>
<head>
<title>Hoc
lam web</title>
<meta
charset="utf-8">
</head>
<body>
<p>Nội
dung trang about</p>
</body>
</html>
– Trong trang index.html,
chèn thêm đoạn mã HTML sau,
<a
href="about.html">Trang about</a>
– Mở trang index.html
bằng trình duyệt, bấm vào dòng chữ “Trang about” trình duyệt sẽ mở trang about.html.
Xem hình minh họa,
Sau khi trình duyệt mở trang about.html rồi, làm sao để quay lại trang index.html? Hãy mở trang about.html,
chèn đoạn mã sau vào cuối tập tin, để tạo một liên kết.
[HTML]
<a href="index.html">Quay về trang chủ</a>
[Kết quả]
Nhờ có liên kết, người duyệt web có thể chuyển qua lại giữa hai
trang một cách dễ dàng.
Liên kết đến tập tin
trong thư mục con
Nếu tập tin cần liên kết đến (tập tin đích) không nằm cùng
thư mục, mà nằm ở thư mục con thì trong thuộc tính href cần có thêm thông tin về đường dẫn tập tin (pathname).
Ví dụ, thực hiện liên kết từ trang index.html đến trang
view1.html,
– Trong thư mục gốc của website (bookonline), tạo thêm thư mục
View
– Trong thư mục View, tạo tập tin view1.html, với nội dung bất
kì
[view1.html]
<!DOCTYPE html>
<html>
<head>
<title>Hoc
lam web</title>
<meta
charset="utf-8">
</head>
<body>
<p>Nội
dung trang view1</p>
</body>
</html>
– Trong trang index.html, chèn đoạn mã HTML sau,
<a
href="View/view1.html">Trang view1</a>
– Mở trang index.html bằng trình duyệt, bấm vào dòng chữ
“Trang view1” trình duyệt sẽ mở trang view1.html.
Xem hình minh họa,
Ý nghĩa của href=“View/view1.html” là hãy tìm trong thư mục
hiện tại (thư mục chứa tập tin index.html) xem có thư mục View không, nếu có,
hãy tìm tiếp trong thư mục View xem có tập tin view1.html không?
Liên kết đến tập tin
trong thư mục cháu
Liên kết đến tập tin trong thư mục cháu là liên kết đến tập
tin trong thư mục con cấp 2. Ví dụ, tạo liên kết từ tập tin index.html đến tập
tin book1.html.
– Tạo thêm thư mục Books và tập tin book1.html có cấu trúc
như trong hình minh họa
– Trong tập tin index.html thêm đoạn mã sau,
<a href="View/Books/book1.html">Trang
book1</a>
Xem hình minh họa,
Ý nghĩa của href=“View/Books/book1.html” là hãy tìm trong
thư mục hiện tại (thư mục chứa tập tin index.html) xem có thư mục View không, nếu
có, hãy tìm tiếp trong thư mục View xem có thư mục Books không, nếu có, hãy tìm
tiếp trong thư mục Books xem có tập tin book1.html không?
Liên kết đến tập tin
trong thư mục cha
Liên kết đến tập tin trong thư mục cha là liên kết ngược, từ
tập tin nằm trong thư mục con đến một tập tin nằm trong thư mục cha.
Điều quan trọng nhất cần nhớ, kí hiệu “../” trong Unix có
nghĩa là hãy chuyển lên thư mục cha, là thư mục trên một cấp trong cây thư mục.
Ví dụ, tạo liên kết từ tập tin view1.html đến tập tin
index.html.
– Trong tập tin view1.html thêm đoạn mã sau,
<a href="../index.html">Quay về trang
chủ</a>
Xem hình minh họa,
Ý nghĩa của href=“../index.html” là hãy lên thư mục cha của
thư mục hiện tại (thư mục chứa tập tin view1.html), rồi tìm trong đó xem có tập
tin index.html hay không. Vì view1.html đang ở thư mục View, nên dấu “../” sẽ
chuyển con trỏ lên thư mục bookonline.
Liên kết đến tập tin
trong thư mục ông
Liên kết đến thư mục ông là liên kết ngược 2 cấp, để thực hiện,
chỉ việc sử dụng hai lần kí hiệu “../”, cụ thể là: “../../”.
Ví dụ, thực hiện liên kết từ tập tin book1.html đến trang
index.html.
– Trong tập tin book1.html thêm đoạn mã sau,
<a href="../../index.html">Quay về trang
chủ</a>
Xem hình minh họa,
Ý nghĩa của href=“../../index.html” là hãy lên thư mục cha của
thư mục hiện tại (thư mục chứa tập tin book1.html), rồi lên thư mục cha nữa, rồi
tìm trong đó xem có tập tin index.html hay không. Vì book1.html đang ở thư mục
Books, nên dấu “../” đầu tiên sẽ chuyển con trỏ lên thư mục View, dấu “../” kế
tiếp sẽ chuyển con trỏ lên thư mục bookonline.
Liên kết từ thư mục gốc
Ở các phần trên, bạn đã biết tạo liên kết từ trang web nguồn
tới trang web đích, theo hướng tiếp cận là xuất phát từ trang web hiện tại, dựa
vào đường dẫn tập tin của Unix để tìm đến được trang web đích.
Phần này sẽ giới thiệu một cách khác, để thực hiện liên kết
tới trang web đích.
Để ý là mọi website đều có thư mục gốc (root directory), đây
là thư mục chứa toàn bộ các tập tin và thư mục của website. Vậy là bạn có thể
xuất phát từ thư mục gốc của website, duyệt theo đường dẫn thư mục để tìm tới mọi
trang web đích.
Trong Unix, dấu xuyệt (forward slash - /) đứng ở đầu đường dẫn
tập tin (pathname) sẽ đại diện cho tên của thư mục gốc.
Ví dụ,
Để thực hiện liên kết từ trang index.html đến trang
book1.html, trong trang index.html chèn đoạn mã HTML sau,
<a href="/View/Books/book1.html">Trang
book1</a>
Đoạn mã trên có nghĩa là hãy bắt đầu từ thư mục gốc
(bookonline), tìm xem trong đó có thư mục View hay không, nếu có, hãy tìm tiếp
trong View xem có thư mục Books hay không, nếu có, hãy tìm tiếp trong Books xem
có tập tin book1.html hay không.
Lưu ý, bạn không cần ghi tên thư mục gốc vào đường dẫn tập
tin, vì dấu “/” đã thay thế cho tên của nó.
Xem hình minh họa,
Phương pháp liên kết này hữu ích trong ba trường hợp sau:
– Tập tin chứa liên kết không nằm cố định tại một thư mục,
mà nó có thể bị di chuyển tới thư mục khác
– Các liên kết được phát sinh động
– Cần sao chép liên kết giữa các trang web khác nhau
Tuy nhiên, phương pháp liên kết này sẽ không hoạt động khi
thư mục gốc của website đặt trên máy cục bộ, vì khi đó, kí hiệu “/” sẽ trỏ tới ổ
đĩa gốc (ví dụ, C: hoặc D:), chứ không trỏ tới thư mục gốc của website. Chỉ khi
nào đặt website lên web server thì nó mới hoạt động bình thường.
Lưu ý, quy tắc thiết lập đường dẫn cho thuộc tính href mà bạn đã thực hiện trên tập tin, cũng
được áp dụng cho thuộc tính “src” của thẻ <img>.
-----