Penjelasan Dasar html dan css Untuk Web Design

1. HTML (HyperText Markup Language)

HTML adalah bahasa markup yang digunakan untuk membuat struktur sebuah halaman web. HTML bekerja seperti kerangka atau tulang punggung dari halaman web.

🔹 Fungsi HTML:

Menentukan struktur halaman (judul, paragraf, gambar, tautan, tabel, dll).
Membuat elemen-elemen seperti header, footer, artikel, form, dll.
HTML tidak mengatur tampilan visual (itu tugas CSS).

🔹 Contoh Struktur HTML Dasar:

htmlCopyEdit<!DOCTYPE html>
<html>
<head>
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Selamat Datang di Website Saya</h1>
  <p>Ini adalah paragraf pertama saya.</p>
  <a href="https://example.com">Kunjungi Website</a>
</body>
</html>

🎨 2. CSS (Cascading Style Sheets)

CSS adalah bahasa yang digunakan untuk mengatur tampilan (style) dari elemen-elemen HTML: warna, ukuran, posisi, font, layout, dan lainnya.

🔹 Fungsi CSS:

Membuat tampilan web lebih menarik dan profesional.
Mengatur layout responsif (misalnya tampilan berbeda di HP dan desktop).
Mengatur efek animasi dan transisi.

🔹 Contoh CSS Dasar:

cssCopyEditbody {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  color: gray;
  font-size: 16px;
}

🔹 Cara Menyisipkan CSS ke HTML:

Inline CSS (langsung di elemen HTML):

htmlCopyEdit<p style="color: red;">Paragraf berwarna merah</p>

Internal CSS (di dalam tag <style> di <head>):

htmlCopyEdit<head>
  <style>
    p { color: green; }
  </style>
</head>

External CSS (file CSS terpisah):

htmlCopyEdit<head>
  <link rel="stylesheet" href="styles.css">
</head>

🔗 Cara Kerja HTML + CSS Bersama

HTML menyediakan struktur:

htmlCopyEdit<h1>Judul</h1>
<p>Isi konten di sini.</p>

CSS mengatur tampilannya:

cssCopyEdith1 {
  color: blue;
  font-size: 30px;
}
p {
  color: #333;
}

🧠 Ringkasan

HTML	CSS
Menyusun konten	Mengatur tampilan visual
Tag seperti `<h1>`, `<p>`	Properti seperti `color`, `font-size`
Fokus ke struktur	Fokus ke gaya/desain

Kalau kamu tertarik, saya bisa bantu lanjut ke topik seperti:

Responsive design (media queries)
Flexbox dan Grid
Formulir HTML & styling-nya
Membuat halaman web sederhana dari nol

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.