————————————————————————————————————
PHYSICAL STYLE
Physical style adalah style yang digunakan untuk melakukan text formatting secara fisik tanpa adanya maksud tertentu dari penggunaannya. Jadi, style ini digunakan hanya untuk
memperlihatkan bahwa sebuah teks tidak datar sehingga tidak membosankan. Tag-tag dari physical style antara lain sebagai berikut
TAG | FUNGSI |
| <b> … </b> | Bold (karakter tebal) |
| <i> … </i> | Italic (karakter miring) |
| <u> … </u> | Underline (karakter bergaris bawah) |
| <s> … </s> | |
| <big> … </big> | Karakter besar |
| <small> … </small> | Karakter kecil |
| <blink> … </blink> | Karakter berkedip |
| <sup> … </sup> | Superscript (perpangkatan) |
| <sub> … </sub> | Subscript (perpangkatan bawah) |
| <tt> … </tt> | Teletype |
Tabel di atas berisi tag-tag physical style yang dapat digunakan dalam HTML. Untuk penjelasannya saya akan membahas sedikit mengenai tag-tag tersebut. Untuk tag bold, italic, underline, dan strike sudah sering kita temui dalam aplikasi pengolah kata seperti Microsoft Word. Penjelasan mengenai keempat tag tersebut sudah dapat diketahui pada tabel. Lalu bagaimana cara menggunakannya? Jika anda mengetikan sebuah teks dalam HTML dan anda hendak menggunakan tag style, anda cukup mengapit kata maupun teks yang akan diberi style dengan tag yang akan digunakan. Sebagai contoh, jika anda akan memasukan kalimat seperti berikut : "Saya adalah siswa Teknik Komputer dan Jaringan di SMKN 1 Cimahi", maka yang anda perlukan adalah tag <b> pada teks "Teknik Komputer dan Jaringan". Berikut adalah penggunaannya
Untuk tag big, small, dan blink adalah style yang digunakan untuk mengatur ukuran dan bentuk dari suatu teks / paragraf. Suatu teks akan berukuran relatif besar jika diapit oleh tag <big> ... </big> dan akan relatif kecil jika diapit oleh tag <small> ... </small>. Kemudian teks akan berkedip (menghilang dan muncul kembali secara terus menerus dalam hitungan milisekon) jika diapit oleh tag <blink> ... </blink>. Untuk prakteknya silahkan anda coba sendiri supaya dapat memahami perbedaan ketiga tag tersebut.
Untuk tag superscript dan subscript adalah tag yang digunakan untuk perpangkatan. Superscript digunakan untuk membuat perpangkatan atas, biasanya digunakan dalam rumus-rumus matematika atau rumus hitung lainnya. Sebagai contoh, angka 52 merupakan bentuk superscript dimana angka 2 dalam bilangan 5 pangkat 2 adalah angka yang diapit dengan tag <sup>. Kemudian untuk subscript adalah perpangkatan bawah yang biasanya digunakan untuk rumus-rumus kimia seperti H2O, H2SO4, dll. Untuk pemahaman lebih matang silahkan mencobanya.
Terakhir adalah tag teletype, yaitu tag yang biasanya digunakan untuk menyatakan bahwa suatu teks dalam HTML merupakan sebuah kode, sintax, rumus ilmiah dan semacamnya. Sebuah teks yang diapit oleh tag <tt> akan dipresentasikan oleh web browser sebagai teks yang menggunakan jenis font Consolas.
————————————————————————————————————
LOGICAL STYLE
Berbeda dengan physical style, logical style tidak melakukan text formatting secara fisik, tetapi melakukan text formatting secara logic berdasarkan makna atau maksud dari sebuah teks. Logical style mengisyaratkan adanya arti tertentu dari sebuah teks. Untuk lebih memahami, berikut adalah tag-tag dalam Logical Style
STYLE NAME | TAG | STYLE |
| Emphasize (penegasan) | <em> | Pada umumnya italic |
| Strong emphasize (penegasan) | <strong> | Pada umumnya bold |
| Citation (kutipan) | <cite> | Pada umumnya italic |
| Definition (penjelasan) | <dfn> | Pada umumnya italic |
| Abbreviation (singkatan) | <abbr> | Tooltip |
| Code (syntax / command) | <code> | Monospaced font |
Jika dilihat dari tabel di atas dapat diketahui bahwa sebagian besar tag dalam logical style memiliki fungsi yang sama dengan beberapa tag dalam physical style. Lalu kenapa tidak menggunakan physical style saja? Kenapa untuk bold tidak menggunakan tag <b> melainkan <strong>? Hal ini dikarenakan Physical Style merupakan cara menampilkan (appereance) dari sebuah teks, sedangkan Logical Style adalah cara untuk mendeskripsikan (describe) sebuah teks. Sebagai contoh saya akan membuat sebuah contoh penggunaan logical style seperti berikut
Dari tag di atas, web browser akan menampilkan kalimat "Saya adalah siswa di SMKN 1 Cimahi". Maksudnya dari penulis dalam menuliskan kalimat tersebut adalah untuk 'menjelaskan' bahwa dia adalah seorang siswa, dan dia 'menegaskan / menekankan' lagi bahwa dia adalah siswa SMKN 1 Cimahi. Sehingga disini tergambarkan bahwa logical style digunakan untuk memberi makna dari sebuah teks.
Kemudian saya akan menjelaskan mengenai penggunaan tooltip. Hal ini hampir sama dengan penggunaan atribut title pada tag <img> yang menghasilkan keterangan gambar. Namun dalam logical style, tooltip biasa digunakan untuk menjelaskan kepanjangan dari sebuah singkatan. Contoh, saya akan membuat tooltip pada kata "TKJ" yang kepanjangannya adalah "Teknik Komputer dan Jaringan", maka saya membuat tag seperti berikut :
<abbr title="Teknik Komputer dan Jaringan">TKJ</abbr>
Setelah tag selesai dibuat dan ditampilkan pada browser, maka kata "Teknik Komputer dan Jaringan" akan muncul saat mouse didekatkan pada kata "TKJ".
Pada tabel di atas dapat kita lihat bahwa tag emphasize, strong emphasize, citation, dan definition memiliki fungsi yang diawali dengan kata "pada umumnya". Lalu untuk emphasize, citation, dan definition memiliki style yang sama, yaitu italic. Mengapa harus demikian? Mengapa tidak menggunakan emphasize saja untuk membuat style italic? Hal ini dikarenakan standar yang digunakan oleh tiap web browser berbeda-beda. Secara default, browser akan menampilkan tag emphasize sebagai italic atau karakter miring. Namun tidak semua browser menampilkannya seperti itu. Contoh, browser yang berbasis text-to-speech tidak dapat menampilkan style italic. Kemudian jika anda melihat sebuah teks yang berupa karakter miring (italic) pada dokumen HTML yang dibuka di sebuah browser, bisa jadi pada browser lain teks tersebut ditampilkan dengan karakter tebal (bold).
Kesimpulannya, logical style menjelaskan "sebuah teks digunakan untuk apa", bukan "bagaimana sebuah teks ditampilkan".
makasih gan. infonya bisa di pahami. saya bookmark ya......
BalasHapuswoke :)
Hapus