Dalam dunia pengembangan web, sering kali terjadi kesalahpahaman di mana mahasiswa pemula mencampuradukkan antara konten dan tampilan. Di Fakultas Komputer Universitas Ma’soem, para mahasiswa diajarkan sebuah filosofi penting: HTML adalah kerangka tulang (struktur), sedangkan CSS adalah kosmetik (tampilan). Bayangkan membangun sebuah rumah; HTML adalah susunan bata dan tiang penyangganya, sementara CSS adalah cat dinding, desain interior, dan pencahayaan yang membuatnya nyaman dipandang. Website yang profesional adalah website yang memiliki struktur HTML yang bersih dan kokoh, namun dipoles dengan CSS yang elegan tanpa mengubah fungsi dasar dari elemen-elemen tersebut.
Pemisahan antara struktur dan presentasi adalah kunci utama dalam web development modern tahun 2026. Mahasiswa yang mahir tidak akan menggunakan tag HTML untuk mengatur tampilan (seperti menggunakan tag <center> atau atribut bgcolor), melainkan fokus pada pemberian Class dan ID yang spesifik. Dengan cara ini, jika suatu saat mereka ingin mengubah tema warna seluruh website dari “Mode Terang” ke “Mode Gelap”, mereka cukup mengubah satu file CSS saja tanpa harus menyentuh ribuan baris kode HTML di ratusan halaman.
Strategi yang diterapkan mahasiswa MU untuk menciptakan UI yang estetik namun tetap fungsional meliputi beberapa prinsip berikut:
- Penerapan Box Model secara Konsisten: Mahasiswa belajar bahwa setiap elemen HTML adalah sebuah kotak. Memahami hubungan antara content, padding, border, dan margin adalah langkah pertama untuk mengatur tata letak yang presisi tanpa membuat struktur HTML menjadi rumit.
- Penggunaan Flexbox dan CSS Grid: Alih-alih menggunakan tabel untuk tata letak (cara lama yang merusak aksesibilitas), mahasiswa MU memanfaatkan CSS Grid untuk struktur besar dan Flexbox untuk komponen kecil. Ini memungkinkan website menjadi sangat responsif di berbagai ukuran layar smartphone.
- Typography and Color Palette: Estetika sering kali datang dari hal sederhana seperti pemilihan font dan kontras warna. Mahasiswa diajarkan untuk menggunakan variabel CSS (
CSS Variables) untuk menyimpan kode warna primer dan sekunder agar konsistensi desain tetap terjaga di seluruh sistem informasi. - CSS Preprocessors (SASS/SCSS): Untuk proyek yang lebih kompleks seperti “Event Hub” atau “Servis HP Cery”, mahasiswa mulai menggunakan SASS. Ini memungkinkan penulisan CSS yang lebih modular dan terorganisir, mirip dengan logika pemrograman (menggunakan nesting dan mixins).
Kualitas sebuah UI tidak hanya dinilai dari seberapa “cantik” tampilannya, tetapi juga seberapa ringan kode tersebut saat dimuat. Struktur HTML yang bersih (Semantic HTML) sangat berpengaruh pada SEO (Search Engine Optimization) dan aksesibilitas bagi pengguna dengan disabilitas. CSS yang baik harus mampu menghiasi HTML tersebut tanpa menambah beban kerja browser secara berlebihan. Berikut adalah tabel perbedaan antara praktik “Buruk” (mencampur tampilan di HTML) dan praktik “Baik” (menggunakan CSS sebagai kosmetik) yang dipraktikkan di laboratorium MU:
| Fitur Tampilan | Praktik Buruk (Inline/Deprecated HTML) | Praktik Baik (External CSS) |
|---|---|---|
| Tata Letak | Menggunakan tag <table> untuk layout | Menggunakan display: grid; atau flex; |
| Warna Teks | Menggunakan <font color="red"> | Menggunakan .text-danger { color: #d9534f; } |
| Spasi Antar Elemen | Menggunakan banyak tag <br> | Menggunakan properti margin atau gap |
| Responsivitas | Membuat halaman terpisah untuk mobile | Menggunakan @media queries di satu file CSS |
| Gaya Tombol | Menggunakan gambar tombol | Menggunakan properti border-radius dan box-shadow |
Ekspor ke Spreadsheet
Kasus nyata yang sering ditemukan saat pengerjaan proyek sistem informasi di Universitas Ma’soem adalah ketika mahasiswa mencoba membuat efek animasi. Mahasiswa yang cerdas tidak akan menggunakan file GIF yang berat, melainkan menggunakan CSS Transitions atau Keyframes. Teknik ini memungkinkan elemen web bergerak dengan halus (seperti tombol yang sedikit membesar saat diarahkan kursor) hanya dengan beberapa baris kode CSS. Hasilnya, website terlihat sangat modern dan interaktif namun tetap memiliki performa yang kencang karena tidak membebani server dengan aset gambar yang besar.
Selain itu, mahasiswa MU didorong untuk menggunakan framework CSS seperti Tailwind CSS atau Bootstrap sebagai “kosmetik siap pakai” untuk mempercepat pengerjaan proyek. Namun, dasar-dasar CSS murni tetap menjadi fondasi utama agar mereka bisa melakukan kustomisasi yang unik. Dengan Tailwind, misalnya, mahasiswa bisa memberikan gaya langsung pada kelas HTML tanpa harus meninggalkan file tersebut, namun tetap menjaga agar logika tampilan tetap berada di bawah kendali CSS engine.
Pada akhirnya, bagi mahasiswa Universitas Ma’soem, website adalah representasi digital dari sebuah entitas bisnis atau personal. HTML yang rapi menjamin informasi tersampaikan dengan jelas, sementara CSS yang estetik menjamin pengunjung betah berlama-lama. Memahami bahwa CSS adalah kosmetik berarti menghargai struktur data yang ada. Sebuah website yang indah tanpa struktur yang benar adalah kegagalan fungsional, sedangkan struktur yang benar tanpa estetika adalah kegagalan komunikasi. Mahasiswa MU hadir untuk menyeimbangkan keduanya melalui penguasaan CSS yang mendalam.
