Bab 09: Mengatur Tampilan dengan Atribut Style HTML
Pernah nggak sih, pas bikin halaman web pake HTML, tiba-tiba ngerasa: “Kok tampilannya kayak catatan belanjaan di kertas bekas?”
Tenang, kamu nggak sendirian. HTML itu memang jago ngatur struktur judulnya di mana, paragrafnya di sini, gambarnya di sana tapi soal “kece”, dia butuh bantuan. Nah, di situlah atribut style datang bak superhero bertopeng (tapi pake jubah dari CSS).
Nah, artikel ini bakal bawa kamu jalan-jalan santai cara mengatur tampilan dengan atribut style HTML dimulai dengan mengenal apa itu atribut style, cara kerjanya, gimana nulisnya biar nggak error, plus contoh yang langsung bisa kamu coba.
Apa Itu HTML Style
Jadi, HTML itu kayak kerangka rumah ada pintu, jendela, kamar, tapi belum ada cat dinding atau lampu gantung. Buat bikin rumah itu aesthetic, kita butuh dekorasi. Dan di dunia web, atribut style adalah kuas kecilmu buat ngecat langsung di elemen HTML.
Fungsinya simpel: kamu bisa kasih gaya visual kayak warna, ukuran font, atau posisi teks langsung di dalam tag HTML. Contohnya:
<p style="color: blue;">Halo dunia!</p>Teks ini bakal muncul berwarna biru. Gampang, kan? Tapi hati-hati jangan sampai kebanyakan “ngecat” di tiap elemen. Nanti halaman web-mu malah jadi kayak proyek seni abstrak yang nggak ada yang ngerti.
Sintaks Dasar Atribut style dan Cara Nulis yang Bener!
Penulisan style itu ada aturannya bukan asal nempel kayak stiker di helm ojol. Strukturnya gini:
<tag style="property: value;">Beberapa hal yang perlu diingat:
- Property itu kayak
color,font-size, dll. - Value itu isi dari propertinya, misal
red,16px,Arial. - Tiap deklarasi diakhiri titik koma (
;) kalau ada lebih dari satu. - Semua ditulis dalam tanda kutip ganda (
").
Contoh benar:
<h1 style="color: purple; font-size: 24px;">Judul Kece</h1>Contoh salah (jangan ditiru!):
<h1 style=color: purple font-size: 24px>Judul Berantakan</h1>Nggak ada kutip, nggak ada titik koma browser bisa bingung dan malah nggak nampilin gayanya sama sekali!
Ngatur Warna Latar dengan background-color
Mau bikin halaman web-mu kayak langit senja atau kopi susu? Pakai background-color!
<div style="background-color: #f0e68c;">Kotak kuning lembut kayak telur asin.</div>Kamu bisa pake:
- Nama warna:
red,green,blue - Kode hex:
#ff5733 - RGB:
rgb(255, 87, 51) - Bahkan transparan:
rgba(255, 0, 0, 0.5)
Tapi jangan pasang warna latar merah terang dengan teks kuning nanti mata pengunjung langsung cari kacamata hitam.
Ganti Warna Teks dengan color
Warna teks diatur pake properti color (bukan text-color, itu mitos urban di kalangan newbie).
<p style="color: #2e8b57;">Hijau laut yang adem buat dibaca.</p>Tips: pastikan kontras antara teks dan latar cukup tinggi. Kalau tulisan abu-abu di latar putih tipis, itu namanya tantangan mata dan bukan desain minimalis.
Pilih Font Favorit dengan font-family
Kamu bosan sama font Times New Roman? Waktunya ganti!
<p style="font-family: 'Comic Sans MS', cursive;">...Oke, mungkin jangan ini.</p>Lebih aman pake font yang umum atau web-safe kayak:
Arial,HelveticaGeorgia,Times New RomanCourier New(buat efek “kode hacker”)
Kalau mau pake font keren dari Google Fonts, itu cerita lain tapi itu udah masuk wilayah CSS eksternal. Atribut style bisa bantu, tapi jangan jadikan satu-satunya andalan.
Atur Ukuran Teks Pakai font-size
Ukuran teks itu kayak bumbu masakan: kebanyakan atau kekurangan, rasanya jadi aneh.
<h2 style="font-size: 28px;">Judul gede biar dilihat</h2>
<p style="font-size: 14px;">Dan penjelasan kecil biar nggak ganggu.</p>Satuan yang sering dipake:
px(pixel): pas buat kontrol presisiemataurem: lebih fleksibel buat responsif
Jangan bikin teks 5px itu sih bukan minimalis tapi tantangan buat pengguna lansia dan penggemar zoom in 500%.
Rapiin Teks dengan text-align
Mau teks rata kiri kayak koran, tengah kayak judul lagu TikTok, atau kanan kayak puisi misterius? Pakai text-align!
<p style="text-align: center;">Aku di tengah, kayak hatimu. (Ups!)</p>Nilainya bisa: left, center, right, atau justify.
Tapi jangan rata-kanan semua teks paragraf kecuali kamu bikin situs khusus bahasa Arab atau Ibrani.
Contoh Lengkap HTML dengan Atribut Style
Berikut contoh halaman mini yang menggabungkan semua yang udah dibahas:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Kece ala Bos</span></title>
</head>
<body style="background-color: #f9f9f9; font-family: Arial, sans-serif;">
<h1 style="color: #2c3e50; text-align: center; font-size: 32px;">
Selamat Datang, Bos!
</h1>
<p style="color: #34495e; font-size: 18px; text-align: center;">
Ini halaman pertamamu yang <em>nggak cuma berfungsi, tapi juga cakep</em>.
</p>
<div style="background-color: #e8f4f8; padding: 15px; margin: 20px; border-radius: 8px;">
<p style="text-align: left; font-size: 16px;">
Kotak ini punya latar biru muda, padding, margin, dan sudut melengkung—semua pake <code>style</code>!
</p>
</div>
</body>
</html>Coba salin, tempel di file .html, lalu buka di browser. Voilà! Halaman pertamamu yang aesthetic.
Tips & Best Practice Pakai Atribut Style
Atribut style itu enak buat:
- Coba-coba cepat
- Gaya spesifik untuk satu elemen
- Situasi darurat (misal, presentasi dadakan)
Tapi jangan jadikan kebiasaan buat proyek besar. Kenapa?
- Bikin kode berantakan (HTML + CSS jadi satu)
- Sulit di-maintenance
- Nggak reusable
Kalau udah serius ngoding web, lebih baik pindah ke CSS eksternal. Itu kayak punya toko cat sendiri bisa dipake buat semua rumah, jadi nggak cuma satu tembok.
Tapi tenang, itu buat level lanjut. Saat ini, fokus dulu kuasai dasarnya, kayak kamu yang lagi belajar logika pemrograman secara sistematis.
Ringkasan Supaya Langsung Ngeh!
Berikut properti style yang udah kita pelajari:
| Properti | Fungsi | Contoh Nilai |
|---|---|---|
background-color | Warna latar belakang | #f0f0f0, lightblue |
color | Warna teks | #333, red |
font-family | Jenis huruf | Arial, "Times New Roman" |
font-size | Ukuran teks | 16px, 1.2em |
text-align | Posisi teks | left, center, right |
Ingat: atribut style itu alat, bukan gaya hidup. Pake seperlunya, pelajari sampai paham, lalu pelan-pelan pindah ke cara yang lebih rapi.
Sekarang kamu udah tahu gimana bikin halaman HTML mu nggak cuma jalan, tapi juga jreng!
Ingat, coding itu kayak masak, ngerti resep itu penting, tapi jangan takut coba bumbu sendiri. Atribut style itu bumbu instan, enak buat awal, tapi nanti kamu bakal bikin bumbu racikanmu sendiri (dengan CSS yang lebih terstruktur).
Kalau mau cek daftar isi belajar HTML untuk pemula langsung aja kesini.