Pada awal pengembangannya, HTML hanya digunakan untuk untuk menampilkan teks sehingga membuat tampilan dari web telihat membosankan dan tidak menarik untuk dibaca. Namun, hal tersebut tidaklah lama ketika kemampuan baru pada laman web untuk menambahkan gambar telah tersedia untuk digunakan oleh para user. Berikut ini adalah cara menambahkan gambar pada laman web.
Penambahan gambar pada sebuah laman web:
Tag "img" digunakan untuk menambahkan gambar pada laman web. Tag "img" adalah sebuah tag kosong, dimana tag ini baru bisa digunakan jika didalamnya terdapat atribut dan juga tag ini tidak memiliki closing tag.
Sintak:
<img src="url" alt="some_text">
Atribut:
satu, src: atribut ini digunakan untuk penentuan alamat sumber gambar atau image. Setiap gambar memiliki satu laman sumber atribut yang akan memberitahukan browser dimana dapat menemukan lokasi dari gambar tersebut untuk ditampilkan pada laman web. URL dari image menyediakan titik penentuan lokasi dimana gambar tersebut disimpan.
dua, alt: jika gambar yang ingin ditampilkan tidak ditemukan maka atribut alt akan mengeksekusi desripsi alternatif sebagai pengganti dari gambar yang tidak dapat ditampilkan tersebut. Nilai dari atribut alt adalah berupa teks yang didefinisikan oleh user.
Contoh:
Output:
Pengaturan lebar dan panjang dari gambar atau image: lebar dan panjang dari atribut digunakan untuk menyesuaikan ukuran dari gambar terhadap laman web. Nilai atribut secara default dinyatakan dalam ukuran pixel.
Contoh:
Output:
Penambahan gambar animasi atau GIF: Gambar animasi dinyatakan dalam format atau ekstensi file .gif dan dapat ditambahkan menggunakan tag "img" ke laman html.
Output:
Penambahan judul pada gambar: Bersamaan dengan gambar yang ditampilkan, judul atau title juga dapat ditambahkan pada gambar untuk menyediakan informasi lebih lanjut yang berhubungan dengan gambar yang telah ditambahkan pada laman web. Untuk penambahan judul, maka atribut title harus digunakan pada tag img.
Contoh:
Output:
Mengatur garis pembatas pada gambar: Secara default, setiap gambar memiliki garis pembatas yang mengelilinginya. Dengan menggunakan atribut border, ketebalan dari garis batas gambar dapat diubah sesuai dengan keinginan. Jika nilai ketebalan dari gambar adalah 0 maka gambar tidak memiliki garis pembatas disekitarnya.
Contoh:
Output:
Mengatur posisi gambar: Secara default (otomatis), posisi dari gambar berada disisi kiri dari laman web, tetapi posisi tersebut dapat diubah ke arah tengah ataupun kanan dengan menggunakan atribut align.
Output:
Penambahan gambar sebagai alamat link: Gambar yang ditambahkan pada alamat web dapat juga berguna sebagai URL yang menuju ke alamat lain. Hal ini dapat dilakukan dengan menggunakan tag "image" di dalam tag "a".
Output:
Setelah gambar tujuh diklik maka laman web akan menuju ke alamat link seperti pada gambar 7.
Menggunakan gambar sebagai backround dari laman web: gambar dapat juga dipergunakan sebagai background dalam laman web.
Contoh:
Output:
Browser yang mendukung penggunaan gambar pada laman web:
satu, Google Chrome.
dua, Internet Explorer.
tiga, Firefox.
empat, Opera.
lima, Safari.
Penambahan gambar pada sebuah laman web:
Tag "img" digunakan untuk menambahkan gambar pada laman web. Tag "img" adalah sebuah tag kosong, dimana tag ini baru bisa digunakan jika didalamnya terdapat atribut dan juga tag ini tidak memiliki closing tag.
Sintak:
<img src="url" alt="some_text">
Atribut:
satu, src: atribut ini digunakan untuk penentuan alamat sumber gambar atau image. Setiap gambar memiliki satu laman sumber atribut yang akan memberitahukan browser dimana dapat menemukan lokasi dari gambar tersebut untuk ditampilkan pada laman web. URL dari image menyediakan titik penentuan lokasi dimana gambar tersebut disimpan.
dua, alt: jika gambar yang ingin ditampilkan tidak ditemukan maka atribut alt akan mengeksekusi desripsi alternatif sebagai pengganti dari gambar yang tidak dapat ditampilkan tersebut. Nilai dari atribut alt adalah berupa teks yang didefinisikan oleh user.
Contoh:
Output:
 |
| Gambar 1 tag img |
Pengaturan lebar dan panjang dari gambar atau image: lebar dan panjang dari atribut digunakan untuk menyesuaikan ukuran dari gambar terhadap laman web. Nilai atribut secara default dinyatakan dalam ukuran pixel.
Contoh:
Output:
 |
| Gambar 2 tag img dengan penyesuaian ukuran gambar |
Penambahan gambar animasi atau GIF: Gambar animasi dinyatakan dalam format atau ekstensi file .gif dan dapat ditambahkan menggunakan tag "img" ke laman html.
Output:
Penambahan judul pada gambar: Bersamaan dengan gambar yang ditampilkan, judul atau title juga dapat ditambahkan pada gambar untuk menyediakan informasi lebih lanjut yang berhubungan dengan gambar yang telah ditambahkan pada laman web. Untuk penambahan judul, maka atribut title harus digunakan pada tag img.
Contoh:
Output:
 |
| Gambar 3 title pada img |
Mengatur garis pembatas pada gambar: Secara default, setiap gambar memiliki garis pembatas yang mengelilinginya. Dengan menggunakan atribut border, ketebalan dari garis batas gambar dapat diubah sesuai dengan keinginan. Jika nilai ketebalan dari gambar adalah 0 maka gambar tidak memiliki garis pembatas disekitarnya.
Contoh:
Output:
 |
| Gambar 4 setting border pada img html |
Mengatur posisi gambar: Secara default (otomatis), posisi dari gambar berada disisi kiri dari laman web, tetapi posisi tersebut dapat diubah ke arah tengah ataupun kanan dengan menggunakan atribut align.
Output:
 |
| Gambar 5 mengatur posisi atau tata letak gambar pada laman html |
Penambahan gambar sebagai alamat link: Gambar yang ditambahkan pada alamat web dapat juga berguna sebagai URL yang menuju ke alamat lain. Hal ini dapat dilakukan dengan menggunakan tag "image" di dalam tag "a".
Output:
 |
| Gambar 6 penggunaan gambar sebagai link |
Setelah gambar tujuh diklik maka laman web akan menuju ke alamat link seperti pada gambar 7.
 |
| Gambar 7 alamat link |
Menggunakan gambar sebagai backround dari laman web: gambar dapat juga dipergunakan sebagai background dalam laman web.
Contoh:
Output:
 |
| Gambar 8 background image |
Browser yang mendukung penggunaan gambar pada laman web:
satu, Google Chrome.
dua, Internet Explorer.
tiga, Firefox.
empat, Opera.
lima, Safari.
Tidak ada komentar:
Posting Komentar
Respon komentar 7 x 24 jam, so please be patient :D