Chào mừng các bạn quay trở lại các bài học HTML cơ bản. Trong bài này, mình sẽ hướng dẫn các bạn cách sử dụng thẻ liên kết trong HTML.
Nhận biết thẻ liên kết
Trước hết, mình sẽ chỉ cho các bạn biết thẻ liên kết giữ vai trò gì trong website.
Nhìn hình ảnh dưới đây, ta thấy trong các trang web, một đối tượng có liên kết là khi ta rê chuột vào xuất hiện hình bàn tay, (phần lớn sẽ đổi màu) mà khi click vào trình duyệt sẽ chuyển sang một page mới hoặc một hiệu ứng mới.
Như vậy, đường link mà chúng ta đang nói đến ở đây được viết bằng thẻ liên kết trong HTML đấy, cùng tìm hiểu cách dùng thẻ liên kết nhé!
Cấu trúc thẻ liên kết
Trong HTML, thẻ liên kết được viết như sau:
<a href=”đường_dẫn_liên_kết”>Click here</a>
Như vậy, khi bạn nhấn chuột vào chữ “Click here” thì sẽ được chuyển tới liên kết được ghi trong đường dẫn của thẻ <a>.
Tương tự như đường dẫn của hình ảnh, đường dẫn liên kết cũng được chia thành 2 loại: đường dẫn tuyệt đối và đường dẫn tương đối.
Đường dẫn tuyệt đối
Đường dẫn tuyệt đối là không thể thay đổi, chúng ta có thể copy nó ở thanh URL của trình duyệt để lấy đường dẫn tuyệt đối. Ví dụ:
Ví dụ về thẻ chèn liên kết sử dụng đường dẫn tuyệt đối:
1 | <a href="//news.zing.vn/di-dong-giam-gia-van-e-am-sau-tet-post718558.html">Click vào đây để mở link</a> |
và kết quả là:
Đường dẫn tương đối
Cũng giống như đường dẫn tương đối của hình ảnh, đường dẫn tương đối của liên kết cũng có thể thay đổi và thường thì chúng ta tự viết cho thẻ chèn liên kết. Cũng có 4 trường hợp sử dụng đường dẫn tương đối cho liên kết tương tự như đường dẫn tương đối của hình ảnh, các bạn có thể tìm đọc tại đây.
Các liên kết chính
Liên kết đến một trang
Sử dụng cấu trúc: <a href=”địa_chỉ_trang_web”>Nội dung hiển thị</a>. Ví dụ:
1 | Blog học đồ họa và chia sẻ kinh nghiệm thiết kế website. <a href="//www.giuseart.com">Đây là trang web của tôi</a> |
và kết quả là:
Liên kết trong cùng một trang
Để liên kết đến vị trí nào đó trong cùng một trang, chúng ta sử dụng thuộc tính name để đánh dấu vị trí trên trang web nhờ cấu trúc: <a name=”#tên_bookmark”>Nội dung</a>. Sau đó, dùng cấu trúc <a href=”#tên_bookmark”>Nội dung</a> để liên kết tới vị trí đã đánh dấu.
Ví dụ:
1 2 3 4 5 6 7 | <body> <a name="#dautrang">Phần đầu trang</a> <p> Nội dung trang web </p> <a href="#dautrang">Về đầu trang</a> </body> |
và kết quả là:
Liên kết đến địa chỉ email
Trong quá trình làm web, nhiều trường hợp chúng ta phải gắn link liên kết đến địa chỉ email cho một nút bấm nào đó phải không? Để liên kết tới địa chỉ email, chúng ta sử dụng cấu trúc sau:
<a href=”mailto:địa_chỉ_email”> Nội dung</a>
Ví dụ:
1 2 3 | <body> Các bạn có thắc mắc nào trong quá trình học làm website, vui lòng liên hệ qua email nhé! Liên hệ <a href="emailto:giuselethien@gmail.com">tại đây</a> </body> |
Lời kết
Như vậy, chúng ta đã kết thúc bài học số 6: thẻ chèn liên kết trong HTML. Tổng kết bài học chúng ta đã biết cách chèn liên kết trong HTML để liên kết đến trang web, liên kết trong cùng trang hoặc liên kết đến một địa chỉ email bất kỳ. Hẹn gặp lại các bạn trong bài học kế tiếp.
Bài trước: Bài 5: Thẻ chèn hình ảnh trong HTML
Bài tiếp: Bài 7: Thẻ tạo danh sách trong HTML
Chia sẻ bài viết:
