Jobsheet Praktek HTML

1️⃣ Tugas 1: Struktur Dasar HTML

Status

Belum Selesai

🎯 Tujuan Pembelajaran

• Memahami struktur dasar dokumen HTML
• Mengenal tag-tag wajib dalam HTML
• Membuat halaman HTML pertama

📋 Langkah-langkah

1

Buat struktur HTML dasar

Mulai dengan <!DOCTYPE html>

2

Tambahkan tag <html>

Dengan atribut lang="id"

3

Buat bagian <head>

Berisi meta dan title

4

Buat bagian <body>

Berisi konten halaman

💡 Template Code

<!DOCTYPE html>

<head>

<title>Halaman Pertama Saya</title>

</head>

<body>

<h1>Selamat Datang!</h1>

<p>Ini adalah halaman HTML pertama saya.</p>

</body>

</html>

✏️ Area Praktek

👁️ Preview

Hasil:

✅ Validasi

Jalankan kode untuk melihat validasi

2️⃣ Tugas 2: Heading & Text

Status

Belum Selesai

🎯 Tujuan Pembelajaran

• Menggunakan tag heading (h1-h6)
• Membuat paragraf dengan tag <p>
• Memformat text dengan tag khusus

📋 Yang Harus Dibuat

✓ Heading utama (h1) dengan judul "Profil Saya"

✓ Sub-heading (h2) dengan "Tentang Saya"

✓ Paragraf perkenalan diri

✓ Text tebal dan miring

✓ Sub-heading (h3) dengan "Hobi Saya"

✓ Paragraf tentang hobi

💡 Template Code

<h1>Profil Saya</h1>

<h2>Tentang Saya</h2>

<p>Saya adalah <em>siswa</em> yang sedang belajar HTML.</p>

<p>Hobi saya adalah...</p>

✏️ Area Praktek

👁️ Preview

Hasil:

✅ Validasi

Jalankan kode untuk melihat validasi

3️⃣ Tugas 3: Link & Gambar

Status

Belum Selesai

🎯 Tujuan Pembelajaran

• Membuat link dengan tag <a>
• Menampilkan gambar dengan tag <img>
• Menggunakan atribut href dan src

📋 Yang Harus Dibuat

✓ Link ke website favorit

✓ Link ke email (mailto:)

✓ Gambar profil atau avatar

✓ Gambar dengan alt text

✓ Link yang membuka di tab baru

💡 Template Code

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

<a href="mailto:nama@email.com">Email Saya</a>

<a href="https://www.youtube.com" target="_blank">YouTube</a>

✏️ Area Praktek

👁️ Preview

Hasil:

✅ Validasi

Jalankan kode untuk melihat validasi

4️⃣ Tugas 4: Membuat List

Status

Belum Selesai

🎯 Tujuan Pembelajaran

• Membuat ordered list (ol)
• Membuat unordered list (ul)
• Menggunakan list item (li)

📋 Yang Harus Dibuat

✓ Daftar mata pelajaran favorit (ordered list)

✓ Daftar hobi (unordered list)

✓ Daftar makanan favorit (unordered list)

✓ Langkah-langkah membuat sesuatu (ordered list)

💡 Template Code

<h3>Mata Pelajaran Favorit</h3>

<ol>

<li>Matematika</li>

<li>Bahasa Indonesia</li>

<li>Informatika</li>

</ol>

<ul>

<li>Membaca</li>

<li>Bermain game</li>

<li>Menggambar</li>

</ul>

✏️ Area Praktek

👁️ Preview

Hasil:

✅ Validasi

Jalankan kode untuk melihat validasi

5️⃣ Tugas 5: Membuat Tabel

Status

Belum Selesai

🎯 Tujuan Pembelajaran

• Membuat tabel dengan tag <table>
• Menggunakan <tr>, <th>, <td>
• Membuat header tabel

📋 Yang Harus Dibuat

✓ Tabel jadwal pelajaran

✓ Header tabel (Hari, Jam, Mata Pelajaran)

✓ Minimal 5 baris data

✓ Border pada tabel

💡 Template Code

<tr>

<th>Mata Pelajaran</th>

</tr>

<tr>

<td>Senin</td>

<td>Matematika</td>

</tr>

</table>

✏️ Area Praktek

👁️ Preview

Hasil:

✅ Validasi

Jalankan kode untuk melihat validasi

📚 Panduan Penggunaan

1️⃣ Tugas 1: Struktur Dasar HTML

🎯 Tujuan Pembelajaran

📋 Langkah-langkah

💡 Template Code

✏️ Area Praktek

👁️ Preview

✅ Validasi

2️⃣ Tugas 2: Heading & Text

🎯 Tujuan Pembelajaran

📋 Yang Harus Dibuat

💡 Template Code

✏️ Area Praktek

👁️ Preview

✅ Validasi

3️⃣ Tugas 3: Link & Gambar

🎯 Tujuan Pembelajaran

📋 Yang Harus Dibuat

💡 Template Code

✏️ Area Praktek

👁️ Preview

✅ Validasi

4️⃣ Tugas 4: Membuat List

🎯 Tujuan Pembelajaran

📋 Yang Harus Dibuat

💡 Template Code

✏️ Area Praktek

👁️ Preview

✅ Validasi

5️⃣ Tugas 5: Membuat Tabel

🎯 Tujuan Pembelajaran

📋 Yang Harus Dibuat

💡 Template Code

✏️ Area Praktek

👁️ Preview

✅ Validasi

Selamat!

Sertifikat Penyelesaian

📚 Panduan Penggunaan

Jobsheet Praktek HTML

1️⃣ Tugas 1: Struktur Dasar HTML

1. HTML Basics

2. HTML Elements

3. HTML Forms

🚀 HTML Playground

📝 HTML Quiz

🎨 CSS - Cascading Style Sheets

1. CSS Basics

2. Flexbox Layout

3. Responsive Design

🚀 CSS Playground

📝 CSS Quiz

⚡ JavaScript - Programming Language

1. JavaScript Basics

2. DOM Manipulation

3. Async/Await

🚀 JavaScript Playground

Counter Demo

📝 JavaScript Quiz

🐘 PHP - Server-Side Programming

1. PHP Basics

2. Functions & Classes

3. Database Connection

🚀 PHP Code Examples

📝 PHP Quiz

🗄️ MySQL - Database Management

1. SQL Basics

2. CRUD Operations

3. Joins & Relations

🚀 SQL Query Builder

📝 MySQL Quiz

🚀 Final Project Challenge

📝 To-Do List App

👤 User Registration

📊 Dashboard