Kenapa semua laman web dibina dengan gabungan struktur, gaya, dan tingkah laku
Satu analogi biasa yang digunakan untuk menggambarkan perkembangan laman web front-end adalah bahawa ia seperti bangku 3 kaki. 3 kaki ini, yang juga dikenali sebagai 3 lapisan pembangunan web, adalah Struktur, Gaya, dan Perilaku.
Tiga Lapisan Pembangunan Web
- Lapisan struktur atau kandungan
- Lapisan struktur atau kandungan halaman web adalah kod HTML yang mendasari laman tersebut. Seperti bingkai rumah yang mencipta asas yang kuat di mana seluruh rumah dibina, begitu juga asas yang kukuh dari HTML mencipta platform di mana sebuah laman web boleh dibuat. Struktur HTML boleh terdiri daripada teks atau imej dan ia termasuk hiperpautan yang pengunjung akan menggunakan untuk menavigasi di sekitar laman web itu.
- Lapisan gaya atau penyampaian
- Lapisan gaya atau penyampaian menentukan bagaimana dokumen HTML berstruktur akan dilihat pada pelawat tapak. Lapisan ini ditakrifkan oleh CSS (Cascading Style Sheets). Fail ini mengandungi gaya yang menunjukkan bagaimana dokumen itu harus dipaparkan dalam pelayar web. Pada web hari ini, lapisan gaya juga boleh memasukkan Pertanyaan Media yang boleh mengubah paparan tapak berdasarkan saiz skrin dan peranti yang berbeza .
- Kelakuan
- Lapisan tingkah laku adalah lapisan halaman Web yang boleh bertindak balas terhadap tindakan pengguna yang berbeza atau membuat perubahan pada halaman berdasarkan satu set syarat. Untuk kebanyakan laman web, tahap tingkah laku akan menjadi interaksi JavaScript pada halaman.
Mengapa Anda Perlu Mengasingkan Lapisan?
Apabila anda membuat halaman web, adalah wajar untuk menyimpan lapisan-lapisan itu secara berasingan. Struktur hendaklah disahkan kepada HTML anda, gaya visual ke CSS, dan tingkah laku kepada skrip yang digunakan oleh laman web.
Beberapa manfaat memisahkan lapisan ialah:
- Sumber yang dikongsi
- Apabila anda menulis fail CSS luaran atau fail JavaScript, anda boleh menggunakan fail itu oleh mana-mana halaman di laman web anda. Jika anda perlu membuat perubahan kepada fail itu, mungkin untuk mengemas kini beberapa gaya percetakan di laman web, setiap halaman yang menggunakan lembaran gaya itu akan mendapat perubahan. Tidak perlu mengedit setiap halaman laman web secara individu, yang untuk tapak yang lebih besar boleh menjadi usaha yang melelahkan.
- Muat turun lebih pantas
- Sebaik sahaja skrip atau lembaran gaya telah dimuat turun oleh pelanggan anda buat kali pertama, ia di-cache oleh penyemak imbas web mereka. Kerana sumber-sumber yang dikongsi ini kini terkandung dalam cache, halaman lain yang diminta dalam beban penyemak imbas dengan lebih cepat, yang meningkatkan keseluruhan kelajuan dan kinerja halaman.
- Pasukan berbilang orang
- Sekiranya anda mempunyai lebih daripada satu orang yang bekerja di laman web sekaligus, anda boleh menggunakan sistem yang untuk "daftar masuk" dan "menyemak" fail untuk memastikan semua orang dalam pasukan bekerja dengan versi terkini fail ini. Ini lebih sukar dilakukan jika gaya dan tingkah laku dikaitkan dengan dokumen struktur.
- SEO
- Satu laman web yang mempunyai pemisahan gaya dan struktur yang jelas mungkin lebih baik untuk enjin carian kerana tapak tersebut lebih berkesan dapat merangkak kandungan tersebut dan memahami halaman tanpa mendapat kesilapan dengan gaya visual atau maklumat tingkah laku.
- Kebolehcapaian
- Lembaran gaya luaran dan fail skrip lebih mudah diakses oleh orang dan penyemak imbas. Oleh kerana terdapat pemisahan gaya dan struktur, perisian seperti pembaca skrin dapat memproses kandungan lebih mudah dari lapisan struktur tanpa mendapat kesulitan dengan gaya yang tidak dapat digunakan.
- Keserasian ke belakang
- Apabila anda mempunyai laman web yang direka dengan lapisan pembangunan, ia akan menjadi lebih serasi lagi kerana penyemak imbas atau peranti yang tidak dapat menggunakan gaya CSS tertentu atau yang mungkin telah dilumpuhkan JavaScript masih boleh melihat HTML. Tapak web anda kemudiannya boleh ditingkatkan secara progresif dengan ciri-ciri untuk pelayar yang menyokongnya.
HTML - Lapisan Struktur
Lapisan struktur adalah tempat anda menyimpan semua kandungan yang ingin dibaca atau dilihat oleh pelanggan anda. Ini akan dikodkan dalam standard HTML5 yang mematuhi dan dapat memasukkan teks dan imej serta multimedia (video, audio, dll.). Adalah penting untuk memastikan setiap aspek kandungan tapak anda diwakili dalam lapisan struktur. Ini membolehkan mana-mana pelanggan yang telah mematikan JavaScript atau yang tidak dapat melihat CSS untuk masih mempunyai akses ke seluruh laman web, jika tidak semua fungsi laman web tersebut.
CSS - Lapisan Gaya
Anda akan membuat semua gaya visual anda untuk laman web anda dalam helaian gaya luaran. Anda boleh menggunakan pelbagai stylesheets, tetapi ingat bahawa setiap fail CSS berasingan memerlukan permintaan HTTP untuk diambil, mempengaruhi prestasi laman web.
JavaScript - Lapisan Kelakuan
JavaScript adalah bahasa yang paling biasa digunakan untuk lapisan tingkah laku, tetapi seperti yang saya sebutkan tadi, CGI dan PHP juga boleh menghasilkan tingkah laku halaman web. Bahawa dikatakan, apabila kebanyakan pembangun merujuk kepada lapisan tingkah laku, mereka bermaksud lapisan yang diaktifkan secara langsung dalam penyemak imbas web - jadi JavaScript hampir selalu menjadi bahasa pilihan. Anda menggunakan lapisan ini untuk berinteraksi terus dengan DOM atau Model Objek Dokumen. Menulis HTML yang sah dalam lapisan kandungan juga penting untuk interaksi DOM dalam lapisan perilaku.
Apabila anda membina lapisan tingkah laku, anda harus menggunakan fail skrip luar seperti CSS. Anda mendapat semua kelebihan yang sama menggunakan kunci gaya luaran.