Làm cách nào để chia trang web thành các phần trong html?

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp chia trang HTML thành hai phần theo chiều dọc, tất cả chúng ta đều biết rằng chúng ta có thể chia trang html thành hai phần theo chiều dọc cũng như hai phần theo chiều ngang

Chúng ta sẽ trình bày cách chia trang HTML thành 2 phần, phần dọc và phần ngang trong bài học này. Chúng ta đều biết cách chia trang HTML thành hai phần, hai phần dọc và hai phần ngang

Tuy nhiên, ý tưởng đằng sau giải pháp của chúng tôi hôm nay là tìm cách chia trang HTML thành hai phần dọc và ngang. Mặc dù có nhiều cách để thực hiện việc này nhưng mục đích của chúng tôi là hỗ trợ bạn tìm ra giải pháp đơn giản nhất có thể

Do đó, hôm nay chúng tôi sẽ hướng dẫn các bạn cách chia trang HTML thành hai phần theo chiều dọc và chiều ngang

Hướng Dẫn Chia Trang HTML Thành 2 Phần Theo Chiều Dọc, Theo Bước

Ngoài ra, không tốn thêm thời gian. Thẻ bộ phận bao gồm thẻ hậu duệ của chúng, thẻ bộ phận, có thể được sử dụng để thực hiện việc này. Nhưng với mục đích này, thẻ chia thường được sử dụng

Do đó, để giúp bạn hành động một cách chuyên nghiệp, chúng tôi cũng sẽ hướng dẫn bạn cách sử dụng các phần tử phân chia để phân chia theo chiều dọc trang HTML. Thuộc tính float, có giá trị còn lại, là một thuộc tính khác được sử dụng trong lập trình

Điều đó ngụ ý rằng nó di chuyển trang sang bên trái để mọi thứ thẳng hàng theo chiều dọc. Mã hiện được cung cấp dưới dạng

  1. Để thông báo cho trình duyệt web về phiên bản HTML mà tài liệu được viết, một trong những loại đầu tiên
  2. Phần tử được sử dụng để biểu thị sự bắt đầu của tệp Html
  3. Như đã đề cập trước đây, thẻ hiện được sử dụng để cung cấp thông tin chi tiết về trang web. Aelement được bao gồm trong thẻ này để cho phép chúng tôi cung cấp tiêu đề của trang web. Các thẻ "đầu" và "tiêu đề" là các thẻ được ghép nối. Do đó, cả hai đều kết thúc bằng các thẻ và tương ứng
  4. Phần tử được sử dụng để chỉ định phần thân của trang web. Tài liệu này chứa tất cả nội dung của trang web. Vì chúng tôi muốn chỉ ra khu vực mà chúng tôi muốn chia theo chiều dọc thành hai nửa, thẻ div được đặt ở đây trong thẻ body
  5. Đưa ra số đo chiều cao phù hợp với màn hình của bạn nếu bạn muốn chia toàn thân
  6. Tiếp theo, chúng ta phải xác định hai lĩnh vực; . Sau tất cả những điều này, công việc còn lại được hoàn thành bằng CSS;
  7. Bước cuối cùng là đóng các thẻ nội dung và html bằng các thẻ và tương ứng

Hướng Dẫn Chia Trang HTML Thành 2 Phần Theo Chiều Ngang, Từng Bước

Không tốn thêm thời gian, như. Phần tử div và thẻ hậu duệ của nó, thẻ phần, có thể được sử dụng để thực hiện việc này. Tuy nhiên, thẻ chia chủ yếu được sử dụng để thực hiện điều này

Do đó, để giúp bạn hành động một cách chuyên nghiệp, chúng tôi cũng sẽ chỉ cho bạn cách sử dụng các phần tử phân chia để phân tách hợp lý một trang HTML thành các phần. Nếu bạn muốn tìm hiểu thêm về phân chia theo chiều dọc, trước đây chúng tôi đã viết một bài về chủ đề này. Sử dụng trang làm tài nguyên bằng cách xem qua nó

  1. Điều đầu tiên chúng ta làm bây giờ là nhập, cho trình duyệt web biết tài liệu được viết bằng phiên bản HTML nào
  2. Phần tử được sử dụng để biểu thị sự bắt đầu của tệp Html
  3. Như đã đề cập trước đây, thẻ hiện được sử dụng để cung cấp thông tin về một trang web. Việc sử dụng thetag trong thẻ này giúp chúng ta có thể khai báo tiêu đề của trang web. Các thẻ "đầu" và "tiêu đề" là các thẻ được ghép nối. Do đó, cả hai đều chứa các thẻ đóng và tương ứng
  4. Phần tử body> được sử dụng để chỉ định phần thân của trang web. Ở đây được viết tất cả các thông tin sẽ xuất hiện trên trang web
  5. Ở đây, chúng tôi xây dựng phần tử div với chiều rộng và chiều cao nhất định trong thẻ body trước khi cho phép bạn chọn màu nền
  6. Hai thẻ div bổ sung được tạo trong div chính. Ngoài ra, chiều rộng của nó phải khớp với chiều rộng của div chính, nhưng bạn nên cung cấp cho chúng chiều cao riêng nhưng thấp hơn chiều cao của div chính
  7. Hãy nhớ rằng chiều cao của thẻ div chính bằng tổng chiều cao của các thẻ div phụ
  8. Như bạn có thể thấy trong trình duyệt của mình ngay bây giờ, trang web được chia thành hai phần, mỗi phần có chiều cao mà bạn yêu cầu
  9. Bước cuối cùng là kết thúc nội dung và các thẻ html với các thẻ and tương ứng

Phần kết luận. -

Tóm lại, chúng ta có thể kết luận rằng sử dụng các phần tử phân chia, chúng ta có thể tách một trang HTML theo cả chiều dọc và chiều ngang

Tôi thực sự hy vọng rằng bài viết này về cách chia một trang HTML thành hai phần sẽ hữu ích cho bạn và rằng các kỹ thuật và phương pháp nêu trên sẽ đơn giản để sử dụng

Giả sử bạn muốn chia trang thành ba phần. Bạn có thể làm điều này bằng cách thêm ba thẻ div trống

<div></div>
<div></div>
<div></div>

Bước 2. Thêm tên lớp vào thẻ div

Bước tiếp theo là thêm tên lớp vào các thẻ div và đặt cho chúng một tên duy nhất. Thuộc tính tên lớp phân tách các thẻ div khác và khi bạn áp dụng kiểu CSS cho một trong các phần, nó sẽ không ảnh hưởng đến các phần đó

Ở đây tôi đặt tên cho chúng là một, hai và ba, nhưng bạn có thể tự do gọi bất cứ điều gì bạn muốn

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

Bước 3. thêm nội dung

Tại thời điểm này, bạn đã sẵn sàng. Trang được chia thành ba phần và bạn có thể thêm bất kỳ nội dung nào như văn bản, hình ảnh, v.v. , bên trong các thẻ div. Ở đây, tôi đã thêm một văn bản đơn giản để cung cấp cho bạn một ý tưởng

<div class="one">
  <h1>This is section one</h1>
</div>
<div class="two">
  <h1>This is section two</h1>
</div>
<div class="three">
  <h1>This is section three</h1>
</div>

mã ví dụ

Đây là mã ví dụ về cách bạn có thể chia trang bằng thẻ div. Các thuộc tính lề, div và h1 chỉ được bao gồm cho mục đích trình diễn

<style>
  body {
    margin: 0;
  }

  div {
    padding: 65px;
  }

  h1 {
    text-align: center;
  }

  .one {
    background-color: red;
  }

  .two {
    background-color: yellow;
  }

  .three {
    background-color: green;
  }
</style>

<div class="one">
  <h1>This is section one</h1>
</div>
<div class="two">
  <h1>This is section two</h1>
</div>
<div class="three">
  <h1>This is section three</h1>
</div>

đầu ra ví dụ

Và đây là cách nó sẽ xuất hiện trên trình duyệt

Làm cách nào để chia trang web thành các phần trong html?

Thông báo quan trọng

Chúng tôi khuyên bạn nên sử dụng thẻ section để chia trang. Thẻ phần cải thiện khả năng đọc của mã HTML vì việc thêm quá nhiều thẻ div có thể khiến mã khó đọc

Ngoài ra, bạn đang giúp cải thiện khả năng truy cập của trang web để người khuyết tật có thể sử dụng trang web của bạn. Và cuối cùng, bạn cũng đang giúp các công cụ tìm kiếm hiểu nội dung trang web của bạn

Nếu bạn muốn làm mới kiến ​​thức của mình về thẻ div và tìm hiểu xem nó có thể làm gì khác, hãy xem bài viết này về chức năng của “div” trong HTML

Mã HTML để chia trang web là gì?

Thẻ
tag xác định một phần hoặc một phần trong tài liệu HTML. Thẻ

Làm cách nào để chia trang HTML thành hai phần theo chiều ngang bằng div?

Sử dụng float và margin . 50% và thả nổi. bên trái - điều này tạo ra div màu xanh lá cây bao phủ một nửa màn hình theo chiều ngang. Div bên phải sau đó được đặt thành lề trái. 50% - điều này ngay lập tức đặt nó ở bên phải của div bên trái.