Tutorial Dasar HTML dan CCS untuk Blogger

Berikut adalah tutorial dasar HTML dan CSS yang cocok untuk Blogger (platform seperti Blogspot), terutama untuk kamu yang ingin mulai memodifikasi tampilan blog secara manual atau membuat postingan lebih menarik:

🌐 1. Pengenalan HTML dan CSS

HTML (HyperText Markup Language): Bahasa dasar untuk membuat struktur halaman web.
CSS (Cascading Style Sheets): Digunakan untuk mendesain tampilan HTML (warna, font, layout, dll).

🧱 2. Struktur Dasar HTML

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
</body>
</html>

Penjelasan:

<!DOCTYPE html>: Menandakan bahwa ini adalah dokumen HTML5.
<html>: Tag utama pembungkus dokumen HTML.
<head>: Berisi informasi (title, link CSS, dll).
<body>: Berisi isi halaman yang tampil di browser.

✏️ 3. Elemen HTML yang Sering Digunakan

Tag	Fungsi
`<h1>` sampai `<h6>`	Judul dengan ukuran berbeda
`<p>`	Paragraf
`<a href="url">`	Link
`<img src="url">`	Gambar
`<ul>`, `<ol>`, `<li>`	List tak berurutan & berurutan
`<div>`	Container/blok
`<span>`	Container inline

🎨 4. Dasar CSS

CSS dapat ditulis dengan 3 cara:

Inline CSS (langsung di tag HTML)
Internal CSS (dalam tag <style> di <head>)
External CSS (di file .css terpisah)

Contoh CSS Internal:

htmlCopyEdit<style>
    body {
        background-color: #f0f0f0;
        font-family: Arial;
    }
    h1 {
        color: darkblue;
    }
    p {
        color: #333;
    }
</style>

🧩 5. Menambahkan HTML/CSS ke Blogge

Untuk menambahkan kode HTML atau CSS di Blogger:

➤ Dalam Postingan

Saat membuat entri baru, klik HTML view (alih-alih Compose).
Tempelkan kode HTML sesuai keinginan.

➤ Mengedit Template Blogger

Masuk ke Blogger.
Buka Tema > Edit HTML.
Tambahkan CSS di antara tag <style> dalam <head>, misalnya:

htmlCopyEdit<style>
    .judul-custom {
        color: red;
        font-size: 24px;
        text-align: center;
    }
</style>

Lalu di body bisa gunakan:

htmlCopyEdit<h2 class="judul-custom">Judul Menarik</h2>

🧠 6. Tips Penggunaan di Blogger

Gunakan class untuk memberi gaya pada elemen tertentu tanpa mengubah semua elemen sejenis.
Gunakan widget HTML/JavaScript (di Tata Letak Blogger) untuk menambahkan kode ke sidebar/footer.
Cek hasilnya secara live dengan klik Pratinjau sebelum menyimpan perubahan.

📚 7. Contoh Proyek Mini

➤ Kotak Info Kustom di Postingan:

htmlCopyEdit<div style="border: 1px solid #007bff; padding: 10px; background: #e7f1ff;">
    <strong>Info:</strong> Ini adalah kotak informasi penting untuk pembaca.
</div>