Thẻ div trong html

Bây giờ các bạn bắt đầu với thẻ DIV trong html, thẻ div cực kì quan trọng khi thiết kế website cũng có thể nói là thẻ div được dùng nhiều nhất. Mỗi phần tử trong html đều có giá trị mặc định css, thẻ div cũng vậy nó sẽ có giá trị mặc định là display: block; ( các bạn nên để ý đến).

Ý nghĩa của thẻ div là để tạo ra một khối riêng biệt và nằm trên một hàng duy nhất, bạn cũng có thể hiểu nó y như một cái hộp xếp chồng lên nhau và một hộp là một thẻ div.

Cấu trúc thẻ div trong html

cấu trúc thẻ div trong html là <div></div>, thẻ div là một cặp thẻ có thẻ mở và thẻ đóng nên các bạn đừng bao giờ quên mà có quên thì quên ít thôi.

Các bạn biết tại sao mình khuyên các bạn đừng quên cặp thẻ div không ? bởi vì thiếu một thẻ đóng hoặc mở thôi là sai cả toàn bộ code website.

<div style="background-color:red; height:50px;">chào mừng các bạn đến với thẻ div</div>
<div style="background-color:blue;">thẻ div trong html rất quan trọng</div>

Ảnh minh họa cho thẻ div trên :

thẻ div trong html
thẻ div trong html

Bạn giờ đã hiểu rõ một khối riêng biệt trong thẻ div rồi chứ ! nếu thẻ div không phải là một khối thì thẻ div có màu xanh sẽ nằm cùng hàng với khối màu đỏ. Mình định dạng css một tý cho các bạn nhìn rõ chứ không có định dạng css thì chỉ nhìn thấy chữ nằm 2 hàng.

Mình nói về css một tý là thuộc tính style là để khai báo định dạng css, thuộc tính background-color định dạng màu nền, thuộc tính height là định dạng chiều cao.

Cách sử dụng thẻ div trong html

Các bạn giờ đã hiểu rõ tất tần tật về thẻ div rồi, giờ là phần nâng cao về thẻ div trong html cho các bạn hiểu như thế nào là một bố cục website.

Mình nói sơ qua về thẻ <meta charset=”utf-8″> một chút, thẻ này khai báo với trình duyệt rằng mình sẽ sử dụng bảng mã tiếng việt ghi có dấu ( nếu không khai báo sẽ bị lỗi).

Đoạn mã <html lang=”vi”>  khai báo với trình duyệt cũng như các công cụ tìm kiếm biết rằng quốc gia mình muốn hiển thị là ở việt nam.

<!DOCTYPE html>
<html lang="vi">
 <head>
 
 <style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
width: 1000px;
margin: 0 auto;
font-family: Helvetica, Arial,sans-serif;
font-size: 16px;
}
#header {
background: blue;
color: white;
padding: 1em;
}
#content {
background: red;
color: white;
width: 596px;
float: left;
padding: 1em;
}
#sidebar {
background: yellow;
color: white;
width: 300px;
float: right;
padding: 1em;
}
#footer {
clear: both;
background: black;
color: white;
padding: 1em;
}
</style>
 <title>Thẻ div trong html</title>
 <meta charset="utf-8">
 </head>
 <body>
 
 <div id="header">
 <h1>hướng dẫn học thẻ div trong html</h1>
 
 </div>
 
 <div id="content">
 <p>Nội dung thẻ div trong html</p>
 </div>
 
 <div id="sidebar">
 <p>Đây là sidebar</p>
 </div>
 
 <div id="footer">
 <p>khóa học marketing</p>
 </div>
 
 </body>
</html>

Ảnh minh họa cho ví dụ trên :

cách sử dụng thẻ div trong html
cách sử dụng thẻ div trong html

Mình có sử dụng css một tý các bạn đừng quan tâm đến mà hiểu rõ cách dùng thẻ div để tạo ra bố cục website, bài này liên quan đến nhiều kiến thức css rồi đấy.

-

Trả lời