Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout Website Sederhana (Part 3)

Advertisement

Untuk layout website yang ketiga ini, kita buat dua buah kolom untuk konten/artikel dan 1 kolom sidebar yang berada di sebelah kanan konten.

membuat layout website

Seri Belajar HTML:

Seri Belajar Membuat Layout Website Sederhana:

Kode HTML

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Membuat layout website 3 kolom

Kode CSS

Style untuk masing-masing element dapat kita jabarkan sebagai berikut (selalu tambahkan kode CSS reset di awal):

#1 Style pada element body:

  • font-family: sans-serif
  • background-color: #F5F5F5
  • font color: #010101

#2 Style pada element container:

  • width: 1200px
  • background-color: #FFFAFA
  • margin: auto

#3 Style pada element header:

  • background-color: #5F9EA0
  • padding atas/bawah dan kanan/kiri: 35px 25px
  • font color: #FFF

#3.1 Style heading 1 pada element header:

  • font-weight: bold
  • font-size: 30px
  • font-family: monospace
  • margin-bottom: 10px

#3.2 Style tagline pada element header:

  • font-weight: italix
  • font size: 16px
  • font-family: georgia, serif

#4 Style pada element menu:

  • background-color: #4682B4

#4.1 Style pada menu navigasi:

  • display: inline-block
  • font-weight: bold
  • font-size: 15px
  • font-family: sans-serif

#4.2 Style anchor text pada element menu:

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

#5 Style pada element content:

  • font-size: 15px
  • line-height: 20px
  • font-family: georgina, serif
  • text-align: justify

#5.1 Style heading 2 pada element content:

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

#5.2 Style meta data (class=”author”) pada element content:

  • font-size: 11px
  • margin-bottom: 5px

#5.3 Style paragraf pada element content:

  • margin-bottom: 10px

#5.4 Style menu pada element content:

  • padding-buttom: 15px

#5.5 Style anchor text pada element content:

  • text-decoration: none
  • color: darkblue

#5.6 Style pada kolom artikel 1:

  • width: 420px
  • float: left
  • padding: 25px 15px 15px 25px

#5.7 Style pada kolom artikel 2:

  • width: 420px
  • float: left
  • padding: 25px 15px 15px 15px

#5.8 Style pada sidebar:

  • width: 250px
  • float: left
  • padding 25px 25px 15px 15px

#6 Hapus style float dengan menambahkan property clear pada class=”clear”

  • clear: both

#7 Style pada element footer:

  • background-color: #E9967A
  • padding: 10px 0px 10px 25px
  • font-style: italic
  • font-weight: bold
  • font-size: 12px
  • font-family: monospace

#8 Terakhir kita gabungkan kode di atas sehingga menjadi seperti berikut ini:

Layout website pada web browser setelah ditambahkan kode CSS:

Membuat layout website 3 kolom
0 0 votes
Article Rating
Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
4 days ago

[…] Layout website 3 teridir dari: 3 kolom (2 kolom artikel, 1 kolom sidebar kanan) […]

trackback
3 days ago

[…] Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan) […]

trackback
2 days ago

[…] Membuat Layout Website 3 Kolom (2 Kolom Artikel & 1 Kolom Sidebar Kanan) […]

trackback
1 day ago

[…] Membuat Layout Website 3 Kolom (2 Artikel & 1 Sidebar Kanan) […]