HTML - Panduan Lengkap tentang Struktur Dasar HTML dan Contoh Penggunaannya

Fadhad Wahyu Aji

Panduan Lengkap tentang Struktur Dasar HTML dan Contoh Penggunaannya


HTML (Hypertext Markup Language) adalah bahasa markup yang digunakan untuk membangun struktur dasar halaman web. Memahami struktur dasar HTML adalah langkah pertama yang penting dalam pengembangan web. Artikel ini akan memberikan panduan lengkap tentang struktur dasar HTML beserta contoh penggunaannya. Dengan memahami konsep ini, Anda akan dapat membuat halaman web yang terstruktur dan mudah dimengerti.


Dokumen HTML Dasar

Setiap dokumen HTML harus dimulai dengan deklarasi DOCTYPE yang menentukan versi HTML yang digunakan. Berikut adalah contoh deklarasi DOCTYPE untuk HTML5:

<!DOCTYPE html>

Setelah deklarasi DOCTYPE, seluruh konten HTML ditempatkan di dalam elemen "<html>". 

<!DOCTYPE html>

<html>

</html>

Elemen "<head>"

Elemen "<head>" berisi informasi tentang dokumen HTML, seperti judul halaman, tautan ke stylesheet, dan meta tag untuk deskripsi atau kata kunci halaman. Berikut adalah contoh elemen "<head>" dengan judul halaman:

<!DOCTYPE html>

<html>

<head>

    <title>Judul Halaman</title>

</head>

</html>

Elemen "<body>"

Elemen "<body>" adalah tempat di mana konten sebenarnya dari halaman web ditempatkan. Ini termasuk teks, gambar, tautan, dan elemen lainnya. Berikut adalah contoh elemen "<body>":

<!DOCTYPE html>

<html>

<head>

    <title>Judul Halaman</title>

</head>

<body>

    <h1>Selamat Datang di Halaman Web Saya!</h1>

    <p>Ini adalah contoh teks paragraf.</p>

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

    <a href="https://www.contohlink.com">Ini adalah contoh tautan</a>

</body>

</html>

Elemen Dasar HTML

HTML memiliki banyak elemen dasar yang digunakan untuk membangun struktur halaman web. Berikut adalah beberapa contoh elemen dasar:

  • Heading: Digunakan untuk judul dan sub-judul. Terdapat enam tingkatan heading, mulai dari "<h1>" (heading utama) hingga "<h6>" (heading terkecil).Contoh:

<h1>Judul Utama</h1>

<h2>Judul Kedua</h2>

  • Paragraph: Digunakan untuk menandai paragraf. Contoh:

<p>Ini adalah contoh teks paragraf.</p>

  • Link: Digunakan untuk membuat tautan antara halaman web.Contoh:

<a href="https://www.contohlink.com">Ini adalah contoh tautan</a>

  • Gambar: Digunakan untuk menyisipkan gambar ke dalam halaman web.Contoh:

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

  • Daftar: Digunakan untuk membuat daftar item. Contoh daftar berurutan:

<ol>

    <li>Item pertama</li>

    <li>Item kedua</li>

</ol>

Contoh daftar tak berurutan:

<ul>

    <li>Item pertama</li>

    <li>Item kedua</li>

</ul>

  • Formulir: Digunakan untuk mengumpulkan input dari pengguna.Contoh:

<form>

    <label for="nama">Nama:</label>

    <input type="text" id="nama" name="nama" />

    <input type="submit" value="Kirim" />

</form>


Dengan memahami struktur dasar HTML, Anda dapat membangun halaman web yang terstruktur dan mudah dimengerti. Dalam artikel ini, kami telah membahas dokumen HTML dasar, elemen "<head>", elemen "<body>", serta beberapa elemen dasar seperti heading, paragraf, tautan, gambar, daftar, dan formulir. Dengan praktek dan eksperimen lebih lanjut, Anda dapat memperluas pengetahuan Anda tentang HTML dan membuat halaman web yang kreatif dan fungsional. Selamat mencoba!

0 Komentar