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:
- <h2 style=“background-color:#ff0000;“>AppTeng – tạo ứng dụng di động</h2>
Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:
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 chúng tôi hướng dẫn bạn 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 Module Mã nguồn của mình. Ví dụ như background colour: (màu nền )
Ví dụ 2:
- <html>
- <head>
- </head>
- <body style=“background-color:#ff0000;“>
- </body>
- </html>
Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:
Đoạn code trên đã thêm màu đỏ vào nền Module mã nguồn của bạn, hiển thị trong ứng dụng di động – 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 ứng dụng 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 ứng dụng?
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ì. Để dễ dàng hơn, bạn có thể tham khảo bảng 216 màu thường được sử dụng của bảng màu tại đây.
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:
- <body style=“background-color: red;“></body>
Bạn sẽ thấy hiển thị trong ứng dụng di động của bạn như sau:
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.
Phân tích một phần tử
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.