Struktur HTML dan CSS Website PPDB Sekolah

Yaedu Digital January 22, 2026
Penjelasan Lengkap Struktur HTML dan CSS Website PPDB SMK Yadika Bandar Lampung

PPDB SMK Yadika Bandar Lampung

Penerimaan Peserta Didik Baru

Penjelasan Lengkap Struktur HTML dan CSS pada Website PPDB SMK Yadika Bandar Lampung

Dalam pembuatan Website PPDB SMK Yadika Bandar Lampung, struktur HTML dan CSS memiliki peran yang sangat penting agar website terlihat rapi, mudah dipahami, serta nyaman digunakan oleh pengunjung. Artikel ini akan membahas secara lengkap fungsi setiap bagian kode HTML dan CSS, mulai dari penggunaan header, main, section, hingga pengaturan CSS seperti margin, padding, box-sizing, dan lainnya.

0. Fungsi <meta charset="UTF-8">

Tag <meta charset="UTF-8"> digunakan untuk memberi tahu browser tentang jenis encoding karakter yang dipakai oleh halaman website. Encoding ini menentukan bagaimana browser membaca dan menampilkan setiap huruf, angka, dan simbol di dalam website.

UTF-8 adalah standar encoding internasional yang paling umum digunakan karena mampu menampilkan hampir seluruh karakter di dunia, termasuk:

  • Teks Bahasa Indonesia tanpa error
  • Huruf alfabet (A–Z dan a–z)
  • Angka (0–9)
  • Simbol dan karakter khusus seperti %, &, @, é, dan lainnya

Dengan menggunakan <meta charset="UTF-8">, browser akan menampilkan teks sesuai aslinya tanpa merusak tulisan. Hal ini sangat penting untuk Website PPDB SMK Yadika Bandar Lampung agar seluruh informasi dapat dibaca dengan jelas oleh pengunjung di berbagai perangkat dan browser.

Jika tag ini tidak digunakan atau salah penulisannya, maka teks bisa berubah menjadi simbol aneh, tanda tanya (�), atau karakter tidak terbaca. Contoh kerusakan teks yang sering terjadi:

  • Asli: Pendaftaran Peserta Didik Baru
  • Rusak: Pendaftaran Peserta Didik Baru – 2026
  • Asli: SMK Yadika Bandar Lampung
  • Rusak: SMK Yadika Bandar Lampung �
  • Asli: Biaya pendaftaran Rp 150.000
  • Rusak: Biaya pendaftaran Rp 150.000 €

Kerusakan seperti ini biasanya terjadi karena browser salah membaca encoding karakter. Oleh karena itu, penggunaan <meta charset="UTF-8"> menjadi hal wajib agar tampilan teks tetap normal dan profesional.

1. Fungsi Elemen <header> pada Website

Elemen <header> digunakan sebagai bagian kepala halaman website. Pada Website PPDB SMK Yadika Bandar Lampung, header berfungsi untuk menampilkan:

  • Nama website atau sistem PPDB
  • Judul utama halaman
  • Deskripsi singkat atau slogan sekolah

Header biasanya berada di bagian paling atas halaman dan menjadi identitas utama website.

Mengapa Menggunakan class="header"?

Class header digunakan agar elemen header dapat diatur tampilannya menggunakan CSS secara spesifik dan konsisten.

  • Diberi styling khusus menggunakan CSS
  • Dibedakan dari header lain jika ada
  • Mudah dipanggil dan diatur tampilannya

Tanpa class, styling CSS akan lebih sulit dikontrol dan tidak fleksibel.

2. Fungsi Elemen <main>

Elemen <main> berfungsi sebagai wadah utama konten inti website dan membantu mesin pencari memahami isi utama halaman.

Secara SEO dan standar HTML5, <main> membantu mesin pencari memahami bahwa:

  • Konten di dalamnya adalah isi utama halaman
  • Bukan header, footer, atau sidebar

3. Mengapa Ada class="container" di dalam main?

Class container digunakan untuk membungkus konten agar lebih rapi, terpusat, dan nyaman dibaca, baik di desktop maupun perangkat mobile.

  • Membatasi lebar konten agar tidak terlalu melebar
  • Memberikan jarak (padding) ke seluruh isi
  • Membuat tampilan lebih rapi dan terpusat

4. Mengapa Setelah main Ada section?

Elemen <section> digunakan untuk memecah konten menjadi bagian-bagian logis agar lebih terstruktur dan SEO-friendly.Pada Website PPDB SMK Yadika Bandar Lampung, section bisa digunakan untuk:

  • Informasi tentang PPDB
  • Persyaratan pendaftaran
  • Keunggulan sekolah
  • Jadwal pendaftaran
  • Struktur konten lebih terorganisir
  • Meningkatkan SEO
  • Meningkatkan keterbacaan

5. Fungsi class="content"

Class content berfungsi sebagai kotak konten agar informasi terlihat terpisah dan fokus. Biasanya digunakan untuk:

  • Memberi background
  • Memberi jarak antar konten
  • Membuat tampilan terlihat seperti kartu (card)

Pada Website PPDB SMK Yadika Bandar Lampung, content menampilkan informasi penting agar terlihat lebih fokus dan rapi.

6. Penjelasan Lengkap Bagian CSS

a. Fungsi margin

margin digunakan untuk memberi jarak di luar elemen. Contohnya:

  • Jarak antar section
  • Jarak antar konten

Margin membantu agar elemen tidak saling menempel.

b. Fungsi padding

padding digunakan untuk memberi jarak di dalam elemen, yaitu antara border dan isi teks.

Tanpa padding, teks akan menempel ke tepi kotak dan terlihat tidak nyaman.

c. Fungsi box-sizing: border-box

box-sizing: border-box; membuat ukuran elemen menjadi lebih mudah dikontrol.

Artinya:

  • Width sudah termasuk padding dan border
  • Layout lebih stabil
  • Lebih mudah responsive

d. Fungsi text-align

text-align digunakan untuk mengatur perataan teks, seperti:

  • left (kiri)
  • center (tengah)
  • right (kanan)

Pada header, text-align: center digunakan agar judul PPDB terlihat simetris dan profesional.

e. Perbedaan color dan background-color

  • color → mengatur warna teks
  • background-color → mengatur warna latar belakang elemen

Keduanya bekerja bersama untuk menciptakan kontras dan kenyamanan visual.

7. Pengertian dan Fungsi Universal Selector (*)

Tanda * dalam CSS disebut Universal Selector, yang berarti memilih semua elemen HTML.

Universal selector digunakan untuk:

  • Menyamakan tampilan awal semua elemen
  • Menghilangkan style bawaan browser
  • Membuat desain lebih konsisten

Penggunaan * sangat penting agar Website PPDB SMK Yadika Bandar Lampung memiliki tampilan yang sama di semua browser.

8. Kesimpulan

Dengan memahami struktur HTML, fungsi meta charset, serta konsep CSS termasuk universal selector (*), Website PPDB SMK Yadika Bandar Lampung dapat dibangun secara profesional, rapi, dan SEO-friendly.

Perhatikan Contoh Kode Dibawah Ini:

1. Contoh Struktur Folder Project


ppdb-smk-yadika/
│
├── index.html          (HTML + link stylesheet)
├── style.css           (CSS terpisah)
└── index-inline.html   (HTML + CSS digabung / tanpa stylesheet)

2. FILE index.html (HTML + STYLESHEET TERHUBUNG)


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <!-- 
        META CHARSET UTF-8
        Digunakan untuk memastikan seluruh teks informasi PPDB
        seperti jadwal, persyaratan, dan pengumuman dapat tampil
        dengan benar di semua browser.
    -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPDB SMK Yadika Bandar Lampung</title>

    <!-- SEO Meta -->
    <meta name="description" content="Website resmi PPDB SMK Yadika Bandar Lampung sebagai media informasi dan pendaftaran peserta didik baru secara online.">
    <meta name="keywords" content="PPDB SMK Yadika Bandar Lampung, pendaftaran siswa baru, PPDB online SMK">

    <!-- LINK STYLESHEET -->
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header class="header">
    <h1>PPDB SMK Yadika Bandar Lampung</h1>
    <p>Penerimaan Peserta Didik Baru Tahun Ajaran 2026/2027</p>
</header>

<article>

<h1>Selamat Datang di Website PPDB SMK Yadika Bandar Lampung</h1>

<p>
Website ini digunakan sebagai media resmi untuk memberikan informasi
pendaftaran peserta didik baru SMK Yadika Bandar Lampung secara online,
mudah, cepat, dan transparan.
</p>

<hr>

<h2>Informasi Pendaftaran</h2>

<p>
Calon peserta didik dapat memperoleh informasi lengkap mengenai
jadwal pendaftaran, persyaratan administrasi, serta alur seleksi
melalui website ini.
</p>

<ul>
    <li>Jadwal PPDB</li>
    <li>Persyaratan Pendaftaran</li>
    <li>Program Keahlian</li>
    <li>Pengumuman Hasil Seleksi</li>
</ul>

<h2>Pendaftaran Online</h2>

<p>
Melalui sistem PPDB online SMK Yadika Bandar Lampung, calon siswa dapat
melakukan pendaftaran dari mana saja tanpa harus datang langsung ke sekolah.
</p>

<h2>Mengapa Memilih SMK Yadika Bandar Lampung?</h2>

<p>
SMK Yadika Bandar Lampung berkomitmen mencetak lulusan yang berkompeten,
berkarakter, dan siap bersaing di dunia kerja maupun melanjutkan pendidikan.
</p>

<hr>

<h2>Penutup</h2>

<p>
Dengan adanya website PPDB ini, diharapkan proses pendaftaran peserta
didik baru SMK Yadika Bandar Lampung dapat berjalan lebih efektif,
efisien, dan terintegrasi.
</p>

</article>

</body>
</html>

3. FILE style.css (CSS TERPISAH)


/*
    UNIVERSAL SELECTOR (*)
    Digunakan untuk mengatur style dasar semua elemen
    pada Website PPDB SMK Yadika Bandar Lampung agar
    tampil konsisten di semua browser.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/*
    Pengaturan dasar body website
*/
body {
    background-color: #f2f4f7;
    line-height: 1.6;
}

/*
    Header Website PPDB
    Digunakan untuk menampilkan judul dan identitas sekolah
*/
.header {
    background-color: #0d47a1;
    color: white;
    text-align: center;
    padding: 30px;
}

/*
    Area konten utama (artikel)
    Berisi informasi PPDB seperti jadwal, persyaratan,
    dan pengumuman pendaftaran.
*/
article {
    max-width: 900px;
    margin: 20px auto;
    background-color: #ffffff;
    padding: 25px;
    border-radius: 8px;
}

/*
    Pengaturan jarak judul
*/
h1, h2, h3 {
    margin-bottom: 10px;
}

/*
    Pengaturan paragraf
*/
p {
    margin-bottom: 15px;
}

/*
    Pengaturan list (ul)
*/
ul {
    margin-left: 20px;
    margin-bottom: 15px;
}

/*
    Garis pemisah antar bagian
*/
hr {
    margin: 25px 0;
}

4. FILE index.html (HTML + CSS DIGABUNG / TANPA STYLESHEET)


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">

    <!-- 
        META CHARSET UTF-8
        Digunakan untuk memastikan seluruh teks informasi PPDB
        seperti jadwal, persyaratan, dan pengumuman dapat tampil
        dengan benar di semua browser.
    -->

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPDB SMK Yadika Bandar Lampung</title>

    <!-- SEO Meta -->
    <meta name="description" content="Website resmi PPDB SMK Yadika Bandar Lampung sebagai media informasi dan pendaftaran peserta didik baru secara online.">
    <meta name="keywords" content="PPDB SMK Yadika Bandar Lampung, pendaftaran siswa baru, PPDB online SMK">

    <style>
        /*
            UNIVERSAL SELECTOR (*)
            Digunakan untuk mengatur style dasar semua elemen
            pada Website PPDB SMK Yadika Bandar Lampung agar
            tampil konsisten di semua browser.
        */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        /*
            Pengaturan dasar body website
        */
        body {
            background-color: #f2f4f7;
            line-height: 1.6;
        }

        /*
            Header Website PPDB
        */
        .header {
            background-color: #0d47a1;
            color: white;
            text-align: center;
            padding: 30px;
        }

        /*
            Area konten utama (artikel)
        */
        article {
            max-width: 900px;
            margin: 20px auto;
            background-color: #ffffff;
            padding: 25px;
            border-radius: 8px;
        }

        /*
            Pengaturan jarak judul
        */
        h1, h2, h3 {
            margin-bottom: 10px;
        }

        /*
            Pengaturan paragraf
        */
        p {
            margin-bottom: 15px;
        }

        /*
            Pengaturan list
        */
        ul {
            margin-left: 20px;
            margin-bottom: 15px;
        }

        /*
            Garis pemisah antar bagian
        */
        hr {
            margin: 25px 0;
        }
    </style>
</head>
<body>

<header class="header">
    <h1>PPDB SMK Yadika Bandar Lampung</h1>
    <p>Penerimaan Peserta Didik Baru Tahun Ajaran 2026/2027</p>
</header>

<article>

<h1>Selamat Datang di Website PPDB SMK Yadika Bandar Lampung</h1>

<p>
Website ini digunakan sebagai media resmi untuk memberikan informasi
pendaftaran peserta didik baru SMK Yadika Bandar Lampung secara online,
mudah, cepat, dan transparan.
</p>

<hr>

<h2>Informasi Pendaftaran</h2>

<p>
Calon peserta didik dapat memperoleh informasi lengkap mengenai
jadwal pendaftaran, persyaratan administrasi, serta alur seleksi
melalui website ini.
</p>

<ul>
    <li>Jadwal PPDB</li>
    <li>Persyaratan Pendaftaran</li>
    <li>Program Keahlian</li>
    <li>Pengumuman Hasil Seleksi</li>
</ul>

<h2>Pendaftaran Online</h2>

<p>
Melalui sistem PPDB online SMK Yadika Bandar Lampung, calon siswa dapat
melakukan pendaftaran dari mana saja tanpa harus datang langsung ke sekolah.
</p>

<h2>Mengapa Memilih SMK Yadika Bandar Lampung?</h2>

<p>
SMK Yadika Bandar Lampung berkomitmen mencetak lulusan yang berkompeten,
berkarakter, dan siap bersaing di dunia kerja maupun melanjutkan pendidikan.
</p>

<hr>

<h2>Penutup</h2>

<p>
Dengan adanya website PPDB ini, diharapkan proses pendaftaran peserta
didik baru SMK Yadika Bandar Lampung dapat berjalan lebih efektif,
efisien, dan terintegrasi.
</p>

</article>

</body>
</html>
Tags
Yaedu Digital

Posted by Yaedu Digital

Yaedu Digital merupakan media informasi berbasis Internet yang membahas dan berbagi informasi terupdate mengenai seputar dunia Teknologi, Pendidikan, dan Informasi Lainnya Mencakup (Media Pembelajaran, Materi Ajar, Video Tutorial) serta artikel pembelajaran di dunia Komputer / IT.

Post a Comment

0 Comments