Pengantar HTML Modern & Struktur Elemen

Selamat datang di dunia pemrograman web! Dalam bab ini, kita akan mempelajari dasar dari semua halaman website di internet, yaitu HTML (HyperText Markup Language).
Untuk mempermudah pemahaman Anda, mari tonton video penjelasan interaktif berikut terlebih dahulu sebelum membaca detail materi:
Video Materi
Video Materi

Apa itu HTML?

HTML singkatan dari HyperText Markup Language.
  • HyperText adalah teks yang berfungsi sebagai penghubung (link) ke halaman lain.
  • Markup Language adalah bahasa penanda menggunakan tanda-tanda khusus (disebut Tag) untuk memberi tahu browser bagaimana teks atau konten harus ditampilkan.
HTML bukanlah bahasa pemrograman (programming language), karena HTML tidak memiliki logika matematika, percabangan (if-else), atau perulangan (loops). HTML adalah bahasa penanda struktur dokumen.

Apa itu Tag HTML & Cara Menggunakannya?

Sebagian besar elemen HTML dibangun menggunakan Tag Pembuka dan Tag Penutup, dengan isi konten di antaranya.
Format penulisan umum:
htmlcode
<nama_tag>Konten di dalamnya...</nama_tag>
Contoh:
  • Tag pembuka: ``

``

  • Konten: Halo Dunia
  • Tag penutup: ``
Beberapa tag tidak memiliki konten dan tidak memerlukan tag penutup. Tag jenis ini dinamakan Self-Closing Tag (tag penutup mandiri), contohnya tag gambar dan tag input.

Elemen Dasar HTML yang Sering Digunakan

Berikut adalah elemen-elemen fundamental yang wajib Anda ketahui (referensi dari
[
W3SchoolsBelajar Lengkap di Sini W3Schools HTML Tutorial ](
W3SchoolsBelajar Lengkap di Sini
https://www.w3schools.com/html/
) ):

1. Heading (Judul): ``

sampai

``
Digunakan untuk membuat judul atau sub-judul. ``

adalah tingkatan judul terbesar/terpenting, sedangkan ``

`` adalah yang terkecil.
htmlcode
<h1>Ini Judul Utama</h1>
<h2>Ini Sub-judul Kedua</h2>
<h3>Ini Sub-judul Ketiga</h3>

2. Paragraf: ``

``
Digunakan untuk menulis paragraf teks panjang.
htmlcode
<p>Ini adalah sebuah paragraf teks yang berisi penjelasan materi belajar kita.</p>

3. Tombol: ````

Digunakan untuk membuat tombol interaktif yang bisa diklik.
htmlcode
<button>Klik Saya!</button>

4. Gambar: ``

Digunakan untuk menampilkan gambar. Tag ini menggunakan atribut src (sumber lokasi gambar) dan alt (teks deskripsi cadangan jika gambar gagal dimuat).
htmlcode
<img src="https://images.unsplash.com/photo-1507238691740-187a5b1d37b8" alt="Developer Desk" />

5. Input Text: ``

Digunakan untuk menerima data masukan dari pengguna (seperti mengisi form pendaftaran). Memiliki atribut type (seperti "text", "password", "email") dan placeholder (petunjuk samar di dalam kotak).
htmlcode
<input type="text" placeholder="Masukkan nama Anda..." />

Referensi & Kutipan

[
MDN Web DocsBelajar Lengkap di Sini
HTML Basics Guide
](
MDN Web DocsBelajar Lengkap di Sini
https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics
)
MDN Web DocsBelajar Lengkap di Sini
  • W3Schools: [
W3SchoolsBelajar Lengkap di Sini HTML Introduction & Tag List ](
W3SchoolsBelajar Lengkap di Sini
https://www.w3schools.com/html/html_intro.asp
)

Tantangan Praktik Mandiri

Untuk memastikan Anda memahami cara kerja tag di atas, selesaikan tantangan di panel sebelah kanan: Tulis kode HTML yang menampilkan kartu profil sederhana berisi judul nama Anda (``

), biografi singkat (``

), gambar (), input komentar (``), dan tombol submit (````).

Asah Kemampuanmu!

Materi ini dilengkapi dengan latihan interaktif. Klik tombol di bawah untuk langsung mencoba kuis atau menulis kode.

Selanjutnya