07/05/2018, 14:45

Thiết lập background trong HTML

Theo mặc định, nền của trang web là màu trắng. Bạn có thể không thích màu này, và muốn thiết lập một màu khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để trang trí nền cho trang web của bạn: Sử dụng màu nền. Sử dụng hình ảnh làm nền Giờ hãy cùng chúng tôi tiếp cận ...

Theo mặc định, nền của trang web là màu trắng. Bạn có thể không thích màu này, và muốn thiết lập một màu khác cho trang của bạn. HTML cung cấp cho bạn hai cách sau để trang trí nền cho trang web của bạn:

  • Sử dụng màu nền.
  • Sử dụng hình ảnh làm nền

Giờ hãy cùng chúng tôi tiếp cận cả hai cách này qua những ví dụ:

Thiết lập màu nền trong HTML - Thuộc tính bgcolor trong HTML

Thuộc tính bgcolor được sử dụng để điều khiển nền trong một phần tử HTML, riêng biệt cho các nền của thân trang và bảng. Bạn sử dụng các màu khác nhau để thiết lập nền cho thân trang và bảng. Dưới đây là cú pháp để sử dụng thuộc tính này với bất kỳ thẻ HTML nào.

<tên-thẻ bgcolor="giá-trị-màu"...>

Giá trị giá-trị-màu có thể được cho trong các định dạng sau:

 
<table bgcolor="lime" >
 
 
<table bgcolor="#f1f1f1" >
 
 
<table bgcolor="rgb(0,0,120)" >

Ví dụ

Sau đây là một ví dụ về thiết lập màu nền cho một thẻ HTML:

<!DOCTYPE html>
<html>
<head>
<title>Thiet lap mau nen trong HTML</title>
</head>
<body>

 
<table bgcolor="yellow" awidth="100%">
<tr><td>
Mau nen la mau vang
</td></tr>
</table>
 
 
<table bgcolor="#6666FF" awidth="100%">
<tr><td>
Mau nen la xanh da troi
</td></tr>
</table>
 
 
<table bgcolor="rgb(255,0,255)"  awidth="100%">
<tr><td>
Mau nen la xanh la cay
</td></tr>
</table>

</body>
</html>

Nó sẽ tạo ra các kết quả sau:

Mau nen la mau vang
Mau nen la xanh da troi
Mau nen la xanh la cay

Thiết lập hình nền trong HTML - Thuộc tính background trong HTML

Thuộc tính background có thể được sử dụng để điều khiển nền của một phần tử HTML, riêng biệt cho nền của thân trang và bảng. Bạn có thể sử dụng một hình ảnh để làm nền cho trang hoặc bảng. Dưới đây là cú pháp để sử dụng thuộc tính này với bất kỳ thẻ HTML là:

Ghi chú: Thuộc tính background là thuộc tính cũ và được đề nghị để sử dụng Style Sheet cho các thiết lập nền.
<tên-thẻ background="đường dẫn url tới hình ảnh"...>

Các định dạng hình ảnh thường được sử dụng là JPEG, GIF, PNG.

Ví dụ

Ví dụ sau để thiết lập ảnh nền cho một bảng.

<!DOCTYPE html>
<html>
<head>
<title>Vi du hinh nen trong HTML</title>
</head>
<body>

 
<table background="./images/html.gif" awidth="100%" height="100">
<tr><td>
Bang nay se co mot hinh nen.
</td></tr>
</table>
 
</body>
</html>

Nó tạo ra kết quả là:

Bang nay se co mot hinh nen.

Các nền Hoa văn & Trong suốt trong HTML

Chắc bạn đã nhìn thấy rất nhiều các nền được trang trí hoa văn hay trong suốt trong các trang web. Loại nền này rất dễ dàng có thể tạo được bằng cách sử dụng hình ảnh hoa văn hay trong suốt cho nền.

Bạn nên lưu ý là trong khi tạo các ảnh hoa văn, ảnh GIF trong suốt hoặc ảnh PNG, bạn nên sử dụng kích cỡ nhỏ nhất có thể (nhỏ như 1 x 1) để trành việc hình ảnh bị tải chậm.

Ví dụ

Dưới đây là ví dụ về thiết lập nền hoa văn cho bảng:

<!DOCTYPE html>
<html>
<head>
<title>Vi du hinh nen trong HTML</title>
</head>
<body>

 
<table background="./images/pattern1.gif" awidth="100%" height="100">
<tr><td>
Hinh nen cua bang la mot pattern image.
</td></tr>
</table>

 
<table background="./images/pattern2.gif" awidth="100%" height="100">
<tr><td>
Hinh nen cua bang la mot pattern image.
</td></tr>
</table>
 
</body>
</html>

Nó tạo ra nền bảng như sau:

Hinh nen cua bang la mot pattern image.
Hinh nen cua bang la mot pattern image.

Loạt bài hướng dẫn học lập trình HTML cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com

Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com:

0