Untuk menyegarkan pikiran, sebelum masuk ke dalam kode, kita akan melihat kembali perbedaan antara HTML dan CSS:
- HTML merupakan bahasa penanda yang digunakan untuk memberikan konten (teks) struktur dan makna semantik.
- CSS adalah bahasa yang digunakan untuk memberikan konten gaya penampilan yang bagus.
Oke, setelah pikiran anda segar kembali dengan konsep HTML dan CSS, mari kita lihat berbagai hal yang membuat dokumen HTML menjadi, emph{well}, dokumen HTML.
Elemen, Tag, dan Atribut
Sebelum masuk lebih jauh, kita akan melihat tiga istilah utama yang
harus diketahui ketika menulis HTML. Ketiga istilah tersebut ialah
elemen, tag, dan atribut
Berikut adalah contoh pengunaan tag
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen
Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen
Kode di atas memberikan contoh atribut
- Elemen
Elemen HTML merupakan komponen yang menetapkan peran sebuah objek
dalam dokumen, termasuk struktur dan konten dari objek tersebut. Contoh
dari sebuah elemen HTML ialah
Kode di bawah menunjukkan contoh dari elemen
p ataupun b yang telah dicontohkan pada bagian-bagian sebelumnya. Elemen-elemen populer lain dalam HTML misalnya a, h1, div, span, em, ataupun strong.Kode di bawah menunjukkan contoh dari elemen
a yang digunakan untuk membuat hyperlink ke halaman lain:<a>
- Tag
<a>. Tag penutup dituliskan dengan menambahkan garis miring (“/”) setelah simbol “<”. Misalnya, tag penutup untuk elemen a adalah </a>.Berikut adalah contoh pengunaan tag
a untuk membuat sebuah link:<a>Ini adalah sebuah link</a>
- Atribut
Atribut khusus elemen dibuat ketika nilai atribut tersebut memang hanya pantas digunakan untuk elemen tersebut. Misalnya, untuk elemen
img
yang digunakan untuk menampilkan gambar, terdapat atribut untuk
menentukan di mana sumber gambar yang akan ditampilkan di simpan.
Atribut ini tentunya tidak akan berguna untuk elemen p, yang hanya menampilkan teks.Atribut standar yang dimiliki oleh semua elemen sendiri merupakan atribut yang umumnya dapat diimplementasikan oleh semua elemen, misalnya atribut “id” untuk identifikasi elemen, atau “class” untuk klasifikasi elemen.
Kode di bawah menunjukkan contoh elemen
a yang digunakan dengan atribut wajib elemen tersebut (href):<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>
href yang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlink
dari sebuah elemen (karenanya namanya “href” - hyperlink reference).
Atribut-atribut yang dimiliki oleh tiap-tiap elemen akan dibahas lebih
lanjut ketika pembahasan dari sebuah elemen dilakukan.
Struktur Dokumen HTML
Sebuah dokumen HTML memiliki struktur tertentu yang harus dipatuhi.
Struktur minimal yang harus dimiliki sebuah dokumen HTML dapat dilihat
pada kode di bawah:
Apa arti dari struktur tersebut? Mari kita lihat satu per satu.
Untuk lebih jelasnya, buat sebuah file dengan nama
Buka file tersebut pada browser (dapat dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada browser).
Gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan menunjukkan hasil tampilan dari kode pada
Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa elemen
<!DOCTYPE html>
<html lang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
- Elemen DOCTYPE digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan adalah HTML5.
- Elemen HTML, elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.
- Elemen head, elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web hasil tampilan browser.
- Elemen title, memberikan judul dokumen.
- Elemen body, elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan kepada pengguna.
Untuk lebih jelasnya, buat sebuah file dengan nama
pengenalan-html.html yang berisi kode berikut:<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>
<p>
Paragraf kedua.
</p>
</body>
</html>
Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan
pengenalan-html.html, beserta dengan pemetaan antara elemen HTML dengan tampilan hasil olahan browser.Pada gambar Pemetaan Kode pengenalan-html.html dengan Hasil Tampilan dapat dilihat bahwa elemen
title ditampilkan pada bagian atas browser, dan isi dari body ditampilkan seluruhnya oleh browser. Perhatikan juga bahwa terdapat jarak spasi antara elemen p pertama dengan elemen p
kedua, sebagai pemisah antar paragraf. Secara otomatis browser dapat
membaca bahwa terdapat dua paragraf, dan biasanya dua paragraf yang
berbeda akan memiliki jarak. Seperti yang telah dijelaskan pada bagian Browser dan Kode Klien, jarak antar paragraf ini akan berbeda-beda, tergantung dengan browser yang digunakan. Perhatikan juga bahwa jarak antar p berbeda dengan jarak antara h1 dengan p. Hal ini dikarenakan elemen h1,
sebagai kepala teks, dianggap memiliki makna khusus, sehingga harus
ditonjolkan (dengan menebalkan dan memperbesar huruf, serta memberi
jarak yang lebar antara elemen h1 dengan elemen-elemen lainnya).Dasar CSS
Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita
harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu
selector, property, dan value. Pembahasan mengenai makna dari ketiga
istilah tersebut akan dilakukan pada bagian selanjutnya.
Ingat, bahwa pada satu selector dapat diaplikasikan banyak property,
dan masing-masing property akan memiliki value yang berbeda-beda,
bergantung kepada apa yang direpresentasikan oleh property tersebut.
Pada bentuk panjang pada kode di atas, nilai margin atas, kanan,
bawah, dan kiri diberikan satu per satu, sesuai dengan property yang
ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property
margin dan dua value, yang secara otomatis akan mengisikan nilai top dan
right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai
keempat margin dengan satu value.
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.
- Selector
Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS
menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang
ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan
menspesifikasikan selector. Kode di bawah memberikan contoh
dari sebuah selector, yang dapat digunakan untuk memberikan gaya
tampilan terhadap seluruh elemen
Pada kode di atas, yang dikatakan selector ialah kode “
Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen
p yang ada pada dokumen HTML:p {
....
}
p”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”.Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen
p
yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen
seperti ini, selector juga dapat memberikan desain secara lebih
spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut
lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat
ditemukan pada bab.- Property
Sebuah properti menentukan berbagai parameter desain yang dapat
diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih
mudahnya, perhatikan kode di bawah:
Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“
p {
color: ...;
font-size: ...;
}
:”). Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size
untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat
digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti
tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti
baru, penjelasan akan diberikan pada bagian yang relevan. Daftar
properti sendiri dapat dibaca di.- Value
Value merupakan nilai dari property yang ingin kita berikan. Nilai
yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis
property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus
memberikan nilai dalam format
#RRGGBB
(kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada
program pengolah grafis seperti Photoshop). Ketika ingin memberikan
nilai ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya:p {
color: #FFFF00;
font-size: 50px;
}
Sintaks CSS
Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut:
Sintaks CSS
Penyingkatan Nilai dari Property
Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut:/*
Bentuk Panjang
*/
p {
margin-top : 10px;
margin-right : 20px;
margin-bottom : 10px;
margin-left : 20px;
}
/*
Bentuk Singkat (1)
*/
p {
margin: 10px 20px;
}
/*
Bentuk Singkat (2)
*/
p {
margin: 10px;
}
Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan.
Mengimplementasikan CSS pada HTML
Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada
HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat
diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi
CSS, yaitu:
Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file
Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file
Setelah selesai menyimpan
Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya
dengan sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan
dokumen HTML yang memiliki CSS dan tidak memiliki CSS:
Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. Teks pada elemen
Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).
- Referensi ke File Eksternal. Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web.
- Penulisan CSS pada Elemen Head. CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah dokumen. Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga.
- CSS di dalam Atribut style pada Elemen. Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pengenalan HTML</title>
<!-- Referensi pada Elemen Head -->
<style type="text/css">
h1 {
color: red;
}
</style>
<!-- Referensi pada file eksternal -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Berita Utama</h1>
<p>
Elemen h1 digunakan untuk menandakan sebuah header dari teks
(h1 == header 1). Konten teks ini sendiri berada di dalam
sebuah paragraf, yang ditandai oleh elemen p.
</p>
<!-- CSS langsung pada atribut style -->
<p style="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut:p {
font-size: 50px;
}
style.css harus berada di dalam direktori yang sama karena atribut href
diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan
file pada direktori yang berbeda, maka kita dapat menambahkan direktori
sebelum nama file. Misalnya jika file disimpan dalam subdirektori
“style”, kita dapat mengisikan style/style.css pada atribut href.Setelah selesai menyimpan
referensi-css.html dan style.css, jalankan referensi-css.html dan lihat hasilnya, seperti pada gambar berikut:
Hasil Eksekusi referensi-css.html
Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS
h1
berubah menjadi warna merah karena CSS yang berada pada bagian atas
dokumen, paragraf memiliki teks yang sangat besar (50px) karena CSS dari
file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak
tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang terpisah tersebut berjalan dengan baik.Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).
Lalu saat kamu tidak menemukan jawaban, barulah bertanya di forum.
