Orang yang bekerja di desain web industri menyamakan pengembangan situs web front-end dengan bangku berkaki tiga. Ketiga kaki ini—tiga lapisan pengembangan web—terdiri dari struktur, gaya, dan perilaku situs.
Mengapa Anda Harus Memisahkan Lapisan?
Saat Anda membuat halaman web, strukturnya harus diturunkan ke HTML Anda, gaya visual ke CSS, dan perilaku ke skrip. Beberapa manfaat dari memisahkan lapisan adalah:
- Sumber daya bersama: Saat Anda menulis file CSS atau JavaScript eksternal, halaman mana pun di situs dapat menggunakan file tersebut. Jika Anda perlu membuat perubahan pada file itu, mungkin untuk perbarui beberapa gaya tipografi di situs web, setiap halaman yang menggunakan stylesheet itu akan mendapatkan perubahan. Tidak perlu mengedit setiap halaman situs web satu per satu, yang bisa menjadi pekerjaan yang melelahkan untuk situs web besar.
- Unduhan lebih cepat:Setelah skrip atau stylesheet diunduh oleh pelanggan Anda untuk pertama kalinya, skrip atau lembar gaya tersebut di-cache oleh browser web. Karena sumber daya bersama ini sekarang terkandung dalam cache browser, laman lain yang diminta di peramban dimuat lebih cepat, yang meningkatkan kecepatan dan kinerja laman secara keseluruhan.
- Tim multi-orang: Jika Anda memiliki lebih dari satu orang yang bekerja di situs web sekaligus, gunakan sistem kontrol versi yang memungkinkan file diperiksa masuk dan keluar untuk memastikan bahwa setiap orang bekerja dengan versi terbaru. Proses ini jauh lebih sulit dilakukan jika gaya dan perilaku terkait dengan dokumen struktur.
- SEO:Situs yang menunjukkan pemisahan gaya dan struktur yang jelas cenderung berkinerja lebih baik untuk mesin telusur karena mereka dapat merayapi konten tersebut secara lebih efektif dan memahami halaman tanpa terjebak dalam gaya dan perilaku visual informasi.
- Aksesibilitas: Lembar gaya eksternal dan file skrip lebih mudah diakses oleh orang dan browser. Perangkat lunak seperti: pembaca layar dapat memproses konten dari lapisan struktur dengan lebih mudah tanpa berurusan dengan gaya yang tidak dapat mereka gunakan.
- Kompatibilitas terbalik: Situs yang dirancang dengan lapisan pengembangan terpisah lebih cenderung kompatibel ke belakang karena browser dan perangkat yang tidak dapat menggunakan gaya CSS tertentu atau JavaScript yang dinonaktifkan masih dapat melihat HTML. Anda kemudian dapat meningkatkan situs web Anda secara progresif dengan fitur untuk browser yang mendukungnya.
HTML: Lapisan Struktur
Struktur atau lapisan konten halaman web adalah yang mendasarinya HTML kode halaman itu. Sama seperti bingkai rumah yang menciptakan fondasi yang kuat di mana bagian rumah lainnya dibangun, fondasi HTML yang kokoh menciptakan platform di mana sebuah situs web dapat dibuat.
Lapisan struktur adalah tempat Anda menyimpan semua konten yang ingin dibaca atau dilihat pelanggan Anda. Struktur HTML dapat terdiri dari teks dan gambar, dan itu termasuk: hyperlink yang akan digunakan pengunjung untuk bernavigasi di sekitar situs web. Informasi ini dikodekan sesuai standar- HTML5 dan dapat mencakup teks, gambar, dan multimedia (video, audio, dll.).
Setiap aspek konten situs harus diwakili dalam lapisan struktur. Pemisahan ini memungkinkan pelanggan yang menonaktifkan JavaScript atau yang tidak dapat melihat akses CSS ke seluruh situs web, jika tidak semua fungsinya.
CSS: Lapisan Gaya
Lapisan ini menentukan bagaimana dokumen HTML terstruktur akan terlihat oleh pengunjung situs dan ditentukan oleh: CSS (Lembar Gaya Cascading). File-file ini berisi instruksi gaya tentang bagaimana dokumen harus ditampilkan di browser web. Lapisan gaya biasanya mencakup pertanyaan media yang mengubah tampilan situs berdasarkan ukuran layar dan perangkat.
Semua gaya visual untuk situs web harus berada di lembar gaya eksternal. Anda dapat menggunakan beberapa lembar gaya, tetapi setiap file CSS memerlukan permintaan HTTP untuk mengambilnya, mempengaruhi kinerja situs.
JavaScript: Lapisan Perilaku
Lapisan perilaku membuat situs web menjadi interaktif, memungkinkan halaman untuk merespons tindakan pengguna atau berubah berdasarkan serangkaian kondisi. JavaScript adalah bahasa yang paling umum digunakan untuk lapisan perilaku, tetapi CGI dan PHP juga sangat sering digunakan.
Ketika pengembang merujuk ke lapisan perilaku, kebanyakan dari mereka berarti lapisan yang diaktifkan langsung di browser web. Gunakan layer ini untuk berinteraksi langsung dengan Model Objek Dokumen. Menulis HTML yang valid di lapisan konten penting untuk interaksi DOM di lapisan perilaku. Saat Anda membangun di lapisan perilaku, Anda harus menggunakan file skrip eksternal, seperti halnya CSS, untuk mengoptimalkan kecepatan dan kinerja.