Ako rýchlo nájsť požadovaný kúsok kódu v súboroch šablón a pluginov. Ako rýchlo otvoriť kód stránky v prehliadači, aj keď je kopírovanie zakázané

  • 30.07.2019

Každý používateľ internetu má svoje obľúbené stránky, na ktorých trávi dlhý čas. A len lenivých nenapadlo vidieť, ako to vzniklo a z čoho pozostáva. Nebude možné odpovedať na všetky tieto otázky, pretože existuje veľa spôsobov, ako vytvoriť stránku, ale pozrieť sa na príkazy a kódy, z ktorých pozostáva, je možné a verejne dostupné pre každého.

Ďalšou otázkou je, či človek, ktorý sa nevenuje programovaniu, bude rozumieť niektorému zo symbolov, ktoré tvoria kód. Ale z príkladov, ktoré budú umiestnené nižšie, bude môcť zobraziť každý používateľ prehliadača Google Chrome jednotlivé prvky stránky.

Ako zobraziť zdrojový kód html stránky v prehliadači od Google

Aby ste mohli vidieť kód stránky v prehliadači Chrome, musíte prejsť na stránku, ktorá vás zaujíma, a postupovať podľa týchto krokov:


Tieto dva body sa od seba líšia funkčnosťou a informačnou hodnotou pre používateľa, programátora či hackera.

Aký je rozdiel medzi kódom stránky a iba príkazom „Zobraziť kód“.

Analýzou každej z týchto funkcií môžete napísať samostatný článok. Pre programátorov je tento rozdiel významný a chápu, v ktorých prípadoch je potrebné použiť „Zobraziť kód“ a v ktorých „Zobraziť kód stránky“ v prehliadači Google Chrome.

Pre bežného používateľa však môžete tieto funkcie rozdeliť do nasledujúcich úloh:

  1. "Zobrazenie kódu stránky" je potrebné iba na zobrazenie hlavnej kombinácie stránky. V podstate ide o štruktúru stránky (bez ďalších modelov vo forme CSS súborov a iných doplnkov, ktoré zostali v priečinku tvorcu stránky). Táto štruktúra nie je vhodná na vytváranie vlastnej stránky „copy-paste“, ale umožní vám vidieť, čo presne programátor urobil a v akom poradí, aby stránka v prehliadači Google Chrome mala takýto vonkajší dizajn.
  2. Zobraziť kód zobrazuje podrobnú štruktúru zvýrazňujúcu všetky oblasti, ktoré sú na stránke ovplyvnené. Ak umiestnite kurzor myši na konkrétny kód zoznamu, zvýrazní sa prvok na stránke, do ktorého patrí.
  3. Zobrazenie kódu stránky sa otvorí v samostatnom prehliadači bez možnosti jeho úpravy. To znamená, že je vhodný iba na kopírovanie a čítanie kódu stránky. Ale toto je rovnako užitočná funkcia.
  4. "Zobraziť kód" je meniteľný a môžete upraviť ľubovoľný prvok, ako vám to vyhovuje. Všetky tieto zmeny budú, samozrejme, „živé“, kým sa stránka neobnoví, ale niekedy je zábavné preliezť tieto nastavenia a pochopiť, na čo je tá alebo oná hodnota určená a čo sa stane, ak ju zmeníte. Nepredpokladajte, že tým poškodíte seba alebo stránku – tieto zmeny sú platné iba v kóde vášho prehliadača Google Chrome a neprechádzajú online.

Zvážte otázku, ako zobraziť kód prvku

Ak máme odpovedať na takúto otázku, potom sa ponúka iba variant s príkladom. Pretože v jednom článku je veľmi ťažké stať sa človekom, ktorý bude tejto téme rozumieť (web developer), ale ukázať príkladom, aby bola otázka vyriešená, je oveľa jednoduchšie.

Funkčnosť kódu prvku je veľmi široká, preto preberáme jedno zo slov na stránke prehliadača Google Chrome. Chceli sme zvážiť, aké kľúčové slová (v kóde to bude napísané ako „keywords“) boli použité pre našu stránku. Aby sme to dosiahli, vykonáme nasledujúci algoritmus:

Iné spôsoby použitia tejto funkcie v prehliadači Google Chrome

Vo všeobecnosti, pokračujúc v odpovedi na otázku, ako zobraziť kód prvku a prečo je potrebný, by ste mali uviesť jeho funkcie. Konkrétne vďaka možnosti zobraziť kód prvku ľubovoľnej stránky v prehliadači Google Chrome môžeme:

  • Pozrite si štruktúru stránky začínajúcu od head ("hlavička stránky") a končiacu end (posledný príkaz akéhokoľvek programu);
  • Pozrite si všetky funkcie stránky, konkrétne: odkazy na iné stránky, dodatočné moduly z externých stránok a prítomnosť vstavaných počítadiel na zhromažďovanie rôznych informácií;
  • Zistite, či je kopírovanie zo stránky zakázané alebo nie;
  • Kód bude obsahovať všetky odkazy na ďalšie stránky webu, ako aj ich dizajn a následné akcie po kliknutí na ne.

Toto nie je ani zďaleka konečný zoznam. Treba však pripomenúť, že bez špeciálnych znalostí je takmer nemožné „prečítať“ kód stránky Google Chrome a získané údaje sú pre bežného používateľa prakticky zbytočné.

Položka „Zobraziť kód položky“ nefunguje

Hneď by sa malo povedať, že každá lokalita bude mať otvorený prístup ku kódom prvkov. To znamená, že aj tie najpopulárnejšie a najdrahšie stránky budú otvorené na zobrazenie ich kódu. Ak teda položka v prehliadači Google Chrome nie je aktívna alebo zobrazuje chybu, môže to mať tieto možné dôvody:

  • Používateľský profil je poškodený;
  • Prítomnosť škodlivého softvéru v počítači;
  • Blokovanie s konkrétnym rozšírením na zvýšenie výkonu (aj toto môže byť).

Oprava poškodeného používateľského profilu

Ak chcete vytvoriť nový profil, musíte odstrániť starý z počítača. Ak to chcete urobiť, postupujte takto:

  1. Zatvorte prehliadač Google Chrome a spustite vstavaný prehliadač Windows Explorer.
  2. Do panela s adresou zadajte nasledujúci príkaz: % LOCALAPPDATA% \ Google \ Chrome \ User Data \.
  3. Keď sa adresár otvorí, vyhľadajte priečinok „Default“ a pridajte k jeho názvu „Backup“, čím získate nasledovné: „Backup Default“.
  4. Teraz po reštartovaní prehliadača Chrome sa vytvorí nový profil.

Odstraňujeme malvér alebo jeho zvyšky

Ak nám nový profil neumožnil prístup ku kódu prvku stránky a stále sa nám zobrazuje chyba, mali by sme urobiť nasledovné:

  1. Otvorte príkazový riadok systému Windows ("Spustiť") a zadajte tam príkaz "cmd".
  2. Do riadku zadajte nasledujúci príkaz: RD / S / Q "% WinDir% \ System32 \ GroupPolicyUsers".
  3. Po potvrdení akcie prejdeme v tomto: RD / S / Q "% WinDir% \ System32 \ GroupPolicy".
  4. Teraz "gpupdate / force" (bez úvodzoviek).

Ak bolo všetko vykonané správne, potom po reštartovaní počítača Google Chrome otvorí kód prvku a prehliadač bude fungovať normálne.

Veľkosť a farba niektorých dôležitých prvkov blogu, ako je názov blogu alebo príspevku, tag viac a podobne. Potrebný kód som hľadal manuálne, experimentoval som s testovacou doménou, na základe ktorej bol neskôr napísaný článok.

A nedávno som potreboval zmeniť farbu odkazov. Keď som nahodil kopu literatúry o tejto problematike, uvedomil som si jednoduchú vec: každý uvádza príklady zo svojich vlastných šablón, ale každý máme iné šablóny a je dobré, ak je kód z príkladu čo i len trochu podobný: nie som fňukanie, ešte to nájdem kotúľaním - metódou tykať.

Číslo neprešlo referenčným kódom. Všetky ukazovali úplne iné cesty. Zaujímalo by ma, či existuje jednoduchý a presný nástroj, ako nájsť požadovaný html kód na ľubovoľnej stránke. Pre mnohých blogerov, dokonca aj so skúsenosťami, je ťažké mierne upraviť šablónu. Nie je na tom nič zlé, pretože každý má svoje záujmy a ciele pre tvorbu webstránky.

Ak chcete urobiť malé zmeny v šablóne, napr zmeniť akýkoľvek nadpis, nadpis článkov a nadpisov, farbu a veľkosť písma a odkazov, zvyčajne stačí naučiť sa jednoduchý princíp, o ktorom sa hovorí v tomto článku. Sú ale aj zložité prípady, ktoré si vyžadujú buď hlbšie štúdium html a css, alebo pomoc odborníka.

Jedného dňa ma priateľ požiadal, aby som zistil, kde zmeniť farbu záhlavia v jeho šablóne. Téma bola nahraná do testovacej subdomény. Nastavenia tohto prvku neboli uložené v style.css, ale v inom súbore, takže ho daná osoba nemohla nájsť.

Ako nájsť a zmeniť html a css kód stránky

Ak nemáte radi dlhé články, pre vás na konci článku video tutoriál, ktorý hovorí, ako môžete vidieť html kód stránky pomocou programu Poznámkový blok ++ a ako vykonať zmeny v dizajne ľubovoľnej šablóny pomocou príkladu zmeny farby písma. Vo videu sú ďalšie jemnosti spracovania blogu. A pre tých, ktorým je text bližšie a zrozumiteľnejší, nižšie je podrobný rozbor témy so screenshotmi.
httpv: //youtu.be/uIlVvwCt2ho

Termíny a pojmy

Presnejšie by bolo článok nazvať „ Ako nájsť css kód“, Ale rozhodol som sa zostať pri „nesprávnom“ názve, pretože odpoveď na túto otázku sa v podstate hľadá v html. CSS a HTML sú veľmi odlišné veci, hoci sú to dve časti toho istého systému. Na internete je veľa technických článkov, tu nám postačí, aby sme pochopili, že:

  • Html- zodpovedá za štruktúru stránky (čo nasleduje po čom, v akom poradí atď.). Toto je základ, na ktorom je stránka postavená. Ak to porovnáme s domom, tak toto je jeho dispozícia, usporiadanie miestností.
  • CSS- zodpovedá za dizajn (aké fonty, veľkosti, farby a podobne). Toto je všeobecný štýl domu a štýl jeho jednotlivých izieb: aké budú tapety, lampy, záclony, nábytok. Preto dokument, v ktorom je css kódy, nazývaný "štýlová šablóna"

A ak by vás zaujímalo, ako zmeniť napríklad farbu nadpisu stránky, veľkosť písma v textoch či farbu nadpisov v bočnom paneli, tak toto všetko treba hľadať v CSS štýloch. Toto je jediná vec, ktorú stojí za to pochopiť, aby ste mohli sami vykonať zmeny v kóde.

Rád premieňam zložité na jednoduché. Pamätám si, že kedysi dávno, keď som mal svoje prvé auto, bolo veľmi staré, zhnité rozvody, často vyhorené poistky a zakaždým som ho ťahal do servisu. Predstavte si, koľko peňazí bolo vyhodených, napriek tomu, že nezávislá náhrada, ako sa ukázalo, stojí cent.

Raz som sa pozrel, čo robí pán. Stále neviem ako funguje poistka. Ale viem, kde to zmeniť). Sám by som motor neopravil a vymeniť poistku nie je ťažké. Rovnako je to aj s webovými stránkami.

Ak sa nechcete stať programátorom, potom nie je potrebné hlboké pochopenie programovania. Stačí jasne pochopiť, čo je na čo určené, kde to hľadať a ako to zmeniť. Je lepšie zmeniť, čo sa dá, a zvyšok nechať na špecialistov. Článok obsahuje užitočný odkaz na túto tému.

Musím byť odborník na všetko

V seo blogoch sa často diskutuje o tom, či začiatočník potrebuje rozumieť html do hĺbky, alebo ešte lepšie - naučte sa písať webstránky sami, aby bolo všetko jedinečné.. No neviem - každému svoje, a potom kto je niekomu bližšie. Zaujíma ma to trochu viac, takže teraz sa dodatočne učím od Vladimíra. V novembri tohto roku si Vladimír otvoril vlastný blog. Jeho blog je robený na najjednoduchšej, bezplatnej šablóne, len si ho pre seba mierne upravil.

Po 10 dňoch existencie sa blog umiestnil na 104. mieste v rebríčku všetkých stránok na Runete s návštevnosťou asi 1,5 tisíc ľudí za deň. Za 10 dní. Tak aká je dohoda? Vladimír sa dobre vyzná v html, vie si objednať a kúpiť unikátnu šablónu. Takže by ste to mali pochopiť tajomstvo nespočíva v šablónach, ale v užitočnosti informácií.

Kde sa skrýva html kód

Ospravedlňujeme sa za odbočenie, späť k našim kódom). Povedzme, že chcete zmeniť farbu písma názvu blogu. Uvažujme o tom na príklade mojej testovacej stránky.

  1. Otvorenie stránky v prehliadači Google Chrome (ak ho ešte nepoužívate, nainštalujte si ho – je dobre nabrúsený na prácu s webmi, má veľa vstavaných nástrojov).
  2. Umiestnite kurzor myši na prvok, ktorý sa chystáme zmeniť ... V tomto prípade názov blogu. Kliknite naň "pravým" myšou a v zobrazenom okne zvoľte ZOBRAZIŤ KÓD PRVKU.

DÔLEŽITÉ: nezamieňajte s KÓDOM STRÁNKY NA ZOBRAZENIE! Teraz nepotrebujeme celú stránku, len jeden prvok.

Kliknite naň - v spodnej časti prehliadača sa zobrazí okno na zobrazenie kódu:

Riadok kódu, ktorý meníme, je zvýraznený červenou farbou.

Ale oblasť zvýraznená modrou obsahuje to, čo hľadáme. Tu môžete nájsť presný (a nie približný) riadok kódu zodpovedný za písma, farbu, veľkosť, dôraz a ďalšie. Týmto spôsobom môžete zistiť AKÝKOĽVEK kód akéhokoľvek prvku akejkoľvek šablóny.

Nájdite požadovaný riadok v bloku zvýraznenom modrou farbou. Vpravo je posuvník, môžete posúvať a nájsť požadovaný riadok.

Všeobecný princíp, kde sa čo hľadá:

Názov písma - v riadku FONT FAMILY

Veľkosť písma - v riadku VEĽKOSŤ PÍSMA

Farba písma - v riadku COLOR

Existujú tri hlavné riadky, ktoré menia názov, veľkosť a farbu písma ľubovoľného prvku. Vpravo v riadku štýlu css je uvedená pozícia riadku v dokumente. Ak potrebujete zmeniť nejaký iný prvok (napríklad potrebujete zistiť, kde sa nachádza riadok, v ktorom môžete zmeniť farbu panela s ponukami alebo farbu odkazov), všetko sa robí úplne rovnakým spôsobom.

POZOR:

riadok, ktorý budeme kopírovať, je na obrázku zvýraznený červenou farbou,

aby ste ho neskôr našli v šablóne so štýlmi.

4. Skopírujte riadok... Keďže v tomto príklade chceme zmeniť farbu názvu stránky, skopírujem čiaru na druhom obrázku zvýraznenú červeným obdĺžnikom. V mojej šablóne je zodpovedná za zmenu farby názvu stránky:

#header h1 a, #header h1 a: navštívené (

Nájdite požadovaný riadok v súbore „štýlov (style.css)“. Toto sa už robí v administračnom paneli. Dôrazne žiadam, aby ste vykonali všetky experimenty na testovacej subdoméne s cieľom vylúčenia, hoci neexistuje žiadna dôvera a úplné pochopenie.

Prejdite teda na panel správcu: KONZOLA - VZHĽAD - REDAKTOR. V pravom bočnom paneli nájdeme súbor STYLE TABLE (STYLE.CSS), otvoríme ho.

Teraz otvorte panel vyhľadávania pomocou kláves CTRL + F: v hornom okne sa zobrazí prázdny riadok okna. Vložíme do nej riadok, ktorý sme skopírovali v kroku 4.

A uvidíte, ako je tento riadok zvýraznený v šablóne štýlov (na obrázku - oranžovo):

Urobíme zmenu prvku. V našom prípade meníme farbu písma, teda do riadku COLOR dosadíme inú hodnotu - farbu akú chceme. V príklade je farba čierna, jej hodnota:

Farbu si môžete vybrať v ktorejkoľvek službe paliet webových farieb: do vyhľadávača zadajte "Paleta webových farieb" a vyberte si tú, ktorú chcete. Vyberte si farbu, skopírujte jej digitálnu hodnotu a opatrne ju nahraďte starou. potom kliknite na AKTUALIZOVAŤ SÚBOR a prejdite a pozrite sa, čo sa stalo.

Ak sa zmeny nezobrazili, za poslednú hodinu a potom znova prejdite na stránku - tentoraz by sa malo zobraziť všetko.

Je to opísané dlho, ale v praxi sa všetko robí rýchlo, najmä keď sa objaví počiatočná zručnosť.

Podrobnejšie, ako zmeniť určité prvky:

To je na dnes všetko, už vás nebudem mučiť kódmi. Dúfam, že teraz môžete sami ľahko nájsť a zmeniť akýkoľvek prvok html kódu, alebo skôr css kódu - odborníci mi prepáčia za zjednodušenie. A ak nerozumiete, navštívte stránku rovnako. Nestrácajte čas hlúposťami.

Navrhujem pozrieť si video Artema Abramoviča o tom, ako hľadať a nájsť v ľubovoľnej téme / šablóne, pre ľubovoľný nástroj (wordpress, joomla atď.) akékoľvek slovo alebo prvok a nahradiť ho tým, čo potrebujete:

Ak sa vám páči, zdieľajte:

Možno vás bude zaujímať viac informácií:


Tento najnovší článok bol napísaný s cieľom poskytnúť vám aktuálne informácie o odstraňovaní nechcených odkazov zo šablón Blogspot, ako aj o nových témach Blogger. Ako viete, v roku 2018 došlo k zmenám v kódoch služby Blogger, takže veľa akcií s kódom je potrebné vykonať novým spôsobom. Navyše sa objavili nové témy, ktoré sa formujú inak. V súvislosti s týmito zmenami rozoberieme tému odstraňovania odkazov.
Vo svojom blogu môžete skontrolovať externé odkazy na služby https://pr-cy.ru/link_extractor/ a https://seolik.ru/links. Nezabudnite skontrolovať nielen domovskú stránku blogu, ale aj príspevky (príspevky) a stránky (Stránka). Veľký počet externých odkazov otvorených na indexovanie sa neodporúča.

Ako odstrániť odkazy zo starej predvolenej šablóny Blogger

Ako príklad použite jednoduchú šablónu.
Tieto šablóny poskytujú najviac prichádzajúcich odkazov. Keď som si na svojom testovacom blogu nainštaloval jednoduchú tému, skontroloval som ju a na domovskej stránke som našiel 25 prichádzajúcich odkazov, z ktorých 14 bolo indexovaných.
Pripomínam, že pred vykonaním zmien v kóde šablóny si vytvorte zálohu!
  1. Odstrániť odkaz na Blogger – https://www.blogger.com/. Tento odkaz je priložený v miniaplikácii Atribúcia. Na karte Návrh blogu sa zobrazuje ako modul gadget Pripisovanie a. Ak ho chcete odstrániť, prejdite na kartu „Motív“ -> zmeniť kód HTML. Vyhľadaním miniaplikácií (zoznam miniaplikácií) nájdite Attribution1 a vymažte celý kód spolu so sekciou päty, v ktorej je uzavretý. Takto vyzerá zbalený kód na odstránenie:


    A tu je úplný kód:














    Zmeny uložíme a skontrolujeme, či sa v blogu nenachádza atribúcia.
  2. Na svojom blogu ste už určite videli ikony Wrench a Screwdriver pre rýchlu úpravu widgetov. Každá takáto ikona nesie so sebou externý odkaz na Blogger. Teraz sú uzavreté značkou nofollow, no stále sa ich musíte zbaviť. Widgety budete upravovať na karte Návrh.
    Tu je čiastočný zoznam odkazov, ktoré sú zašifrované v ikonách kľúča (ID blogu bude vaše)
    – miniaplikácia HTML1: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML1&action=editWidget§ionId=header
    - miniaplikácia HTML2 http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=HTML&widgetId=HTML2&action=editWidget§ionId=header
    - Archív blogu: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=BlogArchive&widgetId=BlogArchive1&action=editWidget§ionId=main
    - Skratky blogu: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=Label&widgetId=Label1&action=editWidget§ionId=main
    - Populárne príspevky: http://www.blogger.com/rearrange?blogID=1490203873741752013&widgetType=PopularPosts&widgetId=PopularPosts2&action=editWidget§ionId=main
    Všetky tieto odkazy sa dajú ľahko zbaviť. Nájdite značku v šablóne blogu ... Zobrazí sa toľkokrát, koľkokrát je na vašom blogu miniaplikácií. Odstráňte všetky výskyty značky .
  3. Odstráňte odkazy na rýchlu úpravu blogového príspevku (ikona „ceruzka“). Uľahčuje úpravu príspevkov, ale predstavuje hrozbu ako externý odkaz formulára: https://www.blogger.com/post-edit.g?blogID=1490203873741752013&postID=4979812525036427892&from=pencil
    Ako odstrániť:
    Metóda 1. Na karte Návrh upravte položku „Príspevky blogu“ a zrušte začiarknutie políčka „Zobraziť“ Rýchle úpravy.
    Metóda 2. nájsť značku v šablóne blogu a odstráňte ho. Uložte zmeny a skontrolujte svoj blog, či neobsahuje ikonu a odkaz.
  4. Odstrániť Navbar. Vyhľadajte miniaplikácie v html šablóne blogu navbar1 a odstráňte všetok kód spolu so sekciou.

    menovite:









    Teraz Navbar v blogu neposkytuje indexované externé odkazy, ale verím, že ide o ďalší prvok, ktorý nenesie funkčné zaťaženie a je lepšie ho odstrániť.
  5. Odstráňte externé odkazy na obrázky. Keď nahráte obrázky do blogového príspevku, automaticky sa do nich vloží odkaz. Ak chcete odstrániť takéto odkazy, musíte upraviť všetky blogové príspevky. V režime „Zobraziť“ a ďalej na ikonu „Odkaz“. Ak obrázok neobsahuje externý odkaz, potom po kliknutí na fotografiu v editore príspevkov nie je ikona „Odkaz“ aktívna (nie je zvýraznená žiadna ikona).

  6. Odstráňte odkaz na profil autora blogu. Odstráňte autora blogu pod príspevkom. Ak to chcete urobiť, nájdite kód pravdaa nahradiť true za nepravdu. Ukáže sa to falošné
  7. Zatvorte odkaz z miniaplikácie „“ z indexovania pomocou značky nofollow. Ak na svojom blogu používate miniaplikáciu profilu, pomocou rýchleho vyhľadávania miniaplikácie v šablóne blogu nájdite kód pre miniaplikáciu Profile1. Musíte upraviť kód miniaplikácie a nahradiť rel = 'author' na dvoch miestach reťazcom rel = 'nofollow' a pridať rel = 'nofollow' do dvoch odkazov. Mali by ste dostať niečo ako snímku obrazovky:


    Vyrobené na príklade úpravy profilu Google Plus. Pripomíname, že služba Google Plus bude 2. apríla 2019 postupne ukončená. Preto po tomto dátume budete musieť vykonať ďalšie zmeny v kóde miniaplikácie „O mne“.

  8. Kontroluje sa prichádzajúce odkazy na akúkoľvek stránku s príspevkami na blogu, ktorá obsahuje komentáre. Nájdite a odstráňte kód v šablóne blogu:

    V nastaveniach blogu pozdĺž cesty Nastavenia blogu -> Iné -> Informačný kanál lokality -> Povoliť informačný kanál blogu použite nasledujúce nastavenia:

Odstráňte externé odkazy z novej predvolenej šablóny Blogger

Použitie pozoruhodnej témy ako príkladu
  1. Odstrániť uvedenie zdroja (odkaz nižšie – Blogger Technologies)
    Nájdite Attribution1 v šablóne blogu na vyhľadávanie miniaplikácií (zoznam miniaplikácií) a odstráňte kód spolu so sekciou podobnou starej šablóne Blogger (pozrite si vyššie 1).
  2. Odstráňte odkaz z miniaplikácie „Nahlásiť zneužitie“. Toto je miniaplikácia ReportAbuse1. Vo vyhľadávaní podľa widgetov nájdeme:
    Celý kód vyzerá takto:




  3. Skontrolujeme stránku blogového príspevku s komentármi a odstránime odkazy analogicky so starými šablónami blogu (pozri vyššie - bod 8).
  4. Odkazy získavame z blogových príspevkov, ktoré sú všité do obrázkov príspevkov (pozri bod 5).

Vydali sme novú knihu „Obsahový marketing na sociálnych médiách: Ako sa dostať do hláv predplatiteľov a zamilovať si svoju značku“.

Prihlásiť sa na odber

Zdrojový kód stránky je kolekcia značiek HTML, štýlov CSS a JavaScript, ktoré prehliadač prijíma z webového servera.

Viac videí na našom kanáli - naučte sa internetový marketing so SEMANTICOU

Dá sa to prirovnať k súboru príkazov, ktoré vojakom dáva veliteľ. Predstavte si, že publikum nevidí ani nepočuje šéfa. Z ich pohľadu armáda samostatne vykonáva akcie. V našom prípade je veliteľom prehliadač, príkazy sú zdrojovým kódom a konečným výsledkom sú pochodujúci vojaci.

Stránka je uložená na webovom serveri, ktorý odošle stránku na žiadosť používateľa. Žiadosťou je zadanie adresy URL do panela s adresou, kliknutie na odkaz alebo kliknutie na tlačidlo odoslania 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 súbor html značiek a textu.
Zdrojový kód stránky je množina údajov, ktorá obsahuje:

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

Tieto tri sekcie spravuje prehliadač. Pre server je to jednoducho text, ktorý je potrebné odoslať ako odpoveď na požiadavku.

Prečo by sme mohli potrebovať študovať zdrojový kód

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

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

Toto sú základné funkcie, ale v skutočnosti, ak viete, ako čítať kód, môžete sa o stránke dozvedieť oveľa viac.

Ako zobraziť zdrojový kód stránky

Úplne vo forme, v akej je zverejnený na serveri, to nie je možné vykonať z prehliadača. Všetky označenia 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 zobrazí sa úplný zoznam na samostatnej karte.

Je to len text, ktorý bude potrebné analyzovať, aby sme pochopili. Ale môžete získať interaktívny kód pomocou nástrojov pre vývojárov.

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

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

V sekcii dodatočné nástroje vyberte „Nástroje pre vývojárov“.

Otvorí sa okno zobrazujúce aktívny stav kódu. To znamená, že po kliknutí na označenie sa vedľa neho zobrazí štýl prvku a na stránke sa zvýraznia vybrané bloky.

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

Kontrola certifikátu lokality je dostupná na karte „Zabezpečenie“.

Záložka "Audits" pomôže skontrolovať zdroj zverejnený na hostingu.

Ak je umiestnenie panela napravo nepohodlné, môžete kliknúť na tri bodky a zmeniť ho 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. Hlava - sekcia hlavičiek služieb.
  3. Titulok - názov stránky (zobrazuje sa na karte).
  4. Telo – 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é ohraničenie sekcií na stránke, v prípade potreby sú štylizované. Obsahujú text, ktorý je na stránke nejakým spôsobom viditeľný. Štítok Head však obsahuje informácie o službe. Na 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 nie je možné iným spôsobom zistiť.

Venujme pozornosť značke Odkaz. S jeho pomocou sú uvedené odkazy na externé zahrnuté súbory. V prípade potreby môžete zobraziť obsah a uložiť ho na disk. Ak to chcete urobiť, umiestnite kurzor na adresu a stlačte RMB. Vyberte možnosť „Otvoriť na novej karte“.

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

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

V tomto prípade je najvhodnejš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. HTML kód sa zobrazuje rovnakým spôsobom. Chyby kódu JavaScript však možno vidieť na karte „Konzola“. Zobrazuje popis chyby a číslo riadku, na ktorom sa vyskytla.

Syntax je možné vidieť priamo v kóde. Na to je určená záložka „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 vo všetkých označeniach. V tomto prípade by ste mali použiť špeciálny príkaz kontextového menu. Ukážte myšou na fragment a stlačte RMB. Vyberieme príkaz „Zobraziť kód“.

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

Zhrnutie

Povedali sme vám, aký je zdrojový kód stránky. Stačí ovládať základné znalosti HTML a CSS a pomocou pohodlných vývojárskych nástrojov môžete ladiť svoje vlastné html dokumenty.

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