auhtor

Andre Rio 20 Jun 2021

#8 Belajar Menyimpan Gambar Di HTML








Belajar Menyimpan Gambar Di HTML - Website tanpa adanya sebuah gambar tampaknya belumlah lengkap. Akan terlihat membosankan, sulit dipahami, dan tidaklah menarik.

Oleh karena itu, memasukkan gambar pada website cukup penting. Website akan menjadi lebih menarik dan pengunjung di website kita jadi lebih betah dengan adanya gambar tidak hanya tulisan saja.



Cara Menyimpan Gambar Di HTML


Untuk mengunakan gambar di HTML mengunakan “Tag” <img src=""> kita juga dapat mengunakan atau menambahkan atribut lain seperti alt="", title="" , dan sebagainya.

<img> “Tag” digunakan untuk menyematkan gambar di halaman HTML.

Atribut

  • src Menentukan jalur ke gambar
  • alt Menentukan teks alternatif untuk gambar, jika gambar karena alasan tertentu tidak dapat ditampilkan
  • title Memberi judul gambar ketika di hover

Seperti biasa siapkan file.html terlebih dahulu dan juga text editor untuk mengujinya.

Code:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar Image Pada Html</title>
 </head> 
 <body>
 	<img src="" alt="">
 </body>
</html>



Mengunakan External Dan Internal


Terdapat 2 opsi, di sini kita dapat mengunakan Link gambar yang sudah tersediah kita bisa mengunakan gambar yang ada di google.com biasanya ketika di klik akan ada link gambar tersebut. Atau mengukan gambar yang sudah ada di komputer kita.

External

Disini kita akan mencoba mengukanan link gambar yang sudah saya sediakan atau kamu juga dapat mengunakan gambar yang kamu inginkan bisah cari di google.com atau di situs-situs penyedia gambar lainya.

Namun penting perlu di ingat jika ingin mengunakan gambar yang tersebar di internet ntah itu dari google.com atau dari situs yang menyediakan gambar tersebut bisa saja memiliki hak cipta jadi tidak bisa sembarang mengunakan gambar yang ada di google.com tersebut.

Serta jika kita mengunakan url gambar milik website orang lain, akan rentang terjadi eror karena kita tidak tau bila nanti gambar nya bisa jadi di hapus oleh orang yg mempunyai link gambar tersebut atau website nya terjadi eror maka akan berpengaruh terhadap link url yang kita gunakan sebagai gambar.

Code:

<img src="https://cdn.statically.io/gh/wibucode02/cdn-wibucode-img/main/banner.png" alt="Ini adalah gambar">


Hasilnya:

img


Internal

Mengunakan gambar yang sudah ada di komputer kita. Sebelum itu pastikan gambar tersebut sudah di pindahkan ke folder HTML seperti berikut.

img


Cara memanggil gambar nya juga cukup mudah hanya memasukan nama “gambar.format” format yang saya maksud kan itu adalah format gambar seperti png , jpg , svg dan gif. Ini juga penting di perhatikan sebelum kita memanggil gambar tersebut perlu juga di perhatikan format tersebut agar nantinya tidak mengalami masalah ketika ingin memanggil gambar tersebut. Disini saya mengunakan gambar.png sebagai berikut.


 	<img src="banner.png" alt="Ini adalah gambar">


Hasilnya:

img


Jika gambar kita salah memasukan format gambar contoh

<img src="gambar.txt" alt="Ini adalah gambar">


Hasilnya:

img

Bisa kita lihat lihat jika gambar tersebut tidak tampil maka akan muncul sebuah text ini merupakan atribut dari alt bisa kita masukan kalimat apa saja yang mewakilkan gambar tersebut bila tidak muncul.


Kemudian jika ingin menambahkan judul gambar maka mengunakan atribut title

<img src="gambar.png" title="gambar">


Hasilnya:

img

Jika ingin memunculkan title nya maka harus di hover ke gambar tersebut nanti akan muncul judul dari gambar nya.


Nah sekarang bagaimana, jika gambar yang ingin kita panggil di dalam folder bukan di luar folder?

Kita mengunakan metode internal link. sudah saya bahasa sebelum nya cara mengunakan hyperlink di html

Silahkan buat folder baru bebas mau di kasih nama apa, contoh saya akan memberi nama folder tersebut “admin” kemudian didalam folder tersebut terdapat file gambar yang saya simpan ke dalam folder admin sebagai berikut.


img


Maka kita tinggal menambahkan “admin/”

<img src="admin/gambar.png" alt="Ini adalah gambar">


Maka hasilnya tetap sama.


Lalu bagaimana jika file.html berada di dalam 1 folder yang berbeda?


img


Maka kita hanya perlu menambahkan “../admin/gambar.png” keluar atau naik 1 folder lalu masuk lagi ke folder dan akan mencari file gambar.png tersebut.


<img src="../admin/gambar.png" alt="Ini adalah gambar">


Ketika di save lalu refresh browser nya pasti sekarang eror. Perlu di ingat juga jika kita measukan file.html nya ke dalam sebuah folder contoh folder yang saya buat tadi “login” maka patch url di browser akan berubah menjadi “/login/file.html” silahkan kamu cek url HTML di web browser.



Mengatur Ukuran Sebuah Gambar


Sebenarnya kita dapat mengatur file gambar tersebut tanpa mengunakan HTML “ngedit sendiri” namun tentunya hal tersebut tidaklah praktis. Bagaimana jika sewaktu-waktu ukuran gambar tersebut berubah tentu jika mengedit sendiri mengunakan tools editing akan memakan waktu juga.

Nah kita dapat mengunakan atribut pada HTML yaitu width lebar dan height tinggi. Lalu untuk ukuranya bisa menguakan px atau juga % sebagai berikut.


Mengunakan px / Pixel


Jika kita mengunakan angka saja maka ukuranya akan berbentuk pixel.


Code:

<img src="gambar.png" width="250px" height="250px" alt="Ini adalah gambar">


Ukuran nya bebas ya mau berapapun di sesuaikan saja.


Hasilnya:

img


Mengunakan %


Jika menambahkan % maka ukuranya akan relative terhadap halamanya, misalkan 50% berarti setengah dari halamanya.


Code:

<img src="gambar.png" width="100%" height="1000%" alt="Ini adalah gambar">


Hasilnya:

img

Bisa dilihat ketika menambahkan lebar 100% maka tampilanya akan full layar dan ketika menambahkan tinggi 10000% maka tingginya juga akan tertarik ke bawah.

Kita coba hanya menambahkan lebar nya saja menjadi 50% sebagai berikut.


Code:

<img src="banner.png" width="50%"  alt="Ini adalah gambar">


Hasilnya:

img

Ketika layar browser di kecilkan maka gambar tersebut akan tetap sama mengikuti ukuran gambar tersebut.



Membuat Posisi Gambar Di Tengah


Bagaimana jika kita ingin agar posisi gambarnya tidak selalu di samping bagaimana jika ingin membuat gambar nya ke tengah.

Kita akan mengunakan “Tag” <center> </center> sebagai berikut.


Code:

 <center>
 	<img src="banner.png" width="50%" alt="Ini adalah gambar">
 </center>


Hasilnya:

img




Terakhir kita dapat mamasukan link kedalam sebuah gambar yang nanti ketika kita mengklik gambar tersebut akan menuju ke halaman lain.

Seperti pada tutorialnya sebelumnya kita memnbuat Hyperlink mengunakan text namun disini kita mengunakan gambar.


Code:

<a href="https://wibucode.com">
 <img src="banner.png" width="50%" alt="Ini adalah gambar">
</a>

Bebas jika ingin mengunakan ink apapun itu di sini hanya sebagai contoh saja mengunakan link website https://wibucode.com




Nah itu saja cara menyimpan gambar di HTML dan selamat mencoba…






🚀 Komentar




Banner