Advertisement

Pemrograman Dasar HTML

November 22, 2024

1. Pengenalan HTML

Apa itu HTML?

  • HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web.
  • HTML tidak termasuk dalam kategori programming language karena tidak memiliki logika seperti if-else atau loop. HTML hanya digunakan untuk mendeskripsikan elemen-elemen pada halaman web.

Kelebihan HTML

  • Mudah dipelajari: Tidak memerlukan sintaks yang rumit.
  • Universal: Didukung oleh semua browser modern.
  • Fundamental: Merupakan dasar dari semua teknologi web.

Struktur Dasar HTML

HTML memiliki struktur standar yang selalu dimulai dengan deklarasi <!DOCTYPE html> untuk memberi tahu browser bahwa dokumen ini adalah HTML5.

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya di HTML.</p>
</body>
</html>

Penjelasan Struktur:

  1. <!DOCTYPE html>: Memberitahu browser bahwa dokumen menggunakan HTML5.
  2. <html>: Tag pembuka dokumen HTML. Semua elemen HTML ada di dalamnya.
  3. <head>: Bagian ini berisi metadata, seperti judul dan link ke file CSS atau JavaScript.
  4. <title>: Judul yang muncul di tab browser.
  5. <body>: Berisi konten utama halaman web yang terlihat oleh pengguna.

2. Elemen dan Tag HTML

HTML terdiri dari tag yang membentuk elemen. Setiap elemen memiliki fungsi tertentu.

Heading

  • Digunakan untuk membuat judul atau subjudul.
  • HTML menyediakan 6 level heading: <h1> hingga <h6>.
    • <h1> adalah yang terbesar.
    • <h6> adalah yang terkecil.

Contoh:

<h1>Judul Utama</h1>
<h2>Sub Judul</h2>
<h3>Judul Kecil</h3>

Paragraf

  • Menggunakan tag <p> untuk menulis teks paragraf.

Contoh:

<p>Ini adalah paragraf pertama saya.</p>
<p>Paragraf ini digunakan untuk menambahkan teks yang panjang.</p>

Teks Spesial

  • Tebal: <b> atau <strong>.
  • Miring: <i> atau <em>.
  • Garis Bawah: Tidak tersedia secara langsung, tetapi bisa dengan CSS.

Contoh:

<p>Ini adalah teks <b>tebal</b>.</p>
<p>Ini adalah teks <i>miring</i>.</p>

Link

  • Gunakan tag <a> untuk membuat hyperlink.

Sintaks:

<a href="URL">Teks Link</a>

Contoh:

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

Gambar

  • Gunakan tag <img> untuk menampilkan gambar.
  • Tag <img> bersifat self-closing (tidak memiliki tag penutup).

Sintaks:

<img src="URL" alt="Deskripsi Gambar">

Contoh:

<img src="https://via.placeholder.com/150" alt="Contoh Gambar">

3. Membuat List

HTML menyediakan dua jenis list:

  1. Ordered List (bernomor): Menggunakan <ol>.
  2. Unordered List (bullet): Menggunakan <ul>.

Sintaks:

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

<ul>
    <li>Item A</li>
    <li>Item B</li>
</ul>

4. Membuat Tabel

Tabel digunakan untuk menyusun data dalam bentuk baris dan kolom.

Tag yang Digunakan:

  • <table>: Membuat tabel.
  • <tr>: Baris tabel.
  • <th>: Header tabel.
  • <td>: Data tabel.

Contoh:

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Ani</td>
        <td>17</td>
    </tr>
    <tr>
        <td>Budi</td>
        <td>18</td>
    </tr>
</table>

5. Formulir HTML

Formulir digunakan untuk mengumpulkan data dari pengguna.

Tag yang Digunakan:

  • <form>: Membungkus formulir.
  • <input>: Untuk data input.
  • <textarea>: Untuk teks panjang.
  • <button>: Tombol.

Contoh:

<form action="/submit" method="post">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">Kirim</button>
</form>

6. Mempercantik dengan CSS

CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan HTML.

Contoh:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
            margin: 20px;
        }
        h1 {
            color: #333;
        }
        p {
            color: #666;
        }
    </style>
</head>
<body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah halaman yang dibuat dengan HTML dan CSS.</p>
</body>
</html>

7. Penugasan

Berikan siswa latihan sederhana:

  1. Latihan 1: Buat halaman dengan heading, paragraf, dan link.
  2. Latihan 2: Tambahkan tabel data sederhana.
  3. Latihan 3: Buat formulir dengan input nama dan email.

Semoga penjelasan ini memudahkan Pak Guru Julian dalam mengajar! Kalau butuh penyesuaian, beri tahu saja. 😊

Julian

Diposting oleh Julian