Minggu, September 01, 2019

HTML image

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:
penggunaan tag img pada pada laman html
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:
penyesuaian ukuran dimensi gambar menggunakan atribut width dan height pada tag img pada laman html
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:
penambahan title pada gambar menggunakan atribut title pada tag img pada laman html
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:
pengaturan ketebalan garis atau border pada laman html menggunakan atribut border pada tag img
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:
penggunaan atribut align pada tag img html untuk mengatur posisi atau tata letak gambar pada web browser
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:
penggunaan link sebagai alamt penghubung img pada laman html
Gambar 6 penggunaan gambar sebagai link

Setelah gambar tujuh diklik maka laman web akan menuju ke alamat link seperti pada gambar 7.
penggunaan gambar sebagai link menuju ke alamt web lainnya
Gambar 7 alamat link

Menggunakan gambar sebagai backround dari laman web: gambar dapat juga dipergunakan sebagai background dalam laman web.

Contoh:
Output:
penggunaan gambar atau image sebagai background pada laman html
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

Footer Adsense