Header Ads

Thuộc tính HTML (HTML Attributes)

tháng 10 20, 2015
Thuộc tính cung cấp những thông tin bổ sung về các thành phần HTML.

Thuộc tính HTML


  • Thẻ HTML có thể có thuộc tính hoặc không.
  • Thuộc tính cung cấp những thông tin bổ sung về các thành phần HTML.
  • Thuộc tính luôn được định nghĩa trong thẻ bắt đầu.
  • Thuộc tính luôn đi theo cặp Tên/Giá trị, giống như: tên="giá trị"

Thuộc tính Lang

  • Ngôn ngữ của trang HTML có thể được khai báo trong thẻ <html>.
  • Ngôn ngữ được khai báo trong thuộc tính lang.
  • Khai báo ngôn ngữ là việc rất quan trọng cho các ứng dụng có thể trung cập và thuận lợi cho các máy tìm kiếm tìm chuẩn xác hơn.
Ví dụ
<!DOCTYPE html>
<html lang="vi">
<body>

<h1>Đây là đề mục</h1>
<p>Đoạn văn của tôi</p>

</body>
</html>

Trong ví dụ trên, tài liệu HTML được khai báo là Tiếng Việt.

Thuộc tính title

Đoạn văn được định nghĩa bằng thẻ <p>.
Trong ví dụ, thành phần <p> có thuộc tính title. Giá trị của thuộc tính là Tin Học Sóc Trăng.

Ví dụ
<p title="Tin Học Sóc Trăng">
Tin Học Sóc Trăng là website chia sẻ những kiến thức

về Tin học cơ bản, lập trình, đồ họa, hacking, di động

và các thủ thuật máy tính, ...
</p>
Xem kết quả »

Note Khi bạn di chuyển chuột lên đoạn văn, tiêu đề sẽ được hiển thị như một tooltip

Thuộc tính href

Liên kết trong HTML được định nghĩa bằng thẻ <a>. Địa chỉ liên kết được khai báo trong thuộc tính href:

Ví dụ

<a href="http://www.tinhocsoctrang.com">Đây là liên kết</a>
Xem kết quả »

Note Nhấn chuột vào "Đây là liên kết" để chuyển hướng đến trang liên kết

Bạn sẽ được học về liên kết và thẻ <a> trong những bài viết sau.

Thuộc tính về kích thước


  • Hình ảnh trong HTML được khai báo bằng thẻ <img>.
  • Tên nguồn của tập tin được khai báo trong thuộc tính src.
  • Kích thước của hình ảnh (chiều cao và chiều rộng) được quy định với thuộc tính height và width.

Ví dụ

<img src="http://i.imgur.com/iXeLscB.png" width="150" height="160">
Xem kết quả »

Kích thước hình ảnh được xác định bằng đơn vị pixel: width="150" có nghĩa là chiều rộng của ảnh là 150 px.
Bạn sẽ được học nhiều hơn về thẻ hình ảnh và thẻ <img> trong những bài viết sau.

Thuộc tính Alt

Thuộc tính Alt (alternative) định nghĩa một văn bản thay thế khi mà thành phần HTML không được hiển thị.

Ví dụ

<img src="tinhocsoctrang.jpg" alt="Tin Học Sóc Trăng">
Xem kết quả »


Trong ví dụ, hình ảnh không được hiển thị vì tập tin "tinhocsoctrang.jpg" không được tìm thấy. Nó sẽ hiển thị từ Tin Học Sóc Trăng thay thế.

Gợi ý

Luôn khai báo thuộc tính bằng chữ thường
Trong tiêu chuẩn của HTML5, không đòi hỏi bạn phải khai báo thuộc tính bằng chữ thường.
Thuộc tính title có thể viết hoa hoặc thường, TiTle hay TITLE đều được.
Tin Học Sóc Trăng khuyến khích bạn nên dùng chữ thường khi lập trình HTML.

Note Viết bằng chữ thường rất là thông dụng, phổ biến, dễ gõ.
Trong các bài viết, Tin Học Sóc Trăng luôn dùng chữ thường khi viết tên thuộc tính.

Luôn để giá trị của thuộc tính trong dấu nháy kép

Theo tiêu chuẩn HTML5, không đòi hỏi giá trị của thuộc tính phải được bao quanh trong dấu nháy đôi.
Thuộc tính href, như đã nói ở trên, có thể viết:

Ví dụ

<a href=http://www.tinhocsoctrang.com>Đây là liên kết</a>
Xem kết quả »

Tin Học Sóc Trăng gợi ý bạn nên đưa giá trị của thuộc tính vào trong cặp nháy đôi.
Thỉnh thoảng rất cần dấu nháy đôi. Trong nhiều trường hợp, thiếu dấu nháy đôi, thành phần HTML sẽ không hiển thị chính xác vì chứa khoảng trắng.

Ví dụ

<p title=Tin Học Sóc Trăng>
Xem kết quả »

Note Sử dụng dấu ngoặc kép rất phổ biến. Thiếu dấu nháy đôi có thể sinh ra lỗi.
Tin Học Sóc Trăng luôn sử dụng dấu nháy đôi bao quanh giá trị thuộc tính.

Dấu nháy đơn và dấu nháy đôi

Dấu nháy đôi được sử dụng phổ biến, nhưng dấu nháy đơn vẫn được cũng sử dụng.
Trong một vài tình huống, khi giá trị của thuộc tính chứa dấu nháy đôi thì phải sử dụng đến dấu nháy đơn.

Ví dụ

<p title='Tin Học "Sóc Trăng" '>

hoặc ngược lại:

<p title="Tin Học 'Sóc Trăng' ">
Xem kết quả »

Tổng kết


  • Những thành phần HTML có thể có thuộc tính hoặc không?
  • Thuộc tính title cung cấp thông tin bổ sung dưới dạng "tool-tip".
  • Thuộc tính href cung cấp địa chỉ liên kết.
  • Thuộc tính width và height quy định kích thước cho hình ảnh.
  • Thuộc tính Alt thay thế khi thẻ HTML không hiển thị được.
  • Chúng tôi khuyến khích sử dụng chữ thường khi gõ tên thuộc tính
  • Chúng tôi gợi ý nên bao quanh giá trị của thuộc tính bằng dấu nháy đôi.

Bình luận

Không có nhận xét nào

Đăng ký: Đăng Nhận xét ( Atom )
Được tạo bởi Blogger.