1
Bài 10: Thuộc tính cho thành phần BODY-Phần 1 Sat Nov 03, 2012 8:20 pm
Admin
Admin
Bài viết : 3191
Xu : 9210
Thanks : 8
Age : 34Đến từ : Thanh Hóa
Tài Sản:
.:
Bài này sẽ giới thiệu 3 thuộc tính dùng cho thành phần
<b>BODY</b> đó là chọn màu nền, dùng ảnh để làm nền, màu
chữ với các Thẻ: <span class=tag>bgcolor=</span>, <span
class=tag>background= </span>, <span class=tag>text=
</span>.
Mặc nhiên, nếu không khai báo màu nền và màu chữ trong thành phần BODY,
Trình duyệt sẽ tự động chọn màu trắng làm nền và màu đen cho chữ. Chúng
ta có thể sử dụng một số thuộc tính dưới đây để thiết lập màu nền, ảnh
nền và màu chữ cho trang Web theo ý muốn.
I-Màu nền: bgcolor=
1-Cú pháp:
<body bgcolor="color">
Trong đó:
Ví dụ: Đọan Code sau đây lấy màu xanh làm nền
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="blue">
<h2 align=center>Trang Web này dùng màu xanh làm nền và dược khai báo trong thành phần BODY.</h2>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
Thay vì sử dụng tên màu, bạn có thể thay thế bằng giá trị Hexadecimal
(bạn nên sử dụng). Chẳng hạn, màu xanh trong ví dụ trên có giá trị Hex
là: #0000FF. Vậy bạn có thể viết như sau:
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="#0000FF">
<h2 align=center>Thay vì dùng bgcolor="blue", chúng ta có thể dùng giá trị Hex, bgcolor="#0000FF" cho màu xanh.</h2>
</body>
</html>
Click ở đây để xem hiển thị của đọan codes trên.
II-Dùng ảnh làm nền:
Để dùng ảnh làm nền cho thành phần <body>, chúng ta có thể thay thế thuộc tính bgcolor bằng thuộc tính: background=
1-Cú pháp:
<body background="imgname">
Trong đó:
Có 2 định dạng ảnh được hỗ trợ bởi phần lớn các Trình duyệt đó là ảnh
GIF và JPG. Thông thường để tạo ảnh nền, nên dùng JPG vì định dạng này
cho ảnh chất lượng cao. Bạn phải khai báo đúng tên đường dẫn đến ngăn
lưu trữ file ảnh và đúng tên của tập tin ảnh (để ý tên tập là chữ viết
thường hay viết hoa và khai báo cho đúng). Không nhất thiết phải chọn
một tập tin ảnh có kích thước lớn làm nền. Mặc nhiên, khi chọn một ảnh
cho nền, trình duyệt sẽ tự động trải ảnh này cho tòan bộ trang Web.
Nghĩa là Browser sẽ tạo ra một ảnh lớn làm nền từ file ảnh nhỏ bằng
cách trải và đặt chúng nằm liền nhau. Nếu ảnh nền không sử dụng hiệu ứng
Seamless Tiding- một kỹ thuật làm liền viền như lót gạch hoa, thì giữa
các ảnh dàn trải sẽ xuất hiện các đường viền khiến chúng không liền
nhau. Để tránh trường hợp này, bạn phải dùng một chương trình xử lý ảnh
để tạo ảnh liền viền. Xem bài Thực hành số 3-Bài 8 tài liệu hướng dẫn
sử dụng Paintshop Pro 8. Dưới đây là 2 đọan code sử dụng ảnh nền cho
trang Web. Với 2 ảnh mẫu bên dưới: Bạn nên lưu 2 file ảnh này vào thư
mục chứa file thực hành.
Ảnh 1-Không liền viền. Ảnh 2-Liền viền.
Ví dụ: Đọan code dưới đây sử dụng ảnh làm nền.
<html>
<head>
<title>Non Seamless Tiding</title>
</head>
<body background="notiding.jpg">
<h2 align=center><font color=navy>Ảnh nền Cho Web không dùng hiệu ứng Seamless Tiding</font></h2>
<h4 align=center>Bạn dễ dàng nhận ra các đường nối giữa các ảnh nhỏ.</h4>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
<html>
<head>
<title>Seamless Tiding</title>
</head>
<body background="tiding.jpg">
<h2 align=center><font color=navy>Ảnh nền Cho Web dùng hiệu ứng Seamless Tiding</font></h2>
<h4 align=center>Bạn khó nhận ra các đường nối giữa các ảnh nhỏ.</h4>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
Sẽ thừa nếu bạn vừa dùng ảnh làm nền lại vừa dùng màu làm nền. Do
vậy, chỉ 1 trong 2 chọn lựa nền cho trang Web nói trên được dùng trong
thành phần BODY .
III-Màu chữ: text=
Mặc nhiên, Browser sẽ chọn màu đen cho chữ. Trong bài 6, chúng ta cũng đã đề cập đến sử dụng Tag <font color> để chọn màu cho chữ. Ngòai ra để thay đổi màu mặc nhiên của chữ, chúng ta còn có thể dùng thuộc tính text="color" .
1-Cú pháp:
<body text="color">
Trong đó:
Ví dụ: Đọan code dưới đây sử dụng màu đen làm nền và màu trắng cho chữ.
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<h2 align=center>Chữ màu trắng và nền màu đen.</h2>
</body>
</html>
Hết Bài 10.
Nguồn: Sưu tầm Internet
<b>BODY</b> đó là chọn màu nền, dùng ảnh để làm nền, màu
chữ với các Thẻ: <span class=tag>bgcolor=</span>, <span
class=tag>background= </span>, <span class=tag>text=
</span>.
Mặc nhiên, nếu không khai báo màu nền và màu chữ trong thành phần BODY,
Trình duyệt sẽ tự động chọn màu trắng làm nền và màu đen cho chữ. Chúng
ta có thể sử dụng một số thuộc tính dưới đây để thiết lập màu nền, ảnh
nền và màu chữ cho trang Web theo ý muốn.
I-Màu nền: bgcolor=
1-Cú pháp:
<body bgcolor="color">
Trong đó:
- bgcolor= :khai báo màu nền cho Web(viết tắt của background color).
- color :Màu cho nền(dùng tên màu hoặc giá trị Hexadecimal).
Ví dụ: Đọan Code sau đây lấy màu xanh làm nền
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="blue">
<h2 align=center>Trang Web này dùng màu xanh làm nền và dược khai báo trong thành phần BODY.</h2>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
Thay vì sử dụng tên màu, bạn có thể thay thế bằng giá trị Hexadecimal
(bạn nên sử dụng). Chẳng hạn, màu xanh trong ví dụ trên có giá trị Hex
là: #0000FF. Vậy bạn có thể viết như sau:
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="#0000FF">
<h2 align=center>Thay vì dùng bgcolor="blue", chúng ta có thể dùng giá trị Hex, bgcolor="#0000FF" cho màu xanh.</h2>
</body>
</html>
Click ở đây để xem hiển thị của đọan codes trên.
II-Dùng ảnh làm nền:
Để dùng ảnh làm nền cho thành phần <body>, chúng ta có thể thay thế thuộc tính bgcolor bằng thuộc tính: background=
1-Cú pháp:
<body background="imgname">
Trong đó:
- background= :khai báo ảnh nền cho thành phần Body.
- imgname: nguồn và tên của ảnh nền.
Có 2 định dạng ảnh được hỗ trợ bởi phần lớn các Trình duyệt đó là ảnh
GIF và JPG. Thông thường để tạo ảnh nền, nên dùng JPG vì định dạng này
cho ảnh chất lượng cao. Bạn phải khai báo đúng tên đường dẫn đến ngăn
lưu trữ file ảnh và đúng tên của tập tin ảnh (để ý tên tập là chữ viết
thường hay viết hoa và khai báo cho đúng). Không nhất thiết phải chọn
một tập tin ảnh có kích thước lớn làm nền. Mặc nhiên, khi chọn một ảnh
cho nền, trình duyệt sẽ tự động trải ảnh này cho tòan bộ trang Web.
Nghĩa là Browser sẽ tạo ra một ảnh lớn làm nền từ file ảnh nhỏ bằng
cách trải và đặt chúng nằm liền nhau. Nếu ảnh nền không sử dụng hiệu ứng
Seamless Tiding- một kỹ thuật làm liền viền như lót gạch hoa, thì giữa
các ảnh dàn trải sẽ xuất hiện các đường viền khiến chúng không liền
nhau. Để tránh trường hợp này, bạn phải dùng một chương trình xử lý ảnh
để tạo ảnh liền viền. Xem bài Thực hành số 3-Bài 8 tài liệu hướng dẫn
sử dụng Paintshop Pro 8. Dưới đây là 2 đọan code sử dụng ảnh nền cho
trang Web. Với 2 ảnh mẫu bên dưới: Bạn nên lưu 2 file ảnh này vào thư
mục chứa file thực hành.
Ảnh 1-Không liền viền. Ảnh 2-Liền viền.
Ví dụ: Đọan code dưới đây sử dụng ảnh làm nền.
<html>
<head>
<title>Non Seamless Tiding</title>
</head>
<body background="notiding.jpg">
<h2 align=center><font color=navy>Ảnh nền Cho Web không dùng hiệu ứng Seamless Tiding</font></h2>
<h4 align=center>Bạn dễ dàng nhận ra các đường nối giữa các ảnh nhỏ.</h4>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
<html>
<head>
<title>Seamless Tiding</title>
</head>
<body background="tiding.jpg">
<h2 align=center><font color=navy>Ảnh nền Cho Web dùng hiệu ứng Seamless Tiding</font></h2>
<h4 align=center>Bạn khó nhận ra các đường nối giữa các ảnh nhỏ.</h4>
</body>
</html>
Click để xem hiển thị của đọan codes trên.
Sẽ thừa nếu bạn vừa dùng ảnh làm nền lại vừa dùng màu làm nền. Do
vậy, chỉ 1 trong 2 chọn lựa nền cho trang Web nói trên được dùng trong
thành phần BODY .
III-Màu chữ: text=
Mặc nhiên, Browser sẽ chọn màu đen cho chữ. Trong bài 6, chúng ta cũng đã đề cập đến sử dụng Tag <font color> để chọn màu cho chữ. Ngòai ra để thay đổi màu mặc nhiên của chữ, chúng ta còn có thể dùng thuộc tính text="color" .
1-Cú pháp:
<body text="color">
Trong đó:
- text= :khai báo chữ cho Web.
- color : Màu cho chữ(dùng tên màu hoặc giá trị Hexadecimal).
Ví dụ: Đọan code dưới đây sử dụng màu đen làm nền và màu trắng cho chữ.
<html>
<head>
<title>Màu nền cho Web</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<h2 align=center>Chữ màu trắng và nền màu đen.</h2>
</body>
</html>
Hết Bài 10.
Nguồn: Sưu tầm Internet
