A HTML-forrás megtekintése a Google Chrome-ban

Függetlenül attól, hogy új vagy-e a webiparban vagy tapasztalt veterán, a különböző weboldalak HTML-forrásainak megtekintésével valószínűleg sokszor foglalkozol majd karriered során. A legtöbb böngésző lehetővé teszi a forrás egyszerű megtekintését; A Chrome sem különbözik ettől.

A webhely forráskódjának megtekintése az egyik legegyszerűbb módja annak, hogy tanuljon az adott munkából, és elkezdjen konkrét kódot vagy technikákat használni a munkájában. A web-tervező könyvek olvasása vagy a szakmai konferenciákon való részvétel mellett a webhely forráskódjának megtekintése kiváló lehetőség a kezdők számára a HTML-tanuláshoz.

Tekintse meg a forráskódot a Chrome-ban

Tehát hogyan tekintheti meg egy webhely forráskódját? Itt vannak a lépésenkénti utasítások a Google Chrome böngésző használatával.

1. Nyissa meg a Google Chrome webböngésző (ha nincs telepítve a Google Chrome, akkor ez ingyenesen letölthető).

2. Navigáljon a weboldal, amelyet meg szeretne vizsgálni.

3. Kattintson a jobb gombbal az oldal és nézd meg a megjelenő menüt. Ebben a menüben kattintson a gombra Oldal forrásának megtekintése.

   

4. Az oldal forráskódja új lapként jelenik meg a böngészőben.

5. Alternatív megoldásként használhatja a CTRL + U egy számítógépen, hogy megnyithasson egy ablakot a webhely forráskódjával. Mac-en ez a parancsikon Command + Option + U.

Használja a Chrome fejlesztői eszközeit

A Google Chrome által kínált egyszerű Oldalforrás-nézet képesség mellett a kiváló Fejlesztői eszközök előnyeit is felhasználhatja, hogy még mélyebben belemélyedjen egy webhelybe. Ezek az eszközök nemcsak a HTML, hanem a HTML dokumentum megtekintési elemeire vonatkozó CSS ​​megtekintését is lehetővé teszik.

A Chrome fejlesztői eszközeinek használata:

1. Nyisd ki Google Chrome.

2. navigáljon a megvizsgálni kívánt weboldalt.

3. Válassza ki a hárompontos menü a böngészőablak jobb felső sarkában.

4. A menüből mutasson az egérrel Több eszköz majd válassza ki Fejlesztői eszközök a megjelenő menüben.

   

5. Megnyílik egy ablak, amely az ablaktábla bal oldalán a HTML forráskódot, a jobb oldalon pedig a kapcsolódó CSS-t mutatja.

6. Alternatív megoldásként, ha jobb gombbal kattint egy elem egy weblapon és válassza ki a Ellenőriz a megjelenő menüből a Chrome fejlesztői eszközei felbukkannak, és kiemelik a HTML-ben kiválasztott részt, a megfelelő CSS-sel jobbra. Nagyon hasznos, ha többet szeretne megtudni a webhely egy adott darabjáról.

Jogos a forráskód megtekintése?

Az évek során sok új webdesignernek feltettük a kérdését, hogy elfogadható-e egy webhely forráskódjának megtekintése és felhasználása az oktatásukhoz és végső soron az általuk végzett munkához. Bár a webhely nagykereskedelmi másolása és a sajátként történő átadása a weboldalon biztosan nem elfogadható, ennek a kódnak az ugródeszkaként való használata, hogy megtanulják, valójában hány előrelépés történt ebben az iparágban.

Amint azt a cikk elején említettük, nehéz lenne megtalálni egy működő webes szakembert, aki ma nem tanult meg valamit a webhely forrásainak megtekintésével! Igen, a webhely forráskódjának megtekintése törvényes. A kód erőforrásként történő használata hasonló létrehozásához szintén biztonságos. Ha a kódot aktuális állapotban veszi át, és továbbadja, mivel a munkája során problémákat okoz.  

Végül a webes szakemberek tanulnak egymástól, és gyakran javítják azt a munkát, amelyet látnak és inspirálnak, ezért ne habozzon megnézni a webhely forráskódját és használni azt tanulási eszközként.

Több, mint HTML

Egy dologra emlékezni kell arra, hogy a forrásfájlok nagyon bonyolultak lehetnek (és minél összetettebb a megtekintett webhely, annál összetettebb valószínűleg a webhely kódja). Az oldalt alkotó HTML struktúra mellett lesznek CSS (lépcsőzetes stíluslapok) is, amelyek meghatározzák az adott oldal vizuális megjelenését. Ezenkívül sok webhely ma a HTML-hez mellékelt szkriptfájlokat is tartalmaz.

Valószínűleg több szkriptfájlt is tartalmaz; valójában mindegyik a webhely különböző aspektusait táplálja. Őszintén szólva, egy webhely forráskódja elsöprőnek tűnhet, különösen, ha még nem ismeri ezt. Ne csalódjon, ha nem tudja azonnal kitalálni, mi folyik az adott webhelyen. A HTML forrás megtekintése csak az első lépés ebben a folyamatban. Kis tapasztalat birtokában jobban meg fogja érteni, hogy ezek a darabok hogyan illeszkednek egymáshoz, hogy létrehozzák azt a weboldalt, amelyet a böngészőben lát. Amint jobban megismeri a kódot, többet tudhat meg belőle, és ez nem tűnik olyan ijesztőnek az Ön számára.