Skip to content
Home ยป Sesi 2: Memahami Struktur HTML dan CSS

Sesi 2: Memahami Struktur HTML dan CSS

  • by

Selamat datang di Sesi 2 kelas “Python for Beginners“! Pada sesi ini, kita akan mempelajari tentang struktur dasar HTML (Hypertext Markup Language) dan CSS (Cascading Style Sheets) yang digunakan untuk membangun halaman web. Kami akan menjelaskan elemen-elemen dasar HTML dan bagaimana CSS digunakan untuk mengatur tampilan dan gaya dari elemen-elemen tersebut.

Apa itu HTML?

HTML adalah bahasa markup yang digunakan untuk membangun struktur dan konten halaman web. Dalam HTML, kita menggunakan tag untuk mendefinisikan elemen-elemen pada halaman web. Tag HTML biasanya terdiri dari elemen pembuka <tag> dan elemen penutup </tag>, dan konten di antara keduanya. Contohnya adalah <h1>Ini adalah judul</h1> yang menunjukkan sebuah elemen judul pada halaman web.

Apa itu CSS?

CSS adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari elemen-elemen dalam halaman web. Dengan menggunakan CSS, kita dapat mengubah warna, font, ukuran, posisi, dan banyak aspek lain dari elemen-elemen HTML. CSS biasanya ditulis dalam blok deklarasi yang terdiri dari selector (yang memilih elemen yang akan diatur) dan properti (yang menentukan gaya atau tampilan yang diberikan pada elemen).

Struktur Dasar HTML

Berikut adalah contoh struktur dasar HTML yang dapat Anda gunakan sebagai awal dalam membangun halaman web:

<!DOCTYPE html>
<html>
<head>
    <title>Judul Halaman Web</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Ini adalah Judul Utama</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">Beranda</a></li>
            <li><a href="#">Tentang</a></li>
            <li><a href="#">Kontak</a></li>
        </ul>
    </nav>

    <main>
        <section>
            <h2>Bagian 1</h2>
            <p>Ini adalah paragraf pertama.</p>
        </section>

        <section>
            <h2>Bagian 2</h2>
            <p>Ini adalah paragraf kedua.</p>
        </section>
    </main>

    <footer>
        <p>Hak Cipta &copy; 2023</p>
    </footer>
</body>
</html>

Memahami Struktur HTML

Dalam struktur dasar HTML di atas, terdapat beberapa elemen penting yang perlu Anda ketahui:

  • <html>: Elemen utama yang melingkupi seluruh halaman web.
  • <head>: Elemen yang berisi informasi meta dan tautan ke berkas eksternal seperti CSS.
  • <title>: Elemen yang menentukan judul halaman web yang akan ditampilkan di bilah judul atau tab browser.
  • <link>: Elemen yang menghubungkan halaman HTML dengan berkas CSS eksternal untuk mengatur tampilan halaman web.
  • <body>: Elemen yang berisi konten sebenarnya yang akan ditampilkan di halaman web.
  • <header>, <nav>, <main>, <section>, <footer>: Elemen-elemen ini digunakan untuk membagi halaman web menjadi bagian-bagian yang lebih terstruktur.

Menggunakan CSS untuk Mengatur Tampilan

Dalam halaman web, kita menggunakan CSS untuk mengatur tampilan dan gaya elemen-elemen HTML. Contoh penggunaan CSS dapat dilihat pada struktur dasar HTML di atas dengan menggunakan atribut class atau id pada elemen yang akan diubah gaya atau tampilannya. Misalnya, untuk mengubah warna teks pada elemen dengan class “judul”, Anda dapat menambahkan kode berikut pada berkas CSS Anda:

.judul {
    color: blue;
}

Latihan Praktis

Untuk melatih pemahaman Anda tentang materi yang telah dipelajari, cobalah untuk melakukan latihan praktis berikut:

  1. Buatlah berkas HTML baru dengan menggunakan struktur dasar HTML di atas.
  2. Gunakan CSS untuk mengubah gaya dan tampilan elemen-elemen pada halaman web tersebut, seperti warna teks, ukuran font, dan latar belakang.
  3. Tambahkan beberapa elemen baru ke dalam halaman web, seperti gambar, tabel, atau formulir.

Selamat! Anda telah menyelesaikan Sesi 2: Memahami Struktur HTML dan CSS. Anda telah belajar tentang elemen-elemen dasar HTML, penggunaan CSS untuk mengatur tampilan halaman web, serta melakukan latihan praktis untuk mempraktikkan konsep yang telah dipelajari. Jika ada pertanyaan, jangan ragu untuk mengajukannya. Pastikan Anda memahami dengan baik sebelum melanjutkan ke sesi berikutnya.

Materi berikutnya: Sesi 3: Membuat Halaman Web Statis dengan Python

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!