Kita kembali ke kode kita dari pelajaran sebelumnya. Disini kita sudah mendapatkan sejumlah kode HTML yang dituliskan secara otomatis oleh package Emmet. Dan kita akan membahas arti dari kode ini satu per satu.

Kita mulai dari bagian paling atas ya, yaitu DOCTYPE. DOCTYPE ini sebenarnya bukan kode HTML. DOCTYPE adalah kode DTD, singkatan dari Document Type Definition. Makanya kita lihat format penulisannya sedikit berbeda dari Tag HTML. DOCTYPE dituliskan dengan menggunakan kurung siku, diikuti dengan tanda seru. Dengan menuliskan DOCTYPE HTML seperti pada kode kita ini, kita memberitahukan kepada browser bahwa dokumen ini kita buat dengan mengikuti standart HTML versi terbaru, yaitu HTML versi 5.

Dan kita termasuk beruntung, karena penulisan DOCTYPE HTML untuk versi 5 ini, jauh lebih simple daripada DOCTYPE lainnya. Sebagai contoh, kita coba bandingkan dengan HTML 4 ya. Kita buka browser kita dan kita search DOCTYPE. Kita pilih hasil pencarian dari W3SCHOOLS.COM. Dan kemudian kita geser kebawah ya.

Disini kita bisa lihat bahwa untuk HTML 5, hanya ada 1 jenis deklarasi DOCTYPE, yaitu DOCTYPE HTML. Dan deklarasi DOCTYPE ini sifatnya tidak case sensitif ya. Jadi kita bebas mau menuliskannya dalam huruf besar ataupun huruf kecil.

Dibawahnya lagi kita bisa melihat deklarasi DOCTYPE untuk HTML versi 4, dimana ada 3 versi yaitu Strict, Transitional, dan Frameset. Bisa dilihat disini bahwa kode DOCTYPE-nya sangat panjang, dan susah untuk diingat.

Kita kembali ke kode HTML kita. Kode HTML selalu berada didalam tag HTML. Jadi disini bisa kita lihat tag pembuka HTML, dan diakhir dokumen kita ada tag penutup HTML.

Isi dari tag HTML selalu ada 2 bagian, yaitu tag Head, dan tag Body. Di dalam tag Head, kita memberikan semua informasi yang berkaitan dengan dokumen ini, misalkan seperti tag meta charset yang berada di dalam dokumen kita, gunanya untuk memberitahukan browser mengenai cara menampilkan dokumen ini dengan menggunakan karakter yang benar. Contoh lainnya adalah informasi judul, keyword dan deskripsi yang akan digunakan oleh Search Engine untuk menentukan bagaimana cara menampilkan dokumen kita di hasil pencarian. Nantinya akan kita bahas lagi secara lebih detil.

Sedangkan dalam tag Body, isinya adalah konten dari dokumen kita. Contohnya adalah tag header yang telah kita bahas pada pelajaran pertama.

Nah, kita lihat di dalam tag HTML kita terdapat 2 buah attribute ya, yaitu lang dan dir. Lang ini adalah Language, atau bahasa yang digunakan di dalam konten. Nilai attribute en berarti konten ini dibuat dalam bahasa Inggris atau English. Untuk melihat tabel referensi secara lebih lengkap, kita melakukan pencarian google dengan kata kunci html lang. Dan disini kita bisa mengklik hasil dari situs W3Schools.com dengan judul HTML ISO Languange Code Reference. Disini kita bisa lihat ya kode ISO dari berbagai bahasa di dunia.Bisa dilihat disini English berkode en. Dan untuk Indonesia, bisa menggunakan kode id, atau in.

Kembali ke kode HTML. Attribute kedua dir, singkatan dari direction yang berarti arah membaca teks. Dalam kode kita nilai attribute dir adalah ltr, yaitu Left to Right. Artinya konten kita dibaca dari arah kiri ke kanan. Sebagai contoh, saya bisa mengubah isi attribute ini menjadi rtl, atau Right To Left. Dan kita lihat hasilnya. Kita bisa lihat bahwa tampilan konten kita berubah, semua teks menjadi rata kanan. Kita kembalikan dahulu ke nilai awal ltr.

Selanjutnya kita masuk ke dalam tag Head. Di dalam tag Head, kita bisa melihat ada 2 buah tag, yaitu Meta dan Title. Elemen meta memberikan metadata atau informasi tambahan mengenai konten HTML kita. Dalam hal ini, elemen meta memberitahukan bahwa charset atau karakter set yang digunakan dalam seluruh konten kita adalah utf-8. Dengan memanfaatkan informasi ini, maka browser bisa menampilkan konten kita dengan menggunakan karakter atau huruf yang benar.

Saat ini utf-8 sudah menjadi standar encoding yang seharusnya kita gunakan dalam konten kita. Mengapa? Karena dalam utf-8 ini sudah bisa menggunakan huruf-huruf yang ada di seluruh bahasa di dunia. Bisa kita lihat di situs unicode-table.com. Disini kita bisa melihat semua simbol yang bisa digunakan dalam sistem unicode, yang bisa juga kita gunakan dalam utf-8. Dimulai dari angka dan huruf abjad abcd yang biasa kita gunakan.

Kemudian kalau kita scroll kebawah, kita bisa melihat huruf-huruf dari bahasa lain. Disebelah kanan kita bisa melihat nama bahasanya, dan dibawahnya ada peta dunia yang menunjukkan negara-negara yang menggunakan huruf ini. Misalnya kita lihat ini adalah huruf Arabic.

Dan kalau kita klik ke nama bahasa, maka kita bisa melihat daftar bahasa yang didukung di dalam unicode. Yang menariknya disini kita bisa melihat bahwa dari Indonesia saja kita bisa menemukan bahasa Balinese, Sundanese dan Batak. Hal ini menarik ya, ternyata mereka juga memiliki huruf sendiri diluar dari abjad abcd yang biasa kita gunakan.

Kalau kita scroll down kebawah lagi kita bisa menemukan Emoticons atau Emoji, dan sebenarnya masih banyak lagi lambang-lambang yang bisa kita gunakan untuk konten kita. Dan apabila misalnya kita mau menggunakan salah satu dari huruf yang ada dalam unicode ini ke dalam konten kita, kita bisa mengklik huruf tersebut. Misalkan saya mengklik gambar emoji orang yang sedang mengangkat satu tangan. Lalu kita klik tombol Copy.

Kemudian kita kembali ke Atom, kita atur kursor agar berada setelah tag H1. Kemudian tekan tombol Paste atau di Windows bisa dilakukan dengan cara menekan tombol Ctrl+V. Huruf tersebut berhasil di copy ke text editor atom. Kita menyimpan file ini dan kembali ke Chrome. Kita tekan tombol Refresh, atau bisa dengan lebih singkat menekan Ctrl+R. Dan kita bisa melihat emoticon tersebut di judul pertama konten.

Apakah yang akan terjadi apabila kita salah memberikan informasi utf-8, atau browser menggunakan charset yang salah? Kita contohkan pada kode HTML kita, misalkan kita mengubah charset menjadi ascii. Kita simpan dan lalu refresh browser. Bisa dilihat disini bahwa browser salah menampilkan emoticon menjadi huruf yang tidak dikenal. Hal ini yang disebut dengan Mojibake.

Kita search di google mengenai mojibake, dan membaca informasinya dari Wikipedia. Mojibake terjadi ketika komputer gagal untuk menampilkan konten karena menggunakan encoding yang salah, sehingga akhirnya yang ditampilkan adalah huruf-huruf acak yang tidak bisa dibaca. Di sebelah kanan ada beberapa contoh dari Mojibake, bisa kita lihat pada gambar bahwa konten ditampilkan dalam karakter acak sehingga tidak bisa kita baca.

Kembali ke kode HTML kita dan kita kembalikan charset menjadi utf-8. Apabila kita perhatikan lebih lanjut, ada sedikit perbedaan diantara tag meta dengan tag lainnya dalam kode kita. Apa bedanya? Nah, kalau kita perhatikan lagi pada saat kita membuat tag pembuka untuk meta, kita tidak membuat tag penutupnya. Element seperti meta ini kita sebut dengan nama Void Element, yaitu elemen yang tidak memiliki konten, sehingga tidak memerlukan tag penutup. Nantinya setelah kita mempelajari HTML lebih dalam, kita akan menemukan lebih banyak void element, seperti Image, Line Break, Horizontal Rule, dan lain-lain.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.