Pada bab-bab sebelumnya, kita telah berkenalan sekilas dengan dunia web.
Sekarang kita akan langsung masuk dan mencoba membuat dokumen HTML sederhana,
agar konsep-konsep yang telah dijelaskan sebelumnya menjadi lebih jelas.
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.
Contoh sederhananya, sebuah paragraf
teks direpresentasikan dengan penanda lstinline{p} pada HTML. Memberikan
penanda lstinline{p} pada konten dalam HTML berarti menandakan konten tersebut
berada di dalam sebuah paragraf. CSS kemudian digunakan untuk menentukan ukuran
teks, warna teks, spasi, dan berbagai gaya tampilan dari paragraf tersebut.
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.
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 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
Sebuah elemen biasanya direpresentasikan
oleh tag. Tag pembuka menandakan elemen tersebut dimulai, dan tag penutup
menandakan akhir dari sebuah elemen. Tag pembuka direpresentasikan dengan nama
elemen yang diapit simbol “<>”, contohnya <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 merupakan informasi tambahan
yang dapat kita berikan untuk sebuah elemen. Setiap elemen memiliki atribut
yang berbeda-beda, meskipun terdapat beberapa atribut standar yang dapat
digunakan oleh semua elemen.
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):
<ahref=``http://www.bertzzie.com''>Ini adalah sebuah link</a>
Kode di atas memberikan contoh
atribut 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:
<!DOCTYPE html>
<htmllang="en">
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
Apa arti dari struktur tersebut? Mari
kita lihat satu per satu.
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>
<htmllang="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>
Buka file tersebut pada browser (dapat
dilakukan dengan klik dua kali, ataupun melalui menu File -> Open... pada
browser).
Pemetaan Kode
pengenalan-html.html dengan Hasil Tampilan
Gambar Pemetaan Kode pengenalan-html.html
dengan Hasil Tampilan menunjukkan hasil tampilan dari
kode padapengenalan-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.
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 p yang ada pada dokumen HTML:
p {
....
}
Pada kode di atas, yang dikatakan
selector ialah kode “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:
p {
color: ...;
font-size: ...;
}
Pada kode di atas, yang dikatakan
property ialah kode yang berada sebelum titik dua (“:”). 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
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.
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;
}
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.
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:
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).
Untuk lebih jelasnya, kode di bawah
memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML:
<!DOCTYPE html>
<htmllang="en">
<head>
<title>Pengenalan HTML</title>
<!-- Referensi pada
Elemen Head -->
<style type="text/css">
h1 {
color:red;
}
</style>
<!-- Referensi pada
file eksternal -->
<linkrel="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 -->
<pstyle="font-weight: bold;">
Paragraf kedua.
</p>
</body>
</html>
Mari kita coba jalankan kode yang ada
pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus
membuat file 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;
}
Sedikit catatan untuk mereferensikan
file CSS eksternal, pada kode di atas, file 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
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:
Perbandingan Dokumen
HTML dengan CSS dan Tanpa CSS
Perhatikan bagaimana setiap CSS
mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan
CSS dan Tanpa CSS. Teks pada elemen 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).
Komentar
Posting Komentar