GALAXY TECH
Chuyên gia Công nghệ
Thứ năm, 27/08/2020 | 00:00 GMT+7

Cách sử dụng <div>, Phần tử Phân chia Nội dung HTML

Một phần của loạt bài: Cách xây dựng trang web bằng HTML

Loạt bài hướng dẫn này sẽ hướng dẫn bạn cách tạo và tùy chỉnh thêm trang web này bằng HTML, ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để hiển thị tài liệu trong trình duyệt web. Không cần trải nghiệm viết mã trước nhưng ta khuyên bạn nên bắt đầu từ đầu loạt bài nếu bạn muốn tạo lại trang web trình diễn.

Ở phần cuối của loạt bài này, bạn sẽ có một trang web sẵn sàng để triển khai lên cloud và làm quen cơ bản với HTML. Biết cách viết HTML sẽ cung cấp nền tảng vững chắc để học các kỹ năng phát triển web front-end bổ sung, chẳng hạn như CSS và JavaScript.

Phần tử Phân chia nội dung HTML ( <div> ) hoạt động như một containers để cấu trúc một trang web thành các thành phần riêng biệt để tạo kiểu riêng. Hướng dẫn này sẽ dạy bạn cách tạo và tạo kiểu cho containers <div> trên trang web .

Riêng phần tử <div> có ít ảnh hưởng đến bố cục của trang và thường được cung cấp các thuộc tính để điều chỉnh kích thước, màu sắc, vị trí hoặc các tính năng khác của nó. Thông thường, các nhà phát triển định kiểu các phần tử <div> bằng CSS, nhưng hướng dẫn này sẽ cung cấp cho bạn hiểu về cách các phần tử <div> hoạt động bằng cách tạo kiểu trực tiếp cho chúng trong một trang HTML .

Phần tử <div> được tạo kiểu bằng thuộc tính style HTML. Như được minh họa trong ví dụ bên dưới, phần tử <div> có thể chứa nhiều thuộc tính kiểu:

<div style=”property: value; property: value;”></div>

Lưu ý phần tử <div> có thẻ mở và thẻ đóng nhưng không yêu cầu bất kỳ nội dung nào. Để hiểu cách phần tử <div> hoạt động trong thực tế, hãy xóa index.html của bạn và dán mã bên dưới vào bên trong. (Nếu bạn chưa theo dõi loạt bài hướng dẫn, bạn có thể xem lại hướng dẫn cài đặt index.html trong hướng dẫn Cài đặt Dự án HTML của bạn của ta .

<div style="width:300px;height:200px; background-color:red;"> </div>

Lưu file và reload trong trình duyệt. (Để biết hướng dẫn về cách tải file trong trình duyệt của bạn, hãy xem hướng dẫn của ta tại đây .) Bạn sẽ nhận được một hộp màu đỏ có chiều rộng 300 pixel và chiều cao 200 pixel như sau:

Div đỏ

Bạn cũng có thể thêm nội dung vào phần tử <div> bằng cách thêm nội dung vào giữa các <div> mở và đóng. Hãy thử thêm văn bản vào giữa các <div> bạn như sau:

<div style="width:300px;height:300px; background-color:red;">   This is text inside a div.  </div>

Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Chia với văn bản

Bạn cũng có thể đặt <div> đựng bên trong <div> container. Hãy thử thêm một containers <div> màu vàng bên trong containers <div> màu đỏ như sau:

<div style="width:300px;height:300px; background-color:red;">   <div style="width:100px;height:100px; background-color:yellow;">   </div>   </div>

Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Div bên trong div

Lưu ý các phần tử <div> là các phần tử cấp khối và sẽ bắt đầu trên dòng riêng của chúng và đẩy các phần tử tiếp theo xuống dòng tiếp theo. Hãy thử thêm một phần tử <div> vào file của bạn để hiểu cách nó được đẩy xuống dòng tiếp theo (mặc dù dường như có đủ không gian để nó vừa với phần tử <div> thứ hai:

<div style="width:300px;height:300px;background-color:red;">   <div style="width:100px;height:100px; background-color:yellow;">   </div> </div> <div style="width:100px;height:100px; background-color:blue;"> </div>

Lưu file và reload trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:

Ba div

Đến đây bạn sẽ có hiểu biết cơ bản về cách hoạt động của các phần tử <div> . Ta sẽ quay lại các phần tử <div> khi ta bắt đầu xây dựng trang web của bạn trong phần thứ ba của loạt bài hướng dẫn này.

Tags:

Các tin liên quan

Cách sử dụng