Pelajari HTML dan CSS: Fondasi Website untuk Pemula!

Daftar Isi

Pengantar HTML dan CSS
Materi HTML Dasar
Materi CSS Dasar
Step by Step Membuat Website Sederhana
Source Code Contoh Website
Channel Pembelajaran Lainnya

Pengantar HTML dan CSS

HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua teknologi utama yang digunakan untuk membuat dan mendesain halaman website. HTML berfungsi untuk membuat struktur dan konten halaman, sedangkan CSS digunakan untuk mengatur tampilan dan layout halaman tersebut.

Dengan mempelajari HTML dan CSS, Anda dapat membuat website yang menarik, responsif, dan mudah digunakan. Ebook ini akan membimbing Anda dari dasar hingga membuat website sederhana secara step by step.

Ilustrasi komputer dengan kode HTML dan CSS di layar, menggambarkan pembelajaran web development untuk pemula

Materi HTML Dasar

HTML adalah bahasa markup yang digunakan untuk membuat struktur halaman web. Berikut adalah elemen-elemen dasar HTML yang perlu Anda ketahui:

<!DOCTYPE html> - Mendefinisikan tipe dokumen HTML5.
<html> - Elemen root dari halaman HTML.
<head> - Bagian yang berisi metadata, judul, dan link ke file eksternal.
<title> - Judul halaman yang muncul di tab browser.
<body> - Bagian utama yang berisi konten halaman.
<h1> sampai <h6> - Heading atau judul dengan tingkat penting berbeda.
<p> - Paragraf teks.
<a> - Link atau tautan.
<img> - Menampilkan gambar.
<ul> dan <ol> - Daftar tidak berurutan dan berurutan.
<div> - Kontainer umum untuk mengelompokkan elemen.

Contoh struktur HTML dasar:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Judul Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia!</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Materi CSS Dasar

CSS digunakan untuk mengatur tampilan halaman web. Anda dapat mengubah warna, ukuran font, layout, dan banyak lagi. Berikut adalah konsep dasar CSS:

Selector - Menentukan elemen HTML yang akan diberi gaya.
Property - Atribut yang ingin diubah, seperti color , font-size , margin .
Value - Nilai dari property, misalnya red , 16px , 10px .

Contoh CSS sederhana:

h1 {
  color: navy;
  font-size: 36px;
  margin-bottom: 10px;
}

p {
  color: #333333;
  font-size: 18px;
  line-height: 1.5;
}

CSS bisa ditulis di dalam file terpisah dengan ekstensi .css dan dihubungkan ke HTML menggunakan tag <link> , atau bisa juga ditulis langsung di dalam tag <style> di bagian <head> .

Ilustrasi layar komputer dengan kode CSS berwarna-warni yang mengatur tampilan website

Step by Step Membuat Website Sederhana

Membuat Struktur HTML Dasar

Buat file bernama index.html dan tulis struktur HTML dasar berikut:

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Website Sederhana</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Selamat Datang di Website Saya</h1>
    </header>
    <main>
      <p>Ini adalah website sederhana yang dibuat dengan HTML dan CSS.</p>
    </main>
    <footer>
      <p>Hak Cipta © 2024</p>
    </footer>
  </body>
</html>

Membuat File CSS untuk Styling

Buat file bernama styles.css dan tambahkan kode CSS berikut untuk mempercantik tampilan:

body {
  font-family: Arial, sans-serif;
  background-color: #f9fafb;
  color: #1f2937;
  margin: 0;
  padding: 20px;
}

header {
  background-color: #3b82f6;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

main {
  margin-top: 20px;
  font-size: 18px;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

Membuka Website di Browser

Simpan kedua file tersebut di folder yang sama, lalu buka index.html menggunakan browser favorit Anda (Chrome, Firefox, Edge, dll). Anda akan melihat website sederhana dengan header biru, teks utama, dan footer.

Menambahkan Gambar dan Link

Tambahkan gambar dan tautan ke dalam <main> untuk membuat konten lebih menarik:

<main>
  <p>Ini adalah website sederhana yang dibuat dengan HTML dan CSS.</p>
  <img src="https://placehold.co/400x200/png?text=Gambar+Website" alt="Gambar ilustrasi website sederhana dengan latar belakang biru dan ikon komputer" class="rounded-lg mt-4">
  <p>Pelajari lebih lanjut di <a href="https://www.w3schools.com" target="_blank" class="text-blue-600 underline">W3Schools</a>.</p>
</main>

Membuat Layout Responsif dengan CSS

Tambahkan CSS berikut untuk membuat website Anda responsif dan rapi di berbagai ukuran layar:
```
@media (min-width: 640px) {
  body {
    max-width: 640px;
    margin: 0 auto;
  }
  main {
    font-size: 20px;
  }
}
          
```
Sekarang website Anda akan tampil lebih baik di perangkat mobile dan desktop.

Source Code Contoh Website

Berikut adalah source code lengkap dari website sederhana yang sudah kita buat:

index.html

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <title>Website Sederhana</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Selamat Datang di Website Saya</h1>
    </header>
    <main>
      <p>Ini adalah website sederhana yang dibuat dengan HTML dan CSS.</p>
      <img src="https://placehold.co/400x200/png?text=Gambar+Website" alt="Gambar ilustrasi website sederhana dengan latar belakang biru dan ikon komputer" class="rounded-lg mt-4">
      <p>Pelajari lebih lanjut di <a href="https://www.w3schools.com" target="_blank" class="text-blue-600 underline">W3Schools</a>.</p>
    </main>
    <footer>
      <p>Hak Cipta © 2024</p>
    </footer>
  </body>
</html>

styles.css

body {
  font-family: Arial, sans-serif;
  background-color: #f9fafb;
  color: #1f2937;
  margin: 0;
  padding: 20px;
}

header {
  background-color: #3b82f6;
  color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

main {
  margin-top: 20px;
  font-size: 18px;
}

footer {
  margin-top: 40px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

@media (min-width: 640px) {
  body {
    max-width: 640px;
    margin: 0 auto;
  }
  main {
    font-size: 20px;
  }
}