Trong bài học trước, chúng ta đã tự tạo được một trang web HTML cơ bản. Không quá hào nhoáng nhưng vẫn là 1 trang web thực sự.

Thế nhưng nếu chỉ là 1 trang đơn lẻ, cách biệt thì đấy không còn là thế giới web đang hằng ngày kết nối chúng ta với nhau nữa. Khi các bạn lướt web hằng ngày, thường xuyên chúng ta duyệt lướt những địa chỉ (website) mà nội dung nằm trên nhiều trang HTML khác nhau. Chúng ta có thể dễ dàng di chuyển giữa các trang đó cũng như chuyển tới các trang bên ngoài. Tất cả những hành động mà tôi vừa kể trên có thể thực hiện được chính là nhờ vào các đường dẫn liên kết (hyperlink) hay thường gọi tắt là đường dẫn. Trong bài học này, chúng ta sẽ cùng thảo luận cách tạo ra những đường dẫn này.

Tôi mặc định là trong chúng ta, ai cũng hiểu tối thiểu thế nào là 1 đường dẫn : 1 đoạn văn bản mà khi chúng ta kích chuột lên thì sẽ chuyển chúng ta sang 1 trang khác.

Trong thực tế thì có 2 kiểu đường dẫn : liên kết giữa 2 trang của cùng 1 địa chỉ hoặc liên kết với địa chỉ bên ngoài (như kiểu http://laptrinhtanbinh.com/). Rồi các bạn sẽ thấy, về bản chất thì 2 kiểu này không có gì khác nhau cả.

Khá dễ dàng để chúng ta có thể nhận ra các đường dẫn trong nội dung trang web bởi hình thức khác biệt của chúng (mặc định là màu xanh và được gạch chân) và khi con chuột biết thành hình bàn tay khi chỉ lên đường dẫn.

Tôi đề nghị để bắt đầu chúng ta sẽ tạo ra đường dẫn tới Lập trình Tân binh.

Để tạo ra 1 đường dẫn, chúng ta cần sử dụng thẻ <a>. Khác biệt với những thẻ mà chúng ta tìm hiểu trong bài trước, thẻ này bắt buộc phải có thêm thuộc tính href để chỉ ra trang mà liên kết sẽ dẫn đến.

Đoạn mã dưới đây là đường dẫn tới trang Lập trình Tân binh nằm ở địa chỉ http://laptrinhtanbinh.com.

<a href="http://laptrinhtanbinh.com">Lập trình Tân binh</a>

Chúng ta sẽ đặt đoạn mã trên vào giữa 1 khổ văn bản và kết quả nhận được sẽ giống như trong hình minh họa bên trên.

<p>Xin chào. Mời hãy ghé thăm <a href="http://laptrinhtanbinh.com">Lập trình Tân binh</a><br/>
Đây là 1 trang web rất bổ ích !</p>

! Mặc định thì hình thức của đường dẫn là màu xanh và được gạch chân. Nếu các bạn đã từng duyệt trang đích trước đó thì đường dẫn sẽ biến thành màu tím. Trong chương sau, chúng ta sẽ cùng xem cách thay đổi hình thức mặc định này nhờ CSS.

Nếu các bạn muốn tạo đường dẫn ra bên ngoài tới 1 địa chỉ khác, chỉ đơn giản cần lấy địa chỉ đó (chúng ta thường nhắc tới URL). Đa phần đường dẫn sẽ bắt đầu bằng http:// nhưng cũng cần chú ý đôi khi chúng có thể bắt đầu bằng https:// (địa chỉ bảo mật) hoặc những tiền tố khác như ftp://, vv…

! Nếu đôi khi các bạn bắt gặp những đường dẫn kỳ là trong đó có chứa các ký tự đặc biệt như dấu &, ví dụ http://www.site.com/?data=15&name=tanbinh thì cần phải thay thế chúng bằng các mã đặc biệt. Trong trường hợp trên thì chúng ta thay thế & bởi & và đường dẫn được sử dụng sẽ là http://www.site.com/?data=15&name=tanbinh. Dù có thể không có sự khác biệt về hình thức nhưng điều này sẽ giúp trang web được xây dựng từ HTML5 chính xác hơn.

Những đường dẫn trên được gọi là đường dẫn tuyệt đối bởi chúng ta đã sử dụng đến địa chỉ hoàn chỉnh trong đó. Tiếp theo đây, chúng ta sẽ xem cách viết các đường dẫn giữa các trang mà chúng ta tự viết. Các bạn sẽ thấy có 1 sự khác biệt nhỏ nhặt trong đó.

Chúng ta đã biết cách tạo ra đường dẫn tới các địa chỉ có sẵn. Vậy bây giờ hãy xem cách tạo ra các đường dẫn giữa các trang khác nhau mà chúng ta viết ra.

? Làm sao mà tôi có thể biết được địa chỉ kiểu http://... của mình. Trang web của tôi vừa được tạo ra và chưa hề có địa chỉ đó !

Thực tế là đúng vậy ! Các bạn đang bắt đầu tạo trang web (không nên nhầm lẫn với trang HTML, 1 trang web có nội dung nằm trên nhiều trang HTML.) trên máy tính riêng của mình và không ai ngoài các bạn có thể nhìn thấy nó. Đương nhiên là nó cũng không có địa chỉ bắt đầu bởi http:// như đa phần các trang web khác. Thật may là điều này cũng chả ảnh hưởng gì đến chúng ta cả.

Để bắt đầu, chúng ta sẽ tạo ra 2 tệp tương ứng với 2 trang HTML khác nhau, ở đây tôi sẽ đặt tên là trang1.html và trang2.html. 2 tệp được tạo ra sẽ nằm trong cùng 1 thư mục trong ổ cứng.

Vậy làm sao để tạo đường dẫn từ trang 1 sang trang 2 khi không biết địa chỉ bắt đầu bằng http:// của nó. Câu trả lời rất đơn giản, nếu 2 tệp nằm trong cùng 1 thư mục thì chúng ta chỉ cần viết tên của tệp đích vào thuộc tính href là đủ. Ví dụ <a href="trang2.html">. Đây được gọi là đường dẫn tương đối.

Dưới đây là mã nguồn được sử dụng trong 2 tệp HTML.

trang1.html

<p>Xin chào, các bạn có muốn chuyển tới <a href="trang2.html">trang 2</a> không ?</p>

trang2.html

Trang này đơn giản hiển thị 1 thông điệp cho chúng ta biết là chúng ta đang ở trang 2.

<h1>Chào mừng tới trang 2 !</h1>

Mọi thứ phức tạp hơn 1 chút nếu 2 tệp mà chúng ta tạo ra lại nằm trong 2 thư mục  khác nhau. Mọi thứ đều có thể thực hiện được nhưng tốt nhất là không nên đặt chúng quá xa nhau.

Hãy tưởng tượng tình huống trang 2 nằm trong thư mục con tên là thuMucCon của thư mục chứa trang 1.

Trong trường hợp đó, mã nguồn của chúng ta cần được thay đổi 1 chút.

<a href="thuMucCon/trang2.html">

Nếu mà có thư mục con trong thư mục con, chúng ta có thể viết như sau.

<a href="thuMucCon/thuMucKhac/trang2.html">

? Thể nếu tệp lại nằm trong thư mục mẹ bao chứa thư mục hiện tại chứa trang1.html ?

Nếu mục tiêu nằm trong thư mục cao hơn trong sơ đồ gia phả tệp, chúng ta cần sử dụng đến dấu .. như sau.

<a href="../trang2.html">

Các đường dẫn tương đối cũng không phải quá khó hiểu một khi chúng ta đã nắm vững cơ chế hoạt động của chúng. Chúng ta chỉ cần xác định rõ vị trí tương đối của tệp đích so với tệp đang làm việc để có thể đưa ra đường dẫn chính xác.

Khi các trang HTML có nội dung trở nên quá dài, chúng ta thường băt gặp sự xuất hiện của các cột mốc (anchor) dùng để định vị. Trong thực tế, chúng ta có thể lợi dụng những mốc cắm này để tạo ra các đường dẫn chỉ tới 1 phần nội dung khác trong cùng 1 trang HTML. Ví dụ điển hình của cách sử dụng này chính là các đường dẫn “Tới cuối trang” hoặc “Lên đầu trang” mà chúng ta hay gặp trong nhiều trang web.

Để tạo ra 1 cột mốc, chúng ta chỉ cần thêm thuộc tính id vào 1 thẻ bất kỳ mà chúng ta muốn lấy làm mốc. Chú ý là có thể thêm vào bất cứ thẻ nào ! Ở đây tôi sẽ thêm vào 1 thẻ tiêu đề.

<h2 id="cot_moc">Tiêu đề</h2>

Sau đó, chúng ta chỉ cần tạo ra các đường dẫn như bình thường, chỉ khác 1 chút là trong thuộc tính href là dấu # rồi tới tên cột mốc.

<a href="#cot_moc">Dẫn tới cột mốc</a>

Thông thường, nếu trang HTML của các bạn đủ dài thì sau khi ấn vào đường dẫn, chúng ta sẽ thấy thanh chạy của trang tự động chuyển tới vị trí mốc cắm mà chúng ta đã đặt ra.

<h1>Trang HTML nhiều nội dung</h1>
<p>  Dẫn tới các cột mốc :<br />
    <a href="#bongDa">Bóng đá</a><br />
    <a href="#bongRo">Bóng rổ</a><br />
    <a href="#banSung">Bắn súng</a><br />
</p>
<h2 id=" bongDa ">Bóng đá</h2>
<p>... (Nội dung thật dài) ...</p>
<h2 id="bongRo">Bóng rổ</h2>
<p>... (Nội dung thật dài) ...</p>
<h2 id="banSung">Bắn súng</h2>
<p>... (Nội dung thật dài) ...</p>

Nếu các bạn không nhận thấy có chuyện gì xảy ra thì nghĩa là nội dung của các bạn có thể chưa đủ dài. Trong trường hợp đó thì các bạn có thể thêm nội dung hoặc thay đổi kích thước cửa sổ để quan sát được rõ ràng hơn.

! Thuộc tính id dùng để định danh cho 1 thẻ HTML. Cái tên duy nhất này sẽ được dùng làm mốc và để phân biệt với các thẻ khác cùng loại. Trong trường hợp này, chúng ta sử dụng thuộc tính này để tạo ra các đường dẫn nhưng đấy không phải là tất cả tác dụng của nó. Tác dụng của nó sẽ được thể hiện rõ hơn khi chúng ta thao tác với CSS để trang trí hình thức các thẻ.

Các bạn nên hạn chế tối đa việc sử dụng các ký tự đặc biệt, dấu cách hay các dấu thanh cho thuộc tính này để đảm bảo mọi trình duyệt đều có thể sử dụng được nó.

Mục đích của việc này là tạo ra 1 đường dẫn sang trang HTML mới và đưa thẳng tới cột mốc của trang mới này. Về cơ bản thì không khó khăn gì lắm, chúng ta chỉ cần kết hợp những gì đã làm ở 2 phần trên, sử dụng tên của trang web và tên của cột mốc.

Ví dụ : <a href="trang2.html#cot_moc"> sẽ đưa chúng ta tới thẳng trang2.html và cột mốc cot_moc.

Dưới đây là mã nguồn trang web chứa đường dẫn tới các mốc khác nhau của trang HTML được nếu bên trên.

<h1>Du hành HTML</h1>
<p>
    Các bạn sẽ được chuyển tới mốc của 1 trang web khác :<br />
    <a href="trang2.html#bongDa">Bóng đá</a><br />
    <a href="trang2.html#bongRo">Bóng rổ</a><br />
    <a href="trang2.html#banSung">Bắn súng</a><br />
</p>

Phần tiếp theo đây tôi sẽ thử trình bày những ứng dụng bên lề mà tôi thấy là hay dùng cho các đường dẫn, ví dụ như tải tệp, hay gửi thư điện tử, vv…

Dưới đây là 1 số ứng dụng phổ biến nhất ngoài chức năng di chuyển trang.

Để tạo ra bóng bóng thông tin cho đường dẫn, chúng ta sẽ sử dụng tới thuộc tính title, vốn là 1 thuộc tính không bắt buộc.

Bong bóng này hiển thị thông tin tóm tắt về nội dung trang mà đường dẫn chỉ đến, giúp cho người dùng có ý niệm khái quát trước khi ấn vào đường dẫn.

<p>Hãy tham quant rang web <a href="http://laptrinhtanbinh.com" title="Dành cho Tân binh">Lập trình Tân binh</a> ?</p>

Khi tạo ra đường dẫn, chúng ta có thể yêu cầu đường dẫn được mở ra trong 1 cửa sổ mới bằng cách thêm thuộc tính target="_blank" vào thẻ đường dẫn.

<p>Hãy tham quant rang web <a href="http://laptrinhtanbinh.com" target="_blank">Lập trình Tân binh</a> ?</p>

! Tùy theo cài đặt của trình duyệt, đường dẫn sẽ được mở ra trong 1 cửa sổ mới hoặc 1 thẻ mới của trình duyệt và lập trình viên chúng ta không thể can thiệp vào quyết định này.

! Không nên lạm dụng kỹ thuật này vì nó gây khá nhiều cản trở cho càm nhận duyệt web của người dùng. Người dùng hoàn toàn có thể tự quyết định việc có mở đường dẫn trong cửa sổ mới không với các tổ hợp phím tắt của trình duyệt.

Nếu các bạn muốn người dùng gửi thư điện tử cho mình, chúng ta có thể sử dụng đường dẫn loại mailto và đưa ra địa chỉ muốn sử dụng để liên lạc. Chúng ta cũng vẫn chỉ cần thay đổi thuộc tính href.

<p><a href="mailto:[email protected]">Gửi mail cho tôi !</a></p>

Đường dẫn được cấu thành từ tiền tố mailto, theo sau là dấu : và địa chỉ liên lạc. Khi người dùng ấn vào đường dẫn trên, trình soạn thư mặc định của người dùng sẽ tự động bật ra cửa sổ để soạn thảo 1 email mới với địa chỉ người nhận là địa chỉ liên lạc của chúng ta.

Nhiều bạn đặt câu hỏi là làm thế nào để thực hiện chức năng cho phép người dùng tải tệp từ trang web. Thực tế là chúng ta không cần làm gì khác ngoài việc tạo ra 1 đường dẫn tới vị trí của tệp trên máy chủ.

Ví dụ như chúng ta có tệp tin tepTinNen.zip được đặt trong cùng thư mục với trang HTML của chúng ta, hãy tạo ra đường dẫn như sau :

<p><a href="tepTinNen.zip">Tải về tệp tin nén</a></p>

Trình duyệt của người dùng sẽ tự động nhận ra rằng đây không phải là 1 trang HTML để hiển thị nên sẽ khởi động quy trình tải tệp mặc định khi đường dẫn được ấn.

• Đường dẫn cho phép di chuyển giữa các trang. Mặc định thì chúng có màu xanh và được gạch chân.
• Để chèn 1 đường dẫn vào nội dung, chúng ta sử dụng thẻ <a> với thuộc tính href để chỉ ra địa chỉ của trang đích, ví dụ <a href="http://laptrinhtanbinh.com">.
• Chúng ta có thể tạo ra đường dẫn tới 1 trang HTML khác của cùng trang web bằng cách sử dụng tên của tệp : <a href="trang2.html">.
• Đường dẫn cũng cho phép di chuyển tới các phần khác nhau của trang dựa vào việc đinh nghĩa các cột mốc với thuộc tính id, ví dụ <a href="#cot_moc">.