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)
Menampilkan teks, gambar, daftar, dan tautan di halaman web
Deskripsi Tugas
Buat sebuah halaman profil pribadi sederhana dengan ketentuan:
Menampilkan judul halaman di tab browser
Nama lengkap, deskripsi singkat, dan foto profil
Daftar hobi/keterampilan dalam bentuk list
Tautan ke media sosial
File diberi nama: profil.html
Langkah Pengerjaan
Buka text editor (Notepad/VS Code).
Buat file baru bernama profil.html.
Tulis struktur dasar HTML dan tambahkan konten profil.
Simpan file dan buka di browser.
Checklist Penilaian
No
Kriteria
✔/✘
1
File bernama profil.html
2
Struktur HTML benar
3
Judul halaman tampil di tab browser
4
Nama lengkap dengan tag <h1>
5
Deskripsi singkat dengan <p>
6
Foto profil dengan <img>
7
Daftar hobi/keterampilan<ul li>
8
Link media sosial dengan <a>
Contoh Hasil Akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Profil Pribadi Saya</title>
</head>
<body>
<h1>Nama Lengkap Anda</h1>
<p>Saya adalah seorang pelajar yang suka belajar hal baru.</p>
<img src="foto.jpg" alt="Foto Profil" width="150">
<h2>Hobi / Keterampilan</h2>
<ul>
<li>Menggambar</li>
<li>Membaca Buku</li>
<li>Belajar Coding</li>
</ul>
<h2>Media Sosial</h2>
<p>
<a href="https://facebook.com">Facebook</a> |
<a href="https://instagram.com">Instagram</a>
</p>
</body>
</html>
➤ Job Sheet 2: Membuat Halaman Portofolio Proyek
Tujuan Pembelajaran
Melatih penggunaan tag HTML seperti <h1>, <p>, <ul>, <img>, <a>, dan <table>
Membuat halaman portofolio sederhana menggunakan HTML murni
Menampilkan informasi proyek, gambar, jadwal, dan kontak
Deskripsi Tugas
Buat halaman Portofolio Proyek menggunakan HTML murni (tanpa CSS). Halaman ini berisi daftar proyek yang pernah kamu buat atau ingin kamu buat, lengkap dengan deskripsi, gambar, dan tautan.
Menampilkan nama halaman: Portofolio Karya [Nama Kamu]
Deskripsi singkat tentang diri
3 Proyek berisi nama proyek, deskripsi, gambar, dan link
Tabel jadwal belajar
Informasi kontak (email & nomor telepon)
File diberi nama: portofolio.html
Langkah Pengerjaan
Buka text editor (Notepad/VS Code)
Buat file baru bernama portofolio.html
Tulis struktur HTML sesuai tampilan yang dicontohkan
Simpan file dan buka di browser
Checklist Penilaian
No
Kriteria
✔/✘
1
File bernama portofolio.html
2
Struktur HTML benar
3
Judul halaman menggunakan <h1>
4
Paragraf deskripsi dengan <p>
5
3 Proyek lengkap (nama, deskripsi, gambar, link)
6
Tabel jadwal belajar
7
Kontak dengan <a> mailto dan tel
Contoh Hasil Akhir
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Portofolio Karya</title>
</head>
<body>
<h1>Portofolio Karya Nur Yono</h1>
<p>Saya adalah pelajar yang sedang belajar HTML. Berikut ini adalah proyek-proyek yang pernah saya buat.</p>
<h2>Proyek 1: Website Toko Buku</h2>
<p>Situs penjualan buku online.</p>
<img src="https://via.placeholder.com/150" alt="Proyek Toko Buku"><br>
<a href="https://contoh.com/tokobuku">Lihat Proyek</a>
<h2>Proyek 2: Aplikasi To Do List</h2>
<p>Catatan tugas harian yang simpel.</p>
<img src="https://via.placeholder.com/150" alt="To Do List"><br>
<a href="https://contoh.com/todolist">Lihat Proyek</a>
<h2>Proyek 3: Web Galeri Foto</h2>
<p>Menampilkan koleksi foto pribadi.</p>
<img src="https://via.placeholder.com/150" alt="Galeri Foto"><br>
<a href="https://contoh.com/galeri">Lihat Proyek</a>
<h2>Jadwal Belajar Mingguan</h2>
<table border="1">
<tr><th>Hari</th><th>Materi</th></tr>
<tr><td>Senin</td><td>Belajar HTML Dasar</td></tr>
<tr><td>Selasa</td><td>Membuat Struktur Web</td></tr>
<tr><td>Rabu</td><td>Membuat Tabel HTML</td></tr>
<tr><td>Kamis</td><td>Menambahkan Gambar & Link</td></tr>
<tr><td>Jumat</td><td>Uji Coba Proyek HTML</td></tr>
</table>
<h2>Kontak</h2>
<p>Email: <a href="mailto:nuryono@example.com">nuryono@example.com</a></p>
<p>Telepon: <a href="tel:08123456789">08123456789</a></p>
</body>
</html>