ADMOD

header ads

Buku Singkat Tentang HTML - Smakda

Jagur Indonesia Oktober 26, 2025

buku singkat dan padat tentang HTML untuk pemula, yang menjelaskan dasar-dasar yang diperlukan untuk mulai membangun halaman web sederhana.

Bab 1: Apa itu HTML?
HTML (HyperText Markup Language) adalah bahasa standar untuk membuat halaman web dan aplikasinya. HTML digunakan untuk menyusun konten pada sebuah halaman, seperti judul, paragraf, daftar, gambar, dan tautan.
  • HTML bukanlah bahasa pemrograman, melainkan bahasa markup yang menggunakan "tag" untuk mendeskripsikan struktur konten.
  • Editor teks: Untuk menulis HTML, Anda hanya memerlukan editor teks biasa, seperti Notepad di Windows atau TextEdit di macOS. Namun, editor kode seperti Visual Studio Code sangat disarankan karena fiturnya yang lebih lengkap.
  • Cara kerja: Saat Anda membuka halaman web di peramban (misalnya Chrome atau Firefox), peramban akan membaca kode HTML dan menampilkan kontennya di layar sesuai dengan tag yang ada.
Bab 2: Struktur dasar dokumen HTML
Setiap dokumen HTML memiliki struktur dasar yang sama, yang mendefinisikan halaman web secara keseluruhan.
html
<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman Web Saya</title>
  </head>
  <body>
    <!-- Konten halaman web akan ada di sini -->
  </body>
</html>
Gunakan kode dengan hati-hati.
  • <!DOCTYPE html>: Deklarasi yang mendefinisikan bahwa dokumen ini adalah dokumen HTML5.
  • <html>: Elemen akar yang membungkus semua konten di halaman.
  • <head>: Berisi metadata tentang halaman, seperti judul yang muncul di tab peramban (<title>).
  • <body>: Berisi semua konten yang terlihat oleh pengguna, seperti teks, gambar, dan video.
Bab 3: Elemen dan tag HTML
Elemen HTML terdiri dari tag pembuka (<tag>), tag penutup (</tag>), dan konten yang ada di antaranya.
Contoh tag dasar:
  • Judul: Gunakan tag <h1> hingga <h6> untuk judul dari yang terbesar hingga terkecil.
    html
    <h1>Ini adalah judul utama</h1>
    <h2>Ini adalah subjudul</h2>
    Gunakan kode dengan hati-hati.
  • Paragraf: Gunakan tag <p> untuk membuat paragraf.
    html
    <p>Ini adalah paragraf.</p>
    Gunakan kode dengan hati-hati.
  • Tautan: Gunakan tag <a> (anchor) untuk membuat tautan. Atribut href digunakan untuk menentukan alamat yang dituju.
    html
    <a href="https://www.google.com">Kunjungi Google</a>
    Gunakan kode dengan hati-hati.
  • Gambar: Gunakan tag <img> untuk menyisipkan gambar. Atribut src berisi alamat gambar, dan alt memberikan teks alternatif jika gambar tidak bisa dimuat.
    html
    <img src="gambar.jpg" alt="Deskripsi Gambar">
    Gunakan kode dengan hati-hati.
Bab 4: Memformat teks dan membuat daftar
HTML menyediakan berbagai tag untuk memformat teks dan menyusun informasi dalam bentuk daftar.
Memformat teks:
  • Huruf tebal: Gunakan <strong> untuk memberikan penekanan penting.
    html
    <p>Ini adalah teks yang <strong>penting</strong>.</p>
    Gunakan kode dengan hati-hati.
  • Huruf miring: Gunakan <em> untuk memberikan penekanan.
    html
    <p>Ini adalah teks yang <em>ditekankan</em>.</p>
    Gunakan kode dengan hati-hati.
Membuat daftar:
  • Daftar tak berurutan: Gunakan tag <ul> dan <li> untuk membuat daftar dengan poin.
    html
    <ul>
      <li>Apel</li>
      <li>Jeruk</li>
      <li>Mangga</li>
    </ul>
    Gunakan kode dengan hati-hati.
  • Daftar berurutan: Gunakan tag <ol> dan <li> untuk membuat daftar bernomor.
    html
    <ol>
      <li>Langkah pertama</li>
      <li>Langkah kedua</li>
      <li>Langkah ketiga</li>
    </ol>
    Gunakan kode dengan hati-hati.
Bab 5: Menambahkan gaya dengan CSS
Meskipun buku ini berfokus pada HTML, perlu diketahui bahwa HTML biasanya bekerja sama dengan CSS (Cascading Style Sheets) untuk mengatur tampilan dan desain.
html
<p style="color: blue; font-size: 16px;">Teks ini akan berwarna biru.</p>
Gunakan kode dengan hati-hati.
  • Kode di atas adalah contoh inline CSS, yang kurang disarankan untuk proyek besar, tetapi baik untuk pemahaman dasar.
  • Pemisahan HTML dan CSS adalah praktik terbaik, di mana HTML digunakan untuk struktur dan CSS digunakan untuk tampilan.
Bab 6: Latihan membuat halaman web
Mari kita coba buat halaman web pertama Anda.
  1. Buka editor teks dan salin kode di bawah ini.
  2. Simpan file dengan nama halaman-pertama.html.
  3. Buka file tersebut di peramban web Anda
Tags:

Posting Komentar

0 Komentar

Silahkan Isi Komentar dibawah ini