Trong bài viết này tôi sẽ giới thiệu các bạn về các màu dùng trong HTML (hoặc CSS) và cách viết chú thích trong code của HTML.
1. Màu sắc (Color)
Trong HTML (hoặc CSS), một màu có thể được xác định bằng cách sử dụng một tên màu, một giá trị RGB, hoặc một giá trị HEX.
Các trình duyệt hiện nay đều hỗ trợ 140 màu khác nhau.
Các bạn có thể xem thêm các màu sắc khác nhau tại trang web http://ift.tt/2wIzbJC
1.1 Tên màu (Color Name)
Như hình trên các bạn thấy trong HTML (hoặc CSS), một màu sắc có thể được xác định bằng cách sử dụng một tên màu.
Lưu ý: Tên màu không phân biệt trường hợp chữ hoa hay chữ thường. Ví dụ: Red, red, RED đều như nhau.
1.2 Giá trị RGB
RGB là viết tắt của Red (đỏ), Green (xanh lá cây) và Blue (xanh da trời).
RGB có tham số xác định cường độ màu từ nhỏ nhất là số 0 đến cao nhất là số 255.
Để cho dễ hiểu tôi sẽ có các ví dụ sau:
rgb(255,0,0) là màu đỏ (red), bởi vì màu đỏ (red) được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0.
rgb(0,255,0) là màu xanh lá cây (green), bởi vì màu xanh lá cây (green) được đặt thành giá trị cao nhất (255) và các giá trị khác được đặt thành 0.
Tương tự rgb(0,0,255) là màu xanh da trời (blue)
Để hiển thị màu đen (black), tất cả các thông số màu phải được đặt thành 0, như sau: rgb(0,0,0).
Để hiển thị màu trắng (white), tất cả các thông số màu phải được đặt thành 255, như sau: rgb(255,255,255).
Ngoài ra các bạn chú ý thêm rằng, các màu xám được định nghĩa bằng các giá trị bằng nhau cho tất cả 3 nguồn sáng như hình dưới
Như vậy: Trong HTML (hoặc CSS) một màu sắc cũng có thể xác định bằng cách sử dụng giá trị rgb.
Lưu ý: Màu sắc sẽ nhạt dần khi giá trị của tham số tăng dần từ 0 đến 255
1.3 Giá trị HEX
HEX là viết tắt của chữ tiếng anh hexadecimal.
Cách viết của giá trị HEX là #RRGGBB trong đó RR (red) là màu đỏ, GG (green) là màu xanh lá cây, BB (blue) là màu xanh da trời.
HEX có tham số xác định cường độ màu từ nhỏ nhất là số 00 đến cao nhất là chữ FF (cũng tương tự như trên là từ 0 đến 255)
Ví dụ #FF0000 là màu đỏ (red), bởi vì màu đỏ (red) được đặt thành giá trị cao nhất (FF) và các giá trị khác được đặt thành 00.
Cũng như trên ở đây, các màu xám được định nghĩa bằng các giá trị bằng nhau cho tất cả 3 nguồn sáng như hình dưới
Như vậy: Trong HTML (hoặc CSS) một màu sắc cũng có thể xác định bằng cách sử dụng giá trị HEX.
Lưu ý:
+ Giá trị của mỗi tham số bao gồm 2 ký tự, mỗi ký tự có thể là một số (0, 1, 2, 3, 4, 5, 6, 7, 8, 9) hoặc một chữ cái (a, b, c, d, e, f) không phân biệt trường hợp chữ hoa hay chữ thường.
+ Màu sắc sẽ nhạt dần khi giá trị của tham số tăng dần từ 00 đến FF
+ Giá trị HEX cũng có thể được viết dưới dạng 03 số (một ký tự sẽ đại diện cho cả hai ký tự), chẳng hạn như #def tương đương với #ddeeff hay #ddd tương đương với #dddddd. Cái này tôi nêu ra để cho các bạn biết nhưng tôi khuyên các bạn nên viết 06 số như #dddddd không nên viết #ddd. Bởi vì trên thế giới không ai viết 03 số.
2. Cách viết chú thích trong HTML
2. 1 Phần lý thuyết
Thẻ viết chú thích trong code của HTML có dạng:
<!– Nội dung chú thích được viết ở đây –>
Như hình trên các bạn thấy, các trình duyệt không hiển thị nội dung trong thẻ <!–…–>
Thẻ này nhằm giúp bạn giải thích các code của bạn, để giúp bạn chỉnh sửa lại code một cách dễ dàng hơn vào thời gian sau này. Điều này thật sự hữu ích nếu các bạn có rất nhiều code.
2.2 Phần bài tập
2.2.1 Bài tập 1
Loại trừ thẻ chú thích để hiển thị đoạn văn dưới đây
<!DOCTYPE html> <html> <body> <!-- <p>Web nghèo thiếu trước hụt sau, cùng nhau ủng hộ không tiêu web nghèo.</p> --> </body> </html>
Gợi ý của bài tập 1
Gợi ý: Loại trừ <!-- và -->
Câu trả lời của bài tập 1
<!DOCTYPE html> <html> <body> <p>Web nghèo thiếu trước hụt sau, cùng nhau ủng hộ không tiêu web nghèo.</p> </body> </html>
2.2.2 Bài tập 2
Thêm thẻ chú thích vào đoạn văn này “Không làm hiển thị đoạn này trong các trình duyệt”.
<!DOCTYPE html> <html> <body> <p>Đây là một đoạn văn bản.</p> Không làm hiển thị đoạn này trong các trình duyệt <p>Đây là đoạn văn bản khác.</p> </body> </html>
Gợi ý của bài tập 2
Gợi ý: Thêm <!-- và -->
Câu trả lời của bài tập 2
<!DOCTYPE html> <html> <body> <p>Đây là một đoạn văn bản.</p> <!-- Không làm hiển thị đoạn này trong các trình duyệt--> <p>Đây là đoạn văn bản khác.</p> </body> </html>
3. Lời cuối bài
Qua bài viết này chắc các bạn cũng đã biết thêm về các màu sắc có trong HTML và cách viết chú thích trong HTML. Ở bài sau chúng ta sẽ cùng tìm hiểu tổng quan về cách dùng CSS trong HTML.
The post [HTML bài 13] Giới thiệu về màu và cách viết chú thích trong HTML appeared first on Học online.
from WordPress http://ift.tt/2wet8tc
via IFTTT
Không có nhận xét nào:
Đăng nhận xét