Aplikasi Latihan Membuat Website Dasar – Level SMP

Editor HTML

📘 Materi HTML Pemula

1. Pengenalan HTML

HTML adalah bahasa markup yang digunakan untuk membuat struktur dasar halaman web.

2. Struktur Dasar HTML

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  Isi Halaman
</body>
</html>

3. Heading & Paragraf

Menggunakan tag <h1> sampai <h6> dan <p>.

4. Format Teks

  • <b> — Bold
  • <i> — Italic
  • <u> — Underline
  • <strong> — Penekanan kuat
  • <em> — Penekanan miring

5. Daftar (List)

  • <ul> daftar tidak berurutan
  • <ol> daftar berurutan

6. Gambar

<img src="gambar.jpg" alt="Deskripsi" width="200">

7. Link / Hyperlink

<a href="https://google.com">Kunjungi Google</a>
📙 Materi Level Menengah

1. Tabel

<table border="1">
<tr> <th>Nama</th> <th>Kelas</th> </tr>
<tr> <td>Ali</td> <td>7A</td> </tr>
</table>

2. Formulir HTML

<input type="text">
<textarea></textarea>
<select><option>A</option></select>

3. Audio & Video

<audio controls src="musik.mp3"></audio>
<video controls width="300" src="video.mp4"></video>

4. Layout Dasar

Menggunakan <div> sebagai kontainer dan <span> untuk teks inline.

5. HTML Semantic

  • <header>
  • <footer>
  • <section>
  • <article>

6. Upload Gambar Lokal

<input type="file" accept="image/*">
📗 Materi Level Mahir

1. CSS Dasar

p { color: blue; font-size: 18px; }

2. Inline vs Internal vs Eksternal

  • Inline: di dalam atribut tag
  • Internal: di dalam tag <style>
  • Eksternal: file .css terpisah

3. Flexbox

.box { display: flex; gap: 10px; }

4. Grid

.grid { display: grid; grid-template-columns: 1fr 1fr; }

5. Responsive Design

@media (max-width: 600px) {
  body { background: lightgray; }
}

6. Membuat Website Mini

Menggabungkan struktur HTML + CSS + navigasi link antar halaman.

🎯 Tugas Latihan Level Lanjut
  1. Buat halaman profil lengkap dengan foto, biodata, dan hobi.
  2. Buat tabel nilai minimal 5 mata pelajaran.
  3. Buat galeri foto berisi 6 gambar.
  4. Buat website mini dengan 3 halaman (Home, Tentang, Kontak).
  5. Tambahkan audio atau video ke halaman Home.