Jago Belajar html : Memasukkan File Gambar

Sebuah situs tanpa adanya gambar sama saja hidup tanpa cinta bagai taman tak berbunga, nggak ada kesan-kesannya, nah kalo sebelumnya kamu sudah belajar mengenai heading, link, dan list html, sekarang kamu akan belajar cara memasukkan file gambar ke dalam sebuah file html dan juga kamu akan belajar mengenai atribut-atributnya 

Cara Memasukkan file gambar html

Untuk memasukkan file gambar ke dalam html caranya mudah sekali kamu hanya perlu menambahkan tag berikut 

<img src="namagambar" >

Sebelumnya pastikan file gambar yang kamu miliki 1 folder dengan file html yang kamu buat dan perlu kamu ketahui file yang dapat di masukkan ke dalam html adalah jpg, png dan gif. Setelah itu pastikan kamu memasukkan nama dan jenis file gambar dengan benar. Ohiya untuk tag img kamu tidak perlu menutupnya dengan</img>

Gambar dan file html di dalam 1 folder

Perbedaan gambar yang terdapat di komputer dan tidak

Kamu juga bisa menggunakan gambar yang ada di internet tanpa harus mendownload gambar tersebut, caranya mudah sekali kamu hanya perlu mengcopy link gambar tersebut lalu di tempatkan di <img src="urlgambar" >  tapi gambar hanya akan muncul jika kamu terhubung ke internet

Image di Folder berbeda

Sebelumnya saya menyebutkan bahwa file gambar harus 1 folder dengan file html tetapi jika kamu ingin memisahkan gambar dan file html menjadi sub folder kamu bisa menggunakan cara berikut.

Mengatur posisi gambar

Untuk mengatur posisi gambar pada html kamu bisa menggunakan tag <center></center> untuk posisi di tengah atau menggunakan align left, center, dan right untuk mengatur posisi kiri, tengah, dan kanan, sedangkan untuk penggunaan style kamu bisa menggunakan float:left atau right untuk posisi gambar di kiri atau kanan

Gambar berikut akan menjelaskan cara penggunaan atribut align dan atribut style untuk mengatur posisi gambar pada html


Mengatur ukuran gambar

Jika gambar yang kamu pilih terlalu besar atau terlalu kecil kamu bisa mengubah ukurannya sesuai keinginanmu dengan menggunakan atribut width dan height atau menggunakan atribut style

Menambahkan border

Dalam html kita dapat memberikan bingkai atau border terhadap sebuah file gambar dengan menggunakan atribut border, caranya seperti berikut <img src="gambar.jpg" border="1px"> selain menggunakan atribut border kita juga bisa menggunakan atribut style atau inline css, caranya seperti gambar dibawah ini

Kegunaan atribut alt

Terdapat atribut yang dikhususkan untuk gambar yaitu atribut alt yang kegunaannya adalah untuk menampilkan teks jika gambar tidak muncul atau gagal dimunculkan, selain memiliki kegunaan untuk menampilkan teks pada gambar yang tidak muncul, atribut alt ini memiliki kemampuan untuk meningkatkan Search Engine Optimization(SEO) pada sebuah situs.

Apa itu SEO ? 

SEO adalah sebuah kegiatan yang dilakukan untuk meningkatkan peringkat sebuah situs muncul di mesin pencari seperti google dan bing.

Pada pembelajaran html selanjutnya kamu akan belajar cara menggunakan tag link html yang digunakan untuk berpindah halaman situs