Sebelum kita jelaskan bagaimana cara melakukannya, ArifFaiz-In mau jelasin dikit nih buat yang tidak tahu HTML. Simak ya!
Apa itu HTML?
Dalam dunia web programming, biasanya banyak atribut yang digunakan dalam membentuk tampilan sebuah halaman agar halaman tersebut indah dan nyaman dipandang. Atribut-atribut itu sangat penting karena masing-masing atribut dapat mempengaruhi bentuk, warna, bahkan fungsi dari objek yang kita buat. Bahasa dari atribut-atribut yang telah ditentukan itulah biasanya yang kita kenal dengan HTML (Hyper-Text Markup Language). HTML inilah yang biasa kita temukan ketika kita berselancar di internet.
Dalam bahasa HTML ini, ada bermacam atribut yang dapat ditentukan, seperti color, border, margin, width, height, dan masih banyak lainnya.
Coba perhatikan contoh berikut :
<html> <body> <div align="center" style=" font-family:Arial, Helvetica, sans-serif; border-bottom: solid; border-bottom-color: blue; background-color: #CCC; padding:10px;"> <p>Selamat datang di <b><a href="https://ariffaiz-in.blogspot.com" style="color: blue;">ArifFaiz-In</a></b></p>
</div> </body> </html>
Dengan masing-masing memiliki atribut :
div
| align | center |
| font-family | Arial, Helvetica, sans-serif |
| border-bottom | solid |
| border-bottom-color | blue |
| background-color | #CCC |
| font-family | Arial, Helvetica, sans-serif |
| color | blue |
Dari contoh tersebut tampilan yang keluar di browser adalah seperti ini
 |
| Tampilan setelah disimpan |
Oke, kembali ke judul artikel ini. Setelah memperhatikan contoh di atas, coba buat sebuah teks dengan color nama Anda sendiri.
<html> <body> <p><font color='ariffaizin'>ArifFaiz-In</font></p> </body> </html>
 |
| Setelah disimpan, tulisan menjadi berwarna hijau |
Ganti ariffaizin dengan nama Anda sendiri, pastikan menggunakan satu kata tanpa spasi seperti budihartono atau dewiasri. Perhatikan, Anda akan menemukan berbagai warna yang berbeda. Seperti ini
 |
| Tidak hanya hijau, tetapi bermacam warna lainnya |
Lalu mengapa bisa demikian?
Ternyata atribut color='...' pada font tag membuat HTML mengira nama Anda adalah hex color atau warna heksadesimal, lebih jelasnya seperti ini :
- HTML tidak mengerti karakter selain angka '0...9' dan huruf 'a...f' sehingga mengganti karakter yang bukan heksadesimal menjadi 0. Dalam contoh ini, ariffaizin menjadi a00ffa0000.
- Karena hex color berformat RGB, maka kata tersebut harus merupakan kelipatan 3, sehingga tambahkan beberapa 0 di akhir kata, a00ffa0000 berubah menjadi a00ffa000000.
- Agar dapat menentukan nilai masing-masing warna (Red, Green, Blue), maka bagi kata tersebut menjadi tiga bagian berjumlah sama, sehingga menjadi a00f fa00 0000.
- Apabila terdapat satu atau beberapa 0 yang terletak di sebelum karakter heksadesimal yang sama pada setiap bagian, maka hilangkan 0 tersebut di setiap bagian. Misalkan 0a0f 0fa0 0000 maka diubah menjadi a0f fa0 000. Pada contoh lain, a00f 0fa0 0000 tidak dapat dihapus karena ada satu bagian yang depannya bukan 0.
- Karena warna dalam RGB terbatas (maks. hanya 255), maka jika jumlah huruf masing-masing bagian lebih besar dari 2 (karena nilai maks. 255 atau dalam heksadesimal adalah ff maka huruf di belakangnya diabaikan), maka hapus selain 2 huruf terdepan di setiap bagian, maka yang tersisa adalah a0 fa 00 (RGB(160,250,0)).
- Maka gabungan dari ketiga bagian tersebut adalah kode warna dari kata yang Anda gunakan, dalam contoh ini adalah #a0fa00 dalam HTML berwarna hijau muda.
<p><span style="color: ariffaizin;">ArifFaiz-In</span></p>
 |
| Ketika menggunakan parsing dari CSS |
Setelah disimpan, tampilan yang keluar bukan berwarna hijau tetapi justru berwarna hitam. Ini dikarenakan parsing dari HTML berbeda dengan parsing dari CSS. Atribut style="color: ..." menunjukkan untuk bahwa kata tersebut diparse color dalam CSS. CSS menggunakan interpreternya sendiri dalam menerjemahkan kata, sehingga ketika diparse dalam CSS yang muncul adalah warna hitam.
Jadi, tidak semua atribut color dalam HTML dapat mengubah nama kita menjadi warna, namun jangan kecewa karena sesuai penjelasan di awal artikel cara ini hanya untuk bersenang-senang saja :-)
Bonus
 |
| Tampilan tool yang telah jadi |
Untuk mencoba-coba nama seperti apa nama Anda baik di parse dengan HTML maupun dengan CSS, Anda bisa mendownload file disini kemudian ekstrak file tersebut dan jalankan di browser Anda. Anda bisa mencoba dengan nama Anda sendiri, keluarga, ataupun teman.
Untuk menguji perbedaan parse color HTML dan CSS, coba menggunakan kata red, green, blue, dan lain-lain.
Sekian informasi tentang Coba Seperti Apa Warna Namamu Sendiri di HTML. Sekali lagi artikel ini hanya untuk bersenang-senang, oleh karena itu jangan dipikirkan terlalu dalam :). Semoga bermanfaat dan mohon maaf bila terdapat kekurangan. Terima kasih telah berkunjung!
sumber :
https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
https://stackoverflow.com/questions/12939234/why-do-weird-things-in-font-color-attribute-produce-real-colors
No comments:
Post a Comment