Ať už jste nováčkářského průmyslu nebo zkušený veterán, prohlížení zdroje HTML různých webových stránek je něco, co budete pravděpodobně dělat mnohokrát během své kariéry.
Pro ty, kteří jsou novým webovým designem, je prohlížení zdrojového kódu webu jedním z nejjednodušších způsobů, jak zjistit, jak se dělají určité věci, abyste se z této práce mohli naučit a začít používat určitý kód nebo techniky ve své vlastní práci. Jako každý webdesignér, který dnes pracuje, a to zejména ti, kteří se na něm podíleli od počátku průmyslu, a je to jistá sázka, že s vámi říkají, že se naučil HTML jednoduše tím, že vidí zdroj webových stránek, které viděli a byli zaujati podle. Kromě čtení webových knih nebo návštěvy odborných konferencí je prohlížení zdrojového kódu webu skvělým způsobem, jak se začátečníci naučit HTML.
Více než jen HTML
Jedna věc, kterou je třeba pamatovat, je, že zdrojové soubory mohou být velmi komplikované (a čím složitější jsou webové stránky, které prohlížíte, tím je složitější, že kód webu pravděpodobně bude). Kromě struktury HTML, která tvoří stránku, kterou prohlížíte, budou také CSS (kaskádové styly), které diktují vizuální vzhled tohoto webu. Navíc mnoho webů dnes bude obsahovat soubory skriptů, které jsou součástí kódu HTML.
Je pravděpodobné, že bude obsahovat více souborů skriptů, ve skutečnosti každý z nich napájí různé aspekty webu. Upřímně řečeno, zdrojový kód webu se může zdát ohromující, zvláště pokud jste noví. Nenechte se frustrovaný, pokud nemůžete okamžitě zjistit, co se s touto stránkou děje. Prohlížení zdroje HTML je jen prvním krokem v tomto procesu. S trochou zkušeností začnete lépe porozumět tomu, jak se všechny tyto kousky hodí dohromady, aby vytvořily webové stránky, které vidíte ve vašem prohlížeči. Jakmile se budete lépe seznámit s kódem, budete se moci od něj dozvědět víc a nezdá se vám tak hrozivě.
Jak tedy vidíte zdrojový kód webové stránky? Postupujte podle pokynů krok za krokem pomocí prohlížeče Google Chrome.
Pokyny krok za krokem
-
Otevři Webový prohlížeč Google Chrome (pokud nemáte nainstalovaný prohlížeč Google Chrome, je to zdarma ke stažení).
-
Přejděte na webovou stránku, kterou byste chtěli prověřit.
-
Klikněte pravým tlačítkem myši strana a podívejte se na zobrazené menu. Z této nabídky klepněte na tlačítko Zobrazit zdroj stránky.
-
Zdrojový kód této stránky se nyní objeví v prohlížeči jako nová karta.
-
Můžete také použít klávesové zkratky z CTRL + U na počítači otevřete okno se zobrazeným zdrojovým kódem webu. Na Mac je tato zkratka Příkaz + volba + U.
Vývojářské nástroje
Kromě jednoduché Zobrazit zdroj stránky které Google Chrome nabízí, můžete také využít svých vynikajících nástrojů pro vývojáře, abyste je mohli nakopat ještě hlouběji do webu. Tyto nástroje vám umožní nejen vidět HTML, ale i CSS, který se používá pro zobrazení prvků v tomto dokumentu HTML.
Použití nástrojů pro vývojáře Chrome:
-
otevřeno Google Chrome.
-
Navigovat do webovou stránku, kterou chcete prozkoumat.
-
Klepněte na tlačítko ikonu se třemi řádky v pravém horním rohu okna prohlížeče.
-
Z menu se přesuňte Více nástrojů a poté klepněte na tlačítko OK Vývojářské nástroje v zobrazené nabídce.
-
Otevře se okno se zdrojovým kódem HTML na levé straně podokna a příslušným CSS vpravo.
-
Případně, pokud kliknete pravým tlačítkem myši element v webové stránce a zvolte Kontrolovat z nabídky, které se objeví, se budou objevovat vývojářské nástroje prohlížeče Chrome a vybraný přesný prvek, který jste vybrali, budou zvýrazněny v kódu HTML s příslušným CSS zobrazeným vpravo. To je velmi užitečné, pokud se chcete dozvědět více o tom, jak byl vytvořen určitý konkrétní web.
Je zobrazen zdrojový kód legální?
V průběhu let jsme měli mnoho nových webových návrhářů, kteří se ptají, zda je přijatelné sledovat zdrojový kód webu a používat ho pro jejich vzdělávání a nakonec pro práci, kterou dělají. Zatímco kopírování velkoobchodního kódu webu a jeho předávání jako vlastní na webu určitě není přijatelné, použití tohoto kódu jako odrazového můru se učit je vlastně, kolik pokroků se v tomto odvětví dělá.
Jak jsme se zmínili na začátku tohoto článku, bylo by těžké nalézt pracujícího webového profesionála dnes, který se něco nenaučil při prohlížení zdroje webu! Ano, prohlížení zdrojového kódu webu je legální. Použití tohoto kódu jako zdroje pro vytvoření podobného je také v pořádku. Přijmout kód jako-je a předáním ho, protože je to vaše práce, kde se začínáte setkávat s problémy.
Nakonec se weboví profesionálové učí od sebe navzájem a často se zlepšují o práci, kterou vidí a jsou inspirováni, takže neváhejte a podívejte se na zdrojový kód webu a použijte ho jako učební nástroj.
