Sub-bab 1

Tujuan Pembelajaran

Dalam sesi ini, kita akan mempelajari dasar-dasar HTML dan CSS, dua komponen utama dalam pembuatan halaman web. Pemahaman tentang HTML dan CSS ini sangat penting sebelum kita mulai praktik membuat website portofolio. HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk struktur dan konten web, sedangkan CSS (Cascading Style Sheets) digunakan untuk styling dan layout web.

Apa itu HTML dan CSS?
Fungsi HTML dan CSS
Melihat Contoh sederhana penggunaannya

Sub-bab 2

Apa itu HTML ?

Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat dan menyusun halaman web. HTML bukan bahasa pemrograman karena tidak memiliki logika seperti perulangan atau kondisi.

Bekerja dengan tag untuk menandai elemen
Mendefinisikan struktur konten seperti paragraf, gambar, atau tautan
Bersifat deklaratif - memberi tahu browser elemen apa yang ditampilkan
Diterjemahkan menjadi tampilan visual oleh browser

Contoh Struktur HTML

<!DOCTYPE html>
<html>
<head>
  <title>Contoh Halaman</title>
</head>
<body>
  <h1>Judul Utama</h1>
  <p>Ini adalah paragraf contoh.</p>
</body>
</html>

Kode dasar HTML menunjukkan struktur dokumen yang terdiri dari head dan body.

Demo Interaktif

Editor HTML Live Preview

Memuat preview...

Gunakan editor di atas untuk bereksperimen dengan kode HTML langsung.

Sub-bab 3

Peran HTML dan CSS dalam pembuatan website

HTML dan CSS saling melengkapi dalam membangun website. HTML menyusun struktur halaman seperti judul, paragraf, gambar, dan tautan.

CSS mempercantik tampilannya—mengatur warna, font, jarak, dan tata letak. Tanpa HTML, tidak ada konten; tanpa CSS, tampilannya akan polos.

Keduanya bersama-sama membuat website menjadi fungsional dan menarik.

HTML sebagai struktur bangunan, CSS sebagai desain interior

Peran HTML

Struktur konten
Semantik dokumen
Dasar aksesibilitas
Kerangka halaman

Peran CSS

Tampilan visual
Tata letak halaman
Responsivitas
Animasi sederhana

Tip: Pelajari HTML terlebih dahulu untuk memahami struktur dasar, baru kemudian pelajari CSS untuk memperindah tampilan.

Sub-bab 4

Contoh Tag Umum HTML

Perkembangan Teknologi Web

Perkembangan teknologi web dari masa ke masa telah mengalami banyak perubahan signifikan. Berikut adalah beberapa tag HTML dasar yang menjadi fondasi pembuatan web.

Tag HTML yang Sering Digunakan

<h1> hingga <h6> untuk judul dengan tingkat penting berbeda
<p> untuk paragraf
<a> untuk tautan
<img> untuk gambar
<ul>, <ol>, dan <li> untuk membuat daftar

Dengan kombinasi tag-tag ini, kita bisa menyusun struktur konten yang informatif dan mudah dibaca.

Contoh Praktis

Saat kita menuliskan kode HTML dan membuka filenya di browser, kita akan melihat hasilnya dalam bentuk visual. Misalnya, ketika kita menulis:

<h1>Selamat Datang</h1>
      <p>Ini website pertama saya</p>

Browser akan menampilkan teks besar sebagai judul, dan paragraf di bawahnya. Meskipun tampilannya masih polos, dari sinilah struktur konten mulai terbentuk.

Tanpa perlu styling tambahan, HTML sudah mampu menyusun halaman yang fungsional.

Contoh Struktur HTML

Memuat preview...

Sub-bab 5

Class dan ID dalam HTML

Memahami Class dan ID dalam HTML

Class

•Digunakan untuk banyak elemen sekaligus
•Bisa dipakai berulang kali dalam satu halaman
•Ditulis dengan tanda titik di CSS .nama-class
•Cocok untuk gaya yang konsisten di banyak elemen

ID

•Digunakan untuk satu elemen unik
•Hanya boleh dipakai sekali per halaman
•Ditulis dengan tanda pagar di CSS #nama-id
•Cocok untuk elemen spesifik yang perlu di-target

Contoh Implementasi

HTML:

<div class="container">
        <p id="header-text">Judul Halaman</p>
        <p class="highlight">Konten pertama</p>
        <p class="highlight">Konten kedua</p>
      </div>

CSS:

#header-text {
        font-size: 2rem;
        color: navy;
      }
      
      .highlight {
        background-color: yellow;
        padding: 0.5rem;
      }

Kesimpulan

Gunakan class ketika ingin menerapkan gaya yang sama ke banyak elemen, dan gunakan id untuk elemen unik yang perlu di-target khusus. Kombinasi keduanya membantu menciptakan tampilan website yang konsisten dan terorganisir.

Sub-bab 6

Pengenalan CSS

Apa Itu CSS?

CSS

Cascading Style Sheets

CSS (Cascading Style Sheets) adalah teknologi yang digunakan untuk mengatur tampilan halaman web. CSS memberi gaya pada elemen HTML, seperti warna, ukuran font, jarak, tata letak, hingga animasi.

Fakta Menarik: Tanpa CSS, halaman web hanya akan tampil sebagai teks polos dengan latar putih dan link biru bergaris bawah.

Keunggulan CSS

Kontrol Layout

Mengatur tata letak elemen dengan fleksibel menggunakan Grid, Flexbox, dan positioning

Konsistensi Visual

Menjaga keseragaman tampilan di seluruh halaman website

Efisiensi Kode

Satu file CSS dapat digunakan untuk banyak halaman sekaligus

Contoh CSS dalam Aksi

Tombol Modern

.tombol {
        background-color: #3b82f6;
        color: white;
        padding: 1rem;
        border-radius: 0.5rem;
        font-weight: bold;
        text-align: center;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
      }

Notifikasi penting untuk pengguna

Peringatan: Data akan segera dihapus

.notifikasi {
        padding: 0.75rem;
        border-left: 4px solid;
        margin-bottom: 1rem;
      }
      
      .info {
        background-color: #f3e8ff;
        border-color: #8b5cf6;
        color: #6b21a8;
      }
      
      .peringatan {
        background-color: #fef9c3;
        border-color: #f59e0b;
        color: #92400e;
      }

Mengapa CSS Penting?

CSS mengubah HTML dari sekadar struktur konten menjadi pengalaman visual yang menarik. Kombinasi HTML (struktur) dan CSS (tampilan) adalah fondasi dari semua website modern.

Sub-bab 7

Cara Menyisipkan CSS

3 Cara Menyisipkan CSS ke HTML

Inline CSS

Menulis style langsung dalam elemen HTML menggunakan atribut style

<h1 style="color: blue; 
          font-size: 24px;">
        Judul Biru
      </h1>

⚠️Cocok untuk style khusus satu elemen, tapi tidak disarankan untuk banyak elemen karena sulit dikelola

Internal CSS

Menulis style dalam tag <style> di bagian <head> HTML

<head>
        <style>
          h1 {
            color: green;
            font-size: 24px;
          }
        </style>
      </head>

ℹ️Cocok untuk halaman tunggal, tapi kurang efisien untuk banyak halaman

External CSS

Menulis CSS di file terpisah (.css), lalu dihubungkan dengan tag <link>

<head>
        <link rel="stylesheet" 
          href="styles.css">
      </head>

✅Metode terbaik untuk proyek besar - mudah dikelola, caching browser, dan reusable

Perbandingan Metode

Metode	Kelebihan	Kekurangan	Rekomendasi
Inline	Spesifik, prioritas tinggi	Sulit dikelola, tidak reusable	Style khusus satu elemen
Internal	Organized, reusable dalam satu halaman	Tidak bisa dipakai di banyak halaman	Halaman tunggal/simple
External	Reusable, mudah dikelola, performa baik	File tambahan yang perlu di-load	Proyek besar/multi halaman

Contoh Implementasi External CSS

HTML (index.html):

<!DOCTYPE html>
      <html>
      <head>
        <link rel="stylesheet" 
          href="styles.css">
      </head>
      <body>
        <h1 class="judul">Halo Dunia</h1>
      </body>
      </html>

CSS (styles.css):

.judul {
        color: #3b82f6;
        font-size: 2rem;
        text-align: center;
        margin-top: 2rem;
      }

Tip: Gunakan path yang benar saat menghubungkan file CSS. Jika file CSS berada di folder berbeda, gunakan path relatif seperti href="css/styles.css"

Sub-bab 8

Contoh CSS Sederhana

1. Styling Dasar

Memuat preview...

HTML

<!DOCTYPE html>
      <html>
      <head>
        <title>Contoh CSS</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <h1>Belajar CSS</h1>
        <p class="teks-merah">Ini paragraf pertama</p>
        <button>Klik Saya</button>
      </body>
      </html>

CSS

/* Gaya dasar */
      body {
        font-family: Arial, sans-serif;
        text-align: center;
        padding: 20px;
      }
      
      h1 {
        color: #3b82f6;
        margin-bottom: 20px;
      }
      
      .teks-merah {
        color: red;
        font-size: 18px;
      }
      
      button {
        background-color: #3b82f6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
      }
      
      button:hover {
        background-color: #2563eb;
      }

2. Box Model

Memuat preview...

HTML

<!DOCTYPE html>
      <html>
      <head>
        <title>Box Model</title>
        <link rel="stylesheet" href="style.css">
      </head>
      <body>
        <div class="kotak">Kotak 1</div>
        <div class="kotak spesial">Kotak 2</div>
      </body>
      </html>

CSS

.kotak {
        width: 200px;
        height: 200px;
        background-color: #8b5cf6;
        color: white;
        margin: 20px;
        padding: 20px;
        border: 5px solid #6d28d9;
        display: inline-block;
      }
      
      .spesial {
        box-sizing: border-box;
        background-color: #ec4899;
      }

Sub-bab 9

Kenapa HTML dan CSS Penting?

Mengapa HTML & CSS Sangat Penting?

Fondasi Utama Pembangunan Web

HTML dan CSS adalah dasar dari semua halaman web. Seperti rumah yang membutuhkan pondasi kuat, website membutuhkan HTML untuk struktur dan CSS untuk tampilan visual.

Fakta: 97% dari semua website di internet menggunakan HTML dan CSS sebagai teknologi dasar.

Peran Masing-Masing

HTML

•Memberikan struktur dasar dan konten website
•Tanpa HTML, tidak ada teks, gambar, atau tautan yang bisa ditampilkan
•Membuat kerangka yang dapat dimengerti oleh browser

CSS

•Mengatur tampilan visual dan tata letak
•Tanpa CSS, website akan terlihat polos dan tidak menarik
•Memungkinkan desain responsif untuk berbagai perangkat

Pentingnya Kombinasi HTML & CSS

Struktur + Tampilan

HTML menyediakan struktur, CSS mengatur tampilan - kombinasi sempurna untuk web

Dasar Framework

Semua framework modern (React, Vue, dll) tetap membutuhkan HTML/CSS

Aksesibilitas

HTML yang semantik + CSS yang baik meningkatkan aksesibilitas website

HTML & CSS adalah Keterampilan Wajib

Bahkan ketika menggunakan framework modern sekalipun, pemahaman solid tentang HTML dan CSS tetap menjadi syarat utama untuk menjadi web developer yang kompeten.

Pelajari Lebih Lanjut

Sub-bab 10

Kesimpulan

HTML

Membangun struktur dasar dan kerangka konten halaman web

CSS

Mengatur tampilan visual dan tata letak elemen

Hubungan HTML & CSS

•Saling melengkapi seperti tulang dan kulit pada tubuh
•HTML tanpa CSS = struktur tanpa keindahan
•CSS tanpa HTML = gaya tanpa konten

Langkah Selanjutnya

Dengan penguasaan dasar HTML dan CSS, Anda siap melangkah ke teknologi lanjutan seperti:

BootstrapJavaScriptReactTailwind CSS

Mulai Belajar Framework

Modul KKN SI 2025

HTML & CSS: Dasar dan Penerapannya

Tujuan Pembelajaran

Apa itu HTML ?

Pengenalan HTML

Contoh Struktur HTML

Demo Interaktif

Editor HTML Live Preview

Peran HTML dan CSS dalam pembuatan website

Peran HTML

Peran CSS

Contoh Tag Umum HTML

Perkembangan Teknologi Web

Tag HTML yang Sering Digunakan

Contoh Praktis

Contoh Struktur HTML

Class dan ID dalam HTML

Memahami Class dan ID dalam HTML

Class

ID

Contoh Implementasi

HTML:

CSS:

Kesimpulan

Pengenalan CSS

CSS

Keunggulan CSS

Kontrol Layout

Konsistensi Visual

Efisiensi Kode

Contoh CSS dalam Aksi

Mengapa CSS Penting?

Cara Menyisipkan CSS

3 Cara Menyisipkan CSS ke HTML

Inline CSS

Internal CSS

External CSS

Perbandingan Metode

Contoh Implementasi External CSS

HTML (index.html):

CSS (styles.css):

Contoh CSS Sederhana

Contoh CSS Sederhana

1. Styling Dasar

HTML

CSS

2. Box Model

HTML

CSS

Kenapa HTML dan CSS Penting?

Fondasi Utama Pembangunan Web

Peran Masing-Masing

HTML

CSS

Pentingnya Kombinasi HTML & CSS

Struktur + Tampilan

Dasar Framework

Aksesibilitas

HTML & CSS adalah Keterampilan Wajib

Kesimpulan

Kesimpulan

HTML

CSS

Hubungan HTML & CSS

Langkah Selanjutnya