Tutorial Attribute title Attribute title Digunakan untuk menentukan sebagai title atau informasi tambahan pada sebuah element yang sudah ditentukan. Contoh Attribute title < a href = "#" title = "Blog Tutorial" > TrikSonic Blog </ a > < p title = "Blog Tutorial" > TrikSonic Blog </ p > < button title = "ini adalah element button" > button </ button > <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <a href="#" title="Blog Tutorial">TrikSonic Blog</a> <p title="Blog Tutorial">TrikSonic Blog</p> <button title="ini adalah element button">button</button> </body> </html> Uji coba Attribute Value Attribute Value Deskripsi title Teks Menampilkan teks berupa tooltip saat ...

Baca selengkapnya

Tutorial Attribute tabindex Attribute tabindex digunakan untuk menentukan urutan tab pada element yang telah ditentukan, dan penggunaanya menggunakan tombol Tab pada keyboard. Contoh Attribute tabindex < a href = "#" tabindex = "1" > tabindex 1 </ a > < br > < a href = "#" tabindex = "6" > tabindex 6 </ a > < br > < a href = "#" tabindex = "4" > tabindex 4 </ a > < br > < a href = "#" tabindex = "5" > tabindex 5 </ a > < br > < a href = "#" tabindex = "3" > tabindex 3 </ a > < br > < a href = "#" tabindex = "2" > tabindex 2 </ a > <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <a href="#" tabindex="1...

Baca selengkapnya

Tutorial Attribute tabindex Attribute style digunakan untuk menentukan gaya CSS inline pada element. Contoh Attribute style <div style="height:100px; background:cyan;"> Element div dengan attribute style </div> <p style="color:blue;"> Element p dengan attribute style </p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <div style="height:100px; background:cyan;"> Element div dengan attribute style </div> <p style="color:blue;"> Element p dengan attribute style </p> </body> </html> Uji coba Attribute Value Attribute Value Deskripsi style style_definitions Menentukan urutan Tab ketika Tab keybord ditekan (posisi default pada angka 1) Browser Support : Attribute Chrome Safari Firefox Opera IE / Edge style Ya Ya Ya Ya Ya

Baca selengkapnya

Tutorial Attribute spellcheck Attribute spellcheck digunakan untuk menentukan apakah teks pada element perlu di cek tata bahasanya atau tidak. Didalam Tampilan browser jika attribute ini digunakan biasanya teks yang dianggap salah, akan diberi tanda garis merah bergelombang atau sejenisnya. Attribute Value Attribute Value Deskripsi spellcheck true dan false menentukan teks perlu diperiksa atau tidak perlu diperiksa tata bahasanya Contoh Attribute spellcheck <textarea spellcheck="true"> Blogger.com - Createeeee a unique and beautiful blog. It's easy and free. </textarea> <textarea spellcheck="false"> Blogger.com - Createeeee a unique and beautiful blog. It's easy and free. </textarea> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <textarea spellcheck="true"> Blogger.com - Createeeee a unique an...

Baca selengkapnya

Tutorial Attribute lang Attribute lang Digunakan untuk menentukan bahasa yang digunakan pada sebuah element Attribute Value Attribute Value Deskripsi lang Kode Bahasa Menentukan jenis bahasa yang digunakan selengkapanya mengenai kode bahasa HTML HTML Language Code Contoh Attribute lang <article> <h2>Surah Al- Fatihah</h2> <p lang="ar" dir="rtl">بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ</p> <p>Dengan nama Allah yang Maha Pengasih lagi Maha Penyayang</p> <p lang="ar" dir="rtl">اَالْحَمْدُ لِلّٰهِ رَبِّ الْعٰلَمِيْنَ</p> <p>Segala puji bagi Allah, Tuhan seru sekalian alam</p> <p lang="ar" dir="rtl">اَلرَّحْمٰنِ الرَّحِيْمِ</p> <p>Yang Maha Pengasih lagi Maha Penyayang</p> <p lang="ar" dir="rtl">مٰلِكِ يَوْمِ الدِّيْنِ</p> <p>Yang Menguasai hari pembalasan</p> <p...

Baca selengkapnya

Tutorial Attribute id Attribute id digunakan untuk menentukan sebuah ID atau identitas unik pada sebuah element. Attribute id dapat disisipakan CSS sebagai pemanis tampilan. Attribute id dalam penggunaan javascript lebih dianjurkan dari pada Attribute class Attribute Value Attribute Value Deskripsi id ID_unik Menentukan nama ID unik pada element HTML Nama ID harus berbeda dengan nama ID lainnya Nama ID tidak boleh ada space Besar kecil karakter sangat mempengaruhi Contoh Attribute id <style> #div-area { padding: 15px; background: beige; border: 1px solid silver; } </style> <p id="div-area"> TrikSonic </p> <button onclick="demo();">Klik Button ini</button> <script> function demo() { var elem = document.getElementById("div-area"); elem.innerHTML = "TUTORIAL BLOG"; alert("Javascript"); } </script> <!DOCTYPE html> <html lang="id...

Baca selengkapnya

Attribute hidden Digunakan untuk menentukan untuk menyembunyikan sebuah element. Attribute Value Nilai atau value attribute ini adalah hidden Menentukan element yang disertai attribute ini akan tersembunyi atau mendapat gaya css dispay:none; Attribute ini bersifat boolean , yang artinya attribute ini bisa ditulis nilai valuenya maupun tidak Contoh Attribute hidden <article> <h2>Judul Artikel</h2> <p hidden="hidden">Teks ini tidak terlihat</p> <p>Teks ini dapat dilihat</p> <p hidden>Teks ini tidak terlihat</p> </article> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> article { padding: 15px; background: #ffcece; border: 2px solid #f37f7f; border-radius: 5px; } </style> </head> <body> <article> <h2>Judul Artikel</h2> <p hidden="hidden"...

Baca selengkapnya

HTML draggable Attribute - HTML draggable Attribute Digunakan untuk menentukan apakah element dapat dipindah, digeser atau tidak. Dalam Penggunaanya attribut draggable menggunakan fungsi dari javascript ataupun jquery. Attribute Value: Attribute Value Deskripsi draggable true false auto Menentukan element dapat di drag atau di pindahkan Menentukan element tidak dapat di drag atau di pindahkan Menggunakan system dari browser Contoh penerapan HTML draggable Attribute <div class="nama-class" draggable="true"> ...isi kontent ... </div Browser Support: Nilai pada tabel adalah minimal versi browser support untuk attribute draggable HTML Attribute Chrome Safari Firefox Opera IE / Edge draggable 4.0 6.0 3.5 12.0 9.0

Baca selengkapnya

HTML dir Attribute - HTML dir Attribute Digunakan untuk menentukan arah teks konten pada sebuah element. Misal kalau penulisan dalam bahasa indonesia, inggris dari kiri ke kanan , dan bahasa arab dari kanan ke kiri Attribute Value: Attribute Value Deskripsi dir ltr rtl auto left to right menentukan arah teks dari kiri kekanan right to left menentukan arah teks dari kanan ke kiri Membiarkan browser yang menentukan arah.  Contoh penerapan HTML dir Attribute <p >bismillahirrahmanirrahim</p> <p lang="ar" dir="rtl"> بِسْــــــــــــــــــمِ اللهِ الرَّحْمَنِ الرَّحِيْمِ </p> Browser Support: HTML Attribute Chrome Safari Firefox Opera IE dir Ya Ya Ya Ya Ya

Baca selengkapnya

HTML data-* Attribute - HTML data-* Attribute Digunakan untuk menentukan data tambahan pada sebuah element baik itu data berupa teks ataupun image, pengambilan data pada element data-* Attribute, bisa melalui fungsi CSS maupun java script . Dalam Penggunaan HTML data-* Attribute tidak dibolehkan menggunakan huruf kapital dan ada jarak spasi setelah kata data- . Contoh penulisan yang benar : data-nama , data-kelas , data-umur dan seterusnya. Attribute Value: Attribute Value Deskripsi data-* data value Menentukan nama data setelah kata data- Contoh penerapan HTML data-* Attribute <ol> <li data-nama="data"> isi teks </li> <li data-jabatan="data"> isi teks </li> </ol> CSS yang diperlukan dari contoh html diatas contoh css bersifat tidak mutlak /* css [data-nama] */ li[data-nama]:before { content: "Nama :"; color : red; font-family:arial; } /* css [data-jabata...

Baca selengkapnya

HTML contextmenu Attribute - HTML contextmenu Attribute digunakan untuk menentukan menu tambahan ketika pengunjung klik pada element dimaksud. Misalnya menu tambahan pada saat pengunjung suatu blog klik kanan pada element yang sudah ditentukan. Attribute Value: Attribute Value Deskripsi contextmenu menu_id Element  contextmenu Mengambil data dari id element <menu> Contoh penerapan HTML contextmenu Attribute <div id="mymenucontainer" contextmenu="menuklik-kanan"> <menu type="context" id="menuklik-kanan"> <menuitem label="Background Cyan" onclick="bgcyan()"></menuitem> <menuitem label="Background red" onclick="bgred()"></menuitem> <menuitem label="Refresh Halaman" onclick="window.location.reload();"></menuitem> <menuitem label="Bagikan ke Twitter" onclick="wi...

Baca selengkapnya

HTML contenteditable Attribute - HTML contenteditable Attribute Digunakan untuk menentukan apakah teks pada element dapat diedit atau tidak. Attribute Value: Attribute Value Deskripsi contenteditable true false Menentukan Konten dapat di edit Menentukan Konten tidak dapat di edit Contoh penerapan HTML contenteditable Attribute <div class="class" contenteditable="true"> ... isi konten ... </div> <p contenteditable="true"> ... isi konten ... </p> Browser Support: HTML Attribute Chrome Safari Firefox Opera IE contenteditable 4.0 3.1 3.5 10.1 6.0

Baca selengkapnya

Attribute class Digunakan untuk menentukan nama class pada sebuah element. Penggunaan Attribute class di perbolehkan menggunakan satu class. Attribute class akan menjadi patokan pemakaian stylesheet serta javascript Attribute Value Attribute Value Deskripsi class Nama_kelas Menentukan nama class pada element HTML Contoh Attribute class <div class="demo">Kontent</div> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> <style> .demo { padding: 15px; background: #ffcece; border: 2px solid #f37f7f; border-radius: 5px; } </style> </head> <body> <div class="demo">Konten</div> </body> </html> Uji coba Browser Support Attribute Chrome Safari Firefox Opera IE / Edge class Ya Ya Ya Ya Ya

Baca selengkapnya

Attribute accesskey digunakan untuk menentukan tombol pintasan pada keybord dan fokus pada element yang ditentukan, untuk penggunaan tombol pintasan, setiap browser memiliki tombol pintasan yang tidak sama Contoh Attribute accesskey <a href="//triksonic.blogspot.com/" accesskey="t">trikSonic</a> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Demo Triksonic</title> </head> <body> <a href="//triksonic.blogspot.com/" accesskey="t">trikSonic</a> <p> Lihat Kembali Daftar Tombol pada masing masing browser. </p> </body> </html> Uji coba Daftar tombol Pintasan pada masing masing browser Browser Windows Linux Mac Chrome Alt + accesskey Alt + accesskey Ctrl + Alt + accesskey Firefox Alt + Shift + accesskey Alt + Shift + accesskey Ctrl + Alt + accesskey Internet Explorer Alt + accesskey tidak diketahui Safari Alt ...

Baca selengkapnya