HTML Introduction

HTML (HyperText Markup Language) adalah bahasa markup standar untuk dokumen yang dirancang untuk ditampilkan di browser web. Ini dapat dibantu oleh teknologi seperti Cascading Style Sheets (CSS) dan bahasa scripting seperti JavaScript.

Analogi: HTML adalah kerangka (skeleton) dari sebuah website. Ia mendefinisikan struktur dan konten, seperti judul, paragraf, dan gambar.

HTML Basic

Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen: <!DOCTYPE html>. Dokumen itu sendiri dimulai dengan <html> dan diakhiri dengan </html>. Bagian yang terlihat dari dokumen HTML ada di antara <body> dan </body>.

Contoh: Struktur Dasar

Ini Judul Utama Saya

Ini paragraf pertama saya.

<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Ini Judul Utama Saya</h1>
  <p>Ini paragraf pertama saya.</p>
</body>
</html>

HTML Elements

Elemen HTML didefinisikan oleh tag awal, beberapa konten, dan tag akhir. Contoh: <p>Konten saya...</p>. Beberapa elemen HTML tidak memiliki konten (disebut elemen kosong), seperti elemen <br>.

Contoh: Elemen Bersarang (Nested)

Ini adalah teks penting di dalam sebuah paragraf.

<p>Ini adalah <strong>teks penting</strong> di dalam sebuah paragraf.</p>

HTML Attributes

Atribut memberikan informasi tambahan tentang elemen HTML dan selalu ditentukan di tag awal. Atribut biasanya datang dalam pasangan nama/nilai seperti: nama="nilai".

Contoh: Atribut href, src, dan style

Ini adalah link placeholder

Paragraf ini berwarna merah.

<a href="https://www.google.com">Ini adalah link</a>
<img src="gambar.jpg" alt="deskripsi gambar">
<p style="color:red;">Paragraf ini berwarna merah.</p>

HTML Headings

Heading didefinisikan dengan tag <h1> hingga <h6>. <h1> mendefinisikan heading yang paling penting. <h6> mendefinisikan heading yang paling tidak penting.

Contoh: Semua Level Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

HTML Paragraphs

Paragraf selalu dimulai pada baris baru, dan browser secara otomatis menambahkan beberapa spasi putih (margin) sebelum dan sesudah paragraf. Didefinisikan dengan tag <p>.

Contoh: Beberapa Paragraf

Ini adalah paragraf pertama. Browser akan memberikan jarak antar paragraf secara otomatis.

Ini adalah paragraf kedua. Perhatikan spasi di atas paragraf ini.

<p>Ini adalah paragraf pertama. Browser akan memberikan jarak antar paragraf secara otomatis.</p>
<p>Ini adalah paragraf kedua. Perhatikan spasi di atas paragraf ini.</p>

HTML Links

Tautan HTML didefinisikan dengan tag <a>. Tujuan tautan ditentukan dalam atribut href.

Contoh: Link ke Tab Baru

Kunjungi Google di Tab Baru

<a href="https://google.com" target="_blank">Kunjungi Google di Tab Baru</a>

HTML Images

Gambar disematkan di halaman HTML menggunakan tag <img>. Tag ini adalah elemen kosong, hanya berisi atribut, dan tidak memiliki tag penutup.

Contoh: Gambar dengan Ukuran

<img src="https://placehold.co/200x100" alt="Contoh Gambar" width="200" height="100">

HTML Tables

Tabel HTML memungkinkan penulis web untuk mengatur data seperti teks, gambar, tautan, dll. ke dalam baris dan kolom sel.

Contoh: Tabel Sederhana

Nama Depan	Nama Belakang
Budi	Santoso
Ani	Wijaya

<table border="1">
  <tr>
    <th>Nama Depan</th>
    <th>Nama Belakang</th>
  </tr>
  <tr>
    <td>Budi</td>
    <td>Santoso</td>
  </tr>
  <tr>
    <td>Ani</td>
    <td>Wijaya</td>
  </tr>
</table>

HTML Lists

HTML menawarkan tiga cara untuk mendefinisikan daftar item: daftar tidak terurut <ul> (dengan bullet), daftar terurut <ol> (dengan angka), dan daftar deskripsi <dl>.

Contoh: Daftar Terurut dan Tidak Terurut

Daftar Belanja (Tidak Terurut)

Kopi
Teh
Susu

Langkah-langkah (Terurut)

Langkah Pertama
Langkah Kedua
Langkah Ketiga

<h3>Daftar Belanja (Tidak Terurut)</h3>
<ul>
  <li>Kopi</li>
  <li>Teh</li>
  <li>Susu</li>
</ul>

<h3>Langkah-langkah (Terurut)</h3>
<ol>
  <li>Langkah Pertama</li>
  <li>Langkah Kedua</li>
  <li>Langkah Ketiga</li>
</ol>

HTML Semantics

Elemen semantik dengan jelas mendeskripsikan maknanya baik untuk browser maupun untuk pengembang. Contoh elemen semantik: <header>, <nav>, <main>, <article>, dan <footer>.

Contoh: Struktur Halaman Semantik

Header (Logo, Judul)

Main Content (Artikel Utama)

<header>
  <h1>Judul Website</h1>
</header>

<nav>
  <a href="#">Home</a> | <a href="#">Tentang</a>
</nav>

<main>
  <p>Konten utama halaman berada di sini.</p>
</main>

<footer>
  <p>Copyright © 2024</p>
</footer>