Setelah pada sebelumnya saya telah memberikan tutorial pengenalan elemen-elemen HTML pada kali ini saya akan melanjutkan tutorial dengan pembahasan Atribut HTML. Dalam tutorial kali ini Sobat akan mempelajari mengenai jenis-jenis atribut dan kegunaan atribut tersebut, Atribut berguna dalam memberikan sebuah informasi tambahan mengenai elemen HTML.
Perlu diketahui:
Atribut lang
Atribut lang berfungsi sebagai penetapan sebuah kode bahasa pada sebuah elemen, penempatan atribut lang dicantumkan dalam tag </html>. Mendeklarasikan sebuah bahasa sangatlah penting karena berguna untuk aplikasi aksesibilitas (scren reader) maupun pada mesin pencari, sebagai contoh:
Paragraph HTML yang didefinisikan oleh tag <p>
Dalam contoh ini saya akan memberikan atribut judul pada paragraph HTML <p> dengan nilai atribut mengenai Pusat Tutorial. sebagai contoh:
Catatan: Pada saat sobat menggerkan kursor mouse diatas elemen maka judul akan ditampilkan sebagai sebuah tooltip.
silahkan sobat coba sendiri.
Atribut href
Dengan menggunakan atribut href sobat dapat membuat sebuah link URL, untuk membuatnya.. link HTML perlu didefinisikan dengan tag <a> lalu alamat linknya dicantmkan dalam atribut href, sobat akan lebih banyak belajar tentang link dan tag <a> nanti pada tutorial ini. sebagai contoh:
Atribut Size (ukuran)
Atribut size berguna dalam mengatur ukuran pada contoh ini kita akan mengaplikasikannya untuk menampilkan dan mengatur ukuran sebuah gambar, gambar dalam HTML didefinisikan dengan tag <img /> lalu didalam tag tersebut dicantumkan (src) yang merupakan sumber dari nama berkas dan (width dan height) merupakan yang mengatur dari segi ukuran lebar dan tinggi dari sebuah gambar, sobat akan lebih banyak belajar tentang gambar dan tag <img /> nanti pada tutorial . sebagai contoh:
Atribut Alt
Fungsi dari atribut alt adalah untuk menentukan sebuah teks alternatif yang akan dipergunakan pada saat sebuah elemen HTML tidak bisa ditampilkan di browser.
Sebagai contoh:
Disarankan: Agar selalu menggunakan huruf kecil dalam menuliskan atribut, tapi pada standar HTML5 dalam menuliskan nama atribut tidak perlu menuliskan nama atribut dengan huruf kecil saja menuliskan nama atribut dengan huruf besapun boleh hanya saja W3C merekomendasikan penggunaan nama atribut dengan huruf kecil untuk HTML4 dan menuntut huruf kecil dalam jenis dokumen yang ketat seperti XHTML.
Catatan: Penggunaan nama atribut dengan huruf kecil merupakan yang paling umum karena menggunakan huruf kecil lebih mudah dalam proses pengetikan.
Disarankan: Selalu gunakan tanda kutip pada nilai atribut meskipun pada standar HTML5 tanda kutip tidak diperlukan untuk nilai atribut.
sebagai contoh nilai atribut yang tidak diberi tanda kutip:
silahkan sobat coba sendiri.
Single atau double Quotes (kutip)
Penggunaan tanda kutip, gaya tanda kutip double memang merupakan yang paling umum digunakan namun gaya tanda kutip single pun dapat digunakan. Tetapi pada beberapa situasi pada saat nilai atribut itu sendiri mengandung tanda kutip double maka penggunaan tanda kutip single diperlukan.
sebagai contoh:
Atribut HTML
Dibawah ini mrupakan daftar dari beberapa atribut HTML yang sering digunakan:
Gimana nih sobat sudah mengerti bukan tentang Pengenalan Atribut HTML? mudah-mudahan tutorial ini dapat dimengerti oleh sobat dan bermanfaat tentunya. Kalo gitu sekian untuk tutorial Pengenalan Atribut HTML, kita akan lanjutkan kembali tutorial HTML di tutorial berikutnya :)
Perlu diketahui:
- Sebuah elemen HTML bisa memiliki atribut
- Atrbut akan memberikan informasi tambahan mengenai sebuah elemen
- Atribut selalu tercantum dalam tag pembuka
- Atribut datang dengan sebuah pasangan nama maupun nili seperti: (name="value"
Atribut lang
Atribut lang berfungsi sebagai penetapan sebuah kode bahasa pada sebuah elemen, penempatan atribut lang dicantumkan dalam tag </html>. Mendeklarasikan sebuah bahasa sangatlah penting karena berguna untuk aplikasi aksesibilitas (scren reader) maupun pada mesin pencari, sebagai contoh:
<!DOCTYPE html>Pada dua huruf pertama menentukan sebuah bahasa (en), jika ada bahasa lainnya maka gunakan dua huruf lainnya (ID).
<html lang="en-ID">
<body>
<h1>Postingan Pertama Sobat</h1>
<p>Paragraph pertama sobat</p>
</body>
</html>
Paragraph HTML yang didefinisikan oleh tag <p>
Dalam contoh ini saya akan memberikan atribut judul pada paragraph HTML <p> dengan nilai atribut mengenai Pusat Tutorial. sebagai contoh:
<!DOCTYPE html>Hasil diatas:
<html>
<body>
<h1>Pusat Tutorial</h1>
<p title="Pusat Tutorial">
Pusat Tutorial adalah sebuah situs blog.
Disini menyediakan Referensi dan Tutorial untuk bahan pembelajaran sobat
yang mencakup banyak aspek pemrograman, Design dan Editing, Tips & Trik. Dan masih banyak lagi yang ingin kita sajikan yang mungkin akan menyusul kemudian :)
</p>
<p><b>
Jika sobat menggerakkan kursor mouse pada paragraph di atas,
maka judul akan ditampilkan sebagai tooltip.
</b></p>
</body>
</html>
silahkan sobat coba sendiri.
Atribut href
Dengan menggunakan atribut href sobat dapat membuat sebuah link URL, untuk membuatnya.. link HTML perlu didefinisikan dengan tag <a> lalu alamat linknya dicantmkan dalam atribut href, sobat akan lebih banyak belajar tentang link dan tag <a> nanti pada tutorial ini. sebagai contoh:
<!DOCTYPE html>Hasil diatas:
<html>
<body>
<a href="http://www.pus-tut.blogspot.com">Ini link nya Pusat Tutorial</a>
</body>
</html>
silahkan sobat coba sendiri.
Ini link nya Pusat Tutorial
Atribut Size (ukuran)
Atribut size berguna dalam mengatur ukuran pada contoh ini kita akan mengaplikasikannya untuk menampilkan dan mengatur ukuran sebuah gambar, gambar dalam HTML didefinisikan dengan tag <img /> lalu didalam tag tersebut dicantumkan (src) yang merupakan sumber dari nama berkas dan (width dan height) merupakan yang mengatur dari segi ukuran lebar dan tinggi dari sebuah gambar, sobat akan lebih banyak belajar tentang gambar dan tag <img /> nanti pada tutorial . sebagai contoh:
<!DOCTYPE html>Hasil diatas:
<html>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVXxTqcmAH4_AJesBvUCfvKIDHvoU29pJY8U_DVMiWpkesR0H4svc7DW8-lRXcuEM38XzKzHzbKsJsW9J4FFONjBsh9-5lDvXTPKhzoEJjLgc_OMlOZmmkUHjbFVxLowtdfn-l55PQhfn/w90-h77-no/pustut1.png" width="108" height="135">
</body>
</html>
silahkan sobat coba sendiri.
Atribut Alt
Fungsi dari atribut alt adalah untuk menentukan sebuah teks alternatif yang akan dipergunakan pada saat sebuah elemen HTML tidak bisa ditampilkan di browser.
Sebagai contoh:
<!DOCTYPE html>hasil diatas:
<html>
<body>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibVXxTqcmAH4_AJesBvUCfvKIDHvoU29pJY8U_DVMiWpkesR0H4svc7DW8-lRXcuEM38XzKzHzbKsJsW9J4FFONjBsh9-5lDvXTPKhzoEJjLgc_OMlOZmmkUHjbFVxLowtdfn-l55PQhfn/w90-h77-no/pustut1.png" alt="pus-tut.blogspot.com" width="108" height="135">
</body>
</html>
Silahkan sobat coba sendiri.
Disarankan: Agar selalu menggunakan huruf kecil dalam menuliskan atribut, tapi pada standar HTML5 dalam menuliskan nama atribut tidak perlu menuliskan nama atribut dengan huruf kecil saja menuliskan nama atribut dengan huruf besapun boleh hanya saja W3C merekomendasikan penggunaan nama atribut dengan huruf kecil untuk HTML4 dan menuntut huruf kecil dalam jenis dokumen yang ketat seperti XHTML.
Catatan: Penggunaan nama atribut dengan huruf kecil merupakan yang paling umum karena menggunakan huruf kecil lebih mudah dalam proses pengetikan.
Disarankan: Selalu gunakan tanda kutip pada nilai atribut meskipun pada standar HTML5 tanda kutip tidak diperlukan untuk nilai atribut.
sebagai contoh nilai atribut yang tidak diberi tanda kutip:
<!DOCTYPE html>Hasil diatas:
<html>
<body>
<a href=http://www.pus-tut.blogspot.com>Ini link nya Pusat Tutorial</a>
</body>
</html>
Catatan: Penggunaan tanda kutip merupakan yang paling umum digunakan karena menghilangkan tanda kutip dapat menghasilkan sebuah kesalahan.
Ini link nya Pusat Tutorial
silahkan sobat coba sendiri.
Single atau double Quotes (kutip)
Penggunaan tanda kutip, gaya tanda kutip double memang merupakan yang paling umum digunakan namun gaya tanda kutip single pun dapat digunakan. Tetapi pada beberapa situasi pada saat nilai atribut itu sendiri mengandung tanda kutip double maka penggunaan tanda kutip single diperlukan.
sebagai contoh:
<title p='PusTut"blogspot"com'>
ataupun sebaliknya:
<title p="PusTut'blogspot'com">
Atribut HTML
Dibawah ini mrupakan daftar dari beberapa atribut HTML yang sering digunakan:
Gimana nih sobat sudah mengerti bukan tentang Pengenalan Atribut HTML? mudah-mudahan tutorial ini dapat dimengerti oleh sobat dan bermanfaat tentunya. Kalo gitu sekian untuk tutorial Pengenalan Atribut HTML, kita akan lanjutkan kembali tutorial HTML di tutorial berikutnya :)
0 Response to "Mengenal Atribut HTML"
Post a Comment