Bài 08 – Thẻ HTML Liên kết – Links

Home/Học viết code/HTML/Bài 08 – Thẻ HTML Liên kết – Links

Bài 8: Liên kết – Links

Trong bài này bạn sẽ học cách làm thế nào để liên kết các trang web lại với nhau.

Bạn cần những gì để tạo liên kết?

Để tạo ra các liên kết, bạn sử dụng thứ mà bạn luôn gặp phải khi code HTML đó là: phần tử. Một phần tử đơn giản với một thuộc tính và bạn có thể tạo ra một liên kết đến bất cứ thứ gì bạn muốn. Xem ví dụ.

Ví dụ 1:
<html> 
 <head>
   <title>Đây là tiêu đề trang</title>
 </head>
 <body>
   <a href="http://thietke.website/">Đây là liên kết của trang thietke.website</a>
 </body> 
</html>

Bạn sẽ thấy như dưới đây nếu xem trên trình duyệt:

Phần tử  a là chữ đại diện của từ “anchor”(neo). Và thuộc tính  href là từ viết tắt của từ “hypertext reference” (tham chiếu siêu văn bản), là nơi để xác định liên kết đến đâu, thông thường đó là một địa chỉ của một trang web, website hoặc một tập tin.
Trong ví dụ trên, thuộc tính href có giá trị là “http://www.thietke.website”, đó cũng là địa chỉ đầy đủ của website chúng tôi trên internet, nó được gọi là URL (Uniform Resource Locator – định vị nguồn đồng dạng). Chú ý rằng “http://” phải luôn được thêm vào trong URL. Phần chữ “Đây là liên kết của trang thietke.website”  sẽ được trình bày trên trình duyệt như là một liên kết. Hãy luôn nhớ kết thúc phần tử liên kết bằng thẻ đóng </a>.

Những liên kết các trang trên cùng một website của tôi sẽ được thực hiện như thế nào?

Nếu bạn muốn liên kết các trang trong cùng một website, bạn không cần phải khai báo đầy đủ địa chỉ (URL) của trang web. Ví dụ, nếu bạn  tạo ra 2 trang (tạm gọi là page1.htm và page2.htm) và lưu chúng trong cùng một thư mục, bạn có thể tạo ra một liên kết từ trang này đến trang kia chỉ bằng cách nhập đúng tên tập tin của trong liên kết. Trong trường hợp cụ thể một liên kết từ trang page1.htm đến page2.htm chỉ cần thực hiện như sau:

Ví dụ 2:
<html> 
 <head>
   <title>Đây là tiêu đề trang</title>
 </head>
 <body>
   <a href="page2.htm">Nhấp chuột vào đây để xem trang 2</a>
 </body> 
</html>

Nếu trang page2.htm được đặt trong một thư mục con có tên là “subfolder” liên kết sẽ như sau:

Ví dụ 3:
<html> 
 <head>
   <title>Đây là tiêu đề trang</title>
 </head>
 <body>
   <a href="subfolder/page2.htm">Nhấp chuột vào đây để xem trang 2</a>
 </body> 
</html>

Trong trường hợp ngược lại, page2.htm đang ở trong /subfolder muốn liên kết đến page1, URL sẽ như sau:

Ví dụ 4:
<html> 
 <head>
   <title>Đây là tiêu đề trang</title>
 </head>
 <body>
  <a href="../page1.htm">Nhấp chuột vào đây để xem trang 1</a>
 </body> 
</html>

../” để 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. Tương tự nếu trên 2 cấp bạn có thể dùng như sau “../../“.

Để hiểu rõ hơn về các trường hợp kể trên bạn nên tìm hiểu về đường dẫn tuyệt đối (absolute path – ví dụ 1) và  đường dẫn tương đối (relative path – ví dụ 2,3,4) ở các lớp vi tính cơ bản.

Những liên kết cục bộ chỉ trên cùng một trang Web sẽ được thực hiện như thế nào?

Bạn có thể tạo ra các liên kết nội bộ ở trên cùng một trang Web, thí dụ bạn có một bản mục lục các nội dung ở đầu trang và bạn cần các liên kết đến các mục con nằm bên dưới trên cùng một trang đó, bạn có thể dùng thuộc tính rất hữu dụng là id (identification) và ký tự là “#” (hash)

Sử dụng thuộc tính id để đánh dấu phần tử mà bạn muốn liên kết đến, ví dụ: <h1 id="heading1">heading 1</h1>

Bây giờ bạn cần tạo một liên kết đến phần tử đó bằng cách sử dụng dấu “#” trong phần thuộc tính của liên kết. Dấu “#” phải đứng trước id của thẻ mà bạn gắn liên kết: <a href="#heading1">Link to heading 1</a>

Tất sẽ rõ ràng ở ví dụ sau:

Ví dụ 5:
<html> 
 <head>
   <title>Đây là tiêu đề trang</title>
 </head>
 <body>
  <a href="#heading1">Link to heading 1</a>
  <a href="#heading2">Link to heading 2</a>
  <h1 id="heading1">Heading 1</h1>
    <p>Nội dung header1</p><br />
  <h1 id="#heading2">Heading 2</h1>
     <p>Nội dung header2</p>
 </body> 
</html>

bạn sẽ thấy trên trình duyệt giống như dưới đây, hãy nhấp chuột vào liên kết:

Chú ý: Một thuộc tính id luôn phải có tên bắt đầu là một ký tự

Có còn các liên kết nào khác?

Bạn có thể tạo ra một liên kết đến địa chỉ email. Nó giống như khi bạn liên kết đến một trang tài liệu:

Ví dụ 6:

<a href="mailto:nobody@thietke.website">Gởi email đến thietke.website</a>

hoặc liên kết đến một số điện thoại, ở chế độ xem trên thiết bị di động, khi nhấp chuột vào liên kết này, nó sẽ hỏi bạn có muốn gọi đến số điện thoại đó không

<a href="tel:19001080">Gọi đến số 1900 1080</a>

trên trình duyệt bạn sẽ thấy giống như dưới đây

Sự khác nhau giữa liên kết đến một tập tin và đến một email đó là thay vì gõ đầy đủ địa chỉ tài liệu thì bạn chỉ cần nhập vào mailto: và theo sau là một địa chỉ e-mail. Khi bạn nhấp chuột vào liên kết, chương trình email mặc định sẽ được mở lên ở chế độ đang soạn thảo với dòng địa chỉ gởi đi là email đã được gắn trong liên kết. Lưu ý chức năng này chỉ hoạt động nếu người xem đã cái đặt sẳn trong máy tính một chương trình duyệt email mặc định.

Còn có các thuộc tính nào tôi cần lưu ý?

Khi tạo ra một liên kết, bạn nên luôn sử dụng thuộc tính  href. Thêm vào đó, bạn cần thêm  thuộc tính title trong liên kết <a title="Đến xem trang thietke.website" href="http://thietke.website/">Trang thietke.website</a>

Ví dụ 7:

Bạn sẽ trông thấy như thế này trên trình duyệt

Thuộc tính title là một loại mô tả sơ lược về liên kết của bạn, nếu bạn đừng nhấp chuột, chỉ để con trỏ lên liên kết, bạn sẽ thấy dòng chữ “Đến xem trang thietke.website”. Ngoài ra bạn cũng nên tập tói quen thêm thuộc tính alt trong thẻ liên kết, đây là thuộc tính mô tả nội dung của ảnh mà cổ máy tìm kiếm Google rất xem trọng <a title="Đến xem trang thietke.website" href="http://www.html.net/" alt="liên kết đến trang html.net">Trang thietke.website</a>

 Bài kế tiếp

Facebook Comments
2020-09-20T06:50:52+00:00Tháng Mười Một 8, 2014|Categories: HTML|Tags: , , , |

Tác giả:

Xin chào, đây là Blog của Chung - chuyên trang tìm hiểu về ngành thiết kế web nói chung và các ngành thiết kế đồ họa liên quan. I'm a Freelance Web/Graphic Designer - Lecturer at University of Fine Arts, Hong Bang International University, Văn Lang University, Saigon University, Hong Bang International University, Nguyen Tat Thanh University.
Go to Top