Bài 7: Thuộc tính (Attributes) trong HTML

Bạn có thể thêm thuộc tính vào một số phần tử.
Thuộc tính là gì?
Nếu bạn còn nhớ, những phần tử tạo nên cấu trúc trang HTML và khai báo với trình duyệt bạn muốn website sẽ được trình bày như thế nào (ví dụ <br /> là thẻ khai báo cho trình duyệt khi muốn xuống dòng trong một đoạn chữ). Ở một vài phần tử bạn có thể thêm thông tin vào. Loại thông tin được thêm vào này được gọi là thuộc tính (attribute)
Ví dụ 1:

Thuộc tính luôn được đặt trong thẻ mở và theo sau là dấu = cùng chi tiết nằm giữa cặp ngoặc kép, dấu chấm phẩy sẽ dùng để tách các nội dung thuộc tính, chúng ta sẽ nói về điều này sau.
Tìm hiểu rõ hơn về thuộc tính
Có rất nhiều thuộc tính. Cái đầu tiên bạn sẽ học sẽ là style (kiểu dáng, định dạng), bằng cách sử dụng style bạn có thể tạo kiểu cho website của mình. Ví dụ như background colour: (màu nền )
Ví dụ 2:

Đoạn code trên sẽ thêm màu đỏ vào nền trang Web của bạn, hiển thị trên trình duyệt – bạn hãy thử và sẽ thấy. Chúng tôi sẽ giải thích chi tiết hệ thống màu hoạt động như thế nào chí trong chốc lát nữa.
Chú ý rằng một số thẻ sử dụng tiếng Anh của Hoa Kỳ, do đó color sẽ được dùng thay vì colour. Điều này bạn nên cẩn thận, vì nếu viết sai trình duyệt sẽ không hiểu code bạn viết. Một lưu ý khác cũng rất quan trọng, bạn phải luôn dùng dấu ngoặc kép để đóng lại thuộc tính.
Làm thể nào tạo màu đỏ cho nền trang web?
Như ví dụ bạn vừa xem, để tạo màu đỏ chúng tôi dùng đoạn code “#ff0000”. Đây là mã của màu đỏ được tính theo hệ thập lục phân – hexadecimal numbers (HEX).Mỗi màu sẽ có một mã riêng theo hệ thập lục phân, đây là một số mã màu thường được dùng:
White: #ffffff – Trắng
Black: #000000 (zeros) – Đen
Red: #ff0000 – Đỏ
Blue: #0000ff – Xanh da trời
Green: #00ff00 – Xanh lá cây
Yellow: #ffff00 – Vàng
Một màu thập lục phân (viết tắt là HEX) bao gồm dấu # và sáu chữ hoặc số theo sau. Có hơn 1000 mã màu HEX và rất khó hình dung mã số nào sẽ là màu gì.
Bạn cũng có thể dùng tên màu chuẩn theo tiếng Anh như (white, black, red, blue, green and yellow).
Ví dụ 3:

Bạn đã có khái niệm vừa đủ về màu. Bây giờ chúng ta sẽ quay lại với thuộc tính.
Những phần tử nào có thể sử dụng thuộc tính?
Có rất nhiều thuộc tính khác nhau có thể áp dụng lên đa số các phần tử.
Bạn sẽ thường xuyên sử dụng thuộc tính đối với một số thẻ như <body> và chẳng khi nào áp dụng thuộc tính lên thẻ như <br />, bởi vì sự ngắt dòng hầu như không cần có thêm bất cứ tham số nào để điều chỉnh.
Cũng như các phần tử, có rất nhiều thuộc tính khác nhau. Một số thuộc tính được tạo ra để đáp ứng riêng cho chính các phần tử đó, một số khác có thể sử dụng đại trà đối với nhiều phần tử khác nhau. Ngược lại một số phần tử chỉ có thể chứa một loại thuộc tính và số khác phần tử có thể chứa nhiều thuộc tính khác nhau.
Bạn sẽ có một chút khó hiểu ở đây, nhưng một khi đã làm quen với những thuộc tính khác nhau, bạn sẽ thấy nó thật sự rất logic và bạn cũng sẽ nhận ra sử dụng chúng rất dễ dàng cùng với các khả năng được cung cấp bởi chúng nhiều như thế nào.
Ví dụ dưới đây sẽ cho bạn thấy những thuộc tính quan trọng nhất
Chính xác là có bao nhiêu thành phần trong một phần tử?
Nói tổng quát, một phần tử bao gồm: một thẻ mở có chứa hoặc không chứa một hay nhiều thuộc tính, một số nội dung và thẻ đóng. Hãy xem hình minh họa dưới.
anatomy-of-an-html-element
Phân tích một phần tử
anatomy-of-an-html-element2
Phân tích chi tiết 2 loại phần tử 1- Phần tử thông thường luôn có 1 cặp thẻ mở và đóng 2 – Phần tử đơn chỉ có 1 thẻ duy nhất.

Xem tiếp bài trong khóa học<< Bài 6: Một số phần tử cần biết trong HTMLBài 8: Phần tử a trong HTML >>

HƯỚNG DẪN DOWNLOAD TẠI KIENTHUC360.VN
QUY ĐỊNH BÌNH LUẬN
1. Vui lòng viết tiếng Việt có dấu
2. Ngôn từ bình luận có văn hóa, văn minh, lịch sự
3. không dùng lời lẽ thô tục, xúc phạm thành viên khác
4. Đang xài hàng free, vui lòng đừng bàn đến chuyện virus; nếu bạn đảm bảo bạn đang xài windows bản quyền 100% thì vui lòng vào trang khác bình luận về virus
5. Các link rút gọn chỉ nhằm mục đích duy trì website, nếu không hiểu về công nghệ hay đơn giản là link rút gọn, mời bạn vào trang web khác không có link rút gọn
6. Những tài liệu và nội dung được chia sẻ hoàn toàn free và chỉ vì đam mê, nếu bạn có cùng đam mê chia sẻ với mọi người những gì mình có, xin liên hệ, chúng ta cùng chia sẻ, email: contact@kienthuc360.vn