" V kontextovom menu je tiež rovnaká položka, ktorá, ak kliknite pravým tlačidlom myši na text stránka. Môžete použiť kláves Ctrl + U. Mozilla Firefox; Mozilla Firefox nepoužíva externé programy - zdroj kód stránka Highlight Syntax sa otvorí v samostatnom okne prehliadača.

V prehliadači Internet Explorer kliknite na časť "Súbor" a vyberte položku Upraviť v Poznámkový blok. Namiesto názvu Názov NotePAD môže byť napísaný iný, priraďujete sa do nastavení prehliadača, aby ste zobrazili zdroj kódale. Kliknúť stránka Pravé tlačidlo myši klesne kontextové menu, v ktorom je tiež položka, ktorá vám umožní otvoriť zdroj kód stránka V externom programe - "Zobraziť HTML kódale".

V aplikácii Opera Browser otvorte ponuku, prejdite na časť "Stránka" a budete mať možnosť vybrať si v podsekcii "Vývojové nástroje" kód"Alebo bod" zdroj kód Freas. Tento výber je priradený klávesmi HOT CTRL + U a CTRL + SHIFT + U, resp. V kontextovom menu viazané na kliknutie stránka Kliknite pravým tlačidlom myši, tiež existuje položka "zdroj kód" Opera Zdrojový kód stránka V externom programe, ktorý je priradený k OS alebo v nastaveniach prehliadača na úpravu HTML súborov.

Prehliadač Google Chrome bez akýchkoľvek pochybností má najlepšiu organizáciu zdroja prezerania kódale. Kliknite pravým tlačidlom myši, môžete zvoliť "Zobraziť kódale stránka"A potom sa otvorí zdroj podsvietenia syntaxe na samostatnej karte. Môžete si vybrať v rovnakom menu reťazec "Zobraziť kóda prvok "a na tej istej karte otvoria dve ďalšie rámce, v ktorých môžete skontrolovať HTML a CSS kód Element stránka. Prehliadač bude reagovať na pohyb kurzora na riadkoch kóda, zvýraznenie položiek na stránke zodpovedajúcej tejto časti HTML kódale.

Zručnosť zmeňte zdrojový kód - Užitočné zručnosti pre pokročilý internetový užívateľ. Pomocou kódov HTML môžete zmeniť otvorenú webovú stránku ako vy. V tomto článku povieme ako zmeniť kód stránky V prehliadači Google Chrome. Avšak, v iných prehliadačoch sa všetko robí rovnakým spôsobom, preto by nemali existovať žiadne ťažkosti.

Čo je kód stránky HTML?

Každá stránka, ktorú otvoríte v prehliadači, má vlastný kód v jazyku HTML Markups. Tento kód sú značky a text. Značky sú zvláštne etikety, ktoré označujú prehliadač, ako zobraziť jednu alebo inú časť stránky. Text je vyplnenie stránky, čo používateľ vidí. Štýly CSS, ktoré nastavíte vzhľad prvkov stránky, môžu byť pripojené aj na stránku. Na zmeňte zdrojový kód stránky Nemusíte dôkladne poznať HTML a CSS a čoskoro sa uistíte.

Prečo zmeniť webovú stránku?

Môžete nahradiť údaje na stránke, zmeniť text správy, vykonať falošný screenshot. Upozorňujeme, že všetky zmeny sú viditeľné len pre vás a pri reštarte stránky, zmiznú. Tiež upravené údaje nebudú skutočné. Napríklad, ak mám 10 dolárov, a zmením sa o 100, potom už nebudem peniaze. Je to len zobrazenie stránky prehliadača. Príklad:

Po:

Napríklad budem mať rovnakú stránku a upravíme predchádzajúce oznámenie článku "" Otvorím hlavnú stránku v prehliadači Google Chrome. Kliknem na PCM na prvom prvku, ktorý chcem zmeniť, napríklad, hlavičku oznámenia a zvoľte "Zobraziť kód".

V okne, ktoré sa otvorí, prejdite na kartu Prvky a pozrite si kód stránky HTML. Musí na nás nájsť znenie záujmu. (zdôraznil červenú)

Teraz odstránim starý text a urobím nové.

To je všetko, názov oznámenia sa zmení. Teraz zmením samotné oznámenie, značky a rubriku.

Môžete vložiť ďalší obrázok zmenou atribútu SRC v značke IMG.

Takže dnes budeme zvážiť niekoľko užitočných fondov pre webové ruky, ktorí uľahčujú život pri pokládke stránky. Začnime s konzolou pre webových majstrov v prehliadači Google Chrome. A pôjdeme na otázky, ktoré najčastejšie vznikajú z webového majstra počas rozloženia lokality.

Aby ste sa dostali do konzoly, otvorte svoje stránky v prehliadači Google Chrome, kliknite pravým tlačidlom myši kdekoľvek na webovej stránke a vyberte možnosť "Zobraziť kód stránky" v kontextovej rozbaľovacej ponuke, alebo na konkrétnej položke pre štúdium výberom " Zobraziť kódový prvok. "

Na vrchole budete zobraziť niekoľko kariet. Dnes budeme hovoriť o karte "Prvky" , na ktorom prvky webovej stránky s osvetlenými značkami, vlastnosťami, výberom hniezdiacich prvkov, reprezentáciou hierarchie elementu v strome domu (Tip v spodnej časti, od koreňového rodiča na aktuálnu štúdiu), schopnosť \\ t Upraviť prvky, zoznam ich vlastností, zvážte vyhľadávanie podľa položiek, ktoré budeme získané s sledovaním štýlov CSS súvisiacich s prvkami atď.

Ako zobraziť všetky štýly súvisiace s konkrétnym prvkom? Ktorý sa teraz aplikuje? Aké súbory sa nachádzajú?

Takže, nie je nič jednoduchšie! Otvorte svoj prehliadač Google Chrome, otvorte naše stránky - zdroj otázok kliknite na požadovaný prvok s pravou tlačidlom myši, ak je viditeľný v kontexte stránky, a vyberte položku "Zobraziť kód položky" obsahové menu.

Nižšie máme konzolu s zvýrazneným kartu ľavého "prvkov" a všetky spojené s štýlmi prvkov vpravo, kde: Vypočítané štýly. - Toto sú spoločné "súhrnné" štýly, ktoré boli priradené k prvku z pravidiel CSS a nastavenia používateľského prehliadača (jeho prostredie prostredia) a karta je minimalizovaná.

Máme však záujem o kartu štýlov, nasadené pod ním, v ktorom všetky štýly priradené k položke, ako aj súbory, kde sú tieto pravidlá špecifikované pre túto položku podľa typu, ID, triedy, názvu, majetku, atribútu atď. . Zároveň, ak sa prekročí pravidlo CSS, znamená to, že bolo predpísané skôr / Ďalej (čo uľahčuje sledovanie, čo z pravidiel CSS je prioritou a uplatňuje sa v tomto prípade na položku).

V spodnej časti konzoly je reťazec, ktorý zobrazuje prvok v hierarchii dokumentov, ľahko vám umožňuje zobraziť celý zoznam rodičovských prvkov z koreňa do vybratej položky. Niečo ako "chlieb omrvinky".

HTML tag nie je viditeľný v kontexte stránky? Alebo je potrebné nájsť všetky tagy, napríklad na špecifickú triedu, meno, majetok, typ?

Otvorte stránku v prehliadači Google Chrome, kliknite pravým tlačidlom myši, Zavolajte na kontextové menu, vyberte položku « Zobraziť kód stránky » . Kliknite na tlačidlo klávesnice "Ctrl + F" v rovnakom čase zadáme frázu, ktorú potrebujete ( napr.: trieda \u003d "vypchávka ") A pohybujeme sa na zoznam našich výsledkov, súčasne hľadáte všetky štýly spojené s potrebnými prvkami na pravej strane stránky.

Ako prezerať HTML kód prvku (prvkov) naložených dynamicky (napríklad: AJAX)

Čakáme na stiahnutie stránky v prehliadači Google Chrome. Vykonávame potrebné kroky na prácu AJAX. Kliknite pravým tlačidlom myši na prevzaté dáta, v kontextovej ponuke vyberte výsledok v konzole na karte Prvky na ľavej strane.

Zobrazenie zmien štýlu CSS v reálnom čase

Mimochodom, je tiež vhodné pozorovať v prípade potreby: Aké štýly sú priradené k prvku RAID, napríklad pri rolovaní galérií a iných časovačov. Všetky štýly v reálnom čase priradené prostredníctvom Javascriptu sa zobrazia v nehnuteľnosti. Štýl. Vybraná položka v okne na karte "Prvky".

Interaktívne prezeranie vplyvu pravidiel CSS na reprezentáciu HTML Tag

Google Chrome poskytuje interaktívnu konzolu pre štýly CSS. A to znamená, že môžete nielen zobraziť, ktoré štýly sa vzťahujú na prvok, ale a prineste kurzor myši na špecifické CSS vlastnosti, zapnite pomocou kontextu zaškrtnutí doprava, alebo ho vypnúť odstránením vlajky a Zobrazenie výsledného výsledku na stránke.

Zmeňte štruktúru predloženia HTML prvkov RAID (priamo v prehliadači)

Takže, aby sme preskúmali štruktúru webového dokumentu v prehliadači Google Chrome, už sme sa naučili, teraz zvážte stručne úpravu prvkov RAID. Choďte do konzoly akýmkoľvek spôsobom vhodným pre nás. Požadovanú položku na karte "Prvky" nájdeme, kliknite na ňu pravým tlačidlom myši, čím sa volajú kontextové menu kontextu:

• Pridajte atribút. - Pridá atribút pre zadanú položku. Akonáhle sa kurzor stane aktívnym, začnite určiť požadovanú vlastnosť. napríklad: Napíšte meno \u003d "ItemImage", ktorý bude okamžite pridaný k nášmu prvku.
• Upraviť atribút. - Ak kliknete na atribút kliknutím pravým tlačidlom myši na položku, bude k dispozícii upraviť.atribút.. Kliknite na položku Upraviť.

Príklad použitia:zabudli sme heslo uložené pod asteristom v prehliadači Google Chrome (ak bolo heslo uložené v tomto prehliadači). Kliknite pravým tlačidlom myši na prvok s vstupom hesla, kliknite na položku "Zobraziť kódový kód" , v konzole na ľavej strane na karte Prvkykliknite na typ atribútu \u003d "Heslo" Kliknite pravým tlačidlom myši, ľavým tlačidlom myši na myš Upraviť.atribút,zmeníme atribút typ \u003d "heslo " na typ \u003d "text "A tu už máme najviac heslo vo forme textu namiesto hviezd.

• Upraviť.html. - Kliknite pravým tlačidlom myši na prvku v konzole Prvky, Vyberte si Upraviť.html,zmeňte kód podľa svojich predstáv.
• KópiaakoHtml - Skopírujte HTML časť, ktorú potrebujete pre ďalší výskum, povedzte, v notebooku, alebo na iné účely, kde musíme aplikovať presne rovnaké usporiadanie. Ušetríme čas.
• KópiaXpath. - Kopíruje reprezentáciu štruktúry xpath z koreňa rodičovského prvku na vyhradený prvok.
• Vymazať.uzol. - Ak potrebujete odstrániť aktuálnu vybranú položku a všetky svoje dcérske spoločnosti z webového kontextu stránky a pozrite si výsledok.
• Slovo.obal. - Uskutočnite zobrazenie webovej stránky v kontexte konzoly Prvky Čitateľnejšie.

V nasledujúcich článkoch budeme pokračovať v zvážení finančných prostriedkov pre webový master, a najmä, budeme zoznámiť s ostatnými kartami nástrojov pre webový master Google Chrome.a tiež zvážiť ladenie Javascript Nástroje z rôznych prehliadačov

1 hlasovanie

Dobrý deň, drahí čitatelia môjho blogu. Stáva sa to na stránke nejaký krásny čip a začína trápiť otázku, ako Creator dosiahol taký zaujímavý efekt.

Ukazuje sa, že je celkom jednoduché nájsť odpoveď. A ak máte nejaké zručnosti, môžete si vybrať veľa takýchto čipov av krátkom čase vytvoriť si vlastné jedinečné miesto.

Dnes budeme hovoriť o tom, ako otvoriť kód stránky, určitý prvok a naučiť sa používať túto zručnosť pre seba.

Základné znalosti kódu

Moja stránka je určená pre nováčikov a najprv by som chcel povedať stránky a kód v dvoch slovách.

Ak chcete nakresliť obrázok, potom ju nakrájajte na malé časti, napíšte kód, vďaka ktorej prehliadač prinesie všetky prvky na jeden celok. Zdá sa, že všetko je veľmi ťažké? Nie vôbec, a to o tom nestojí za to.

Týmto spôsobom sa vytvárajú miesta kvality. Chcete - blízko tohto prípadu a štúdie, žiadna túžba - nikto ťa nie je schopný nútiť vás.

Budem hovoriť len jednu vec ... Nie je nič príjemnejšie ako vidieť nezrozumiteľné slová, ktoré ste napísali, ste premenený na jeden celok a príde na život: odkazy práce, tlačidlá pohybu, obrázky sa pohybujú, textové prehľadávanie. Myslím, že viem, ako sa viktor Frankenstein cítil.

Keď začnete pochopiť tajný jazyk a uvidíte, že všetko je v skutočnosti oveľa jednoduchšie, než sa zdalo, že sa pôvodne nemôžete uveriť vo svojej vlastnej silu a mozgové príležitosti. Je veľmi cool.

Ako sa vytvárajú stránky? V ideálnom prípade najprv. Len čerpá obrázok. Napríklad, ako je znázornené na obrázku nižšie. Aj keď je to len obrázok, fotografia. Žiadne odkazy nefungujú, keď stlačíte, nepôjdete nikomu, vyhľadávanie sa nevykonáva.

Pre toto číslo. Pozrite sa na screenshot nižšie. Môžete sa zdať ako smiešny a veľmi zložitý súbor znakov. V skutočnosti všetko nie je také ťažké, existuje určitý algoritmus.

Existuje len asi 150 tagov a každý z nich je zodpovedný za určitú akciu: prepojenie, prenos, zvýraznenie tuku, farby, nadpisu a tak ďalej. Nie je to tak ťažké riešiť s nimi, ak je túžba a nie je ľúto času.

Vďaka znalosti týchto atribútov môžete vyriešiť takmer akúkoľvek úlohu. Ale spôsoby, ako dosiahnuť cieľ každý vývojár, nájde svoje vlastné.

Skúsení tvorcovia okamžite zistia, ako dosiahnuť výsledky, a iné musia myslieť, hľadať odpoveď v článkoch alebo v počiatočnom Kódexe konkurentov. Jednoducho si uvedú potrebnú časť na mieste tretej strany a upravujú pre seba. To výrazne znižuje pracovný proces.

O niečo neskôr vám ukážem konkrétny príklad.

Zobraziť kód

Takže, poďme najprv ukázať, ako konať, ak potrebujete naučiť niekoho iného HTML. Potom budeme podrobnejšie zvážiť všetky ostatné otázky.

Najlepšia cesta

Metóda, ktorú budem opísať prvý, je trochu komplikovaný pre nováčikov, ale ako známy - pôjde, čítaj. Otvorte stránku a kliknite na pravé tlačidlo myši. Vyberte položku "Uložiť ako ..."

Plne uložte webovú stránku. Ako vidíte na screenshot, už som si vopred stiahol všetko. Tu máme dva priečinky.

Tam je všetko, čo potrebujete. Každý prvok. Ak to rozumiete, môžete rýchlo získať všetko, čo potrebujete. Takáto úloha sa však stále viac neuskutočniteľná. Stiahnutie sa nevykonáva. Čo robiť, ak je zakázané kopírovať stránku?

Toto je Google Chrome

Ako ste si pravdepodobne mohli všimnúť, najčastejšie používam Google Chrome a zistite, že niekto iný kód v tomto prehliadači je jednoduchší ako jednoduchý. Ako v zásade, a to ako v žiadnom inom. Systém nebude to, čo je podobné, ale identické. Otvoríme stránku, ktorej kód chceme vedieť a kliknite na tlačidlo AKÉKOĽVEK PRAVIDLOUJÚCIMU myši. V kliknutí na stránku, ktorá sa zobrazí, kliknite na kód stránky.

Nové okno otvorí list kódu, v ktorom je dosť ťažké pochopiť nováčik. Ale nebojte sa včas.

Ak potrebujete poznať kód iba jedného prvku, stačí na to, aby ste ho priviedli pomocou myši a pravým tlačidlom myši. Vyberte inú funkciu chrómu: "Zobraziť kódový kód".

Môžem mať napríklad záujem o to, ako sa logo vykonáva pri používaní obrazu alebo programovacieho jazyka? Koniec koncov, môžete nakresliť námestie s CSS. Mnohí špecialisti odporúčajú čo najviac informácií, ako je to možné, aby sa zaregistruli s kódom. Ako pracujete na populárnych stránkach?

Takže sa objavili potrebné informácie. Z vyššie uvedených HTML, v spodnej časti CSS. Ide o dva jazyky. Prvý je zodpovedný za textový komponent a druhý pre dizajn. Ak neboli žiadne CSS, potom by ste museli predpísať farbu zakaždým, veľkosť písma. Pre každú stránku je veľmi dlhá. Ale ak neboli žiadne HTML, nemali by sme texty. Hrubo vysvetlené, ale vo všeobecnosti je všetko tak.

Mimochodom, ak máte záujem o to, ako je to usporiadané tu, môžete sa pozrieť na spodnú časť odkazu na obrázok. Takže odpoviete.

Mozilla Firefox.

Ak chcete pracovať v Mazile, všetko bude tiež tiež. Otvorte stránku a kliknite na pravé tlačidlo myši. "Zdrojový kód stránky", ak chcete zobraziť celý celé kód.

Keď sa zobrazí na ľubovoľnú položku, je možné otvoriť svoj kód.

Tu sa údaje zobrazia v spodnej časti obrazovky a inak je tiež všetko.

Prehliadač Yandex

V prehliadači Yandex je všetko rovnako ako v predchádzajúcich dvoch verziách, otvorte stránku, pravé tlačidlo myši, pozri kód stránky.

Prinášame kurzor na položku, ak chceme poznať jeho kód.

Zobrazí sa tu presne rovnako ako v Chrome.

Opera

Nakoniec, operná.

Mimochodom, možno ste si všimli, že nie je potrebné používať myš. Ak chcete otvoriť kód, je tu rýchla kombinácia kľúčov a pre všetky prehliadače je to isté: Ctrl + U..

Pre položky: CTRL + SHIFT + C.

Takto vyzerá výsledok.

Bude to zaujímať o začiatočníkov

A teraz vidíte, ako všetko funguje. Nájdite si stránku a máte radi nejaký druh položky. Napríklad tento. Ako otvoriť kód položky, ktorú už poznáte.

Teraz ho skopírujte.

Používam, vložte tento kód do nového súboru HTML, v štítku tela (telo v angličtine).

Pozrime sa teraz, ako sa to všetko pozrieme do prehliadača.

Pripravený. Aby bol text zarovnaný pozdĺž okrajov a získal nazelenú farbu, musíte sa pripojiť k tomuto dokumentu CSS a skopírujte iný kód z lokality, z ktorého sme to torudovali.

Teraz to neurobím. Potrebuje viac času: a moje, a tvoje. Myslím si, že všetky detaily, ktoré budem opísať v mojich budúcich publikáciách. Prihláste sa na odber newsletteru a dozviete sa o prvom vzhľade článku.

Ak nemáte silnú silu, a chcete sa dozvedieť viac o HTML a CSS teraz, môžem odporučiť bezplatné kurzy školení podľa tradície.

Tu je 33 hodín, ktoré vám umožnia ovládať HTML - "Voľný HTML Course" .

A tu kompletné informácie o CSS - "Voľný CSS Course (45 video tutoriály!)" .

Teraz viete trochu viac. Želám vám úspech vo vašom úsilí. Na nové stretnutia!

Pri pohľade cez nespočetné miesta na internete, môžete nájsť také, že sa nám páči veľmi veľa. Okamžite vyplýva niekoľko otázok. Je stránka vykonaná pomocou sebapísaného kódu alebo akéhokoľvek CMS? Čo je to jeho štýly CSS? Aké je jeho meta tagy? A tak ďalej.

Existuje mnoho nástrojov, s ktorými môžete extrahovať informácie o stránke stránky stránok. Ale po ruke máme vždy pravé tlačidlo myši. Budem ho používať, na príklad mojich stránok.

Ako zobraziť kód stránky?

Ak chcete zobraziť zdrojový kód stránky stránky, musíte prejsť kurzorom myši na ktorejkoľvek oblasti webovej stránky (s výnimkou obrázkov a odkazov). Potom kliknite na pravé tlačidlo myši. Otvoríme okno s niekoľkými možnosťami (v rôznych prehliadačoch, môžu sa mierne líšiť). V prehliadači Google Chrome, napríklad sú to tímy:

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

Musíme kliknúť na zobraziť kód stránkyOtvorí sa kód stránky HTML stránky.

Zobraziť kód stránky: Čo je potrebné venovať pozornosť?

Takže kód stránky HTML je očíslovaný zoznam riadkov, z ktorých každý nesie informácie o tom, ako sa táto stránka vykonáva. Ak sa chcete rýchlo naučiť pochopiť toto obrovské množstvo značiek a špeciálnych znakov, musíte rozlišovať medzi rôznymi časťami kódexu.

Napríklad kódy vo vnútri značky hlavy obsahujú informácie pre vyhľadávače a webmasters. Nie sú zobrazené. Tu môžete vidieť, pre niektoré kľúčové slová sa táto stránka propaguje, pretože jeho názov a popis sú napísané. Môžete tiež nájsť odkaz tu tým, že sa dozvieme o fontoch Google používané na stránke.

Ak je stránka vytvorená na CMS WordPress alebo Joomla, bude tu tiež vidieť. Informácie o téme WordPress alebo šablóny webovej stránky sa zobrazujú v tejto oblasti. Môžete ju vidieť čítaním obsahu odkazov zvýraznených modrou farbou. V jednom linke viditeľnej šablóny lokality.

Napríklad:

//fonts.googleappis.com/css?faily\u003dsource+SSANS + PRO% 3A400% 2C400ITALIKU% 2C600 & VER \u003d 4.5.3.

Uvidíme štýly písma CSS. V tomto prípade sa písmo používa. Je to tu vidieť - Font-Face: 'Source Sans Pro'.

Táto stránka je optimalizovaná pomocou YOAST SEO Plain. Toto je zrejmé z tohto komentovaného kódexu kódu:

Táto stránka je optimalizovaná s Joast SEO Plugin v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Všetky informácie vo vnútri TAGE TAGE sa zobrazia prehliadač na obrazovke monitora. Tu vidíme kód stránky HTML a v dolnej časti je kód metrického skriptu Yandex. Je to oblečený s komentovaným značkou s textom:

/Yandex.metrika counter.

Poďme zhrnúť

Po strávení peknej povrchovej analýzy stránky hlavnej stránky stránky je možné dospieť k záveru, že táto stránka je vykonaná pomocou ktorých nástrojov. Videli sme o tom:

• Cms wordpress;
• Google Font Source Sans Pro;
• téma WordPress - Sydney;
• joast plugins;
• yandex metrický meter.

Teraz je princíp analýzy stránky HTML stránky lokality je pomerne zrozumiteľný. Nie je potrebné zachovať študovanú stránku otvorenú v prehliadači. Stránku stránky môžete uložiť do počítača pomocou kombinácií kľúčov CTRL + A, CTRL + C, CTRL + V. Vložte ho do akéhokoľvek textového editora (lepší zápisník ++) a uložte pomocou HTML Expansion. Tak môžete kedykoľvek študovať hlbšie a nájsť viac užitočných informácií pre seba.