Setelah mengerti dasar-dasar dari HTML
dan CSS sekarang kita dapat masuk lebih dalam dan melihat bagaimana HTML dan
CSS berinteraksi.
Untuk membangun sebuah website yang
baik, kita perlu mengetahui tentang elemen-elemen HTML yang digunakan untuk
berbagai jenis konten, serta bagaimana prilaku dari elemen-elemen tersebut.
Mengerti prilaku elemen-elemen yang ada secara mendalam akan membantu kita
dalam menggunakan elemen tersebut secara optimal, untuk membuat elemen-elemen
yang ada menghasilkan sesuatu sesuai dengan yang kita inginkan.
Dengan mengetahui elemen-elemen yang ada
secara mendalam, kita juga akan terdorong (dan terbiasa) menuliskan kode secara
semantik. Penulisan kode secara semantik membantu kita dalam membangun website
yang dapat dengan optimal dibaca oleh berbagai mendia lain, seperti screen
reader (untuk membantu tunanetra membaca website kita) ataupun web crawler
(untuk memastikan website mendapatkan indeks yang baik dalam mesin pencarian
seperti Google).
Makna Semantik
Kita telah berkali-kali menggunakan kata
“semantik” sebelumnya, tetapi belum mendefinisikan kata ini dengan baik. Bagian
ini akan membahas makna kata semantik, untuk menyamakan persepsi dengan
pembaca, agar kedepannya pembaca dapat mengerti mengapa semantik penting.
Semantik, dalam konteks HTML,
dideskripsikan sebagai pemberian makna dan struktur terhadap
konten yang ada dalam dokumen HTML. Makna yang diberikan semantik yaitu nilai dari
konten pada sebuah dokumen. Misalnya, teks yang berada di dalam elemen h1 memiliki nilai lebih tinggi,
karena elemen tersebut merupakan penanda dari pembagi kepala utama (dalam buku:
bab) dari sebuah dokumen. Contoh lain, teks yang berada di dalam elemen blockquote merupakan kutipan yang
direferensikan oleh penulis dokumen.
Struktur yang dibangun oleh HTML
merupakan struktur dokumen, yang berarti HTML memberikan fasilitas untuk
membagi dokumen ke dalam potongan-potongan yang relevan. Sebuah dokumen teks,
media utama HTML, biasanya memiliki konten hirarkis. Dalam buku kita memiliki
bab dan subbab untuk memberikan struktur. Di HTML, kita memiliki elemen-elemen
heading, mulai dari h1 sampai
dengan h6 untuk
memberikan struktur.
Selain struktur untuk konten dokumen,
HTML juga dapat membagi dokumen ke dalam struktur halaman dalam arti literal
(tata letak dokumen). Elemen section memberikan fasilitas untuk membagi
dokumen ke dalam beberapa bagian. Selain itu, ada juga elemen aside untuk menandakan catatan samping
dari sebuah dokumen. Elemen header danfooter masing-masing memberikan bagian
kepala dan kaki dokumen.
Sudah mengerti tentang makna dari
semantik? Jika sudah, mari kita lanjutkan pembahasan ke elemen-elemen semantik
yang diberikan oleh HTML! Jika anda belum mengerti, untuk sementara ingat saja
hal berikut: semantik berarti pemberian makna dan struktur terhadap konten.
Seiring dengan berjalannya waktu dan bertambahnya pengalaman dalam penulisan
HTML, anda akan melihat dan mengerti arti dari semantik.
Tipografi
Mayoritas konten yang ada dalam web
merupakan konten berbasis teks. Pada bagian ini, kita akan melihat berbagai
elemen-elemen untuk merepresentasikan teks dalam HTML. Elemen yang kita bahas
pada bagian ini hanya elemen-elemen yang populer dan akan sering digunakan.
Untuk melihat semua elemen-elemen teks yang ada dan pembahasannya secara
mendalam, baca bagian.
Heading
Istilah EYD Indonesia untuk heading adalah “pranala”.
Penulis merasa tidak nyaman dan terbiasa dengan istilah tersebut, karenanya
pada buku ini digunakan istilah “heading”. Mohon dimaklumi :D
Heading merupakan elemen yang berperan
untuk memberikan hirarki teks dalam dokumen HTML. Terdapat enam tingkatan
heading, yaitu h1 sampai
dengan h6. Selain
untuk memberikan hirarki, heading juga membantu mesin pencarian dalam membangun
indeks, dengan menentukan kepentingan konten dari tingkatan heading.
Heading idealnya digunakan secara
terurut dan bertingkat. Bagian utama dan paling penting dalam sebuah dokumen
seharusnya berada di bawah elemen h1, dan jika konten tersebut memiliki beberapa
subbagian, maka subbagian tersebut dapat dibagi menggunakan h2, dan seterusnya.
Kode di bawah merupakan cntoh pengunaan
heading untuk mencetak daftar isi:
<h1>Bab 3: HTML dan CSS Dasar</h1>
<h2>3.1 Elemen, Tag, dan Atribut</h2>
<h3>3.1.1 Elemen</h3>
<h3>3.1.2 Tag</h3>
<h3>3.1.3 Atribut</h3>
<h2>3.2 Struktur dan Dokumen HTML</h2>
<h2>3.3 Dasar CSS</h2>
<h3>3.3.1 Selector</h3>
<h3>3.3.2 Property</h3>
<h3>3.3.3 Value</h3>
<h3>3.3.4 Sintaks CSS</h3>
<h2>3.4 Mengimplementasikan CSS pada HTML</h2>
Hasil eksekusinya ialah:
Heading
Sebagai Daftar Isi
Perhatikan juga bagaimana ukuran h1 lebih besar dari h2, dan seterusnya.
Paragraf
Penulisan sebuah heading biasanya
diikuti dengan paragraf yang berada di bawah heading tersebut. Paragraf dibuat
dengan elemen p dalam
HTML. Banyak paragraf dapat dituliskan secara sambung-menyambung, sama seperti
pada dokumen-dokumen pada umumnya.
Berikut adalah contoh kode pengunaan
elemen p, serta
hasil eksekusinya:
<h1>Demo Paragraf</h1>
<p>
Nisi sit ultrices cum, vel! Et arcu augue rhoncus dignissim?
Mus amet, proin facilisis aenean eu, diam mattis, arcu sed.
</p>
<p>
Et, nisi in eu. Tincidunt! Nisi ridiculus tempor,
lacus dis placerat arcu sed ac massa dolor ut ultricies ut.
</p>
Contoh
Paragraf HTML
Penekanan Teks
Ketika menuangkan pikiran ke dalam
tulisan, seringkali kita perlu melakukan penekanan terhadap kata-kata atau
bagian tertentu dari teks. Dalam komunikasi verbal seperti berbicara, kita
dapat melakukan penekanan dengan mempertinggi suara, atau dengan memperlambat
pembacaan kata. Dalam teks, teknik yang biasanya digunakan untuk memberikan
penekanan ialah dengan memiringkan atau mempertebal tulisan.
HTML menyediakan dua buah elemen untuk
memberikan penekanan, yaitu em dan strong. Elemen em digunakan sebagai media penekanan konten.
Elemen strong, di sisi
lain, digunakan untuk menandakan bahwa teks di dalamnya merupakan teks
yang sangat penting.
Berikut adalah contoh kode beserta hasil
eksekusinya:
<p>
HTML menyediakan dua buah elemen untuk
memberikan penekanan,
yaitu em dan strong Elemen em digunakan
sebagai media
<em>penekanan</em> konten. Elemen strong, di sisi lain,
digunakan untuk menandakan bahwa teks di
dalamnya
merupakan teks yang <strong>sangat penting</strong>.
</p>
Contoh
Penekanan Teks pada HTML
Cetak Tebal dan Miring
Elemen strong dan em yang dijelaskan pada bagian Penekanan
Teks memberikan
efek cetak tebal dan cetak miring terhadap teks. Begitupun, makna semantik dari
kedua elemen tersebut jelas: untuk memberikan penekanan. Jika ingin memberikan
cetak tebal dan cetak miring dengan tujuan berbeda, kita dapat menggunakan dua
elemen alternatif: b dani.
Apa makna semantik dari b dan i? Mari kita lihat arti semantik dari
kedua elemen ini, sesuai dengan yang tercatat pada standar HTML:
Elemen i merepresentasikan serangkaian
teks di dalam nada atau mood berbeda. Elemen i juga dapat digunakan untuk
menunjukkan perbedaan sebuah frase dengan teks pada umumnya, misalnya
penunjukan taksonomi, istilah teknis, frase idiom dari bahasa lain, pemikiran,
atau nama kapal pada literatur barat.
Elemen b merepresentasikan serangkaian
teks yang harus diperhatikan karena manfaat dari teks tersebut, tanpa
mementingkan tingkat kepentingan dari teks itu sendiri, dan tanpa adanya
tanda-tanda dari perbedaan nada atau mood. Contoh dari teks yang bermanfaat
ialah kata kunci pada abstrak sebuah dokumen, nama produk dalam review,
kata-kata yang dapat digunakan untuk berinteraksi dalam dokumen interaktif,
atau kata pembuka.
—HTML Living Standard
Bingung membaca standar? Ya, saya juga
selalu bingung dalam membaca standar! Sederhananya, elemen i digunakan untuk dua hal: kata-kata
yang berbeda dari suatu teks (istilah asing, istilah teknis) dan perubahan mood
atau nada dalam sebuah karya sastra (karakter berpikir, marah, sarkasme).
Sementara itu, elemen b digunakan untuk memberikan tanda
bahwa teks yang ditebalkan merupakan teks yang bermanfaat, tetapi belum tentu
penting. Contoh yang diberikan pada kutipan sudah cukup jelas, yaitu nama
produk, abstrak, atau kata kunci. Kode di bawah memberikan contoh pengunaan
elemen b dan i:
<p>
<b>Scala</b> (yang adalah kepanjangan dari
"<i>Scalable Language</i>") merupakan sebuah bahasa
pemrograman yang dirancang untuk digunakan dalam
berbagai lingkungan, mulai dari <i>script</i> sederhana
sampai dengan sebuah sistem yang besar dan rumit.
Istilah kerennya, <b>Scala</b> adalah sebuah
<i>general purpose programming language</i>.
</p>
Contoh
Cetak Tebal dan Miring pada HTML
Pengunaan elemen i dan b dengan em dan strong memang seringkali tidak
diperhatikan oleh pengembang web, karena kedua elemen ini sekilas memiliki
tampilan yang sama. Idealnya, pengunaan makna semantik harus diperhatikan juga
selama pengembangan web karena makna semantik akan sangat membantu dalam
interoperasi dengan sistem lainnya (terutama perangkat lunak pembantu tunanetra
dan pengindeks mesin pencari). Jadi pastikan bahwa anda menggunakan makna semantik
yang benar dalam membangun website.
Sedikit tips, untuk memastikan makna
semantik tersampaikan, anda juga dapat membedakan b dan i dengan strongdan em menggunakan CSS untuk seluruh
elemen di dalam dokumen. Diskusikan dengan desainer anda untuk mendapatkan efek
semantik maksimal dari keempat elemen ini!
Hyperlink
Salah satu elemen paling mendasar dari
sebuah website adalah hyperlink. Hyperlink memungkinkan kita menghubungkan
dokumen-dokumen yang ada dalam website, atau bahkan menghubungkan dokumen
dengan dokumen eksternal pada website lain. Selain itu, hyperlink juga
memberikan fasilitas untuk berhubungan dengan email, ataupun ke elemen-elemen
lain dalam dokumen yang sama. Bagaimana cara kita menuliskan hyperlink?
Perhaikan kode di bawah:
<p>
Contoh hyperlink:
<a href="http://www.google.com">klik untuk ke Google</a>.
</p>
Contoh
Pengunaan Hyperlink pada HTML
Perhatikan bahwa hasil pembuatan link
secara otomatis berwarna biru, dan berubah warna menjadi ungu setelah kita
mengunjungi link tersebut. Teks juga secara otomatis bergaris bawah. Tentu saja
seluruh atribut ini dapat diubah menggunakan CSS, dan kita akan mengubahnya
pada bagian akhir.
Path Relatif dan Absolut
Terdapat dua jenis link yang paling
sering digunakan dengan elemen a: link ke halaman lain pada website yang sama, dan
link ke halaman eksternal, pada website yang berbeda. Cara kita membedakan
kedua jenis link tersebut ialah melaluipath yang dituju oleh link
tersebut. Path dapat dibaca melalui atribut href di dalam elemen a.
Link yang mengarah ke halaman lain pada
website yang sama idealnya memiliki path relatif, atau path yang tidak memiliki
nama domain di dalamnya. Karena berada pada website (domain) yang sama, maka
kita tidak lagi perlu menspesifikasikan domain yang digunakan. Jika ingin
menspesifikasikan link ke halaman contact.html di dalam direktori yang sama, kita
dapat langsung menuliskan nama file saja, sementara jika ingin memberikan link
ke halaman pada direktori yang berbeda, kita dapat memberikan nama direktori terlebih
dahulu, seperti yang dilakukan pada pemilihan path umumnya.
Misalnya, jika kita sedang berada pada
file index.html dan ingin memberikan link ke contact.html yang berada pada direktori “etc”,
kita dapat menuliskan link seperti berikut: etc/contact.html. Kode berikut memberikan contoh link
file relatif, di dalam direktori yang sama maupun berbeda:
<p>
Link relatif ke direktori yang sama:
<a href="about.html">About</a> <br>
Link relatif ke direktori yang berbeda:
<a href="contact/main-contact.html">Main Contact</a>
Jika kita berada di dalam direktori "contact" dan ingin
merujuk
ke halaman di direktori utama:
<a href="../index.html">Halaman Utama</a>
</p>
Link ke dokumen eksternal (pada website
yang berbeda) mengharuskan kita menggunakan path absolut, yang harus mengikut
sertakan nama domain. Kode berikut memberikan contoh beberapa link absolut
untuk website-website lainnya:
<p>
Link ke halaman utama
<a href="http://www.google.com/">Google</a>. <br>
Link ke halaman utama
<a href="http://www.twitter.com/bertzzie">
Twitter (Profil Penulis)
</a>. <br>
Link ke halaman utama
<a href="http://bertzzie.com/filter/category/">
Halamn Kategori Blog Penulis
</a>. <br>
Link ke halaman utama
<a href="http://en.wikipedia.org/wiki/Lead_paragraph">
Salah Satu Halaman Wikipedia
</a>. <br>
</p>
Link ke Email
Selain untuk mengirimkan pengguna ke
halaman lain, link juga dapat digunakan untuk mengarahkan pengguna untuk
mengirimkan email. Ketika diklik, link akan membuka perangkat lunak email
standar dan mengisikan data-data yang dibutuhkan (tujuan pengirim, subjek,
isi).
Untuk membuat link email, kita harus
mengisikan nilai atribut href yang diawali dengan teks mailto:, yang kemudian diikuti dengan email
yang harus dikirimkan. Misalnya, untuk mengirimkan email ke bertzzie@bertzzie.com, kita dapat mengisikan atribut href dengan
nilai “mailto:bertzzie@bertzzie.com”.
Contoh kode berikut memperlihatkan cara
penggunaan link email:
<p>
Kirimkan email <a href="mailto:bertzzie@bertzzie.com">ke kami</a>.
</p>
Subjek dari email juga dapat diisikan,
dengan menambahkan parameter subject= setelah email. Yang perlu
diperhatikan, di dalam subjek kita harus menuliskan string secara khusus, yaitu
dalam format URL Encoding [1]. Pengunaan format URL Encoding
menyebabkan kita harus menggantikan karakter spasi (” ”) dengan %20. Kode di
bawah memberikan contoh kode link email yang disertai dengan subjek (perhatikan
isi atribut href):
<p>
Kirimkan email dengan subjek
<a href="mailto:bertzzie@bertzzie.com?subject=Ini%20sebuah%20subjek">
ke kami
</a>.
</p>
Selain mengisikan subjek secara
otomatis, badan (isi) dari email sendiri juga dapat diberikan secara otomatis.
Caranya sama dengan email dengan subjek, tetapi menggunakan parameter body:
<p>
Kirimkan email dengan subjek dan isi
<a href="mailto:bertzzie@bertzzie.com?
subject=Ini%20sebuah%20subjek&
body=Isi%20email">
ke kami
</a>.
</p>
Membuka Jendela Baru
Biasanya, sebuah link akan dibuka pada
halaman yang sama tempat pembaca melakukan klik terhadap link tersebut. Jika
ingin memberikan fasilitas di mana link akan secara otomatis terbuka pada
jendela baru, kita dapat menambahkan nilai “_blank” pada atribut target.
Berikut adalah contoh pengunaan link
untuk membuka jendela baru:
<p>
Link yang terbuka pada jendela baru:
<a href="http://bertzzie.com" target="_blank">
klik
</a>.
</p>
Link ke Elemen pada Halaman yang Sama
Selain memberikan link ke dokumen yang
berbeda, elemen a juga
dapat digunakan untuk menghubungkan kita ke bagian lain pada dokumen yang sama.
Untuk dapat memberikan link ke bagian lain dari dokumen, bagian yang ingin kita
hubungkan harus terlebih dahulu diberikan tanda, berupa atribut “id”. Karena atribut id dapat digunakan pada elemen
apapun, maka elemen a juga
dapat menghubungkan kita ke bagian manapun dari sebuah dokumen.
Untuk lebih jelasnya, perhatikan kode di
bawah (kode dapat diambil di sini. Download dan buka halaman untuk
melihat efeknya:
<p>
<a href="#heading2">Pindah ke bagian "Heading 2"</a>.
</p>
<h1>Heading 1</h1>
<!-- Banyak Teks -->
<h2 id="heading2">Heading 2</h2>
<!-- Banyak Teks Lagi -->
Perhatikan bahwa isi dari atribut href sama dengan isi atribut id pada elemen h2, yang ditambahkan
dengan tanda pagar (“#”) di bagian depannya. Dalam banyak konteks di HTML,
atribut id memang
dirujuk dengan tanda pagar.
Catatan Kaki
Tidak ada komentar:
Posting Komentar