MODUL BELAJAR HARI 3-4

-

 

Meureuno

MODUL BELAJAR HARI 3-4 — Membuat Halaman Sederhana (Judul, Paragraf, Gambar, Link)

Materi Hari Ini:

✅ Struktur halaman lengkap dengan <header>, <main>, <footer>.
✅ Menambahkan berbagai jenis teks (judul, paragraf, daftar).
✅ Menyusun halaman dengan elemen HTML dasar.
✅ Praktik membuat halaman sederhana yang lebih rapi.

1. Struktur Halaman Lengkap

Sekarang kita belajar bagaimana membuat halaman yang lebih tertata.

Struktur yang akan kita buat:

  • Header → Tempat untuk judul & menu navigasi.
  • Main → Bagian utama berisi konten (paragraf, daftar, gambar).
  • Footer → Informasi tambahan seperti copyright.

2. Kode Dasar Halaman Sederhana

Sekarang, buat file index.html dan salin kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Sederhana</title>
</head>
<body>
    <header>
        <h1>Selamat Datang di Website Saya</h1>
        <nav>
            <a href="#">Home</a> | 
            <a href="#">Tentang</a> | 
            <a href="#">Kontak</a>
        </nav>
    </header>

    <main>
        <h2>Judul Artikel</h2>
        <p>Ini adalah contoh paragraf yang menjelaskan isi website ini.</p>
        
        <h3>Daftar Keunggulan:</h3>
        <ul>
            <li>Mudah dipahami</li>
            <li>Responsif</li>
            <li>Bisa dikembangkan lebih lanjut</li>
        </ul>

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

        <h3>Link Referensi:</h3>
        <p><a href="https://www.google.com" target="_blank">Cari di Google</a></p>
    </main>

    <footer>
        <p>&copy; 2024 Website Sederhana. Dibuat dengan cinta ❤️</p>
    </footer>
</body>
</html>

3. PR Praktik Hari 3-4

✅ Buat file baru bernama index.html
✅ Tambahkan judul, paragraf, dan daftar seperti contoh di atas
✅ Tambahkan minimal 1 gambar menggunakan <img>
✅ Tambahkan minimal 2 link menggunakan <a>
✅ Simpan dan buka di browser untuk melihat hasilnya

BONUS:

  1. Coba tambahkan halaman baru bernama about.html yang berisi deskripsi singkat tentang website kamu.
  2. Coba buat daftar urut menggunakan <ol> (ordered list) untuk menampilkan tahapan belajar HTML.

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