👦👧

Petualangan Kode: Belajar HTML & CSS

Selamat datang di petualangan coding yang menyenangkan! Mari belajar membuat website bersama.

Modul 1: Apa itu HTML?

HTML adalah bahasa yang digunakan untuk membuat halaman website. Bayangkan HTML seperti kerangka atau tulang-tulang dari sebuah website.


<html>
<head>
  <title>Judul Website</title>
</head>
<body>
  <h1>Selamat Datang!</h1>
  <p>Ini adalah website pertamaku.</p>
</body>
</html>

Mari Mencoba!

Salin kode di atas dan tempel di editor kode seperti Visual Studio Code. Simpan dengan nama "website-pertamaku.html" dan buka di browser!

Kuis Cepat

HTML adalah...

a. Kerangka website
b. Bahasa pemrograman robot
c. Nama sebuah game

Modul 2: Tag HTML Dasar

HTML menggunakan "tag" untuk membuat berbagai bagian website. Setiap tag biasanya memiliki pembuka dan penutup.

Tag-Tag Penting:

<h1>Ini Judul Besar</h1>
<h2>Ini Judul Sedang</h2>
<p>Ini adalah sebuah paragraf. Kita bisa menulis banyak teks di sini.</p>
<a href="https://www.google.com">Ini link ke Google</a>
<img src="gambar.jpg" alt="Deskripsi gambar">

Mari Mencoba!

Coba buat halaman HTML dengan menggunakan berbagai tag yang telah dipelajari. Tambahkan judul, paragraf, dan sebuah link!

Modul 3: Apa itu CSS?

Jika HTML adalah kerangka website, maka CSS adalah pakaiannya! CSS membuat website menjadi cantik dan berwarna.

CSS bisa mengubah warna, ukuran, font, tata letak, dan banyak lagi!

/* Ini adalah contoh CSS */
body {
  background-color: lightblue;
}

h1 {
  color: navy;
  font-family: 'Arial';
}

p {
  font-size: 18px;
  color: darkslategray;
}

Mari Mencoba!

Buat file baru dengan nama "style.css", salin kode CSS di atas, dan hubungkan dengan file HTML kamu menggunakan tag <link> di bagian <head>:

<link rel="stylesheet" href="style.css">

Modul 4: CSS Dasar

CSS bekerja dengan memilih elemen HTML dan memberikan "style" kepada elemen tersebut.

Cara Kerja CSS:

Selector { property: value; }

/* Mengubah warna latar belakang seluruh halaman */
body {
  background-color: #f0f8ff;
}

/* Mengubah semua judul h1 */
h1 {
  color: #ff6b6b;
  text-align: center;
}

/* Mengubah class khusus */
.tombol-khusus {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

Mari Mencoba!

Coba ubah warna latar belakang website kamu. Experiment dengan warna-warna berbeda!

Kamu bisa mencari nama warna di sini.

Modul 5: Proyek Kecil - Kartu Perkenalan

Sekarang kita akan membuat kartu perkenalan sederhana menggunakan HTML dan CSS!

<!-- File: kartu-saya.html -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="kartu-style.css">
</head>
<body>
  <div class="kartu">
    <h1>Halo, Namaku [Namamu]</h1>
    <p>Aku suka [hobimu]</p>
    <div class="gambar">
      <img src="foto-saya.jpg" alt="Foto Saya">
    </div>
  </div>
</body>
</html>
/* File: kartu-style.css */
body {
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.kartu {
  background-color: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 300px;
}

.kartu h1 {
  color: #ff6b6b;
}

.gambar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

Mari Mencoba!

Buat kedua file di atas, ganti [Namamu] dan [hobimu] dengan informasi tentang dirimu. Kamu juga bisa menambahkan foto jika punya!