Belajar Menghias HTML Dengan CSS

Kini Fauzi Online kembali mengajak teman-teman untuk belajar mengenai CSS. CSS merupakan singkatan dari Cascading Style Sheets jika diartikan sesuai dengan situs W3Schools merupakan kumpulan kode-kode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML.

Sebelum melanjutkan artikel ini silahkan baca terlebih dahulu artikel TERPOPULER mengenai Rekomendasi Untuk Cloud Dedicated Server Terbaik Dan Termurah Di Indonesia

Apa Keuntungan Menggunakan CSS?
Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Jadi, keuntungan menggunakan CSS, lebih praktis!

Terdapat beberapa Tag dalam Penggunaan CSS, antara lain:

Tag DIV ID
Secara sintaks, tag div memiliki sepasang tag berupa tag pembuka dan tag penutup.
#header { background : #0f0; position : absolute; top : 0px; left : 0px; width : 800px; height : 100px; }
Penggunaan DIV ID pada file HTML sebagai berikut:
<div id="header"> Bagian Header </div>
Tag SPAN ID
Tag span hampir sama dengan tag div di atas. Perbedaan utamanya adalah bahwa tag div akan membagi halaman web secara otomatis meskipun di dalam tag div tersebut tidak diatur format stylenya (css). Sedangkan tag span hanya akan mengatur konten/isi yang dilingkupinya tanpa membagi halaman web ke dalam bagian-bagian kecil (seperti yang dilakukan tag div).
#merah { color : red } #biru { color : blue } #hijau { color : green }
Penggunaan SPAN ID pada file HTML sebagai berikut:
<span id="merah"> merah </span>, <span id="hijau"> hijau </span>, <span id="biru"> biru </span>,
Tag CLASS
Berbeda dengan selector Div dan Span, selector atau tag class dapat digunakan berulang kali pada tag dalam sebuah html. Pada css, class menggunakan dapat di kenali dengan adanya tanda titik ( . ) sebelum nama class.
.merah { color: #FF0000; font-family: arial; }
Penggunaan CLASS pada file HTML sebagai berikut:
<div class="merah">Ini adalah contoh penggunaan class merah</div></div>

Langkah-Langkah Menghias HTML Dengan CSS:

Buatlah file dengan nama Style.CSS dengan isi file sebagai berikut:
body{ background: #f8f7ec url(bg.gif); -webkit-font-smoothing: antialiased; } #wrapper{ width: 780px; margin-right: auto; margin-left: auto; } .kotak { margin-left:30px; width: 630px; padding: 20px; border-radius: 12px; border: 3px solid rgb(0,0,51); } #judul{ background-color: rgb(192,192,192); padding: 1em; text-align: center; } #title { color: rgb(0,0,153); width: 550px; margin: 0px 31px; padding-top: 1px; font-size: 23px; } table{ background-color: rgb(255,255,255); } td{ border: rgb(255,255,255); font-weight: bold; }
Ubah file CV.HTML yang telah teman-teman buat minggu kemarin, jika teman-teman ketinggalan silahkan dapat di lihat di artikel ini: CV Online.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <meta name="generator" content="PSPad editor, www.pspad.com"> <title>Curiculum Vitae Akhmad Fauzi</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="wrapper"> <div id="judul"><h1>Curiculum Vitae</h1></div><span id ="title"><h2>Data Pribadi</h2></span> <div class="kotak"> <table border="1px" width="629px"> <tbody><tr><td width="30%">Nama Lengkap</td><td width="1%">:</td><td><b>Akhmad Fauzi</b></td><td rowspan="8" width="150px"><img src="Photo.jpg" alt="CV Akhmad Fauzi.jpg, 91kB" title="CV Akhmad Fauzi.jpg" height="200px" width="150px"></td></tr><tr><td>Tempat, Tanggal Lahir</td><td>:</td><td>Cilacap, 15 Maret 1991</td></tr><tr><td>Agama</td><td>:</td><td>Islam</td></tr><tr><td>Jenis Kelamin</td><td>:</td><td>Laki-Laki</td></tr><tr><td>Status</td><td>:</td><td>Belum Menikah</td></tr><tr><td>Alamat</td><td>:</td><td>Villa Bogor Indah Blok CC 11 No 9</td></tr><tr><td>Email</td><td>:</td><td><a href="mailto: akhfauz@gmail.com" target="_blank">akhfauz@gmail.com</a></td></tr><tr><td>Blog</td><td>:</td><td><a href="http://uzi-online.blogspot.com" target="_blank" title="blog personal fauzi online"> Fauzi Online</a></td></tr></tbody> </table></div><span id ="title"><h2>Pendidikan Formal</h2></span> <div class="kotak"> <table border="1px" width="629px"> <tbody><tr><td width="30%">2009-Sekarang</td><td width="1%">:</td><td>Universitas Gunadarma, Fakultas Ilmu Komputer Jurusan Sistem Informasi, Depok Jawa Barat</td></tr><tr><td>2005-2008</td><td>:</td><td>SMK Telkom Sandhy Putra Purwokerto, Jurusan Rekayasa Perangkat Lunak Jawa Tengah</td></tr><tr><td>2002-2005</td><td>:</td><td>SMP Negeri 1 Purwareja Klampok, Banjarnegara Jawa Tengah</td></tr><tr><td>1996-2002</td><td>:</td><td>SD Negeri 1 Jatilawang, Banyumas Jawa Tengah</td></tr><tr><td>1995-1996</td><td>:</td><td>TK Pertiwi Jatilawan, Banyumas Jawa Tengah</td></tr></tbody> </table></div><span id ="title"><h2>Pendidikan Non Formal</h2></span> <div class="kotak"> <table border="1" width="629px"> <tbody><tr><td width="30%">8-12 Agustus 2011</td><td width="1%">:</td><td>Bootcamp Clean and Usable Web Design</td></tr><tr><td>19 -23 Juli 2011</td><td>:</td><td>Kursus: Introduction to Oracle: SQL and PL/SQL</td></tr><tr><td>8 Juni 2011</td><td>:</td><td>Workshop: Basic User Linux</td></tr><tr><td>20 April 2011</td><td>:</td><td>Workshop: Microsoft Visual Basic.NET</td></tr></tbody> </table></div></div></body></html>
Akan terlihat susunan file HTML beserta gambar yang akan dimasukan ke dalam HTML sebagai berikut:
Susunan File Belajar Menghias HTML dengan CSS
Sumber Gambar (Fauzi Online)
Jalankan Web Browser teman-teman, ketikan nama file HTML teman-teman di addressbar dan terlihatlah hasilnya seperti ini:
Menghias CV Online HTML dengan CSS
Sumber Gambar (Fauzi Online)

Logika Pembelajaranya:

File CSS yang Fauzi Online buat terpisah dengan file HTML, dikarenakan dengan tujuan lebih efektif dan mempermudah pembacaan koding karena type file dibedakan antara HTML dan CSS.
Pemanggilan File CSS dapat dilihat pada syntax setelah tag head pada file HTML.
Pemanggilan Tag DIV ID, Sebagai Berikut:
<div id="judul"><h1>Curiculum Vitae</h1></div>
Pemanggilan Tag SPAN ID, Sebagai Berikut:
<span id ="title"><h2> Data Pribadi</h2></span>
Pemanggilan Tag Class, Sebagai Berikut:
<div class="kotak"> <table border="1px" width="629px"> <tbody><tr><td width="30%">Nama Lengkap</td><td width="1%">:</td><td><b>Akhmad Fauzi</b></td><td rowspan="8" width="150px"><img src="Photo.jpg" alt="CV Akhmad Fauzi.jpg, 91kB" title="CV Akhmad Fauzi.jpg" height="200px" width="150px"></td></tr><tr><td>Tempat, Tanggal Lahir</td><td>:</td><td>Cilacap, 15 Maret 1991</td></tr><tr><td>Agama</td><td>:</td><td>Islam</td></tr><tr><td>Jenis Kelamin</td><td>:</td><td>Laki-Laki</td></tr><tr><td>Status</td><td>:</td><td>Belum Menikah</td></tr><tr><td>Alamat</td><td>:</td><td>Villa Bogor Indah Blok CC 11 No 9</td></tr><tr><td>Email</td><td>:</td><td><a href="mailto: akhfauz@gmail.com" target="_blank">akhfauz@gmail.com</a></td></tr><tr><td>Blog</td><td>:</td><td><a href="http://uzi-online.blogspot.com" target="_blank" title="blog personal fauzi online"> Fauzi Online</a></td></tr></tbody> </table></div>
Masing-masing nama tag yang terdapat pada file CSS digunakan untuk pemanggilan pada file HTML.

Sekian pembelajaran singkatnya mengenai Menghias HTML Dengan CSS. Silahkan tinggalkan komentar jika mengalami kendala pada artikel Fauzi Online. Mohon doannya untuk kelancaran Skripsi Fauzi Online yah? AMIIN..

Mohon maaf jika rutinitas postingan Blog ini mengalami kurang update. Harap Dorongan teman-teman setia pembaca untuk motivasinya bagi perjuangan Mahasiswa Akhir. hehehe.. Semoga Bermanfaat.

9 Komentar

Ahmad Fauzi 1 July 2013 at 02:04

great, artikel yang sangat bermanfaat bagi seorang Newbie sperti saya.
Thank....

Balas

dhul 27 December 2013 at 21:40

Bagus gan sangat membantu..
Mampir juga Mbedudul.blogspot.com

Angga Indriya 29 December 2013 at 15:49

Mantap gan..perpaduan antara HTML dengan CSS memang cukup membuat website kita lebih elegan....
Salam kenal dari ane....ane tunggu kunjungan baliknya gan...