Fundamental HTML dan CSS untuk Pemula

Panduan komprehensif mengenai dasar-dasar HTML dan CSS untuk pemula, mencakup struktur dokumen, elemen penting, dan cara mengatur tata letak serta gaya desain web secara efektif.

Tutorial Coding

by admin

3 bulan ago 0 521

Fundamental HTML dan CSS untuk Pemula

Daftar Isi

Pengantar HTML
Struktur Dasar HTML
Pengantar CSS
Sintaks Dasar CSS
Menghubungkan CSS ke HTML
Kesimpulan

Pengantar HTML

HTML (HyperText Markup Language) adalah bahasa markup yang digunakan untuk membuat struktur halaman web. HTML menyediakan kerangka dasar untuk konten yang ditampilkan di browser, seperti teks, gambar, dan tautan.

Struktur Dasar HTML

Setiap dokumen HTML terdiri dari elemen-elemen yang diorganisir dalam tag. Berikut adalah struktur dasar dari dokumen HTML:

        <html>
            <head>
                <title>Judul Halaman</title>
            </head>
            <body>
                <h1>Selamat Datang</h1>
                <p>Ini adalah paragraf pertama.</p>
            </body>
        </html>

Tag <html> menandakan awal dan akhir dokumen HTML, <head> berisi informasi meta, dan <body> berisi konten yang ditampilkan.

Pengantar CSS

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mendesain dan mengatur tata letak halaman web. CSS memungkinkan Anda untuk mengubah warna, font, dan spasi elemen HTML.

Sintaks Dasar CSS

Sintaks CSS terdiri dari selector dan declaration block. Berikut adalah contoh sintaks dasar CSS:

        selector {
            property: value;
        }

Contoh:

        body {
            background-color: lightblue;
        }

Menghubungkan CSS ke HTML

Anda dapat menghubungkan CSS ke dokumen HTML dengan tiga cara:

1. Inline CSS

Menambahkan CSS langsung ke elemen HTML menggunakan atribut style.

        <p style="color: red;">Ini adalah paragraf merah.</p>

2. Internal CSS

Menambahkan CSS dalam tag <style> di bagian <head> dokumen HTML.

        <style>
            p {
                color: blue;
            }
        </style>

3. External CSS

Menambahkan CSS dari file terpisah dengan menggunakan tag <link>.

        <link rel="stylesheet" type="text/css" href="style.css">

Kesimpulan

Memahami dasar-dasar HTML dan CSS adalah langkah awal yang penting bagi setiap pemula yang ingin memasuki dunia pengembangan web. Dengan pengetahuan ini, Anda dapat mulai membuat halaman web yang sederhana dan menarik. Teruslah berlatih dan eksplorasi lebih dalam untuk meningkatkan keterampilan Anda dalam pengembangan web.