19. HTML - Nền

Thảo luận trong 'HTML' bắt đầu bởi admin, 15/9/15.

  1. admin

    admin Administrator Thành viên BQT

    Tham gia ngày:
    5/9/15
    Bài viết:
    42
    Đã được thích:
    0
    Điểm thành tích:
    6
    Theo mặc định, nền của trang web là màu trắng. Bạn có thể thiết lập một màu khác cho trang của bạn. Có hai cách để 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
    Sử dụng màu nền

    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 body và bảng. Bạn sử dụng các màu khác nhau để thiết lập nền cho body 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.

    PHP:
    <tagname bgcolor="color_value"...>
    Giá trị color_value có thể được cho trong các định dạng sau:

    PHP:
    <!-- Format 1 - Use color name -->
    <
    table bgcolor="lime" >
    <!-- 
    Format 2 - Use hex value -->
    <
    table bgcolor="#f1f1f1" >
    <!-- 
    Format 3 - Use color value in RGB terms -->
    <
    table bgcolor="rgb(0,0,120)" >
    Ví dụ:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Background Colors</title>
    </
    head>
    <
    body>

    <!-- 
    - Use color name -->
    <
    table bgcolor="yellow" width="100%">
    <
    tr><td>
    This background is yellow
    </td></tr>
    </
    table>
    <!-- 
    - Use hex value -->
    <
    table bgcolor="#0000FF" width="100%">
    <
    tr><td>
    This background is blue
    </td></tr>
    </
    table>
    <!-- 
    - Use color value in RGB terms -->
    <
    table bgcolor="rgb(0,128,0)"  width="100%">
    <
    tr><td>
    This background is green
    </td></tr>
    </
    table>

    </
    body>
    </
    html>
    Kết quả:

    upload_2015-10-6_13-20-30.jpeg

    Sử dụng hình ảnh

    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à:

    PHP:
    <tagname background="Image URL"...>
    Các định dạng hình ảnh thường được sử dụng là JPEG, GIF, PNG.

    Ví dụ:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Background Images</title>
    </
    head>
    <
    body>

    <!-- 
    Set table background -->
    <
    table background="images/logo2.jpg" width="100%" height="100">
    <
    tr><td>
    This background is filled up with image logo2.jpg.
    </
    td></tr>
    </
    table>
    </
    body>
    </
    html>
    Kết quả:

    upload_2015-10-6_13-32-49.jpeg

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

    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. Chúng ta 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ụ:

    Ta có 2 hình trong thư mục images:
    upload_2015-10-6_13-40-56.jpeg

    Ta thiết lập nền hoa văn cho bảng như sau:

    PHP:
    <!DOCTYPE html>
    <
    html>
    <
    head>
    <
    title>HTML Background Images</title>
    </
    head>
    <
    body>

    <!-- 
    Set a table background using pattrern -->
    <
    table background="images/pattern1.gif" width="100%" height="100">
    <
    tr><td>
    This background is filled up with a pattern image.
    </
    td></tr>
    </
    table>

    <!-- 
    Another example on table background using pattrern -->
    <
    table background="images/pattern2.gif" width="100%" height="100">
    <
    tr><td>
    This background is filled up with a pattern image.
    </
    td></tr>
    </
    table>
    </
    body>
    </
    html>

    Kết quả:

    upload_2015-10-6_13-49-15.jpeg
     
    Chỉnh sửa cuối: 6/10/15

Chia sẻ trang này