Otevřete kód stránky na Googlu pomocí kláves. Základní znalost kódu. To bude zajímavé pro začátečníky
Dnes se tedy podíváme na několik užitečných nástrojů pro webmastery, které usnadňují život při navrhování webu. Začněme konzolí pro webmaster v Google Chrome. A pojďme si projít otázky, které webmastera nejčastěji vyvstávají při návrhu webu.
Chcete-li se dostat do konzole, otevřete svůj web v prohlížeči Google Chrome, klikněte pravým tlačítkem myši kamkoli na webovou stránku a v kontextové rozbalovací nabídce vyberte možnost „Zobrazit kód stránky“ nebo vyberte konkrétní prvek, který chcete prostudovat, výběrem možnosti „Zobrazit kód“ živel".
V horní části bude uvedeno několik záložek. Dnes budeme hovořit o záložce „Prvky“. , který představuje prvky webové stránky se zvýrazněním značek, vlastností, zvýrazněním vnoření prvků, znázorněním hierarchie prvku ve stromu DOM (nápověda dole, od kořenového rodiče po aktuální), možnost upravovat prvky, seznam jejich vlastností, zvážit vyhledávání podle prvků a také Seznámíme se s prohlížením css stylů atd., spojených s prvky.
Jak mohu zobrazit všechny styly, které jsou přidruženy ke konkrétnímu prvku? Která se nyní používá? V jakých souborech se nacházejí?
Takže nic nemůže být jednodušší! Otevřete prohlížeč Google Chrome, otevřete naši webovou stránku – zdroj otázek, klikněte pravým tlačítkem na požadovaný prvek, pokud je viditelný v kontextu stránky, a v kontextové nabídce vyberte „Zobrazit kód prvku“.
Ve spodní části máme konzolu se zvýrazněnou záložkou vlevo „ Elements“ a všemi styly spojenými s prvkem vpravo, kde: Vypočítané styly– jedná se o obecné „souhrnné“ styly, které byly prvku přiřazeny z css pravidel a nastavení prohlížeče uživatele (jeho prostředí) a zároveň je karta sbalená.
Nás ale zajímá pod ní rozbalená záložka „Styles“, která postupně uvádí všechny styly přiřazené prvku a také soubory, kde jsou tato pravidla pro tento prvek specifikována jeho typem, id, třídou, názvem, vlastností. , atribut atd. Navíc, pokud je pravidlo css přeškrtnuté, znamená to, že bylo předefinováno dříve/později (což usnadňuje sledování, které z pravidel css má prioritu a je v tomto případě aplikováno na prvek).
Pod konzolou je řádek, který ukazuje prvek v hierarchii dokumentu, což vám umožňuje snadno zobrazit celý seznam nadřazených prvků od kořene po vybraný prvek. Něco jako „strouhanka“.
Html značka není viditelná v kontextu stránky? Nebo potřebujete najít všechny tagy např. podle konkrétní třídy, názvu, vlastnosti, typu?
Otevřete stránku v Google Chrome, klikněte pravým tlačítkem, vyvolejte kontextovou nabídku, vyberte « Zobrazit kód stránky » . Stiskněte současně kombinaci kláves „CTRL + F“, zadejte frázi, kterou potřebujeme ( Například: třída=”vycpávka") a procházejte seznam nalezených výsledků a současně prohlížejte všechny styly spojené s požadovanými prvky na pravé straně stránky.
Jak zobrazit html kód prvku (prvků) načítaných dynamicky (například: přes Ajax)
Čekáme na načtení stránky v prohlížeči Google Chrome. Provádíme nezbytné akce, aby Ajax fungoval. Klikněte pravým tlačítkem myši na načtená data, v kontextové nabídce vyberte „Zobrazit kód prvku“ a prohlédněte si výsledek v konzole na kartě „Prvky“ vlevo.
Zobrazte změny stylu css v reálném čase
Mimochodem, je také vhodné v případě potřeby sledovat, jaké styly jsou prvku přiřazeny za běhu, například při procházení galerií a dalších událostech časovače. Všechny styly přiřazené pomocí javascriptu v reálném čase se zobrazí ve vlastnosti styl vybraný prvek v okně na záložce „Prvky“.
Interaktivně si prohlédněte dopad css pravidel na prezentaci html tagů
Google Chrome poskytuje interaktivní konzoli pro styly CSS. To znamená, že můžete nejen zobrazit, které styly jsou na prvek použity, ale také přesunout kurzor myši na konkrétní vlastnost css, povolit ji pomocí vyskakovacího zaškrtávacího pole vpravo nebo ji zakázat zrušením příznaku a zobrazit výsledný výsledek na stránce.
Strukturu prezentace html prvků měníme za chodu (přímo v prohlížeči)
Už jsme se tedy naučili, jak prozkoumat strukturu webového dokumentu v Google Chrome, nyní se krátce podíváme na editační prvky za běhu. Do konzole jdeme jakýmkoli způsobem, který nám vyhovuje. Požadovaný prvek najdeme na kartě „Prvky“, klikneme na něj pravým tlačítkem myši, čímž vyvoláme vyskakovací kontextovou nabídku:
- Přidat atribut– přidá atribut pro zadaný prvek. Jakmile se kurzor stane aktivním, začneme nastavovat požadovanou vlastnost. Například: napíšeme name=”itemImage”, který bude okamžitě přidán do našeho prvku.
- Upravit atribut– pokud kliknete pravým tlačítkem na atribut prvku, položka se zpřístupní upravitatribut. Klikněte a upravte.
Příklad použití: Zapomněli jsme heslo uložené pod hvězdičkami v prohlížeči Google Chrome (pokud bylo heslo uloženo v tomto prohlížeči). Klikněte pravým tlačítkem myši na prvek se zadaným heslem, klikněte na „Zobrazit kód prvku“ , v konzole na levé záložce Prvky klikněte pravým tlačítkem na atribut type=”password”, klikněte levým tlačítkem na Upravitatribut změnit atribut typ=”heslo" na typ=”text", a nyní se místo hvězdiček zobrazuje stejné heslo v textové podobě.
- Upravithtml– klikněte pravým tlačítkem myši na prvek v konzole Prvky, vyberte Upravithtml, změňte kód podle svého.
- KopiejakoHTML– část HTML, kterou potřebujeme pro další výzkum, zkopírujeme, řekněme, do poznámkového bloku nebo pro jiné účely, kde potřebujeme použít přesně stejné rozložení. Šetříme čas.
- KopieXPATH– zkopíruje reprezentaci XPATH struktury z kořene nadřazeného prvku do vybraného prvku.
- Vymazatuzel– pokud potřebujete odstranit aktuálně vybraný prvek a všechny jeho potomky z kontextu webové stránky a zobrazit výsledek.
- Slovozabalit– vykreslí zobrazení webové stránky v kontextu konzoly Prvkyčitelnější.
V následujících článcích se budeme nadále zabývat nástroji pro webmastery a zejména se seznámíme se zbývajícími záložkami nástrojů pro webmastery v Google Chrome a také zvažte ladění chyb javascriptu pomocí různých prohlížečů
Možnost „zobrazit zdroj stránky“ byla pro mě dlouho zbytečná a nezajímavá. Učení HTML na Codecademy a navrhování vlastních webových stránek se zatím v můj nový koníček nerozrostlo. Zde vyvstala otázka: kde najít skutečné případy a půjčit si zajímavá řešení pro své „prasátko“? Odpověď byla nečekaně jednoduchá, jako všechny důmyslné věci: podívejte se na zdrojový kód stránky v Google Chrome! Podělím se s vámi o své skromné nálezy.
Jaký je zdrojový kód stránky
Pokud stejně jako já právě děláte první krůčky v programování HTML, bylo by dobré zjistit, jaký je zdrojový kód stránky.
Zdrojový kód, také známý jako kód stránky HTML, je text v jazyce HTML (Hyper Text Markup Language). Zahrnuje skutečný obsah stránky (text, tabulky) a značky. Ty slouží jako pokyny pro prohlížeč: jak zobrazit obsah, jaký typ formátování použít, kam vložit hypertextový odkaz nebo mediální soubor. No, pro nás, začínající programátory, je zdrojový kód tím nejlepším cvičištěm: najdeme zajímavou stránku a špehujeme ji, uložíme a použijeme úspěšné fragmenty. Jak?
Jak zobrazit zdrojový kód na stránce prohlížeče Google Chrome
Najděte stránku, která se vám líbí. Zaujal mě například design menu stránek. Zdrojový kód lze v prohlížeči Google Chrome otevřít třemi způsoby:
- Klikněte na ikonu menu v pravém horním rohu prohlížeče a vyberte „Další nástroje“. Mimo jiné je zde možnost „Zobrazit zdrojový kód“. Upřímně řečeno, tuto metodu používám jen zřídka: je tam spousta zbytečných pohybů. Dá se to udělat ještě jednodušší.
- Stiskněte kombinaci kláves Ctrl+U– otevře se nové okno se zdrojovým kódem;
- Pro fanoušky kontextového menu: klikněte pravým tlačítkem myši na stránku a vyberte možnost „Zobrazit kód stránky“.
Poradili jsme si s úkolem zobrazit HTML kód stránky v prohlížeči. Přejděme k nejzajímavější fázi.
Jak upravit a uložit zdrojový kód
K tomu, abyste se naučili vytvářet webové stránky, nestačí číst cizí HTML kód. Je potřeba si s tím hrát, experimentovat, provádět změny a kontrolovat výsledek. Můžete dokonce začít sestavením několika úspěšných vzorků. Jak upravit a uložit zdrojový kód?
Možnost 1. „Ručně“
Poté, co jsme otevřeli zdrojový kód stránky, vyvolejte kontextovou nabídku a vyberte možnost „Uložit jako“ a uložte soubor na pevný disk. Soubor upravíme v programu Poznámkový blok nebo Poznámkový blok, uložíme změny a otevřeme jej prostřednictvím prohlížeče. Výsledky našich změn (úspěšných i ne tak úspěšných) se projeví v okně prohlížeče.
Možnost 2. Pro profesionály
Když si každý den „hrajete“ se zdrojovým kódem, proces „uložit – otevřít – změnit – uložit – zkontrolovat“ unavuje. Pro sebe jsem našel řešení v podobě instalace pluginu pro Google Chrome – Firebug Lite. Umožňuje upravovat a ukládat zdrojový kód, aniž byste museli opustit okno prohlížeče.
Musíte rychle vidět všechny změny na samotném webu, aniž by to ovlivnilo soubory a kód webu zveřejněný na internetu. Například změnit barevné schéma bloku, přesunout prvek, který se přesunul ven atd.
Mnoho webmasterů k tomu používá místní servery Denwer nebo OpenServer, které na svém počítači provozují úplnou kopii webu. Tato metoda je univerzální a vhodná pro profesionály, lze s ní testovat fungování různých skriptů a pluginů, experimentovat se změnami designu a upravovat všechny soubory webu a po testu přenést příslušné změny přímo na web.
Uživatelům, kteří mají do webmaster artu daleko, doporučuji pro tyto účely použít prohlížeč. Vzhledem k tomu, že používám Chrome, poskytnu pokyny se snímky obrazovky pro tento konkrétní prohlížeč. Analogicky můžete pracovat s prohlížeči Opera, Yandex.Browser, Mozilla Firefox a další, princip jejich nástrojů je podobný.
Návod 1: jak zobrazit celý HTML kód webu v prohlížeči
Otevřete požadovanou webovou stránku svého webu. Klikněte pravým tlačítkem na požadovaný prvek, zobrazí se kontextová rozbalovací nabídka prohlížeče s dostupnými příkazy:
Obrázek 1. Zobrazení celého HTML kódu webové stránky v prohlížeči Chrome
Důležité: Příkazy v rozbalovací nabídce se mohou lišit například pro aktivní prvky (odkazy, obrázky, videa) a neaktivní (text, pozadí, divs):
Obrázek 2. Rozbalovací nabídka prohlížeče Chrome
Pokud tedy nenajdete požadovaný příkaz, stačí kliknout pravým tlačítkem někam jinam nebo použít klávesové zkratky prohlížeče.
Vraťme se k obrázku 1, ukazuje potřebný příkaz k zobrazení celého HTML kódu zdrojové webové stránky, nazývá se " Zobrazit kód stránky". Klikněte na příkaz, otevře se nová karta s úplným kódem zdrojové webové stránky, velké plus ke všemu - prohlížení je k dispozici se zvýrazněním syntaxe:
Obrázek 3. Fragment kódu tohoto webu
Tento nástroj je velmi užitečný pro vyhledání a úpravu prvků, které hledáte.
Alternativní způsoby zobrazení celého HTML kódu webové stránky
Pro rychlejší přístup můžete použít jiné způsoby volání tohoto nástroje
- Na obrázku 1 také vidíme, že tento příkaz je dostupný pomocí klávesové zkratky
+ ; - Vložte view-source:site do adresního řádku prohlížeče místo mé domény, vložte svou adresu;
Obě metody jsou univerzální a měly by fungovat ve všech prohlížečích.
Zpočátku si někdo může myslet, že to není vůbec nutný nástroj, ale prohlížení celého HTML kódu webu je skvělé pro nalezení potřebných prvků v kódu, mohou to být odkazy, tagy, meta tagy, atributy a další prvky .
Kombinace klávesových zkratek
Obrázek 3. Vyhledávání podle kódu webu
Po zadání požadavku do vyhledávacího formuláře se obrazovka přesune na první nalezený prvek, pomocí šipek se mezi nimi můžete pohybovat a vybrat ten, který potřebujete:
Obrázek 4. Vyhledávání podle kódu stránky HTML
Návod 2: jak zobrazit a upravit HTML a CSS kód webu v prohlížeči Google Chrome
Nyní ta nejdůležitější část, ve které ukážu, jak lze upravovat HTML a CSS kód webu v prohlížeči. poté přeneste změny do prohlížeče.
Tento užitečný nástroj je vždy k dispozici ve vašem prohlížeči experimentujte s dalšími příkazy, které vám usnadní úpravy vašeho webu.
Když si prohlédnete nespočet stránek na internetu, můžete narazit na takové, které se nám opravdu líbí. Okamžitě vyvstává řada otázek. Byl web vytvořen pomocí domácího kódu nebo nějakého CMS? Jaké má CSS styly? Jaké jsou jeho meta tagy? A tak dále.
Existuje mnoho nástrojů, které lze použít k získání informací o kódu webové stránky. Pravé tlačítko myši ale máme vždy po ruce. To je to, co použijeme, jako příklad použijeme můj web.
Jak zobrazit kód stránky?
Chcete-li zobrazit zdrojový kód stránky webu, musíte najet myší na jakoukoli oblast webové stránky (kromě obrázků a odkazů). Poté klikněte pravým tlačítkem myši. Otevře se před námi okno s několika možnostmi (v různých prohlížečích se mohou mírně lišit). V prohlížeči Google Chrome jsou to například tyto příkazy:
- zadní;
- vpřed;
- restartovat;
- uložit jako;
- pečeť;
- překládat do ruštiny;
- zobrazit kód stránky;
- zobrazit kód.
Musíme kliknout zobrazit kód stránky, a otevře se před námi html kód stránky webu.
Zobrazení kódu stránky: na co si dát pozor?
Html kód stránky je tedy očíslovaný seznam řádků, z nichž každý nese informaci o tom, jak je tento web vytvořen. Abyste se rychle naučili rozumět tomuto obrovskému množství znaků a speciálních symbolů, musíte rozlišovat mezi různými částmi kódu.
Například řádky kódu uvnitř značky head obsahují informace pro vyhledávače a webmastery. Nejsou zobrazeny na webu. Zde můžete vidět, na jaká klíčová slova je tato stránka propagována, jak je napsán její název a popis. Také zde naleznete odkaz, pomocí kterého se dozvíme o rodině písem Google používaných na webu.
Pokud je web vytvořen na CMS WordPress nebo Joomla, bude to zde také vidět. Tato oblast například zobrazuje informace o tématu WordPress nebo šabloně webu Joomla. Můžete to vidět přečtením obsahu odkazů zvýrazněných modře. Jeden odkaz zobrazuje šablonu webu.
Například:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Uvidíme CSS styly písem stránky. V tomto případě je použito písmo. To lze vidět zde - rodina písem: 'Source Sans Pro'.
Tato stránka je optimalizována pomocí pluginu Yoast SEO. To lze vidět z této komentované části kódu:
Tento web je optimalizován pomocí pluginu Yoast SEO v3.4.2 – https://yoast.com/wordpress/plugins/seo/
Všechny informace obsažené uvnitř značky body jsou zobrazeny prohlížečem na obrazovce monitoru. Zde vidíme html kód stránky a úplně dole je kód skriptu Yandex Metrics. Je obklopena komentovanou značkou s textem:
/Počítadlo Yandex.Metrika
Pojďme si to shrnout
Po provedení poměrně povrchní analýzy kódu hlavní stránky webu můžeme vyvodit závěr o tom, s jakými nástroji byla tato stránka vytvořena. Viděli jsme na něm:
- CMS WordPress;
- Font Google Source Sans Pro;
- Téma WordPress – Sydney;
- pluginy Yoast;
- Počítadlo metrik Yandex.
Nyní je princip analýzy html kódu webové stránky zcela jasný. Není vůbec nutné mít v prohlížeči otevřenou stránku, kterou zkoumáte. Kód stránky můžete uložit do počítače pomocí kombinace kláves ctrl+a, ctrl+c, ctrl+v. Vložte jej do libovolného textového editoru (nejlépe Notepad++) a uložte s příponou html. Kdykoli ji tak můžete prostudovat hlouběji a najít pro sebe další užitečné informace.
Pravděpodobnost pohledu do iniciály kód web stránky, který prohlížeč obdrží jako výsledek požadavku na server, je dostupný prakticky v každém internetovém prohlížeči. Přístup k odpovídajícímu příkazu je organizován přibližně identicky, existují však značné rozdíly ve způsobu a formě iniciály kód .
Instrukce
1. V prohlížeči Mozilla FireFox rozbalte v nabídce sekci „Zobrazit“ a klikněte na „Počáteční“ kód stránky" Stejná položka je také v kontextové nabídce, která se zobrazí po kliknutí pravým tlačítkem na text stránky. Můžete také použít kombinaci kláves CTRL + U. Mozilla FireFox nepoužívá externí programy - počáteční kód stránky se zvýrazněním syntaxe se otevře v samostatném okně prohlížeče.
2. V aplikaci Internet Explorer klikněte na nabídku Soubor a vyberte Upravit v poznámkovém bloku. Místo názvu Poznámkový blok lze napsat jiný program, který máte v nastavení prohlížeče přiřazen k zobrazení iniciály kód A. Při kliknutí stránky pravým tlačítkem myši se objeví kontextová nabídka, která má také položku, která umožňuje otevřít iniciálu kód stránky v externím programu – „Zobrazit HTML kód A".
3. V prohlížeči Opera otevřete nabídku, přejděte do sekce „Stránka“ a budete mít možnost vybrat položku „Start“ v podsekci „Nástroje pro vývoj“ kód"nebo položka "Počáteční kód rám." K tomuto výběru jsou přiřazeny klávesové zkratky CTRL + U a CTRL + SHIFT + U. V kontextové nabídce vázané na kliknutí stránky klikněte pravým tlačítkem myši, je zde také položka „Initial kód" Opera otevírá zdroj stránky v externím programu, který je přiřazen v OS nebo v nastavení prohlížeče pro úpravu HTML souborů.
4. Prohlížeč Google Chrome má bezpochyby nejlepší organizaci pro prohlížení iniciály kód A. Kliknutím pravým tlačítkem na stránku můžete zvolit zobrazení kód A stránky"a poté se zdrojový kód se zvýrazněním syntaxe otevře na samostatné kartě. Nebo můžete dát přednost řádku „Zobrazit“ ve stejné nabídce kód element“ a prohlížeč na stejné kartě otevře dva další rámce, ve kterých můžete zkontrolovat HTML a CSS kód každý prvek stránky. Prohlížeč bude reagovat na pohyb kurzoru po řádcích kód a zvýraznění prvků na stránce, které odpovídají této části HTML kód A.
5. V prohlížeči Apple Safari rozbalte sekci Zobrazit a vyberte Zobrazit HTML kód A". V nabídce, která se zobrazí po kliknutí pravým tlačítkem otevřít stránky, odpovídající položka se nazývá „Zobrazit zdroj“. Této akci jsou přiřazeny klávesové zkratky CTRL + ALT + U. Počáteční kód se otevře v samostatném okně prohlížeče.
