Ismerje meg, hogyan épült egy webhely a forráskód megtekintésével
Amikor először elkezdtem pályafutásom webes tervezőjeként, sokat tanultam azáltal, hogy átnéztem más webes tervezők munkáját, akiket csodáltam. Nem vagyok egyedül ebben. Függetlenül attól, hogy új vagy az internetes iparág vagy a tapasztalt veterán, a különböző weboldalak HTML forrását megnézheted , ami sokszor a karriered során.
Azok számára, akik újak a webes tervezéshez, a webhely forráskódjának megtekintése az egyik legegyszerűbb módja annak, hogy megtekinthesse, hogy bizonyos dolgok hogyan történtek, hogy megtanulhassák ebből a munkából és elkezdhessenek bizonyos kódokat vagy technikákat használni saját munkájához. Mint minden olyan webes tervező, aki ma dolgozik, különösen azok, akik az iparág korai óta éltek, és ez egy biztonságos tétel, hogy megmondják neked, hogy megtanulják a HTML-t egyszerűen a weboldalak forrását megtekintve, amelyet láttak és érdekeltek által. A webes könyvek olvasása és a szakmai konferenciákon való részvétel mellett a webhely forráskódjának megtekintése egy nagyszerű módja annak, hogy a kezdők megismerjék a HTML-t.
Több mint egyszerű HTML
Emlékeztetni kell arra, hogy a forrásfájlok nagyon bonyolultak lehetnek (és az összetettebb a megtekintett webhely, annál összetettebb a webhely kódja). A megtekinteni kívánt oldalat alkotó HTML-struktúra mellett CSS (lépcsős stíluslapok) is szerepelnek, amelyek diktálják az adott webhely vizuális megjelenését. Ezenfelül sok weboldal ma tartalmazza a HTML-szel együtt a szkriptfájlokat is.
Valószínűleg több szkriptfájl is beletartozik, sőt, mindegyik a webhely különböző aspektusaiban működik. Őszintén szólva, a webhely forráskódja túlterhelőnek tűnhet, különösen akkor, ha újak vagytok. Ne felejtsd el, ha nem tudod kitalálni, mi történik azonnal ezen a webhelyen. A HTML forrás megtekintése csak az első lépés ebben a folyamatban. Egy kis tapasztalattal kezdjük jobban megérteni, hogy ezek a darabok hogyan illeszkednek össze ahhoz, hogy megteremtse a böngészőjén megjelenő webhelyet. Ahogy ismerkedsz a kóddal, többet is megtudhatsz róla, és úgy tűnik, hogy nem leszel ijesztő.
Hogyan tekintheted meg egy webhely forráskódját? A lépésről lépésre meg kell adni a Google Chrome böngésző használatát.
Lépésről lépésre utasítások
- Nyissa meg a Google Chrome böngészőt (ha nincs telepítve a Google Chrome, ez ingyenes letöltés).
- Keresse meg a vizsgálni kívánt weboldalt .
- Kattintson jobb gombbal az oldalra, és nézze meg a megjelenő menüt. Ebből a menüből kattintson az Oldalforrás megtekintése lehetőségre .
- Az adott oldal forráskódja új böngészőlapként jelenik meg a böngészőben.
- Alternatív megoldásként a CTRL + U billentyűparancsokat is használhatja a számítógépen, hogy megnyissa az ablakot a webhely forráskódjával. Mac rendszeren ez a parancs a Command + Alt + U parancs .
Fejlesztői eszközök
A Google Chrome által kínált egyszerű oldalak megtekintése mellett a kiváló fejlesztői eszközöket is kihasználhatja, hogy még mélyebben megindíthassa webhelyét. Ezek az eszközök lehetővé teszik, hogy ne csak a HTML-t láthassák, hanem a CSS-t is, amely a HTML-dokumentumban található nézetelemekre vonatkozik.
A Chrome fejlesztői eszközeinek használata:
- Nyissa meg a Google Chrome-ot .
- Keresse meg a vizsgálni kívánt weboldalt .
- Kattintson a böngészőablak jobb felső sarkában lévő három sorra .
- A menüből ugorjon a További eszközök fölött, majd kattintson a Fejlesztői eszközök elemre a megjelenő menüben.
- Ezzel megnyílik egy ablak, amely a jobb oldalon található bal oldali HTML-forráskódot és a hozzá tartozó CSS-t jeleníti meg.
- Ha egy jobb oldali egérgombbal kattint egy elemre egy weboldalon, és a megjelenő menüből válassza a Vizsgálat lehetőséget, megjelenik a Chrome fejlesztői eszközei, és a kiválasztott elem pontos lesz a HTML-ben a jobb oldali megfelelő CSS-sel. Ez rendkívül hasznos, ha többet szeretne megtudni arról, hogyan készült egy adott webhely egy része.
A forráskód jogi megtekintése?
Az évek során sok új webes tervező megkérdőjelezte, hogy elfogadható-e a webhely forráskódjának megtekintése, és az oktatásukhoz, végül pedig a munkájához. Miközben a webhely kódjának nagykereskedelmét másolják, és a saját webhelyén történő átvitelét biztosan nem fogadják el, az adott kódot mint ugródeszkát használva tanulhatják meg, hogy valóban hány előrelépés történt ebben az iparágban.
Ahogy már említettem a cikk elején, nehéz lenne olyan munkatársat keresni ma, aki nem tanult valamit a webhely forrását tekintve! Igen, a webhely forráskódjának megtekintése legális. Ez a kód, mint erőforrás, hogy valami hasonlót készítsen, szintén finom. A kód megszerzése és átadása, mivel a munkája az, ahol problémákba ütközik.
Végül a webes szakemberek megtanulják egymástól, és gyakran javítják az általuk látott és ihletett munkát, ezért ne habozzon megnézni a webhely forráskódját, és tanulási eszközként használni.