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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Warung Belajar</title> </head> <body> <h3>Belajar Tag < cite ></h3> HTML adalah singkatan dari Hypertext markup language, dimana anda harus belajar HTML terlebih dahulu. Sebelum anda belajar hal lain yang berhubungan dengan pemrogaman web, seperti CSS,PHP,JAVASCRIPT. Referensi saya untuk belajar HTML adalah di <cite>www.w3schools.com | www.tutorialspoint.com/</cite> </body> </html> |
Lalu silahkan buka di browser, tampilannya adalah seperti berikut ini :
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 :
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Warung Belajar</title> </head> <body> <h3>Belajar Tag < abbr ></h3> <abbr title="Hypertext Markup Language">HTML</abbr> adalah dasar dari pemrogaman web yang perlu anda pelajari untuk membuat website, karena semua website akan menggunakan HTML sebagai dasar dari pemrogamannya. </body> </html> |
silahkan buka di browser.
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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Warung Belajar</title> </head> <body> <h3>Belajar Tag < dfn ></h3> <dfn>HTML</dfn> adalah bahasa yang harus anda kuasai sebelum belajar di pemrogaman web lain, karena semua web pasti akan memerlukan HTML sebagai pembuatan element - element web. <hr/> <dfn title="Hypertext markup language">HTML</dfn> adalah bahasa yang harus anda kuasai sebelum belajar di pemrogaman web lain, karena semua web pasti akan memerlukan HTML sebagai pembuatan element - element web. </body> </html> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Belajar HTML di Warung Belajar</title> </head> <body> HTML adalah bahasa yang harus anda kuasai terlebih dahulu, sebelum mempelajari bahasa lain, karena semua website yang ada didunia menggunakan HTML sebagai dasar dari web mereka <small>Copyright warungbelajar.com 2016</small> </body> </html> |
jika kita akses melalui browser maka hasilnya adalah seperti berikut ini :
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]
