HTML dan CSS Dasar
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):
<a href=``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>
<html lang="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>
<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>
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>
<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>
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).
No comments
# Terima Kasih Telah Berkunjung Semoga Artikel Yang Kamu Baca Bermanfaat :)