HTML Dasar : Image
Hello Mates 🍻 !!!
By : Mr.KLA
Hello Mates !!! Welcome Back !!!.
Kali ini yang kita pelajari adalah bagaimana menyimpan sebuah gambar ke dalam dokumen HTML kita. Tag yang kita gunakan ialah tag <img src="">
Pertama yang kita lakuakan adalah mengcopykan/menyimpan sebuah gambar ke folder kita Latihan 7. Disini Gambar saya bernama logo.png
Kemudian saya sudah buat file dengan nama image.html yang didalamnya
terdapat struktur HTML standart. Lalu kita ketik tag image nya.
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
</body>
</html>
Dibagian nilai nya kita dapat menyimpan file gambarnya ! File gambar yang dapat kita simpan ada 2 !
Pertama kita bisa menyimpan Internal Resource atau gambar yang kita miliki sendiri didalam folder tadi. Misalnya saya simpan disini itu logo.png (jangan lupa ketik juga ekstensi/type file gambar kalian dan harus disatu folder yang sama. Jika file kalian di folder yang berbeda, relative URL berlaku. Seperti yang saya sudah ajarkan di materi sebelumnya).
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.png">
</body>
</html>
Hasilnya adalah
Selain itu kita juga dapat menggunakan External resource (hotlink). Saya tidak sarankan menggunkan cara ini karena gambar yang kita ambil itu berasal dari website lain. Misal jika kita menggunakan gambar dari website lain itu artinya pada saat user membuka website kita dan gambarnya tampil itu yang digunakan adalah bandwitch dari pemilik website lain bukan bandwitch kita.
Kadang kadang jika kita mengambil gambar dari website lain itu belum tentu gambarnya bebas pakai atau bisa dibilang copyright.
Dan satu lagi yaitu artinya kita bergantung pada website yang lain. Sehingga website yang lain tersebut down atau tidak bisa diakses itu berpengaruh ke website kita, maka gambar nya juga tidak akan muncul. Jadi Hotlink ini tidak saya sarankan.
Contoh Hotlink yang biasanya saya pakai adalah
Lalu artibut apa aja sih yang dimiliki oleh tag <img> ?
- src (wajib ada karena gambarnya mau diambil dari mana)
- alt (berguna untuk memberikan alternatif text pada gambar)
- title (berguna untuk memberi judul pada gambar)
- width (berguna untuk memberi besar pada gambar)
- height (berguna untuk memberi tinggi pada gambar)
Misal kita akan coba artibut alt. Jika kita menambahkan alt, dan tidak ada masalah pada gambarnya, maka gambar akan tampil. Tapi jika kita ada masalah dengan gambar misal kita salah menuliskan ekstensi atau type gambar tersebut, dan yang tampil adalah tulisan LOGO
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.pn" alt="LOGO">
</body>
</html>
Dan Hasilnya
Title digunakan memberi judul pada gambar. Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.png" title="LOGO 1">
</body>
</html>
Dan hasilnya yaitu gambarnya tampil. Terus title nya ada dimana? Title nya
ada disaaat kalian letakan kursor diatas gambar
Kemudian width dan height ini untuk mengatur lebar dan tinggi pada gambar. Kita bisa tulis dua-duanya atau kita bisa tulis satu saja. Misal saya tuliskan widht nya saja maka otomatis height nya akan menyesuaikan proposi gambarnya. Ketika kita tulis dua-duanya maka gambarnya akan tertarik dan kita harus hati hati menggunakannnya.
Kita juga menuliskan 2 nilai yaitu :
- px
- %
Jika kita menuliskan angka saja maka otomatis satuannya akan terbentuk pixel(px)
Tetapi jika kita menambahkan persen (%) maka ukurannya relative terhadap
halamannya. Misal 50% maka gambar tersebut akan setengah dari halamannya.
Misal saya akan gunakan width 500 pixel(px)
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.png" width="500">
</body>
</html>
Dan hasilnya gambar itu akan 500 pixel sedangkan tinggi nya otomatis akan
menyesuaikan agar proposional.
Tapi ketika saya ganti tinggi nya misal tingginya 1000
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.png" width="500" height="1000">
</body>
</html>
Dan gambarnya kemungkinan akan tertarik seperti ini
Makannya hati hati jika menggunakan 2 artibut itu. Sebaiknya hanya gunakan salah satu saja
Sedangkan misal saya ganti menjadi persen maka ini artinya ukurannya akan 50% dari halaman itu.
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<img src="logo.png" width="50%">
</body>
</html>
Dan hasilnya
Lalu bagaimana cara menggabunkan gambar dengan hyperlink kalau di postingan sebelumnya kita buat hyperlink dengan text. Sekarang kita akan coba gunakan gambar. Misal kita akan membuat sebuah link pada saat kita mengklik gambar tersebut. Misal
<!DOCTYPE html>
<html>
<head>
<title>HTML Image</title>
</head>
<body>
<a href="https://google.com">
<img src="logo.png">
</a>
</body>
</html>
Dan hasilya akan kursor tersebut berubah menjadi tangan dan jika kalian pencet kalian akan dilarikan kemana kalian taruh link tadi.
Sekian materi dari saya semoga bermanfaat. Silahkan kalian mengexplor atau latihan/pengulangan agar ingat dan terbiasa untuk sadar, kita adalah para kaum halu melihat senyumannya yang berada di pelukan orang lain.
See You Next Time !!!
Thanks To :
- Angels Cyber Moon
- LolzSec Xploit Indo
- Clown Security Team
- Malang Xploit Cyber
- Cyber Army 2k17
- Unknowns Cyber Team
- Indonesia Cyber Freedom
Belum ada Komentar untuk "HTML Dasar : Image "
Posting Komentar