Hai lagi! Kali ini kita akan belajar bagaimana cara menambahkan gambar ke halaman web kamu. Gambar bikin website terlihat lebih menarik dan informatif, jadi penting banget buat tahu cara menambahkannya dengan benar. Yuk, kita mulai!

Cara Dasar Menambahkan Gambar

Di HTML, elemen yang digunakan untuk menambahkan gambar adalah . Elemen ini bersifat self-closing, artinya gak butuh tag penutup.

Sintaks Dasar:

Keterangan:

• src: Atribut ini menentukan lokasi atau URL gambar.
• alt: Atribut ini berisi deskripsi gambar, yang ditampilkan jika gambar gagal dimuat atau untuk pembaca layar.

Contoh Sederhana

Contoh:

Hasilnya di browser: Gambar akan muncul dengan ukuran default 150x150 piksel.

Mengatur Ukuran Gambar

Kamu bisa mengatur ukuran gambar dengan atribut width dan height.

Contoh:

Hasilnya: Gambar akan ditampilkan dengan lebar 200 piksel dan tinggi 100 piksel.

Atau, kamu bisa menggunakan CSS untuk pengaturan yang lebih fleksibel:

Keterangan:

• width: 50%: Gambar akan menyesuaikan setengah dari lebar elemen induknya.
• height: auto: Tinggi akan otomatis mengikuti proporsi asli gambar.

Menambahkan Gambar dari Folder Lokal

Kalau gambarnya ada di komputer kamu, cukup masukkan path relatifnya di atribut src.

Contoh:

Struktur folder:

project/
??? index.html
??? images/
?   ??? contoh.jpg

Kode di index.html:

Menambahkan Teks di Sekitar Gambar

Kalau kamu mau menambahkan teks yang mengelilingi gambar, gunakan CSS untuk mengatur posisinya.

Contoh:

  
  Ini adalah contoh paragraf yang mengelilingi gambar di sebelah kiri. Kamu bisa menambahkan teks sebanyak yang kamu mau, dan gambar tetap akan berada di posisi yang sama.

Hasilnya: Gambar muncul di sebelah kiri dengan teks yang mengelilinginya.

Gambar Sebagai Tautan

Kamu juga bisa menjadikan gambar sebagai tautan.

Contoh:

Hasilnya: Ketika gambar diklik, kamu akan diarahkan ke URL yang ditentukan.

Praktik Langsung

Coba buat file HTML baru dan tambahkan kode ini:

  
    
    
  
  
    
Belajar Menambahkan Gambar

    
Gambar Sederhana
    

    
Gambar dari Folder Lokal
    
Gambar ini diambil dari folder lokal:
    

    
Gambar dengan Teks Mengelilingi
    

      
      Paragraf ini mengelilingi gambar yang ada di sebelah kanan. Kamu bisa menambahkan teks sebanyak yang kamu mau di sini.
    

    
Gambar Sebagai Tautan
    
      
    
  

Tantangan untuk Kamu

1. Tambahkan gambar profil kamu di halaman HTML menggunakan file lokal.
2. Buat layout artikel dengan gambar di sisi kiri atau kanan dan teks yang mengelilinginya.
3. Jadikan gambar sebagai tautan untuk membuka halaman favoritmu.

Menambahkan gambar itu penting banget buat mempercantik halaman web kamu. Dengan latihan, kamu bisa menempatkan gambar sesuai kebutuhan. Artikel ini adalah langkah penting sebelum kamu melanjutkan tutorial berikutnya di www.code80vity.com.