Panduan Lengkap Belajar HTML

 HTML singkatan dari HyperText Markup Language. Perlu diingat, HTML bukan bahasa pemrograman, melainkan bahasa markah (markup language).

• HyperText: Teks yang terhubung dengan halaman lain (link).

• Markup: Kode-kode (tag) yang memberi tahu browser bagaimana menampilkan teks atau gambar.

Bayangkan HTML sebagai kerangka bangunan. Tanpa kerangka, bangunan tidak akan berdiri. Nanti, kita akan mengenal CSS (cat/dekorasi) dan JavaScript (listrik/fungsionalitas), tapi hari ini kita fokus pada kerangkanya.

Anatomi Elemen HTML

Bahasa HTML terdiri dari "elemen". Sebuah elemen biasanya memiliki tag pembuka, konten, dan tag penutup.

Contoh sederhana:

HTML

<p>Ini adalah sebuah paragraf.</p>

1. Tag Pembuka (<p>): Memberi tahu browser bahwa "ini adalah awal dari paragraf".

2. Konten: Teks yang ingin ditampilkan ("Ini adalah sebuah paragraf.").

3. Tag Penutup (</p>): Tanda garis miring (/) menunjukkan akhir dari elemen tersebut.

Catatan Penting: Tidak semua tag memiliki penutup. Contohnya tag gambar <img> dan baris baru <br> disebut empty elements.

5 Tag HTML Wajib Tahu untuk Blogger

Jika Anda membuka mode "Tampilan HTML" di editor postingan Blogger, kemungkinan besar Anda akan melihat kode-kode ini. Memahaminya akan membantu Anda merapikan artikel secara manual.

1. Heading (<h1> sampai <h6>)

Digunakan untuk judul dan sub-judul.

• <h1>: Judul utama (biasanya judul postingan).

• <h2>: Sub-judul utama dalam artikel.

• <h3>: Sub-sub judul.

Tips SEO: Gunakan struktur heading secara berurutan agar Google mudah memahami isi artikel Anda.

2. Paragraf (<p>)

Setiap blok teks dalam artikel Anda dibungkus oleh tag ini.

HTML

<p>Selamat datang di blog saya.</p>

3. Link / Anchor (<a>)

Ini adalah nyawa dari internet. Tag ini menghubungkan satu halaman ke halaman lain.

HTML

<a href="https://www.google.com">Klik di sini untuk ke Google</a>

• Atribut href berisi alamat tujuan.

4. Gambar (<img>)

Untuk menampilkan visual.

HTML

<img src="url-gambar-anda.jpg" alt="Deskripsi Gambar">

• Atribut alt sangat penting untuk SEO dan aksesibilitas (pembaca layar).

5. List (Daftar)

Ada dua jenis daftar yang sering dipakai:

• <ul> (Unordered List): Daftar dengan bullet points.

• <ol> (Ordered List): Daftar dengan nomor (1, 2, 3...).

Contoh kode:

HTML

<ul>
  <li>Item pertama</li>
  <li>Item kedua</li>
</ul>

Cara Mengedit HTML di Blogger

Ada dua tempat di mana Anda bisa mempraktikkan ilmu ini di Blogger:

1. Di Dalam Postingan

Jika format tulisan berantakan saat di-copypaste dari Word:

1. Buka editor postingan.

2. Klik ikon pensil/kurung siku di pojok kiri atas.

3. Pilih tampilan HTML.

4. Cari kode yang aneh (seperti banyak <div> atau <span> kosong) dan hapus manual.

2. Di Widget (Tata Letak)

Ingin menambahkan banner iklan atau widget profil kustom?

1. Masuk ke menu Tata Letak (Layout).

2. Klik Tambahkan Gadget.

3. Pilih HTML/JavaScript.

4. Masukkan kode HTML Anda di sana.

---

Kesimpulan

Mempelajari HTML tidak harus rumit. Dengan memahami tag dasar seperti heading, paragraf, link, dan gambar, Anda sudah memiliki kendali lebih besar atas tampilan konten Anda di Blogger.

Jangan takut untuk bereksperimen! Cobalah beralih ke tampilan HTML pada postingan draf Anda dan lihat bagaimana kode-kode tersebut bekerja.

---

Apakah Anda tertarik untuk mempelajari cara mengubah warna dan font menggunakan CSS di artikel selanjutnya? Tulis di kolom komentar!