بسم الله الرحمن الرحيم

السلام عليكم ورحمة الله وبركاته

Kumpulan Materi Management Informatika untuk SMA Islam Lembah Arafah

dan Kumpulan Hasil karya Siswa Lembah Arafah


Kategori html    
  • Komponen-komponen Html [1]

    Komponen HTML adalah elemen-elemen dasar yang digunakan untuk membuat struktur halaman web. HTML (HyperText Markup Language) adalah bahasa markup yang berfungsi untuk menyusun dan menampilkan konten di browser. Berikut adalah beberapa komponen utama dalam HTML:

    1. Elemen Dasar

    • <!DOCTYPE html>
      Deklarasi tipe dokumen, biasanya ditulis di awal file HTML untuk memberi tahu browser bahwa dokumen menggunakan HTML5.

    • <html>
      Elemen root yang membungkus semua elemen HTML lainnya.

    • <head>
      Bagian dokumen yang berisi informasi metadata seperti judul, charset, link stylesheet, dan script.

    • <body>
      Bagian utama dokumen tempat konten yang ditampilkan di browser berada.

    2. Struktur Dokumen

    • <title>
      Menentukan judul dokumen yang muncul di tab browser.
    • <meta>
      Memberikan metadata seperti charset (<meta charset="UTF-8">), deskripsi, atau viewport.

    3. Elemen Teks

    • Heading (<h1> sampai <h6>)
      Digunakan untuk judul dengan ukuran berbeda. 
      <h1>Judul Utama</h1>
<h2>Sub Judul</h2>
    • Paragraph (<p>)
      Untuk paragraf teks. 
      <p>Ini adalah paragraf.</p>
    • Bold & Italic
      • Bold: <b> atau <strong>
      • Italic: <i> atau <em>

    4. Daftar (List)

    • Ordered List (<ol>)
      Daftar bernomor. 
      <ol>
  <li>Item 1</li>
  <li>Item 2</li>
</ol>
    • Unordered List (<ul>)
      Daftar tanpa nomor. 
      <ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

    5. Tabel

    Untuk menyusun data dalam bentuk tabel.

    <table>
  <tr>
    <th>Nama</th>
    <th>Usia</th>
  </tr>
  <tr>
    <td>Ali</td>
    <td>25</td>
  </tr>
</table>

    6. Media

    • Gambar (<img>)
      Menampilkan gambar. 
      <img src="image.jpg" alt="Deskripsi Gambar">
    • Video (<video>)
      Menampilkan video. 
      <video controls>
  <source src="video.mp4" type="video/mp4">
</video>

    7. Formulir (Forms)

    Untuk input dari pengguna.

    <form action="/submit" method="POST">
  <label for="name">Nama:</label>
  <input type="text" id="name" name="name">
  <button type="submit">Kirim</button>
</form>

    8. Link dan Navigasi

    • Hyperlink (<a>)
      Untuk membuat tautan.

      <a href="https://example.com">Kunjungi</a>

    • Navigasi (<nav>)
      Biasanya digunakan untuk menu navigasi.

      <nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
</nav>

    9. Div dan Span

    • <div>
      Untuk membungkus elemen menjadi sebuah blok.
    • <span>
      Untuk membungkus elemen dalam baris.

    Berikut penjelasan lengkap tentang dasar-dasar tag HTML dan atribut HTML, cocok untuk pemula yang ingin memahami struktur HTML tanpa CSS.

    📄 Struktur Dasar HTML

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

    🧱 Penjelasan Dasar Tag HTML

    Tag Keterangan
    <!DOCTYPE html> Mendeklarasikan bahwa ini adalah dokumen HTML5
    <html> Elemen root dari dokumen HTML
    <head> Berisi metadata: judul, charset, link, script, dll
    <title> Judul halaman yang tampil di tab browser
    <body> Isi utama halaman web (yang terlihat di browser)

    📚 Tag HTML Umum

    Tag Fungsi
    <h1> sampai <h6> Heading (judul besar ke kecil)
    <p> Paragraf
    <br> Baris baru
    <hr> Garis horizontal
    <a href="..."> Tautan (link)
    <img src="..." alt="..."> Gambar
    <ul>, <ol>, <li> Daftar (tak berurut, berurut, item)
    <table>, <tr>, <td>, <th> Tabel
    <input>, <button>, <form> Formulir

    ⚙️ Apa itu Atribut HTML?

    Atribut digunakan untuk memberikan informasi tambahan pada elemen HTML. Semua atribut ditulis di tag pembuka.

    Contoh:

    <a href="https://google.com" target="_blank">Kunjungi Google</a>
    Atribut Fungsi
    href Alamat tujuan tautan
    target="_blank" Buka di tab baru
    src Sumber file (untuk <img>, <script>, dll)
    alt Teks alternatif jika gambar tidak tampil
    type Tipe input atau button
    value Nilai default elemen form
    name, id, class Identifikasi dan styling (digunakan dalam JS/CSS)
    disabled, checked, selected Atribut boolean (tidak perlu nilai)

    🧪 Contoh Kombinasi Atribut

    <img src="foto.jpg" alt="Foto profil" width="200" height="200">
<input type="text" placeholder="Masukkan nama" name="nama" required>

    📝 Kesimpulan

    • HTML dibangun dari tag pembuka & penutup (kecuali tag kosong seperti <br>, <img>)
    • Atribut menambahkan info/aturan ke tag
    • HTML saja tidak bisa membuat halaman indah — untuk desain digunakan CSS
    • Interaksi ditambahkan lewat JavaScript