Tutorial HTML #08: Tag Image HTML Dasar

Image HTML.- Kembali lagi diblog kami yang sederhana. Di bahasan sebelumnya kita telah membahas tentang link html, bagi yang belum tahu bisa langsung meluncur ke situ.

Untuk bahasan kali ini kita akan membahas tentang image html. Seperti yang sering kita lihat, pada suatu website pasti ada satu atau beberapa buah gambar yang didalamnya. Baik untuk hanya mempercantik tampilan sampai gambar yang mendiskripsikan website atau bahkan suatu artikel tertentu.

Apa tag HTML yang benar untuk membuat gambar?, berikut penjelasannya.

Apa Itu Image HTML?

Tag image / gambar di lambangkan dengan <img>. Tag image <img> bertujuan untuk memasukkan gambar(seperti .jpg, .gif, .png) ke dalam website. Meskipun demikian gambar didalam sebuah dokumen HTML sebenarnya tidak dimasukkan sepenuhnya pada file html akan tetapi, hanya merujukkan file sumber gambar tersebut berada / disimpan.

Untuk struktur dasar dari html adalah sebagai berikut :

<img src=" ">

Dimana tag <img> adalah tag yang mendifinisikan sebuah image / gambar, sementara src=”” adalah atribut yang harus ada karena bertujuan untuk mendifinisikan lokasi dari gambar yang akan dimasukkan ke website.

Ada dua cara untuk menyimpan gambar ke website yaitu :

Internal resource : Menyimpan gambar ke website berdasarkan gambar yang kita miliki dan berada dalam satu folder dengan file html yang kita buat.

External resource : Menyimpan gambar ke website berdasarkan gambar dari orang lain / dari website lain.

Baca Juga : Cara Membuat Image Menjadi Link

Contoh Internal Resource

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Tag Image Pada HTML</title>
</head>
<body>
<h1>Kumpulan Gambar</h1>
<img src="gambar.png"> <!--ingat extensi file harus ditulis (.png, .jpg, dsb)-->
</body>
</html>

Output :

Contoh External Resource

<!DOCTYPE html>
<html>
<head>
    <title>Mengenal Tag Image Pada HTML</title>
</head>
<body>
    <h1>Kumpulan Gambar</h1>
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBQOZ5GwwQvf-QAH2C_-OXtnrY9JHkarsP8jbDXqzUsfUXvqh6w0zS7RRlmyXiZsKF9KMj6cgJ2Jw5ND3WhRQ0yMAJrVsVtSDOpbvQ9dAzcXjloixJaJJG-tnXxovxMp4NtWii1uYm3p0/s1136/HTML1png.png">
</body>
</html>

Baca Juga : Styles Dan Formating Pada HTML

Jika ada yang bertanya, dari mana kita mendapatkan link dari gambar tersebut?. Caranya, sahabat buka website yang ingin digunakan gambarnya, kemudian klik kanan pada gambar, pilih copy link address dan terakhir pastekan di dalam atribut src, jangan lupa memberikan petik dua buka dan petik dua tutup.

Tag HTML IMG Memiliki Atribut Apa Saja?

Kumpulan atribut yang dibutuhkan oleh tag <img> adalah sebagai berikut :

Nama Atribut	Keterangan
Src	Untuk mendifinisikan letak gambar
Alt	Untuk menambahkan alternative text pada gambar, jika terjadi masalah pada gambar maka alternative text akan dimunculkan.
Title	Untuk memberikan judul pada gambar, akan terlihat ketika kita mengarahkan kursor ke gambar.
Width	Untuk memberikan ukuran lebar pada gambar
Height	Untuk memberikan ukuran tinggi pada gambar

Sampai disini, harusnya kalian sudah memahami tentang apa itu tag image dan bagaimana cara menggunakan tag image pada html.

Untuk selanjutnya kalian harus banyak-banyak latihan supaya kalian bisa lebih mahir lagi dalam membuat suatu website yang dimana terdapat image didalamnya.

Baca Juga : Cara Menggunakan CSS Di HTML

Bagi kalian yang masih ingin terus belajar tentang HTML. Saya selaku admin blog Kita Ngoding, merekomendasikan kepada kalian untuk membaca artikel dibawah ini. Silahkan kalian klik linknya untuk berpindah ke halaman tersebut.

Artikel Lainnya :

Tutorial HTML #11 | Form Pada HTML Dasar

Tutorial HTML #10 | List Pada HTML

Tutorial HTML #09 | Tabel Pada HTML Dasar

Tutorial HTML #08 | Tag Image HTML Dasar

Tutorial HTML #07 | Membuat Link HTML

Tutorial HTML #06 | Styles Dan Formating Pada HTML

Tutorial HTML #05 | Tentang Tag Heading

Tutorial HTML #04 | Tentang Tag Paragraf HTML

Tutorial HTML #03 | Pengenalan Struktur HTML

Tutorial HTML #02 | Persiapan Sebelum Mulai Menulis Kode HTML

Tutorial HTML #01 | Pengenalan HTML Dasar