Bab 2: Elemen Dasar HTML

2.1 Text Elements

2.1.1 Heading Elements (h1-h6)

Heading digunakan untuk menunjukkan hirarki dan struktur konten halaman web.

<h1>Heading Level 1</h1> <!-- Paling penting, biasanya judul utama -->
<h2>Heading Level 2</h2> <!-- Sub-judul utama -->
<h3>Heading Level 3</h3> <!-- Sub-sub-judul -->
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6> <!-- Heading terkecil -->

Best Practices untuk Heading:

Gunakan hanya satu <h1> per halaman
Jaga urutan hirarki heading
Jangan lewati level heading
Gunakan heading untuk struktur, bukan styling

2.1.2 Paragraf dan Text Formatting

Paragraf (<p>)

<p>Ini adalah sebuah paragraf. Paragraf berisi blok teks yang 
saling berhubungan. HTML akan mengabaikan line break dalam kode
sumber dan menyesuaikan dengan lebar container.</p>

Text Formatting

<!-- Text Emphasis -->
<strong>Teks penting</strong>
<em>Teks yang ditekankan</em>

<!-- Text Styling -->
<b>Teks tebal</b>
<i>Teks miring</i>
<u>Teks bergaris bawah</u>
<mark>Teks yang disorot</mark>
<small>Teks kecil</small>
<del>Teks yang dihapus</del>
<ins>Teks yang disisipkan</ins>
<sub>Teks subscript</sub>
<sup>Teks superscript</sup>

Preformatted Text (<pre>)

<pre>
Teks dalam tag pre
    akan ditampilkan
        sesuai format
            yang ditulis
</pre>

Line Breaks dan Horizontal Rules

<p>Baris pertama<br>Baris kedua</p>

<p>Bagian pertama</p>
<hr>
<p>Bagian kedua</p>

2.2 List dan Tabel

2.2.1 List Elements

Unordered List (<ul>)

<ul>
    <li>Item pertama</li>
    <li>Item kedua</li>
    <li>Item ketiga</li>
</ul>

Ordered List (<ol>)

<ol>
    <li>Langkah pertama</li>
    <li>Langkah kedua</li>
    <li>Langkah ketiga</li>
</ol>

Definition List (<dl>)

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

Nested Lists

<ul>
    <li>Buah-buahan
        <ul>
            <li>Apel</li>
            <li>Jeruk</li>
        </ul>
    </li>
    <li>Sayuran
        <ul>
            <li>Wortel</li>
            <li>Bayam</li>
        </ul>
    </li>
</ul>

2.2.2 Tabel

Struktur Dasar Tabel

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Footer 1</td>
            <td>Footer 2</td>
        </tr>
    </tfoot>
</table>

Cell Spanning

<table>
    <tr>
        <td colspan="2">Cell yang memanjang 2 kolom</td>
    </tr>
    <tr>
        <td rowspan="2">Cell yang memanjang 2 baris</td>
        <td>Cell normal</td>
    </tr>
    <tr>
        <td>Cell normal</td>
    </tr>
</table>

2.3 Links dan Images

2.3.1 Hyperlinks

Basic Links

<!-- External Link -->
<a href="https://www.example.com">Website External</a>

<!-- Internal Link -->
<a href="/halaman/about.html">Halaman About</a>

<!-- Email Link -->
<a href="mailto:email@example.com">Kirim Email</a>

<!-- Phone Link -->
<a href="tel:+621234567890">Hubungi Kami</a>

Link Attributes

<!-- Target Attribute -->
<a href="https://example.com" target="_blank">Buka di tab baru</a>

<!-- Title Attribute -->
<a href="about.html" title="Pelajari lebih lanjut tentang kami">About</a>

<!-- Download Attribute -->
<a href="file.pdf" download>Download PDF</a>

2.3.2 Images

Basic Image

<img src="gambar.jpg" alt="Deskripsi gambar">

Image dengan Atribut

<img 
    src="gambar.jpg" 
    alt="Deskripsi gambar"
    width="300"
    height="200"
    loading="lazy"
>

Image dalam Link

<a href="halaman.html">
    <img src="thumbnail.jpg" alt="Thumbnail">
</a>

Image Maps

<img src="peta.jpg" alt="Peta navigasi" usemap="#workmap">

<map name="workmap">
    <area shape="rect" coords="34,44,270,350" href="daerah1.html">
    <area shape="circle" coords="290,172,50" href="daerah2.html">
</map>

2.3.3 Favicon

<head>
    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    <!-- Untuk berbagai ukuran device -->
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
</head>

Latihan Praktik

Latihan 1: Text Formatting

Buatlah artikel sederhana yang menggunakan berbagai elemen text formatting:

Heading berbagai level
Paragraf dengan formatting
Preformatted text
Line breaks dan horizontal rules

Latihan 2: List dan Tabel

Buatlah:

Menu makanan menggunakan nested list
Jadwal kegiatan menggunakan tabel
Daftar definisi istilah HTML

Latihan 3: Website Sederhana

Buatlah website sederhana yang menggabungkan:

Navigation links
Images
Lists
Tables
Text formatting

Ringkasan Bab

Text elements membentuk struktur konten dasar
List membantu mengorganisir informasi
Tabel untuk menampilkan data terstruktur
Links menghubungkan halaman dan resources
Images menambah elemen visual

Quiz Bab 2

Apa perbedaan antara <strong> dan <b>?
Bagaimana cara membuat link yang membuka di tab baru?
Jelaskan perbedaan antara ordered dan unordered list!
Apa fungsi atribut alt pada tag image?
Bagaimana cara membuat cell tabel yang memanjang 2 kolom?

Referensi

PreviousBab 1: Pengenalan HTML NextBab 3: Forms dan Input

Last updated 1 month ago