Modul Belajar HTML & CSS 2025 - Level 1 (Dasar Pemula)
Level 1 - Pengenalan HTML & CSS
Modul ini dirancang untuk pemula yang ingin mempelajari dasar-dasar pembuatan halaman web
menggunakan HTML dan CSS. Setelah menyelesaikan Level 1, Anda akan memahami struktur
dasar HTML, penggunaan tag umum, dan styling dasar dengan CSS.
1. Apa Itu HTML & CSS?
HTML (HyperText Markup Language) adalah bahasa markup untuk membuat struktur halaman web. CSS
(Cascading Style Sheets) digunakan untuk mengatur tampilan elemen-elemen HTML (warna, layout, ukuran,
dsb). HTML adalah kerangka, CSS adalah hiasannya.
2. Struktur Dasar HTML
Berikut adalah struktur HTML paling dasar yang wajib diketahui:
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Selamat Datang</h1>
<p>Ini adalah paragraf pertama Anda.</p>
</body>
</html>
3. Tag HTML Umum
Beberapa tag HTML yang umum digunakan:
- <h1> sampai <h6>: Judul
- <p>: Paragraf
- <a>: Hyperlink
Modul Belajar HTML & CSS 2025 - Level 1 (Dasar Pemula)
- <img>: Gambar
- <ul>, <ol>, <li>: List
- <div>: Container/blok umum
- <span>: Container inline
4. Cara Menulis CSS
CSS dapat ditulis dengan tiga cara:
1. Inline: langsung di atribut HTML
2. Internal: di dalam tag <style> di <head>
3. Eksternal: file .css terpisah yang di-link ke HTML
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
}
p {
color: #333;
}
</style>
5. Selektor dan Properti Dasar CSS
Contoh selektor CSS:
- h1: semua elemen <h1>
- .judul: elemen dengan class 'judul'
- #header: elemen dengan id 'header'
Properti CSS umum: color, background-color, font-size, padding, margin, border
Modul Belajar HTML & CSS 2025 - Level 1 (Dasar Pemula)
6. Contoh Proyek Mini: Biodata Sederhana
Berikut contoh implementasi HTML dan CSS untuk membuat halaman biodata:
<!DOCTYPE html>
<html>
<head>
<title>Biodata Saya</title>
<style>
body { font-family: Arial; background-color: #eef; padding: 20px; }
.card {
background: #fff; padding: 20px;
border-radius: 10px; width: 300px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 { color: #004080; }
p { color: #333; }
</style>
</head>
<body>
<div class="card">
<h2>Adam Nur Wicaksono</h2>
<p>Mahasiswa Sistem Informasi</p>
<p>Universitas Muhammadiyah Riau</p>
</div>
</body>
</html>
7. Latihan Mandiri
1. Buat halaman profil tokoh idola Anda menggunakan tag HTML dasar.
2. Tambahkan styling warna dan font dengan CSS internal.
3. Coba ubah background, padding, dan font-family.
