Cara Menampilkan Atau Memuat Gambar Dalam HTML
 |
| Menampilkan Gambar Dalam HTML |
Sallam Sobat BT....
Pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang HTML,yakni cara memasukan atau memuat gambar kedalam HTML.Nah....setelah sobat membaca di article sebelumnya maka pasti sobat sudah tau tentang penulisan struktur HTML yang benar dan mengerti akan penulisan tag HTML.Oke....setelah itu sobat akan belajar tentang cara memasukan atau memuat gambar kedalam HTML.Caranya snediri memang cukup mudah dan simple, karena hanya beberapa ketik saja.Oke.....langsung saja sobat simak di bawah......
Nah.....untuk menampilkan gambar sobat hanya memerlukan tag <img>.Lalu bagaimanakan cara meletakkan dan menuliskan di struktur HTML ? dan bagaimanakah cara meletakan gambar tersebut ,di tag ini kah <img> ?Oke.....sebelum itu ,alangkah baiknya sobat simak dahulu tentang artribut HTML.
Mengenal Artribut HTML
Nah....apakah itu Artribut dalam HTML ? Suatu tag HTML biasanya dapat memiliki satu atau lebih artribut.Sedangkan artribut sendiri berfungsi untuk menyimpan informasi yang berkaitan dengan tag tersebut.Karena pada kali ini membahas tentang tag <img>, maka saya akan menggunakan artribut src,dimana fungsi dari artribut src tersebut untuk menyimpan lokasi gambar.Maka tagnya akan menjadi seperti ini....
<img src>
Selanjutnya untuk memasukan nilai pada artribut tersebut, maka saya akan menggunakan operator sama dengan (=) yang di ikuti oleh lokasi gambar dengan ketentuan di apit oleh tanda kutip (&ldquo....&rdquo).Maka tagnya akan menjadi seperti ini.....
<img src=”gambar.jpg”>
Tag <img> ini juga termasuk tag HTML yang istimewa atau spesial karena tidak memiliki tag penutup atau biasa di sebut “Self Closed Tag”.Hal ini dikarenakan tag <img> ini tidak memiliki konten.Maka sebagai pengganti,bisa di tambahkan tanda slash (/) sebelum kurung tutup.Maka hasilnya akan seperti ini....
<img src=”gambar.jpg”/>
Latihan Memuat Gambar Pada HTML
Oke....saatnya untuk sobat latihan memuat gambar HTML.Cukup menirukan tutorialnya di bawah ini...
1.Pertama-tama silahkan buka aplikasi text editor sobat,seperti Notepad,Sublime,Notepad ++ atau yang lainya.
2.Buatlah sebuah folder baru dengan nama terserah (misal Belajar HTML).Setelah itu pilih gambar yang akan di tampilakan dan taruh gambar ke dalam folder yang baru di buat tadi.Misal saya akan taruh gambar seperti ini...
3.Ketikkan kode HTML seperti ini :
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Judul Latihan</TITLE>
</HEAD>
<BODY>
<p>Cara memuat gambar pada HTML
<p>
<img src="Logo.png" />
<BODY>
</HTML>
4.Simpan latihan tersebut dengan nama Latihan2.html
5.Double klik pada file Latihan2.html tadi dan liha hasilnya......
Mengatur Ukuran Resolusi Pada Gambar Yang Akan Di muat
Nah.....setelah sukses menampilkan gambarnya maka sekarang berlanjut ke cara mengatur ukuran gambar yang akan di muat.Sebenarnya kita tidak perlu lagi mengatur ukuran gambar karena secara otomasi akan ter’load dengan ukuran aslinya.Namun hal ini di anjurkan untuk mempercepat proses pemuatan gambar. Selain mempercepat, hal ini juga berfungsi untuk mengatur ukuran aslinya agar sesuai dengan keinginan.Misal sobat akan menampilakan gambar yang ukuranya nyampai ribuan (Misal 2000x3000 atau lainya).Maka nantinya gambar tersebut akan tampil dengan ukuran yang sangat besar.
Nah......untuk itu sobat perlu untuk mengatur ukurn gambar tersebut agar pas untuk di pandang.Bagaimana caranya ? mudah saja, sobat hanya memerlukan artribut Width dan Height untuk menentukan lebar dan tinggi gambar.Maka tagnya akan menjadi....
<img src=”nama gambar.jpg” Width=”300” Height=”350”>
Ukuranyapun bisa sobat sesuaikan sesuai selera sobat.Sobatpun juga tidak perlu untuk memberi tanda kutip pada nilai lebar dan tinggi.Nah....untuk sobat yang belum tahu cara mengetahui ukuran foto maka langsunga saja klik kanan→Properties→Details.
Cara Penulisan Lokasi File
Nah.....pada tutorial memuat gambar sebelumnya sobat menyimpan gambar dan file latihan dalam folder yang sama.Bagaimanakah jika gambar tersebut berada di dalam folder lagi seperti berikut ini.....
Maka yang perlu sobat lakukan hanyalah menambahkan nama folder tersebut, yang di ikuti dengan tanda slash (/) dan nama file gambar yang akan di muat......
<img src=”folder gambar/gambar.jpg”/>
Lalu jika dalam folder tersebut terdapat folder lagi dan gambar yang akan di muat ada di dalamnya maka penulisanya akan seperti ini....
<img src=”folder gambar/Folder1/gambar.jpg”/>
Selain penggunaan lokasi gambar di atas ,sobat juga bisa menampilkan gambar yang sudah ada di internet.Penulisan seperti ini juga biasa di sebut dengan Hotlinking.Misal penulisan...
<img src=”http://namasitus/images/gambar.jpg/>
Atau apabila gambar tersebut berada diluar Dokumen HTML maka bisa dituliskan menggunakan tanda titik-titik lalu diikuti dengan Slash.Miasalnya saya membuat sebuah folder dengan nama latihan,lalu saya menaruh gambar kedalam folder tersebut.Didalam folder latihan tadi saya membuat folder lagi bernama fileHTML.Didalam folder inilah saya meletakan Dokumen HTMLnya.Maka untuk memanggil gambar, sobat harus keluar Direktori/folder terlebih dahulu.Jadi pemanggilanya bisa begini.
<img src=”../nama_gambar.jpg”>
Mengenal Atribut ALT
Nah...didalam tag img,ada lagi tag yang sebenarnya harus ada atau lebih tepatnya saya rekomendasikan untuk memasangnya,yakni artribut ALT.Atribut ini berfungsi untuk menampilkan text Alternatif apabila gambar tidak dapat dimuat dalam Browser.Hal ini bisa disebabkan beberapa faktor, bisa kesalahan penulisan Direktori,penulisan format,gambar terhapus dan lain sebagainya.
Hal ini mungkin jarang terjadi saat Web masih diKomputer Client (saat membuat) namun akan berbeda apabila saat diupload ke Server nantinya, apalagi bila memanggil gambar orang lain diinternet dengan link.Oke...begini penulisanya...
Hal ini mungkin jarang terjadi saat Web masih diKomputer Client (saat membuat) namun akan berbeda apabila saat diupload ke Server nantinya, apalagi bila memanggil gambar orang lain diinternet dengan link.Oke...begini penulisanya...
<img src=”gambar.jpg” alt=”ini akan muncul saat gambar tidak tampil”>
Oke....sekian postingan saya kali ini,semoga postingan saya kali ini bermanfaat bagi sobat-sobat semua.Mohon maaf apabila ada kesalahan dalam penulisan postingan ini.Bila ada yang ingin sobat tanyakan , silahkan sobat berkomentar di bawah.
0 Response to "Cara Menampilkan Atau Memuat Gambar Dalam HTML"
Post a Comment