Cara Menambahkan Gambar dan Link di HTML dengan Mudah + Job Sheet

Panduan praktis cara menambahkan gambar dan link di HTML untuk pemula. Lengkap dengan contoh kode dan penjelasan.
Cara Menambahkan Gambar dan Link di HTML dengan Mudah

Dalam HTML, kita bisa menambahkan gambar dan tautan (link) agar halaman web menjadi lebih informatif dan interaktif. Tag yang digunakan adalah <img> untuk gambar dan <a> untuk link.

🖼️ Menambahkan Gambar dengan Tag <img>

  • <img> adalah tag tunggal (self-closing)
  • Membutuhkan atribut src (alamat gambar) dan alt (teks alternatif)

Contoh:


<img src="https://via.placeholder.com/150" alt="Gambar Contoh">

Hasilnya:

Gambar Contoh

🔗 Menambahkan Tautan dengan Tag <a>

  • <a> digunakan untuk membuat hyperlink (tautan)
  • Membutuhkan atribut href sebagai tujuan link

Contoh:


<a href="https://www.google.com">Kunjungi Google</a>

Hasilnya: Kunjungi Google

🔄 Coba Jalankan Kode HTML Ini


🎯 Tips Penggunaan

  • Gunakan alt pada gambar agar tetap terbaca oleh screen reader dan saat gambar gagal dimuat
  • Gunakan target="_blank" pada link untuk membuka di tab baru
  • Gambar bisa disimpan di folder lokal atau menggunakan URL dari internet

🧪 Latihan Interaktif

Edit teks di bawah ini untuk mengganti gambar dan tautan sesuai keinginan kamu:


📝 Tugas Praktik Mandiri

  1. Buat file HTML bernama gambar-link.html
  2. Tambahkan gambar dengan ukuran dan alt teks sesuai keinginan
  3. Buat paragraf yang berisi tautan ke media sosial kamu
  4. Gunakan target="_blank" untuk membuka link di tab baru
  5. Uji hasilnya di browser

Bonus: Buat satu gambar yang jika diklik akan membuka link tertentu!

📄 Daftar Struktur HTML dan Fungsinya

Tag HTML Fungsi Contoh Penggunaan
<!DOCTYPE html> Menentukan jenis dokumen HTML (HTML5). <!DOCTYPE html>
<html> Elemen root yang membungkus seluruh halaman HTML. <html lang="id"> ... </html>
<head> Menyimpan metadata, judul halaman, dan link CSS/JS. <head><title>Judul</title></head>
<title> Menentukan judul halaman di tab browser. <title>Belajar HTML</title>
<meta> Informasi tambahan (charset, viewport, SEO). <meta charset="UTF-8">
<body> Menyimpan semua konten yang ditampilkan di halaman. <body>...</body>
<h1> - <h6> Menandai judul dari besar ke kecil. <h1>Judul Utama</h1>
<p> Menampilkan teks dalam paragraf. <p>Ini paragraf</p>
<a> Membuat hyperlink. <a href="https://example.com">Klik</a>
<img> Menampilkan gambar. <img src="foto.jpg" alt="Deskripsi">
<ul><li> Membuat daftar tidak berurutan (bullet list). <ul><li>Item</li></ul>
<ol><li> Membuat daftar berurutan (angka). <ol><li>Langkah 1</li></ol>
<table> Menyusun data dalam tabel. <table><tr><td>Data</td></tr></table>
<form> Membuat formulir input pengguna. <form action="proses.php">...</form>
<input> Membuat kolom input (teks, tombol, dll). <input type="text" name="nama">
<div> Membuat blok kontainer. <div>Konten</div>
<span> Mengelompokkan teks dalam satu baris. <span>Highlight</span>
<header> Bagian kepala halaman (logo/judul). <header>Judul Website</header>
<nav> Bagian navigasi/menu link. <nav><a href="#">Home</a></nav>
<main> Konten utama halaman. <main>Konten Utama</main>
<section> Membagi konten menjadi bagian tertentu. <section>Artikel Terbaru</section>
<article> Mendefinisikan artikel/konten mandiri. <article>Berita</article>
<aside> Konten samping (sidebar/info tambahan). <aside>Widget</aside>
<footer> Bagian kaki halaman (hak cipta/kontak). <footer>© 2025 Zero Computer</footer>

➤ Job Sheet 1: Membuat Halaman Profil Pribadi

➤ Job Sheet 2: Membuat Halaman Portofolio Proyek

🚀 Mau Cepat Bisa Komputer & Siap Kerja? Tempatnya di Sini!

Jangan biarkan peluang kerja lewat begitu saja hanya karena belum bisa komputer. Di ZE COME Training Center, kamu bisa mulai dari NOL sampai MAHIR! Belajar langsung dari instruktur berpengalaman, dengan materi yang praktis & langsung dipakai di dunia kerja.

  • ✅ Belajar Word, Excel, Google Workspace, Desain, Web Desain, Digital Marketing, Jaringan Komputer, Teknisi Komputer dan Printer dari dasar
  • ✅ Cocok untuk pencari kerja, mahasiswa, karyawan, dan pelajar
  • ✅ Bisa kursus reguler atau privat – sesuai waktu kamu
  • ✅ Menerima siswa PKL/Magang SMK dari berbagai jurusan
  • ✅ Sertifikat resmi & pengalaman praktik nyata

Daftar hari ini, mulai belajar besok! Jangan tunggu nanti, karena yang siap lebih dulu akan diserap dunia kerja lebih cepat.

Post a Comment

Send Whatsapp Query