Postingan

Programming Fundamental 11

Gambar
Menerapkan Gaya Dasar Halaman Web Menggunakan CSS Tujuan Praktikum : Peserta mampu menerapkan perintah eksekusi bahasa pemrograman berbasis teks (CSS) untuk memformat dokumen HTML, mengendalikan tampilan visual (warna, font, layout sederhana). Deskripsi Singkat Aktivitas : Pada praktikum ini, peserta akan membuat file CSS terpisah (external stylesheet) dan menghubungkannya ke dokumen HTML yang telah dibuat pada Modul 2. Peserta akan fokus pada penentuan selector dasar, properti warna, tipografi, dan model kotak (box model) dasar untuk menata tampilan halaman web. Langkah-Langkah Praktikum Setup awal Gunakan file index.html dari praktikum Modul 2. Buat file styles.css di folder yang sama atau di sub-folder css/. Hubungkan file styles.css ke index.html menggunakan tag <link> di dalam <head>. Implementasi CSS Dasar (Warna & Tipografi) Terapkan gaya pada elemen <body> untuk menentukan font family dasar dan background color halaman. Gunakan selector berdasarkan eleme...
Posting Komentar
Baca selengkapnya

Programming Fundamental 10

Gambar
3.6 Responsive Design dengan Media Query Untuk memastikan desain kita tidak hanya indah tetapi juga cerdas, kita perlu memperkenalkan fitur Media Query. Fitur CSS ini memberikan kemampuan unik untuk mengubah gaya tampilan, termasuk layout, ukuran font, warna, dan lainnya berdasarkan karakteristik perangkat yang mengaksesnya, seperti lebar layar (width), orientasi, atau resolusi. Secara sederhana, Media Query adalah kunci kita untuk menciptakan CSS yang adaptif, memastikan laman web kita akan tampil berbeda dan optimal baik saat dilihat melalui ponsel, tablet, maupun layar desktop. Gambaran umum media query 3.6.1 Basic Media Query - Mobile First Approach Pendekatan Mobile First artinya Anda desain untuk layar kecil dulu, baru tambahkan penyesuaian untuk layar lebih besar. Berikut contoh penulisan kodenya: /* Mobile (default) */ .container {     width: 100%;     padding: 1rem; } /* Tablet */ @media (min-width: 768px) {     .container {       ...
Posting Komentar
Baca selengkapnya

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