Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Membuat Layout Website Sederhana (Part 1)

Advertisement

Kali ini kita akan coba belajar membuat website sederhana menggunakan HTML dan CSS dengan berbagai jenis layout. Layout website setidaknya memiliki element-element berikut:

  • Element header, untuk menempatkan informasi judul maupun tagline web
  • Element navigasi, menu navigasi yang mengahar ke halaman lain website
  • Element konten, element yang berfungsi untuk menempatkan konten-konten website
  • Element sidebar, element satu ini difungsikan untuk menempatkan informasi tambahan seperti, postingan populer, postingan terbaru, arsip, maupun iklan
  • Element footer, posisi paling akhir atau bawah dari halaman website yang berfungsi untuk menempatkan informasi profil seperti halaman about, contact, atau bisa juga lisensi dari halaman web.

Seri Belajar HTML:

Berikut spesifikasi layout yang akan kita buat menggunakan HTML dan CSS:

Langsung kita eksekusi menggunakan text editor. Kita buat dua buah file untuk HTML menggunakan index.html sedangkan CSS gunakan nama style.css.

Layout Website Sederhana 1: 1 Kolom Artikel

Membuat website sederhana

Kode HTML

Sebelum membuat layout HTML, pahami terlebih dahulu tentang materi element block & inline, div & span, serta atribut class dan id pada HTML, baca selengkapnya di sini. Sekarang kita mulai step by step untuk koding HTML nya:

#1 Pertama kita buat struktur dasar HTML, tambahkan title dan element <link> untuk menghubungkan kode HTML dengan CSS:

#2 Pada element <body> buat class container untuk membungkus header, content, dan footer:

#2.1 Element header terdiri dari 3 buah element, yaitu tag <h1> untuk judul website, tag <p> untuk deskripsi atau tagline web, dan tag <ul> untuk membuat menu navigasi. Kode HTML yang digunakan:

#2.2 Pada element konten akan kita tambahkan beberapa element yaitu:

  • judul konten menggunakan tag <h2>,
  • meta data yang terdiri dari author dan tanggal publikasi menggunakan tag <p>,
  • isi konten terdiri atas 3 buah paragraf menggunakan element tag <p>

Kode HTML yang digunakan:

#2.3 Untuk element footer kita gunakan tag <p>, kode HTML yang digunakan:

#3 Kita susun kode HTML di atas sehingga menjadi sebagai berikut:

Hasil kode HTML pada web browser tanpa menggunakan CSS:

Membuat layout website sederhana

Kode CSS

Kode CSS berfungsi untuk memberikan style atau gaya dari sebuah website. Dengan kode CSS, satu buah halaman HTML yang sama bisa memiliki lebih dari satu style yang berbeda. Sekarang kita coba untuk memberikan style layout HTML diatas:

#1 Pertama-tama kita tambahkan CSS reset untuk menghilangkan konfigurasi default setiap element HTML. Selain itu, dengan CSS reset memudahkan kita memanipulasi setiap element HTML sesuai selera. Untuk memeret konfigurasi default element HTML, kita tambahkan tool CSS yang dibuat oleh Eric A. and Kathryn S. Meyer, dengan kode CSS berikut:

#2 Style pada element body:

  • font-family: sans-serif
  • background-color: #f3f3f3,
  • font color: #555:

#3 Style pada element container:

  • lebar (width): 900px
  • margin: auto (posisi di tengah browser)

#4 Style pada element header:

  • background-color: aquamarine
  • padding atas kanan bawah kiri: 30px

Padding berfungsi mengatur jarak antara konten header dengan border

#4.1 Style pada element judul:

  • font-size: 40px
  • font-weight: bold (huruf tebal)
  • margin-bottom: 10px (jarak antara judul dengan tagline)

#4.2 Style pada element tagline:

  • font-size: 18px
  • margin-bottom: 40px (jarak antara tagline dengan menu)

#4.3 Style pada element menu:

  • display: inline-block

Fungsi property display dengan value inline-block pada tag <ul> dan <li> adalah mengubah posisi default menu dari vertikal (berupa block) menjadi horizontal (berupa inline).

#4.4 Style pada anchor text:

  • text-decoration: none
  • font size: 16px
  • font color: white
  • padding: 7px
  • background-color: dodgerblue

property text-decoration dengan value none berfungsi menghilangkan style default (warna biru dan underline) pada anchor text. Padding berfungsi mengatur jarak antara konten dengan border.

#4.5 Memberikan efek ketika mouse diarahkan ke anchor text atau tombol menu navigasi, gunakan pseudo :hover pada selector a:

  • background-color: tomato
  • font color: black

#5 Style pada element content untuk menempatkan artikel atau isi website:

  • background-color: lightcyan
  • padding: 30px

#5.1 Style pada element judul artikel:

  • font-size: 26px
  • font-weight: bold
  • margin-bottom (jarak antara judul artikel dengan meta data)

#5.2 Style pada element meta data:

  • font-size: 10px (lebih kecil dari ukuran judul dan isi artikel)
  • margin-bottom: 15px (jarak antara meta data dengan paragraf pertama)

#5.3 Style pada element artikel:

  • ukuran font: 13px
  • line-height: 18px
  • font-family: courier, monospace
  • margin-bottom: 10px (jarak antar paragraf)

#6 Style pada element footer:

  • padding atas/bawah dan kanan/kiri: 10px 0px
  • background-color: darkgrey
  • font color: black
  • text-align: center (posisi konten)

#7 Kita susun kode CSS di atas sehingga menjadi sebagai berikut:

Layout website pada web browser setelah ditambahkan kode CSS:

Membuat layout website sederhana
5 1 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
4 days ago

[…] Membuat Layout Website 1 Kolom Konten/Artikel […]

trackback
1 day ago

[…] Membuat Layout Website 1 Kolom Artikel […]