Apa kabeh situs web dibangun kanthi kombinasi struktur, gaya, lan tindak tanduk
Analogi umum sing digunakake kanggo njlèntrèhaké pembangunan situs web ngarep yaiku kaya bangku 3-legged. Iki 3 sikil, kang uga dikenal minangka 3 lapisan pembangunan web, yaiku Struktur, Gaya, lan Perilaku.
Telung Lapisan Web Development
- Lapisan struktur utawa isi
- Lapisan struktur utawa isi saka kaca web iku kode HTML sing dumunung ing kaca kasebut. Kaya bingkai omah sing nggawe pondasi sing kuwat lan omah sing dibangun, dadi gawe pondasi HTML sing nggawe platform sing bisa digawe situs web. Struktur HTML bisa kalebu teks utawa gambar lan kalebu hyperlinks sing bakal digunakake pengunjung kanggo navigasi ing situs web kasebut.
- Lapisan gaya utawa presentation
- Lapisan gaya utawa presentation ndhikte carane document HTML kabentuk bakal katon menyang pengunjung situs. Lapisan iki ditetepake nganggo CSS (Cascading Style Sheets). File kasebut ngemot gaya sing nunjukake carane dokumen kasebut kudu ditampilake ing browser web. Ing Web dina iki, lapisan gaya uga bisa kalebu Media Queries sing bisa ngganti tampilan situs adhedhasar ukuran lan piranti layar sing beda .
- Prilaku
- Lapisan prilaku punika lapisan saka kaca Web sing bisa nanggapi tumindak liya sing beda utawa nggawe owah-owahan menyang kaca sing didhasarake sakumpulan kondisi. Kanggo sawetara kaca web, tingkat prilaku bakal dadi interaksi JavaScript ing kaca.
Kenapa Apa Sampeyan Memisahkan Lapisan?
Nalika sampeyan nggawe kaca web, iku perlu kanggo njaga lapisan kanthi kapisah. Struktur kudu diwènèhaké marang HTML, gaya visual menyang CSS, lan tindak tanduk marang skrip sing dipigunakaké ing situs kasebut.
Sawetara keuntungan pamisahan lapisan kasebut yaiku:
- Sumber daya bareng
- Nalika sampeyan nulis berkas CSS eksternal utawa file JavaScript, sampeyan bisa nggunakake berkas kasebut ing sembarang kaca ing situs web sampeyan. Yen sampeyan kudu nggawe owah-owahan menyang berkas kasebut, mbok menawa kanggo nganyari gaya tipografi ing situs web, saben kaca sing nggunakake stylesheet bakal entuk owah-owahan. Ora perlu ngowahi saben kaca situs web kanthi individu, sing kanggo situs sing luwih gedhe bisa dadi usaha sing melu.
- Ngunduh luwih cepet
- Sawise script utawa stylesheet diundhuh dening customer sampeyan sepisanan, wis di-cache dening browser web. Amarga sumber daya iki saiki wis ana ing cache, kaca-kaca liyane sing dijaluk ing browser mbukak luwih cepet, sing ningkatake kacepetan lan kinerja kaca sakabèhé.
- Tim multi-person
- Yen sampeyan duwe luwih saka siji wong nggarap situs web bebarengan, sampeyan bisa nggunakake sistem sing "mriksa" lan "mriksa metu" file kanggo mesthekake yen everyone ing tim nggarap versi paling anyar saka file kasebut. Iki luwih angel kanggo nindakake manawa gaya lan prilaku sing saling terkait karo dokumen struktur.
- SEO
- Situs sing nduweni pemisahan sing jelas saka gaya lan struktur bakal nindakake luwih apik kanggo mesin telusur amarga situs kasebut luwih efektif bisa nyusup isi kasebut lan ngerteni kaca kasebut tanpa meksa kanthi gaya visual utawa informasi prilaku.
- Aksesibilitas
- Lembar gaya eksternal lan file naskah luwih gampang diakses wong lan menyang browser. Amarga ana pemisahan gaya lan struktur, perangkat lunak kaya pembaca layar luwih gampang ngolah isi saka lapisan struktur tanpa nyebabake gaya supaya ora bisa digunakake.
- Kompatibilitas mundur
- Nalika sampeyan duwe situs sing dirancang karo lapisan pangembangan, bakal luwih kompatibel amarga browser utawa piranti sing ora bisa nggunakake gaya CSS tartamtu utawa sing uga nduwe JavaScript dipateni isih bisa ndeleng HTML. Situs web sampeyan banjur bisa ditingkatake kanthi fitur kanggo browser sing ndhukung.
HTML - Lapisan Struktur
Lapisan struktur ing ngendi sampeyan nyimpen kabeh isi sing pelanggan pengin maca utawa katon ing. Iki bakal dikodhokake ing HTML5 sing standar lan bisa kalebu teks lan gambar uga multimedia (video, audio, lan liya-liyane). Penting kanggo mesthekake yen saben aspek konten situs diwakili ing lapisan struktur. Iki ngidini pelanggan sing duwe JavaScript dipateni utawa sing ora bisa ndeleng CSS tetep nduweni akses menyang kabeh situs web, yen ora kabeh fungsi situs kasebut.
CSS - lapisan Gaya
Sampeyan bakal nggawe kabeh gaya visual kanggo situs web sampeyan ing sheet gaya njaba. Sampeyan bisa nggunakake macem-macem stylesheets, nanging elinga yen saben file CSS kapisah mbutuhake panjaluk HTTP kanggo njupuk, nggayuh kinerja situs.
JavaScript - lapisan Behavior
JavaScript minangka basa sing paling umum digunakake kanggo lapisan prilaku, nanging kaya sing kasebut sadurunge, CGI lan PHP uga bisa nggawe perilaku halaman Web. Ngomong yen, paling gawe ngembangake lapisan prilaku, tegese lapisan sing diaktifake langsung ing browser Web - dadi JavaScript meh saben basa pilihan. Sampeyan nggunakake lapisan iki kanggo sesambungan langsung karo DOM utawa Model Dokumen Obyek. Nulis HTML sah ing lapisan isi uga penting kanggo interaksi DOM ing lapisan prilaku.
Nalika mbangun ing lapisan prilaku, sampeyan kudu nggunakake file skrip eksternal kaya karo CSS. Sampeyan entuk kabeh kaluwihan sing padha nggunakake sheet gaya njaba.