Liên kết đến một vị trí đặc biệt trong một trang web
Khi
thiết kế trang web, nhiều khi bạn cần tạo một liên kết từ một phần của
trang web đến một phần khác, lấy ví dụ khi tạo liên kết đến giữa bài
viết hoặc đầu bài viết hoặc có thể đến cuối trang.
Ví dụ minh họa: Đến cuối bài viết
Bằng một số cú pháp HTML đơn giản thì bạn có thể thực hiện được công việc này.
Bước 1: Chọn vùng văn bản bạn cần
liên kết dẫn đến khi được kích chuột vào liên kết. Ở ví dụ trên, văn
bản được liên kết đến là HTML, được đặt trong câu "Xem tất cả bài viết trong chuyên mục Thủ thuật HTML" nằm ở cuối bài viết này.
- Sau khi chọn từ bạn muốn liên kết đến thì bạn phải tạo một liên kết neo như thế này:
<a name="Text1">Text2</a>
- Trong đó:
Văn bản in đậm màu xanh sẽ là văn bản được chọn, theo như ví dụ trong trang này là HTML. Văn bản màu đỏ là mã HTML để liên kết.Bạn có thể thay đổi thành văn bản bạn thích song sẽ dễ dàng để nhớ hơn nếu bạn chỉ sử dụng cùng nội dung văn bản với văn bản bạn chọn làm neo liên kết. Theo như ví dụ trong trang này sau khi tạo neo thì nó trông như thế này:
Văn bản in đậm màu xanh sẽ là văn bản được chọn, theo như ví dụ trong trang này là HTML. Văn bản màu đỏ là mã HTML để liên kết.Bạn có thể thay đổi thành văn bản bạn thích song sẽ dễ dàng để nhớ hơn nếu bạn chỉ sử dụng cùng nội dung văn bản với văn bản bạn chọn làm neo liên kết. Theo như ví dụ trong trang này sau khi tạo neo thì nó trông như thế này:
Xem tất cả bài viết trong chuyên mục Thủ thuật <a name="HTML">HTML</a>
Bước 2: Bước cuối cùng là bạn phải tạo liên kết thực mà khi kích chuột vào thì sẽ đưa bạn đến văn bản neo.
<a href="#Text">Click Here</a>
Ở ví dụ trong trang này, tôi chọn HTML
làm văn bản neo và “Đến cuối bài viết” được sử dụng để tạo liên kết.
Khi kích chuột vào thì trang web sẽ nhảy đến văn bản neo HTML đã chọn.
Khi tạo liên kết, bạn phải sử dụng cùng
tên trong liên kết với phần neo liên kết. Trong ví dụ tôi đã sử dụng
HTML trong thẻ neo và HTML trong liên kết thực. Khi tạo liên kết, tôi
đã sử dụng đoạn code này:
<a href="#HTML">Đến cuối bài viết</a>
Xem tất cả bài viết trong chuyên mục Thủ thuật HTML.
Demo: Bấm đây để Lên đâu bài viết.
Chú thành công!
Demo: Bấm đây để Lên đâu bài viết.
Chú thành công!
0 nhận xét:
Đăng nhận xét