Postingan

Programming Fundamental 9

Gambar
3.4 Layout dengan Flexbox Salah satu inovasi signifikan dalam CSS adalah Flexbox (Flexible Box Layout). Ini adalah modul tata letak modern yang dirancang untuk mengatur posisi elemen secara fleksibel dan responsif, baik dalam orientasi horizontal (row) maupun vertikal (column). Sebelumnya, para developer sering mengandalkan properti float untuk mencapai keselarasan elemen sejajar. Namun, dengan hadirnya Flexbox, proses penataan layout menjadi jauh lebih sederhana, terstruktur, dan efisien. Dengan Flexbox, Anda bisa dengan mudah: Menyusun elemen berbaris (row) atau menumpuk (column), Mengatur jarak antar elemen, Menyusun elemen di tengah layar, Dan bikin tampilan tetap rapi walau ukuran layar berubah. 3.4.1. Cara Kerja Flexbox Setiap layout Flexbox terdiri dari dua bagian utama: Flex Container → elemen pembungkus utama (parent). Contohnya <div class="flex-container">. Flex Items → elemen-elemen di dalamnya (child). Contohnya <div class="item">...</div...
Posting Komentar
Baca selengkapnya

Programming Fundamental 8

Gambar
3.2 Box Model, Margin, Padding dan Border 3.2.1. Box Model Gambar Diagram Visual Box Model Di dalam dunia CSS, setiap komponen yang muncul di halaman web kita diperlakukan sebagai sebuah 'kotak' individual. Konsep fundamental ini dikenal sebagai Box Model, dan ini merupakan landasan esensial yang harus kita pahami untuk menguasai bagaimana tata letak (layout) pada sebuah situs dapat kita atur secara efektif. Setiap elemen punya empat lapisan utama dari luar ke dalam: Margin → ruang di luar elemen, memisahkan elemen satu dengan yang lain. Border → garis pembatas di sekeliling elemen. Padding → ruang di dalam elemen, antara konten dan border. Content → area utama tempat teks atau gambar ditampilkan. Berikut contoh kode dari Box Model: .box {     /* Content */     width: 300px;     height: 200px;     /* Padding - ruang di dalam elemen */     padding: 20px;     padding-top: 10px;     padding-right: 20px;     pad...
Posting Komentar
Baca selengkapnya

Programming Fundamental 7

Gambar
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 headi...
Posting Komentar
Baca selengkapnya

Programming Fundamental 6

Gambar
2.4 Membangun Formulir Interaktif di HTML Tag <form> berfungsi untuk membuat formulir input data pada halaman web. Form ini digunakan untuk mengirimkan data dari pengguna ke server, misalnya pada saat pengisian formulir kontak, login, atau registrasi. 2.4.1. Struktur Form Dasar Struktur form dasar pada HTML terdiri dari: Tag  <form> sebagai wadah utama semua elemen input. Atribut action → Menentukan tujuan ke mana data akan dikirim (contoh: /submit). Atribut method → Menentukan cara pengiriman data: get → Data dikirim melalui URL (umumnya untuk fungsi pencarian). post → Data dikirim melalui body (body) (lebih aman untuk data sensitif). Berikut contoh penulisan codenya: <form action="/submit" method="post">    <div>     <label for="nama">Nama:</label>     <input type="text" id="nama" name="nama" required />   </div>   <div>     <label for="email">Email:</l...
Posting Komentar
Baca selengkapnya