Home / Tutorial Blog / Struktur Pembagian Tampilan Website

Struktur Pembagian Tampilan Website

Struktur pembagian tampilan website merupakan pembagian tata letak bagian-bagian pada halaman website. Sebuah halaman website pada umumnya dibagi menjadi beberapa bagian tampilan seperti header, menu, isi, sidebar dan footer. Biasanya masing-masing bagian ini pada CSS dikelompokkan dalam tag <div> dengan atribut id.

Bagian Header

Adalah bagian kepala website yang berada pada posisi paling atas halaman website. Bagian header biasanya berisi tentang informasi singkat sebuah website seperti logo website, title dan tag line website. Seperti misalnya pada saat membuat surat, header merupakan kepala surat yang berisi informasi instansi atau perusahaan. Header ini selalu sama pada setiap halaman website.

Pada beberapa website, sebagian besar bagian header bahkan diisi dengan banner iklan dan hanya memberi sedikit ruang untuk title dan deskripsi singkat website. Bagian header dapat dipercantik dengan menambahkan gambar background yang sesuai dengan tema website.

Bagian Menu

Adalah bagian yang berfungsi untuk navigasi link-link didalam sebuah website. Oleh sebab itu bagian menu sering disebut juga dengan Navigasi. Bagian menu dirancang seperti shortcut pada komputer yang menghubungkan pengguna ke sebuah halaman jika di klik. Sebaiknya letak menu pada halaman website berada pada posisi yang mudah dillihat dan dijangkau.

Letak bagian menu utama/primer kebanyakan dibawah header dalam posisi horizontal. Menu ini biasanya berisi tentang link untuk membuka isi website, bisa kategori/label atau bisa juga halaman statis. Selain menu primer, ada pula bagian menu website yang ditaruh didalam header dan dipakai untuk link sekunder seperti tentang kami, kontak dan disclaimer.

Bagian Isi atau Konten

Adalah bagian utama website yang berisi materi/artikel yang akan disampaikan pemilik website kepada pengunjung/pembaca. Bagian isi biasanya menempati porsi paling luas pada halaman website. Pada kebanyakan website, bagian isi berada dibawah header dan menu.

Bagian isi inilah yang merupakan inti dari sebuah halaman website. Tulisan-tulisan pada bagian isi merupakan uraian deskripsi dari judul artikel. Didalam bagian isi terdapat heading (H1) yang berbeda dari header. Heading ini bisa dikatakan sebagai judul artikel. Kemudian dibawah heading terdapat paragraf-paragraf isi dan sub heading (H2, H3,H3...dan seterusnya).

Bagian Footer

Adalah bagian yang merupakan kaki halaman website. Bagian footer pada umumnya berisi tentang informasi pemilik website, copyright dan desainer website. Pada beberapa website besar, seperti website berita, bagian footer kadang diisi dengan navigasi link kategori dan sub kategori yang lebih rinci.

Bagian footer memang kadang jarang kita lihat saat membuka sebuah website, namun tanpa footer website akan terlihat pincang dan terputus. Bagaimanapun footer merupakan pelengkap keutuhan sebuah halaman website.

Bagian Sidebar

Adalah bagian yang biasanya berada samping bagian isi. Bagian ini berasal dari bagian isi yang dibagi menjadi beberapa bagian dan bagian selain isi utama (main konten) inilah yang disebut dengan sidebar. Bagian ini berisi informasi sekunder selain informasi utama seperti informasi artikel terbaru, artikel terpopuler, indeks halaman atau bahkan bisa juga berupa iklan.

Letak bagian sidebar bisa berada di kiri, dikanan atau sepasang dikiri dan kanan. Bagian sidebar bisa berjumlah satu, dua, tiga dan seterusnya. Namun perlu diperhatikan semakin banyak sidebar maka semakin sempit ruang untuk menulis artikel utama.

Contoh script struktur pembagian tampilan website

Sebuah halaman html dengan struktur lengkap bisa digambarkan pada script berikut ini:
 <html>  
 <head>  
 <title>...TITLE WEBSITE...</title>  
 </head>  
 <body>  
   
  <div id="header">  
   HEADER WEBSITE  
  </div>  
   
  <div id="menu">  
   MENU WEBSITE  
  </div>  
   
  <div id="main">  
   
    <div id="left">  
     SIDEBAR KIRI  
    </div>  
   
    <div id="content">  
     ISI ARTIKEL  
    </div>  
   
    <div id="right">  
     SIDEBAR KANAN  
    </div>  
   
  </div>  
   
  <div id="footer">  
   FOOTER WEBSITE  
  </div>  
 </body>  
 </html>  
   
 </body>

Struktur Pembagian Tampilan Website Rating: 4.5 Diposkan Oleh: as