Belajar HTML Part 15 Mengenal Tag cite, abbr, dfn, dan small di HTML

Hai Selamat Datang di Warung Belajar, masih dalam tutorial HTML, di part ke 15 ini kita akan membahas mengenai tag – tag yang berhubungan dengan manipulasi text di html, agar content yang dihasilkan bisa lebih menarik, baik langsung saja kita bahas dari tag – tag ini.

 


Video Tutorial Belajar HTML – Mengenal Tag cite, abbr, dfn, dan small di HTML

 

 

Tag <cite> untuk menampilkan text sumber referensi

Tag pertama yang akan bahas adalah tag <cite>, tag <cite> adalah singkatan dari Citation. Fungsi dari tag ini digunakan untuk menampilkan text dengan format referensi, text yang menggunakan tag ini akan ditampilkan dengan menggunakan garis miring atau italic, tag ini merupakan jenis tag inline, sehingga akan tetap mengikuti alur di text yang ada.

Silahkan anda tuliskan skrip html dibawah ini :

Lalu silahkan buka di browser, tampilannya adalah seperti berikut ini :

tag_cite_di_html

 

Terlihat text yang menggunakan tag <cite> maka text akan ditampilkan dengan huruf miring (italic)

 

Tag <abbr> untuk membuat tooltip singkatan dalam HTML

Tag <abbr> merupakan singkatan dari Abbreviation. Dengan menggunakan tag ini anda bisa menampilkan singkatan berupa tooltip ketika ada mouse di atas text yang menggunakan tag ini, tag ini merupakan jenis tag inline, jadi akan tetap mengikuti alur di text yang ada.

silahkan tuliskan skrip dibawah ini :

silahkan buka di browser.

tag_abbr_di_html

terlihat terdapat tooltip dengan text Hypertext Markup Language, ketika ada mouse di atas text HTML, hal tersebut dikarenakan anda menggunakan tag <abbr>

 

Tag <dfn> untuk menampilkan definisi dari kata

Tag <dfn> adalah singkatan dari definition, tag ini digunakan untuk menampilkan text definisi, text yang menggunakan tag ini akan ditampilkan dengan huruf miring (italic), tag ini merupakan jenis tag inline, jadi akan tetap mengikuti alur di text yang ada.

baik langsung saja, coba anda perhatikan skrip dibawah ini :

jika kita akses melalui web browser, hasilnya adalah sebagai berikut :

coba perhatikan, dalam skrip diatas saya coba membuat 2 bagian text, yang sama sama menggunakan tag <dfn> hasilnya untuk textnya ditampilkan dengan huruf miring (italic), lalu dibagian text kedua saya menambahkan title disana, dan ternyata juga bisa menampilkan tooltip seperti tag <abbr> yang sebelumnya telah kita bahas.

 

Tag <small> untuk membuat text dengan ukuran kecil

Tag <small> digunakan untuk menampilkan text dengan ukuran yang lebih kecil, tag <small> sebenarnya sudah berstatus deprecated, hanya saja telah didefinisikan ulang di HTML 5.
Tag <small> digunakan jika anda ingin menampilkan text dengan ukuran yang kecil, seperti untuk copyright ataupun legal notice, tag <small> juga masuk ke dalam tipe tag inline, yang akan mengikuti alur dari text yang sebelum sudah ada.

jika kita akses melalui browser maka hasilnya adalah seperti berikut ini :

tag_small_di_html

terlihat karena kita menggunakan tag  <small> maka tulisan warungbelajar.com@2016 tertulis dengan ukuran lebih kecil.

 

Bagaimana teman – teman sudah cukup paham kan, kita sudah membahas mengenai beberapa tag seperti <cite>, <abbr>, <dfn>, dan <small> anda dapat melakukan memanipulasi text di skrip html, sekian dulu tutorial kali ini, kita akan bahas lagi di tutorial html lainnya, jika ingin berdiskusi silahkan di kolom komentar.

[stextbox id=”info”] Anda serius ingin menguasai HTML ?

Warung Belajar telah membuat DVD Tutorial “Tutorial HTML – White Box“. DVD Tutorial ini membahas HTML dengan lebih lengkap dan detail. Penjelasan lebih lanjut bisa ke: Tutorial HTML – White Box[/stextbox]

Leave a Reply

Your email address will not be published. Required fields are marked *