header ads

Membuat header dan footer pada HTML

Riyan Erlangga January 16, 2020
Assalamualaikum wr.wb sobat programmer.
Kali ini kita akan belajar mengenai header dan footer pada HTML.


Header dan Footer
Elemen ini dapat kita gunakan untuk:
  • Sebuah header dan footer utama yang muncul pada awal dan akhir di sebuah halaman (<body>). 
  • Header digunakan sebagai pengantar atau pembuka konten dalam sebuah elemen <article> atau <section>. 
  • Footer digunakan sebagai catatan kaki pada sebuah elemen <article> atau <section>.
Pada contoh dibawah ini elemen <header>digunakan untuk menampilkan nama situs dan navigasi utama.


<header>
<h1>Pengurus IPT</h1>
<p>Nama pengurus IPT</p> 
  <nav>     
    <ul>         
      <li><a href="#">M Riyan Erlangga</a></li>         
        <li><a href="#">Ali akbar</a></li>   
          <li><a href="#">Benon</a></li>      
    </ul> 
      </nav>
        </header>


Hasilnya akan seperti dibawah ini :

Dan elemen <footer> digunakan sebagai informasi hak cipta.


<article>
<header>   
   <h1>Belajar HTML dasar</h1>  
     <h2>&copy; IT programmer Tegal</h2>
       </header>
<p>Konten tutorial banyak disini</p>
    <footer>
  <p>Visit to</p>
    <ul>    
       <li>Twitter</li>
           <li>Facebook</li>
             <li>WhatsApp</li>
                </ul>
                   </footer>
  </article>


Hasilnya diweb browser akan seperti ini :


Perlu kita ketahui bahwa elemen <header>dan <footer> tidak boleh ditulis di dalam elemen <header> dan <footer> lainnya (bertumpuk/nested).

 Sekian materi yang dapat saya sampaikan semoga bermanfaat untuk kalian semua.
Wassalamualaikum wr.wb


Tags

Post a Comment

0 Comments