Tutorial HTML Menampilkan Gambar - Komputer Blog

Tutorial HTML Menampilkan Gambar

Tutorial HTML Menampilkan Gambar


Menpilkan gambar di HTML. Hampir semua website di dunia ini mempunyai gambar untuk ditampilkan. Karena gambar bisa mempercantik tampilan website yang kita miliki. Di sini saya akan memberikan cara-cara untuk menampilkan gambar menggunakan HTML.



Menampilkan gambar di folder yang sama.

Jadi file HTML kita dan gambar yang kita inginkan harus berada di folder yang sama. kita hanya perlu menbahkan tag
<img src="namafile.extension" alt="alternatif teks" />
contoh
<img src="JalalKun.jpeg" alt="JalalKun" />

Maka gambarnya akan muncul. jika tidak muncul cek kembali koding yang sudah ditulis.

Baca Juga : Tutorial HTML Memuat Link

Menampilkan gambar dari folder lain.

Kita juga bisa menampilkan gambar dari folder lain. kita hanya perlu menabahkan nama folder di depan nama file
<img src="namafolder/namafile.extension" alt="alternatif teks" />
contoh
<img src="gambar/JalalKun.jpeg" alt="JalalKun" />
kita juga bisa menampilkan gambar dari folder yang ada di atas folder file HTML kita. kita tambahkan '..' di depan nama file gambar kita.
Baca Juga : Tutorial HTML Atribut Style Pada Gambar
<img src="../namafile.extension" alt="alternatif teks" />
contoh
<img src="../JalalKun.jpeg" alt="JalalKun" />
Hasil :

Hasil menampilkan gambar di HTML
Hasil

codingnya 3 tapi hasilnya 1, karena saya menggunakan file yang sama, jadi mengambil file dari manapun tetap sama hasilnya.

Menampilkan gambar dari internet atau server lain.

Menampilkan gambar dari link atau internet, kita hanya perlu merubah pada 'src' dengan link tempat gambar kita berada. Saya akan menampilkan gambar dari Tutorial Linux Mengecilkan Gambar

<img src="https://2.bp.blogspot.com/-F43UR0IQkXA/WCLmq4udcbI/AAAAAAAABbc/0Py3F-PM2RgTSGqy38TGVok_mN49y_TawCLcB/s320/Cuplikan%2Blayar%2Bdari%2B2016-11-09%2B16-01-18.png" alt="JalalKun" />

Menampilkan gambar dari link lain
Menampilkan gambar dari link lain

Link dari blogger memang panjang, jika punya struktur website yang lebih singkat maka bisa saja. contoh :
<img src="http://wartadinus.com/wp-content/uploads/2016/11/1.1.jpg" alt="JalalKun" />
Hasil:
Menampilkan gambar dari link lain
Menampilkan gambar dari link lain

Baca Juga : Tutorial HTML Format Teks

Atribut 'alt' yang ada pada tag 'img' berfungsi sebagai tulisan yang muncul pengganti gambar. Ketika kita membuka website dan gambarnya tidak muncul maka yang muncul adalah tulisan yang ada di dalam atribut 'alt'.
Diberdayakan oleh Blogger.