Bày trí nền và khung

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (239.53 KB, 11 trang )

CHƯƠNG VI. BÀY TRÍ NỀN VÀ KHUNG
VI.1. Màu nền và văn bản
VI.1.1. Đặt màu nền
Để văn bản trở nên đẹp và hấp dẫn, đôi khi đặt nền cho trang siêu văn bản.
Thuộc tính BGCOLOR (Background Color). Dùng thuộc tính này kèm
thẻ <BODY> để đặt màu nền cho văn bản. Cú pháp như sau:
<BODY BGCOLOR="#rrggbb">
Nội dung của tài liệu
</BODY>
trong đó "#rrggbb" là red-green-blue, bộ ba số hai chữ số hệ đếm 16, xác định mã
màu.
VI.1.2. Màu chữ của văn bản
Thuộc tính
TEXT
. Thuộc tính này để thiết lập màu cho các con chữ trong
văn bản, trừ các đầu mối liên kết phải có màu khác đi.
<BODY TEXT="#rrggbb">
Nội dung của tài liệu
</BODY>́
VI.1.3. Màu của đầu mối liên kết - Thuộc tính LINK, VLINK và ALINK
Ba thuộc tính trên để đặt màu của các đầu mối siêu liên kết.
1* LINK - đặt màu hiển thị trước khi nhấn chuột vào để đến thăm đích liên kết.
2* VLINK - Đặt màu sau khi đích liên kết đã được đến thăm (visited).
3* ALINK - đặt màu khi bạn kích hoạt, đang nhấn chuột vào (active).
Các màu mặc định là:
LINK=blue, VLINK=purple and ALINK=red
<BODY LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb">
Nội dung của tài liệu
</BODY>
Kết hợp cùng với nhau
<HTML>

<HEAD>
<TITLE>Color Control Example</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" TEXT="#F0F0F0" LINK="#FFFF00"
VLINK="#22AA22" ALINK="#0077FF">
Đây là một tài liệu làm ví dụ về thiết đặt màu. Các
chữ màu xám sáng trên nền đen, và <A
HREF="nowhere.htm">đầu mối liên kết</A> đầu tiên có màu
vàng, chuyển màu xanh lá cây sáng khi được kích hoạt và
có màu xanh nhạt khi điểm đích đã được thăm
</BODY>
</HTML>
Lưu ý: Tổ hợp màu như trên chỉ được thiết đặt một lần cho toàn văn bản.
Hãy thận trọng khi lựu chọn để đảm bảo dễ đọc, dễ nhìn.
VI.1.4. Thuộc tính và mã màu
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb"
VLINK="#rrggbb" ALINK="#rrggbb">
Thuộc tính Mô tả
BGCOLOR
Đặt màu nền
TEXT
Đặt màu các con chữ, trừ các mối nối.
LINK
Đặt màu ban đầu của đầu mối liên kết khi chưa kích
hoạt
VLINK
Đặt màu đầu mối liên kết khi đã thăm đích
ALINK
Đặt màu đầu mối liên kết khi kích hoạt
Một vài mã màu hay dùng:

Màu Mã
black #000000
white #FFFFFF
pale grey #DBDDE5
dark green #306020
green #405060
pale blue/green #00FFFF
pale blue #A5D6F7
navy blue #000020
burgundy #800040
yellow #FFFF00
purple #601050
red #FF0000
orange red #FF2400
orange #FF7F00
neon blue #4D4DFF
pale purple/orchid #9370DB
maroon #8E236B
scarlet #8C1717
pale purple #6B238E
firebirch #8E2323
Tuy nhiên hiện nay nhiều trình duyệt chấp nhận dùng tên màu tiếng Anh thay
cho các chữ số rất khó nhớ ở trên.
VI.2. Nạp hình ảnh làm nền cho trang văn bản
VI.2.1. Thuộc tính BACKGROUND
Có thể dùng thuộc tính này để tạo một ảnh nền cho trang tài liệu siêu văn
bản. Thay cho xác định màu ta cần chỉ ra tên tệp hình ảnh kèm đường dẫn.
<BODY BACKGROUND ="đường dẫn tới tệp ảnh">
Nội dung tài liệu
</BODY>́

Ví dụ:
<BODY BACKGROUND="images/backgnd.gif">
Khi dùng ảnh làm nền cho trang Web cần phải nạp một tệp hình ảnh. Như ta
đã biết tệp ảnh thường có kích thước lớn, làm chậm việc hiển thị trang tài liệu. Do
đó cần chọn tệp ảnh có kích thước nhỏ làm ảnh nền. Toàn bộ trang văn bản sẽ được
"lát nền" bằng hình ảnh này như ta lát nền nhà bằng gạch hoa.
VI.2.2. Water mark
Nhiều trang web có nền trang trí gắn chặt cố định, còn phần văn bản sẽ cuộn
trôi bên trên mỗi khi ta di chuyển thanh trượt. Hiệu ứng này được tạo ra nhờ thiết
lập thêm thuộc tính cho ảnh nền là
bgproperties="fixed"
Ví dụ:
<BODY BACKGROUND="images/backgnd.gif"
bgproperties="fixed">
VI.2.3. Hãy ký tên vào tài liệu của mình
Một thông lệ nên tuân theo là "kí tên" vào tài liệu. Nó giúp cho người đọc
biết được những thông tin tối thiểu về tác giả soạn ra tài liệu, thời gian cập nhật...
Việc đưa thêm địa chỉ của tài liệu Web vào cuối trang sẽ giúp cho người đọc lưu lại
được xuất xứ của trang tài liệu. Đó là chưa nói đến ý nghĩa quan trọng của phần
chữ kí này trong các tài liệu chính thức hoặc có tính thương mại.
Phần chữ kí thường gồm các thông tin sau:
4* Ngày khởi tạo lần đầu.
5* Ngày sửa chữa cập nhật gần nhất.
6* Tên (và e-mail) của tác giả
7* Tuyên bố về bản quyền (nếu cần )
8* URL
Đoạn mã HTML của phần chữ kí đại loại có thể như sau:
<HR SIZE=1>

Ngày viết: 20 September 1998

Ngày cập nhật: 20 October 2001 
Tác giả: <A HREF="mailto:">
Nguyễn Văn Hùng</A> email:
"> 

Copyright © Viện Đào tạo công nghệ thông tin -
VITTI, ĐHQG Hà nội, 1998.
<HR SIZE=1>
URL: />́
Thẻ <A HREF="mailto:">...
</A> là mối liên kết đến dịch vụ thư điện tử, khi trỏ chuột vào đây sẽ kích hoạt
dịch vụ e-mail để gửi đến địa chỉ nêu sau lệnh mailto.
Hãy tập thói quen thêm chữ kí vào tài liệu của mình!
VI.3. Khung – Frames
HTML có các thẻ trình bày cho phép chia vùng hiển thị của cửa sổ trình
duyệt thành nhiều khung, mỗi khung là một cửa sổ độc lập, hiển thị một tài liệu
HTML khác nhau.
Khung cho phép người thiết kế hiển thị đồng bộ nhiều tài liệu HTML khác
nhau để tiện theo dõi, so sánh. Ví dụ, trong khung bên trái hiển thị các nút bấm, còn
khung bên phải hiển thị tài liệu tương ứng.
VI.3.1. Trang trí khung
Trang HTML thực hiện bày trí các khung (gọi là frameset document) có cấu
trúc khác trang thông thường, không có khung.
Trang thường có 2 phần,
HEAD
và
BODY
. Trang bày trí khung có
HEAD
và

FRAMESET
thay cho
BODY
.
Thành phần
FRAMESET
tổ chức các khung trong cửa sổ trình duyệt. Nó cũng
có thể chứa thẻ
NOFRAMES
để xử lí trường hợp trình duyệt không hỗ trợ frame.
Các thành phần thông thường khác vốn nằm trong
BODY
không được xuất
hiện trước thẻ mở
FRAMESET
. Nếu không, thành phần
FRAMESET
sẽ bị bỏ qua.
Ví dụ:
Dưới đây là một ví dụ đơn giản.
<HTML>
<HEAD>
<TITLE>A simple frameset document</TITLE>
</HEAD>
<FRAMESET cols="20%, 80%">
<FRAMESET rows="100, 200">
<FRAME src="frame1.html">
<FRAME src="frame2.gif">

Bày trí nền và khung

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về