Zistite, ako bola webová stránka vytvorená zobrazením zdrojového kódu
Keď som prvýkrát začal svoju kariéru webového dizajnéra, tak som sa naučil tak, že som preskúmal prácu iných webových návrhárov, ktorých som obdivoval. Nie som sám v tom. Bez ohľadu na to, či ste nováčikom v odvetví webových aplikácií alebo skúseným veteránom, prezeranie HTML zdroja rôznych webových stránok je niečo, čo budete pravdepodobne robiť mnohokrát v priebehu vašej kariéry.
Pre tých, ktorí sú noví na webe, je zobrazenie zdrojového kódu stránky jedným z najjednoduchších spôsobov, ako zistiť, ako sa vykonávajú určité veci, aby ste sa z tejto práce mohli naučiť a začať používať určitý kód alebo techniky vo svojej vlastnej práci. Ako každý web dizajnér, ktorý dnes pracuje, najmä tí, ktorí sa na ňom nachádzajú už od začiatku priemyslu, a je to bezpečná stávka, že s tým vám hovoria, že sa naučili HTML jednoducho prezeraním zdroja webových stránok, ktoré videli a boli zaujatí by. Okrem čítania kníh tvorby webových stránok alebo účasti na odborných konferenciách je prehliadanie zdrojového kódu stránky skvelým spôsobom, ako začať učiť HTML.
Viac ako len HTML
Jedna vec, ktorú si treba pamätať je, že zdrojové súbory môžu byť veľmi komplikované (a čím zložitejšie sú webové stránky, ktoré si prezeráte, tým zložitejší bude pravdepodobne tento kód lokality). Okrem štruktúry HTML, ktorá tvorí stránku, ktorú prezeráte, budú existovať aj CSS (kaskádové štýly), ktoré diktujú vizuálny vzhľad tejto stránky. Okrem toho mnohé webové stránky dnes obsahujú súbory skriptov, ktoré sú súčasťou kódu HTML.
Je pravdepodobné, že viac súborov skriptov bude zahrnutých, v skutočnosti každý z nich prináša rôzne aspekty lokality. Úprimne povedané, zdrojový kód lokality sa môže zdať ohromujúci, najmä ak ste novým spôsobom. Nenechajte sa frustrovať, ak nemôžete okamžite zistiť, čo sa deje s touto stránkou. Zobrazenie zdroja HTML je len prvým krokom v tomto procese. S trochou skúseností začnete lepšie pochopiť, ako všetky tieto diely zapadajú do vytvárania webových stránok, ktoré vidíte vo svojom prehliadači. Ako sa budete viac oboznámiť s týmto kódom, budete sa od neho môcť dozvedieť viac a nebude to pre vás skľučujúce.
Takže ako si pozriete zdrojový kód webových stránok? Tu nájdete pokyny krok za krokom pomocou prehliadača Google Chrome.
Pokyny krok za krokom
- Otvorte webový prehliadač Google Chrome (ak nemáte nainštalovaný prehliadač Google Chrome, je to bezplatné prevzatie).
- Prejdite na webovú stránku, ktorú chcete preskúmať .
- Kliknite pravým tlačidlom na stránku a pozrite sa na zobrazenú ponuku. Z tejto ponuky kliknite na položku Zobraziť zdroj stránky .
- Zdrojový kód pre danú stránku sa teraz zobrazí ako nová karta v prehliadači.
- Môžete tiež použiť klávesové skratky CTRL + U na počítači a otvoriť okno so zobrazeným zdrojovým kódom lokality. Na Mac je táto skratka Command + Alt + U.
Nástroje pre vývojárov
Okrem jednoduchej možnosti zobrazenia zdrojov stránky, ktorú ponúka prehliadač Google Chrome, môžete tiež využiť svoje vynikajúce nástroje pre vývojárov, aby ste mohli kopať ešte hlbšie do lokality. Tieto nástroje vám umožnia vidieť nielen HTML, ale aj CSS, ktorý sa vzťahuje na zobrazenie prvkov v tomto dokumente HTML.
Používanie nástrojov vývojára prehliadača Chrome:
- Otvorte prehliadač Google Chrome .
- Prejdite na webovú stránku, ktorú chcete preskúmať .
- Kliknite na ikonu s tromi riadkami v pravom hornom rohu okna prehliadača.
- V ponuke umiestnite kurzor myši na položku Ďalšie nástroje a potom kliknite na položku Nástroje vývojára v zobrazenej ponuke.
- Otvorí sa okno, v ktorom sa zobrazí zdrojový kód HTML vľavo od okna a príslušný CSS vpravo.
- Prípadne, ak kliknete pravým tlačidlom na prvok na webovej stránke a vyberiete možnosť Inspect z zobrazenej ponuky, objavia sa vývojárske nástroje prehliadača Chrome a presný prvok, ktorý ste vybrali, sa zvýrazní v jazyku HTML so zodpovedajúcim CSS zobrazeným vpravo. To je veľmi užitočné, ak sa chcete dozvedieť viac o tom, ako bol vytvorený jeden konkrétny kúsok stránky.
Je zobrazenie zdrojového kódu legálne?
V priebehu rokov som mal veľa nových webových dizajnérov otázku, či je prijateľné prezerať zdrojový kód lokality a použiť ho na vzdelanie a nakoniec na prácu, ktorú robia. Pri kopírovaní veľkoobchodného kódu webu a jeho odovzdávaní ako vlastného na stránkach určite nie je prijateľné, používanie tohto kódu ako odrazového štýlu, z ktorého sa učíte, je skutočne to, koľko pokrokov sa v tomto odvetví uskutočňuje.
Ako som spomenul na začiatku tohto článku, bolo by ťažké naliehavo nájsť pracovného webu profesionálneho dnes, ktorý sa niečo naučil prezeraním zdroja stránky! Áno, zobrazenie zdrojového kódu stránky je legálne. Použitie tohto kódu ako prostriedku na vytvorenie niečoho podobného je tiež v poriadku. Užívanie kódu ako je a odovzdávanie, pretože vaša práca je miestom, kde sa začínajú stretávať s problémami.
Nakoniec sa weboví profesionáli naučia jeden od druhého a často sa zlepšujú o prácu, ktorú vidia a sú inšpirovaní, takže neváhajte a pozrite si zdrojový kód lokality a použite ho ako vzdelávací nástroj.