Dasar-Dasar Kode HTML dan CSS untuk Website
Membuat website sendiri bisa jadi pengalaman yang menyenangkan dan bermanfaat. Dengan menguasai dasar-dasar kode HTML dan CSS, kamu bisa membangun website sederhana yang menarik dan fungsional. Berikut adalah panduan sederhana untuk memulai:
1. HTML: Struktur Website
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membangun struktur dan konten website. Kode HTML terdiri dari tag-tag yang mendefinisikan berbagai elemen website, seperti judul, paragraf, gambar, dan tautan.
Contoh kode HTML sederhana:
Website Saya
Selamat Datang di Website Saya!
Ini adalah paragraf pertama di website saya.
Penjelasan:
<!DOCTYPE html>: Menyatakan tipe dokumen HTML.<html>: Tag pembuka dan penutup untuk dokumen HTML.<head>: Menampung informasi tentang website, seperti judul dan tautan ke file CSS.<title>: Menentukan judul yang ditampilkan di tab browser.<body>: Menampung konten yang ditampilkan di website.<h1>: Tag untuk judul utama.<p>: Tag untuk paragraf.
2. CSS: Gaya Website
CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan gaya website. Dengan CSS, kamu bisa mengubah warna, font, ukuran, tata letak, dan banyak aspek lain dari website.
Contoh kode CSS sederhana:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: white;
text-align: center;
}
Penjelasan:
body { ... }: Mendefinisikan gaya untuk elemen<body>.background-color: lightblue;: Mengatur warna latar belakang menjadi biru muda.font-family: Arial, sans-serif;: Mengatur font menjadi Arial, dan jika Arial tidak tersedia, gunakan font sans-serif lainnya.h1 { ... }: Mendefinisikan gaya untuk elemen<h1>.color: white;: Mengatur warna teks menjadi putih.text-align: center;: Menyelaraskan teks ke tengah.
3. Menggabungkan HTML dan CSS
Untuk menerapkan gaya CSS ke website HTML, kamu bisa menggunakan tag <style> di dalam tag <head> atau membuat file CSS terpisah dan menghubungkannya dengan tag <link>.
Contoh dengan tag <style>:
Website Saya
Selamat Datang di Website Saya!
Ini adalah paragraf pertama di website saya.
Contoh dengan file CSS terpisah:
Website Saya
Selamat Datang di Website Saya!
Ini adalah paragraf pertama di website saya.
File style.css berisi kode CSS yang sama seperti contoh sebelumnya.
Kesimpulan
Ini adalah dasar-dasar kode HTML dan CSS untuk membuat website sederhana. Dengan mempelajari lebih lanjut tentang tag HTML dan properti CSS, kamu dapat membangun website yang lebih kompleks dan menarik. Ada banyak sumber daya online yang tersedia untuk membantu kamu mempelajari lebih lanjut tentang HTML dan CSS. Selamat belajar dan bereksperimen!