Kuasai Desain Web: Pelajari HTML5 & CSS3 Dalam 4 Jam!

Daftar Isi

Pengantar HTML5 dan CSS3
Struktur Dasar Dokumen HTML5
Elemen HTML Penting dan Penggunaannya
Pengenalan CSS3 dan Cara Menggunakannya
Selektor CSS dan Spesifisitas
Box Model dan Layout Dasar
Flexbox dan Grid Layout
Responsive Design dengan Media Queries
Praktik Membangun Layout Website Sederhana
Sumber Belajar dan Contoh Source Code

1. Pengantar HTML5 dan CSS3

HTML5 dan CSS3 adalah fondasi utama dalam pengembangan web. HTML5 digunakan untuk membuat struktur dan konten halaman web, sedangkan CSS3 digunakan untuk mengatur tampilan dan layout.

Dengan menguasai keduanya, Anda dapat membuat website yang menarik, responsif, dan user-friendly.

Sejarah Singkat dan Perkembangan

HTML5 adalah versi terbaru HTML yang mendukung multimedia dan fitur modern.
CSS3 memperkenalkan fitur styling canggih seperti animasi, flexbox, dan grid.
Keduanya didukung oleh semua browser modern.

2. Struktur Dasar Dokumen HTML5

Dokumen HTML5 memiliki struktur dasar yang wajib dipahami:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Judul Halaman</title>
</head>
<body>
  <!-- Konten halaman di sini -->
</body>
</html>

Penjelasan:

<!DOCTYPE html> : Mendefinisikan dokumen sebagai HTML5.
<html lang="id"> : Elemen root dengan atribut bahasa.
<head> : Berisi metadata dan judul halaman.
<body> : Berisi konten yang ditampilkan di browser.

3. Elemen HTML Penting dan Penggunaannya

Berikut beberapa elemen HTML5 yang sering digunakan:

<header> : Bagian header halaman atau section.
<nav> : Navigasi menu.
<section> : Bagian konten utama.
<article> : Artikel atau konten mandiri.
<footer> : Bagian footer halaman.
<h1> - <h6> : Judul dengan tingkat heading.
<p> : Paragraf teks.
<a> : Link atau tautan.
<img> : Gambar.
<form> : Formulir input.

Contoh Penggunaan Elemen

<header>
  <h1>Selamat Datang</h1>
  <nav>
    <a href="#home">Home</a>
    <a href="#about">Tentang</a>
  </nav>
</header>

<section id="home">
  <article>
    <h2>Judul Artikel</h2>
    <p>Isi artikel di sini.</p>
  </article>
</section>

<footer>
  <p>Hak Cipta &copy; 2024</p>
</footer>

4. Pengenalan CSS3 dan Cara Menggunakannya

CSS3 adalah bahasa styling yang digunakan untuk mengatur tampilan elemen HTML, seperti warna, ukuran, layout, dan animasi.

Cara Menyisipkan CSS

Inline CSS: <h1 style="color:blue;">Judul</h1>
Internal CSS:
```
<style> h1 { color: blue; } </style>
```
di dalam <head>
External CSS: <link rel="stylesheet" href="styles.css"> di dalam <head>

Contoh File styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f9fafb;
  color: #333;
  margin: 0;
  padding: 0;
}

header {
  background-color: #4f46e5;
  color: white;
  padding: 1rem;
}

nav a {
  color: white;
  margin-right: 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

5. Selektor CSS dan Spesifisitas

Selektor CSS digunakan untuk memilih elemen HTML yang akan diberi style. Spesifisitas menentukan prioritas aturan CSS saat ada konflik.

Jenis Selektor CSS

Selektor Tag: p { color: red; }
Selektor Kelas: .btn { background: blue; }
Selektor ID: #header { font-size: 2rem; }
Selektor Atribut: a[href^="https"] { color: green; }
Selektor Gabungan: div > p { margin: 0; }

Contoh Spesifisitas

/* Ini akan diterapkan */
#header p {
  color: blue;
}

/* Ini diabaikan jika ada konflik */
p {
  color: red;
}

6. Box Model dan Layout Dasar

Setiap elemen HTML dianggap sebagai kotak (box) yang terdiri dari content, padding, border, dan margin.

Komponen Box Model

Content: area isi elemen.
Padding: ruang antara content dan border.
Border: garis pembatas elemen.
Margin: ruang di luar border, memisahkan elemen dengan elemen lain.

Diagram box model CSS dengan content, padding, border, dan margin

Contoh CSS Box Model

.box {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

7. Flexbox dan Grid Layout

Flexbox dan Grid adalah teknik layout modern yang memudahkan pengaturan posisi dan ukuran elemen secara responsif.

Flexbox Dasar

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid Dasar

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Contoh layout flexbox dan grid dengan beberapa kotak berwarna

8. Responsive Design dengan Media Queries

Media queries memungkinkan Anda membuat desain yang menyesuaikan tampilan berdasarkan ukuran layar perangkat.

Contoh Media Query

@media (max-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
  .container {
    flex-direction: column;
  }
}

Dengan ini, layout akan berubah saat layar lebih kecil dari 768px.

9. Praktik Membangun Layout Website Sederhana

Mari kita buat layout website sederhana dengan header, navigasi, konten utama, dan footer menggunakan HTML5 dan CSS3.

Contoh HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Sederhana</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Judul Website</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">Tentang</a>
      <a href="#">Kontak</a>
    </nav>
  </header>

  <main>
    <section>
      <h2>Konten Utama</h2>
      <p>Ini adalah isi konten utama website.</p>
    </section>
  </main>

  <footer>
    <p>Hak Cipta &copy; 2024</p>
  </footer>
</body>
</html>

Contoh CSS (styles.css)

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #4f46e5;
  color: white;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: white;
  margin-left: 1rem;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

main {
  padding: 2rem;
}

footer {
  background-color: #e0e7ff;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}