Membuat Desain Halaman Web dengan Layout 2 Kolom

Desain halaman web yang akan dibuat adalah bentuk dengan susunan (layout) 2 kolom, di mana sebelah kiri berupa sidebar (sisi samping) dan sebelah kanan adalah isi dari halaman web.

Berikut bentuk kerangka rancangan dari halaman web yang akan kita buat:

design-ui

Tema pembuatan desain halaman web ini adalah untuk situs toko bunga dengan nama “Hanan Florist”.

Sebelum Memulai

Pastikan kamu telah mengetahui dasar HTML dan CSS. Silahkan gunakan HTML Editor yang biasa digunakan, dalam tutorial ini menggunakan Notepad++ sebagai HTML Editor.

Siapkan beberapa gambar untuk memperindah tampilan halaman web. Simpanlah gambar-gambar tersebut dalam folder “gambar”. Berikut gambar-gambar yang harus dipersiapkan:

  • background.png: untuk background halaman web;
  • header.png: untuk header isi halaman web.
  • thumbnail.jpg: sebagai thumbnail isi halaman web.
  • photo1.jpg, photo2.jpg, photo3.jpg dan photo4.jpg: digunakan sebagai galeri foto.

Template Dasar

Mengacu pada kerangka di atas, template dasar HTML adalah sebagai berikut:

<html>
<head>
  <title>Desain Halaman Web 2 Kolom</title>
  <style>
  
  </style>
</head>
<body>
  
</body> </html>

Tag

dengan id=”kiri” nantinya diisikan sebagai sidebar, sedangkan tag

dengan id=”kanan” berisikan isi dalam halaman web.

Kita menggunakan CSS untuk mengatur bentuk halaman web. Bentuk yang diatur pertama adalah jenis dan besar huruf, background halaman dan bentuk 2 kolom.

Tambahkan kode CSS berikut di antara tag :

...

body {
    background: url('gambar/background.png');
    font-family: "open sans";
    font-size: 11pt;
}
#kiri {
  position: fixed;
  top: 40px;
  left: 40px;
  width: 200px;
  border-right: 1px solid #aaa;
}
#kanan {
  margin: 0 40px 40px 280px;
}

...

Kolom Kiri

Kolom kiri berisikan menu dan informasi kontak. Sisipkan kode berikut pada tag

:

...

Jl. Raya Pembangunan KM 50
No 145 Bekasi
Phone: 0812-1234-2678
Email: [email protected]

...

Tambahkan pula CSS untuk mengatur bentuk kolom kiri

...
#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu li {
    padding-bottom: 10px;
    border-bottom: 1px solid #fff499;
}
#kiri p {
    font-size: 11px;
}
...

Jika dijalankan di browser (dari Notepad++ bisa dijalankan melalui menu “Run > Launch in Firefox” atau “Run > Launch in IE” ), tampilan sementara sebagai berikut:

desain-2kolom-sidebar

Kolom Kanan

Kolom bagian kanan terdiri dari 3 bagian, yaitu header, isi dan footer. Sisipkan ke dalam tag

berupa 3 tag

kosong dengan id masing-masing adalah header, content dan footer. Berikut kode HTML:

 ...
</div> ...

Masing-masing bagian akan dijelaskan pada penjabaran berikutnya.

Bagian Header

Bagian ini berisikan gambar header dan judul dari isi halaman web. Berikut kode HTML di bagian header:

...

...

Tambahkan pula CSS berikut:

...
h1 {
  font-family: Verdana;
    color: #930808;
  font-size: 24pt;
}
#header {
    text-align: center;
}
#header img {
  width: 100%;
}
...

Berikut tampilan sementara dengan tambahan bagian header:

desain-2kolom-bagian-header

Bagian Isi

Isi dari bagian ini terdiri dari 2 bagian, yaitu penjelasan tentang toko bunga dan galeri foto.

Pada penjelasan toko berisikan tulisan yang disisipkan gambar kecil (thumbnail) di sisi kiri atas. Tambahkan kode HTML berikut:

...

Hanan Florist adalah toko bunga yang menjual segala jenis karangan dan rangkaian bunga seperti bunga papan, bunga meja, buket bunga (hand bouquet), bunga krans, bunga standing dan berjenis bunga lain. Kami juga menyediakan bunga baik itu bunga potong segar maupun bunga artifisial seperti bunga mawar, bunga anggrek, bunga tulip, bunga lily, bunga krisan, bunga matahari, bunga aster dan berbagai macam bunga lainnya.

Berbagai macam kualitas bunga yang kami jual ada bunga yang langsung di impor dari luar negeri seperti Belanda, Equador, Vietnam, Tiongkok dan negara lainnya, ada juga bunga yang berkualitas import yang pengembangbiakannya dilakukan dalam negeri dan ada juga bunga yang berkualitas lokal. Kriteria bunga di atas ini akan sangat berpengaruh dari bentuk dan ketahanan bunga tersebut. Pada umumnya bunga import atau bunga yang berkualitas import daya tahan dan awetnya lebih lama dari bunga yang berkualitas lokal.

...

Masih di dalam bagian isi, selanjutnya adalah menambahkan galeri foto. Tambahkan kode HTML berikut masih di dalam tag

:

...

Koleksi Bunga

...

Tambahkan kode CSS berikut:

...
.gallery {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.gallery li {
    padding-bottom: 10px;
    display: inline-block;
}
.gallery img {
    width: 300px;
    margin-right:35px;
    margin-bottom:15px;
    margin-top:5px;    
    border: 5px solid #fcfcfc;
    border-radius: 4px;
}
.gallery img:hover{
    border: 5px solid #42C5BB;
    cursor:pointer;
}
...

Bentuk bagian isi dapat dilihat sebagai berikut:

desain-2kolom-bagian-isi

Bagian Footer

Bagian ini hanya berisikan keterangan copyright dan tahun pembuatan. Berikut kode HTML yang dapat disisipkan:

...

...

Sedangkan untuk CSS ditambahkan kode berikut:

...
#footer {
  border-top: 1px solid #dccbcb;
  padding-top: 10px;
  margin-top: 25px;
  text-align: center;
}
...

Dari bagian demi bagian mendesain halaman web di atas, berikut adalah kode lengkap secara keseluruhan:

<html>
<head>
  <title>Desain Halaman Web 2 Kolom</title>
    <style>
  body {
    background: url('gambar/background.png');
    font-family: "open sans";
    font-size: 11pt;
  }
  #kiri {
    position: fixed;
    top: 40px;
    left: 40px;
    width: 200px;
    border-right: 1px solid #aaa;
  }
  #kanan {
    margin: 0 40px 40px 280px;
  }
  #menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #menu li {
    padding-bottom: 10px;
    border-bottom: 1px solid #fff499;
  }
  #kiri p {
    font-size: 11px;
  } 
  h1 {
    font-family: Verdana;
    color: #930808;
    font-size: 24pt;
  }
  #header {
    text-align: center;
  }
  #header img {
    width: 100%;
  }
  .gallery {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  .gallery li {
    padding-bottom: 10px;
    display: inline-block;
  }
  .gallery img {
    width: 300px;
    margin-right:35px;
    margin-bottom:15px;
    margin-top:5px;    
    border: 5px solid #fcfcfc;
    border-radius: 4px;
  }
  .gallery img:hover{
    border: 5px solid #42C5BB;
    cursor:pointer;
  }
  #footer {
    border-top: 1px solid #dccbcb;
    padding-top: 10px;
    margin-top: 25px;
    text-align: center;
  }
  </style>
</head>
<body>
  

Jl. Raya Pembangunan KM 50
No 145 Bekasi
Phone: 0812-1234-2678
Email: [email protected]

Hanan Florist adalah toko bunga yang menjual segala jenis karangan dan rangkaian bunga seperti bunga papan, bunga meja, buket bunga (hand bouquet), bunga krans, bunga standing dan berjenis bunga lain. Kami juga menyediakan bunga baik itu bunga potong segar maupun bunga artifisial seperti bunga mawar, bunga anggrek, bunga tulip, bunga lily, bunga krisan, bunga matahari, bunga aster dan berbagai macam bunga lainnya.

Berbagai macam kualitas bunga yang kami jual ada bunga yang langsung di impor dari luar negeri seperti Belanda, Equador, Vietnam, Tiongkok dan negara lainnya, ada juga bunga yang berkualitas import yang pengembangbiakannya dilakukan dalam negeri dan ada juga bunga yang berkualitas lokal. Kriteria bunga di atas ini akan sangat berpengaruh dari bentuk dan ketahanan bunga tersebut. Pada umumnya bunga import atau bunga yang berkualitas import daya tahan dan awetnya lebih lama dari bunga yang berkualitas lokal.

Koleksi Bunga

</div> </div> </body> </html>

Desain web di atas masih dikategorikan desain sederhana, kamu dapat mengembangkan sesuai dengan kebutuhan yang diinginkan. Silahkan berikan tanggapan di komentar jika ada hal-hal yang kurang atau ingin di tanyakan 🙂 #HappyCoding

Leave a Reply

%d bloggers like this: