Bài 7: Thuộc tính (Attributes)
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;">Tôi đang học HTML</h2>
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:
- <html>
- <head>
- </head>
- <body style="background-color:#ff0000;">
- </body>
- </html>
Đ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
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 Web Safe Color.
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 đã 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.
Xem bài kế tiếp
Ý kiến của bạn
------------------------------------------------------------------------------------------------------------------------
- Bài 1: Nhập môn
Tìm hiểu những công cụ cần thiết khi làm web. - Bài 2: HTML là gì?
Tìm hiểu về HTML - Bài 3: Phần tử và thẻ – Elements and tags?
Phần tử và thẻ – làm thế nào để sử dụng chúng - Bài 4: Tạo trang web
Bài học cách tạo ra trang HTML đầu tiên – trang mẫu để tạo ra các trang khác sau này - Bài 5: Bạn đã được học những gì?
Ôn tập những gì đã học và xem trước các bài kế tiếp - Bài 6: Thêm một vài phần tử
Làm quen với 6 phần tử HTML thường được sử dụng - Bài 7: Thuộc tính
Học cách thêm những thông tin vào thẻ và x6y dựng câu lệnh chính xác hơn - Bài 8: Liên kết
Khám phá các liên kết các trang web của bạn và các trang ở web khác trên internet. - Bài 9: Hình ảnh
Khám phá việc chèn ảnh vào trang web. - Bài 10: Tạo bảng – Tables
Cấu trúc bảng để dàn trang web. - Bài 11: Tìm hiểu thêm về bảng – table
Học nâng cao cấu trúc bảng – table - Bài 12: Dàn trang (CSS)
Tìm hiểu làm thế nào Cascading Style Sheets (CSS) có thể giúp dàn trang thú vị hơn. - Bài 13: Đưa trang web lên internet
Khám phá làm cách nào để đưa trang web lên internet để ai cũng có thể xem - Bài 14: Những tiêu chuẩn cho Web và xác nhận
Học các tiêu chuẩn HTML thông dụng và cách kiểm tra code có được viêt đúng không - Bài 15: Những lời khuyên sau cùng
Một vài lời khuyên bổ ích cho những dự án về web của bạn
