Belajar HTML & CSS: Menambahkan gambar, Mengubah Background, Tag Iframe, dan Animasi

Menambahkan gambar atau background pada website memberikan kesan yang menarik dan informasi yang disampaikan lebih informatif. Untuk menambahkannya pun caranya sederhana. Nah, bagi kamu yang ingin belajar hal tersebut menggunakan html dan css, maka saya akan membagikan tutorialnya.Yuk, simak langkah-langkahnya dibawah ini:

Pertama, kamu harus memindahkan gambar yang kamu inginkan di folder project yang sudah kamu buat sebelumnya. Tujuannya: agar ketika di img src lebih mudah, contoh: Saya mengganti nama file dengan sip.jpg dan untuk background saya menggantinya dengan bcg.jpg.

Setelah itu, saya akan mempercantik tampilan pada css dengan nama file style.css. Maka akan menampilkan hasil berikut:

Kedua, untuk menambahkan background, masukkan codingan berikut pada file style.css (kamu bisa mengatur tampilannya) :

dan ini hasilnya :

Dan dibawah ini adalah css lainnya:

Ketiga, menambahkan Tag <iframe>. Nah, karena saya akan memasukkan link video youtube, maka caranya cukup mudah yaitu dengan pilih video yang akan kamu tampilkan. Lalu klik share, dan pilih embed<>, kemudian salin codingannya dan pindahkan ke file html:

untuk hasilnya:

Keempat, membuat animasi. Nah, untuk membuat animasi langkah yang harus diperhatikan adalah menambahkan fungsi <span> pada bagian yang ingin kamu tambahkan. Untuk codingan htmlnya paling atas ya, hehe. Disini saya akan menambahkan beberapa kata untuk dijadikan animasi, dan menjadikan tulisan "Welcome to My Blog" dengan animasi bounce (<h1 class="animated infinite bounce"> Welcome to My Blog</h1>) dan  <h2>Eli Krisnawati</h2><span class="change_content"></span>.
Lalu tambahkan @keyframes pada css. 

untuk kata (Bibliophile, Logophile, Autophile) akan bergantian. Oh ya, kamu juga bisa mengatur berapa lama animasi berjalannya ya.

Dan ini hasilnya :

Ok, sekian artikel tentang belajar html dan css kali ini ya. Semoga artikel ini bermanfaat.