preloader

Tips Coding Website Dasar HTML & CSS

🔹 Tips Dasar HTML

  1. Struktur Wajib HTML
    Selalu mulai dengan kerangka dasar: <!DOCTYPE html> <html> <head> <title>Judul Website</title> </head> <body> <h1>Halo Dunia!</h1> <p>Ini website pertamaku</p> </body> </html>
  2. Gunakan Tag Sesuai Fungsi
    • <h1> - <h6> → judul
    • <p> → paragraf
    • <a> → link
    • <img> → gambar
    • <ul> / <ol> → list
    • <div> → wadah/blok
  3. Alt pada Gambar
    Pakai alt buat deskripsi gambar, penting untuk SEO & aksesibilitas: <img src="foto.jpg" alt="Foto pemandangan gunung">

🔹 Tips Dasar CSS

  1. Tiga Cara Pakai CSS
    • Inline → langsung di tag <p style="color:red;">Teks Merah</p>
    • Internal → di dalam <style> di <head>
    • External → file .css terpisah (lebih rapi)
  2. Selector Dasar
    • Pakai tag → p { color: blue; }
    • Pakai class → .kotak { border: 1px solid black; }
    • Pakai id → #judul { font-size: 24px; }
  3. Gunakan Layout CSS
    • display: flex; buat tata letak sejajar
    • margin & padding untuk jarak
    • background-color, font-family, color untuk gaya
  4. Responsif dengan % atau rem
    Hindari fix pixel berlebihan, pakai ukuran fleksibel biar website enak dilihat di HP/laptop. body { font-size: 16px; } h1 { font-size: 2rem; /* relatif ke body */ }

🔹 Bonus Tips

  • Selalu rapikan kode biar gampang dibaca.
  • Pakai Inspect Element (F12) buat belajar styling langsung.
  • Belajar struktur semantic HTML (header, main, footer, nav, article).
  • Mulai dari project kecil: bikin portofolio sederhana atau landing page.

Simak artikel kami yang lain di bawah ini :

Ingin membuat sebuah Website tapi bingung cara bikin nya? tenang Powercode Solusi nya! Pembuatan website anda akan ditangani oleh programmer terbaik kami Silahkan kunjungi pembuatan Website Kami.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *