Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML

Author Erick Irwansyah
25 Dec 2024
Html
Belajar HTML #3: Cara Menambahkan Gambar dan Tautan di HTML

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 <img>. Elemen ini bersifat self-closing, artinya gak butuh tag penutup.

Sintaks Dasar:
<img src="url_gambar" alt="deskripsi_gambar">

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:
<img src="https://via.placeholder.com/150" alt="Gambar 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:
<img src="https://via.placeholder.com/300" alt="Gambar Contoh" width="200" height="100">

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

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

<img src="https://via.placeholder.com/300" alt="Gambar Contoh" style="width: 50%; height: auto;">

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:

<img src="images/contoh.jpg" alt="Gambar Lokal">

Menambahkan Teks di Sekitar Gambar

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

Contoh:
<p>
  <img src="https://via.placeholder.com/150" alt="Gambar Kecil" style="float: left; margin-right: 10px;">
  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.
</p>

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

Gambar Sebagai Tautan

Kamu juga bisa menjadikan gambar sebagai tautan.

Contoh:
<a href="https://www.code80vity.com">
  <img src="https://via.placeholder.com/150" alt="Klik Gambar untuk Kunjungi Website">
</a>

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

Praktik Langsung

Coba buat file HTML baru dan tambahkan kode ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Belajar HTML: Gambar</title>
  </head>
  <body>
    <h1>Belajar Menambahkan Gambar</h1>

    <h2>Gambar Sederhana</h2>
    <img src="https://via.placeholder.com/200" alt="Contoh Gambar" width="200">

    <h2>Gambar dari Folder Lokal</h2>
    <p>Gambar ini diambil dari folder lokal:</p>
    <img src="images/contoh.jpg" alt="Gambar Lokal" width="200">

    <h2>Gambar dengan Teks Mengelilingi</h2>
    <p>
      <img src="https://via.placeholder.com/150" alt="Gambar Kecil" style="float: right; margin-left: 10px;">
      Paragraf ini mengelilingi gambar yang ada di sebelah kanan. Kamu bisa menambahkan teks sebanyak yang kamu mau di sini.
    </p>

    <h2>Gambar Sebagai Tautan</h2>
    <a href="https://www.code80vity.com">
      <img src="https://via.placeholder.com/150" alt="Klik untuk Kunjungi Website">
    </a>
  </body>
</html>

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.

Tutorial Terkait Lainnya

Belajar HTML #2: Struktur dasar dan Tag HTML
Belajar HTML #2: Struktur dasar dan Tag HTML

Hai! Semoga semangat belajarnya tetap tinggi. ? Kali ini kita akan membahas struktur dasar HTML lebi...

Baca Tutorial
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML

Hai lagi! Gimana belajarnya? Semoga makin lancar, ya. Kali ini kita akan bahas cara membuat tabel di...

Baca Tutorial
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML

Halo lagi! Kali ini kita bakal bahas tentang daftar atau list di HTML. Kalau kamu pernah lihat websi...

Baca Tutorial

Comments

Please login to post a comment.
No comments yet. Be the first to comment!
Previous Next
Tutorial Terkait
Belajar HTML #4: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #1: Pengenalan HTML
Belajar HTML #5: Cara Menambahkan Gambar dan Tautan di HTML
Belajar HTML #2: Struktur dasar dan Tag HTML
Tutorial Terbaru
Tutorial PHP Dasar #13: Upload File dengan PHP
25 Dec 2024 Php
Tutorial PHP Dasar #12: php security (sql injection & hashing)
25 Dec 2024 Php
Tutorial PHP Dasar #11: CRUD dengan PHP dan MySQL
25 Dec 2024 Php
Tutorial PHP Dasar #10: Session dan Cookie di PHP
25 Dec 2024 Php
Tutorial PHP Dasar #9: Validasi Form di PHP
25 Dec 2024 Php