Panduan sederhana untuk memulai perjalanan Anda dalam pemrograman web

Apa itu Pemrograman Web?

Pemrograman web adalah cara kita membuat website dan aplikasi yang bisa diakses melalui internet. Ini seperti membangun rumah di dunia digital! Untuk memulai, kita perlu belajar dua bahasa utama: HTML dan CSS.

HTML: Kerangka Website Kita

HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur dasar website. Ini seperti kerangka rumah kita.

Contoh Kode HTML Sederhana:

html

<!doctype html>
<html>
  <head>
    <title>Website Pertamaku</title>
  </head>
  <body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah website pertama saya.</p>
  </body>
</html>

Penjelasan Kode HTML:

<!DOCTYPE html>: Memberitahu browser bahwa ini adalah dokumen HTML5.
<html>: Awal dari dokumen HTML kita.
<head>: Tempat informasi tentang halaman web.
<title>: Judul yang muncul di tab browser.
<body>: Isi utama website yang akan dilihat pengunjung.
<h1>: Judul besar.
<p>: Paragraf teks.

CSS: Mempercantik Website Kita

CSS (Cascading Style Sheets) adalah bahasa yang membuat website kita terlihat menarik. Ini seperti cat dan dekorasi untuk rumah kita.

Cara Menambahkan CSS:

Inline CSS: Langsung di dalam tag HTML.

<p style="color: blue;">Ini teks berwarna biru.</p>

Internal CSS: Di dalam tag <style> di bagian <head>.

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

External CSS: File terpisah yang dihubungkan ke HTML.

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

Contoh Kode CSS Sederhana:

body {
  background-color: lightyellow;
  font-family: Arial, sans-serif;
}
 
h1 {
  color: navy;
  font-size: 24px;
}

Penjelasan Kode CSS:

body { }: Mengatur gaya untuk seluruh halaman.
background-color: lightyellow;: Memberi warna latar belakang kuning muda.
font-family: Arial, sans-serif;: Menggunakan font Arial.
h1 { }: Mengatur gaya untuk judul besar.
color: navy;: Memberi warna biru tua pada teks judul.
font-size: 24px;: Mengatur ukuran teks judul.

Komentar dalam Kode

Komentar adalah catatan untuk diri sendiri atau programmer lain. Mereka tidak muncul di website.

Komentar HTML:

<!-- Ini komentar HTML -->

Komentar CSS:

/* Ini komentar CSS */

Mengapa HTML dan CSS Penting?

HTML dan CSS bekerja sama untuk membuat website yang bagus. HTML memberi struktur, dan CSS membuatnya menarik. Keduanya penting untuk membuat pengalaman yang menyenangkan bagi pengunjung website kita.

Sumber Belajar

Untuk belajar lebih lanjut, kunjungi:

Selamat belajar dan berkreasi dengan HTML dan CSS! 🙌

See all blogs

Belajar Dasar Pemrograman Web

Tags