Cách tạo header và footer trong html

Gần đây, tôi phải cập nhật bố cục in cho khách hàng và thêm thông tin đầu trang và chân trang vào tài liệu họ in thông qua ứng dụng web mà chúng tôi tùy chỉnh tạo cho họ. Vấn đề chúng tôi gặp phải và đã giải quyết là đầu trang và chân trang không phải lúc nào cũng hoạt động như mong đợi trên mỗi trang, điều này cần một số sáng tạo để giải quyết vấn đề

Phương pháp #1 - Vị trí CSS. đã sửa

Giải pháp đầu tiên của chúng tôi là thiết lập vị trí. thuộc tính cố định của các phần tử đầu trang và chân trang. Mã của chúng tôi trông như thế này

CSS

.header {
position: fixed;

top: 0;
}
.footer {
position: fixed;
bottom: 0;
}

Cách tạo header và footer trong html

Và điều này có vẻ ổn nếu nội dung dài dưới 1 trang. Khi bạn cố in nhiều hơn 1 trang sẽ xảy ra chồng chéo

Cách tạo header và footer trong html
 
Cách tạo header và footer trong html

Sau đó, chúng tôi đã thử một phương pháp mới – sử dụng bảng

Phương pháp #2 – Sử dụng bảng html

Khi in bảng html, các phần tử thead và tfoot xuất hiện ở đầu và cuối mỗi trang theo mặc định. Ngoại lệ duy nhất là chân bảng trên trang cuối cùng được in sau nội dung chứ không phải ở dưới cùng

Cách tạo header và footer trong html
 
Cách tạo header và footer trong html

GIẢI PHÁP CUỐI CÙNG

Giải pháp cuối cùng để in đầu trang và chân trang trên đầu và cuối mỗi trang bằng css và html là kết hợp hai giải pháp này

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp về đầu trang và chân trang trong ví dụ HTML và chúng tôi sẽ chỉ cho bạn cách bạn có thể tạo đầu trang và chân trang trong HTML và để hiểu rõ, tiêu đề chỉ là một phần và phần của html mà chúng tôi

Trong khi đó, chân trang là phần dưới cùng của trang web mà chúng tôi đưa các liên kết lên đầu trang, viết về bản quyền, v.v. Hãy để chúng tôi hiểu tiêu đề và chân trang với ví dụ

Hướng dẫn từng bước về đầu trang và chân trang trong ví dụ HTML. -

Vì, đầu trang và chân trang là phần chính của trang web của chúng tôi, vì vậy hôm nay chúng ta sẽ tìm hiểu về cả hai

Chúng tôi cũng có thể sử dụng CSS trong đầu trang và chân trang và hầu hết các thẻ hoạt động trong nội dung đều thực hiện cùng một nhiệm vụ trong thẻ đầu trang và chân trang. Bây giờ, hãy để chúng tôi hiểu cả hai với sự trợ giúp của mã


      
        
           Title of the document<title>
   </head>
 <body>
<header>
  <h1>you can type the main heading here</h1>
  <p>write the important text of webpage here</p>
<!-- you can also create a menu bar or say navigation bar here -->
</header>
<p>
 Rest the content of body, you can write here.
</p>
<footer>
  <p> type the name of author here<br>
You can write copyright query here and other text like designed by etc. </p>
</footer>
 </body>
      </html></pre><ol><li>First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.</li><li>Secondly, the <html> tag is used to indicate the beginning of an HTML document.</li><li>As above now <head> tag is used to contain information about web page.</li><li>In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and  ending tags respectively.
  • Thirdly, tag is used to define the webpage body. All the contents to show on website are written here.
  • Ở đây, trong phần nội dung, chúng tôi tạo thẻ tiêu đề và thẻ chân trang. Bạn cũng có thể tạo thêm các thẻ tùy thích giữa chúng và bên trong chúng.
  • Trong phần tiêu đề, chúng tôi tạo một thẻ tiêu đề và một thẻ đoạn. Trong thẻ tiêu đề, chúng ta phải xác định chủ đề chính của tiêu đề của trang, trong đó trong thẻ đoạn văn, chúng ta có thể tạo liên kết đến trang chủ, chèn logo và nhiều thứ khác. Chúng tôi cũng có thể tạo một thanh menu ở đây
  • Bây giờ, chúng ta hãy nói về footer, ở footer chúng ta tạo thẻ đoạn văn, bạn có thể tạo div ở đó và nhiều thứ khác
  • Tại đây, chúng ta có thể tạo nút điều hướng lên đầu trang và có thể tạo văn bản bản quyền và văn bản như thiết kế bởi/ cho, v.v. do đó, có rất nhiều điều mà bạn có thể viết ở đây
  • At last, the and tags are closed with and respectively.
  • Sự kết luận. -

    Tóm lại, ở đây chúng tôi có thể nói rằng với sự trợ giúp của bài viết này, chúng tôi có thể tạo đầu trang và chân trang trong html. Tôi hy vọng hướng dẫn về đầu trang và chân trang trong ví dụ HTML này sẽ giúp ích cho bạn