Belajar HTML Dasar : Gambar / Images


Belajar HTML Dasar : Gambar - Pada kesempatan ini kita akan melanjutkan pembelajaran mengenai HTML Dasar. Setelah sebelumnya kita sudah membahas yang namanya Link pada HTML, kali ini kita akan membahas Gambar pada HTML Dasar.

Bagi yang belum membaca artikel atau pembelajaran HTML sebelumnya, kalian dapat membaca nya terlebih dahulu.

Baca Juga -> Belajar HTML Dasar : Link

Jika sudah, sekarang kita mulai saja pembelajaran kali ini.

Sebelum kita membahas mengenai sintaks atau bagaimana penulisan dan pembuatan gambar pada HTML, apa sebenarnya fungsi gambar?

Fungsi dan kegunaan gambar HTML yaitu meningkatkan desain dan tampilan halaman suatu website.

Sintaks ( Syntax ) Gambar HTML

Pada HTML, gambar didefinisikan dengan tag <img>

Yang mana tag <img> itu kosong dan hanya terdapat atribut saja.

Tag <img> tidak memiliki tag penutup

src merupakan atribut dari tag <img>


<img src="url">


Atribut Alt

Dalam tag <img> biasanya juga terdapat atribut yang bernama alt. Walaupun tidak setiap tag <img> di beri atribut ini. Tidak di beri sebenarnya tidak masalah, namun pemberian atrbut alt ini cukup penting. Mengapa? kita simak di bawah.

alt merupakan atribut yang mana berfungsi untuk menampilkan teks alternatif apabila gambar tidak berhasil ditampilkan atau error.

Contoh :



<img src="img_chania.jpg" alt="Flowers in Chania">


Hasil :


Gambar berhasil ditampilkan

Lalu, bagaimana jika gambar tidak berhasil dimuat?

Contoh : 



<img src="img.jpg" alt="gambar gagal di tampilkan" width="460" height="345">


Hasil dari penulisan diatas :


Gambar gagal ditampilkan

Dari situ, kita dapat melihat, bahwa gambar gagal ditampilkan. Lalu terdapat tulisan "gambar gagal ditampilkan" yang mana tulisan tersebut merupakan atribut alt

Mengatur lebar ( Width ) dan Tinggi ( Height ) Gambar

Kalian bisa menggunakan atribut style untuk mengatur ukuran gambar.



<img src="jogjaxploit.jpg" alt="JogjaXploit" style="width:500px;height:600px;">


Atau kalian bisa juga langsung memberikan width dan height. Tidak perlu memberikan atribut style.


<img src="jogjaxploit.jpg" alt="JogjaXploit" width="500" height="600">


Width dan Height selalu digunakan untuk mengatur ukuran suatu gambar. Yang mana nilai nya berada dalam satuan pixel.

Memberikan gambar yang berada di Folder Lain

Pada contoh sebelumnya kita dapat dengan mudah memberikan gambar yang mana letak gambar atau lokasi gambar berada pada satu folder.

Lalu, bagaimana cara memberikan gambar jika alamat atau lokasi gambar nya berada di folder lain?

Caranya yaitu dengan menambahkan /namafolder/namagambar.jpg

Contoh :



<img src="/namafolder/jogjaxploit.png" alt="logo JogjaXploit" style="width:128px;height:128px;">


Mudah bukan?

Memberikan gambar yang berada pada Server lain atau pada Internet

Apabila gambar nya berada pada server lain di internet, bukan pada folder yang terdapat pada PC kalian bagaimana?

Cara nya cukup mudah. Kita hanya perlu memberikan URL atau alamat gambar kalian di dalam atribut src

Contoh :



<img src="https://www.jogjaxploit.site/images/logo.jpg" alt="JogjaXploit.site">


Yang mana lokasi atau alamat gambar nya berada pada https://www.jogjaxploit.site/images/logo.jpg

Mengatur posisi gambar secara Horizontal ( float )

Kita bisa juga mengatur posisi gambar, berada di kanan, kiri dan sebagainya.

Contoh :



<p><img src="smiley.gif" alt="jogjaxploit" style="float:right;width:42px;height:42px;">
Gambar akan berada di kanan tulisan</p>

<p><img src="smiley.gif" alt="jogjaxploit" style="float:left;width:42px;height:42px;">
Gambar akan berada di kiri tulisan</p>


Hasil :


Float pada gambar untuk mengatur posisi gambar

Kesimpulan atau ringkasan :

1. Tag <img> digunakan untuk mendefinisikan gambar
2. Atribut src digunakan untuk menentukan lokasi gambar
3. Atribut alt digunakan untuk membuat teks alternatif pada gambar
4. Untuk mengatur ukuran gambar, gunakan width dan height
5. Untuk mengatur posisi gambar, kalian dapat menggunakan float

Gimana mudah bukan?. Jika kalian belum paham atau mengalami kesulitan silahkan di baca lagi dan di pahami lagi. Tidak susah sebenarnya, hanya butuh sedikit konsentrasi dan fokus hehe.

Mungkin cukup sekian Pembelajaran HTML mengenai gambar. Terima kasih dan sampai jumpa.

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Posting Komentar

Silahkan Bertanya atau Beri Tanggapannya, Terima Kasih

Post a Comment (0)

Lebih baru Lebih lama

ads

ads