HTML Styles
Bab 1: Menghias HTML dengan Styles
Hingga saat ini, kode HTML yang kita buat masih terlihat sangat dasar: teks hitam di atas latar belakang putih. Di dunia profesional, tampilan (Desain) sama pentingnya dengan konten.
Atribut style digunakan untuk menambahkan gaya (desain) langsung ke elemen HTML, seperti warna, font, ukuran, dan posisi.
💡 Syntax Dasar:
Format penulisan atribut style adalah:
<tagname style="properti:nilai;">
- Properti: Apa yang ingin diubah (contoh: warna).
- Nilai: Bagaimana perubahannya (contoh: merah).
Bab 2: Mengubah Warna Latar (Background)
Properti background-color digunakan untuk mengubah warna latar belakang sebuah elemen. Anda bisa menerapkannya pada tag apa saja, termasuk <body> untuk mengubah warna seluruh halaman.
Contoh Background:
<body style="background-color:powderblue;">
<h1 style="background-color:blue;">Judul dengan Background</h1>
<p style="background-color:tomato;">Paragraf dengan Background</p>
</body>Bab 3: Mengubah Warna Teks (Color)
Properti color (tanpa kata "text") digunakan untuk mengubah warna tulisan. Anda bisa menggunakan nama warna (red, blue) atau kode HEX (#ff0000).
<h1 style="color:blue;">Judul Biru</h1>
<p style="color:red;">Paragraf Merah</p>Bab 4: Mengatur Huruf (Fonts)
Properti font-family menentukan jenis huruf yang digunakan. Font yang tepat akan membuat website terlihat lebih profesional.
- Verdana: Font standar yang bersih.
- Courier: Font seperti mesin ketik (Monospace).
- Arial: Font standar yang aman untuk semua browser.
<h1 style="font-family:verdana;">Judul Verdana</h1>
<p style="font-family:courier;">Paragraf Courier</p>Bab 5: Ukuran Teks (Font Size)
Properti font-size mengatur besar kecilnya huruf. Nilainya bisa dalam persen (%) atau pixel (px).
<h1 style="font-size:300%;">Judul Raksasa</h1>
<p style="font-size:160%;">Paragraf Besar</p>Bab 6: Perataan Teks (Alignment)
Properti text-align digunakan untuk mengatur posisi teks secara horizontal: left (kiri), center (tengah), atau right (kanan).
<h1 style="text-align:center;">Judul di Tengah</h1>
<p style="text-align:center;">Paragraf ini juga di tengah.</p>⚠️ Best Practice (Catatan Penting):
Di proyek nyata yang besar, menggunakan atribut style="..." (Inline CSS) seperti ini TIDAK DISARANKAN jika terlalu banyak. Cara terbaik adalah menggunakan CSS Eksternal (file terpisah). Namun untuk belajar dan perbaikan cepat, Inline Style sangat berguna untuk dipahami.
⚡ Proyek Kilat: Desain Kartu Ucapan
Tugas Anda adalah membuat sebuah "Kartu Digital" sederhana menggunakan semua properti style yang sudah dipelajari. Buat agar terlihat menarik!
🎯 Target Misi:
- ✅ Buat
<h1>dengan teks "Selamat Datang". Atur warnanya menjadi biru dan posisinya di tengah. - ✅ Buat
<p>dengan teks deskripsi. Atur ukuran fontnya menjadi 20px. - ✅ Bungkus semuanya dalam
<div>yang memiliki warna background abu-abu muda/gelap.
Pusat Dokumentasi Developer
Jangan hafalkan kodenya, cukup pahami logikanya. Kalau kamu butuh jawaban cepat saat lagi ngoding, kamu bisa intip dokumentasi teknis di bawah ini:
Layanan & Jasa
Fondasi Utama
Visual & Media
Alat Bantu Dev
Standar Global
Langkah Selanjutnya
Sekarang website kamu sudah berwarna! Selanjutnya, kita akan mempelajari cara memformat teks agar lebih kaya, seperti membuat huruf tebal, miring, atau garis bawah.
INSPIRED BY GLOBAL WEB STANDARDS • POWERED BY CODIVAY
Lanjut ke HTML Formatting »