Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Blogging / SEO

Pengertian dan Struktur Kode HTML: Panduan Lengkap Pemula

Posting Komentar

HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat halaman web. HTML berfungsi sebagai fondasi dalam pembangunan sebuah website, memungkinkan pengguna untuk menampilkan teks, gambar, video, tautan, tabel, dan elemen lainnya dalam halaman web. HTML pertama kali dikembangkan oleh Tim Berners-Lee pada tahun 1991 dan terus berkembang hingga versi terbaru, yaitu HTML5.

Pengertian dan Struktur Kode HTML: Panduan Lengkap

HTML bukanlah bahasa pemrograman seperti JavaScript atau Python, tetapi lebih berperan sebagai struktur dasar yang digunakan untuk menyusun elemen-elemen dalam sebuah halaman web. Dengan menggunakan HTML, pengembang dapat menentukan tata letak dan konten yang akan ditampilkan di browser.

Fungsi HTML dalam Pengembangan Web

HTML memiliki berbagai fungsi utama dalam pengembangan web, antara lain:

  1. Menyusun struktur dasar halaman web agar dapat ditampilkan di browser.
  2. Mengatur format teks, seperti heading, paragraf, dan daftar.
  3. Menyisipkan gambar, video, dan media lainnya ke dalam halaman web.
  4. Membuat hyperlink yang menghubungkan satu halaman ke halaman lainnya.
  5. Berinteraksi dengan teknologi lain seperti CSS untuk desain dan JavaScript untuk interaktivitas.

Struktur Dasar Kode HTML

Setiap halaman HTML memiliki struktur dasar yang terdiri dari beberapa elemen utama. Berikut adalah contoh struktur dasar kode HTML:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Selamat Datang di Website Saya</h1>
    <p>Ini adalah contoh struktur dasar HTML.</p>
</body>
</html>

Penjelasan Struktur Dasar HTML

  1. <!DOCTYPE html> berfungsi untuk memberi tahu browser bahwa dokumen ini menggunakan standar HTML5.
  2. <html lang="id"> merupakan elemen utama yang membungkus seluruh halaman HTML. Atribut lang="id" menunjukkan bahwa bahasa utama halaman ini adalah bahasa Indonesia.
  3. <head> adalah bagian yang berisi metadata, seperti judul halaman, karakter encoding, dan informasi lain yang tidak langsung ditampilkan di halaman web.
  4. <meta charset="UTF-8"> menentukan encoding karakter yang digunakan, memastikan dukungan terhadap berbagai simbol dan huruf.
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0"> membuat halaman web responsif di berbagai perangkat.
  6. <title> digunakan untuk menentukan judul halaman yang muncul di tab browser.
  7. <body> adalah bagian utama yang berisi konten yang akan ditampilkan di halaman web.
  8. <h1> adalah heading utama dalam halaman.
  9. <p> digunakan untuk membuat paragraf teks.

Elemen-Elemen Dasar dalam HTML

Selain struktur dasar, ada beberapa elemen penting yang sering digunakan dalam HTML:

  1. Heading HTML memiliki enam tingkat heading, dari <h1> hingga <h6>, yang digunakan untuk menentukan tingkat kepentingan judul atau subjudul.

    <h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>

  2. Paragraf dan Pemformatan Teks Elemen <p> digunakan untuk membuat paragraf. Beberapa elemen lain untuk pemformatan teks adalah:

    <p><b>Ini teks tebal</b>, <i>ini teks miring</i>, dan <u>ini teks bergaris bawah</u>.</p>

  3. Tautan (Hyperlink) Elemen <a> digunakan untuk membuat tautan ke halaman lain atau sumber eksternal.

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

  4. Gambar Elemen <img> digunakan untuk menampilkan gambar dalam halaman web.

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

  5. Daftar (List) HTML menyediakan dua jenis daftar utama:

    • Daftar tidak berurutan (<ul>) 
      <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
    • Daftar berurutan (<ol>) 
      <ol>
    <li>Langkah 1</li>
    <li>Langkah 2</li>
    <li>Langkah 3</li>
</ol>

  6. Tabel Elemen <table> digunakan untuk menampilkan data dalam bentuk tabel.

    <table border="1">
    <tr>
        <th>Nama</th>
        <th>Umur</th>
    </tr>
    <tr>
        <td>Andi</td>
        <td>25</td>
    </tr>
</table>

  7. Formulir Input Formulir digunakan untuk mengumpulkan data dari pengguna.

    <form action="proses.php" 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>
    <input type="submit" value="Kirim">
</form>

Kesimpulan

HTML adalah bahasa markup yang menjadi dasar dari semua halaman web. Dengan memahami struktur dasar HTML, seseorang dapat mulai membangun halaman web sederhana. Elemen-elemen seperti heading, paragraf, hyperlink, gambar, daftar, tabel, dan formulir sangat penting dalam pembuatan halaman web yang interaktif. HTML terus berkembang, dan dengan HTML5, kini tersedia lebih banyak fitur yang memungkinkan pengembangan web yang lebih modern dan responsif. Memahami HTML adalah langkah pertama yang sangat penting bagi siapa saja yang ingin belajar pengembangan web.

Lokasi:

Posting Komentar untuk "Pengertian dan Struktur Kode HTML: Panduan Lengkap Pemula"