Học HTML cơ bản -Bài 8

By Unknown - Chủ Nhật, 14 tháng 8, 2016 - No Comments

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:



<a href="http://thietke.website/">Đây là liên kết của trang thietke.website</a>

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

Đây là liên kết của trang thietke.website

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:



<a href="page2.htm">Nhấp chuột vào đây để xem trang 2</a>

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:



<a href="subfolder/page2.htm">Nhấp chuột vào đây để xem trang 2</a>

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

Ví dụ 4:



<a href="../page1.htm">Nhấp chuột vào đây để xem trang 1</a>

“../” để 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 NỘI 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> 


</head> 


 


<body> 


<p><a href="#heading1">Link to heading 1</a></p> 


<p><a href="#heading2">Link to heading 2</a></p> 


 


 


 


<h1 id="heading1">heading 1</h1> 


<p>Text text text text</p> 


 


 


 


<h1 id="heading2">heading 2</h1> 


<p>Text text text text</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:

Link to heading 1

Link to heading 2

Heading 1

Text text text text

Heading 2

Text text text text

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:

Example 6:



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

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

Gởi email đến thietke.website

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

Ví dụ 7:



<a href="http://thietke.website/" title="Đến xem trang thietke.website">Trang thietke.website</a>

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

Trang thietke.website

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”

Bài kế tiếp

News Ticker