Přečtěte si, jak byla webová stránka postavena na základě zobrazení zdrojového kódu
Když jsem poprvé začal svou kariéru webového designéra, tak jsem se naučil tak, že jsem přezkoumal práci jiných webových designérů, které jsem obdivoval. Nejsem sám v tom. 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. Jak se lépe seznámíte s kódem, budete se od něj moci dozvědět víc a nebude to pro vás děsivé.
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řete 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 chcete zkontrolovat .
- Klepněte pravým tlačítkem myši na stránku a podívejte se na zobrazené menu. Z této nabídky klepněte na položku 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 CTRL + U v počítači a otevřít okno se zobrazeným zdrojovým kódem webu. Na Macu je tato klávesová zkratka Command + Alt + U.
Vývojářské nástroje
Kromě jednoduché funkce Zobrazit zdroje stránky, kterou Google Chrome nabízí, můžete také využít svých vynikajících nástrojů pro vývojáře a vykopat je ještě mnohem hlouběji. 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řete Google Chrome .
- Přejděte na webovou stránku, kterou chcete zkontrolovat .
- Klepněte na ikonu se třemi řádky v pravém horním rohu okna prohlížeče.
- Z nabídky přejděte na položku Další nástroje a v zobrazené nabídce klikněte na Nástroje pro vývojáře .
- 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 na prvek na webové stránce a vyberete možnost Zkontrolovat z zobrazené nabídky, objeví se vývojářské nástroje prohlížeče Chrome a vybraný přesný prvek bude zvýrazněn 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 jsem měl mnoho nových webových návrhářů, kteří se ptají, zda je přijatelné sledovat zdrojový kód webu a používat ho pro své vzdělá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 jsem se zmínil na začátku tohoto článku, bylo by těžké nalézt pracujícího webového profesionála, který se ještě 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.