6 Cara Menambahkan Foto di HTML

1. Mengenal Tag <img>

Dibimbing.id - Tag Img

Untuk menambahkan foto di HTML, kamu bisa menggunakan elemen <img>. Elemen ini memiliki beberapa atribut penting yang harus diketahui sebelum kamu dapat menambahkan foto ke halaman web kita. Berikut atribut tersebut serta penggunaannya. 

• Atribut src

Atribut src adalah atribut yang paling penting dalam tag <img>. Atribut ini digunakan untuk menentukan lokasi file foto yang ingin ditampilkan di halaman web. Lokasi tersebut bisa berupa URL foto di internet atau path ke file foto di servermu.

Contoh penggunaan atribut src:

<img src="foto.jpg" alt="Deskripsi Foto">

• Atribut alt

Atribut alt digunakan untuk memberikan deskripsi singkat tentang foto. Deskripsi ini akan muncul jika foto atau gambar gagal dimuat. Bisa juga untuk membantu pengguna dengan gangguan penglihatan memahami konten visual tersebut.

Contoh penggunaan atribut alt:

<img src="foto.jpg" alt="Pemandangan alam indah">

• Atribut width dan height

Atribut width dan height digunakan untuk mengatur lebar dan tinggi foto. Kamu dapat mengatur nilai-nilai ini dalam piksel atau persentase. Pengaturan lebar dan tinggi foto dapat membantu mengendalikan tata letak halaman webmu.

Contoh penggunaan atribut width dan height:

<img src="foto.jpg" alt="Deskripsi Foto" width="300" height="200">

• Atribut title

Atribut title digunakan untuk menambahkan teks tooltip yang akan muncul ketika pengguna mengarahkan kursor mereka ke foto.

Contoh penggunaan atribut title:

<img src="foto.jpg" alt="Deskripsi Foto" title="Klik untuk memperbesar">

2. Menambahkan Foto dari Sumber Eksternal

Sumber foto eksternal adalah gambar yang terletak di luar server Sobat MinDi, seperti foto yang ada di internet. Untuk menambahkan foto dari sumber eksternal, kamu cukup menggunakan atribut src dengan URL foto yang ingin kamu tampilkan. Contohnya:

<img src="https://www.example.com/foto.jpg" alt="Pemandangan indah">

Pastikan kamu memiliki izin atau lisensi yang sesuai untuk menggunakan foto atau gambar tersebut, terutama jika kamu menggunakan foto yang bukan milik sendiri.

3. Menambahkan Foto dari Server Lokal

Dibimbing.id - Server Lokal

Untuk menambahkan foto dari server lokal milikmu, pastikan gambar tersebut berada dalam direktori yang benar. Kemudian, Sobat MinDi dapat menggunakan atribut src dengan path relatif atau absolut ke file foto tersebut.

• Path Relatif

Jika foto berada dalam direktori yang sama dengan halaman HTML yang kamu buat, maka kamu dapat menggunakan path relatif seperti ini:

<img src="foto.jpg" alt="Deskripsi Foto">

• Path Absolut

Jika foto berada dalam direktori yang berbeda atau di luar direktori halaman HTML yang kamu buat, maka kamu dapat menggunakan path absolut seperti ini:

<img src="/images/foto.jpg" alt="Deskripsi Foto">

Pastikan path yang kamu gunakan sesuai dengan struktur direktori di server milikmu.

4. Mengatur Ukuran Foto

Dibimbing.id -  Ukuran Foto

Kamu dapat mengatur lebar dan tinggi foto menggunakan atribut width dan height, seperti yang telah dijelaskan sebelumnya. Misalnya, saat kamu ingin menampilkan foto dengan lebar 300 piksel dan tinggi 200 piksel, kamu dapat melakukannya seperti ini:

<img src="foto.jpg" alt="Deskripsi Foto" width="300" height="200">

Namun, penting untuk diingat bahwa mengatur ukuran foto dengan cara ini dapat mengubah rasio aspek gambar. Jadi, pastikan untuk memilih ukuran yang sesuai agar foto tidak terlihat terlalu terdistorsi.

Selain mengatur ukuran foto di HTML, kamu juga bisa belajar berbagai seluk beluk web development lainnya dari bootcamp dibimbing.id. Melalui bootcamp ini, kamu berkesempatan menangani kasus real-project dan diarahkan langsung oleh para praktisi profesional, lho!

5. Penyusunan Foto

Penyusunan foto dalam halaman web adalah hal penting. Kamu dapat menggunakan CSS untuk mengatur posisi foto dan mengendalikan tata letak halaman.

• Tengah

Jika kamu ingin menempatkan foto di tengah halaman web, maka kamu dapat menggunakan CSS. Kamu bisa mengatur margin secara otomatis dan membuat foto berada di tengah dengan CSS. Contohnya:

<img src="foto.jpg" alt="Deskripsi Foto" style="display: block; margin: 0 auto;">

• Kiri atau Kanan

Kamu juga dapat mengatur foto untuk muncul di sebelah kiri atau kanan teks dengan menggunakan CSS. Untuk foto sebelah kiri contohnya: 

<img src="foto.jpg" alt="Deskripsi Foto" style="float: left; margin-right: 10px;">

Sementara foto sebelah kanan contohnya:

<img src="foto.jpg" alt="Deskripsi Foto" style="float: right; margin-left: 10px;">

Pastikan kamu telah mengatur margin dengan benar agar teks tidak tumpang tindih dengan foto.

6. Foto Sebagai Tautan

Dibimbing.id - Sebagai Tautan

Kamu juga dapat membuat foto menjadi tautan ke halaman atau situs lain. Untuk melakukannya, kau cukup memasukkan elemen <a> (anchor) di sekitar elemen <img> dan mengatur atribut href pada elemen <a>. Dengan cara ini, saat pengguna mengklik foto, mereka akan diarahkan ke halaman lain sesuai dengan nilai atribut href. Contohnya:

<a href="halaman-lain.html">

  <img src="foto.jpg" alt="Deskripsi Foto">

</a>

Menambahkan foto di HTML ternyata mudah, bukan? Kamu bisa mengikuti cara yang sudah MinDi sampaikan di atas. Pastikan untuk selalu memperhatikan hak cipta dan izin ketika menggunakan foto atau gambar dari sumber eksternal. Dengan menambahkan foto, tentunya pengembangan websitemu akan lebih maksimal. 

Kamu juga bisa belajar lebih banyak tentang dunia pemrograman melalui bootcamp programmer yang diadakan dibimbing.id. Selain pengetahuan, Sobat MinDi juga akan mendapat benefit tambahan berupa pengalaman magang yang nyata dan koneksi ke 500+ perusahaan.