Tujuan Pembelajaran
- Memahami dasar-dasar HTML sebagai struktur utama halaman web.
- Mengenal CSS sebagai alat untuk mempercantik tampilan web.
- Mampu membuat halaman web sederhana dengan HTML dan CSS.
Pengenalan HTML dan CSS
HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk menyusun struktur halaman web, seperti teks, gambar, dan tautan. Sedangkan CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya dari elemen-elemen tersebut, seperti warna, ukuran, dan tata letak.
Keduanya bekerja bersama: HTML membuat kerangka dasar, sementara CSS mempercantik tampilannya agar lebih menarik dan responsif.
Struktur Dasar HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar HTML & CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Selamat Datang di Website Saya</h1>
</header>
<main>
<p>Ini adalah contoh halaman sederhana menggunakan HTML dan CSS.</p>
</main>
<footer>
<p>© 2025 Belajar Web Dasar</p>
</footer>
</body>
</html>
Contoh CSS untuk Desain
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f9fafb;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #0077cc;
color: white;
text-align: center;
padding: 20px;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
font-size: 14px;
}
Langkah Praktik
- Buka teks editor seperti VS Code atau Notepad++.
- Buat file baru bernama index.html dan tulis struktur dasar HTML.
- Buat file baru bernama style.css dan tambahkan kode CSS di atas.
- Simpan keduanya dalam folder yang sama dan buka index.html di browser.
- Amati tampilan halaman yang sudah memiliki struktur dan desain.
Tips Desain Web
- Gunakan warna yang kontras agar teks mudah dibaca.
- Pastikan struktur HTML rapi dan sesuai hierarki (header, main, footer).
- Gunakan CSS eksternal agar kode lebih terorganisir.
- Uji tampilan di berbagai ukuran layar untuk memastikan responsivitas.
Asesmen: Tanya Jawab
- Apa perbedaan utama antara HTML dan CSS?
- Sebutkan elemen-elemen dasar dalam struktur HTML!
- Bagaimana cara menghubungkan file HTML dan CSS?
- Mengapa penting menggunakan CSS eksternal dibanding inline style?
- Buatlah satu contoh sederhana penggunaan warna latar dan font di CSS.
Tags
koding