Người Viết : ViKiMi Editor

Sử dụng HTML Links / Anchor Tags tạo Bookmarks hoặc Table Of Contents cho Website
Những tác dụng cơ bản mà HTML Links / HTML Liên kết mang lại rất dễ dàng thấy được. Chúng ta cần HTML Links ở khắp nơi, bất chấp là bạn làm Website gì đi nữa. Nhưng tác dụng mà HTML Links mang lại còn nhiều hơn, Nếu bạn để ý các Trang Web hiện nay đều sử dụng các Table Of Contents thì nó cũng được tạo từ HTML Links.
+ Vậy thực ra HTML Links được sử dụng như thế nào trong trường hợp này?
+ Công việc cũng như những thứ cần thiết là gì?
+ Table Of Contents ( Mục Lục ) được tạo như thế nào với HTML Links?
Câu trả lời là chúng ta sẽ tạo ra Bookmarks ( Đánh dấu trang ).
Chính vì việc tạo ra Bookmarks đã hình thành nên một Mục Lục trên Trang nội dung.
NHỮNG CÔNG VIỆC CẦN LÀM ::
+ Đầu tiên, chúng ta tạo đánh dấu trang.
+ Bước Tiếp Theo, hãy thêm liên kết vào dấu trang đó.
Khi Người dùng nhấp vào liên kết đó, trang Web sẽ cuộn xuống hoặc cuộn lên tới vị trí có đánh dấu trang tương ứng.
Lưu ý : Nội dung trang Web của bạn phải có khả năng cuộn để cho phép thấy rõ cách mà Bookmarks làm việc ( Nội dung trang Web của bạn đủ độ dài )
Bước 1 : Tạo đánh dấu trang
<h2 id=”C4″ > Đoạn Văn 4 </h2>
Hoặc :
Bạn cũng có thể thêm liên kết vào đánh dấu trang trên một trang khác như sau:
<a href=”html_demo.html#C4“ > Di chuyển đến đoạn văn 4 </a>
Bước 2 : Thêm liên kết vào đánh dấu trang
BOOKMARKS >>
<p>
<a href=”#C4″ > Di chuyển đến đoạn văn 4 </a>
</p>
Đó chính là cách mà chúng ta tạo ra một Bookmarks và thông qua đó tạo ra các Mục Lục cho trang nội dung của Website. Điều này đang được sử dụng phổ biến ở cách Website trên thế giới.
EXAMPLE :: Nội dung đầy đủ mã Code
<!DOCTYPE html>
<html>
<body>
BOOKMARKS >>
<p><a href= "#C1" >Di Chuyển Đến Đoạn 1</a></p>
<p><a href= "#C2" >Di Chuyển Đến Đoạn 2</a></p>
<p><a href= "#C3" >Di Chuyển Đến Đoạn 3</a></p>
<p><a href= "#C4" >Di Chuyển Đến Đoạn 4</a></p>
<p><a href= "#C5" >Di Chuyển Đến Đoạn 5</a></p>
<div style="margin-top:80%;"/>
<h2 id="C1"> Đoạn Văn 1</h2>
<p> Nội Dung Đoạn Văn 1 </p>
<h2 id="C2"> Đoạn Văn 2</h2>
<p> Nội Dung Đoạn Văn 2 </p>
<h2 id="C3"> Đoạn Văn 3</h2>
<p> Nội Dung Đoạn Văn 3 </p>
<h2 id="C4"> Đoạn Văn 4</h2>
<p> Nội Dung Đoạn Văn 4 </p>
<h2 id="C5"> Đoạn Văn 5</h2>
<p> Nội Dung Đoạn Văn 5 </p>
</body>
</html>
Bạn đã thấy rõ một Mục Lục được tạo ra ở trên.
Để có một trang nội dung Mục Lục tự động được tạo ra, cách thông thường nhất được sử dụng là kết hợp với ngôn ngữ JavaScript hoặc jQuery hoặc một ngôn ngữ phù hợp. Như vậy bạn sẽ luôn có Mục Lục được tạo tự động giúp tăng chức năng cho Website, tiện ích cho người truy cập.
Cách sử dụng HTML Links để tạo Bookmarks hoặc Mục Lục tương đối đơn giản nhưng cho một hiệu quả rất cao.
TIPS :: Tạo Nút Liên Kết / Link Buttons
Nút Liên Kết
Nếu bạn muốn tạo Một Liên Kết có hiển thị dạng như một Button ( Nút ) , Bạn có thể làm việc này bằng cách sử dụng CSS
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>