LKPD 02: Format Teks dengan HTML

1 Identitas Peserta Didik

Wajib Diisi

Pilih Sekolah, Kelas, dan Nama Lengkap Anda di bawah ini untuk mengaktifkan modul laboratorium praktikum HTML.

Sekolah

Kelas / Jurusan

Nama Lengkap

2 Ringkasan Teori: Format Teks & List pada HTML

Materi KD: Web Programming

HTML menyediakan berbagai macam tag untuk mengatur struktur dan format teks (Typography). Dengan menggunakan tag yang tepat, halaman web tidak hanya terlihat rapi bagi pengguna, tetapi juga memiliki semantik yang baik untuk dibaca oleh mesin pencari (SEO).

Ringkasan Elemen HTML Teks & List

Kategori Tag	Sintaks (Tag)	Fungsi & Penerapan	Contoh Hasil / Efek Visual
Heading & Paragraf	<h1> s/d <h6>, <p>	Mendefinisikan judul berjenjang dan membuat blok paragraf baru.	Judul besar (h1) hingga judul terkecil (h6) dan teks biasa.
Penekanan (Emphasis)	<b>, <strong>, <i>, <em>	Menebalkan teks atau memiringkan teks. `strong` dan `em` memiliki nilai semantik penting.	Teks Tebal atau Teks Miring.
Daftar (List)	<ul>, <ol>, <li>	ul (unordered/titik bullet), ol (ordered/angka berurutan), li (isi/item dari daftar).	1. Langkah A 2. Langkah B

Tipografi Dasar

Gunakan <br> untuk mematahkan baris tanpa membuat paragraf baru, dan <hr> untuk garis horizontal pemisah konten.

Format Tambahan

Tag seperti <mark> (menyorot kuning), <sub> (karakter bawah spt H₂O), dan <sup> (karakter atas spt x²).

Nested List

Daftar bersarang. Kamu bisa memasukkan tag <ul> atau <ol> di dalam tag <li> milik daftar sebelumnya.

3 Laboratorium Simulasi Interaktif HTML

Terapkan tag HTML yang tepat pada layout artikel berita dan penyusunan SOP.

Interactive Practical Modules

Simulasi 1: Layouting Halaman Berita

5 Elemen Teks

Klik ikon biru pada draf artikel di bawah ini untuk memilih elemen tag HTML yang tepat agar teks terformat (Heading, Paragraf, Bold, Italic, Mark).

Peluncuran Teknologi Web Terbaru di Tahun 2026

Jakarta - Perusahaan teknologi terkemuka baru saja mengumumkan perilisan framework HTML versi mutakhir. Inovasi ini ditujukan untuk mempermudah developer membangun website interaktif dengan kinerja tinggi.

"Ini adalah loncatan revolusioner bagi industri perangkat lunak," ujar CEO perusahaan.

Fitur andalan dari update ini adalah Sistem Rendering Ultra Cepat.

Pembaruan sistem akan mulai digulirkan pada 15 November 2026 secara global.

Klik ikon pada draf untuk mulai format.

Simulasi 2: SOP Pembuatan Web

Sequential Chain Quiz

Siswa diminta membuat Standar Operasional Prosedur (SOP). Ambil keputusan tag list HTML secara berurutan!

1. Daftar Alat 2. Item Daftar 3. Langkah Kerja 4. Sub-langkah

Langkah 1: Membuat Daftar Alat

Anda akan membuat daftar alat/software yang dibutuhkan (seperti VS Code, Browser). Urutan alat ini tidak masalah/tidak baku. Tag HTML pembuka apa yang digunakan?

Selesaikan 4 rantai struktur list HTML.

4 Tabel Hasil Log Simulasi HTML

Rekapitulasi tag format teks dan penyusunan list yang direkap otomatis.

No	Modul Simulasi	Objek Teks / Langkah	Keputusan Sintaks Tag HTML	Status Validasi W3C	Aksi
Belum ada data pengamatan. Klik tombol "+ Catat Log" pada modul simulasi di atas untuk menyimpan hasil.

5 Uji Kompetensi Dasar Format Teks HTML

Jawablah 20 pertanyaan pilihan ganda berikut untuk menguji pemahaman sintaks Anda.

20 Soal Pilihan Ganda

Petunjuk Penyelesaian:

Pastikan seluruh soal uji kompetensi dan tabel pengamatan telah terisi lengkap sebelum mengirim LKPD.