Pada artikel ini penulisan akan membagikan sebuah 10 kumpulan kode HTML sederhana selamat tahun baru 2023 nantinya. Penulis sengaja membuat ini agar bisa menambah proses belajar kamu juga dan untuk mempelajari bidang web programming. Hal ini juga penulis akan memberikan sedikit tambahan bahasa pemrograman javascript. Ouh ya sebenarnya ini hanya menampilkan sebuah teks selamat tahun baru 2023 secara sederhana saja, alasan kita akan menggunakan javascript agar lebih hidup. Jadi, mari kita mulai tutorial nya langsung!
1. Efek Animasi
Contoh pertama adalah menggunakan tag div dan p di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek animasi menggunakan JavaScript:
See the Pen Kode 1 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
2. Efek Transisi
Contoh kedua adalah menggunakan tag h1 dan h2 di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek transisi menggunakan JavaScript:
See the Pen Kode 2 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
3. Efek Rotasi
Contoh ketiga adalah menggunakan tag div di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek rotasi menggunakan JavaScript:
See the Pen Kode 3 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
4. Efek Zoom
Contoh keempat adalah menggunakan tag div di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek zoom menggunakan JavaScript:
See the Pen Kode 4 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
5. Efek Text Shadow
Contoh keempat adalah menggunakan tag div di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek text shadow menggunakan JavaScript:
See the Pen Kode 5 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
6. Efek Geser
Contoh keenam adalah menggunakan tag div di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek geser menggunakan JavaScript:
See the Pen Kode 6 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
7. Efek Penyempitan
Contoh ketujuh adalah menggunakan tag div di HTML untuk menampilkan ucapan tahun baru 2023, serta menambahkan efek penyempitan menggunakan JavaScript:
See the Pen Kode 7 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
8. Efek Pergeseran
Contoh kedelapan hampir sama pada contoh no 6, namun ini menggunakan translate pada javascript :
See the Pen Kode 8 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
9. Button Click
Contoh kesembilan adalah menggunakan tag div dan button di HTML untuk menampilkan tombol yang dapat menampilkan ucapan tahun baru 2023 ketika diklik, serta menambahkan efek muncul menggunakan JavaScript:
See the Pen Kode 9 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
10. Form Input
Contoh kesepuluh adalah menggunakan tag div dan input di HTML untuk menampilkan form yang dapat menampilkan ucapan tahun baru 2023 setelah nama yang diisikan oleh pengguna diklik tombol "Kirim":
See the Pen Kode 10 by Galih Anggoro Prasetya (@GalihAp76) on CodePen.
Penutup
Nah, itulah 10 kumpulan kode HTML sederhana yang di mana kamu bisa kembangkan lagi kodenya. Sekian dari saya bila ada kekurangan atau kesalahpahaman, saya mohon maaf. Semoga bermanfaat!
0 Komentar