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>
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>
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.http://hebatngoding4.blogspot.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.
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.http://hebatngoding4.blogspot.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.
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;
}
EmoticonEmoticon