Halo, Sobat Hazen! Pernah penasaran nggak sih bagaimana situs web itu dibuat? Mungkin kamu sering melihat halaman web yang menarik dan berpikir, "Bagaimana ya cara mereka membuat ini?" Nah, rahasianya adalah HTML dan CSS!
HTML dan CSS: Pondasi Web Development Modern
Pada tahun 1993, Tim Berners-Lee merilis HTML versi pertama dengan tujuan untuk berbagi informasi yang dapat dibaca dan diakses melalui web browser. Hingga saat ini versi HTML sudah mencapai versi 5 yang dirilis pada tahun 2012, Versi HTML 5 ini merupakan terusan dari perpanjangan versi HTML 4.01 yang sebelumnya digunakan oleh kebanyakan orang.
HTML (HyperText Markup Language) dan CSS (Cascading Style Sheets) adalah dua komponen kunci yang membentuk dasar dari hampir semua halaman web yang kamu temui saat menjelajah internet lho. Meskipun keduanya seringkali disebut sebagai "bahasa pemrograman", sebenarnya keduanya adalah "bahasa markup" dan "bahasa style" yang berfungsi bersama-sama untuk membuat tampilan dan struktur halaman web.
Ilustrasi HTML dan CSS
Untuk memahami hubungan antara HTML dan CSS, kita bisa menggunakan analogi pembangunan sebuah rumah. Dalam analogi ini, HTML adalah fondasi dan kerangka rumah, sedangkan CSS adalah dekorasi dan estetika yang mempercantik rumah tersebut.
Pengenalan HTML
HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat dan merancang halaman web. HTML memberikan struktur dasar dari sebuah halaman web dengan menggunakan elemen-elemen seperti paragraf, heading, link, gambar, dan banyak lagi. Dengan kata lain, HTML adalah pondasi dari semua halaman web di internet.
Sebuah dokumen HTML biasanya memiliki struktur dasar sebagai berikut:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Judul Halaman</title> </head> <body> <h1>Selamat Datang di Alhazen Academy</h1> <p>Ayo belajar web dengan menyenangkan.</p> </body> </html>
Penjelasan Elemen-elemen utama HTML:
<!DOCTYPE html>: Deklarasi doctype yang memberi tahu browser bahwa dokumen ini menggunakan HTML5.<html lang="en">: Tag pembuka HTML yang menunjukkan awal dari dokumen HTML. Atribut lang menetapkan bahasa dokumen.<head>: Bagian ini berisi metadata untuk dokumen, seperti<title>,<meta>, dan link ke file CSS.<meta charset="UTF-8">: Mengatur karakter encoding dokumen ke UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Membuat halaman responsif terhadap berbagai ukuran layar.<title>: Judul halaman yang ditampilkan di tab browser.<body>: Berisi konten yang akan ditampilkan di halaman web.
Pengenalan CSS
selektor {
properti: nilai;
}
Contoh Sederhana
p { color: blue; font-size: 16px; }
Penjelasan:
p: Selektor yang menargetkan elemen<p>.color: blue;: Deklarasi yang mengatur warna teks paragraf menjadi biru.font-size: 16px;: Deklarasi yang mengatur ukuran font paragraf menjadi 16 piksel.
Integrasi HTML dan CSS
Pernahkah Sobat Hazen berpikir bagaimana HTML dan CSS bekerja bersama-sama? Nah, mereka seperti pasangan super! HTML memberi kita struktur, sementara CSS memberi kita style. Dengan menautkan CSS ke dalam HTML, kita dapat membuat halaman web yang cantik dan menarik dengan mudah.
Berikut adalah contoh sederhana integrasi HTML dan CSS:
File CSS (styles.css)
Pertama, kita buat file CSS eksternal yang disebut styles.css. File ini akan berisi style yang akan diterapkan pada elemen-elemen HTML.
File HTML (index.html)
Selanjutnya, kita buat file HTML yang akan menggunakan file CSS eksternal tadi untuk mengatur tampilannya.
Cara Kerja
-
Ketika browser memuat file HTML, browser akan membaca link ke file CSS eksternal (styles.css) yang berada di dalam tag
<head>. -
Browser kemudian memuat dan menerapkan aturan-aturan gaya yang ada di file CSS tersebut ke elemen-elemen HTML yang sesuai.
-
Elemen-elemen HTML seperti
<body>,<div class="header">, dan<div class="container">akan ditampilkan sesuai dengan gaya yang telah didefinisikan dalam file CSS. Maka, hasil yang akan kita dapat di browser seperti ini
Praktek dan Tips
Belajar HTML dan CSS membutuhkan latihan dan eksperimen. Selalu terbuka untuk belajar lebih banyak, dan jangan ragu untuk mengambil inspirasi dari situs web yang ada untuk meningkatkan keterampilan.
Penutup
Dengan HTML dan CSS, Sobat Hazen sudah bisa membuat halaman web sederhana. Mulailah eksplorasi dan ciptakan halaman web kamu sendiri! Semoga artikel ini membantu kamu memahami dasar-dasar HTML dan CSS dengan mudah. Selamat berkarya! 🚀
