Kita akan membuat file HTML baru. Kita buka Windows Explorer dan pilih folder latihan kita, buat file baru yang dengan tipe Text. Lalu kita ubah namanya menjadi special.html.

Kita buka file tersebut dengan Atom. Dan kita ketik HTML dan tekan enter untuk mendapatkan Boilerplate. Kita isikan Title dengan HTML Special Characters. Dan di dalam body, kita buatkan header pertama dengan judul HTML Special Characters.

Nah, dalam kode HTML baru ini, kita hendak menuliskan konten yang perlu menggunakan trik khusus ya. Misalnya kita mau membuat konten matematika seperti 2 < 5. Kita coba tuliskan di kode kita langsung 2 < 5.

Di dalam Text Editor Atom, kita bisa melihat bahwa tanda < dianggap sebagai tanda pembuka tag. Dan angka lima sebagai kata pertama setelah tag pembuka, dianggap sebagai elemen dan diberi warna merah. Dan sebagai contoh apabila saya menambahkan kata setelah angka 5, misalnya saya tulis adalah benar. Kita bisa lihat bahwa kata adalah benar diberi warna orange, karena dianggap sebagai attribute.

Cara penulisan konten seperti ini adalah cara yang tidak benar. Karena dapat menimbulkan ambiguitas bagi browser, apakah < 5 itu sebuah tag, atau < 5 itu adalah kontennya. Dan apabila browser salah mengintepretasikan < 5 sebagai sebuah tag, maka tampilan dari konten kita akan menjadi berantakan. Oleh karena itu kita seharusnya menggunakan HTML Special Character untuk menuliskan konten tanda lebih kecil.

Kita bisa buka Google dan melakukan search dengan kata kunci HTML Special Character. Dan kita bisa membuka referensi dari situs html.am. Disini kita bisa melihat ada 5 karakter yang merupakan HTML Reserved Character. Mengapa disebut Reserved Character? Karena kelima karakter ini digunakan untuk menuliskan kode HTML. Kalau kita lihat lagi lebih teliti, untuk menuliskan sebuah HTML Tag, kita menggunakan kurung siku pembuka dan kurung siku penutup, dimana kurung siku tersebut adalah simbol matematika yang artinya lebih kecil dan lebih besar. Sedangkan untuk menuliskan nilai di dalam attribute, kita bisa menggunakan tanda petik, atau tanda petik tunggal.

Oleh karena itu, agar tidak terjadi ambiguitas, maka lebih baik apabila kita menuliskan karakter-karakter ini di dalam konten kita dalam bentuk Entity Number atau Entity Name seperti yang bisa kita lihat di dalam tabel. Untuk kelima jenis karakter ini, biasanya front end developer akan menggunakan Entity Name, karena lebih mudah untuk diingat. Entity selalu dimulai dengan simbol dan, atau dalam bahasa inggrisnya ampersand. Dan diakhiri dengan tanda titik koma. Entity name lebih gampang diingat karena merupakan singkatan dari karakternya. Disini bisa kita lihat quot adalah singkatan dari quotation mark atau tanda petik, apos singkatan dari apostrophe atau tanda petik tunggal, amp singkatan dari ampersand atau simbol dan, lt singkatan dari less than atau tanda lebih kecil, dan yang terakhir gt singkatan dari greater than atau tanda lebih besar.

Kita kembali ke kode HTML. Lalu kita ganti tanda lebih kecil kita menjadi <. Kita lihat hasilnya di browser. Browser sudah bisa menampilkan konten kita dengan benar ya.

Selain menggunakan Entity Name, kita juga bisa menuliskan konten yang sama dengan menggunakan Entity Numbernya. Namun hal ini lebih sulit ya, karena kita mesti menghafalkan nomor dari karakter tersebut. Sebagai contoh kita copy paste Entity Number dari tanda huruf kecil. Lalu kita tambahkan ke kode HTML kita.

Pertama kita tambahkan tag BR dahulu agar konten dituliskan di baris berikutnya. Lalu kita tambahkan konten baru Bisa juga menggunakan Entity Number 2. Lalu kita paste Entity Numbernya. 5. Kita lihat hasilnya di browser. Hasilnya sama persis dengan kalimat pertama 2 < 5 ya.

Cara penulisan Entity Number ini bisa juga digunakan untuk menuliskan karakter unicode ke dalam konten kita. Sebagai contoh kita buka kembali situs unicode-table.com. Misalkan kita hendak mencari Emoticon seperti yang kita gunakan pada pelajaran sebelumnya. Kita klik ke emoticon tersebut. Disini kita bisa melihat ada HTML-code, yang merupakan Entity Number dari huruf tersebut. Kita copy HTML-code tersebut dan kita paste ke Header pertama kita. Kita lihat hasilnya pada browser, dan emoticon yang kita pilih berhasil tampil seperti pada pelajaran sebelumnya. Jadi ini bisa dijadikan alternatif ya, apabila kita sedang menggunakan Text Editor yang tidak mendukung Unicode, kita bisa menggunakan HTML-code untuk menambahkan karakter Unicode ke dalam konten kita.

Ada satu lagi HTML Special Character yang sering digunakan, yaitu   yang singkatan dari non-breaking space. Karakter ini akan menambahkan jarak satu spasi di konten kita. Kita kembali ke kode HTML kita. Sebagai contoh kita hendak menambahkan jarak antara emoticon dan kata HTML. Kalau di dalam kode HTML kita tambahkan spasi dalam jumlah banyak, kita bisa melihat bahwa hasil di konten tidak ada perubahan ya. Sebanyak apa pun spasi yang kita tambahkan dalam konten, browser akan mengintepretasikannya menjadi hanya 1 spasi saja.

Apabila kita hendak menambahkan spasi, kita bisa menggunakan  . Sebagai contoh kita tambahkan satu buah   disini. Dan kita lihat hasilnya sudah ada tambahan jarak antara emoticon dan kata HTML. Dan apabila jarak tersebut kurang besar, kita bisa menambahkan   lebih banyak, sebagai contoh saya gunakan 5 buah  . Dan kita lihat hasilnya jarak antara emoticon dan kata HTML menjadi semakin jauh.

Kita kembalikan   menjadi satu saja. Selanjutnya kita akan membahas mengenai cara menuliskan komentar pada kode HTML kita. Komentar bisa kita tuliskan di bagian mana saja dalam kode HTML kita, dan tidak akan ditampilkan di layar pengguna. Ada beberapa kegunaan dari komentar:

1. Untuk menjelaskan arti dari kode yang sedang kita tulis. Mungkin suatu hari nanti kita harus melihat kembali kode HTML yang sedang kita tulis sekarang, dan dengan meninggalkan komentar kita bisa dengan lebih cepat mengingat dan mengerti kembali mengenai kode tersebut. Hal ini juga berguna bagi developer yang bekerja sama dalam sebuah tim, sehingga rekan kerjanya bisa membaca komentar dan lebih cepat menangkap maksud dari kode yang bersangkutan.
2. Untuk menuliskan TODO atau pekerjaan berikutnya yang harus kita lakukan di bagian kode tersebut. Pada saat menuliskan kode, terkadang kita terpikiran ada ide bagus yang bisa dikembangkan untuk fitur berikutnya. Namun ide ini tidak bisa kita kembangkan sekarang karena kita mesti fokus ke pekerjaan yang sekarang. Maka ide ini kita tuliskan sebagai komentar TODO. Nantinya kalau pekerjaan kita sudah kelar, kita bisa kembali melihat kode yang telah kita tulis, dan melanjutkan pekerjaan dari komentar TODO.
3. Terkadang kita melakukan upgrade besar pada kode kita, sehingga kita harus menghapus sebagian dari kode lama yang sudah kita tulis. Namun kita merasa ada kemungkinan kode lama ini masih akan digunakan kembali di masa depan. Maka kita bisa menggunakan tag komentar untuk mengubah semua kode menjadi komentar.

Untuk menuliskan komentar pada kode HTML, kita menggunakan tag khusus yaitu kurung siku pembuka, diikuti dengan tanda seru, dan 2 buah tanda minus. Untuk menutup tag komentar, kita menuliskan 2 buah tanda minus, diikuti dengan tanda kurung siku penutup. Perhatikan bahwa tag penutup tidak memiliki tanda seru. Semua konten yang berada di dalam tag komentar akan dianggap sebagai komentar dan tidak diinterpretasikan oleh browser.

Kita coba membuat komentar pada kode HTML kita, di atas header pertama, kita tambahkan komentar contoh penggunakan special character.

Lalu sebelum tag penutup body, kita tambahkan komentar lagi. Kali ini kita siapkan ruang untuk beberapa baris. TODO: kita akan belajar mengenai HTML List. Di baris berikutnya kita tambahkan di video berikutnya. Setelah itu kita buat tag penutup.

Kita simpan dan lihat hasilnya pada browser. Semua komentar yang kita tuliskan tidak kelihatan pada tampilan browser. Namun ada beberapa hal yang perlu diingat mengenai komentar ya. Yang pertama adalah komentar ini tetap dikirim ke pengguna, dan pengguna tetap bisa membaca komentar dengan cara menekan tombol Ctrl+U atau View Source. Jadi sebaiknya jangan sembarangan menuliskan komentar, karena dulu sudah ada kasus developer salah satu situs besar, menuliskan lelucon sebagai komentar, dan ternyata ada salah satu penggunanya yang membaca komentar tersebut. Akhirnya malah diviralkan. Hal seperti ini tidak bagus ya, karena bisa merusak brand image dari situs tersebut.

Dan hal kedua yang perlu diperhatikan adalah karena komentar tetap dikirim ke pengguna, maka komentar ini juga turut menghabiskan bandwith dari server kita. Untuk situs besar dengan jumlah pengguna yang banyak, hal ini akan berpengaruh banyak. Apabila halaman kita diakses sebanyak 1 juta kali, maka dengan menghapus 1 karakter saja kita sudah menghemat bandwith sebesar 1 megabytes. Dan kalau kita menghapus seluruh komentar, spasi, tab dan enter dari kode kita, mungkin jumlah total bandwith yang kita hemat sudah bisa mencapai sekian gigabytes.

Sebagai contoh kita bisa melihat ke situs Google.Com. Dan kita coba View Source. Disini bisa kita lihat bahwa pada source sudah tidak ada spasi, enter, ataupun tab. Jadi dari tag Doctype, langsung dilanjutkan ke tag html, lalu langsung lanjut lagi ke head, meta, dan selanjutnya. Source memang menjadi susah untuk dibaca, namun untuk situs besar seperti Google, hal ini akan menghemat banyak bandwith.

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.