Nội dung bài viết
Đăng ký học lập trình C++
Tại STDIO bạn được dạy nền tảng lập trình tốt nhất.
Đăng ký học
Thẻ liên kết được xem như là trái tim của một trang web. Một trang web thông thường không thể thiếu thẻ liên kết, thẻ liên kết giúp điều hướng giữa các trang trong một website, từ trang này qua trang khác. Trong bài viết tôi sẽ cùng các bạn làm quen cũng như sử dụng thẻ liên kết trong HTML.

Giới thiệu

Thẻ liên kết được xem như là trái tim của một trang web. Một trang web thông thường không thể thiếu thẻ liên kết, thẻ liên kết giúp điều hướng giữa các trang trong một website, từ trang này qua trang khác. Trong bài viết này tôi sẽ cùng các bạn làm quen cũng như sử dụng thẻ liên kết <a> trong HTML.

Tiền đề bài viết

Bài viết nằm trong CHƯƠNG TRÌNH TỰ HỌC HTML  của stdio.vn.

Đối tượng hướng đến

Những lập trình viên mới bắt đầu lập trình web cơ bản với HTML và đã xem qua những bài viết trước trong chuỗi bài viết về HTML.

Cấu trúc thẻ liên kết

Thẻ liên kết có chức năng điều hướng giữa các trang web trong website ngoài ra còn được dùng để làm bookmark, được định nghĩa bởi cặp thẻ a có cấu trúc như sau:

<a href="url">Nội dung hiển thị</a>

Với thuộc tính href là đường dẫn tới các trang web trong website hoặc là đường dẫn tới một website cụ thể như https://www.google.com/

Ví dụ đơn giản về thẻ a:

<a href="http://www.stdio.vn/">Trang chủ stdio.vn</a>

Khi chúng ta click vào dòng chữ Trang chủ stdio.vn thì trình duyệt sẽ chuyển hướng đến trang chủ của stdio.vn.

Sử dụng thẻ a trong trang web

Sau khi đã tìm hiểu cấu trúc của thẻ liên kết a thì ta sẽ đi vào một số ví dụ và phần tích những thuộc tính thường dùng trong thẻ a để hiểu rõ hơn về cách sử dụng loại thẻ liên kết này như thế nào.

Ví dụ cơ bản

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 4: Thẻ Liên Kết Trong HTML</title>
	</head>
	<body>
		<h3>Thẻ liên kết</h3>
		<a href="http://www.stdio.vn/">Trang chủ stdio.vn<a/>
	</body>
</html>

Kết quả chạy với trình duyệt

ss_1

Khi chúng ta click vào thì trình duyệt chuyển hướng đến trang stdio.vn trong tab hiện hành của trình duyệt.

Thẻ a còn có một thuộc tính được sử dụng khác nhiều đó là thuộc tính target quy định nơi mà trang web được mở. Chi tiết được cho ở bảng sau:

Target Value Description
_blank Mở trang web trong một tab mới.
_self Mở trang web trong tab hiện tại (mặc định).

Ví dụ

<a href="http://www.stdio.vn/" target="_blank">Trang chủ stdio.vn</a>

Thì stdio.vn sẽ được mở ở một tab mới.

ss_2

Trên đây chúng ta đã liên kết với những trang web phía bên ngoài, vậy liên kết với các trang web trong website như thế nào. Hoàn toàn tương tự chúng ta cũng chỉ đúng đường dẫn đến file .html mà chúng ta muốn mở. Tôi sẽ tạo một thư mục có tên là Stdio HTML và có hai file là page1.htmlpage2.html.

Nội dung page1.html

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 4: Thẻ Liên Kết Trong HTML</title>
	</head>
	<body>
		<h3>Trang Nhất</h3>
		<a href="page2.html" >Chuyển đến trang hai<a/>
	</body>
</html>

Nội dung page2.html

<!DOCTYPE html>
<html>
	<head>
		<title>HTML - Phần 4: Thẻ Liên Kết Trong HTML</title>
	</head>
	<body>
		<h3>Trang Hai</h3>
		<a href="page1.html" >Chuyển về trang nhất<a/>
	</body>
</html>

Sau khi chạy một trong hai file .html thì chúng ta có thể điều hướng giữa hai trang page1.html và page2.html bằng cách click vào link.

Lời kết

Qua bài viết này và những kiết thức ở các bài trước các bạn có thể viết được một website đơn giản gồm nhiều trang web và sử dụng thẻ liên kết ở bài viết này để chuyển hướng liên kết giữa các trang web. Hy vọng các bạn có thể tạo ra một trang đơn giản vận dụng được những kiến thức này.

THẢO LUẬN