Bạn đã từng tìm hiểu về web chắc hẳn bạn cũng đã biết, 1 trang web luôn tồn tại các liên kết qua lại giữa các trang khác nhau và những liên kết này được gọi là Siêu liên kết (siêu liên kết). Bạn có thể thấy ngay trong đoạn này mình có thêm liên kết về chuyên mục học HTML bằng cách sử dụng thẻ a trong HTML để tạo liên kết liên kết đến 1 trang khác

Trong HTML để tạo ra các liên kết liên kết, chúng ta sử dụng thẻ a – thẻ tạo liên kết liên kết. Về cách sử dụng thẻ a trong HTML thì bài viết này mình sẽ hướng dẫn các bạn chi tiết nhất về thẻ a trong HTML để các bạn hiểu và sử dụng được nó

Nội dung bài viết

1. Hướng dẫn sử dụng thẻ a trong HTML để tạo liên kết
   1. Cấu trúc của thẻ a trong HTML
   2. Cấu hình thẻ nhảy cấu trúc tới bất kỳ vị trí nào trên trang
   3. Constructor tag a connect mail
   4. Constructor tag a connect to the number of phone
   5. 4 status of tag a

Hướng dẫn sử dụng thẻ a trong HTML để tạo liên kết

Thẻ a trong HTML được sử dụng rất nhiều nó giúp bạn tạo 1 đường dẫn trỏ đến 1 trang nào đó ngay trong web của bạn hoặc sang 1 web khác. Nếu bạn đã tìm hiểu về SEO thì bạn cũng biết thẻ a được sử dụng trong SEO cực kỳ nhiều khi bạn chèn backlink. Nó sẽ có 2 dạng đó là liên kết nội bộ hay còn gọi là liên kết bên trong (liên kết con trỏ đến trang cùng miền) và liên kết bên ngoài còn được gọi là liên kết bên ngoài (con trỏ liên kết đến trang không cùng miền)

Tham khảo thêm

• Thẻ IMG trong HTML – Thẻ chèn hình ảnh trong HTML
• Các thẻ tạo danh sách (LIST) trong HTML
• Cấu trúc của một trang web bằng HTML

Cấu trúc của thẻ a trong HTML

NguyenHung.Net

Trong cấu trúc trên các thuộc tính sau

• …  là cấu trúc khai báo của cặp thẻ a
• href  là thuộc tính khai báo đường dẫn đến trang đích
• title  là thuộc tính khai báo tiêu đề cho liên kết
• mục tiêu  thuộc tính với các tùy chọn đích đến ở bên dưới (nếu không khai báo thuộc tính mục tiêu thì giá trị mặc định là _self)
  • _self  tùy chọn này sẽ mở liên kết trên tab hiện tại
  • _blank  tùy chọn này sẽ mở liên kết trên tab mới
  • _parent   tùy chọn này sẽ mở liên kết trong tab cha của tab hiện tại
  • _top  tùy chọn này sẽ mở liên kết trong cửa sổ toàn màn hình
• NguyễnHùng. Net   là phần hiển thị cho người dùng nhìn thấy. Nó có thể là liên kết văn bản hoặc liên kết hình ảnh.

Cấu hình thẻ nhảy cấu trúc tới bất kỳ vị trí nào trên trang

Ngoài việc đặt liên kết dẫn đến 1 trang khác trong web hoặc dẫn đến 1 trang web khác thì bạn còn có thể đặt liên kết nhảy đến 1 vị trí bất kỳ ngay trong trang mà không bị tải lại trang

Để làm việc này, bạn hãy thêm vào thẻ HTML ở vị trí cần nhảy tới id=”ten_id”  sau đó thuộc tính < . Nói như vậy có vẻ như bạn sẽ thấy việc mở đồng hồ, bạn hãy xem ví dụ dưới đây để hiểu nhé. href của thẻ a bạn để link ở dạng href=”#ten_id”. Nói vậy có vẻ bạn sẽ thấy mở hồ, bạn hãy xem ví dụ dưới đây để hiểu nhé.

Ví dụ

Đầu tiên là thêm id cho đoạn cần nhảy. Ở đây mình sẽ thêm id cho thẻ h1 như sau

Học HTML Online

Bây giờ chúng ta viết thẻ a với cấu trúc như sau

NguyenHung.Net

Bậy giờ khi nhấp vào thẻ a nó sẽ nhảy tới thẻ h1 có id=”den_day” ngay trong trang hiện tại mà không cần tải lại trang

Giải thích rõ ràng nhất là bạn có thể xem mục lục của bài viết này ở bên tay phải màn hình, sau đó bạn nhấp vào liên kết mà nó sẽ chuyển đến vị trí bạn cần truy cập

Ngoài ra, với công thức tạo liên kết như thế này nó còn hiển thị trực tiếp trên kết quả tìm kiếm của Google khá hay, bạn có thể tìm hiểu thêm trong lĩnh vực SEO nhé

Constructor tag a connect mail

Bạn có thể sử dụng thẻ a để tạo liên kết giúp người dùng nhấp vào liên kết đó sẽ mở ứng dụng gửi thư và tự động điền email mà bạn đã nhập sẵn ở đó. Construction tag as after

[email protected]

Và nó sẽ hiển thị trên trình duyệt như sau. admin@nguyenhung. bọc lưới

Constructor tag a connect to the number of phone

Việc tạo liên kết tới số điện thoại hiện nay rất hữu dụng, nhất là với các trang web bán hàng nếu muốn người dùng truy cập bằng điện thoại bấm vào liên kết số điện thoại là tự động nhập số điện thoại để gọi ngay rất là hay. Cách làm đơn giản với thẻ a as after

19001009

Nó sẽ hiển thị trên trình duyệt như sau, bạn hãy truy cập trang này bằng điện thoại và nhấp vào thử nhé. 19001009

4 status of tag a

Thẻ đặc biệt hơn các thẻ khác là nó sẽ có 4 trạng thái cho người dùng thấy như sau

• liên kết. is status a tag when you don't click times
• bay lượn. is status when you cursor chuột qua but not click on
• đã đến thăm. is the status when you click on link
• tích cực. is status when you click on link but vẫn đang giữ chuột

Về các trạng thái này, chúng ta phải kết hợp cùng CSS mới được xác định. Nên mình sẽ nói tới trong bài viết về CSS cho thẻ sau

Lời kết

Như vậy trong bài viết này, mình đã cùng bạn đi tìm hiểu về thẻ a trong HTML và cách sử dụng thẻ a trong các trường hợp thường xuyên gặp nhau nhất. Hi vọng với từng kiến ​​thức đó sẽ giúp bạn sử dụng thẻ a trong HTML tốt hơn

Nếu thấy bài viết hay hãy chia sẻ ngay nhé, còn nếu có thắc mắc gì hãy để lại còm men ở khung bình luận bên dưới nhá. Và nhớ theo dõi NguyễnHùng. Net để học thêm nhiều kiến ​​thức về web hơn nhé. Chúc bạn thành công