Hai semuanya!
Kali ini saya mau membagikan trik cara meletakkan gambar pada HTML. Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa suatu situs disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file htmlnya kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar yang diperlukan untuk meletakkan gambar pada halaman html.
Kali ini saya mau membagikan trik cara meletakkan gambar pada HTML. Gambar adalah salah satu elemen dasar pada halaman situs yang turut meningkatkan cita rasa suatu situs disamping nilai fungsionalitasnya. Penggunaan gambar pada halaman situs dapat berupa ilustrasi dari suatu tulisan, foto, elemen halaman, dan iklan. Cara yang termudah untuk meletakkan gambar ke suatu halaman html adalah dengan menaruh gambar yang bersangkutan ke dalam folder satu file dengan file htmlnya kemudian dipanggil melalui tag <img>. Yap, tag ini adalah bahan dasar yang diperlukan untuk meletakkan gambar pada halaman html.
Cara pengunaannya seperti ini, lihat kode dibawah ini.
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | alt="gambar mobil"/> |
Contoh:
Tag <img> berbeda penggunaannya dengan tag html lain, karena ia tidak menjepit suatu tulisan, melainkan menutup dirinya sendiri. Coba kalian perhatikan di akhir tag ia menutupnya sendiri dengan /> bukan? Lalu apa artinya atribut src dan alt?
Atribut src adalah atribut yang berisi info dimana lokasi gambar itu berada. Sedangkan atribut alt berguna untuk menampilkan tulisan yang keluar apabila browser yang digunakan tidak memperbolehkan tampilnya gambar. Src adalah kependekan dari Source (sumber) dan Alt adalah kependekan dari Alternative (alternatif teks).
Penempatan gambar terhadap teks juga dapat dimodifikasi melalui atribut align. Silahkan kalian coba kode berikut di papan tulis di bawah.
Teks sejajar dengan gambar
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | align="bottom"/> |
Teks ditengah-tengah gambar
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | align="middle"/> |
Teks diatas gambar
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | align="top"/> |
Gunakan align=”bottom” untuk membuat bagian bawah dari gambar rata dengan bagian bawah tulisan, dan gunakan align=”middle” untuk membuat gambar berada di tengah-tengah tulisan, namun apabila kalian menginginkan bagian atas gambar rata dengan bagian atas tulisan (rata atas) maka kalian dapat menggunakan align=”top”.
Pasti kalian juga akan bertanya apabila gambar tersebut tidak diantara tulisan melainkan pada bagian tersendiri dan tidak diapit oleh teks bagaimana cara membuatnya menjadi disebelah kiri atau kanan halaman? Gunakan align=”left” dan align=”right” untuk membuatnya rata kiri dan rata kanan. Namun apabila kalian ingin membuat gambar yang ditengahkan kalian harus menambahkan tag <center>dan </center>. Lihat kode dibawah untuk lebih jelasnya.
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | align="left" /> |
1 | <img src="https://image.ibb.co/fvF8Ev/CL.png" |
2 | align="right"/> |
1 | <center> |
2 | <img src="https://image.ibb.co/fvF8Ev/CL.png"/> |
3 | </center> |
Kalian juga bisa membuat suatu gambar sebagai background dari halaman html kalian. Caranya cukup mudah yaitu pada tag <body> kalian tambahkan atribut background. Lalu isi dengan nama file gambarnya.
1 | <body background="https://image.ibb.co/fvF8Ev/CL.png"> |
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Rekomendasi Link Upload Gambar HTTPS dari CATShares: www.imgbb.com
Sumber: www.klikbelajar.com
0 Comment:
Posting Komentar