THẺ LIÊN KẾT TRONG HTML
Nội dung bài học liên kết HTML ❶ Liên kết trong HTML ❷ Cú pháp liên kết trong HTML ❸ Liên kết thuộc tính trong HTML ❹ URL tuyệt đối và URL tương đối trong HTML ❺ Liên kết hình ảnh trong HTML ❻ Liên kết địa chỉ Email trong HTML ❼ Tiêu đề liên kết trong HTML ❽ Nút bấm liên kết ❾ Tổng kết bài học ❿ Bài tập trắc nghiệm HTML
Trên một trang Web chúng ta thường nhìn thấy trong hầu như tất cả các trang đều có những liên kết để người sử dụng nhấp chuột dẫn đến một địa chỉ hay một nút lệnh, một hình ảnh,... nào đó.
Hôm nay chúng ta sẽ cùng tìm hiểu về các thẻ liên kết trong HTML.
❶ Liên kết trong HTML
Các liên kết HTML còn gọi là các siêu liên kết.
Chúng ta có thể nhấp vào một liên kết và trang chuyển đến một tài liệu khác.
Khi chúng ta di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ.
Một liên kết không nhất thiết phải là văn bản. Một liên kết có thể là một hình ảnh hoặc bất kỳ phần tử HTML nào khác.
❷ Cú pháp liên kết trogn HTML
Thẻ HTML <a> xác định một siêu liên kết có cú pháp như sau
<a href="url"> Link </a>
👉 Thuộc tính quan trọng nhất của <a> phần tử là hrefthuộc tính, chỉ ra điểm đến của liên kết.
👉 Văn bản liên kết là phần sẽ hiển thị cho người đọc.
👉 Nhấp vào văn bản liên kết, sẽ đưa người đọc đến địa chỉ URL được chỉ định.
👀 Ví dụ
<!DOCTYPE html>
<html>
<body>
<h1> LINK </h1>
<p><a href="https://www.workonlinevn.com"> WORK ONLINE </a></p>
</body>
</html>
👉 Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt.
👀 Một liên kết không được truy cập được gạch chân và màu xanh lam
👀 Một liên kết đã truy cập được gạch chân và có màu tím
👀 Một liên kết đang hoạt động được gạch chân và có màu đỏ
👀 Các liên kết có thể được tạo bằng CSS để trang phong phú, đa dạng và đẹp hơn.
❸ Liên kết thuộc tính trong HTML
👉 Trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi bạn phải chỉ định một mục tiêu khác cho liên kết.
👀 Thuộc tính target chỉ định nơi mở tài liệu được liên kết và có giá trị sau:
🌐 Self mở tài liệu trong cùng một cửa sổ / tab khi nó được nhấp vào
🌐 Blank mở tài liệu trong cửa sổ hoặc tab mới
🌐 Parent mở tài liệu trong khung chính
🌐 Top mở tài liệu trong toàn bộ phần thân của cửa sổ
👀 Ví dụ: Sử dụng target = "_ blank" để mở tài liệu được liên kết trong tab hoặc cửa sổ trình duyệt mới
<!DOCTYPE html>
<html>
<body>
<h2> THUỘC TÍNH MỤC TIÊU </h1>
<p><a href="https://www.workonlinevn.com/" target="_blank"> WORK ONLINE </a>
</p>If target="_blank", liên kết sẽ mở trong một cửa sổ hoặc tab trình duyệt mới.</p>
</body>
</html>
❹ URL tuyệt đối và URL tương đối
👉 Liên kết nội bộ là liên kết đến một trang trong cùng một trang web được chỉ định bằng một URL tương đối (không có phần "https: // www")
👀 Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> URL TUYỆT ĐỐI </h2>
<p><a href="https://www.workonlinevn.com/"> WORK ONLINE </a></p>
<p><a href="https://www.google.com/"> GOOGLE </a></p>
<h2> URL TƯƠNG ĐỐI </h2>
<p><a href="html_images.asp"> HTML </a></p>
<p><a href="/css/default.asp"> CSS </a></p>
</body>
</html>
👀 Ví dụ sử dụng URL đầy đủ liên kết đến một trang web
<!DOCTYPE html>
<html>
<body>
<h2> ĐƯỜNG DẪN LIÊN KẾT </h2>
<p> Sử dụng một URL đầy đủ để liên kết đến một trang web </p>
<a href="https://www.workonlinevn.com/html/default.asp"> Hướng dẫn HTML </a>
</body>
</html>
👀 Ví dụ liên kết đến một trang nằm trong thư mục HTML trên trang hiện tại
<!DOCTYPE html>
<html>
<body>
<h2> ĐƯỜNG DẪN LIÊN KẾT </h2>
<p> Liên kết đến một trang nằm trong thư mục HTML trên trang hiện tại </p>
<a href="/html/default.asp"> Hướng dẫn HTML </a>
</body>
</html>
👀 Ví dụ liên kết đến một trang nằm trong cùng thư mục với trang hiện tại
<!DOCTYPE html>
<html>
<body>
<h2> ĐƯỜNG DẪN LIÊN KẾT NGOÀI </h2>
<p> Liên kết đến một trang nằm trong cùng thư mục với trang hiện tại</p>
a href="default.asp"> Hướng dẫn HTML </a>
</body>
</html>
❺ Liên kết hình ảnh trong HTML
👉 Để sử dụng hình ảnh làm liên kết, chúng ta đặt thẻ <img> bên trong thẻ <a>
👀 Ví dụ<!DOCTYPE html>
<html>
<body>
<h2> HÌNH ẢNH LIÊN KẾT </h2>
<p> Hãy nhấp chuột đây là hình ảnh liên kết </a></p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML hướng dẫn" style="width:50px;height:50px;"> </a>
</body>
</html>
❻ Liên kết một địa chỉ Email trong HTML
👉 Để tạo một liên kết mở Email chúng ta sử dụng mailto bên trong thuộc tính href để người sử dụng gởi một Email mới.
👀 Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> LIÊN KẾT ĐỊA CHỈ EMAIL </h2>
<p> Để tạo một liên kết mở Email chúng ta sử dụng mailto bên trong thuộc tính href để người sử dụng gởi một Email mới</p>
<p><a href="mailto:workonlinevn@wo.com"> Gửi email </a></p>
</body>
</html>
❼ Liên kết một tiêu đề trong HTML
👉 Thuộc tính title chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi di chuyển chuột qua phần tử.
👀 Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> LIÊN KẾT TIÊU ĐỀ </h2>
<p> Thuộc tính title chỉ định thông tin bổ sung về một phần tử. Thông tin thường được hiển thị dưới dạng văn bản chú giải công cụ khi di chuyển chuột qua phần tử. </p>
<a href="https://www.workonlinevn.com/html/"title="WORKONLINEVN"> Truy cập website WORK ONLINE </a>
</body>
</html>
❽ Liên kết nút lệnh trong HTML
👉 Để sử dụng nút HTML làm liên kết, chúng ta cần thêm một số mã JavaScript.
👉 JavaScript cho phép chỉ định những gì xảy ra tại một số sự kiện nhất định, kiểu như một lần nhấp vào nút lệnh.
👀 Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> NÚT LỆNH LIÊN KẾT </h2>
p> Nhấp nút lệnh để chuyển đến Website Workonlinevn </p>
<button onclick="document.location='default.asp'">Hướng dẫn từ WORKONLINE </button>
</body>
</html>
❾ Tổng kết bài học
👉 Sử dụng phần tử <a> để xác định một liên kết
👉 Sử dụng thuộc tính href để xác định địa chỉ liên kết
👉 Sử dụng thuộc tính target để xác định nơi mở tài liệu được liên kết
👉 Sử dụng phần tử <img> bên trong <a> để sử dụng hình ảnh làm liên kết
👉 Sử dụng mailto bên trong thuộc tính href để tạo liên kết mở chương trình email của người dùng
❿ Bài tập trắc nghiệm HTML
Cảm ơn bạn đã xem bài viết!
