HTML/CSS | Thẻ a

Học HTML, CSS từ Zero Tới Hero

• Tìm hiểu về thẻ a
• Ví dụ dùng thẻ a liên kết tới Google
• Lưu ý khi sử dụng trình viết code của F8
• Một số lưu ý khi sử dụng thẻ a
  • Nếu không khai báo href thì thẻ <a> sẽ không phải là một liên kết
  • Nếu để trống href thì thẻ <a> sẽ tham chiếu vào trang hiện tại
  • Nếu sử dụng href=“” khi nhấn vào thẻ <a> sẽ lên đầu trang

#Tìm hiểu về thẻ a

Thẻ <a> (anchor - điểm neo, neo một liên kết) được dùng để tạo ra một liên kết cho các loại nội dung như văn bản, hình ảnh, v.v.

Cách sử dụng:

<a href="https://www.truongcongly.com/">Tới Trương Công Lý Blog</a>

Nhấn vào đây để thử: Tới Trương Công Lý Blog 

Thuộc tính href (hypertext reference) trong thẻ <a> được dùng để khai báo URL mà trang web sẽ được chuyển đến.

Lưu ý: khi mới học, nhiều trường hợp viết nhầm href thành herf.

#Ví dụ dùng thẻ a liên kết tới Google

Có thể bạn chưa biết, chỉ cần thêm chuỗi truy vấn ?q=keywords lên URL của Google là có thể điền sẵn từ khóa cho ô tìm kiếm.

Ví dụ:

<a href="https://google.com/?q=hoc%20html%20css">Tới Google</a>

Kí tự %20 mã hóa của dấu cách trên URL, bạn có thể thay thế bằng kí tự +. Nếu thay thế %20 thành dấu cách, trình duyệt sẽ tự động mã hóa trở lại %20.

Trong trường hợp muốn truy cập Google và đồng thời tìm kiếm:

<a href="https://google.com/search?q=hoc%20html%20css">Tới Google</a>

Chỉ cần bổ sung từ search vào URL, Google sẽ thực hiện tìm kiếm ngay với từ khóa trong tham số q.

Mình chỉ rõ như trên là mong muốn các bạn hiểu hơn về các cú pháp trên URL. Đơn giản thì bạn chỉ cần copy liên kết tìm kiếm bằng cách sau:

Lưu ý: đây là một vài kiến thức bổ sung. Các bạn sẽ được củng cố thêm ở các chương học sau của khóa học này và trong khóa JavaScript Pro sẽ ra mắt trong tương lai.

#Lưu ý khi sử dụng trình viết code của F8

Các liên kết được thêm vào qua Trình viết code của F8 (màn thử thách) sẽ tự động được mở trong một thẻ mới của trình duyệt. Điều này nhằm tránh tình huống bị chuyển trang do sơ ý của người học.

Tại các bài học sau bạn sẽ được tìm hiểu về thuộc tính target trong thẻ <a>. Khi ấy, bạn sẽ hiểu lý do tại sao một liên kết có thể được mở trong thẻ mới.

Một số lưu ý khi sử dụng thẻ a

1. Nếu không khai báo href thì thẻ <a> sẽ không phải là một liên kết

Ví dụ:

2. Nếu để trống href thì thẻ <a> sẽ tham chiếu vào trang hiện tại

Ví dụ:

<a href="">Tải lại trang</a>

Nhấn vào đây để thử: Tải lại trang

3. Nếu sử dụng href=“#” khi nhấn vào thẻ <a> sẽ lên đầu trang

Ví dụ:

<a href="#">Lên đầu trang</a>

Nhấn vào đây để thử: Lên đầu trang

Tóm tắt

• Thẻ <a> (anchor - điểm neo, neo một liên kết) được dùng để tạo ra một liên kết cho các loại nội dung như văn bản, hình ảnh, v.v.
• Thuộc tính href (hypertext reference) trong thẻ <a> được dùng để khai báo URL mà trang web sẽ được chuyển đến.
• Nếu không khai báo href thì thẻ <a> sẽ không phải là một liên kết.
• Nếu để trống href thì thẻ <a> sẽ tham chiếu vào trang hiện tại.
• Nếu sử dụng href="#" khi nhấn vào thẻ <a> sẽ lên đầu trang.