Fiecare internaut are site-urile lui preferate pe care cheltuie perioadă lungă de timp. Și numai leneșii nu s-au gândit să vadă cum a fost creat și în ce constă. Nu va fi posibil să răspunzi la toate aceste întrebări, deoarece există multe modalități de a crea un site, dar să te uiți la comenzile și codurile din care constă este posibil și disponibil public pentru toată lumea.
O altă întrebare este dacă o persoană care nu este implicată în programare va înțelege unele dintre simbolurile care compun codul. Dar din exemplele care vor fi date mai jos oricare utilizator Google Chrome va putea vedea elemente individuale site-uri.
Cum să vizualizați codul sursă al unei pagini html într-un browser Google
Pentru a putea vizualiza codul paginii în Chrome, trebuie să accesați site-ul care vă interesează și să urmați acești pași:
Aceste două puncte diferă în funcție de funcționalitatea și conținutul de informații pentru utilizator, programator sau hacker. 
Care este diferența dintre codul paginii și doar comanda „Vizualizare cod”.
Analizând fiecare dintre aceste funcții, puteți scrie un articol separat. Pentru programatori, această diferență este semnificativă și înțeleg în ce cazuri este necesar să se folosească „Vizualizare cod” și în care „Vizualizare cod pagină” în browser Google Chrome.
Dar explicând pentru utilizatorul obișnuit, aceste funcții pot fi împărțite în următoarele scopuri:
- „Vizualizarea codului paginii” este necesară doar pentru a vedea combinația principală a paginii. Practic - aceasta este structura site-ului (fără modele suplimentare la fel de fișiere CSSși alte suplimente care au rămas în folderul creatorului site-ului). Această structură nu este potrivit pentru fabricare pagina proprie prin „copy-paste”, dar vă va permite să vedeți ce anume a făcut programatorul și în ce secvență, astfel încât site-ul din browserul Google Chrome să aibă un astfel de design extern.
- „Vizualizare cod” afișează o structură detaliată care evidențiază toate zonele care sunt afectate pe pagină. Dacă arăți spre cod specific listă - va evidenția elementul de pe site-ul căruia îi aparține.
- Vizualizarea codului paginii se deschide într-un browser separat, fără posibilitatea de a-l edita. Adică este potrivit doar pentru copierea și citirea codului site-ului. Dar este o caracteristică la fel de utilă.
- „Vizualizare cod” se poate modifica și puteți edita orice element într-un mod care vi se potrivește. Desigur, toate aceste modificări vor „vii” până când pagina este reîmprospătată, dar uneori este distractiv să treci prin acele setări și să înțelegi doar pentru ce este aceasta sau acea valoare și ce se va întâmpla dacă o schimbi. Nu trebuie să presupuneți că, făcând acest lucru, vă veți face rău dvs. sau site-ului - aceste modificări afectează doar codul Google Chrome și nu sunt conectate.
Luând în considerare întrebarea cum să vizualizați codul elementului
Dacă trebuie să răspundem la o astfel de întrebare, atunci se sugerează doar o variantă cu un exemplu. Pentru că este foarte greu să devii o persoană care înțelege acest subiect (dezvoltator web) într-un articol, dar este mult mai ușor să arăți cu un exemplu pentru ca întrebarea să fie rezolvată.
Funcționalitatea codului elementului este foarte largă, așa că luăm unul dintre cuvintele de pe site browser Google Crom. Am vrut să luăm în considerare ce cuvinte cheie (în cod va fi scris „cuvinte cheie”) au fost folosite pentru site-ul nostru. Pentru a face acest lucru, efectuăm următorul algoritm:
Alte modalități de a utiliza această funcție în browserul Google Chrome
În general, continuând să răspundem la întrebarea cum să privim codul elementului și de ce este necesar, ar trebui să enumerați funcțiile acestuia. Și anume, datorită capacității de a vizualiza codul unui element al oricărui site în browserul Google Chrome, putem:
- Vedeți structura site-ului pornind de la head ("antetul site-ului") și terminând cu end (comanda finală a oricărui program);
- Vizualizați toate funcțiile site-ului, și anume: link-uri către alte site-uri, module suplimentare de pe site-uri externe și prezența contoarelor încorporate pentru colectarea diverselor informații;
- Aflați dacă copierea de pe site este interzisă sau nu;
- Codul va înregistra toate linkurile către alte pagini ale site-ului, precum și designul acestora și acțiunile ulterioare după ce faceți clic pe ele.
Aceasta este departe de a fi o listă exhaustivă. Dar trebuie amintit că fără cunoștințe speciale - „citește” codul Pagini Google Chrome este aproape imposibil și datele rezultate utilizator obișnuit practic nu este nevoie.
Elementul „Vizualizare cod element” nu funcționează
Ar trebui spus imediat - fiecare site va fi cu acces deschis la codurile de elemente. Adică, chiar și cele mai populare și mai scumpe site-uri vor fi deschise pentru a-și vizualiza codul. Prin urmare, dacă elementul din browserul Google Chrome nu este activ sau dă o eroare, are următoarele motive posibile:
- Profilul utilizatorului este corupt;
- Prezența malware-ului pe computer;
- Blocarea printr-o anumită extensie pentru a crește performanța (chiar și asta poate fi).
Remedierea unui profil de utilizator corupt
A crea profil nou, trebuie să îl eliminați pe cel vechi de pe computer. Pentru a face acest lucru, faceți următoarele:
- Închideți Google Chrome și lansați sistemul încorporat browser Windows explorator.
- Intram in bara de adresa următoarea comandă: %LOCALAPPDATA%\Google\Chrome\User Data\.
- Când directorul se deschide, căutați folderul „Default” și adăugați „Backup” la numele acestuia pentru a obține următoarele: „Backup Default”.
- Acum, după o nouă lansare a browserului Chrome, va fi creat un nou profil.
Eliminarea programelor malware sau a resturilor acestuia
Dacă noul profil nu ne-a dat acces la codul elementului de pagină și tot vedem eroarea, ar trebui să facem următoarele:
- Deschiderea comenzii șir Windows("Run") și introduceți comanda "cmd" acolo.
- Introduceți următoarea comandă în linie: RD /S /Q „%WinDir%\System32\GroupPolicyUsers”.
- După confirmarea acțiunii, mergem în acest: RD / S / Q „% WinDir% \ System32 \ GroupPolicy”.
- Acum „gpupdate /force” (fără ghilimele).
Dacă totul a fost făcut corect, atunci după repornire computer google Chrome va deschide codul elementelor și browserul va funcționa normal.
Multă vreme pentru mine opțiunea „arată sursă pagini” a fost inutilă și neinteresantă. Pa învăţarea HTML pe Codecademy și aspectul propriilor mele site-uri nu au devenit noul meu hobby. Și atunci a apărut întrebarea: unde să găsești cazuri reale si imprumuta solutii interesante pentru "pușculița" ta? Răspunsul a fost surprinzător de simplu, ca toți genii: vizualizați codul sursă al paginii în Google Chrome! Împărtășesc cu voi descoperirile mele modeste.
Ce este codul sursă al paginii
Dacă tu, ca și mine, abia faci primii pași în programarea HTML, nu va fi de prisos să știi care este codul sursă al unei pagini.
Codul sursă, cunoscut și sub numele de codul HTML al paginii, este text în limbajul Hyper Text Markup Language (HTML). Include conținutul real al paginii (text, tabele) și etichete. Acestea din urmă joacă rolul de instrucțiuni pentru browser: cum să afișeze conținutul, ce fel de formatare să folosești, unde să inserezi un hyperlink sau un fișier media. Ei bine, pentru noi, programatorii începători, codul sursă este cel mai bun teren de antrenament: găsim un site interesant și privim, salvăm, folosim fragmente de succes. Cum?
Cum să vizualizați codul sursă în pagina browserului Google Chrome
Găsiți pagina care vă place. De exemplu, m-a interesat designul meniului site-ului. Există trei moduri de a deschide codul sursă în browserul Google Chrome:
- Faceți clic pe pictogramă meniul in dreapta colțul de sus browser și selectați „ Instrumente suplimentare". Printre altele, există o opțiune pentru „Vizualizare cod sursă”. Mărturisesc că îl folosesc rar. Pe aici: o mulțime de mișcări inutile. Se poate face și mai ușor.
- Apăsați combinația de taste Ctrl+U- deschide o nouă fereastră cu codul sursă;
- Pentru fanii meniului contextual: faceți clic dreapta pe pagină și selectați opțiunea „Vizualizare codul paginii”.
Ne-am descurcat sarcinii de a vizualiza codul HTML al paginii în browser. Trecem la cea mai interesantă etapă.
Cum să editați și să salvați codul sursă
Pentru a învăța cum să creați site-uri web, nu este suficient să citiți codul HTML al altcuiva. Trebuie să te joci cu el, să experimentezi, să faci modificări și să verifici rezultatul. Puteți chiar să începeți prin a compila câteva mostre de succes. Cum se editează și se salvează codul sursă?
Opțiunea 1. „Manual”
După ce am deschis codul sursă al paginii, sunăm meniul contextualși selectați opțiunea „Salvare ca” și salvați fișierul în HDD. Edităm fișierul în Notepad sau Notepad, salvăm modificările și deschidem prin browser. Rezultatele modificărilor noastre (reușite și nu atât de bune) se vor reflecta în fereastra browserului.
Opțiunea 2. Pentru profesioniști
Când „te joci” cu codul sursă în fiecare zi, procesul „salvare – deschidere – schimbare – salvare – verificare” este obositor. Pentru mine, am găsit o soluție sub forma instalării unui plugin pentru Google Chrome - Firebug Lite. Vă permite să editați și să salvați codul sursă fără a părăsi fereastra browserului.
Îndemânare modifica codul sursă al paginii – abilitate utilă pentru utilizatorul de internet avansat. Cu ajutorul înlocuirii codului HTML, puteți schimba deschide pagina web după cum vă place. În acest articol, vom spune cum se schimbă codul paginiiîn Google Chrome. Cu toate acestea, în alte browsere totul se face în același mod, așa că nu ar trebui să existe dificultăți.
Care este codul HTML al unei pagini?
Fiecare pagină pe care o deschideți în browser are propriul cod în limbă Marcaj HTML. Acest cod este etichete și text. Etichetele sunt un fel de etichete care spun browserului cum să afișeze o anumită parte a site-ului. Textul este conținutul paginii, ceea ce vede utilizatorul. De asemenea, pagina poate fi conectată Stiluri CSS, care a stabilit aspect elementele paginii. La schimba codul sursa site-ului nu trebuie să cunoașteți HTML și CSS în detaliu și în curând le veți vedea singur.
De ce să schimbi o pagină web?
Puteți modifica datele de pe site, puteți schimba textul mesajului, puteți face o captură de ecran falsă. Vă rugăm să rețineți că toate modificările sunt vizibile numai pentru dvs. și vor dispărea atunci când reîncărcați pagina. De asemenea, datele modificate nu vor fi reale. De exemplu, dacă nu am 10 USD și îl schimb în 100 USD, atunci nu voi mai avea bani. Este doar redarea paginii de către browser. Exemplu:
După:
De exemplu, voi lua același site și voi schimba anunțul anterior al articolului „” Deschid pagina principală în Google Chrome. Dau clic dreapta pe elementul pe care vreau să-l schimb, de exemplu, titlul anunțului și selectez „Vizualizare cod”.
În fereastra care se deschide, accesați fila Elemente și vedeți codul HTML al paginii. Trebuie să găsim textul care ne interesează. (evidențiat cu roșu)
Acum voi șterge textul vechi și voi introduce pe cel nou.
Gata, numele anuntului a fost schimbat. Acum voi schimba anunțul în sine, etichetele și categoria.
Puteți insera o altă imagine schimbând atributul src din eticheta img.
Căutând prin nenumărate site-uri de pe Internet, le puteți găsi pe cele care ne plac foarte mult. Imediat apar o serie de întrebări. Site-ul este realizat folosind cod auto-scris sau un fel de CMS? Care sunt stilurile lui CSS? Care sunt metaetichetele sale? etc.
Există multe instrumente care pot fi folosite pentru a extrage informații despre codul paginii unui site. Dar avem întotdeauna la îndemână butonul drept al mouse-ului. O vom folosi, folosind exemplul site-ului meu.
Cum se vede codul paginii?
Pentru a vizualiza codul sursă al unei pagini de site, trebuie să mutați cursorul mouse-ului peste orice zonă a paginii web (cu excepția imaginilor și a linkurilor). După aceea faceți clic pe butonul corect soareci. Se va deschide o fereastră cu mai multe opțiuni (în browsere diferite pot diferi usor). În browserul Google Chrome, de exemplu, acestea sunt comenzile:
- înapoi;
- redirecţiona;
- reîncărcare;
- Salvează ca;
- sigiliu;
- traduce în rusă;
- vizualizarea codului paginii;
- vizualiza codul.
Trebuie să facem clic pe vizualizarea codului paginii, iar codul html al paginii site-ului se va deschide în fața noastră.
Vizualizarea codului paginii: ce să cauți?
Deci, codul paginii HTML este o listă numerotată de linii, fiecare dintre ele conținând informații despre modul în care este realizat acest site. Să înveți rapid să înțelegi asta număr mare semne și caractere speciale, trebuie să faceți distincția între diferitele părți ale codului.
De exemplu, liniile de cod găsite în interior etichetă de cap conțin informații pentru motoare de căutareși webmasteri. Ele nu sunt afișate pe site. Aici puteți vedea cum Cuvinte cheie această pagină este promovată, deoarece titlul și descrierea ei sunt scrise. Puteți găsi și un link aici, făcând clic pe care aflăm despre familia de fonturi google folosită pe site.
Dacă site-ul este realizat pe CMS WordPress sau Joomla, atunci acesta va fi vizibil și aici. De exemplu, această zonă afișează informații despre Tema WordPress sau un șablon de site Joomla. O puteți vedea citind conținutul linkurilor evidențiate cu albastru. Un link arată șablonul site-ului web.
De exemplu:
//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
Vom vedea stilurile de font CSS ale paginii. ÎN acest caz este folosit fontul. Acest lucru poate fi văzut aici - font-family: 'Source Sans Pro'.
Acest site este optimizat cu plugin SEO. Yoast SEO. Acest lucru poate fi văzut din această secțiune de cod comentată:
Acest site este optimizat cu Plugin SEO Yoast v3.4.2 - https://yoast.com/wordpress/plugins/seo/
Toate informațiile din interior eticheta corporală, afișat de browser pe ecranul monitorului. Aici vedem codul html al paginii, iar în partea de jos este codul de script Yandex Metrics. Este împachetat într-o etichetă comentată cu textul:
/Yandex.Metrika contor
Rezumând
După o analiză destul de superficială a codului pagina principala site-ului, putem concluziona despre instrumentele cu care a fost realizată această pagină. Am vazut pe el:
- CMS WordPress;
- Font Google Source Sans Pro;
- Tema WordPress - Sydney;
- Pluginuri Yoast
- contorizează valorile Yandex.
Acum principiul analizei codului html al unei pagini de site este destul de clar. Nu este necesar să păstrați pagina supusă investigației deschisă în browser. Puteți salva codul paginii pe computer folosind combinațiile de taste ctrl + a, ctrl + c, ctrl + v. Lipiți-l în oricare editor de text(de preferință Notepad++) și salvați cu extensia html. Astfel, în orice moment îl poți studia mai profund și poți găsi mai multe informații utile pentru tine.
Este necesar să vedeți rapid toate modificările de pe site-ul în sine, fără a afecta fișierele și codul site-ului postat pe Internet. De exemplu, schimbarea schema de culori orice bloc, mutați un element care s-a mutat etc.
Pentru a face acest lucru, mulți webmasteri folosesc servere locale Denwer sau OpenServer rulând copie integrală site-ul pe computerul dvs. Această metodă este universală și potrivită pentru profesioniști, cu ea puteți verifica funcționarea diferitelor scripturi și plugin-uri, puteți experimenta modificarea designului și edita toate fișierele site-ului, iar după testare, puteți transfera modificările corespunzătoare direct pe site.
Pentru utilizatorii care sunt departe de arta webmaster, recomand folosirea unui browser în aceste scopuri. Deoarece folosesc Chrome, voi oferi instrucțiuni cu capturi de ecran pentru acest browser special. Prin analogie, puteți lucra cu Opera, Yandex.Browser, Mozilla Firefoxși alte browsere, principiul instrumentelor lor este similar.
Instrucțiunea 1: cum să vizualizați întregul cod HTML al site-ului în browser
Deschideți pagina web necesară a site-ului dvs. Facem clic dreapta pe elementul dorit, va apărea un meniu derulant contextual al browserului cu comenzile disponibile:
Figura 1. Vizualizarea întregului cod HTML al unei pagini web în browserul Chrome
Important: Comenzile din meniul derulant pot diferi, de exemplu, pentru elemente active(linkuri, imagini, videoclipuri) și inactiv (text, fundal, div-uri):
Figura 2. Meniul derulant al browserului Chrome
Prin urmare, dacă nu găsiți comanda de care aveți nevoie, faceți clic dreapta în altă parte sau utilizați tastele rapide ale browserului.
Revenind la Figura 1, arată comanda necesară pentru a vizualiza întregul cod HTML al paginii web originale, se numește „ Vizualizați codul paginii". Faceți clic pe comandă pentru a deschide filă nouă din cod complet pagina web originală, un mare plus pentru toate - vizualizarea este disponibilă cu evidențierea sintaxelor:
Figura 3. Fragment de cod pentru acest site
Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.
Modalități alternative de a vizualiza toate codurile HTML ale unei pagini web
Pentru mai mult acces rapid, puteți folosi alte moduri de a apela acest instrument
- În figura 1, vedem și asta comanda dată accesibil prin comanda rapidă de la tastatură
+ ; - Lipiți în bara de adrese a browserului vizualizare-sursă: site în loc de domeniul meu, lipiți adresa dvs.;
Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.
La început, unora li se poate părea că acest lucru nu este deloc instrumentul potrivit, dar vizualizarea întregului cod HTML al unui site este excelentă pentru a căuta în cod elementele necesare, pot fi linkuri, etichete, metaetichete, atribute și alte elemente.
Combinație de taste rapide
Figura 3. Căutare după codul site-ului
După ce faci o cerere către formular de căutare ecranul se va muta la primul element găsit, folosind săgețile vă puteți deplasa între ele și selectați pe cel de care aveți nevoie:
Figura 4. Căutare după cod HTML site-ul
Instrucțiunea 2: Cum să vizualizați și să editați codul HTML și CSS al site-ului web în browserul Google Chrome
Acum partea cea mai importantă, în care vă voi arăta cum puteți edita codul HTML și CSS al site-ului în browser. apoi transferați modificările în browser.
asa unealtă folositoareîntotdeauna disponibil în browser, experimentați cu alte comenzi care vă vor facilita editarea site-ului.
