HTML Dasar Part 8 - Membuat Tag Image Pada HTML

HTML Dasar Part 8 - Membuat Tag Image Pada HTML - Kita bisa menyimpan sebuah gambar pada dokumen HTML kita dengan menggunakan tag image, dengan penulisann tagnya dimulai dengan kurung siku buka/tanda lebih kecil dari ( < ), kemudian diikuti dengan nama tagnya ( img ), dan diakhiri dengan tanda kurung siku tutup / lebih besar dari ( > ). Untuk tag image ini bukan merupakan tag HTML yang berpasangan. Untuk penulisan tagnya lebih tepat sebagai berikut <img>.

Artikel ini melanjutkan pembahasan Tag hyperlink Pada HTML. jadi sebaiknya teman-teman yang belum membaca artikel tersebut, silakan baca dulu agar bisa lebih memahami isi artikel ini.

Atribut yang harus ada pada tag <img>, adalah “src”, tempat kita bisa menyimpan file gambar kita dengan menuliskan sumber gambarnya.

Tag image <img> digunakan untuk menyimpan sebuah gambar pada dokumen / halaman HTML
Tag Image

Untuk file gambar yang sanggup kita tuliskan pada atribut src, jenis sumbernya ada 2 :

1. Internal resources

Internal resources adalah gambar yg kita punya berdasarkan folder data di mesin komputer kita. Untuk penulisan asal gambar, caranya sama menggunakan cara kita menuliskan asal link yg pernah saya bahas di artikel ?Tag Hyperlink Pada HTML?. Jika masih pada satu folder yang sama, kita cukup menuliskan nama gambarnya bersama dengan ektensi filenya, tetapi jika berbeda folder, cantumkan nama foldernya atau lebih tepatnya Relative URL berlaku. Contohnya :

  • profile.jpg
  • background.png
  • img/gambar1.png

			<!DOCTYPE html> <head> <title>HTML IMG</title> </head> <body> <img src="background.png"> </body> </html>

tag image yang sumber gambarnya berasal dari folder file data yang ada dalam komputer
Internal Resources

2. Eksternal resources ( hotlink )

Eksternal resources adalah gambar yang berasal menurut sumber website lain, karena gambar ini berasal berdasarkan website lain, terdapat beberapa kekurangan antara lain :

  1. Ketika kita menggunakan gambar dari sumber website lain, lalu user membuka gambar yang ada pada website kita, dimana asal gambar itu adalah dari website lain, artinya pada saat user membuka gambar itu, user menggunakan bandwith milik website tempat kita mengambil gambar.
  2. Biasanya gambar yang berasal dari website lain, memiliki hak cipta, sehingga tidak bebas pakai. Masalah hak cipta pengaruhnya bisa sangat panjang, apabila kita tidak tangani dengan hati-hati, karena ini berhubungan dengan masalah hukum.
  3. Karena gambar yang kita ambil dari website lain, artinya kita tergantung dengan website sumber gambar tersebut, suatu ketika ketika website tersebut sedang down, maka gambar yang kia ambilpun tidak akan bisa diakses oleh user website kita ketika membuka gambar tersebut.

  • https://www.google.com/images/digitaladies/profile.png
  • https://www.facebook.com/images/digitaldies/profile.png

<!DOCTYPE html>

			<head> <title>HTML IMG</title> </head> <body> <img src="https://www.google.com/images/digitaladies/profile.png"> </body> </html>

Selain atribut src, sebuah tag <img> bisa memiliki atribut lain, seperti alt, title, width, dan height, untuk penjelasan masing-masing atribut, sebagai berikut :

atribut tag image adalah kelengkapan yang optional untuk diberikan pada tag tmage
Atribut Tag <img>

  • src : atribut wajib yang ada dalam tag <img> untuk menyimpan gambar.
  • alt : atribut ini digunakan sebagai alternative text pada gambar untuk memberikan keterangan gambar berupa text dari nama gambar, suatu ketika gambar tersebut tidak bisa diakses karena beberapa alasan, seperti penulisan yang salah pada atribut src, maka text tersebut akan muncul menggantikan gambar tersebut.

cara menggunakan atribut alt pada tag image dan hasilnya di web browser
Penggunaan atribut alt pada tag image

  • title : fungsi dari atribut ini buat menaruh judul pada gambar. Judul ini akan tampak saat kursor berada diatas berdasarkan gambar tersebut.

cara menggunakan atribut title pada tag image dan hasilnya di web browser
Penggunaan atribut title dalam tag image

  • width : fungsi dari atribut ini untuk mengatur lebar dari sebuah gambar.
  • height : fungsi dari atribut ini untuk mengatur tinggi dari sebuah gambar.

Noted buat atribut widht dan height :

  • 2 atribut ini memiliki satuan yang sama , yaitu :
    • px : satuan ukuran ini berbentuk pixel ( cari arti pixel )
    • % : satuan ukuran ini relative terhadap terhadap halaman browser. Dengan menggunakan satuan ini, akhir hasil dari gambar akan menyesuaikan lebar dan tinggi halaman browser pada saat browser kita resize baik secara manual atau otomatis. Untuk contohnya bisa lihat gambar dibawah ini :

cara menggunakan atribut width pada tag image dan hasilnya di web browser
Penggunaan atribut width dalam tag image

  • Untuk penggunaan dua atribut ini sebaiknya konsen dalam ukurannya, supaya sesuai menggunakan proporsi menurut gambar sesungguhnya. Sebagai model jika kita memiliki gambar berbentuk bujur kandang, kemudian kita mau atur untuk ukuran width dan heightnya, usahakan diatur sesuai dengan gambar aslinya, jika gambar asli memiliki berukuran widht x height sebesar 100px x 100px, maka apabila kita ingin berubah ukurannya, usahakan sesuai dengan ukuran tersebut, jangan sampai kita merubah ukurannya , mengakibatkan menciptakan hasil akhir dari gambarnya sebagai aneh, contohnya kita ubah sebagai 200px x 300px, maka gambar asli akan ketarik secara vertikal.

menggunakan atribut width yang salah akan merusak ukuran proporsional gambar
Penggunaan atribut width yang salah  pada tag image

  • Sebaiknya pada memakai dua atribut ini, bisa digunakan galat satunya saja. Apabila kita memakai width saja, secara otomatis, height akan berubah menyesuaikan ukuran gambar aslinya, begitu juga kebalikannya. Karena ada kemungkinan jika kita memakai dua berukuran sekaligus, mampu berakibat hasil akhir gambarnya tidak proporsional menggunakan gambar aslinya.

menggunakan atribut width dan height yang benar pada tag image
Penggunaan atribut width dan heigh dalam tag image

Untuk penjelasan tag <img> pada HTML, sekian dulu. Semoga artikel ini bisa bermanfaat bagi teman-teman yang baru belajar HTML. Tetap semangat belajar hal baru. See you on my next articles.

Referensi:

https://www.W3schools.Com

https://www.W3schools.Com/html/default.asp

  • kalau ada pertanyaan, silakan tulis saja dikotak komentar dibawah, asal bukan spam dan sesuai dengan topik pembahasan.
  • the language in this article uses indonesian, if you didn't understand with my language, you can use google translate or any others translator.

Belum ada Komentar untuk "HTML Dasar Part 8 - Membuat Tag Image Pada HTML"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel