>
[ ACADEMY: CORE_FOUNDATION ]
MODULE: HTML-01

H. T. M. L.

HYPERTEXT MARKUP LANGUAGE

> Menginisiasi protokol bahasa web absolut...
> Menyusun kerangka tulang dokumen digital...
> Geser untuk membedah struktur.

SYSTEM_READY
01 / 09
<>
[ KNOWLEDGE_BASE: CONCEPT ]
MODULE: HTML-02

01 // Kerangka Tulang Web

Bukan Bahasa Pemrograman!

HTML adalah sebuah bahasa Markup. Fungsinya bukan untuk membuat logika algoritma, melainkan mendeskripsikan kepada Browser (seperti Chrome) mengenai struktur konten halaman.

  • HTML = Tulang/Rangka.
  • CSS = Kulit/Pakaian.
  • JS = Otak/Otot.
⚠️ MYTH_BUSTER INFO

"Saya seorang programmer HTML."

Itu adalah kalimat yang salah secara teknis. Karena HTML tidak memiliki variabel, looping, atau fungsi matematika. Ia murni untuk struktur data visual.

CONCEPT_LOADED
02 / 09
<>
[ SYNTAX: ANATOMY ]
MODULE: HTML-03

02 // Anatomi Sebuah Tag

HTML bekerja dengan membungkus teks menggunakan kurung sudut < >.

<p class="paragraf"> Ini adalah teks konten </p>

<p>

Tag Pembuka: Menyatakan dimulainya sebuah elemen (dalam hal ini, Paragraf).

Atribut

Memberikan informasi tambahan pada tag (misal: class, id, atau sumber gambar).

</p>

Tag Penutup: Memiliki garis miring (slash). Menandakan elemen tersebut berakhir.

TAG_PARSED
03 / 09
<>
[ SYNTAX: BOILERPLATE ]
MODULE: HTML-04

03 // Struktur Wajib Dokumen

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Tab</title>
  </head>
  <body>
    Konten terlihat ada di sini.
  </body>
</html>
  • !DOCTYPE html Mendeklarasikan bahwa ini adalah HTML5 modern.

  • <head> Area untuk otak dokumen (metadata, judul tab, link ke CSS). Tidak terlihat di halaman.

  • <body> Area untuk semua konten visual yang terlihat oleh pengunjung web.
BOILERPLATE_GENERATED
04 / 09
<>
[ COMPONENTS: TYPOGRAPHY ]
MODULE: HTML-05

04 // Teks & Heading

Cara dasar untuk menampilkan tulisan.

<h1> Judul Paling Besar (H1) </h1>
<h3> Judul Sub-bagian (H3) </h3>
<p> Ini adalah sebuah paragraf teks standar. </p>
<strong> Teks Tebal </strong>

Aturan Penting: Dalam satu halaman web, sangat disarankan hanya menggunakan satu buah tag <h1> untuk optimasi SEO (Search Engine Optimization) Google.

FONTS_RENDERED
05 / 09
<>
[ COMPONENTS: MEDIA_AND_LINKS ]
MODULE: HTML-06

05 // Link & Gambar

Atribut adalah kunci

Tag Anchor <a>

Untuk membuat link yang bisa diklik. Wajib memiliki atribut href (tujuan link).

<a href="google.com">Klik Sini</a>

Tag Image <img>

Menampilkan gambar. Uniknya, tag ini tidak memiliki tag penutup. Butuh atribut src (sumber) dan alt (teks alternatif).

<img src="logo.png" alt="Logo Web">
ASSETS_LINKED
06 / 09
<>
[ ARCHITECTURE: SEMANTIC ]
MODULE: HTML-07

06 // Semantic HTML

Jangan cuma pakai DIV!

Tag Semantic memberitahu mesin pencari (Google Bot) apa arti dari kontenmu, bukan sekadar bentuk visualnya.

<header>

Bagian atas web, logo, judul.

<nav>

Menu navigasi utama.

<main>

Isi konten terpenting.

<section>

Membagi bab/bagian konten.

<article>

Berita/Postingan mandiri.

<footer>

Catatan kaki, hak cipta.

SEO_OPTIMIZED
07 / 09
<>
[ PRACTICAL_LAB: EXECUTION ]
MODULE: HTML-08

07 // Micro-Lab: Kode Pertamamu

💻 TERMINAL_EXERCISE ACTION_REQUIRED

1. Buka teks editor (VS Code / Notepad).
2. Tulis kode berikut:
<h1>Target Terkunci</h1>
<p>Saya sedang belajar HTML.</p> 3. Simpan file dengan nama index.html.
4. Klik ganda file tersebut (akan otomatis terbuka di browsermu).

> BOOM! Anda baru saja memprogram kerangka website pertama Anda.

EXECUTION_SUCCESS
08 / 09
<
[ SYSTEM: ACADEMY_ACCESS ]
NODE_ID: COURSLAN-MAIN
BANGUN ARSITEKTUR DIGITALMU

BERSAMA COURSLAN

📡 ACCESS_LEVELS_EXPLAINED READ_CAREFULLY

Courslan adalah sebuah tempat pembelajaran yang bisa kalian akses secara gratis maupun berbayar.

[+] AKSES GRATIS: Mengikuti rutinan pengulangan pembelajaran yang saya lakukan secara pribadi untuk menguatkan ilmu yang telah dipelajari.
[+] AKSES BERBAYAR: Memungkinkan kalian merencanakan waktu khusus untuk pengajaran di luar waktu keseharian saya.

AWAITING_RECRUIT // SESSION_ENDED
09 / 09