MODUL BELAJAR HARI 2

-

Meureuno

MODUL BELAJAR HARI 2 — Menambahkan Gambar & Link

Materi Hari Ini:

✅ Cara menambahkan gambar di HTML.
✅ Cara menambahkan link (tautan) ke halaman lain.
✅ Praktik membuat halaman dengan gambar & link.

1. Menampilkan Gambar di HTML

Gunakan tag <img> untuk menampilkan gambar.
Format dasarnya seperti ini:

<img src="gambar.jpg" alt="Deskripsi Gambar">

Keterangan:

  • src = sumber gambar (bisa dari internet atau file lokal).
  • alt = teks alternatif jika gambar gagal dimuat.

Contoh lengkap:

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

(Coba salin kode ini ke halaman HTML-mu!)

2. Menambahkan Link (Tautan)

Gunakan tag <a> untuk menambahkan tautan ke website lain atau halaman lain.

Format dasarnya:

<a href="https://google.com">Klik di sini</a>

Keterangan:

  • href = alamat tujuan link.
  • Teks di antara <a>...</a> adalah teks yang bisa diklik.

Contoh:

<a href="https://hijrahdigitalverse.netlify.app/">Kunjungi Website Hijrah Digital Verse</a>

3. PR Praktik Hari Ini

  1. Buat halaman baru bernama about.html.
  2. Tambahkan gambar profil/logo menggunakan <img>.
  3. Tambahkan link navigasi dari index.html ke about.html dan sebaliknya.

Contoh index.html setelah update:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homepage</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah halaman utama.</p>

    <a href="about.html">Tentang Saya</a>  

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

Contoh about.html:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Me</title>
</head>
<body>
    <h1>Halo, Ini Halaman About!</h1>
    <p>Saya sedang belajar HTML bersama Cloudi.</p>

    <a href="index.html">Kembali ke Home</a>  
</body>
</html>

BONUS:

  1. Coba tambahkan gambar logo Hijrah Digital di about.html.
  2. Coba buat link yang saat diklik terbuka di tab baru.
    • Gunakan target="_blank" seperti ini: 
      <a href="https://google.com" target="_blank">Buka Google</a>

 Meureuno

Komentar

Posting Komentar

Postingan populer dari blog ini

HTML Profesional

-
  NEXT PLAN BERSAMA  UNTUK JADI EXPERT: Belajar Struktur HTML Profesional: Bagaimana cara bikin halaman multi-section (Home, About, Blog, Contact). Cara pakai semantic tag HTML5 (header, nav, main, footer). Pahami CSS Lanjutan: Buat layout grid & flexbox. Efek hover premium. Responsive design (biar cakep di HP & desktop). Integrasi JavaScript Sederhana: Bikin animasi sendiri. Interaksi tombol, form, dark mode, dsb. Optimasi Website: SEO terbaik. Fast loading. Google Analytics & Search Console. Latihan Buat Project Sendiri: Cloudi siap temani bikin project baru full dari nol, misal: – Website portfolio pribadi. – Blog Islami. – Landing page produk. – Galeri foto/portfolio bisnis.                       Meureuno
Baca selengkapnya

MODUL BELAJAR HARI 1

-
Meureuno MODUL BELAJAR HARI 1 — Fondasi HTML Dasar Materi: Hari ini kita belajar tentang: ✅ Apa itu HTML. ✅ Struktur dasar halaman HTML. ✅ Elemen penting: <!DOCTYPE> , <html> , <head> , <body> . ✅ Bikin halaman pertama kamu sendiri! Penjelasan Singkat: HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman website. Ibarat rumah, HTML itu kerangka bangunannya. Struktur Dasar HTML: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halo Dunia!</title> </head> <body> <h1>Selamat Datang di Website Pertamaku</h1> <p>Ini adalah paragraf pertama yang aku buat bersama meureunoweb.</p> </body> </html> Tugas Hari 1: Buka teks editor (bisa pakai Notepad, VS Code, atau online editor seperti https://co...
Baca selengkapnya

MODUL BELAJAR HARI 17-18

-
  Hari 17-18: Manipulasi DOM (Dokumen Object Model) Hari ini kita akan belajar bagaimana JavaScript bisa mengubah elemen di halaman web secara dinamis! 1. Apa Itu DOM? DOM (Document Object Model) adalah struktur pohon dari elemen-elemen dalam halaman web. Dengan JavaScript, kita bisa: ✅ Mengubah teks dan gambar. ✅ Menambahkan atau menghapus elemen. ✅ Mengubah gaya (CSS) secara dinamis. 2. Mengubah Teks dengan JavaScript Buat file index.html dan tambahkan kode ini: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Manipulasi DOM</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; } #text { font-size: 20px; color: green; } </style> </head> <body> <h1>Belajar Manipulasi DOM</h1> ...
Baca selengkapnya