Master HTML5 & CSS3: Buat Website Menarik Dalam Sebulan!

Daftar Isi

Pengantar HTML5
Struktur Dasar HTML
Elemen dan Tag HTML Penting
Pengantar CSS3
Selektor dan Sintaks CSS
Layout dengan CSS: Flexbox & Grid
Responsive Design dengan Media Queries
Project: Website Sederhana Step-by-Step
Sumber Belajar dan Channel Pembelajaran Lainnya

1. Pengantar HTML5

HTML5 adalah versi terbaru dari bahasa markup HTML yang digunakan untuk membuat struktur halaman web. HTML5 membawa banyak fitur baru yang memudahkan pembuatan website modern, seperti elemen semantik, multimedia, dan API yang lebih kaya.

Dengan HTML5, Anda dapat membuat website yang lebih terstruktur, mudah diakses, dan kompatibel dengan berbagai perangkat.

2. Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang wajib dipahami. Berikut contoh struktur dasar dokumen HTML5:

<!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>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Penjelasan singkat:

<!DOCTYPE html> : Mendefinisikan dokumen sebagai HTML5.
<html lang="id"> : Elemen root dengan atribut bahasa Indonesia.
<head> : Bagian metadata, seperti judul dan pengaturan viewport.
<body> : Isi utama halaman web.

Diagram visual yang menunjukkan struktur dasar dokumen HTML5 dengan elemen doctype, html, head, dan body

3. Elemen dan Tag HTML Penting

HTML terdiri dari elemen-elemen yang dibuka dan ditutup dengan tag. Berikut beberapa tag penting yang sering digunakan:

<h1> - <h6> : Heading atau judul dengan tingkat prioritas.
<p> : Paragraf teks.
<a href=""> : Link atau tautan.
<img src="" alt=""> : Menampilkan gambar dengan atribut sumber dan deskripsi.
<ul> dan <ol> : Daftar tidak berurutan dan berurutan.
<div> : Kontainer blok untuk mengelompokkan elemen.
<span> : Kontainer inline untuk styling bagian kecil teks.

Contoh penggunaan tag:

<h1>Selamat Datang di Website Saya</h1>
<p>Ini adalah paragraf pembuka yang menjelaskan isi website.</p>
<a href="https://www.example.com">Kunjungi Website Contoh</a>
<img src="https://placehold.co/400x200/png?text=Contoh+Gambar" alt="Gambar contoh pemandangan alam dengan pegunungan dan danau" />

Tampilan browser yang menampilkan heading, paragraf, link, dan gambar contoh

4. Pengantar CSS3

CSS3 adalah bahasa stylesheet yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS3, Anda dapat mengubah warna, ukuran, posisi, dan animasi elemen HTML.

CSS3 juga mendukung fitur-fitur modern seperti Flexbox, Grid, Transitions, dan Media Queries untuk membuat website yang responsif dan interaktif.

5. Selektor dan Sintaks CSS

Sintaks CSS terdiri dari selektor dan deklarasi properti. Contoh:

selector {
  property: value;
  property2: value2;
}

Contoh penggunaan:

h1 {
  color: #4F46E5;
  font-size: 2.5rem;
  text-align: center;
}

p {
  color: #374151;
  line-height: 1.6;
}

Beberapa jenis selektor umum:

Tag selector: Memilih semua elemen berdasarkan tag, misal p , h1 .
Class selector: Memilih elemen dengan atribut class tertentu, misal .btn .
ID selector: Memilih elemen dengan atribut id tertentu, misal #header .
Attribute selector: Memilih elemen berdasarkan atribut, misal a[href] .

Contoh kode CSS dengan heading berwarna biru dan paragraf berwarna abu-abu serta hasil styling di browser

6. Layout dengan CSS: Flexbox & Grid

Flexbox dan Grid adalah dua metode layout modern di CSS3 yang memudahkan pengaturan posisi dan ukuran elemen dalam container.

Flexbox

Flexbox mengatur elemen dalam satu dimensi (baris atau kolom). Contoh:

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

Ilustrasi layout flexbox dengan beberapa kotak berwarna yang tersusun rapi secara horizontal dengan jarak antar kotak

Grid

Grid mengatur elemen dalam dua dimensi (baris dan kolom). Contoh:

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

Ilustrasi layout grid dengan sembilan kotak berwarna yang tersusun dalam tiga kolom dan tiga baris dengan jarak antar kotak

7. Responsive Design dengan Media Queries

Responsive design membuat website dapat menyesuaikan tampilannya di berbagai ukuran layar, seperti smartphone, tablet, dan desktop.

Media queries adalah fitur CSS yang memungkinkan Anda menerapkan aturan styling berbeda berdasarkan kondisi layar.

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Contoh: Mengubah layout flexbox dari baris menjadi kolom saat layar lebih kecil dari 768px.

Ilustrasi tampilan website yang berubah layout dari desktop ke tablet dan smartphone dengan ukuran layar berbeda

8. Project: Website Sederhana Step-by-Step

Mari kita buat website sederhana yang menampilkan profil pribadi dengan HTML dan CSS.

Langkah 1: Struktur HTML

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profil Saya</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <img src="https://placehold.co/150x150/png?text=Foto+Profil+Orang+Muda+Tersenyum" alt="Foto profil orang muda tersenyum dengan latar belakang netral" class="profile-pic" />
      <h1>Nama Saya</h1>
      <p>Saya seorang web developer pemula yang sedang belajar HTML dan CSS.</p>
    </div>
  </body>
</html>

Langkah 2: Styling CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 320px;
}

.profile-pic {
  border-radius: 50%;
  margin-bottom: 1rem;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

h1 {
  color: #4F46E5;
  margin-bottom: 0.5rem;
}

p {
  color: #374151;
  font-size: 1rem;
}

Hasil Akhir

Tampilan website profil sederhana dengan foto profil bulat, nama berwarna biru, dan deskripsi singkat di bawahnya

9. Sumber Belajar dan Channel Pembelajaran Lainnya

Berikut beberapa sumber dan channel yang sangat membantu untuk belajar HTML5 dan CSS3 secara lengkap dan mudah dipahami:

MDN Web Docs - HTML - Dokumentasi resmi dan lengkap tentang HTML.
MDN Web Docs - CSS - Dokumentasi resmi dan lengkap tentang CSS.
W3Schools HTML Tutorial - Tutorial interaktif HTML.
W3Schools CSS Tutorial - Tutorial interaktif CSS.
Academind (YouTube) - Channel YouTube dengan tutorial web development berkualitas.
Traversy Media (YouTube) - Channel YouTube populer untuk belajar coding dan web development.
freeCodeCamp (YouTube) - Channel YouTube dengan kursus coding gratis dan lengkap.