MEMBUAT ANIMASI TAHAP DASAR YANG MENCAKUP HTML, CSS, DAN JAVASCRIPT



Dalam materi ini saya akan kasih tahu bagaimana cara membuat animasi dasar dalam script HTML dengan CSS dan juga JavaScript. Namun sebelum pembahasan lebih lanjut saya akan menjelaskan apasih yang di maksud HTML, CSS, dan JavaScript ??


1 1.  HTML
HTML merupakan singkatan dari HyperText Markup Language (HTML) adalah bahasa skrip yang di rancang untuk membentuk halaman web. Awalnya, hanya HTML yang digunakan untuk membuat halaman web. Namun dalam perkembangan selanjutnya, aplikasi web dibedakan menjadi tiga lapisan, yaitu lapisan konten, lapisan presentasi, dan lapisan perilaku.

   2.  CSS
CSS merupakan singkatan dari Cascading Style Sheet, adalah kode yang ditujukan untuk mengatur tampilan halaman web. Mulai dari font text, colour-text, posisi, ukuran size, dan Background. 

   3.  JavaScript
JavaScript adalah bahasa skrip yang biasa di letakkan bersama kode HTML untuk menentukan suatu aksi.

   4.  Tahapan persiapan untuk mencoba membuat animasi     dasar

     Agar kamu bias merasakan efek penerapan ketiga lapisan yang telah di bahas, kamu memerlukan beberapa yang harus di persiapkan. Yaitu, membuat folder contoh dengan nama Folder Belajar di D:\ (atau bebas mau dimana saja yang penting inget menaruh filenya). Kemudian aplikasi editor dan browser untuk menjalankan skrip yang telah kamu buat.

OKE…kita Mulai..!!
Silahkan ikuti skrip di bawah ini



di  Kode JavaScript terletak di antara pasangan tag

<script type="text/javascript">

Dan

</script>

Kode tersebut dimaksudkan untuk membuat mobil bergerak ke kanan ketika mobil diklik.

Oke kita lanjut untuk CSS nya..


Kode CSS terletak di antara pasangan tag

<style type="text/css">

Dan

</style>

Kemudian kita buat HTML nya..




Setelah semua sudah selesai jangan lupa untuk di save ( jangan di hapus ).
Lalu buka browser kamu,  ketik pada kolom pencarian dimana kamu menyimpan file yang telah kamu buat tadi.





Jika sudah berhasil maka akan tampil seperti di atas ini, dan kemudian langsung eksekusi guys...
Selamat Mencoba semoga berhasil... 👍


#Animasi #CSS #HTML #JavaScript #PHP #Postgree #Query 


  

Komentar