Menambah Gambar Di Html, Beserta Contoh
Gambar sangat penting sekali pada sebuah halaman web atau blog, Mengapa? alasannya yaitu gambar sanggup memperlihatkan suatu bentuk hiasan, klarifikasi dari bentuk sebuah goresan pena atau artikel pada web / blog.
Kali ini kita akan membahas bagaimana caranya memasukkan gambar pada halaman web dasar dengan fungsi kode-kode dari Html, pelajaran ini sangat baik bagi pemula yang ingin mulai berguru menciptakan sebuah halaman web.
Cara menambahkan gambar dengan instruksi html ini yang pastinya dengan memakai tag <img> dimana tag ini berfungsi sebagai definisi memperlihatkan "ini yaitu gambar". Namun intinya tag <img> saja tidak akan menghasilkan apa-apa jikalau tidak ditulis beserta atributnya.
Brikut ini yaitu atribut pendamping dari tag <img> yang biasa dipakai :
1. Src mendefinisikan dimana lokasi file disimpan (sumber file gambar) untuk ditampilkan
2. Alt memperlihatkan keterangan pada gambar yang ditampilkan
3. Width sebagai pengaturan lebar dari sebuah gambar yang akan ditampilkan
4. Height sebagai pengaturan tinggi dari sebuah gambar yang akan ditampilkan
5. Align sebagai pengaturan posisi perataan gambar (tengah=center, kiri=left, kanan=right).
6. Hspace mengatur letak gambar secara horizontal
7. Vspace mengatur letak gambar secara vertical
8. Border memperlihatkan garis pinggir / bingkai pada sebuah gambar
Sebuah gambar juga tidak sanggup ditampilkan jikalau gambar tersebut tidak mempunyai ekstensi, Ekstensi yang saya maksud yaitu gambar tersebut berupa jenis apa ( Jpeg, Png atau Gif ). artinya ketika temen-temen menciptakan sebuah gambar atau mengcopy sebuah gambar sebaiknya temen-temen buat dengan ekstensi tersebut. Contoh : gambar.jpg atau gambar.png (contoh penulisan ekstensinya).
Sekarang, Bagaimana Cara Memasukkan / Menambahkan Gambar Pada Halaman Web?
Oke kita akan pribadi praktekkan langkah demi langkah.
Pertama :
Temen-temen buat dulu struktur sebuah dokumen html nya pada text editor temen-temen dan simpan dengan nama index.html (atau dengan nama apa saja yang penting dengan ekstensi titik html ibarat rujukan index.html tadi.
Berikut rujukan script nya dan temen-temen boleh copy paste dan simpan ibarat keterangan diatas :
Kedua :
Temen-temen tentukan gambar apa yang akan temen-temen ingin tampilkan pada web temen-temen nantinya, sanggup gambar yang sudah ada pada komputer atau laptop temen-temen atau sanggup juga temen-temen download gambar yang berdasarkan temen-temen suka dari internet.
Sebagai rujukan saya sendiri sudah menyiapkan satu gambar dengan format Jpeg (Jpg) dan file tersebut harus di letakkan satu folder atau persis bersebelahan dengan dokumen html yang telah kita simpan tadi (saya dengan nama index.html) . Untuk terperinci nya saya berikan rujukan dengan gambar dibawah ini :
 |
| contoh gambar |
Pada rujukan gambar diatas ini saya menyimpan file dokumen html nya di drive D dengan nama folder yang saya buat (folder tutorial) "lihat tandah panah", gambar yang telah saya siapkan persis disebelah dokumen html nya. sekali lagi "lihat tanda panah".
Ketiga :
Setelah file dokumen dan file gambar nya sudah temen-temen siapkan kini dikala nya temen-temen memanggil gambar tersebut supaya sanggup di tampilkan pada halaman browser. Berikut caranya :
Silahkan temen-temen masukkan script <img> beserta atribut Src kedalam dokumen html temen-temen tadi, temen-temen sanggup juga copy paste script <img> nya dibawah ini .
Maka ketika dijalankan pada browser akhirnya akan terlihat ibarat dibawah ini :
 |
| Contoh gambar |
Artinya ketika temen-temen sudah hingga ke tahap ini tanpa eror, apa yang temen-temen lakukan sudah berhasil.
Jika temen-temen ingin menambahkan beberapa gambar lagi, silahkan temen-temen simpan file gambar nya sempurna satu folder atau bersebelahan pada folder penyimpanannya. cara nya sama ibarat yang sudah saya terangkan di atas tadi.
Untuk pengaturan gambar nya temen-temen sanggup copy dan pelajari script dibawah ini, silahkan temen-temen coba sendiri dan gonta ganti supaya temen-temen sanggup memahami.
Contoh penulisan masing-masing pengaturan gambar sebagai berikut :
1. <img src="nama file gambar" widht="100px" height="80px"> ini rujukan untuk penulisan pengaturan lebar dan tinggi gambar yang ditampilkan, script diatas dengan tinggi 80 pixel dan lebar 100 pixel, temen-temen sanggup mencoba dengan mengganti angka nya.
2. <img src="nama file gambar" alt=" Sebuah halaman website atau blog tanpa gambar akan sangat membosankan sekali bagi pengunj Menambah gambar di Html, Beserta contoh"> ini rujukan penulisan jikalau temen-temen ingin memperlihatkan keterang pada gambar.
3. <img src="nama file gambar" align="center"> ini rujukan penulisan perataan gambar ditengah (center) temen-temen sanggup juga mengganti dengan left = kiri dan right=kanan.
4. <img src="nama file gambar" Vspace"top"> ini rujukan penulisan tata letak gambar (atas) jikalau temen-temen ingin dibawah ganti dengan "bottom" . Untuk Hspace untuk tata letak kanan kiri ( left dan right).
5. <img src="nama file gambar" border="5px"> ini untuk memperlihatkan garis atau bingkai pada gambar, angka "5px" sanggup temen-temen ganti sesuai impian temen-temen.
Bgaimana jikalau satu gambar ingin diatur sesuai yang saya mau?
Nah temen-temen sanggup menggabungkan beberapa atribut tersebut kedalam sebuah tag <img>, sebagai rujukan :
<img src="nama file gambar" alt=" Sebuah halaman website atau blog tanpa gambar akan sangat membosankan sekali bagi pengunj Menambah gambar di Html, Beserta contoh" align="center" widht="300px" height="150px">
Penulisan tag img diatas merupakan adonan dari beberapa atribut kedalam tag img, untuk lebih terperinci dan lebih memahami silahkan temen-temen praktekkan dan coba gonta-ganti sendiri. Selamat Belajar.
Semoga artikel ini bermanfaat dan berkhasiat buat temen-temen dimanapun berada dalam mengawali mempelajari dasar pemograman web.