Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay
1014 lượt xem

Học HTML – Bài 6: Thẻ liên kết trong HTML

học html cơ bản

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é!

Thẻ chèn liên kết trong html
Sau khi click chuột vào một tiêu đề có liên kết, trang web được chuyển sang trang bài viết mới

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đườ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ụ:

đường dẫn tuyệt đối của liên kết
Có thể copy đường dẫn tuyệt đối của liên kết trong thanh URL của trình duyệt

Ví dụ về thẻ chèn liên kết sử dụng đường dẫn tuyệt đối:

và kết quả là:

Thẻ chèn liên kết sử dụng đường dẫn tuyệt đối
Thẻ chèn liên kết sử dụng đường dẫn tuyệt đối

Đườ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ụ:

và kết quả là:

Thẻ chèn liên kết tới trang web
Thẻ chèn liên kết tới trang web

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ụ:

và kết quả là:

Thẻ chèn liên kết trong cùng trang
Thẻ chèn liên kết trong cùng trang

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ụ:

và kết quả là:

thẻ chèn link tới địa chỉ email
Dùng thẻ chèn link tới địa chỉ email để liên kết các nút bấm liên hệ khi cần thiết, mặc định trình duyệt sẽ kích hoạt phần mềm gửi mail

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

Học HTML – Bài 6: Thẻ liên kết trong HTML
5 (1) vote

Thông báo: GiuseArt đang xây dựng một website chia sẻ tài nguyên thiết kế đồ họa hoàn toàn miễn phí cho người Công Giáo, dự kiến ra mắt vào đầu năm 2019. Nếu bạn muốn, hãy tham gia cùng chúng tôi nhé! Tham gia ngay

Bài viết mới cập nhật:

Bình luận Facebook

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chat Facebook