Programming Fundamental 7

Membangun Struktur Dasar Halaman Web Menggunakan HTML5

Tujuan Praktikum : Peserta mampu menerapkan perintah eksekusi bahasa pemrograman berbasis teks (HTML) untuk membuat struktur dasar halaman web yang sesuai dengan standar HTML5, termasuk penggunaan elemen semantik dan penanganan form sederhana.

Deskripsi Singkat Aktivitas : Pada praktikum ini, peserta akan membangun kerangka dasar sebuah halaman web statis menggunakan HTML5. Peserta akan fokus pada penyiapan struktur dokumen, penggunaan tag wajib, elemen header, navigation, main content, footer, dan form input sederhana.

Langkah-Langkah Praktikum

Setup HTML Struktur

Buat file index.html dan masukkan struktur dasar HTML5 (doctype, <html>, <head>, <body>).
Tambahkan elemen <title> yang relevan di dalam <head>.
Di dalam <body>, buat struktur menggunakan elemen semantik: <header>, <nav>, <main>, dan <footer>.

Implementasi Elemen Semantik

Di dalam <header>, tambahkan heading utama menggunakan <h1> dan deskripsi singkat menggunakan <p>.

Di dalam <nav>, buatlah unordered list (<ul>) dengan beberapa list item (<li>) yang berisi anchor tag (<a>) sebagai simulasi menu navigasi (misalnya: Home, About, Services, Contact).

Membuat Konten Utama dan Form Sederhana

Di dalam <main>, buatlah satu atau dua bagian konten menggunakan elemen <section> atau <article>, masing-masing dengan heading yang sesuai (<h2>).
Di dalam salah satu bagian konten, tambahkan elemen form (<form>) sederhana.
Form tersebut harus memiliki setidaknya dua input teks (<input type="text">), satu input email (<input type="email">), dan satu tombol submit (<button type="submit"> atau <input type="submit">).

Gunakan tag <label> untuk mengaitkan label dengan setiap input form.

Membuat Footer

Di dalam <footer>, tambahkan informasi hak cipta menggunakan tag kecil (<small>) atau paragraph (<p>).

Test Aplikasi

Buka file index.html di browser modern dan pastikan semua elemen (heading, navigasi, konten, form) ditampilkan sesuai strukturnya.

Periksa struktur kode menggunakan Developer Tools (Inspect Element) untuk memastikan penggunaan tag HTML5 yang tepat dan semantik.

Tools & Resource yang Dibutuhkan:

Browser modern (Chrome, Firefox, Edge, Safari)
Code editor (VS Code, Sublime Text, atau sejenisnya)
GitHub (Opsional, untuk version control)
Referensi tambahan: Modul 2 – HTML Fundamentals, bagian Structure, Semantic Elements, dan Forms.

Contoh Output atau Hasil Akhir:

Hasil akhir yang diharapkan:

Struktur dokumen HTML5 yang valid dan lengkap.
Penggunaan elemen semantik (<header>, <nav>, <main>, <footer>, <section>, <article>) yang tepat.
Form input sederhana yang terstruktur dengan label yang terhubung.
Kode yang bersih dan terorganisir (well-organized).

Kriteria Keberhasilan / Penilaian Mandiri:

Dokumen HTML memiliki struktur dasar HTML5 yang benar, termasuk <!DOCTYPE html>, <html>, <head>, dan <body>.
Semua tag wajib digunakan secara benar dan konsisten.
Elemen semantik digunakan untuk menandai bagian-bagian utama halaman (header, nav, main, footer).
Form HTML sederhana dibuat dengan input teks, email, dan tombol submit yang dilengkapi dengan label yang benar.

Petunjuk Troubleshooting:

Pastikan semua tag pembuka memiliki tag penutup yang sesuai (kecuali self-closing tag).
Gunakan Developer Tools di browser untuk memeriksa struktur DOM dan memastikan tidak ada tag yang salah tempat.
Periksa penulisan attribute dan value (misal: type="email" harus benar).

Durasi Praktik Disarankan:

30–45 menit.

Materi belajar dari repository github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Complete-Curriculum
Materi belajar dari repository github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Final-Project-Starter
Materi belajar dari repository github: https://github.com/Modul-FSD/Komdigi-FSD-Beginner-Final-Project-Finished

Modul 3 CSS Fundamentals

Bayangkan Anda baru saja membangun rumah impian Anda. Pondasinya sudah kuat, dinding, atap, dan ruangannya sudah berdiri kokoh (itulah HTML). Tapi ketika Anda melihat ke dalam, semuanya masih polos dan hambar. Tidak ada warna, tidak ada gaya, tidak ada keindahan yang membuat rumah itu terasa "hidup". Di sinilah CSS (Cascading Style Sheets) berperan, ia adalah "interior designer" dari dunia web. CSS membantu Anda menambahkan warna pada dinding digital, mengatur posisi furnitur visual, dan memberikan karakter pada setiap halaman web yang Anda buat. Dengan CSS, sebuah halaman sederhana bisa berubah menjadi karya yang menarik mata, nyaman dibaca, dan terasa profesional. Dalam modul ini, Anda akan mempelajari bagaimana CSS mengubah struktur menjadi pengalaman visual. Anda akan memahami bagaimana warna, tipografi, jarak, dan tata letak dapat menciptakan kesan yang berbeda bagi pengguna. Bukan hanya soal estetika, CSS juga mengajarkan Anda berpikir logis dalam mengatur gaya yang konsisten dan efisien di seluruh situs.

Sebelum kita melangkah lebih jauh lagi, mari kita berhenti sejenak untuk merefleksikan pengalaman kita dari sisi pengguna:

Pernahkah Anda membuka website yang tampilannya berantakan di ponsel tapi bagus di laptop? Mengapa hal itu bisa terjadi?
"Karena CSS mengatur tampilan yang adaptif. Jika tidak diatur dengan baik, layout tidak menyesuaikan ukuran layar."
Menurut Anda, apa yang lebih penting dalam web design: tampilan yang indah atau fungsionalitas yang baik? Mengapa?
"Keduanya penting. Desain mendukung fungsi, dan fungsi perlu tampil dengan baik. CSS membantu menjembatani keduanya."

Digiers, sebelum memulai pembelajaran kali ini, mari kita pahami bersama capaian yang akan kita raih. Berikut adalah tujuan pembelajaran yang akan menjadi pedoman kita setelah menyelesaikan modul ini, kita diharapkan untuk:

Mampu memahami selector, class, dan id dalam CSS
Mampu memahami box model (margin, padding, border)
Mampu menentukan typography, warna, dan background
Mampu menggunakan Flexbox dan Grid untuk layout
Mampu membuat responsive design dengan media query
Mampu merancang desain halaman profil yang menarik dan responsif

3.1 CSS Selector, Class, dan ID

Digiers, jika HTML adalah kerangka baja dan beton dari gedung digital kita, lalu apa yang membuatnya menjadi kantor yang indah, toko yang menarik, atau rumah yang nyaman? Inilah saatnya kita memperkenalkan "Desainer Interior" di dunia web: CSS. Mari kita pelajari bagaimana mengubah struktur polos itu menjadi mahakarya visual!

CSS sendiri adalah seperangkat instruksi yang digunakan khusus untuk mengatur tampilan visual dari setiap elemen HTML. Tugasnya adalah menyulap struktur yang tadinya "polos dan berantakan" menjadi laman yang menarik, tertata rapi, dan nyaman untuk dilihat (user-friendly).

Dengan CSS, kita memiliki kendali penuh, bak seorang seniman yang memegang kuas. Kita bisa menentukan warna teks, latar belakang, dan batas; kita bisa mengatur ukuran huruf atau gambar; kita bisa mengatur jarak (seperti margin dan padding) antar-elemen agar tidak saling bertumpukan; dan yang paling penting, kita bisa mengendalikan tata letak keseluruhan halaman (layout), menentukan di mana header harus diletakkan, di mana kolom navigasi berada, dan bagaimana konten utama mengalir. Singkatnya, jika HTML memberikan makna dan struktur, maka CSS memberikan gaya, estetika, dan pengalaman pengguna yang memikat. Ini adalah keterampilan wajib bagi setiap Developer yang ingin menghasilkan produk digital berkualitas tinggi.

3.1.1 Perbandingan Penggunaan CSS dan tanpa CSS

Berikut ini perbandingan antara halaman polos dan versi berwarna:

Gambar 1. Tampilan HTML sebelum menggunakan CSS

Gambar 2. Tampilan HTML setelah menggunakan CSS

Jika ingin mencoba sendiri halaman tanpa CSS silakan mengakses link repo pure HTML (HTML tanpa CSS) pada link berikut ini: https://github.com/BINAR-Learning/Komdigi-FSD-Beginner-Complete-Curriculum/blob/main/Modul%203%20-%20CSS%20Fundamentals/Pure%20HTML%20vs%20HTML%20with%20CSS%20Comparison/1.%20Pure%20HTML%20(Messy)/index.html

Jika ingin mencoba sendiri halaman dengan CSS silakan mengakses link repo HTML Dengan CSS pada link berikut ini : https://github.com/BINAR-Learning/Komdigi-FSD-Beginner-Complete-Curriculum/blob/main/Modul%203%20-%20CSS%20Fundamentals/Pure%20HTML%20vs%20HTML%20with%20CSS%20Comparison/2.%20HTML%20%2B%20CSS%20(Clean)/index.html

Link Repository Code Pure HTML vs HTML + CSS untuk membaca dokumentasi lebih detail nya terdapat pada link berikut ini: https://github.com/BINAR-Learning/Komdigi-FSD-Beginner-Complete-Curriculum/tree/main/Modul%203%20-%20CSS%20Fundamentals/Pure%20HTML%20vs%20HTML%20with%20CSS%20Comparison

3.1.2 Cara Kerja CSS

1. Secara umum, CSS dapat diimplementasikan ke dalam dokumen HTML melalui tiga metode utama:

CSS Inline: Dengan menggunakan atribut style langsung di dalam elemen HTML.
CSS inline digunakan untuk menerapkan gaya unik pada elemen HTML tunggal.
CSS inline menggunakan atribut style dari elemen HTML.
Berikut contoh penulisan kode CSS inline:

<h1 style="color:blue;"> Hai Peserta Komdigi</h1>

<h3 style="color:yellow;"> Yang ini Kuning nih.</h3>

2. CSS Internal: Dengan menempatkan aturan gaya di dalam elemen <style> pada bagian <head> dokumen.

CSS internal digunakan untuk mendefinisikan gaya untuk satu halaman HTML.
CSS internal didefinisikan di bagian <head> halaman HTML, di dalam elemen <style>. Berikut contoh penulisan kode CSS internal:

<style>

body {background-color: white;}

h1 {color: blue;}

h3 {color: yellow;}

</style>

3. CSS External: Dengan menggunakan elemen <link> untuk menautkan dokumen HTML ke sebuah file CSS eksternal yang terpisah.

Gaya eksternal digunakan untuk mendefinisikan gaya untuk banyak halaman HTML.
Untuk menggunakan gaya eksternal, tambahkan tautan ke gaya tersebut di bagian <head> setiap halaman HTML.
Berikut contoh penulisan kode CSS external:

h1 {

color: blue;

}

h3 {

color: yellow;

}

Pada contoh ini, kita menargetkan elemen <h1> sebagai tempat (where), lalu mengubah warna teks (what) jadi biru (how), <h2> tidak diberi color apapun dan untuk <h3> sebagai tempat (where), kemudian mengubah warna teks (what) jadi kuning (how). Elemen HTML yang jadi target perubahan ini disebut selector. Jadi, setiap kali Anda ingin mengubah tampilan sesuatu melalui CSS, Anda cukup memilih selectornya, kemudian tentukan gaya (style) yang diinginkan. Namun secara umum, penulisan kode CSS seringkali ditempatkan pada berkas terpisah dari dokumen HTML kita untuk menjaga keteraturan, meskipun opsi untuk menuliskannya langsung di dalam HTML juga tersedia. Konsep dasarnya sebenarnya cukup intuitif: Anda hanya perlu menentukan tiga hal utama, yaitu target elemen mana yang ingin dimodifikasi, properti apa yang hendak diubah (misalnya warna atau ukuran), dan nilai spesifik yang Anda inginkan untuk pengaturan tampilan tersebut.

3.1.3 Apa itu Selector di CSS?

CSS selector dipakai untuk menentukan elemen HTML mana yang ingin Anda ubah tampilannya. Ibaratnya, selector ini seperti alamat rumah dia nunjukin ke browser: "Hei, tolong ubah tampilan bagian ini, dengan gaya seperti ini." Setelah Anda tahu elemen mana yang mau diubah, Anda tinggal tulis property dan value-nya untuk menentukan tampilannya.

3.1.4 Basic Selectors (Selector Dasar)

Terdapat beberapa selektor dasar dalam CSS, diantaranya:

1. Element Selector

Menargetkan elemen HTML secara langsung berdasarkan nama tag-nya. Misalnya, semua <h1> di halaman akan berubah sesuai gaya yang Anda tentukan. Berikut contoh penulisan kode CSSnya:

h1 {

color: blue;

font-size: 2rem;

}

Penjelasan:

Selector h1 menargetkan semua elemen <h1> di halaman.
Semua heading <h1> sekarang berwarna biru dan berukuran dua kali font standar (2rem).

2. Class Selector

Kalau Anda ingin menargetkan beberapa elemen sekaligus, maka gunakan class selector. Di CSS ditulis dengan tanda titik (.), dan di HTML ditandai dengan atribut class="namaClass". Berikut contoh penulisan kode CSSnya:

.intro {

background-color: #f0f0f0;

padding: 20px;

}

Penulisan kode HTMLnya:

<p class="intro"> Selamat datang di website kami! </p>

Penjelasan:

Semua elemen yang punya class intro akan dapat style yang sama.
Bisa digunakan di banyak elemen sekaligus, misal di beberapa paragraf atau div.

3. ID Selector

Kalau Anda mau menargetkan satu elemen spesifik saja, pakai ID selector. ID bersifat unik, hanya boleh dipakai satu kali pada satu halaman. Berikut contoh penulisan kode CSSnya:

#header {

background-color: #333;

color: white;

}

Penulisan kode HTMLnya:

<header id="header"> Judul Website </header>

Penjelasan:

Tanda pagar # digunakan untuk menandai ID.
Biasanya dipakai untuk elemen penting seperti header, footer, atau main content.
Satu ID hanya boleh digunakan untuk satu elemen agar tidak bentrok.

4. Universal Selector

Digunakan untuk menargetkan semua elemen di halaman sekaligus. Biasanya dipakai di awal untuk mereset margin dan padding default browser. Contoh:

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

Penjelasan:

* artinya "semua elemen HTML".
margin dan padding di reset ke nol supaya tampilan konsisten di semua browser.
box-sizing: border-box; membantu menghitung lebar elemen termasuk padding dan border (biar layout lebih stabil).

3.1.5 Advanced Selectors (Selector Lanjutan)

Kalau tadi selector-nya dasar, sekarang kita masuk ke selector yang lebih spesifik. Biasanya dipakai saat struktur HTML mulai kompleks dan Anda mau menargetkan elemen tertentu di dalam elemen lain.

1. Descendant Selector

Menargetkan elemen yang ada di dalam elemen lain, terlepas dari seberapa dalam posisinya. Berikut contoh penulisan kode CSSnya:

.container p {

color: #666;

}

Penulisan kode HTMLnya:

<p>Paragraf ini di dalam container, warnanya abu-abu.</p>

</div>

Penjelasan:

Selector .container p berarti: ubah semua <p> yang berada di dalam elemen dengan class container.
Ini sering dipakai di layout yang punya banyak nested element.

2. Child Selector

Menargetkan child langsung dari sebuah elemen. Contoh:

.nav > li {

display: inline-block;

}

Penulisan kode HTMLnya:

<li>About</li>

</ul>

Penjelasan:

Tanda > berarti child langsung.
Artinya, hanya <li> yang langsung di dalam .nav yang kena style ini.
Kalau <li> itu berada di dalam <ul> lain di bawah .nav, dia tidak akan terpengaruh.

3. Adjacent Sibling Selector

Menargetkan elemen yang berada tepat setelah elemen lain. Contoh:

h2 + p {

margin-top: 0;

}

Penulisan kode HTMLnya:

<h2>Judul</h2>

<p>Paragraf pertama langsung setelah h2</p>

Penjelasan:

h2 + p artinya: pilih <p> yang langsung muncul setelah <h2>.
Biasanya digunakan untuk mengatur jarak atau style antar elemen yang berdekatan.

4. Attribute Selector

Menargetkan elemen berdasarkan atribut tertentu dalam HTML-nya. Contoh:

input[type="email"] {

border: 2px solid #007bff;

}

Penulisan kode HTMLnya:

Penjelasan:

Selector ini mencari semua <input> yang punya atribut type="email".
Berguna untuk memberi style berbeda tergantung jenis input (email, text, password, dll).

5. Pseudo-class Selector

Selector ini menargetkan kondisi atau keadaan tertentu dari elemen, seperti saat di-hover, diklik, atau dalam fokus. Berikut contoh penulisan kode CSSnya:

button:hover {

color: red;

}

button:active {

transform: scale(0.95);

}

Penjelasan:

:hover → style muncul ketika kursor diarahkan ke link atau elemen.
:active → style muncul sesaat setelah tombol ditekan.
Ini membuat interaksi di website terasa lebih hidup dan responsif.

Cari Blog Ini

SMK Asiyah Homeschooling