Artikel-keren.com now at the mobile version

Mempercantik Halaman Web Menggunakan Css

July 21, 2013 Posted by ZAINAL ABIDIN in KURSUSWEBSITEGRATIS 4

Save Article


digital ocean

Setelah berhasil membuat website sederhana menggunakan HTML, sekarang kita lanjutkan dengan mempercantik halaman web di bawah ini menggunakan CSS.


Mempercantik Halaman Web Menggunakan Css

Tampilan yang saya inginkan adalah sebagai berikut:


Mempercantik Halaman Web Menggunakan Css

Dengan menggunakan CSS kita dapat mengatur tata letak isi website sesuai dengan keinginan kita. Sebelumnya, mari kita pahami dulu konsep dasar dari CSS ini. File CSS ditandai dengan adanya ekstensi .css. Cara penggunaannya adalah dengan meletakkannya di elemen head pada file HTML. Contohnya ditunjukkan oleh gambar berikut:


Mempercantik Halaman Web Menggunakan Css

Cara membuat file CSS sama halnya dengan HTML, yaitu tulis kode program di editor teks (misalnya: Notepad++), kemudian simpan dengan ekstensi .css. Sedangkan format penulisannya ditunjukkan oleh gambar berikut:


Mempercantik Halaman Web Menggunakan Css

Selektor adalah elemen HTML bawaan (misalnya: body, table dan paragraph) yang ingin kita atur. Setelah itu kode program CSS ditulis dalam kurung kurawal yang terdiri dari deklarasi. Setiap deklarasi diakhiri dengan titik koma. Setiap deklarasi terdiri dari properti berikut nilainya.

Selain elemen HTML bawaan, CSS mengizinkan kita untuk membuat selektor sendiri, yaitu: id dan class. Selektor id digunakan untuk mengatur elemen tunggal yang unik ditandai dengan awalan #, contoh penggunaannya dapat dilihat di http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_id

Sedangkan selektor class digunakan untuk mengatur beberapa elemen untuk aturan yang sama dan ditandai dengan awalan ., contohnya dapat dilihat di http://www.w3schools.com/css/tryit.asp?filename=trycss_syntax_class

Dalam CSS, setiap elemen HTML yang kita buat ditandai dengan tag div. Setiap elemen HTML tersebut diibaratkan sebagai sebuah kotak yang mana setiap kotaknya memiliki margin, border, padding dan konten seperti ditunjukkan gambar di bawah ini:


Mempercantik Halaman Web Menggunakan Css

Margin adalah jarak antara border dengan elemen HTML lainnya. Sedangkan padding adalah jarak antara border dengan konten. Border sendiri adalah garis batas dan konten adalah isi yang ingin ditampilkan oleh elemen HTML tersebut.

Langkah awal untuk mempercantik halaman web adalah dengan membuat kerangka desainnya terlebih dahulu. Istilah di industri web adalah *wireframe*. Berikut ini adalah *wireframe* dari halaman web yang ingin saya percantik:


Mempercantik Halaman Web Menggunakan Css

Container adalah bingkai utama dari halaman webnya. Header berisi foto kegiatan dan footer berisi hak cipta website. Sedangkan konten terdiri dari elemen foto dan deskripsi. Selanjutnya kita lakukan langkah-langkah di bawah ini:

  1. Buka Notepad++

  1. Ketikkan kode program berikut ini:


Mempercantik Halaman Web Menggunakan Css

  1. Simpan file dengan nama style.css di tempat yang sama dengan index.html. Lihat tutorial sebelumnya di http://kursuswebgratis.blogspot.com/2013/07/website-sederhana-html.html


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css


Mempercantik Halaman Web Menggunakan Css

  1. Buka file index.html menggunakan Notepad++

  1. Hubungkan file CSS dengan HTML dengan cara menambahkan kode program berikut ini:


Mempercantik Halaman Web Menggunakan Css

  1. Simpan file index.html, kemudian buka browser dan ketikkan http://localhost/zainal maka akan muncul tampilan website berikut:


Mempercantik Halaman Web Menggunakan Css

Bagaimana menurut Anda, sudah lebih cantik dan rapi bukan? Terima kasih atas kunjungan Anda di Channel Kursus Website Gratis. Sampai jumpa pada artikel selanjutnya.

Sumber: http://kursuswebgratis.blogspot.com/2013/07/mempercantik-halaman-web-menggunakan-css.html

#MWC

Terimakasih telah membaca artikel Mempercantik Halaman Web Menggunakan Css semoga bermanfaat, menambah ilmu dan wawasan kamu.
Kalo berkenan, tolong di share lewat facebook, twitter, google plus atau yang lain ya, biar teman-teman yang lain juga tau artikel ini, terimakasih.