Ini dia yang kamu cari
Ada 50 artikel dalam topik HTML.
Tutorial Web Responsif: Pengenalan RWD dan Viewport
Bagaimana cara membuat web responsif? itulah pertanyaan yang cukup sering ditanyakan kepada saya. Pertanyaan ini membutuhkan jawaban yang cukup panjang, karena itu saya tidak bisa langsung menjawab secara detail melalui lisan maupun pesan instan, selain itu juga waktu yang tidak mendukung. Berangkat dari keterbatasan itu, akhirnya saya menerbitkan tulisan ini. Apakah itu RWD?RWD singkatan dari Responsive Web Design. Responsif artinya webnya dapat merespon atau menyesuaikan diri dengan perangkat yang digunakan. Misalnya kita membuka webnya melalui ponsel, maka secara otomatis tampilan webnya akan disesuaikan dengan ukuran layar ponselnya.
Cara Menggunakan Plug-in Data Tables untuk Membuat Tabel Dinamis
Data Tables merupakan sebuah plug-in jQuery untuk memanipulasi data dalam tabel HTML. Data Tables memungkinkan kita melakukan membuat tabel dengan fitur pencarian, membuat pagination, menampilkan data sebanyak yang kita mau, mengambil data dari ajax, dsb.
Menggunakan TinyMCE pada Proyek Web
Pada sebuah proyek yang saya kerjakan, terdapat fitur yang harus menggunakan teks editor untuk menginputkan nilainya. Karena deadline proyek ini begitu cepat. Saya tidak punya banyak waktu untuk membuat teks editor berbasis HTML. Karena itu, cara tercepat ialah menggunakan teks editor yang sudah ada, yaitu TinyMCE. Nah, pada kesempatan ini, saya akan berbagi cara menerapkan TinyMCE dalam Web.
Belajar HTML: Cara Validasi Form di HTML agar Websitemu Lebih Aman
Validasi data itu penting! Mengapa? Karena jika kita tidak melakukan validasi, user bisa sembarangan mengisi data dan akibatnya website kita menjadi error. Dampak terburuknya: Website kita bisa diambil alih atau di-hack. Ngeri kan. Karena itu.. Jangan percaya 100% dengan data yang diinputkan user. Bisa saja itu script jahat. Nah, biar terhindar dari kejadian ini.. kita disarankan melakukan validasi sebelum data itu dikirim ke server.
Tutorial HTML: Cara Membatasi Nilai Input Maksimum dan Minimum pada Form
Atribut min dan max merupakan atribut untuk membatasi nilai maksimum dan minimum yang boleh diinputkan pada form. Atribut ini biasanya digunakan pada inputan yang berkaitan dengan angka. Misalnya tidak boleh menginput angka negatif, angka lebih dari 10, tanggal kurang dari tahun 2000, dsb.
Mengatasi Peta (Google Map) yang tidak Ditampilkan di Modal
Ketika saya menggunakan modal untuk menampilkan peta (Google Maps), petanya tidak mau tampil. Entah mengapa? setelah ukuran layarnya di-resize, petanya bisa tampil. Mungkin karena div di dalam modal bersifat dinamis atau responsif. Peta kosong, hanya ada warna abu-abu. Solusi dari masalah ini saya temukan di Stackoverflow. MarcoK memberikan penjelasan jawaban atas masalah ini. Google Maps memang akan menampilkan area abu-abu (grey) kalau ditempatkan di elemen dinamis. Oleh karena itu, kita perlu memanggil fungsi “resize” ketika animasi modal sudah selesai. Bootstrap 3: $("#modal-peta").on(“shown.bs.modal”, function () { google.maps.event.trigger(peta, “resize”); });Bootstrap 2: $(’#modal-peta’).on(‘shown’, function () { google.maps.event.trigger(peta, “resize”); });#modal-peta adalah nama id dari elemen modal tempat peta tersebut ditampilkan dan variabel peta adalah variabel objek dari peta (Google Maps). Kode di atas, ditulis dalam fungsi initialize() atau persiapan peta, lihat tutorial sebelumnya. Referensi: http://stackoverflow.com/a/11743005
Tutorial Google Maps API: Membuat Marker untuk Menandai Lokasi
Marker sering digunakan untuk menandai sebuah lokasi. Biasanya sering digunakan dalam membuat aplikasi Geolocation. Pada kesempatan ini, kita akan belajar membuat marker di Google Maps dan melakukan beberapa modifikasi. Kamu bisa menggunakan contoh kode sebelumnya untuk uji coba.
Tutorial CSS: Membuat Style untuk Badge Notifikasi
Badge notifikasi sering kali kita temukan dalam website maupun aplikasi. Terkadang badge tersebut menggoda kita untuk mengelik link atau tombol notifikasi. Itulah fungsinya, agar user tau, di sana ada sesuatu yang baru. Badge biasanya dilengkapi dengan angka penghitung. Framework antarmuka semacam Bootstrap sudah menyediakan class sendiri untuk pembuatan badge. Namun, karena badge yang dihasilkan tidak sesuai seperti harapan, maka kita harus membuatnya sendiri. Kode CSS.badge-notif { position:relative; } .badge-notif[data-badge]:after { content:attr(data-badge); position:absolute; top:-10px; right:-10px; font-size:.7em; background:#e53935; color:white; width:18px; height:18px; text-align:center; line-height:18px; border-radius: 50%; }Pada kode CSS di atas, kita mengambil isi badge dari atribut data-badge. Untuk posisi badge dapat diatur dalam properti top dan right. Warna, ukuran, font, background dll. bisa diatur sendiri sesuai selera. Penggunaan di HTMLElemen yang ingin menggunakan badge yang dibuat tadi harus menambahkan class badge-notif dan sebuah atribut data-badge untuk konten badge-nya. Contoh: Pada Tombol <button class=“badge-notif” data-badge=“12”>Notifikasi</button>Pada Link <a href="#!" class=“badge-notif” data-badge=“22”>Pesan</a>DemoJS Bin on jsbin.com
Menulis Rumus Matematika di HTML dengan MathJax
Rumus matematika biasanya akan sering kita temui pada web pendidikan atau akademis. Contohnya seperti ini: Rumus matematika di HTML sebenarnya bisa kita tampilkan dengan gambar. Namun, tidak interaktif dan dinamis. Selain dengan Gambar, kita juga busa menampilkannya dengan MathML. MathML adalah sebuah bahasa markup yang khusus untuk menulis rumus matematika di HTML dan XML.