PENGERTIAN
HTML DAN CSS
Hypertext Markup Language (HTML) adalah
sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web,
menampilkan berbagai informasi di dalam sebuah penjelajah
web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas
format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan
kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan
dalam format ASCII normal sehingga menjadi halaman
web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut
dengan SGML (Standard Generalized Markup Language), HTML adalah
sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML
saat ini merupakan standar Internet yang didefinisikan dan
dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML
dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka
bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi
tinggi di Jenewa).
Pada
tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang
kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan
menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi dokumen.
Sembilan tahun kemudian, Berners-Lee mengusulkan adanya sistem markah berbasis internet.
Berners-Lee
menspesifikasikan HTML dan menulis jaringan beserta perangkat lunaknya di akhir
1990. Pada tahun yang sama, Berners-Lee dan Robert Cailliau, insinyur
sistem data CERN berkolaborasi dalam sebuah permintaan untuk pendanaan, namun
tidak diterima secara resmi oleh CERN. Di catatan pribadinya sejak 1990
dia mendaftar "beberapa dari banyak daerah yang menggunakan
hypertext" dan pertama-tama menempatkan sebuah ensiklopedia.
HTML
adalah bahasa markah yang digunakan peramban untuk menafsirkan dan menulis
teks, gambar dan bahan lainnya ke dalam halaman web secara visual maupun suara.
Karakteristik dasar untuk setiap item dari markah HTML didefinisikan di dalam
peramban, dan karakteristik ini dapat diubah atau ditingkatkan dengan
menggunakan tambahan halaman web desainer CSS. Banyak elemen teks
ditemukan di laporan teknis ISO pada tahun 1988 TR 9537 Teknik untuk
menggunakan SGML, yang pada gilirannya meliputi fitur bahasa format teks awal
seperti yang digunakan oleh komandan RUNOFF dikembangkan pada awal
1960-an untuk sistem operasi: perintah-perintah format ini berasal dari
perintah yang digunakan oleh pengetik untuk memformat dokumen CTSS secara
manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-unsur
daripada hanya efek cetak, dengan pemisahan struktur dan markah juga; HTML
telah semakin bergerak ke arah ini dengan CSS.
B. Perbedaan Antara
HTML dengan CSS
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.
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 misalnyaa, h1, div, span, em, ataupun strong.
Kode
di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuathyperlink ke halaman lain:
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 aadalah </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 ayang digunakan dengan atribut wajib elemen tersebut (href):
<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>
Kode
di atas memberikan contoh atribut hrefyang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlinkdari
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.
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.
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 misalnyaa, h1, div, span, em, ataupun strong.
Kode
di bawah menunjukkan contoh dari elemen a yang digunakan untuk membuathyperlink ke halaman lain:
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 aadalah </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 ayang digunakan dengan atribut wajib elemen tersebut (href):
<a href=``http://www.bertzzie.com''>Ini adalah sebuah link</a>
Kode
di atas memberikan contoh atribut hrefyang dimiliki oleh elemen a. Atribut ini berguna untuk memberikan referensi hyperlinkdari
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.
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,
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:
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 seluruhelemen 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
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).
