Kíváncsi vagy, miből áll egy weboldal? Szeretné tudni, hogyan módosíthatja webhelyén a betűméretet vagy a színt? Egy weboldal HTML-kódjának megtekintésével mindezeket és még sok mást megteheti.
Ebben az oktatóanyagban megmutatjuk, hogyan tekintheti meg egy weboldal HTML-kódját a Chrome-ban.
HTML-kód megtekintése Chrome-ban
Amikor HTML-ben írunk, a forráskód címkék és attribútumok sorozata, amelyek a weboldal szerkezetének és tartalmának meghatározására szolgálnak.
A forráskódot a webböngészők olvassák be, és lefordítják a képernyőn látható grafikus weboldalra. A weboldal megjelenésének és hangulatának meghatározása mellett a forráskód interaktivitás hozzáadására is használható, például előugró ablakok, űrlapok és legördülő menük.
Noha az átlagos internetfelhasználónak soha nem kell megtekintenie egy weboldal HTML-forráskódját, néhány oka lehet ennek.
A fejlesztők számára a forráskód megtekintése hasznos módja lehet az oldal felépítésének megértésében, valamint annak meghatározásában, hogy milyen stílus- és szkriptelemeket használnak. A tervezők számára hasznos lehet látni, hogy más tervezők hogyan használták a HTML-t hatékony elrendezések létrehozására.
Egyes esetekben a felhasználók meg szeretnék tekinteni a forráskódot, hogy elhárítsák a hibákat, vagy többet megtudjanak egy adott webhely vagy webalkalmazás működéséről. Bármi legyen is az ok, a HTML-forráskód megtekintése viszonylag egyszerű folyamat a Chrome-ban.
Weboldal HTML-kódjának megtekintése a Chrome-ban Windows PC-n
A Windows operációs rendszer a Chrome egyik leginkább kompatibilis rendszere. A Chrome a nyílt forráskódú Chromium projektre épül, amelyhez a Microsoft is jelentős mértékben hozzájárul. Ez a kompatibilitás a HTML tartományra is kiterjed, ahol a népszerű böngésző lehetővé teszi a felhasználók számára bármely webhely HTML-kódjának megtekintését.
A HTML kódot kétféleképpen tekintheti meg.
Az Oldalforrás megtekintése használata
Ez a módszer egyszerű:
- Nyissa meg a Chrome-ot, és lépjen arra az oldalra, ahol meg szeretné tekinteni a HTML-forráskódot.
- Kattintson a jobb gombbal az oldalra, és válassza az Oldal forrásának megtekintése lehetőséget, vagy nyomja meg a Ctrl + U billentyűket a billentyűzeten a forráskód új lapon való megnyitásához.
A forráskód megjelenik az új lapon, és görgetve megtekintheti az oldal HTML-jelölését.
Fejlesztői eszközök használata
Egy weboldal forráskódjának a Google Chrome Developer Tools segítségével történő ellenőrzéséhez kövesse az alábbi lépéseket.
- Nyissa meg a Google Chrome-ot, és keresse meg az ellenőrizni kívánt weboldalt.
- Nyomja meg a Ctrl + Shift + I billentyűket a billentyűzeten. A Fejlesztői eszközök panel a megtekintett weboldal melletti dokkban nyílik meg.
- Kattintson az „Elemek” fülre a panel tetején. Ez megjeleníti a weboldal HTML-forráskódját.
- Most megtekintheti az oldal forráskódját. Egy elem összecsukásához kattintson a címke neve melletti háromszögre. Ha többet szeretne tudni egy összetevőről, kattintson rá a jobb gombbal, és válassza az „Ellenőrzés” lehetőséget.
Ne feledje, hogy ez a módszer a legjobb HTML-oldalak esetén; más típusú weboldalak forráskódja is megtekinthető, de a formázás olvasása nagyobb kihívást jelenthet.
Weboldal HTML-kódjának megtekintése Mac számítógépen a Chrome böngészőben
Ha Ön webfejlesztő, fontos, hogy meg tudja tekinteni egy weboldal HTML-kódját. Így láthatja az oldal felépítését, és elháríthatja az esetlegesen felmerülő problémákat. Szerencsére ez könnyen megtehető a Chrome-ban Mac gépen. Egyszerűen kövesse az alábbi lépéseket:
- Nyissa meg a Chrome-ot, és navigáljon arra a weboldalra, ahol meg szeretné tekinteni a HTML-kódot.
- Kattintson a jobb gombbal az oldalra, és válassza az „Ellenőrzés” lehetőséget.
- Megnyílik egy új ablaktábla a képernyő alján, amely megjeleníti a HTML-kódot.
- A HTML-kód egyes elemeire kattintva is megtekintheti, hogyan vannak az oldalon stílusozva. Például megtekintheti, hogy mely CSS-stílusok kerülnek alkalmazásra egy elemre, ha kijelöli azt, majd a megnyíló ablaktáblán a „Stílusok” fülre kattint.
- A panel bezárásához kattintson a jobb felső sarokban található „X” gombra.
Alternatív megoldásként használhatja a Chrome fejlesztői eszközöket a forráskód megtekintéséhez.
- Nyissa meg a Google Chrome-ot, és keresse meg a megtekinteni kívánt weboldalt.
- Kattintson a menü ikonra (három pont) a böngésző jobb felső sarkában, és válassza a További eszközök és fejlesztői eszközök lehetőséget a legördülő menüből.
- A képernyő alján megnyílik a Fejlesztői eszközök panel. Válassza ki az „Elemek” elemet a panel tetején.
- Ekkor megjelenik az aktuális oldal HTML-kódja az Elemek panelen. Használhatja a panel különböző beállításait a kód ellenőrzéséhez és szükség szerinti hibakereséséhez.
Néhány kattintással könnyedén megtekintheti bármely weboldal HTML-kódját a Mac gép Chrome-jában. Ez akkor lehet hasznos, ha webfejlesztési problémákat próbál elhárítani, vagy szeretné közelebbről megvizsgálni egy adott webhely felépítését.
Weboldal HTML-kódjának megtekintése a Chrome-ban az iPhone alkalmazásban
Ha iPhone-t használ, a Chrome bármely oldalának HTML-kódját kétféleképpen tekintheti meg:
Az URL módosítása
Könnyedén megtekintheti bármely oldal HTML-kódját, ha kis mértékben módosítja az URL-t:
- Nyissa meg a Chrome-ot, és lépjen arra a weboldalra, amelynek HTML-kódját meg szeretné tekinteni.
- Érintse meg egyszer a címsávot a szerkesztési mód elindításához.
- Vigye a kurzort az URL elejére.
- Írja be a „View-source” kifejezést, majd nyomja meg a „Go” gombot. A weboldal HTML-kódja megjelenik a Chrome-ban.
Fejlesztői eszközök használata
A Chrome Developer Tools iOS rendszeren is elérhető, de az elindításához más lépések szükségesek, mint a PC-ken.
- Érintse meg a három pontot a képernyő jobb felső sarkában, és válassza a „Beállítások” lehetőséget.
- Görgessen le, és koppintson a „Speciális” elemre, majd kapcsolja be a „Fejlesztői eszközök” melletti kapcsolót.
- Érintse meg és tartsa lenyomva az oldal egy üres területét, majd válassza az „Elem vizsgálata” lehetőséget. Ezzel megnyílik egy oldalpanel az adott oldal HTML-kódjával.
Weboldal HTML-kódjának megtekintése a Chrome-ban az Android alkalmazásban
Ha Android-telefonján használja a Chrome alkalmazást, érdemes lehet megtekinteni egy weboldal HTML-kódját. Ez akkor lehet hasznos, ha az oldallal kapcsolatos problémát próbálja elhárítani, vagy meg szeretné tekinteni az oldal szerkezetét. Ha meg szeretné tekinteni egy weboldal HTML-kódját androidos telefonján a Chrome böngészőben, kövesse az alábbi lépéseket:
- Nyissa meg a Chrome-ot Android-eszközén.
- Írja be a „view-source:” kifejezést, majd annak az oldalnak az URL-címét, ahol meg szeretné tekinteni a forráskódot. Ha például meg szeretné tekinteni a www.google.com forráskódját, írja be a „view-source:www.google.com” szöveget a Chrome címsorába.
Ezzel megnyílik az adott oldal HTML-kódja a Chrome beépített Fejlesztői eszközök felületén. Innen tetszés szerint megtekintheti és szerkesztheti a kódot. Ne feledje, hogy ez a módszer csak akkor működik, ha a megtekinteni kívánt webhely lehetővé teszi a hozzáférést a forráskódjához. Ha nem, akkor a hibaüzeneten kívül nem fog mást látni.
Weboldal HTML-kódjának megtekintése a Chrome böngészőben iPaden
Az iPad alkalmazás Chrome-ja megkönnyíti bármely weboldal HTML-kódjának megtekintését. Egyszerűen kövesse az alábbi lépéseket:
- Nyissa meg a Chrome-ot, és írja be a „view-source:” szót, majd a megtekinteni kívánt oldal URL-jét. Ha például meg szeretné tekinteni a www.alphr.com forráskódját, be kell írnia a „view-source:www.alphr.com” címet a Chrome címsorába.
- Nyomja meg a „Go” gombot.
Ez betölti az oldal forráskódját egy új lapra a Chrome-ban. Innen szükség szerint mentheti vagy megoszthatja a kódot.
A forráskód az a ragasztó, amely összetartja az oldalakat
A HTML minden webhely alapja. Ez biztosítja azt a szerkezetet és tartalmat, amelyet a látogatók látnak, amikor betöltenek egy oldalt a böngészőjükbe.
Míg az oldal végső megjelenését a CSS vagy más stílusnyelvek határozhatják meg, a HTML-kód határozza meg az oldal alapvető szerkezetét és tartalmát. Egyes módosítások az oldalt tönkretehetik. Emiatt fontos, hogy jól ismerje a HTML-t, amikor megtekinti vagy módosítja a forráskódot.
Ne feledje továbbá, hogy bár a HTML-kód megtekintése bizonyos esetekben hasznos lehet, a kódon végzett módosítások nem jelennek meg az élő weboldalon. Csak az oldal adminisztrátora által közzétett módosítások lesznek láthatók a látogatók számára.
Megpróbáltad megtekinteni bármely weboldal HTML-kódját az oktatóanyagban tárgyalt módszerek bármelyikével? Hogy ment?
Tudassa velünk a megjegyzések részben.
