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
<img src="gambar_mobil.jpg" alt="gambar mobil" />
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.
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.
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.
<body background="namafilegambarkalian.gif">
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Setelah membaca, kalian juga mencoba ya agar kalian tambah mengerti ingat Practice Makes Perfect! Juga jangan lupa untuk mengirimi kami hasil screenshot image gallery yang telah berhasil kalian buat :)
Cara pengunaannya seperti ini, lihat kode dibawah ini
<img src="gambar_mobil.jpg" alt="gambar mobil" />
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
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8Jmndw687EBS4KqLcHzi1j173LgA0tvuVnoduHPH88C3-TZK0UzaLC_aCpwqhvpbzAy3QJWR1mdRLPNMQA7gHPNStOYlV6f-Pu2pXNdISDrqqiGibUYJV3eY0l8k5kgzNZdLqcHg4rI/s400/YUI.jpg"
align="bottom" />
dengan gambar<br />
Teks ditengah-tengah
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QPzQhZ8zSV3c8wZcOD38-uAMunaPy-2hUwAgNw1Rez2WhvlUhJg4KwoVtZRnL8z5JJhES7GSUffyXIZRs9afRwqaMX0akiSuoTc7Cu0itvN2zrkyZl_jS9Oc-B8Monf5wsi4WXyoVLI/s320/189328_1590781133262_1347895662_31279064_405640_n.jpg"
align="middle" />
gambar<br />
Teks diatas
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg"
align="top" />
gambar
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz8Jmndw687EBS4KqLcHzi1j173LgA0tvuVnoduHPH88C3-TZK0UzaLC_aCpwqhvpbzAy3QJWR1mdRLPNMQA7gHPNStOYlV6f-Pu2pXNdISDrqqiGibUYJV3eY0l8k5kgzNZdLqcHg4rI/s400/YUI.jpg"
align="bottom" />
dengan gambar<br />
Teks ditengah-tengah
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0QPzQhZ8zSV3c8wZcOD38-uAMunaPy-2hUwAgNw1Rez2WhvlUhJg4KwoVtZRnL8z5JJhES7GSUffyXIZRs9afRwqaMX0akiSuoTc7Cu0itvN2zrkyZl_jS9Oc-B8Monf5wsi4WXyoVLI/s320/189328_1590781133262_1347895662_31279064_405640_n.jpg"
align="middle" />
gambar<br />
Teks diatas
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg"
align="top" />
gambar
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.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg"
align="left" /><br /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg"
align="right" /><br /><br />
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg" />
</center>
align="left" /><br /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg"
align="right" /><br /><br />
<center>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPlo3vF-6uND3u-4eiRn7rkgUUT-m4loE4Tcjh5tuz-Ji0ms9YSc4yxe4eGbpKr5eSh_2T39NeHfeE6HzWuaGvydym5x4p906m9-r7pSIcbzL1efU9Ia1tciUVZBmWsut2KZT3Z8hK4us/s320/28i6cy8.jpg" />
</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.
<body background="namafilegambarkalian.gif">
Supaya bagus gambar yang kalian punya sebaiknya berukuran minimal 800 X 600 piksel.
Setelah membaca, kalian juga mencoba ya agar kalian tambah mengerti ingat Practice Makes Perfect! Juga jangan lupa untuk mengirimi kami hasil screenshot image gallery yang telah berhasil kalian buat :)
Artikel Terkait:
0 Comments
