Weboldalak forráskódjának megtekintése (Így nézd meg bármelyik oldal HTML kódját)
Ha szeretnéd tudni, hogy hogy épülnek fel az egyes weboldalak, akkor ez a cikk megmutatja számodra, lépésről-lépésre, hogy hogyan tekintheted meg bármelyik weboldal HTML (+CSS, JS, PHP stb) kódját.
1. lépés: Nyissuk meg azt az oldalt, amelyiknek szeretnénk megnézni a forráskódját.
Szóval nyisd meg azt az oldalt, amelyiknek szeretnéd meglesni a forráskódját. Jelen esetben elég, ha nem nyitsz meg oldat, megvizsgáljuk azt, amit éppen olvasol.
2. lépés: Jobb klikk.
Nyomd meg az egér jobb gombját, ahol ezt fogod látni:
3. lépés: Válassz lehetőséget.
Itt két opcióból választhatunk:
- Oldal forrásának megtekintése (Operában: Lap forrása)
- Vizsgálat (Operában: Elem vizsgálata)
Mind a kettő tökéletesen alkalmas arra, hogy megvizsgáljuk egyes weboldala forráskódját. Alább kitérünk arra, hogy melyiket mire érdemes használni.
Oldal forrásának megtekintése
Ha rákattintunk az „Oldal forrásának megtekintése” gombra, akkor egy új ablakban egy hasonló HTML kód áradat fog megnyílni.
Ez itt a vizsgált weboldal teljes HTML kódja. Ha megnyitod a WEBiskola online HTML szerkesztőjét és beilleszted a teljes látott HTML kódot, akkor egy az egybe legenerálódik a weboldal.
Az „Oldal forrásának megtekintése” opciót tulajdonképpen arra használjuk, hogy teljes egészébe lássuk a weboldal HTML felépítését.
Vizsgálat
Ha a „Vizsgálat” gombot nyomjuk meg, akkor a fenti ábrán látható ablak fog megnyílni. Ez az ablak már sokkal jobban használható a weboldalak HTML kódjának elemzésére. Igaz itt nem teljes egészében látjuk a kódot, de a jobb oldalon látható kis oldalra felé mutató nyilacskákkal könnyedén kibonthatjuk.
A „Vizsgálat” funkciót úgy célszerű használni, ha konkrétan oda kattintunk jobb klikkel, amit vizsgálni szeretnénk. Például vizsgáljuk meg a keresőgombot, azaz kattintsunk az egér jobb gombjával a weboldal keresőgombjára, majd nyomjuk meg a „Vizsgálat” lehetőséget.
Láthatjuk, hogy a jobb oldali sávban pontosan ki lett bontva az adott elemre vonatkozó HTML rész. Sőt világos kék háttérszínnel még azt is mutatja, hogy pontosan melyik sor felel az adott elem megjelenéséért.
Ha ráhúzzuk az egeret a jobb oldalt található bármelyik HTML elemre, akkor az konkrétan kijelöli, hogy melyik elemért felel az oldalon. A fenti képen én a Keresés gombért felelős HTML elemre húztam az egeret, így azt jelölte ki a weboldalon.
Alul azt láthatjuk, hogy az adott HTML elemre milyen stílus beállítások vonatkoznak. Konkrétan ezek mondják meg, hogy hogyan nézzen ki egy adott elem. Például, hogy mekkora legyen a mérete vagy milyen legyen a színe.
