THUỘC TÍNH HTML
Thuộc tính HTML
✍️ Tất cả các phần tử HTML có thể có các thuộc tính
✍️ Các thuộc tính cung cấp thông tin bổ sung về các phần tử
✍️ Các thuộc tính luôn được chỉ định trong thẻ bắt đầu
✍️ Các thuộc tính thường có trong các cặp tên, giá trị như: name = "value"
Thuộc tính href
Các thẻ <a> định nghĩa một siêu liên kết. Các thuộc tính href xác định URL (Uniform Resource Locator) của trang liên kết đi vào.
<a href="https://www.workonlinevn.com"> Work Online </a>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> Thuộc tính href </h2>
<p> Địa chỉ liên kết được chỉ định trong thuộc tính href </p>
<a href="https://www.workonlinevn.com"> Work Online </a>
</body>
</html>
Thuộc tính src
Các thẻ <img> được sử dụng để nhúng một hình ảnh trong một trang HTML.
Các src quy định cụ thể thuộc tính đường dẫn đến hình ảnh sẽ được hiển thị
<img src="img_wo.jpg">
<!DOCTYPE html>
<html>
<body>
<h2> Thuộc tính src </h2>
<p> Hình ảnh HTML được xác định bằng thẻ img </p>
<img src="img_wo.jpg" width="500" height="600">
</body>
</html>
Có hai cách để chỉ định URL trong src thuộc tính
Ví dụ
src = "https://www.workonlinevn.com/images/img_wo.jpg"
Lưu ý: Hãy sử dụng hình ảnh của bạn đưa lên và lấy Link đó, hạn chế lấy Link hình ảnh trên mạng đưa vào có thể sau đó chủ sở hữu xoá bỏ hình ảnh đó sẽ bị lỗi, hoặc có một số hình ảnh thuộc bản quyền bạn nên hạn chế sử dụng các hình ảnh đó.
Ví dụ
src = "img_wo.jpg"
Nếu URL bắt đầu bằng dấu gạch chéo, nó sẽ liên quan đến miền.
src = "/ images / img_wo.jpg"
Lưu ý: Tốt nhất là sử dụng các URL tương đối chúng sẽ không bị hỏng nếu bạn thay đổi tên miền.
Thuộc tính chiều rộng và chiều cao
<img src="img_wo.jpg" width="500" height="600">
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> Thuộc tính chiều rộng và chiều cao </h2>
<p> Xác định chiều rộng và cao của hình ảnh </p>
<img src="img_wo.jpg" width="500" height="600">
</body>
</html>
Thuộc tính alt
alt Thuộc tính bắt buộc cho <img> thẻ chỉ định văn bản thay thế cho hình ảnh, nếu hình ảnh vì lý do nào đó không thể hiển thị. Điều này có thể do kết nối chậm hoặc lỗi trong src thuộc tính hoặc nếu người dùng sử dụng trình đọc màn hình.
Ví dụ
<img src="img_wo.jpg" alt="Work Online">
<!DOCTYPE html>
<html>
<body>
<h2> Thuộc tính alt </h2>
<p> Thuộc tính alt phải phản ánh nội dung hình ảnh, vì vậy những người dùng không thể nhìn thấy hình ảnh sẽ hiểu được hình ảnh chứa những gì </p>
<img src="img_wo.jpg" alt="Work Online" width="500" height="600">
</body>
</html>
Ví dụ
<img src="img_wo.jpg" alt="Word Online">
<!DOCTYPE html>
<html>
<body>
<img src="img_wo.jpg" alt="Work Online">
<p> Nếu cố gắng hiển thị một hình ảnh không tồn tại, giá trị của thuộc tính alt sẽ được hiển thị thay thế. </p>
</body>
</html>
Thuộc tính kiểu
Các thuộc tính style được sử dụng để thêm phong cách cho một yếu tố, chẳng hạn như màu sắc, font chữ, kích thước, và nhiều hơn nữa.
<p style="color:red;"> Đây là một đoạn màu đỏ. </p>
Ví dụ
<!DOCTYPE html>
<html>
<body>
<h2> Thuộc tính kiểu </h2>
<p> 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 </p>
<p style="color:red;"> Đây là một đoạn màu đỏ.</p>
</body>
</html>
Thuộc tính lang
Bạn phải luôn bao gồm lang thuộc tính bên trong thẻ <html> để 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.
Ví dụ: Sau chỉ định tiếng Anh là ngôn ngữ
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Mã quốc gia cũng có thể được thêm vào mã ngôn ngữ trong lang thuộc tính. 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ụ: Sau chỉ định tiếng Anh là ngôn ngữ và Hoa Kỳ là quốc gia
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
Thuộc tính tiêu đề
Các title thuộc tính định nghĩa một số thông tin thêm về một phần tử.
Giá trị của thuộc tính title sẽ được hiển thị dưới dạng lời chú giải khi bạn di chuyển chuột qua phần tử.
Ví dụ
<p title="Chú giải công cụ"> Đây là đoạn văn </p>
<!DOCTYPE html>
<html>
<body>
<h2 title="Chú giải tiêu đề"> Tiêu đề </h2>
<p title="Chú giải công cụ"> Di chuyển chuột qua đoạn này, để hiển thị thuộc tính tiêu đề dưới dạng chú giải công cụ.</p>
</body>
</html>
Ghi chú: Bạn nên sử dụng thuộc tính là chữ thường. Tiêu chuẩn HTML không yêu cầu tên thuộc tính chữ thường.
Thuộc tính title (và tất cả các thuộc tính khác) có thể được viết bằng chữ hoa hoặc chữ thường như title hoặc TITLE.
Tuy nhiên trong HTML không yêu cầu các thuộc tính chữ thường nhưng XHTML sẽ nghiêm ngặt hơn.
Lưu ý: Các giá trị thuộc tính luôn có lời trích dẫn
Tiêu chuẩn HTML không yêu cầu dấu ngoặc kép xung quanh các giá trị thuộc tính. Tuy nhiên, XHTML yêu cầu nghiêm ngặt hơn.
Bạn quan sát ví dụ đúng và không đúng dưới đây
<a href="https://www.workonlinevn.com/html/"> Work Online </a>
<a href=https://www.workonlinevn.com/html/> Work Online </a>
Đôi khi bạn phải sử dụng dấu ngoặc kép. Ví dụ này sẽ không hiển thị chính xác thuộc tính title, vì nó chứa khoảng trắng
Ví dụ
<p title=Work Online>
<!DOCTYPE html>
<html>
<body>
<h1>Work Online</h1>
<p title=Work Online>
Bạn không thể bỏ qua các dấu ngoặc kép xung quanh một giá trị thuộc tính, nếu giá trị chứa khoảng trắng.
</p>
<p><b>
Nếu bạn di chuyển chuột qua đoạn trên, trình duyệt của bạn sẽ chỉ hiển thị từ đầu tiên từ tiêu đề.
</b></p>
</body>
</html>
Dấu ngoặc đơn hay dấu ngoặc kép?
Dấu ngoặc kép xung quanh các giá trị thuộc tính là cách phổ biến nhất trong HTML, nhưng cũng có thể sử dụng dấu ngoặc kép.
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 phải sử dụng dấu ngoặc kép.
<p title='Hoa "Hồng" Hương'> Hoặc <p title="Hương 'Hoa' Hồng">
<!DOCTYPE html>
<html>
<body>
<h2> Dấu ngoặc đơn hay dấu ngoặc kép </h2>
<p> Trong một số trường hợp, khi bản thân giá trị thuộc tính có chứa dấu ngoặc kép, cần phải sử dụng dấu ngoặc kép. </p>
<p> Di chuyển chuột qua các đoạn bên dưới để xem hiệu ứng. </p>
<p title='Hoa "Hồng" Hương'> Hồng với dấu ngoặc kép </p>
<p title="Hoa 'Hồng' Hương"> Hoa với những dấu ngoặc kép </p>
</body>
</html>
Tổng kết
❶ Tất cả các phần tử HTML có thể có các thuộc tính.
❷ Các href thuộc tính của <a> quy định cụ thể các URL của trang liên kết đi vào.
❸ Các src thuộc tính của <img> quy định cụ thể đường dẫn đến hình ảnh sẽ được hiển thị.
❹ Các thuộc tính width và thông tin cung cấp kích thước cho hình ảnh height <img>.
❺ Các alt thuộc tính của <img> cung cấp một văn bản thay thế cho hình ảnh.
❻ Các style thuộc tính được sử dụng để thêm phong cách cho một yếu tố, chẳng hạn như màu sắc, font chữ, kích thước, và nhiều hơn nữa.
❼ Các lang thuộc tính của <html> thẻ tuyên bố ngôn ngữ của trang web các title thuộc tính định nghĩa một số thông tin thêm về một yếu tố.
✍️ Làm bài tập trắc nghiệm HTML ➡ THUỘC TÍNH HTML ➡ có đáp án.
