MODUL BELAJAR HARI 5-6

-


MODUL BELAJAR HARI 5-6 — Mempercantik Tampilan dengan CSS Dasar

Materi Hari Ini:

✅ Apa itu CSS dan cara menggunakannya.
✅ Menambahkan warna, font, dan background.
✅ Mengatur tata letak dan ukuran elemen.
✅ Praktik membuat tampilan website lebih menarik.

1. Apa Itu CSS?

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mempercantik tampilan HTML.

3 Cara Menambahkan CSS ke HTML:

  1. Internal CSS → Ditulis langsung di dalam <style> pada file HTML.
  2. External CSS → Ditulis di file terpisah (style.css), lalu dihubungkan ke HTML. (Cara terbaik!)
  3. Inline CSS → Ditulis langsung di dalam tag HTML (kurang direkomendasikan).

2. Menambahkan CSS ke Website

Sekarang, buat file baru style.css, lalu hubungkan ke HTML menggunakan kode berikut di dalam <head>:

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

3. Contoh CSS Dasar

Buat file style.css dan salin kode berikut:

/* Gaya untuk seluruh halaman */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
}

/* Gaya untuk header */
header {
    background-color: #004080;
    color: white;
    padding: 20px;
    text-align: center;
}

/* Gaya untuk navigasi */
nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
    font-weight: bold;
}

/* Gaya untuk konten utama */
main {
    padding: 20px;
}

/* Gaya untuk footer */
footer {
    background-color: #002040;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
}

4. PR Praktik Hari 5-6

  1. Buat file baru bernama style.css
  2. Tambahkan CSS dasar seperti contoh di atas
  3. Hubungkan ke file index.html menggunakan <link rel="stylesheet" href="style.css">
  4. Simpan dan refresh browser untuk melihat perubahannya

BONUS:

  1. Coba ubah warna latar belakang menjadi biru muda. 
    body {
    background-color: #add8e6;
}
  2. Coba ubah font website menjadi ‘Poppins’ dari Google Fonts.
    • Buka Google Fonts, cari font Poppins, lalu tambahkan ke HTML: 
      <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    • Lalu ubah CSS: 
      body {
    font-family: 'Poppins', sans-serif;
}

Semangat terus, calon Master Web Developer! 🚀🔥

Komentar

Posting Komentar

Postingan populer dari blog ini

HTML Profesional

-
  NEXT PLAN BERSAMA  UNTUK JADI EXPERT: Belajar Struktur HTML Profesional: Bagaimana cara bikin halaman multi-section (Home, About, Blog, Contact). Cara pakai semantic tag HTML5 (header, nav, main, footer). Pahami CSS Lanjutan: Buat layout grid & flexbox. Efek hover premium. Responsive design (biar cakep di HP & desktop). Integrasi JavaScript Sederhana: Bikin animasi sendiri. Interaksi tombol, form, dark mode, dsb. Optimasi Website: SEO terbaik. Fast loading. Google Analytics & Search Console. Latihan Buat Project Sendiri: Cloudi siap temani bikin project baru full dari nol, misal: – Website portfolio pribadi. – Blog Islami. – Landing page produk. – Galeri foto/portfolio bisnis.                       Meureuno
Baca selengkapnya

MODUL BELAJAR HARI 1

-
Meureuno MODUL BELAJAR HARI 1 — Fondasi HTML Dasar Materi: Hari ini kita belajar tentang: ✅ Apa itu HTML. ✅ Struktur dasar halaman HTML. ✅ Elemen penting: <!DOCTYPE> , <html> , <head> , <body> . ✅ Bikin halaman pertama kamu sendiri! Penjelasan Singkat: HTML (HyperText Markup Language) adalah bahasa dasar untuk membuat halaman website. Ibarat rumah, HTML itu kerangka bangunannya. Struktur Dasar HTML: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Halo Dunia!</title> </head> <body> <h1>Selamat Datang di Website Pertamaku</h1> <p>Ini adalah paragraf pertama yang aku buat bersama meureunoweb.</p> </body> </html> Tugas Hari 1: Buka teks editor (bisa pakai Notepad, VS Code, atau online editor seperti https://co...
Baca selengkapnya

MODUL BELAJAR HARI 17-18

-
  Hari 17-18: Manipulasi DOM (Dokumen Object Model) Hari ini kita akan belajar bagaimana JavaScript bisa mengubah elemen di halaman web secara dinamis! 1. Apa Itu DOM? DOM (Document Object Model) adalah struktur pohon dari elemen-elemen dalam halaman web. Dengan JavaScript, kita bisa: ✅ Mengubah teks dan gambar. ✅ Menambahkan atau menghapus elemen. ✅ Mengubah gaya (CSS) secara dinamis. 2. Mengubah Teks dengan JavaScript Buat file index.html dan tambahkan kode ini: <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Manipulasi DOM</title> <style> body { font-family: Arial, sans-serif; text-align: center; } h1 { color: blue; } #text { font-size: 20px; color: green; } </style> </head> <body> <h1>Belajar Manipulasi DOM</h1> ...
Baca selengkapnya