Belajar Bahasa HTML dan CSS

HTML (struktur) dan CSS (gaya) adalah duo utama pembuatan web.

Selamat datang di dunia pengembangan web! Jika Anda tertarik untuk membuat halaman web yang interaktif dan menarik secara visual, maka belajar bahasa HTML dan CSS adalah langkah pertama yang paling fundamental. Kedua teknologi ini adalah tulang punggung (backbone) dari hampir setiap situs web yang Anda kunjungi hari ini. Memahami keduanya secara mendalam akan membuka pintu bagi Anda untuk menguasai JavaScript dan kerangka kerja (framework) modern lainnya.

Apa Itu HTML? Kerangka Dasar Web

HTML, singkatan dari HyperText Markup Language, adalah bahasa standar yang digunakan untuk membuat struktur dan konten dari sebuah halaman web. HTML tidak bertanggung jawab atas tampilan atau desain; tugasnya hanyalah memberi tahu browser apa itu teks, gambar, tautan, atau paragraf.

Bayangkan membangun rumah. HTML adalah kerangka baja, dinding, dan fondasi. Tanpa struktur ini, tidak ada yang bisa berdiri.

Tag Fundamental HTML

Semua konten dalam HTML dibungkus dalam apa yang disebut "tag". Tag biasanya muncul berpasangan: tag pembuka (<tag>) dan tag penutup (</tag>).

Berikut adalah contoh struktur dasar dari setiap halaman HTML:


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Judul Halaman Saya</title>
</head>
<body>
    <h1>Selamat Datang!</h1>
    <p>Ini adalah paragraf pertama.</p>
</body>
</html>

Elemen penting lainnya yang harus Anda kuasai meliputi tag untuk membuat daftar (<ul>, <ol>, <li>), membuat tautan (<a href="...">), dan menyisipkan gambar (<img src="...">).

CSS: Memberi Gaya pada Struktur Anda

Setelah Anda memiliki kerangka (HTML), langkah selanjutnya adalah membuatnya terlihat menarik. Di sinilah Cascading Style Sheets (CSS) berperan. CSS adalah bahasa yang digunakan untuk mendeskripsikan tampilan dan format dokumen yang ditulis dalam bahasa markup seperti HTML.

Jika HTML adalah kerangka rumah, maka CSS adalah cat dinding, jenis lantai, penataan furnitur, dan desain interiornya.

Cara Menghubungkan CSS ke HTML

Ada tiga cara untuk menerapkan CSS, tetapi cara terbaik untuk proyek modern dan terstruktur adalah menggunakan file eksternal. Ini dilakukan dengan menautkan file CSS Anda di bagian <head> dokumen HTML:

<link rel="stylesheet" href="styles.css">

Setelah terhubung, Anda dapat menargetkan elemen HTML dan menerapkan properti. Misalnya, untuk membuat semua judul utama (h1) berwarna biru tua:


h1 {
    color: #003366; /* Kode warna biru tua */
    font-size: 2.5em;
    text-align: center;
}

Mengapa Mobile Web Penting?

Saat ini, sebagian besar lalu lintas internet berasal dari perangkat seluler. Ini berarti jika situs web Anda tidak terlihat bagus di ponsel, Anda kehilangan sebagian besar audiens potensial. Inilah mengapa responsivitas menjadi fokus utama dalam belajar bahasa HTML dan CSS.

CSS menyediakan alat yang sangat kuat untuk mencapai desain responsif, yang paling utama adalah **Media Queries**. Media Query memungkinkan Anda untuk menerapkan gaya CSS yang berbeda tergantung pada karakteristik perangkat pengguna, seperti lebar layar.

Misalnya, Anda mungkin ingin margin artikel lebih lebar di desktop tetapi lebih sempit di perangkat seluler:


/* Gaya Default (berlaku untuk semua, atau desktop) */
article {
    padding: 40px;
}

/* Media Query untuk layar yang lebih kecil dari 600px (Mobile) */
@media (max-width: 600px) {
    article {
        padding: 15px; /* Mengurangi padding agar lebih muat di layar kecil */
    }
}

Latihan Membuat Tata Letak Sederhana

Setelah memahami dasar-dasar tag HTML dan properti CSS, tantangan berikutnya adalah menyusun semuanya. Pelajari tentang properti tata letak utama di CSS, seperti display: block;, display: inline-block;, dan yang paling revolusioner saat ini, Flexbox dan Grid.

Flexbox sangat ideal untuk menyejajarkan item dalam satu dimensi (baris atau kolom), sementara CSS Grid digunakan untuk tata letak dua dimensi (baris dan kolom secara bersamaan). Menguasai kedua alat ini akan memungkinkan Anda membangun tata letak yang kompleks tanpa perlu bergantung pada trik lama.

Teruslah berlatih. Tidak ada jalan pintas dalam pengembangan web selain menulis kode, memecahkannya, dan memperbaikinya. Semangat dalam perjalanan Anda belajar bahasa HTML dan CSS!