Belajar Kode HTML untuk Blogger Pemula dari Dasar
HTML (HyperText Markup Language) adalah fondasi struktur halaman web. Bagi pengguna Blogger, memahami HTML dasar sangat membantu ketika ingin memperbaiki susunan artikel, memasang link, gambar, membuat heading, membaca kode widget, atau melakukan penyesuaian sederhana tanpa selalu bergantung pada editor visual.
Anda tidak harus langsung menguasai seluruh HTML. Untuk mulai mengelola artikel Blogger, cukup pahami cara kerja elemen, tag pembuka dan penutup, atribut, struktur heading, link, gambar, serta hubungan HTML dengan CSS. Setelah konsep dasarnya dipahami, membaca kode template dan widget akan terasa jauh lebih mudah.
Fokuskan latihan pada kode yang sering digunakan di Blogger. Jangan hanya menghafal tag—pahami fungsi dan hubungan antar elemen.
Apa Itu HTML?
HTML adalah bahasa markup yang digunakan untuk menyusun struktur konten pada halaman web. Browser membaca markup HTML lalu menampilkan elemen seperti judul, paragraf, gambar, tautan, tabel, formulir, video, dan berbagai komponen lainnya.
Mengapa Blogger Pemula Perlu Belajar HTML?
Struktur Dasar Dokumen HTML
Sebuah dokumen HTML lengkap umumnya memiliki deklarasi dokumen, elemen <html>, bagian <head>, dan bagian <body>. Pada editor posting Blogger Anda biasanya tidak perlu menulis struktur dokumen lengkap karena Blogger sudah menyediakan struktur halaman. Contoh berikut digunakan untuk memahami fondasinya.
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Halaman Web Saya</title>
</head>
<body>
<h1>Halo Dunia!</h1>
<p>Ini adalah paragraf pertama saya.</p>
</body>
</html>
Memberi tahu browser bahwa dokumen menggunakan HTML modern.
Elemen akar yang membungkus dokumen HTML.
Berisi metadata dan resource halaman yang tidak menjadi konten utama.
Berisi konten yang ditampilkan kepada pengunjung.
Mengenal Bagian Head
Bagian <head> dapat berisi judul dokumen, metadata, stylesheet, favicon, script, dan resource lain yang diperlukan halaman. Pada Blogger, banyak bagian ini dikelola melalui template sehingga jangan menambahkan kode ke template tanpa memahami fungsi dan posisinya.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Deskripsi halaman web">
<title>Judul Halaman</title>
<link rel="stylesheet" href="style.css">
</head>
Pembahasan lebih khusus mengenai meta tag Blogger dapat dibaca pada artikel Optimasi Kode SEO Meta Tag Lengkap Khusus Blogger.
Mengenal Bagian Body
Bagian <body> menampung konten yang terlihat pada halaman, misalnya heading, paragraf, link, gambar, daftar, form, dan komponen antarmuka. Inilah area yang paling sering bersentuhan dengan pengguna ketika menulis artikel melalui mode HTML Blogger.
<h1>Belajar HTML</h1>
<p>Saya sedang belajar HTML dasar.</p>
<a href="https://www.example.com">Buka Website</a>
<img src="gambar.jpg" alt="Contoh gambar">
</body>
Heading HTML dari H1 Sampai H6
HTML menyediakan heading <h1> hingga <h6>. Angka tersebut menunjukkan tingkat hierarki heading, bukan sekadar pilihan ukuran font. Gunakan heading untuk membentuk struktur topik yang logis.
<h2>Belajar HTML</h2>
<h3>Tag Paragraf</h3>
<h3>Tag Gambar</h3>
<h2>Belajar CSS</h2>
<h3>CSS Selector</h3>
Tag Paragraf
Tag <p> digunakan untuk membentuk paragraf. Hindari menggunakan banyak tag <br> hanya untuk menggantikan fungsi paragraf karena struktur konten akan lebih mudah dikelola jika setiap paragraf menggunakan elemen yang sesuai.
<p>Ini adalah paragraf kedua.</p>
Membuat Link dengan Tag Anchor
Tag <a> digunakan untuk membuat hyperlink. Atribut href menentukan tujuan link. Jika link eksternal sengaja dibuka pada tab baru menggunakan target="_blank", Anda juga dapat menggunakan rel="noopener".
<a href="https://www.example.com" target="_blank" rel="noopener">Buka di tab baru</a>
Menampilkan Gambar dengan Tag Img
Elemen <img> digunakan untuk menampilkan gambar. Atribut src menentukan sumber gambar, sedangkan alt memberikan teks alternatif yang membantu menjelaskan fungsi atau isi gambar ketika gambar tidak tampil dan dalam konteks aksesibilitas.
srcAlamat atau path file gambar.altTeks alternatif yang menjelaskan gambar sesuai konteks.widthDapat menentukan lebar gambar, walaupun layout responsif biasanya juga diatur melalui CSS.loadingDapat digunakan untuk mengatur perilaku loading gambar, misalnya lazy pada gambar yang sesuai.Membuat Daftar dengan UL OL dan LI
Dalam HTML standar, <ul> digunakan untuk daftar tidak berurutan, <ol> untuk daftar berurutan, dan <li> untuk setiap item. Contoh kode tetap menggunakan tag HTML asli karena bagian ini memang sedang mempelajari sintaks daftar.
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<li>Buka Blogger</li>
<li>Buat posting baru</li>
<li>Pilih tampilan HTML</li>
</ol>
Mengenal Atribut HTML
Atribut memberikan informasi atau konfigurasi tambahan pada elemen HTML. Beberapa atribut yang sering ditemui ketika mengedit Blogger adalah class, id, href, src, alt, title, dan style.
classMengelompokkan elemen agar dapat ditargetkan CSS atau JavaScript.idMemberikan identifier pada elemen tertentu.hrefMenentukan tujuan pada elemen link.srcMenentukan sumber resource seperti gambar atau script.altMemberikan alternatif teks pada gambar.styleMenambahkan CSS inline langsung pada elemen.Hubungan HTML dengan CSS
HTML mengatur struktur dan makna konten, sedangkan CSS mengatur presentasinya. CSS dapat diterapkan secara inline, melalui blok <style>, atau melalui file stylesheet eksternal. Untuk komponen yang digunakan berulang, memisahkan aturan CSS biasanya lebih mudah dikelola daripada menulis style panjang pada setiap elemen.
.teks-info {
color:#0083da;
font-weight:700;
}
</style>
<p class="teks-info">Contoh menggunakan class CSS</p>
HTML di Editor Blogger
Ketika membuat posting Blogger, Anda dapat berpindah antara tampilan penulisan dan tampilan HTML. Mode HTML berguna ketika perlu memeriksa markup, membersihkan struktur yang tidak diperlukan, memasukkan komponen tertentu, atau mengatur elemen dengan lebih presisi.
Buat posting percobaan yang tidak langsung dipublikasikan.
Tulis satu paragraf melalui editor biasa.
Buka tampilan HTML dan amati markup yang dihasilkan.
Tambahkan link, gambar, heading, atau class sederhana.
Kembali ke preview dan periksa hasil pada desktop serta mobile.
Kesalahan HTML yang Sering Dilakukan Pemula
Roadmap Belajar HTML untuk Blogger
Pahami elemen, tag pembuka/penutup, nesting dan atribut.
Latih heading, paragraf, link, gambar dan daftar.
Pelajari class, selector, spacing, warna, border dan responsive layout.
Amati struktur posting dan mulai membaca bagian template yang sederhana.
Setelah HTML dan CSS cukup nyaman, pelajari interaksi sederhana dengan JavaScript.
Cara tercepat untuk memahami HTML adalah dengan mencoba kode kecil, melihat hasilnya, lalu mengubah satu bagian pada satu waktu. Ketika sudah terbiasa membaca struktur HTML, Anda akan lebih mudah memahami CSS, widget Blogger, script, dan kode template yang sebelumnya terlihat rumit.
CodeFlare dapat membantu pembuatan website Blogger, custom widget, perbaikan template, optimasi tampilan, hingga pengembangan script sesuai kebutuhan.
About CodeFlare
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net