Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout Website Sederhana (Part 4)

Advertisement

Pada bagian keempat ini, kita akan membuat 4 (empat) kolom konten masing-masing terdiri dari 2 kolom untuk artikel dan dua kolom untuk siderbar. Selain itu, kita coba tambahkan header image dan posisi menu kita atur di bagian atas kanan header. Untuk image silakan siapkan terlebih dahulu dan simpan pada folder yang sama dengan file index.html.

membuat layout website

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

Kode CSS

#1 Style pada element body:

  • font-family: georgia, serif
  • background-color: #E6E6FA
  • font color: #111

#2 Style pada element container:

  • width: 1200px
  • margin: auto

#3 Style pada element menu:

  • text-align: right
  • background-color: #D3D3D3

#3.1 Style pada list menu:

  • display: inline-block
  • padding atas/bawah kanan/kiri: 10px 20px
  • background-color: #778899

#3.2 Menambahkan efek hover pada list menu:

  • background-color: #FFFF00
  • font color: #778899

#3.3 Style anchor text pada element menu:

  • text-decoration: none
  • font-weight: bold
  • font-size: 20px
  • font-family: sans-serif

#3.4 Menambahkan efek hover pada anchor text:

  • font-color: #778899

#4 Style pada element header:

  • padding atas/bawah kanan/kiri: 40px 20px
  • font-family: serif
  • backgroun-color: #D3D3D3

#4.1 Style judul pada element header:

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

#4.2 Style tagline pada element header:

  • font-size: 18px

#5 Style pada header image:

  • border-top: 5px solid #FF4500
  • border-bottom: 5px solid #B0E0E6

#6 Style pada element body:

  • background-color: #F5FFFA

#6.1 Style tag <h2> pada element body:

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

#6.2 Style meta data pada element body:

  • font-style: italic
  • font-size: 12px
  • font-family: serif

#6.3 Style tag <p> pada element body:

  • font-size: 16px
  • line-height: 20px
  • font-family: serif
  • margin-bottom: 10px

#6.4 Style tag <ul> pada element body:

  • margin-bottom: 20px

#6.5 Style tag <li> pada element body:

  • margin-bottom: 10px

#6.6 Style tag <a> pada element body:

  • text-decoration: none
  • font color: #000

#6.7 Style pada siderbar kiri:

  • width: 200px
  • float: left
  • padding atas kanan bawah kiri: 20px 15px 10px 20px

#6.8 Style tag <li> pada kategori:

  • display: inline-block
  • padding: 7px
  • margin-right: 5px
  • background-color: #7FFFD4
  • font color: #000

#6.9 Style pada kolom artikel 1:

  • width: 335px
  • float: left
  • padding atas kanan bawah kiri: 20px 15px 10px 15px

#6.10 Style pada kolom artikel 2:

  • width: 335px
  • float: left
  • padding atas kanan bawah kiri: 20px 15px 10px 15px

#6.11 Style pada sidebar kanan:

  • width: 200px
  • float: left
  • padding atas kanan bawah kiri: 20px 20px 10px 15px

#6.12 Hasus style float:

  • clear: both

#7 Style pada element footer:

  • background-color: #191970
  • font color: #F5FFFA
  • padding atas/bawah kanan/kiri: 10px 0px
  • text-align: center

#8 Kode CSS lengkap:

Layout website setelah ditambahkan kode CSS:

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

[…] Membuat Layout Website 4 Kolom (2 Artikel & 2 Sidebar) dengan Header Image […]