– Các thuộc tính được dùng để bổ sung thông tin cho các phần tử trong HTML.
– Đặc điểm của thuộc tính HTML:
- Tất cả các phần tử HTML đều có thuộc tính.
- Thuộc tính bổ sung thông tin cho phần tử HTML.
- Thuộc tính thường được chỉ định trong thẻ mở của HTML.
- Thuộc tính thường đi theo cặp tên – giá trị, ví dụ như tenthuoctinh=”giatrithuoctinh”
1. Thuộc tính href – chỉ định URL của trang mà liên kết chuyển đến.
Đường dẫn trong HTML được xác định bằng thẻ <a> Thuộc tính href chỉ định URL của trang mà liên kết chuyển đến.
Ex:
<a href="https://tonghop.org">Trang tin tổng hợp</a>2. Thuộc tính src – chỉ định đường dẫn đến hình ảnh
Hình ảnh trong HTML được xác định bằng thẻ <img>. Thuộc tính src chỉ định đường dẫn đến hình ảnh sẽ được hiển thị.
Ex:
<img src="img_tonghop.org.jpg">Chú ý có 2 cách chỉ định URL – đường dẫn trong thuộc tính src:
- URL – đường đẫn tuyệt đối – Liên kết đến một hình ảnh bên ngoài được lưu trữ trên một trang web khác.
Ex:
<img src="https://photos.app.goo.gl/oHrvHQBXtNCkcCcn8">Lưu ý: Hình ảnh bên ngoài có thể thuộc bản quyền. Nếu bạn không được phép sử dụng nó, bạn có thể vi phạm luật bản quyền. Ngoài ra, bạn không thể kiểm soát hình ảnh bên ngoài; nó có thể đột ngột bị xóa hoặc thay đổi.
- URL – đường dẫn tương đối – Liên kết đến một hình ảnh được lưu trữ trong trang web. Ở đây, URL – đường đẫn không bao gồm tên miền. Nếu URL – đường dẫn bắt đầu mà không có dấu gạch chéo, nó sẽ liên quan đến trang hiện tại.
Ex:
<img src="img_tonghop.org.jpg">Lưu ý: Hình ảnh được chỉ định với URL – đường dẫn tương đối sẽ được lưu trên sever máy chủ của bạn và bạn hoàn toàn kiểm soát được nó.
3. Thuộc tính chiều rộng và chiều cao – width and height Attributes.
Hình ảnh trong HTML còn có thuộc tính xác định kích thước, chiều rộng và chiều cao.
Ex:
<img src="img_tonghop.org.jpg" width="1024" height="200">Kích thước ảnh được xác định bằng đơn vị pixel, với chiều cao là 200 pixel và chiều rộng là 1024 pixel. Tìm hiểu sâu về thuộc tính này trong bài sau.
4. Thuộc tính alt.
Thuộc tính alt bắt buộc cho thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh đó không thể hiển thị vì lý do nào đó. Điều này có thể do kết nối chậm hoặc lỗi trong thuộc tính src hoặc nếu người dùng sử dụng trình đọc màn hình. Giá trị của thuộc tính này có thể đọc được trên thiết bị đọc màn hình (screen reader). Nhờ vậy, người ta có thể “nghe” được trang web, ví dụ như người khiếm thị có thể “nghe” được phần tử HTML.
Ex:
<img src="img_tonghop.org.jpg" alt="Trang tin tổng hợp">
5. Thuộc tính style – style Attribute
Thuộc tính style được dùng để xác định kiểu cách cho một phần tử, như màu sắc, font chữ, kích thước…
Ex:
<p style="color:red">Cùng học HTML với tonghop.org</p>6. Thuộc tính lang – lang Attribute.
Khai báo ngôn ngữ của trang Web. Điều này có nghĩa là để hỗ trợ các công cụ tìm kiếm và trình duyệt.. Việc xác định ngôn ngữ là rất quan trọng với các ứng dụng hỗ trợ khả năng truy cập (như screen reader) và các bộ tìm kiếm.
Ex:
<!DOCTYPE html>
<html lang-"en-US">
<body>
...
<p style="color:red">Cùng học HTML với tonghop.org</p>
...
</body>
</html>Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong thuộc tính lang. Vì vậy, hai ký tự đầu tiên xác định ngôn ngữ của trang HTML và hai ký tự cuối cùng xác định quốc gia. Ở ví dụ trên en là mã ngôn ngữ, US là mã quốc gia.
7. Thuộc tính title – title Attribute
Thuộc tính title xác định một số thông tin bổ sung về một phần tử.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng chú giải công cụ khi bạn di chuột qua văn bản.
Ex:
<h1 title="Kết quả khi bạn để chuột vào đây và đợi chút">hãy để chuột vào đây</h1>
<p title="Đây là nội dung do tonghop.org thực hiện" >Cùng học HTML trên tonghop.org. </p>
<p title='aaaaa "bbbbb" ccccc'> Bạn hãy để chuột vào đây</p>
<p title="aaaaa 'bbbbb' ccccc">Bạn hãy để chuột vào đây</p>
Một vài lưu ý khác
Trong một số trường hợp, khi bản thân giá trị thuộc tính chứa dấu ngoặc kép, cần sử dụng dấu ngoặc đơn thay thế: như ví dụ trên.
Tóm tắt bài học
- Thuộc tính href của <a> chỉ định URL của trang mà liên kết chuyển đến.
- Thuộc tính src của <img> chỉ định đường dẫn đến hình ảnh sẽ được hiển thị.
- Thuộc tính width và height của <img> cung cấp thông tin kích thước cho hình ảnh.
- Thuộc tính alt của <img> cung cấp văn bản thay thế cho hình ảnh.
- Thuộc tính style được sử dụng để thêm kiểu vào một phần tử, chẳng hạn như màu sắc, phông chữ, kích thước, v.v.
- Thuộc tính lang của thẻ <html> khai báo ngôn ngữ của trang Web.
- Thuộc tính title xác định một số thông tin bổ sung về một phần tử
Bài tập thực hành: Điền vào chỗ trống:
1. Điền thẻ thích hợp.
<p …..=”tonghop.org”>tonghop.org is a wedsite.</p>
2. Điền kích thước thích hợp để ảnh hiện thị rộng 1080px, cao 768px.
<img …..=”tonghop.org.jpg” width=”…..” height=”…..“>
3. chỉ định URL của trang mà liên kết chuyển đến.
<a …..“https://www.tonghop.org”>Đây là linh dẫn đến trang chủ của chúng tôi</a>
4. Chỉ định văn bản thay thế.
<img src=”tonghop.org.png” …..=”tonghop.org logo”>
5. Chỉ định văn bản bổ sung.
<p …..=”Bạn suy nghĩ xem”>Nếu để chuột vào đây</p>
Đáp án:
1.title
2.src,1080,768
3.href
4.alt
5.title