Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout Website Sederhana (Part 2)

Advertisement

Untuk layout website yang kedua ini, terdapat element baru yaitu siderbar yang berfungsi untuk menempatkan informasi tambahan seperti postingan terakhir dan arsip blog. Jika contoh layout pertama element menu berada di dalam element header, sekarang kita akan pisahkan element tersebut sehingga berada di luar element header.

membuat layout website

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

Kode HTML untuk layout website dengan 2 kolom (1 kolom konten dan 1 kolom sidebar):

Hasil kode HTML pada web browser tanpa menggunakan CSS:

membuat layout website

Kode CSS

Sekarang kita berikan style untuk layout website yang kedua ini, sebelumnya tambahkan terlebih dahulu kode CSS reset seperti layout pertama.

#1 Style pada element body:

  • font-family: sans-serif
  • background-color: #E6E6FA
  • font color: #000111

#2 Style pada element container:

  • lebar website 900px
  • margin auto

#3 Style pada element header:

  • font-family: serif
  • background-color: slategray
  • padding atas/bawah kanan/kiri: 40px 20px
  • font color: white
  • text-align: center

#3.1 Style judul pada header:

  • font-size: 40px
  • font-weight: bold
  • margin-bottom: 10px

#3.2 Style tagline pada header:

  • font-size: 15px
  • font color: lightcyan

#4 Untuk layout ke dua ini, menu navigasi kita pisahkan dari header:

  • background-color: darkslategray

#4.1 Style pada menu navigasi:

  • display: inline-block
  • font-size: 15px
  • padding: 10px 0px 10px 20px

#4.2 Style anchor text:

  • text-decoration: none
  • color: ghostwhite

#5 Style pada element content:

  • background-color: white

#5.1 Style heading 2 pada element content:

  • font-weight: bold
  • font-size: 20px
  • font-family: sans-serif
  • margin-bottom: 10px

#5.2 Style anchor text pada element content:

  • text-decoration: none
  • font color: darkred

#5.3 Style pada element sidebar:

  • lebar sidebar: 250
  • float: left
  • padding: 20px 15px 10px 20px

#5.4 Style list menu pada element sidebar:

  • margin-bottom: 20px (jarak antara menu dengan heading 2)
  • margin-bottom: 8px (jarak antar list pada menu)

#5.5 Style pada element article:

  • lebar article: 580px
  • float: left
  • padding 20px 20px 10px 15px

#5.6 Style meta data pada element article:

  • font-size: 12px

#5.7 Style paragraf pada element article:

  • font-weight: normal
  • ukuran font: 15px
  • line-height: 20px (jarak antar baris paragraf
  • font-family: ‘times new romans’, serif
  • padding-buttom: 10px (jarak antar paragraf)

#6 Agar element footer tidak bersembunyi di belakang sidebar dan article, kita hapus setingan float dengan menambahkan property clear dengan value both (atau boleh juga left) pada selector .clear:

#7 Terakhir style untuk element footer:

  • background-color: teal
  • padding atas/bawah kiri/kanan: 10px 0px
  • font color: white
  • text-align: center

Kita susun kode CSS di atas sehingga menjadi seperti berikut ini:

Layout website pada web browser setelah ditambahkan kode CSS:

membuat layout website
0 0 votes
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
3 days ago

[…] Layout website 2 terdiri dari: 2 kolom (1 kolom artikel, 1 kolom sidebar kiri) […]