Trang chủ
Màu sắc và Cấu trúc cho Nền
Mục đích
Sau bài học này bạn có khả năng:- Tạo một màu nền cố định cho trang Web.
- Tính được mã dưới hệ thập lục phân cho một giá trị màu.
- Thay đổi màu của văn bản và những mục liên kết siêu văn bản.
- Tạo một cấu trúc nền từ một tập tin hình ảnh.
Bài học
Lưu ý: Nếu bạn không có tài liệu của bạn từ bài học trước, hãy download ngay bây giờ. Nền (background) của trang Web - chính là phần nền. Khi chúng ta thêm những màu sắc khác nhau hoặc ngay cả những mẫu nền, bạn nên nhớ để nó không ảnh hưởng đến việc đọc của phần văn bản. Với các trang trong tài liệu hướng dẫn này, chúng tôi sử dụng một màu trắng cố định cho nền để tạo ra sự rõ ràng và phông nền không gây ra ảnh hưởng đến nội dung.Với một vài bổ sung cho tag <body> (được giới thiệu trong bài 1), bạn có thể tạo ra màu nền cho trang Web của bạn. Nhưng trước khi chúng tôi chỉ cho bạn cách tạo ra màu sắc thích thú như vậy, chúng ta phải nói sơ qua các giá trị màu RGB (red green blue) và sự thể hiện của chúng dưới dạng số "thập lục phân".
"Hex-Dec" và cơ bản về màu sắc
Trong một web browser, bạn được tùy ý sử dụng 256 màu của hệ thống để tạo màu cho văn bản và nền. Mỗi một màu được xác định dựa trên các giá trị Red- Green- Blue (RGB) của nó, ba số này có giá trị từ 0 đến 255, mỗi một số thể hiện cường độ của thành phần màu Red, Green, hay Blue cho màu đang xét. Giá trị lớn nhất của cả ba (R=255, G=255, B=255) cho ra màu trắng và giá trị nhỏ nhất (R=0, G=0, B=0) cho ra màu đen. Tất cả những màu khác được biểu diễn bởi các bộ ba RGB khác nhau.Tiếp theo đây là một phần phức tạp. Thay vì xác định một màu theo dạng tương tự như "102,153,255" thì mỗi số được chuyển từ dạng biểu diễn theo cơ số hệ mười (là những số đếm hàng ngày dùng các ký số 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) sang dạng biểu diễn theo cơ số hệ thập lục phân (dùng các ký số 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Tại sao vậy? Vì máy tính dễ sử dụng và dể hiểu số hệ thập lục phân hơn. Vì vậy đối với màu cho ví dụ trên, chúng ta sẽ viết trong dạng số thập lục phân là: "6699FF". Trong ví dụ này, "66" là trị của màu Red, "99" là trị của màu Green, và "FF" là trị của màu Blue.
Sau đây là một vài ví dụ trị hệ thập lục cho các màu khác nhau:
| Màu mẫu | Mã 16 |
|---|---|
| xx oo xx FFCCCC | xx oo xx 3300FF |
| xx oo xx 33FF66 | xx oo xx AA0000 |
| xx oo xx 663300 | xx oo xx 9900FF |
| xx oo xx 000077 | xx oo xx FFFF00 |
| xx oo xx EEEEEE | xx oo xx 888888 |
| xx oo xx 444444 | xx oo xx 000000 |
| Nhưng, đừng lo sợ về việc chuyển đổi hệ thống số đếm! Có rất nhiều công cụ trong đó bạn chỉ cần click vào một bảng màu và chúng sẽ cho biết cách biểu diễn ở hệ thập lục phân. Rất nhiều công cụ màu như vậy có thể tìm thấy trong Yahoo. Nhưng tốt hơn thế nữa, bây giờ rất nhiều browser hổ trợ nhanh chóng cho 16 màu sau (chúng là các màu của VGA trên Windows): | |
| xx oo xx aqua | xx oo xx black |
| xx oo xx blue | xx oo xx fuchsia |
| xx oo xx gray | xx oo xx green |
| xx oo xx lime | xx oo xx maroon |
| xx oo xx navy | xx oo xx olive |
| xx oo xx purple | xx oo xx red |
| xx oo xx silver | xx oo xx teal |
| xx oo xx white | xx oo xx yellow |
Màu nền cố định
Chú ý: Trước hết bạn có thể thử kiểm tra để biết được browser của bạn có hổ trợ những màu nền cố định không (solid color background).Với Volcano Web của chúng ta, điều đầu tiên chúng ta sẽ làm là thêm một màu nền vào tập tin index.htm. Trong HTML để thêm một màu nền cố định cần điều chỉnh tag <body> như sau:
<body bgcolor=#XXXXXX>
trong đó XXXXXX là dạng biểu diễn thập lục phân (được chỉ định bởi dấu
# ở phía trước) của màu được chỉ định.
Nếu bạn nhớ lại, hình chúng ta sử dụng trong
phần mở đầu là hình núi lửa trên một nền đen - vì vậy nếu chúng ta cũng sử dụng
màu đen cho màu nền của trang Web, hình ảnh sẽ rất hòa hợp với trang Web của
chúng ta:
- Mở tập tin index.htm trong trình soạn thảo.
- Tìm tag <body> và thay đổi nó thành :
<body bgcolor=#000000> - Lưu trữ và Nạp tập tin HTML trong Web browser của bạn
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX>
trong đó các giá trị XXXXXX sẽ xác định:
- BGCOLOR = màu sắc của nền (mặc định là màu xám - grey)
- TEXT = màu của chữ trong thân văn bản (mặc định là đen - black)
- LINK = Màu sắc của một mục liên kết siêu văn bản (mặc định là xanh - blue)
- VLINK = Màu sắc của một mục siêu văn bản đã xem (mặc định là tím - purple)
<BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000>
Tag này sẽ cho nền màu đen,
chữ màu vàng,
siêu văn bản màu xanh dương sáng,
và siêu văn bản đã xem màu đỏ .
Chú ý : thứ tự của các mục trong tag <BODY> không quan trọng.Bây giờ bạn nên sửa đổi các tag <BODY> trong tất cả các tập tin HTML của bạn (cách nhanh và dễ dàng là chép và dán ví dụ trên cho mỗi tag <BODY>).
Cấu trúc nền
Lưu ý: Trước hết có lẽ bạn hãy thử kiểm tra xem web browser của bạn có hổ trợ cấu trúc nền không.Màu sắc cố định tạo thêm vài biến đổi khác nhau cho trang Web - nhưng bạn có thể đi xa hơn nữa bằng cách thêm cấu trúc nền (textured background). Bạn sử dụng một tập tin hình ảnh nhỏ (dạng GIF hay JPEG) và browser sẽ "lợp" vào trang web các bản sao liên tục nhau của hình ảnh này. Vài điều bạn cần phải nhớ là:
- Kích cở tập tin: Việc thêm một cấu trúc nền đòi hỏi một hình ảnh nữa phải được download. Chúng tôi đề nghị tập tin hình ảnh nên có kích thước nhỏ hơn 10k.
- Khả năng đọc: Hãy chọn lựa! Rất nhiều tập tin sắp đặt nền làm cho người đọc cảm thấy khó nhìn thấy chữ. Cố gắng sử dụng những màu rất sáng (với chữ rất tối) hoặc những màu thật tối (với chữ rất sáng) - có nghĩa là hãy chọn độ tương phản cao giữa nền và chữ.
- Hiệu quả: trong các web browser đầu tiên có sử dụng màu nền, trang sẽ chưa xuất hiện cho tới khi nào màu nền đã được nạp xuống - do sự kết nối chậm, người đọc có thể phải chờ hình ảnh nền một thời gian dài trước khi nhìn thấy được một thông tin nào đó trên màn hình! Tuy nhiên, các web browser sau này download nền cuối cùng do đó trước tiên trang sẽ có màu xám, tiếp theo là văn bản và hình ảnh xuất hiện, và cuối cùng là nền. HÃY GHI NHỚ! Thời gian nạp trang sẽ chậm hơn nữa (nếu xét với các loại modem thế hệ cũ) khi trang của bạn được đọc từ server.
<body background="bgfile.gif">
trong đó bgfile.gif là tên của tập tin hình ảnh (có thể sử dụng URL đầy đủ hay
tương đối - xem bài 8a).Dưới đây chúng ta sẽ liệt kê tên của ba tập tin nền. Bạn có thể download từng cái (nếu bạn không biết cách download hình ảnh từ một trang web, xin tham khảo bảng trợ giúp Download Hình ảnh) của chúng tôi. Bạn nên cất các tập tin hình ảnh trong directory/folder pictures trong vùng làm việc của bạn:
- Blue Tile [bg.gif]
- Một mẫu hình vuông được lặp lại:
HTML: <body background="../pictures/bg.gif">
Tập tin ví dụ có nền Blue Tile - Volcano Text [vtext.gif]
- Văn bản lớn có màu xám sáng:
HTML: <body background="../pictures/vtext.gif">
Tập tin ví dụ với nền là Volcano Text - Legal Paper [paper.gif]
- Giấy có kẻ hàng
HTML: <body background="../pictures/paper.gif">
Tập tin ví dụ với nền là Legal Paper
<body background="../pictures/paper.gif" text=##AA0000>
sẽ cho chúng ta chữ đỏ trên giấy vàng.
Chú ý: Có nhiều web browser có khả năng thay đổi
màu mặc định - đôi khi một người sử dụng có thể có sự ưa thích một tập các màu mà những màu này
sẽ làm ảnh hưởng đến tập màu bạn đã chọn. Vì vậy, chúng tôi
đề nghị khi sử dụng một tag nền bất kỳ nào (màu cố định hay tập cấu trúc nền)
thì bạn cũng nên bao gồm các màu "bình thường" - màu đen cho phần chữ văn bản, màu xanh dương cho liên kết siêu văn bản
và màu tím cho các liên kết đã xem :
<BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE>
Nếu bạn muốn tìm vài ví dụ về các tập tin cấu trúc nền, hãy xem
Kai's Power Tips Background Archives
Kiểm tra lại công việc của bạn
So sánh trang của bạn với ví dụ mẫu. Nếu trang của bạn trông khác với mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại văn bản bạn đã nhập trong trình soạn thảo. Chúng ta sẽ giữ lại các tập tin mẫu với màu đen cố định mà chúng ta đã thêm vào ở phần đầu của bài này.Xem lại
Xem lại những vấn đề sau:- Làm thế nào để thêm màu nền đồng nhất cho trang Web?
- Tại sao mã màu lại được viết trong dạng mã khó hiểu như #EE66CC?
- Làm thế nào để thêm màu cho văn bản trong trang Web?
- Giữa
<body bgcolor=#FFFFFF>và<body background="tiles.gif">khác nhau như thế nào?
