Trang chủ » HTML và CSS » HTML » Thẻ Div trong HTML – Tạo bố cục Website cơ bản bằng thẻ Div

Thẻ Div trong HTML – Tạo bố cục Website cơ bản bằng thẻ Div

Thẻ Div trong HTML dùng như nào? Ý nghĩa của nó là gì? Hôm nay mình sẽ giải đáp thắc mắc của các bạn và hướng dẫn mọi người tạo bố cục Website cơ bản bằng thẻ Div

<div class="trend-entry d-flex">
  <div class="number align-self-start">01</div>
  <div class="trend-contents">
    <h2><a href="#">Ví dụ về thẻ Div</a></h2>
    <div class="post-meta">
      <span class="d-block"><a href="#">THEANH.TECH</a> in <a href="#">News</a></span>
    </div>
  </div>
</div>

Thẻ Div là gì?

– Thẻ Div (<div></div>) là chữ viết tắt của division (nghĩa là khu trong tiếng Việt theo từ điển kỹ thuật chung). Nó được xác định là một bộ phận hoặc một phần trong cấu trúc của Website. Thẻ Div được sử dụng làm vùng chứa các phần tử, các thẻ tags HTML khác. Sau đó được tạo kiểu bằng CSS hoặc được xử lý bằng Javascript. Thẻ Div dễ dàng tạo kiểu bằng cách sử dụng các thuộc tính như Class hoặc bằng Id.

Tạo bố cục Website cơ bản bằng thẻ Div

Thẻ Div trong HTML - Tạo bố cục Website cơ bản bằng thẻ Div
Thẻ Div trong HTML – Tạo bố cục Website cơ bản bằng thẻ Div

– Thường thì phần Header trang chủ website sẽ bao gồm: logo, menu, slide, nút tìm kiếm…

– Nội dung trang sẽ chia thành nhiều phần khác nhau, có thể tác đôi ra như hình ảnh bên trên, hoặc chia thành nhiều khối ngang

– Footer sẽ bao gồm các thông tin liên hệ, nhúng google maps, fanpage, các liên kết liên hệ, chính sách, …

<div class="wrap">
  <!-- header của trang -->
  <div id="header"></div>
  <!-- Nội dung của trang -->
  <div class="section">
    <!-- Cột trái -->
    <div class="col-left">
      <div>Phần tử 1 của cột trái</div>
      <div>Phần tử 2 của cột trái</div>
      <div>Phần tử 3 của cột trái</div>
    </div>
    <!-- Cột phải -->
    <div class="col-right">
      <div>Phần tử 1 của cột phải</div>
      <div>Phần tử 2 của cột phải</div>
      <div>Phần tử 3 của cột phải</div>
    </div>
  </div>
</div>

– Với những dòng code này bạn vẫn phải bắt buộc thêm CSS cho nó thì mới dựng được khung Website như ảnh bên trên. Nếu không bạn chỉ tạo được các dòng text chứ không tạo thành khung thành cột như trên được.

Bài viết liên quan: Cách tạo 2 thẻ div ngang nhau, cùng 1 dòng

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *