Multă vreme, opțiunea „show page source code” a fost inutilă și neinteresantă pentru mine. Până acum, învățarea HTML la Codecademy și construirea propriilor site-uri nu au devenit noul meu hobby. Aici a apărut întrebarea: unde să găsești cazuri reale și să împrumuți soluții 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 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în colțul din dreapta sus al browserului și selectați „Mai multe instrumente”. Printre altele, există o opțiune pentru „Vizualizare cod sursă”. Sincer, folosesc rar această metodă: 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, apelăm meniul contextual și selectăm opțiunea „Salvare ca” și salvăm fișierul pe hard disk. 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.
Fiecare internaut are site-urile lui preferate pe care petrece mult 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 afișate mai jos, orice utilizator Google Chrome va putea vizualiza elemente individuale ale site-urilor.
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 browserul 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 sub formă de fișiere CSS și alte completări care au rămas în folderul creatorului site-ului). Această structură nu este potrivită pentru crearea propriei pagini prin copy-pasting, 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ă treceți cu mouse-ul peste un anumit cod de listă, acesta 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-ul web al browserului Google Chrome. 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 este aproape imposibil să „citești” codul unei pagini Google Chrome, iar datele primite practic nu sunt necesare unui utilizator obișnuit.
Elementul „Vizualizare cod element” nu funcționează
Trebuie spus imediat că fiecare site va avea acces liber la codurile de elemente. Adică, chiar și cele mai populare și 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
Pentru a crea un 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 browserul Windows Explorer încorporat.
- Introduceți următoarea comandă în bara de adrese: %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:
- Deschideți linia de comandă Windows (Run) și tastați „cmd” în el.
- 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ă repornirea computerului, Google Chrome va deschide codul elementelor și browserul va funcționa normal.
Mărimea, culoarea unor elemente importante ale blogului - cum ar fi titlul blogului sau postării, cu atât mai mult etichetă și altele asemenea. Am căutat manual codul necesar, experimentând domeniul de testare, pe baza căruia a fost scris ulterior articolul.
Și recent a fost nevoie să schimbi culoarea link-urilor. După ce am strâns o grămadă de literatură pe această temă, mi-am dat seama de un lucru simplu: fiecare dă exemple din propriile șabloane, dar toți avem șabloane diferite și e bine dacă codul din exemplu este măcar puțin asemănător: nu se plânge, deci Îl voi găsi oricum rulând - folosind metoda poke.
Numărul nu a trecut cu codul de link. Toate au indicat căi complet diferite. M-am întrebat dacă există un instrument simplu și precis, cum să găsiți codul html potrivit pe orice site. Mulți bloggeri, chiar și cu experiență, le este dificil să modifice ușor șablonul. Nu este nimic de care să vă faceți griji, pentru că fiecare are propriile interese și obiective pentru crearea unui site.
Dacă doriți să faceți mici modificări șablonului cum ar fi modifica orice titlu, titlul articolelor și titlurilor, culoarea și dimensiunea fonturilor și a linkurilor, de obicei este suficient să înveți un principiu simplu, despre care se discută în acest articol. Există însă și cazuri complexe care necesită fie un studiu mai profund al html și css, fie ajutorul unui specialist.
Într-o zi, un prieten m-a rugat să aflu unde să schimb culoarea panoului de titluri din șablonul său. A încărcat o temă într-un subdomeniu de testare. Setările pentru acest element nu au fost stocate în style.css, ci într-un alt fișier, așa că o persoană nu l-a putut găsi.
Cum să găsiți și să schimbați codul html și css al site-ului
Dacă nu vă plac articolele lungi, acesta este pentru dvs. la finalul articolului un tutorial video care arată cum puteți vedea codul html al site-ului folosind Notepad ++ și puteți face modificări în designul oricărui șablon folosind un exemplu despre cum să schimbați culoarea fontului. Există și alte subtilități ale abordarii blogului în videoclip. Iar pentru cei care sunt mai aproape și mai înțeleși de text, mai jos este o analiză detaliată a subiectului cu capturi de ecran.
httpv://youtu.be/uIlVvwCt2ho
Termeni și concepte
Ar fi mai corect să intitulezi articolul „ cum să găsești codul css„, dar am decis să mă opresc la numele „greșit”, pentru că, practic, răspunsul la această întrebare este căutat în html. CSS și HTML sunt lucruri foarte diferite, chiar dacă sunt două părți ale aceluiași sistem. Există multe articole tehnice pe Internet, ne va fi suficient să înțelegem aici că:
- HTML- responsabil pentru structura site-ului (ce urmează ce, în ce ordine etc.). Aceasta este fundația pe care este construit șantierul. Dacă o comparăm cu o casă, atunci aceasta este aspectul ei, amenajarea camerelor.
- css- responsabil de design (ce fonturi, dimensiuni, culori etc.). Acesta este stilul general al casei și stilul camerelor sale individuale: ce tapet va fi, lămpi, perdele, mobilier. Prin urmare, documentul, care prescrie coduri css, numită „foaia de stil”
Și dacă te-ai întrebat cum să schimbi, de exemplu, culoarea antetului site-ului, dimensiunea fontului din texte sau culoarea titlurilor din bara laterală, atunci trebuie să cauți toate acestea în foaia de stil CSS. Acesta este singurul lucru demn de înțeles pentru început, pentru a face personal modificări codului.
Îmi place să transform complexul în simplu. Îmi amintesc de mult, când aveam prima mașină, foarte veche, cablajul era putrezit, siguranțele se ardeau adesea și de fiecare dată o trăgeam la benzinărie. Imaginează-ți câți bani au fost aruncați, în ciuda faptului că o înlocuire independentă, după cum s-a dovedit, costă un ban.
Odată m-am uitat la ce face exact maestrul. Inca nu stiu cum functioneaza siguranta. Dar știu unde să-l schimb). Nu aș repara singur motorul și nu este dificil să înlocuiți siguranța. La fel este și cu site-urile web.
Dacă nu doriți să deveniți programator, atunci nu este nevoie să înțelegeți profund programarea. Este suficient să înțelegeți clar ce este destinat pentru ce, unde să îl căutați și cum să îl schimbați. Este mai bine să schimbați singur ceea ce puteți face și să lăsați totul în seama specialiștilor. Articolul despre are un link util pe acest subiect.
Trebuie să fii un expert în toate?
În blogurile seo, există adesea discuții despre dacă un începător trebuie să înțeleagă profund html-ul sau chiar mai bine, să învețe cum să scrie site-uri pe cont propriu, astfel încât totul să fie unic... Ei bine, nu știu - pentru fiecare a lui, și aici cineva este mai aproape. Mă interesează puțin mai mult, așa că acum mai studiez cu Vladimir. În noiembrie a acestui an, Vladimir și-a deschis propriul blog. Blogul lui este realizat pe cel mai simplu șablon gratuit, l-a modificat doar puțin pentru el.
După 10 zile de existență, blogul a ocupat locul 104 în clasamentul tuturor site-urilor Runet cu un trafic de aproximativ 1,5 mii de persoane pe zi. Timp de 10 zile. Deci care e treaba? Vladimir este bine versat în html, poate comanda și cumpăra un șablon unic pentru el. Aici trebuie să înțelegi asta secretul nu constă în tipare, ci în utilitatea informațiilor.
Unde se ascunde codul html?
Scuze pentru digresiune, să revenim la codurile noastre). Să presupunem că doriți să schimbați culoarea fontului titlului blogului. Vom lua în considerare exemplul site-ului meu de testare.
- Deschiderea site-ului în browserul Google Chrome (dacă nu îl folosiți încă, instalați-l - este bine ascuțit pentru lucrul cu site-uri web, are o mulțime de instrumente încorporate).
- Mutați cursorul mouse-ului peste elementul pe care doriți să îl schimbați . În acest caz, titlul blogului. Facem clic pe el cu mouse-ul „dreapta” și în fereastra care apare, selectăm VIEW ELEMENT CODE.
IMPORTANT: a nu se confunda cu VIZIUNEA CODUL PAGINII! Nu avem nevoie de întreaga pagină acum, ci doar de un element separat.
Facem clic pe el - apare o fereastră de vizualizare a codului în partea de jos a browserului:
Linia de cod pe care o modificăm este evidențiată cu roșu.
Însă zona evidențiată cu albastru conține ceea ce căutăm. Aici puteți găsi linia exactă (nu aproximativă) de cod responsabilă pentru fonturi, culoare, dimensiune, evidențiere și multe altele. În acest fel puteți afla ORICE cod al oricărui element al oricărui șablon.
Găsim linia dorită în blocul evidențiat cu albastru. În dreapta există un glisor, puteți derula și găsi linia dorită.
Principiul general, unde se caută:
Nume font - în linia FONT FAMILY
Dimensiunea fontului - în linia FONT SIZE
Culoare font - în linia COLOR
Iată trei linii principale care schimbă numele, dimensiunea și culoarea fontului oricărui element. În dreapta, linia de stil CSS oferă poziția liniei în document. Dacă trebuie să schimbați un alt element (de exemplu, trebuie să aflați unde se află linia, în care puteți schimba culoarea barei de meniu sau culoarea linkurilor), totul se face exact în același mod .
ATENŢIE:
linia pe care o vom copia este evidențiată cu roșu în figură,
pentru a-l găsi mai târziu în foaia de stil.
4. Copiați linia. Deoarece in acest exemplu dorim sa schimbam culoarea numelui site-ului, copiez linia evidentiata in a doua poza cu un dreptunghi rosu. În șablonul meu, ea este responsabilă pentru schimbarea culorii numelui site-ului:
#header h1 a, #header h1 a:vizitat (
Găsim linia dorită în fișierul „style sheet (style.css)”. Acest lucru este deja făcut în admin. Vă îndemn, până când veți avea încredere și înțelegere completă, să efectuați toate experimentele pe un subdomeniu de testare pentru a exclude .
Deci, accesați panoul de administrare: CONSOLĂ - APARIȚIE - EDITOR. În bara laterală din dreapta găsim fișierul STYLE TABLE (STYLE.CSS), deschideți-l.
Acum deschidem bara de căutare cu tastele CTRL + F: va apărea o fereastră de linie goală în fereastra de sus. Lipiți în el linia pe care ați copiat-o la pasul 4.
Și veți vedea cum această linie este evidențiată în foaia de stil (în figură - în portocaliu):
Facem o modificare a elementului. În cazul nostru, schimbăm culoarea fontului, așa că în linia COLOR înlocuim o altă valoare - culoarea pe care o dorim. În exemplu, culoarea este neagră, semnificația sa este:
Puteți alege o culoare în orice serviciu web de paletă de culori: introduceți în motorul de căutare „Web Color Palette” și selectați-o pe cea dorită. Selectăm o culoare, îi copiem valoarea digitală și o înlocuim cu grijă pe cea veche. apoi faceți clic pe UPDATE FILE și mergeți să vedeți ce s-a întâmplat.
Dacă modificările nu sunt afișate, pentru ultima oră și mergeți din nou la pagină - de data aceasta ar trebui să fie afișat totul.
Acest lucru este descris de mult timp, dar în practică totul se face rapid, mai ales când apare o abilitate inițială.
Mai detaliat, cum să schimbați anumite elemente:
Asta e tot pentru azi, nu te voi mai tortura cu coduri. Sper că acum tu însuți vei putea găsi și modifica cu ușurință orice element al codului html, sau mai degrabă, codul css - da, experții mă vor ierta pentru simplificare. Și dacă nu înțelegeți, vizitați pagina oricum. Nu pierde timpul cu prostii.
Vă sugerez să vizionați un videoclip de Artem Abramovici despre cum să căutați și să găsiți orice cuvânt sau element în orice temă/șablon, pentru orice motor (wordpress, joomla etc.) și înlocuiți-l cu ceea ce aveți nevoie:
Vă rugăm să distribuiți dacă vă place:
Ați putea fi, de asemenea, interesat să știți:
Îndemânare modifica codul sursă al paginii- o abilitate utilă pentru un utilizator avansat de internet. Cu ajutorul înlocuirii codului HTML, puteți schimba pagina web deschisă după cum doriți. Î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 limbajul de marcare 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, stilurile CSS pot fi conectate la pagină, care stabilesc aspectul elementelor 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.
Ctrl+U
Cum se vede codul sursă al unui element?
Faceți clic dreapta pe elementul de interes al paginii.
Google Chrome: „Vedeți codul elementului”
Opera: "Inspectează elementul"
Firefox: „Analiza element”
În alte browsere, căutați un element de meniu similar.
Salutare tuturor!
Mai ales la începutul articolului am expus întreaga idee, pentru cei care caută un răspuns rapid.
Informația poate fi cunoscută de mulți, dar deoarece scriu pentru bloggeri începători, programatori web și alți prospectori, acest articol de ajutor trebuie să fie prezent.
În viitor, veți studia cu siguranță codul sursă al paginilor și elementelor individuale.
Să aruncăm o privire la un exemplu specific despre cum puteți utiliza vizualizarea sursă a paginii.
De exemplu, vrem să vedem ce cuvinte cheie sunt folosite pentru o anumită pagină. Mergem la pagina web care ne interesează și apăsăm Ctrl + U. Codul sursă al acestei pagini se va deschide într-o fereastră separată sau într-o filă separată. Apăsați Ctrl+F pentru a căuta o bucată de cod. În acest caz, introducem în caseta de căutare cuvântul „ Cuvinte cheie". Veți fi redirecționat automat către un fragment de cod cu această metaetichetă și cuvântul căutat va fi evidențiat.
Prin analogie, puteți căuta și studia alte fragmente de cod.
Vizualizarea întregului cod sursă al unei pagini nu este în cele mai multe cazuri foarte convenabilă, astfel încât în toate browserele este posibil să vizualizați codul unui singur element sau fragment.
Să folosim un exemplu concret pentru a vedea codul elementului. De exemplu, să vedem dacă linkul are un atribut nofollow. Facem clic dreapta pe linkul care ne interesează și în meniul contextual derulant, facem clic stânga pe element „Vedeți codul elementului” sau similar (în funcție de browser). Mai jos, într-o fereastră specială pentru analiza codului, obținem ceva similar.
Vedem că rel="nofollow” este prezent în codul de link. Aceasta înseamnă că această legătură nu va „scurge” și PR. Vom vorbi despre asta mai detaliat în articolele viitoare. Deocamdată, important este că acum știți cum să vizualizați codul sursă al paginii și codul sursă al unui element individual.
