Kalau lo lagi pengen bikin website, lo pasti pernah denger soal HTML dan CSS, kan? Buat lo yang masih newbie, jangan keburu mundur dulu. HTML dan CSS itu sebenarnya gampang banget dipelajari, apalagi kalau lo tahu triknya. Jadi, di artikel ini, gue bakal kasih lo panduan lengkap dan santai buat mulai bikin website sendiri, lengkap sama cara pasang CSS di HTML dan properti-properti penting yang wajib lo tau. Yuk, kita mulai!
HTML dan CSS: Siapa Mereka dan Apa Gunanya?
HTML (HyperText Markup Language) adalah kerangka atau struktur dasar dari website lo. Segala hal kayak teks, gambar, tabel, bahkan video semuanya ditulis menggunakan HTML.
Sementara itu, CSS (Cascading Style Sheets) adalah bahasa yang bikin website lo jadi lebih estetik. Dengan CSS, lo bisa atur warna, ukuran font, layout, sampai animasi biar website lo gak kelihatan kaku.
Kenapa Lo Perlu Belajar HTML dan CSS?
Di era digital sekarang, punya skill bikin website itu udah jadi nilai plus, bro. Gak cuma buat programmer, tapi juga buat lo yang mau bikin portfolio, jualan online, atau sekadar nge-blog. HTML dan CSS itu juga gak butuh modal mahal buat dipelajari. Banyak tutorial gratis yang bisa lo ikutin, dan hasilnya langsung bisa lo lihat di browser.
Cara Memasang CSS di HTML
Biar website lo gak cuma berupa teks polos, lo perlu gabungin CSS ke dalam HTML. Ada tiga cara utama buat nambahin CSS ke HTML: inline, internal, dan external. Berikut penjelasannya:
1. Inline CSS
Cara ini pas banget buat styling elemen tertentu langsung di dalam tag HTML. Tapi, biasanya kurang praktis kalau website lo besar.
Contoh:
<p style="color: red; font-size: 18px;">Ini teks dengan warna merah dan ukuran 18px.</p>
Hasilnya:
2. Internal CSS
Internal CSS dipasang langsung di file HTML lo, tapi ada di dalam tag <style> di bagian <head>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Hasilnya:
3. External CSS
Cara ini yang paling disarankan, apalagi kalau website lo punya banyak halaman. Lo tinggal bikin file CSS terpisah (misalnya style.css) dan sambungin ke HTML lewat tag <link> di bagian <head>.
Contoh file style.css:
body {
background-color: lightgray;
}
h1 {
color: green;
font-size: 24px;
}
File HTML-nya:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Halo Dunia!</h1>
</body>
</html>
Hasilnya:
Properti CSS yang Wajib Lo Tahu
Sekarang, gue bakal jelasin beberapa properti CSS dasar yang bakal sering banget lo pake:
1. Color
Properti ini buat ngatur warna teks atau background. Lo bisa pake nama warna, kode hex, atau RGB.
Contoh:
h1 {
color: blue;
}
body {
background-color: #f0f0f0;
}
2. Font-Family
Ngatur jenis font yang dipake. Biasanya, lo bisa kasih beberapa pilihan font biar browser pake font yang tersedia.
Contoh:
p {
font-family: Arial, Helvetica, sans-serif;
}
3. Font-Size
Buat ngatur ukuran teks. Lo bisa pake satuan seperti px, em, atau %.
Contoh:
p {
font-size: 16px;
}
4. Border
Ngasih garis di sekitar elemen. Lo bisa atur tipe garisnya (solid, dashed, dotted), ketebalan, dan warnanya.
Contoh:
div {
border: 2px solid black;
}
5. Padding
Ngatur jarak di dalam elemen, dari konten ke tepi elemen.
Contoh:
div {
padding: 20px;
}
6. Margin
Ngatur jarak di luar elemen, antara elemen satu dengan elemen lainnya.
Contoh:
div {
margin: 10px;
}
Contoh Lengkap: Gabungin Semua Properti
Biar makin jelas, ini contoh HTML dan CSS yang menggabungkan semua properti di atas:
File HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Website Pertama Gue</h1>
<p>Selamat datang di website gue yang keren!</p>
<div>
<p>Ini adalah kotak dengan padding dan margin.</p>
</div>
</body>
</html>
File CSS (style.css):
body {
background-color: #f9f9f9;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
h1 {
color: #007bff;
text-align: center;
margin-top: 20px;
}
p {
font-size: 16px;
line-height: 1.5;
}
div {
border: 2px solid #007bff;
padding: 15px;
margin: 20px auto;
max-width: 600px;
background-color: #fff;
}
Hasilnya:
Kesimpulan
Belajar HTML dan CSS itu gampang banget asal lo mau nyoba dan konsisten. Mulai dari bikin struktur dasar HTML, pasang CSS dengan cara inline, internal, atau external, lalu eksplor properti CSS seperti color, font-family, border, padding, dan margin.
Jadi, tunggu apa lagi? Cobain sekarang, dan lo bakal liat betapa asiknya bikin website sendiri. Kalau lo punya pertanyaan atau tips lain, tulis di kolom komentar, ya. Selamat ngoding, bro!
Komentar