Pelajari HTML & CSS: Kunci Desain Web Responsif untuk Pemula

Pelajari HTML & CSS untuk menciptakan desain web responsif yang menarik! Temukan kunci sukses pemula di dunia web yang menanti Anda.

By WGS INDONESIA
4.9/4.9
Indonesia
Rp 43,750.00 GRATIS
E-COURSE banner with text and icons representing Artificial Intelligence and video learning

Detail Pembelajaran

Pelajari HTML & CSS: Kunci Desain Web Responsif untuk Pemula
  • HTML, CSS, Desain Web, Pemula, Responsif

Baca Online

Pelajari HTML & CSS: Kunci Desain Web Responsif untuk Pemula

Ebook ini akan membimbing Anda secara lengkap dan sistematis untuk memahami dasar-dasar HTML dan CSS, serta bagaimana membuat desain web yang responsif dan menarik. Setiap bab disusun secara step-by-step dengan contoh kode, penjelasan, dan sumber belajar tambahan agar Anda dapat belajar dengan mudah dan efektif.

Bab 1: Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat halaman web. HTML digunakan untuk menyusun konten dan elemen-elemen pada halaman web seperti teks, gambar, tautan, dan lainnya.

Apa itu HTML?

HTML bukan bahasa pemrograman, melainkan bahasa markup yang menggunakan tag-tag untuk menandai bagian-bagian konten. Tag HTML biasanya terdiri dari tag pembuka dan penutup, misalnya <p> dan </p> untuk paragraf.

Contoh Struktur HTML Sederhana 

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>Contoh Halaman</title>
  </head>
  <body>
    <h1>Halo Dunia</h1>
    <p>Ini adalah paragraf pertama saya.</p>
  </body>
</html>

Kode di atas membuat halaman web sederhana dengan judul dan paragraf.

Bab 2: Struktur Dasar HTML

Setiap halaman HTML memiliki struktur dasar yang wajib dipahami agar halaman dapat ditampilkan dengan benar di browser.

Elemen Utama Struktur HTML

  • <!DOCTYPE html> - Mendefinisikan tipe dokumen HTML5.
  • <html> - Elemen root yang membungkus seluruh konten.
  • <head> - Bagian metadata, seperti judul, charset, dan link CSS.
  • <body> - Bagian utama yang berisi konten yang ditampilkan.

Contoh Struktur Lengkap 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Halaman Contoh</title>
  </head>
  <body>
    <h1>Selamat Datang</h1>
    <p>Ini adalah halaman web pertama saya.</p>
  </body>
</html>

Struktur ini adalah pondasi untuk membuat halaman web yang valid dan dapat diakses dengan baik.

Bab 3: Pengenalan CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. Dengan CSS, Anda dapat mengubah warna, ukuran, posisi, dan gaya elemen HTML.

Cara Menggunakan CSS

Ada tiga cara utama menambahkan CSS ke halaman HTML:

  1. Inline CSS: langsung pada atribut style di elemen HTML.
  2. Internal CSS: menggunakan tag <style> di dalam <head> .
  3. External CSS: menggunakan file CSS terpisah dan menghubungkannya dengan <link> .

Contoh Internal CSS 

<!DOCTYPE html>
<html lang="id">
  <head>
    <style>
      body {
        background-color: #f0f4f8;
        font-family: Arial, sans-serif;
      }
      h1 {
        color: #2563eb;
      }
      p {
        color: #374151;
      }
    </style>
    <title>Contoh CSS</title>
  </head>
  <body>
    <h1>Judul Halaman</h1>
    <p>Ini paragraf dengan gaya CSS.</p>
  </body>
</html>

Bab 4: Selektor dan Properti CSS

Selektor CSS digunakan untuk memilih elemen HTML yang ingin diberi gaya. Properti CSS menentukan gaya yang diterapkan.

Jenis Selektor CSS

  • Selektor Tag: memilih elemen berdasarkan nama tag, misal p , h1 .
  • Selektor Kelas: memilih elemen berdasarkan atribut class , misal .container .
  • Selektor ID: memilih elemen berdasarkan atribut id , misal #header .
  • Selektor Atribut: memilih elemen berdasarkan atribut tertentu.

Contoh CSS dengan Berbagai Selektor 

/* Selektor tag */
h1 {
  color: #1d4ed8;
}

/* Selektor kelas */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

/* Selektor ID */
#footer {
  background-color: #e0e7ff;
  padding: 1rem;
  text-align: center;
}

Properti CSS Umum

  • color - warna teks
  • background-color - warna latar belakang
  • font-size - ukuran font
  • margin - jarak luar elemen
  • padding - jarak dalam elemen
  • border - garis tepi elemen
  • display - cara elemen ditampilkan (block, inline, flex, dll.)

Bab 5: Desain Web Responsif dengan Media Queries

Desain web responsif memungkinkan halaman web menyesuaikan tampilannya sesuai ukuran layar perangkat, seperti ponsel, tablet, dan desktop.

Apa itu Media Queries?

Media queries adalah fitur CSS yang memungkinkan Anda menerapkan gaya berbeda berdasarkan kondisi perangkat, seperti lebar layar.

Contoh Media Queries 

/* Gaya default untuk desktop */
.container {
  width: 800px;
  margin: 0 auto;
  padding: 1rem;
}

/* Gaya untuk layar maksimal 600px (ponsel) */
@media (max-width: 600px) {
  .container {
    width: 100%;
    padding: 0.5rem;
  }
  h1 {
    font-size: 1.5rem;
  }
}

Dengan media queries, halaman web akan terlihat optimal di berbagai perangkat.

Bab 6: Contoh Proyek Mini - Halaman Profil Responsif

Mari kita buat contoh halaman profil sederhana yang responsif menggunakan HTML dan CSS.

Kode HTML 

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Profil Saya</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background-color: #f9fafb;
        margin: 0;
        padding: 0;
      }
      .container {
        max-width: 700px;
        margin: 2rem auto;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        padding: 2rem;
      }
      .profile-img {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 1rem;
      }
      h1 {
        color: #2563eb;
        margin-bottom: 0.5rem;
      }
      p {
        color: #4b5563;
        line-height: 1.5;
      }
      @media (max-width: 600px) {
        .container {
          margin: 1rem;
          padding: 1rem;
        }
        .profile-img {
          width: 100px;
          height: 100px;
        }
        h1 {
          font-size: 1.5rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <img src="https://placehold.co/150x150/png?text=Foto+Profil+Orang+Indonesia+berambut+hitam+bermata+coklat+tersenyum" alt="Foto profil orang Indonesia berambut hitam berwajah cerah tersenyum" class="profile-img" />
      <h1>Nama Saya: Budi Santoso</h1>
      <p>Saya seorang web developer pemula yang sedang belajar HTML dan CSS untuk membuat desain web yang responsif dan menarik. Saya tertarik untuk mengembangkan kemampuan saya agar dapat membuat website profesional.</p>
    </div>
  </body>
</html>

Penjelasan

  • Container: Membatasi lebar konten dan memberi padding serta bayangan.
  • Gambar Profil: Bulat dengan ukuran yang menyesuaikan layar.
  • Media Queries: Mengubah ukuran gambar dan teks pada layar kecil.

Hasil Preview

Foto profil orang Indonesia berambut hitam berwajah cerah tersenyum

Nama Saya: Budi Santoso

Saya seorang web developer pemula yang sedang belajar HTML dan CSS untuk membuat desain web yang responsif dan menarik. Saya tertarik untuk mengembangkan kemampuan saya agar dapat membuat website profesional.

Bab 7: Sumber Belajar dan Channel Pembelajaran

Berikut adalah beberapa sumber belajar dan channel YouTube yang sangat direkomendasikan untuk memperdalam pemahaman HTML dan CSS:

Rekomendasi Buku

  • HTML and CSS: Design and Build Websites oleh Jon Duckett
  • Learning Web Design oleh Jennifer Niederst Robbins

Edukasi Terkait