Kombinácia klávesov zdrojového kódu. Google Chrome - nástroje správcu webu

Spočiatku sa niekomu bude zdať, že to vôbec nie je nevyhnutný nástroj, ale prezeranie celého HTML kódu stránky je skvelé na nájdenie potrebných prvkov v kóde, môžu to byť odkazy, tagy, metaznačky, atribúty a ďalšie prvky.

Kombinácia klávesových skratiek + otvorte vyhľadávacie pole, v prehliadači Chrome sa zobrazí vpravo hore:

Obrázok 3. Vyhľadávanie podľa kódu lokality

Po zadaní dotazu do vyhľadávacieho formulára sa obrazovka presunie na prvý nájdený prvok. Pomocou šípok môžete medzi nimi prechádzať a vybrať požadovaný:

Obrázok 4. Vyhľadávanie podľa HTML kódu stránky

Pokyn 2: Ako zobraziť a upraviť kód HTML a CSS stránok v prehliadači Google Chrome

Teraz najdôležitejšia časť, v ktorej vám ukážem, ako môžete upravovať HTML a CSS webových stránok v prehliadači. potom preneste zmeny do prehliadača.

Takýto užitočný nástroj je vždy k dispozícii vo vašom prehliadači. Experimentujte s ďalšími príkazmi, ktoré vám uľahčia úpravy webu.

Pri prehliadaní nespočetných stránok na internete nájdete niektoré, ktoré sa nám naozaj páčia. Okamžite sa objaví množstvo otázok. Je web vytvorený pomocou vlastnoručného kódu alebo nejakého CMS? Aké sú jeho štýly CSS? Aké sú jeho metaznačky? A tak ďalej.

Existuje mnoho nástrojov, ktoré možno použiť na získanie informácií o kóde webovej stránky. Ale vždy po ruke máme pravé tlačidlo myši. Použijeme to na príklade môjho webu.

Ako zobrazím kód stránky?

Ak chcete zobraziť zdrojový kód webovej stránky, musíte umiestniť kurzor myši na ľubovoľnú oblasť webovej stránky (okrem obrázkov a odkazov). Potom kliknite pravým tlačidlom myši. Pred nami sa otvorí okno s niekoľkými možnosťami (v rôznych prehľadávačoch sa môžu mierne líšiť). Napríklad v prehliadači Google Chrome sú to tieto príkazy:

• späť;
• dopredu;
• reštartovať;
• uložiť ako;
• tlač;
• preložiť do ruštiny;
• zobrazenie kódu stránky;
• zobraziť kód.

Musíme kliknúť na zobrazenie kódu stránkya otvorí sa pred nami html kód webovej stránky.

Zobrazenie kódu stránky: čo hľadať?

HTML kód stránky teda predstavuje očíslovaný zoznam riadkov, z ktorých každý obsahuje informácie o tom, ako je tento web vytvorený. Aby ste sa rýchlo naučili porozumieť tomuto obrovskému počtu znakov a špeciálnych znakov, musíte rozlišovať medzi rôznymi časťami kódu.

Napríklad riadky kódu vo vnútri značky head obsahujú informácie pre vyhľadávače a správcov webových stránok. Nie sú zobrazené na webe. Tu vidíte, podľa akých kľúčových slov je táto stránka propagovaná, ako je napísaný jej názov a popis. Tiež tu nájdete odkaz, kliknutím na ktorý sa dozvieme o rodine fontov Google použitých na tomto webe.

Ak je stránka vytvorená na serveri CMS WordPress alebo Joomla, zobrazí sa tu tiež. Táto oblasť napríklad zobrazuje informácie o téme WordPress alebo šablóne webu Joomla. Môžete to vidieť tak, že si prečítate obsah odkazov zvýraznených modrou farbou. Jeden odkaz zobrazuje šablónu webu.

Napríklad:

//fonts.googleapis.com/css?family\u003dSource+Sans+Pro%3A400%2C400italic%2C600&ver\u003d4.5.3

Uvidíme štýly písma CSS pre stránku. V takom prípade sa použije písmo. Môžete to vidieť tu - font-family: 'Source Sans Pro'.

Táto stránka sa optimalizuje pomocou doplnku Yoast SEO seo. To je zrejmé z tejto komentovanej časti kódu:

Táto stránka je optimalizovaná pomocou pluginu Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Všetky informácie vo vnútri štítku tela zobrazuje prehliadač na obrazovke monitora. Tu vidíme html kód stránky a úplne dole je kód skriptu Yandex Metrics. Je zabalený do komentovanej značky s textom:

/Yandex.Metrika počítadlo

Zhrnutie

Po vykonaní dosť povrchnej analýzy kódu hlavnej stránky webu môžeme konštatovať, pomocou ktorých nástrojov bola táto stránka vykonaná. Videli sme na tom:

• CMS WordPress;
• Zdroj písma Google Sans Pro
• téma WordPress - Sydney;
• yoast pluginy;
• počítadlo metrík Yandex.

Princíp analýzy html kódu webovej stránky je teraz celkom jasný. Prehliadaná stránka nie je vôbec nevyhnutná v prehliadači. Kód stránky môžete uložiť do počítača pomocou kombinácií kláves ctrl + a, ctrl + c, ctrl + v. Vložte ho do ľubovoľného textového editora (najlepšie Notepad ++) a uložte ho s príponou html. Kedykoľvek si to teda môžete hlbšie preštudovať a nájsť pre seba ďalšie užitočné informácie.

Vydali sme novú knihu „Obsahový marketing na sociálnych sieťach: Ako sa dostať do povedomia predplatiteľov a zamilovať sa do svojej značky“.

Zdrojový kód webu je zbierka značiek HTML, štýlov CSS a JavaScriptu, ktoré prehliadač dostane z webového servera.

Ďalšie videá na našom kanáli - naučte sa internetový marketing so SEMANTICOU

Dá sa to porovnať so súborom príkazov, ktoré vojakom vydal veliteľ. Predstavte si, že publikum nemôže šéfa vidieť ani počuť. Z ich pohľadu armáda vykonáva akcie nezávisle. V našom prípade je veliteľom prehliadač, príkazy zdrojový kód a pochodujúci vojaci sú konečným výsledkom.

Stránka je uložená na webovom serveri, ktorý stránku odosiela na žiadosť používateľa. Žiadosť je napísanie adresy URL do panela s adresou, kliknutie na odkaz alebo kliknutie na tlačidlo odoslať vo formulári. Nezáleží na tom, v akom jazyku sú webové stránky napísané, či obsahujú kód. Konečným výsledkom každého algoritmu na strane servera je sada html značiek a textu.
Zdrojovým kódom stránky je množina údajov, ktorá obsahuje:

• značenie html;
• odkaz na štýl alebo odkaz na súbor;
• programy napísané v JavaScripte alebo odkazy na súbory s kódom.

Tieto tri časti spracováva prehliadač. Pre server je to iba text, ktorý je potrebné odoslať ako odpoveď na žiadosť.

Prečo asi budeme musieť preštudovať zdrojový kód

Všetko, čo vidíme, môžeme analyzovať a aplikovať na riešenie určitých problémov, ktoré vzniknú v priebehu práce so stránkou, najmä pri jej optimalizácii. Pri pohľade na zdrojový kód môžeme:

• Prezrite si metaznačky vlastnej alebo cudzej stránky a analyzujte ich.
• Prezrite si prítomnosť alebo neprítomnosť niektorých prvkov na webe: počítadlá, identifikačné kódy v rôznych systémoch, určité skripty a ďalšie.
• Zistite parametre prvkov: veľkosti, farby, písma.
• Na stránke nájdete cestu k fotografiám a ďalším položkám.
• Preskúmajte odkazy na stránke.
• Nájdite problémy s kódom, ktoré zasahujú do procesu optimalizácie webových stránok: štýly nezahrnuté v samostatných súboroch, skripty, neplatný kód.

Toto sú základné funkcie, ale v skutočnosti znalosť čítania kódu vám môže pomôcť dozvedieť sa o stránke oveľa viac.

Ako zobraziť zdrojový kód stránky

Prehliadač to nemôže robiť úplne vo forme, v akej je zverejnený na serveri. Všetky značky však môžete zobraziť kliknutím pravým tlačidlom myši na stránku. Ďalej na príklade prehliadača Google Chrome.

Vyberieme možnosť „Zobraziť kód stránky“ a získame celý zoznam na samostatnej karte.

Je to len text, ktorý bude treba analyzovať, aby ste mu porozumeli. Interaktívny kód však môžete získať pomocou vývojárskych nástrojov.

Ako nájsť zdrojový kód webovej stránky

Kliknite na ikonu ponuky v prehliadači. Najčastejšie sa nachádza vpravo a vyzerá ako tri bodky alebo pruhy.

V sekcii ďalšie nástroje vyberte možnosť „Nástroje pre vývojárov“.

Otvorí sa okno s aktívnym stavom kódu. To znamená, že keď kliknete na označenie, štýl prvku sa zobrazí vedľa neho a vybrané bloky sa zvýraznia na stránke.

Na karte „Zdroj“ môžete zobraziť obsah niektorých súborov: skripty, písma, obrázky.

Kontrola certifikátu stránky je k dispozícii na karte „Zabezpečenie“.

Záložka „Audity“ pomôže skontrolovať zdroj zverejnený na hostiteľskom serveri.

Ak je umiestnenie panela vpravo nepohodlné, môžete kliknúť na tri bodky a zmeniť to výberom požadovanej položky.

Ako zobraziť metaznačky

Každý html dokument obsahuje značky štruktúry. Tu sú niektoré z nich:

1. Html - celý dokument.
2. Hlavná časť hlavičiek služieb.
3. Titul - nadpis stránky (zobrazený na karte).
4. Body - telo dokumentu.
5. H1-H6 - hlavičky textu stránky.
6. Článok - článok.
7. Sekcia - sekcia.
8. Menu - menu.
9. Div - blok.
10. Span je reťazec.
11. P - odsek.
12. Stôl - stôl.

Prvky sú určené na logické vymedzenie častí stránky, v prípade potreby majú štýl. Obsahujú text, ktorý je nejako viditeľný na stránke. Značka Head ale obsahuje servisné informácie. Na ich označenie sa používajú metaznačky. Všetko, čo je v nich napísané, je určené pre server a vyhľadávače.

Ich obsah nemožno rozpoznať iným spôsobom.

Venujme pozornosť značke Link. Poskytuje odkazy na externé súbory na zahrnutie. Ak je to potrebné, môžete vidieť obsah a uložiť na disk. Urobíte to tak, že umiestnite kurzor myši na adresu a stlačte RMB. Vyberte možnosť „Otvoriť na novej karte“.

Zadaný súbor sa otvorí na novej karte a je možné ho zobraziť alebo uložiť.

Ako zobraziť zdrojový kód stránky na ladenie skriptu

V takom prípade je najvýhodnejšie otvoriť stránku na lokálnom počítači. Ak potrebujete opraviť iba označenie, štýly a skripty, môžete to urobiť priamo z priečinka. Rovnakým spôsobom sa pozerá na html kód. Chyby kódu JavaScript však môžete vidieť na karte „Konzola“. Zobrazuje popis chyby a číslo riadku, v ktorom sa vyskytla.

Syntax je viditeľná priamo v kóde. K tomu je určená karta „Zdroj“.

Ako zobraziť kód konkrétnej položky

Pre veľké stránky s množstvom prvkov je ťažké nájsť požadovaný kód v celom označení. V takom prípade použite špeciálny príkaz kontextovej ponuky. Podržte myš nad fragmentom a stlačte RMB. Vyberieme príkaz „Zobraziť kód“.

Otvorí sa rovnaké okno, ale so zameraním na vybraný objekt.

Zhrnutie

Povedali sme vám, čo je zdrojový kód stránky. Postačí osvojiť si základné znalosti HTML a CSS a pomocou pohodlných vývojárskych nástrojov budete môcť ladiť svoje vlastné html dokumenty.

Prezeranie zdrojového kódu na internete vám umožní poučiť sa nielen z vlastných skúseností, ale aj použiť skutočné príklady z praxe. A pre seo špecialistov budú užitočné metaznačky, ktorých informácie môžu povedať veľa o tejto stránke.

„. Rovnaká položka sa nachádza v kontextovej ponuke, ktorá sa zobrazí po kliknutí pravým tlačidlom myši na text strán... Môžete tiež použiť klávesovú skratku CTRL + U. Mozilla FireFox nepoužíva externé programy - originál kód strán so zvýraznením syntaxe sa otvorí v samostatnom okne prehliadača.

V prehliadači Internet Explorer kliknite v ponuke na časť Súbor a vyberte možnosť Upraviť v poznámkovom bloku. Namiesto názvu Poznámkový blok môže byť napísaný iný, ktorý ste v nastaveniach prehliadača priradili zobrazeniu originálu kóda. Po kliknutí strán kliknutie pravým tlačidlom myši na kontextovú ponuku, ktorá má tiež položku umožňujúcu otvorenie originálu kód strán v externom programe - „Zobraziť HTML- kóda „.

V prehliadači Opera otvorte ponuku, prejdite do sekcie „Stránka“ a v podsekcii „Vývojové nástroje“ budete môcť zvoliť „Zdroj“ kód„Alebo položka„ Počiatočné kód rám “. Tomuto výberu sú priradené skratky CTRL + U a CTRL + SHIFT + U. V kontextovej ponuke prepojenej s kliknutím strán pravým tlačidlom myši, je tu aj položka „Počiatočné kód„. Zdroj Opera strán v externom programe, ktorý je priradený v OS alebo v nastaveniach prehliadača na úpravu súborov HTML.

Prehliadač Google Chrome má bezpochyby najlepšiu organizáciu prezerania zdroja kóda. Kliknutím pravým tlačidlom myši môžete zvoliť Zobraziť kóda strán„A potom sa zdroj so zvýraznením syntaxe otvorí na samostatnej karte. Alebo môžete zvoliť riadok „Zobraziť kódprvok “a na tej istej karte otvorí ďalšie dva rámce, v ktorých môžete prehliadať HTML a CSS kód prvok strán... Prehliadač bude reagovať na pohyb kurzora po riadkoch kóda, zvýraznenie prvkov na stránke, ktoré zodpovedajú tejto časti HTML- kóda.

Možnosť nahliadnuť do úvodnej kód web strán , ktorý prehliadač prijal na základe požiadavky na server, sa v skutočnosti nachádza v každom internetovom prehliadači. Prístup k príslušnému príkazu je organizovaný približne rovnakým spôsobom, existujú však značné rozdiely v tom, v akej metóde a v akej podobe sa vám zobrazí úvodná kód .

Inštrukcie

1. V prehliadači Mozilla FireFox otvorte v ponuke sekciu „Zobraziť“ a kliknite na „Počiatočné“ kód strán „. Rovnaká položka sa nachádza aj v kontextovej ponuke, ktorá sa zobrazí po kliknutí pravým tlačidlom myši na text strán ... Je tiež povolené používať kombináciu klávesov CTRL + U. Mozilla FireFox nepoužíva externé programy - počiatočné kód strán so zvýraznením syntaxe sa otvorí v samostatnom okne prehliadača.

2. V prehliadači Internet Explorer kliknite v ponuke na časť Súbor a vyberte možnosť Upraviť v poznámkovom bloku. Namiesto názvu Poznámkový blok môžete napísať iný program, ktorý ste priradili v nastaveniach prehľadávača na zobrazenie pôvodného názvu kód a. Po kliknutí strán kliknutie pravým tlačidlom myši na kontextovú ponuku, ktorá obsahuje aj položku umožňujúcu otvorenie počiatočnej položky kód strán v externom programe - „Zobraziť HTML- kód a „.

3. V prehliadači Opera otvorte ponuku, prejdite do sekcie „Stránka“ a budete mať možnosť uprednostniť položku „Počiatočné“. kód „Alebo položka„ Počiatočné kód rám “. Tomuto výberu sú priradené klávesové skratky CTRL + U a CTRL + SHIFT + U. V kontextovej ponuke pripojenej ku kliknutiu strán pravým tlačidlom myši, je tu aj položka „Počiatočné kód „. Opera otvára zdroj strán v externom programe, ktorý je priradený v OS alebo v nastaveniach prehliadača na úpravu súborov HTML.

4. Prehliadač Google Chrome má bezpochyby najlepšiu organizáciu prehliadania ako pôvodný kód a. Kliknutím pravým tlačidlom myši na stránku môžete uprednostniť možnosť Zobraziť kód a strán „A potom sa zdroj so zvýraznením syntaxe otvorí na samostatnej karte. Alebo môžete uprednostniť riadok „Zobraziť kód prvok “a prehliadač na tej istej karte otvorí dva ďalšie rámce, v ktorých môžete skontrolovať HTML a CSS kód akýkoľvek prvok strán ... Prehliadač bude reagovať na pohyb kurzora po riadkoch kód a, zvýraznenie prvkov na stránke, ktoré zodpovedajú tejto časti HTML- kód a.

5. V prehliadači Apple Safari rozbaľte sekciu „Zobraziť“ a vyberte riadok „Zobrazenie HTML- kód a „. V ponuke, ktorá sa zobrazí po kliknutí pravým tlačidlom myši na otvorenú položku strán , má zodpovedajúca položka názov „Zobraziť zdroj“. K tejto akcii je priradený horúci kláves CTRL + ALT + U. kód sa otvorí v samostatnom okne prehľadávača.