Bab 2: Elemen Dasar HTML

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

1. 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>

2. 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>

3. Preformatted Text (<pre>)

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

4. 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

1. Unordered List (<ul>)

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

2. Ordered List (<ol>)

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

3. Definition List (<dl>)

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

4. 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

1. 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>

2. 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

1. 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:[e-mail]">Kirim Email</a>
   
   <!-- Phone Link -->
   <a href="tel:[phone]">Hubungi Kami</a>

2. 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

1. Basic Image

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

2. Image dengan Atribut

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

3. Image dalam Link

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

4. 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

1. Apa perbedaan antara <strong> dan <b>?

2. Bagaimana cara membuat link yang membuka di tab baru?

3. Jelaskan perbedaan antara ordered dan unordered list!

4. Apa fungsi atribut alt pada tag image?

5. Bagaimana cara membuat cell tabel yang memanjang 2 kolom?

Referensi

• MDN Web Docs - HTML Elements

• W3Schools HTML Tutorial

• HTML.com