Adifahram

Kategori: Laravel

Materi Dasar HTML

Dipublikasikan pada 2025-05-17 10:02:39

Gambar

Materi Dasar HTML

1. Apa Itu HTML?

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan menampilkan halaman web di browser. HTML bukanlah bahasa pemrograman seperti JavaScript atau Python, melainkan bahasa yang digunakan untuk mengatur struktur dan konten halaman web menggunakan elemen-elemen yang disebut dengan "tag".

Bayangkan HTML sebagai fondasi atau kerangka rumah yang menentukan bentuk dan susunan ruangan. HTML bekerja sama dengan CSS (untuk desain) dan JavaScript (untuk interaksi) agar halaman web menjadi lebih menarik dan interaktif.

2. Struktur Dasar HTML

Setiap dokumen HTML memiliki struktur dasar yang terdiri dari beberapa elemen utama:

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

Penjelasan Struktur di Atas:

  1. <!DOCTYPE html> → Menentukan bahwa dokumen ini menggunakan HTML5, versi terbaru dari HTML.
  2. <html> → Elemen utama yang menampung seluruh konten HTML.
  3. <head> → Bagian ini berisi informasi meta tentang halaman web seperti judul, stylesheet, dan skrip tambahan.
  4. <title> → Judul halaman yang akan muncul di tab browser.
  5. <body> → Bagian ini berisi semua konten yang akan ditampilkan di halaman web, seperti teks, gambar, video, dan elemen lainnya.
  6. <h1> → Heading atau judul utama yang biasanya digunakan untuk memberikan judul halaman.
  7. <p> → Paragraf yang digunakan untuk menampilkan teks biasa.

3. Elemen dan Tag dalam HTML

HTML menggunakan "tag" untuk menandai elemen-elemen yang berbeda dalam sebuah halaman web. Tag biasanya terdiri dari pasangan "pembuka" dan "penutup" dengan format <tag> konten </tag>. Namun, beberapa tag bersifat "self-closing" (tidak membutuhkan penutup).

Berikut beberapa tag HTML yang sering digunakan:

  • Judul atau Heading
  • <h1>Judul Utama</h1>
<h2>Subjudul</h2>
<h3>Sub-subjudul</h3>
  • Terdiri dari <h1> hingga <h6>, di mana <h1> adalah judul utama dan <h6> adalah yang terkecil.
  • Paragraf
  • <p>Ini adalah sebuah paragraf.</p>
  • Hyperlink (Tautan ke Halaman Lain)
  • <a href="https://www.example.com">Kunjungi Website</a>
  • Atribut href digunakan untuk menentukan tujuan tautan.
  • Gambar
  • <img src="gambar.jpg" alt="Deskripsi Gambar">
  • Atribut src menentukan sumber gambar, dan alt memberikan teks alternatif jika gambar tidak bisa dimuat.
  • Daftar (List)
    • Unordered List (Daftar tanpa nomor)
    • <ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
    • Ordered List (Daftar bernomor)
    • <ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

4. Atribut dalam HTML

Atribut dalam HTML digunakan untuk memberikan informasi tambahan tentang elemen. Atribut selalu diletakkan di dalam tag pembuka.

Contoh:

<a href="https://www.google.com" target="_blank">Buka Google di Tab Baru</a>
  • href: Menentukan tujuan tautan.
  • target="_blank": Membuka tautan di tab baru.

5. Formulir HTML

Formulir digunakan untuk mengumpulkan input dari pengguna.

<form action="proses.php" method="POST">
    <label for="nama">Nama:</label>
    <input type="text" id="nama" name="nama">
    <input type="submit" value="Kirim">
</form>
  • <form>: Menampung seluruh elemen input.
  • action: Halaman tujuan untuk memproses input.
  • method: Metode pengiriman data (POST atau GET).
  • <label>: Label untuk input.
  • <input>: Elemen input (teks, email, password, dsb.).

6. Multimedia dalam HTML

HTML mendukung media seperti gambar, audio, dan video:

<img src="gambar.jpg" alt="Gambar Contoh">
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="320" height="240" controls>
    <source src="video.mp4" type="video/mp4">
</video>

7. Hyperlink dalam HTML

Hyperlink memungkinkan pengguna untuk berpindah ke halaman lain atau bagian dalam halaman:

<a href="https://www.example.com">Klik di sini</a>
<a href="#section1">Loncat ke Bagian 1</a>

8. Tabel dalam HTML

Tabel digunakan untuk menampilkan data dalam format baris dan kolom:

<table border="1">
    <tr>
        <th>Nama</th>
        <th>Usia</th>
    </tr>
    <tr>
        <td>Ali</td>
        <td>25</td>
    </tr>
</table>
  • <table>: Membuat tabel.
  • <tr>: Membuat baris.
  • <th>: Membuat header tabel.
  • <td>: Membuat data dalam tabel.

9. Div dan Span untuk Layout

Elemen <div> dan <span> digunakan untuk mengelompokkan elemen:

<div style="background-color: lightgray; padding: 10px;">
    <h2>Ini adalah div</h2>
    <p>Div digunakan untuk mengelompokkan elemen.</p>
</div>
<span style="color: red;">Ini adalah teks dalam span</span>
  • <div>: Digunakan untuk membagi tata letak dalam blok.
  • <span>: Digunakan untuk mengubah tampilan teks tertentu.

10. Kesimpulan

HTML adalah dasar dalam pembuatan halaman web. Dengan memahami elemen-elemen dasar ini, kamu sudah bisa membuat halaman web sederhana. Langkah selanjutnya adalah mempelajari CSS untuk desain tampilan dan JavaScript untuk interaktivitas!




← Kembali ke daftar blog