Ako otvoriť zdrojový html kód webovej stránky. Ako zmeniť kód stránky v prehliadači Google Chrome

Zručnosť zmeniť zdrojový kód stránky- užitočná zručnosť pre pokročilých používateľov internetu. Pomocou nahradenia kódu HTML môžete zmeniť otvorenú webovú stránku, ako chcete. V tomto článku to povieme ako zmeniť kód stránky v prehliadači Google Chrome. V iných prehliadačoch sa však všetko robí rovnakým spôsobom, takže by nemali byť žiadne ťažkosti.

Aký je HTML kód stránky?

Každá stránka, ktorú otvoríte vo svojom prehliadači, má svoj vlastný kód v značkovacom jazyku HTML. Tento kód sú značky a text. Tagy sú akési štítky, ktoré hovoria prehliadaču, ako má zobraziť konkrétnu časť stránky. Text je obsah stránky, čo používateľ vidí. K stránke je možné pripojiť aj CSS štýly, ktoré nastavujú vzhľad prvkov stránky. Komu zmeniť zdrojový kód stránky HTML a CSS nemusíte dôkladne poznať a čoskoro sa o tom presvedčíte sami.

Prečo meniť webovú stránku?

Môžete zmeniť údaje na stránke, zmeniť text správy, urobiť falošnú snímku obrazovky. Upozorňujeme, že všetky zmeny sú viditeľné iba pre vás a zmiznú po opätovnom načítaní stránky. Tiež zmenené údaje nebudú skutočné. Napríklad, ak nemám 10 dolárov a zmením ich na 100 dolárov, už nebudem mať žiadne peniaze. Ide len o vykreslenie stránky prehliadačom. Príklad:

po:

Napríklad vezmem rovnakú stránku a zmením predchádzajúce oznámenie článku „“ Otvorím hlavnú stránku v prehliadači Google Chrome. Kliknem pravým tlačidlom myši na prvok, ktorý chcem zmeniť, napríklad názov oznámenia, a vyberiem „Zobraziť kód“.

V okne, ktoré sa otvorí, prejdite na kartu Prvky a pozrite si HTML kód stránky. Musíme nájsť text, ktorý nás zaujíma. (zvýraznené červenou farbou)

Teraz vymažem starý text a zadám nový.

To je všetko, názov oznámenia bol zmenený. Teraz zmením samotný oznam, tagy a kategóriu.

Ďalší obrázok môžete vložiť zmenou atribútu src v značke img.

Dnes sa teda pozrieme na niekoľko užitočných nástrojov pre webového sprievodcu, ktoré uľahčujú život pri usporiadaní lokality. Začnime s konzolou správcu webu v prehliadači Google Chrome. A prejdime si otázky, ktoré najčastejšie vyvstávajú od webmastera pri rozložení stránky.

Ak sa chcete dostať do konzoly, otvorte svoju stránku v prehliadači Google Chrome, kliknite pravým tlačidlom myši kdekoľvek na webovej stránke a z kontextovej ponuky vyberte možnosť „Zobraziť kód stránky“ alebo vyberte konkrétny prvok, ktorý chcete preskúmať, výberom položky „Zobraziť kód“ . prvok“.

V hornej časti budete mať uvedených niekoľko kariet. Dnes budeme hovoriť o karte "Prvky". , ktorý prezentuje prvky webovej stránky so zvýraznením tagov, vlastností, vnorením prvkov, znázornením hierarchie prvkov v strome DOM (nápoveda dole, od koreňového rodiča až po aktuálneho skúmaného), možnosť úpravy prvkov, zoznam ich vlastností, zvážte vyhľadávanie podľa prvkov a tiež Zoznámime sa s prezeraním css štýlov spojených s prvkami atď.

Ako zobraziť všetky štýly, ktoré sú spojené s konkrétnym prvkom? Ktorý sa teraz používa? V akých súboroch sú?

Nie je teda nič jednoduchšie! Otvoríme prehliadač Google Chrome, otvoríme našu stránku – zdroj otázok, klikneme pravým tlačidlom myši na požadovaný prvok, ak je viditeľný v kontexte stránky, a v kontextovej ponuke vyberieme položku „Zobraziť kód prvku“.

V spodnej časti máme konzolu so zvýraznenou kartou vľavo „ Prvky“A všetky štýly spojené s prvkom vpravo, kde: Vypočítané štýly- ide o všeobecné "súhrnné" štýly, ktoré boli prvku priradené z pravidiel css a nastavení prehliadača používateľa (jeho prostredia) a zároveň je karta zbalená.

Nás však zaujíma záložka “Styles” umiestnená pod ňou, ktorá postupne uvádza všetky štýly priradené elementu, ako aj súbory, kde sú tieto pravidlá pre tento element špecifikované jeho typom, id, triedou, názvom, vlastnosťou, atribút atď. Zároveň, ak je pravidlo css prečiarknuté, bolo predefinované skôr/nasledujúco (čo uľahčuje sledovanie, ktoré z pravidiel css je prioritné a v tomto prípade sa použije na prvok).

Pod konzolou je riadok, ktorý zobrazuje prvok v hierarchii dokumentu, čo vám umožňuje jednoducho zobraziť celý zoznam nadradených prvkov od koreňového po vybratý prvok. Niečo ako strúhanka.

Html značka nie je viditeľná v kontexte stránky? Alebo potrebujete nájsť všetky značky, napríklad podľa určitej triedy, názvu, vlastnosti, typu?

Otvorte stránku v prehliadači Google Chrome, kliknite pravým tlačidlom myši, vyvolajte kontextové menu a vyberte « Zobraziť kód stránky » . Súčasne stlačte kombináciu klávesov "CTRL + F", zadajte frázu, ktorú potrebujeme ( napríklad: class="vypchávka") a posúvajte sa v zozname nájdených výsledkov, pričom súčasne prehliadajte všetky štýly spojené s požadovanými prvkami na pravej strane stránky.

Ako zobraziť html kód prvku (prvkov) načítaného dynamicky (napríklad: pomocou Ajaxu)

Čaká sa na načítanie stránky v prehliadači Google Chrome. Vykonávame potrebné úkony, aby Ajax fungoval. Klikneme pravým tlačidlom myši na stiahnuté údaje, v kontextovej ponuke vyberieme „Zobraziť kód prvku“ a výsledok preskúmame v konzole na karte „ Prvky“ vľavo.

Zobrazte zmeny štýlu css v reálnom čase

Mimochodom, je tiež vhodné v prípade potreby sledovať, aké štýly sú prvku priradené za behu, napríklad pri listovaní v galérii a iných udalostiach časovača. Všetky štýly priradené cez javascript v reálnom čase sa zobrazia vo vlastníctve štýl vybraný prvok v okne na karte Prvky.

Interaktívny pohľad na vplyv css pravidiel na prezentáciu html tagov

Google Chrome poskytuje interaktívnu konzolu pre štýly CSS. To znamená, že môžete nielen vidieť, aké štýly sú aplikované na prvok, ale môžete tiež presunúť kurzor myši na určitú vlastnosť css, povoliť ju pomocou kontextového začiarknutia vpravo alebo ju deaktivovať zrušením začiarknutia príznaku a zobrazením výsledný výsledok na stránke.

Štruktúru prezentácie html prvkov meníme za chodu (priamo v prehliadači)

Takže sme sa už naučili, ako preskúmať štruktúru webového dokumentu v prehliadači Google Chrome, teraz sa pozrime na úpravy prvkov za behu. Ideme do konzoly akýmkoľvek spôsobom, ktorý nám vyhovuje. Požadovaný prvok nájdeme na karte „Prvky“, kliknite naň pravým tlačidlom myši, čím vyvoláte kontextovú ponuku:

• Pridať atribút- Pridá atribút k určenému prvku. Hneď ako sa kurzor stane aktívnym, začneme nastavovať požadovanú vlastnosť. Napríklad: Napíšeme name="itemImage", ktorý sa okamžite pridá do nášho prvku.
• Upraviť atribút– ak kliknete pravým tlačidlom myši na atribút prvku, položka sa sprístupní upraviťatribúty. Kliknite, upravte.

Príklad použitia: zabudli sme heslo uložené pod hviezdičkami v prehliadači Google Chrome (ak bolo heslo uložené v tomto prehliadači). Kliknite pravým tlačidlom myši na prvok s heslom, kliknite na „Zobraziť kód prvku“ , v konzole na ľavej strane záložky Prvky kliknite pravým tlačidlom myši na atribút type="password", kliknite ľavým tlačidlom myši na Upraviťatribúty, zmeniť atribút type="heslo" na type="text", a tu už máme rovnaké heslo vo forme textu namiesto hviezdičiek.

• Upraviťhtml- kliknite pravým tlačidlom myši na prvok v konzole Prvky, vyberte si Upraviťhtml, zmeňte kód podľa svojich predstáv.
• KopírovaťakoHTML- skopírujte časť HTML, ktorú potrebujeme na ďalší výskum, povedzme do poznámkového bloku alebo na iné účely, kde potrebujeme použiť presne rovnaké rozloženie. Šetríme čas.
• KopírovaťXPATH– skopíruje XPATH reprezentáciu štruktúry z koreňa nadradeného prvku do vybraného prvku.
• Odstrániťuzol– ak potrebujete odstrániť aktuálne vybratý prvok a všetky jeho potomky z kontextu webovej stránky a zobraziť výsledok.
• Slovoobal- zobrazí zobrazenie webovej stránky v kontexte konzoly Prvkyčitateľnejšie.

V nasledujúcich článkoch sa budeme naďalej venovať nástrojom správcu webu a najmä sa zoznámime so zvyškom kariet nástrojov správcu webu v Google Chrome a tiež zvážte ladenie chýb javascriptu pomocou rôznych prehliadačov

Veľkosť, 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 trvalo 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 šablón, ale každý máme iné šablóny a je dobré, ak je kód z príkladu aspoň trochu podobný: nefňukať, tak to najdem aj tak rolovanim - metódou poke.

Číslo neprešlo s kódom odkazu. Všetky ukazovali na úplne iné cesty. Zaujímalo by ma, či existuje jednoduchý a presný nástroj, ako nájsť správny html kód na ľubovoľnej stránke. Pre mnohých blogerov, aj keď majú skúsenosti, je ťažké mierne upraviť šablónu. Nie je sa čoho obávať, pretože každý má svoje záujmy a ciele pri vytváraní stránky.

Ak chcete vykonať malé zmeny v šablóne, napr zmeniť akýkoľvek nadpis, nadpis článkov a nadpisov, farbu a veľkosť písma a odkazov, väčšinou stačí naučiť sa jednoduchý princíp, o ktorom je reč 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 našiel, kde v jeho šablóne zmeniť farbu panela nadpisov. Nahraný motív do testovacej subdomény. Nastavenia tohto prvku neboli uložené v style.css, ale v inom súbore, takže ho človek nevedel nájsť.

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

Ak nemáte radi dlhé články, toto je pre vás. na konci článku video tutoriál, ktorý ukazuje, ako si môžete pozrieť 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 riešenia blogu. A pre tých, ktorým je text bližší a zrozumiteľnejší, nižšie je podrobný rozbor témy so screenshotmi.
httpv://youtu.be/uIlVvwCt2ho

Termíny a pojmy

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

• HTML- zodpovedný 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- zodpovedný za dizajn (aké fonty, veľkosti, farby atď.). Toto je všeobecný štýl domu a štýl jeho jednotlivých miestností: aké budú tapety, lampy, záclony, nábytok. Preto dokument, ktorý predpisuje css kódy, nazývaný "štýlová šablóna"

A ak by vás zaujímalo, ako zmeniť napríklad farbu hlavičky 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, veľmi staré, rozvody boli zhnité, poistky často vyhorené a vždy, keď som ho ťahal v závese 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 presne ten majster robí. Stále neviem ako funguje poistka. Ale viem, kde to zmeniť). Sám by som motor neopravoval 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é rozumieť programovaniu do hĺbky. Stačí jasne pochopiť, čo je na čo určené, kde to hľadať a ako to zmeniť. Je lepšie zmeniť to, čo môžete urobiť sami, a všetko ostatné nechať na špecialistov. Článok o obsahuje užitočný odkaz na túto tému.

Potrebujete byť odborníkom na všetko?

V seo blogoch sa často vedú diskusie o tom, či začiatočník potrebuje do hĺbky rozumieť html, alebo ešte lepšie, naučiť sa písať stránky sám, aby bolo všetko jedinečné.. No neviem - každému po svojom, a tu je niekto bližšie. Zaujíma ma to trochu viac, tak sa teraz dodatočne vzdelávam u 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 Runet s návštevnosťou asi 1,5 tisíc ľudí za deň. Na 10 dní. Tak aká je dohoda? Vladimír sa dobre vyzná v html, dokáže si objednať a kúpiť unikátnu šablónu pre seba. Tu to musíte pochopiť tajomstvo nespočíva vo vzorcoch, ale v užitočnosti informácií.

Kde sa skrýva html kód?

Ospravedlňujeme sa za odbočenie, vráťme sa k našim kódom). Povedzme, že chcete zmeniť farbu písma názvu blogu. Zoberieme do úvahy príklad 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 webovými stránkami, má veľa vstavaných nástrojov).
2. Presuňte kurzor myši na prvok, ktorý chcete zmeniť . V tomto prípade názov blogu. Klikneme naň „pravým“ myšou a v zobrazenom okne vyberieme ZOBRAZIŤ KÓD PRVKU.

DÔLEŽITÉ: nezamieňajte s ZOBRAZENÍM KÓDU STRÁNKY! Teraz nepotrebujeme celú stránku, iba samostatný prvok.

Klikneme 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ý (nie približný) riadok kódu zodpovedný za písma, farbu, veľkosť, zvýraznenie a ďalšie. Týmto spôsobom môžete zistiť AKÝKOĽVEK kód akéhokoľvek prvku akejkoľvek šablóny.

Požadovaný riadok nájdeme v bloku zvýraznenom modrou farbou. Na pravej strane je posuvník, ktorým môžete listovať 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

Tu sú tri hlavné riadky, ktoré menia názov, veľkosť a farbu písma ľubovoľného prvku. Riadok štýlu css vpravo udáva polohu 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,

nájdete ho neskôr 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 zvýraznenú na druhom obrázku č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é (

Požadovaný riadok nájdeme v súbore „style sheet (style.css)“. Toto je už urobené v admine. Vyzývam vás, aby ste vykonali všetky experimenty na testovacej subdoméne s cieľom vylúčiť .

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 otvoríme vyhľadávací panel pomocou kláves CTRL + F: v hornom okne sa zobrazí prázdne riadkové okno. Vložte do nej riadok, ktorý ste skopírovali v kroku 4.

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

Urobíme zmenu prvku. V našom prípade meníme farbu písma, takže v riadku COLOR dosadíme inú hodnotu - farbu, ktorú chceme. V príklade je farba čierna, jej význam je:

Farbu si môžete vybrať v ktorejkoľvek webovej službe palety farieb: do vyhľadávača zadajte „Web Color Palette“ a vyberte požadovanú. Vyberieme farbu, skopírujeme jej digitálnu hodnotu a opatrne ju nahradíme starou. potom kliknite na AKTUALIZOVAŤ SÚBOR a prejdite a pozrite sa, čo sa stalo.

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

Toto je 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 sami budete môcť ľahko nájsť a zmeniť akýkoľvek prvok html kódu, alebo skôr css kódu - áno, odborníci mi odpustia zjednodušovanie. A ak nerozumiete, navštívte stránku. Nestrácajte čas hlúposťami.

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

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

Tiež by vás mohlo zaujímať:

Vývojári prehliadačov sa postarali o pohodlie tých, ktorí vytvárajú stránky, ktoré sa otvárajú v rovnakých prehliadačoch, teda správcov webu. K štandardným funkciám pridali vývojárske nástroje, pomocou ktorých jednoducho otvoríte a zobraziť zdrojový kód stránky v prehliadači: HTML, CSS, JavaScript (JS), získajte rôzne užitočné údaje o štruktúre stránky, vykonajte jej technickú analýzu. Vo všeobecnosti vidieť veľa užitočných vecí.

Samozrejme, tieto nástroje nevyužívajú len tvorcovia stránok na prácu, ale aj bežní používatelia, ktorým zdrojový kód umožňuje vidieť rôzne užitočné údaje.

Z tohto článku sa dozviete, ako zobraziť zdrojový kód stránky v prehliadači (ako otvoriť HTML, CSS, JavaScript kód stránky).

Ako otvoriť zdrojový kód stránky v prehliadači

Existujú dva spôsoby, ako otvoriť zdrojový kód webovej stránky v prehliadači:

1. Používanie klávesových skratiek;
2. Otvoriť z kontextovej ponuky.

Ctrl+U- kombinácia klávesových skratiek na zobrazenie zdrojového kódu celej stránky webu v samostatnom novom okne. Štandard pre všetky prehliadače: Google Chrome, Opera, Mozilla Firefox, prehliadač Yandex, IE.

Vývojárske nástroje môžete zadať aj takto:

Ak chcete rýchlo nájsť požadovaný kód, slovo alebo text na stránke, môžete použiť štandardnú kombináciu klávesových skratiek vyhľadávania pre všetky prehliadače: Ctrl + G.

Video návod:

Zobraziť kód prvku | preskúmať prvok | preskúmať prvok

Ak zrazu potrebujete zobraziť nie celý zdrojový kód, ale zobraziť iba jeho samostatnú časť, nejakú sekciu na stránke, predchádzajúci nástroj nebude fungovať. Na tento účel existuje ďalšia funkcia v nástrojoch pre vývojárov, o ktorej sa bude diskutovať nižšie.

Ako zobraziť kód prvku na stránke:

Okrem toho môžete použiť klávesové skratky na rýchly prístup k kontrole prvkov.

Horúce klávesy (tlačidlá):

Google Chrome: Ctrl+Shift+I a Ctrl+Shift+C

Opera: Ctrl+Shift+I a Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I a Ctrl+Shift+C

Prehliadač Yandex: Ctrl+Shift+I a Ctrl+Shift+C

Po vykonaní akcií sa zdrojový kód webovej stránky otvorí v tom istom okne prehliadača:

Všetok HTML kód bude v ľavom veľkom stĺpci. A štýly CSS sú vpravo.

Výhodou tejto metódy samozrejme je, že používateľ má možnosť meniť zdrojový kód, upravovať štýly. To znamená, že môžete upravovať štýly na stránke a vidieť, ako to bude vyzerať s určitými štýlmi, bez toho, aby ste museli okamžite vykonávať zmeny v súboroch, ktoré sú na hostiteľských serveroch. Ak chcete zmeniť alebo pridať kód programu, musíte dvakrát kliknúť na požadovaný fragment alebo sekciu. Samozrejme, že oprava kódu v prehliadači nebude vykonaná na hostingových serveroch. Preto v budúcnosti v každom prípade budete musieť skopírovať tento kód a zapísať ho do súborov.

Toto video tutoriál obsahuje podrobnosti a ukazuje, ako pracovať s nástrojmi pre vývojárov:

Takže len online, priamo v prehliadači, si môžete prezerať zdrojový kód stránky, získať základné informácie o HTML a CSS kóde, meniť ich a kopírovať bez toho, aby ste museli sťahovať súbory tejto stránky do svojho počítača.

Mimochodom, neskúsení používatelia internetu, ktorí zmenili kód stránky a očakávajú jeho uloženie, budú sklamaní. Po obnovení stránky sa totiž všetky zmeny na nej stratia. Na hacknutie stránky to nestačí 🙂

Ako zobraziť zdrojový kód na telefóne s Androidom

Chcel by som tiež poznamenať, že vývojárske nástroje sú k dispozícii nielen v počítačovej verzii prehliadačov, to znamená na počítačoch a prenosných počítačoch. Na telefónoch a tabletoch (Android, IOS) si môžete pozrieť aj zdrojový kód.

Ak to chcete urobiť, pridajte predponu zdroja zobrazenia k adrese URL kontrolovanej stránky:

Napríklad:

zdroj zobrazenia:https://website/turbo-mode-opera/

Je potrebné rýchlo vidieť všetky zmeny na samotnej stránke bez toho, aby to ovplyvnilo súbory a kód stránky zverejnené na internete. Napríklad zmeniť farebnú schému bloku, presunúť prvok, ktorý sa presunul atď.

Mnoho webmasterov na to používa lokálne servery Denwer alebo OpenServer, ktoré na svojom počítači spúšťajú úplnú kópiu stránky. Táto metóda je univerzálna a vhodná pre profesionálov, môžete s ňou kontrolovať fungovanie rôznych skriptov a pluginov, experimentovať so zmenou dizajnu a upravovať všetky súbory stránky a po teste preniesť príslušné zmeny priamo na stránku.

Používateľom, ktorí majú od webmaster artu ďaleko, odporúčam na tieto účely použiť prehliadač. Keďže používam Chrome, poskytnem pokyny so snímkami obrazovky pre tento konkrétny prehliadač. Analogicky môžete pracovať s prehliadačmi Opera, Yandex.Browser, Mozilla Firefox a ďalšími, princíp ich nástrojov je podobný.

Návod 1: ako zobraziť celý HTML kód stránky v prehliadači

Otvorte požadovanú webovú stránku svojho webu. Klikneme pravým tlačidlom myši na požadovaný prvok, zobrazí sa kontextové rozbaľovacie menu prehliadača s dostupnými príkazmi:

Obrázok 1. Zobrazenie celého HTML kódu webovej stránky v prehliadači Chrome

Dôležité: Príkazy v rozbaľovacej ponuke sa môžu líšiť napríklad pre aktívne prvky (odkazy, obrázky, videá) a neaktívne prvky (text, pozadie, divs):

Obrázok 2. Rozbaľovacia ponuka prehliadača Chrome

Preto, ak nenájdete požadovaný príkaz, kliknite pravým tlačidlom myši niekde inde alebo použite klávesové skratky prehliadača.

Vráťme sa k obrázku 1, kde je zobrazený potrebný príkaz na zobrazenie celého HTML kódu pôvodnej webovej stránky, nazýva sa „ Zobraziť kód stránky". Klikneme na príkaz, otvorí sa nová karta s úplným kódom pôvodnej webovej stránky, veľké plus ku všetkému - zobrazenie je k dispozícii so zvýraznením syntaxe:

Obrázok 3. Útržok kódu pre túto stránku

Tento nástroj je veľmi užitočný na vyhľadávanie a úpravu prvkov, ktoré hľadáte.

Alternatívne spôsoby zobrazenia celého kódu HTML webovej stránky

Pre rýchlejší prístup môžete použiť iné spôsoby volania tohto nástroja

1. Na obrázku 1 tiež vidíme, že tento príkaz je dostupný cez klávesovú skratku. + ;
2. Prilepte do panela s adresou prehliadača view-source: site namiesto mojej domény, vložte svoju adresu;

Obe metódy sú univerzálne a mali by fungovať vo všetkých prehliadačoch.

Niekomu sa na prvý pohľad môže zdať, že to vôbec nie je potrebný 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, meta tagy, atribúty, atď. iné 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 stránky

Po zadaní požiadavky do vyhľadávacieho formulára sa obrazovka presunie na prvý nájdený prvok, pomocou šípok sa medzi nimi môžete pohybovať a vybrať ten, ktorý potrebujete:

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

Návod 2: Ako zobraziť a upraviť HTML a CSS kód webovej stránky v prehliadači Google Chrome

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

Tu je taký užitočný nástroj, ktorý je vždy dostupný vo vašom prehliadači, experimentujte s ďalšími príkazmi, ktoré vám uľahčia úpravu stránky.