Đừng bao giờ để cho trang Web của bạn có một màu xám xịt! Hãy đặt m à u S ắ c hoặc bố trí một cấu trúc nền nào đó "phía sau" phần văn bả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:
1. Mở tập tin index.htm trong trình soạn thảo. 2. Tìm tag <body> và thay đổi nó thành :
<body bgcolor=#000000>
3. Lưu trữ và Nạp tập tin HTML trong Web browser của bạn
Nếu bạn thực hiện chính xác những điều trên, browser của bạn sẽ đổi màu nền thành một màu đen cố định. Nhưng bạn có thể nhận thấy là bạn không thể nhìn thấy được văn
bản của bạn. Tại sao vậy? À, bởi vì màu mặc định cho chữ cũng là màu đen, do đó bạn biết
rằng bạn có những chữ màu đen trên một nền đen! May mắn thay, chúng ta có thêm những khả năng khác trong tag body để thay đổi màu của chữ và những siêu văn 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) Bây giờ bạn có thể thêm các giá trị màu này để thay đổi tag thành:
<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.
Trong phần này của bài học, chúng tôi sẽ tạo cơ hội để bạn có kinh nghiệm với ba hình nền khác nhau. Dạng HTML cho việc thêm một tập tin hình nền là :
<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
Bạn cũng có thể sửa đổi màu của văn bản trong trang Web như chúng tôi đã làm trong ví dụ trên. Lấy ví dụ, nếu bạn muốn chữ màu ĐỎ cho nền Giấy có kẻ hàng, chúng ta có thể viết lại HTML sau:
<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:
1. Làm thế nào để thêm màu nền đồng nhất cho trang Web?
2. Tại sao mã màu lại được viết trong dạng mã khó hiểu như #EE66CC? 3. Làm thế nào để thêm màu cho văn bản trong trang Web?
4. Giữa
<body bgcolor=#FFFFFF> và
<body background="tiles.gif"> khác nhau như thế nào?
Thực tập tự do
Thêm một màu nền cố định hay một tập tin cấu trúc nền cho (các) trang web của bạn. Hỏi vài người khác xem họ có đọc được văn bản với màu nền bạn đã chọn không.