HTML5 memiliki banyak sekali kelebihan yang dapat kita gunakan untuk mempersingkat ruang, memperkuat komunikasi digital, menghemat quota dan mempercantik tampilan web. Jadi saya mengajak kalian bermain main dengan:
Dengan memanfaatkan image library kode yang tersimpan di server online, kita bisa membuat chart atau grafik keren, lho. Contoh adalah chart yang sering dipergunakan oleh Google, chart tersebut tidak memerlukan kita membuat gambar melainkan HTML!, contoh kode tiruannya yang saya tampilkan dibawah:
Silahkan sentuh bagian bagian daripada chart diatas untuk melihat animasinya. Kalau di lihat dari chat diatas adalah prosentasi aktual kehidupan dan rutinitas utama saya, saya memang bekerja rata rata 11 jam/hari. Dan waktu tidur saya rata rata hanya 5 jam/hari.
3. MEMBUAT GAMBAR SLIDING
Kode berikut adalah trik membuat beberapa gambar di tampilkan sliding melalui HTML atau halaman web. Cobalah tekan dan geser tombol warna biru ke kiri dan ke kanan (menggunakan mouse) untuk menampilkan gambar Adelina dan Anissa secara bergantian (pada layar hape mungkin kalian harus mengetuk ngetuk badan gambar berkali kali baru ada efeknya):
 |
| perkasanya HTML5 |
1. SEMBUNYIKAN GAMBAR
Ketimbang mengutak atik kode angular untuk menghasilkan tombol reaksi dan menggunakan JavaScript, untuk menghasilkan tombol action dan reaksi yang lebih ringan lebih baik kita memanfaatkannya contoh kode dibawah:<details> <summary>KLIK GAMBAR SAYA</summary> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiaOQJ4DYgOWZVA-6IPtGhi2wnlRb2AOOSWgiEtlO694JGIB_m78K68JqEPE_kjE20PcFtybHk8UAknR1hboLoxzr_J7OtobyHCRknltNNmBttECw-Ancnoeoojl_ThaifHmbTxCYLrVHm/s1600/pngtree-hand-painted-cartoon-glasses-girl-avatar-quiet-cute-elegant-care-image_1096709.jpg'/></details>Pada template blogger, kode ini dapat dimasukan terlebih dahulu ke dalam opsi HTML (bukan compose) hasilnya akan tampak sebagai berikut dengan mengklik tombol instruksi di bawah:
KLIK GAMBAR SAYA
Contoh diatas adalah sebuah penerapan yang paling sederhana dari kekuatan HTML5 apabila dimanfaatkan dengan maksimal pada halaman web.
2. MEMBUAT CHART AUTO (TANPA PERLU MENGGAMBAR)Dengan memanfaatkan image library kode yang tersimpan di server online, kita bisa membuat chart atau grafik keren, lho. Contoh adalah chart yang sering dipergunakan oleh Google, chart tersebut tidak memerlukan kita membuat gambar melainkan HTML!, contoh kode tiruannya yang saya tampilkan dibawah:
Rutinitas Saya
Silahkan sentuh bagian bagian daripada chart diatas untuk melihat animasinya. Kalau di lihat dari chat diatas adalah prosentasi aktual kehidupan dan rutinitas utama saya, saya memang bekerja rata rata 11 jam/hari. Dan waktu tidur saya rata rata hanya 5 jam/hari.
3. MEMBUAT GAMBAR SLIDING
Kode berikut adalah trik membuat beberapa gambar di tampilkan sliding melalui HTML atau halaman web. Cobalah tekan dan geser tombol warna biru ke kiri dan ke kanan (menggunakan mouse) untuk menampilkan gambar Adelina dan Anissa secara bergantian (pada layar hape mungkin kalian harus mengetuk ngetuk badan gambar berkali kali baru ada efeknya):
Membandingkan dua gambar
keren :)
BalasHapusSebelum dunia template AMP HTML melanda, lumayan lama mamang yang nubi ini teh make template valid HTML 5, kedahsyatannya makjleb banget.
BalasHapusbaik Template HTML maupun yang HTML mobile klasik, zaman now sama sama menggunakan HTML5.
HapusHTML itu bahasa bakunya Web, karena blogger berbasis web maka ia kudu menggunakan HTML5, begitu juga wordpress walaupun ia di bangun dengan basis inti PHP...:)
Intinya mau AMP atau non-AMP sama sama menggunakan bahasa HTML. Dan HTML5 adalah versi terbarunya.
BalasHapusUmumnya templat dengan layout versi ke-3 sudah valid HTML5. Kecuali templat lama dan klassik, mungkin trik diatas tidak sepenuhnya dapat diterapkan...
Blog saya sudah menerapkan kode html5, hasilnya memang lebih menarik
BalasHapus