Dimensiunea și culoarea unor elemente importante ale blogului - cum ar fi titlul blogului sau postării, eticheta mai mult ș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 trebuit să schimb culoarea link-urilor. Cernind 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: fără să ne văitam, Îl voi găsi în continuare căutând - folosind metoda poke.
Numărul nu a funcționat cu codul de legătură. Toată lumea a indicat căi complet diferite. M-am întrebat dacă există un instrument simplu și precis, cum să găsiți codul html necesar pe orice site web. Mulți bloggeri, chiar și cu experiență, au dificultăți în modificări minore ale șablonului. Nu este nimic în neregulă cu asta, pentru că fiecare are propriile interese și obiective pentru crearea unui site web.
Dacă doriți să faceți mici modificări șablonului, de ex. modifica orice titlu, titlul articolelor și secțiunilor, culoarea și dimensiunea fonturilor și a linkurilor, De obicei, este suficient să înveți principiul simplu discutat î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 cunoscut m-a rugat să aflu unde să schimb culoarea panoului de categorii din șablonul său. A încărcat un subiect î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 unui site
Dacă nu vă plac articolele lungi, acesta este pentru dvs la finalul articolului un tutorial video care spune cum puteți vedea codul html al site-ului web folosind Notepad++ și puteți modifica designul oricărui șablon folosind un exemplu despre cum să schimbați culoarea fontului. În videoclip există și alte subtilități ale manipulării unui blog. 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ă merg cu numele „greșit”, pentru că, practic, răspunsul la această întrebare se găsește î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, aici ne va fi suficient să înțelegem că:
- HTML— este responsabil pentru structura site-ului (ce urmează ce, în ce ordine etc.). Aceasta este baza pe care este creat site-ul. Dacă o comparăm cu o casă, atunci aceasta este amenajarea ei, amenajarea camerelor.
- CSS— este responsabil pentru design (ce fonturi, dimensiuni, culori etc.). Acesta este stilul general al casei și stilul camerelor sale individuale: ce fel de tapet va fi, lămpi, perdele, mobilier. Prin urmare, documentul care precizează coduri css, numită „foaia de stil”
Și dacă vă întrebați cum să schimbați, de exemplu, culoarea titlului site-ului, dimensiunea fontului din texte sau culoarea antetelor din bara laterală, atunci trebuie să căutați toate acestea în foaia de stil CSS. Acesta este singurul lucru care merită înțeles mai întâi pentru a face singur modificări codului.
Îmi place să simplific complexul. Îmi amintesc cu mult timp în urmă, când am avut prima mașină, era foarte veche, cablajul era putrezit, siguranțele se ardeau adesea și de fiecare dată o remorcam la benzinărie. Imaginați-vă câți bani s-au irosit, în ciuda faptului că înlocuirea dvs., după cum se dovedește, costă bănuți.
Într-o zi 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 vrei să devii programator, atunci nu este nevoie să ai o înțelegere profundă a programării. Este suficient de clar să înțelegeți ce este destinat pentru ce, unde să îl căutați și cum să îl schimbați. Este mai bine să schimbi singur ceea ce poți și să lași totul în seama specialiștilor. Articolul despre are un link util pe acest subiect.
Trebuie să fii un expert în toate?
Există adesea discuții pe blogurile SEO despre dacă un începător trebuie să aibă o înțelegere profundă a HTML, sau chiar mai bine, să învețe cum să scrie singuri site-uri web, astfel încât totul să fie unic. Ei bine, nu știu - pentru fiecare a lui, și aici ce este mai aproape de cine este mai aproape. Sunt puțin mai interesat, așa că acum învăț mai multe de la Vladimir. În noiembrie a acestui an, Vladimir și-a deschis propriul blog. Blogul lui a fost realizat pe cel mai simplu șablon gratuit, l-a modificat doar puțin pentru a se potrivi.
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. In 10 zile. Deci care e treaba? Vladimir cunoaște bine HTML și poate comanda și cumpăra un șablon unic. Deci trebuie să înțelegi asta Secretul nu constă în șabloane, ci în utilitatea informațiilor.
Unde este ascuns codul html?
Scuze pentru digresiune, să revenim la codurile noastre). Să presupunem că doriți să schimbați culoarea fontului titlului blogului dvs. Să ne uităm la exemplul site-ului meu de testare.
- Deschideți site-ul în browserul Google Chrome (dacă nu îl utilizați încă, instalați-l - este bine conceput pentru a lucra cu site-uri web, are o mulțime de instrumente încorporate).
- Mutăm cursorul mouse-ului peste elementul pe care urmează să-l schimbăm . În acest caz - numele blogului. Facem clic dreapta pe el și în fereastra care apare, selectăm VIEW ELEMENT CODE.
IMPORTANT: nu confundați acest lucru cu VIZIUNEA CODUL PAGINII! Nu avem nevoie de întreaga pagină acum, doar de un element separat.
Faceți 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 etc. În acest fel puteți afla ORICE cod al oricărui element al oricărui șablon.
Găsiți linia dorită în blocul evidențiat cu albastru. Există un glisor în partea dreaptă, puteți derula și găsi linia de care aveți nevoie.
Principiul general al unde să cauți lucrurile:
Nume font - în linia FONT FAMILY
Dimensiunea fontului - în linia FONT SIZE
Culoare font - în linia COLOR
Iată trei linii principale în care numele, dimensiunea și culoarea fontului oricărui element se modifică. În dreapta în linia de stil css este dată poziția liniei în document. Dacă trebuie să schimbați un alt element (de exemplu, trebuie să aflați unde este linia unde puteți schimba culoarea barei de meniu sau culoarea linkurilor), totul se face exact la fel.
ATENŢIE:
Linia pe care o vom copia este evidențiată cu roșu în figură,
astfel încât să îl găsiți ulterior în foaia de stil.
4. Copiați linia. Deoarece în acest exemplu dorim să schimbăm culoarea numelui site-ului, copiez linia evidențiată în dreptunghiul roșu din a doua poză. În șablonul meu, este responsabil pentru schimbarea culorii titlului site-ului:
#header h1 a, #header h1 a:vizitat (
Găsiți linia necesară în fișierul „foaia de stil (style.css)”. Acest lucru este deja făcut în panoul de administrare. Cer cu tărie ca, deși nu există încredere și înțelegere completă, toate experimentele să fie efectuate 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 deschideți linia de căutare folosind tastele CTRL + F: va apărea o fereastră de linie goală în fereastra de sus. Lipim în el linia pe care am copiat-o la pasul 4.
Și veți vedea cum va fi evidențiată această linie în foaia de stil (în portocaliu în imagine):
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 de paletă de culori web: introduceți „Paletă de culori web” într-un motor de căutare și selectați-o pe cea dorită. Selectăm o culoare, îi copiem valoarea digitală și o înlocuim cu grijă cu cea veche. după care facem clic pe UPDATE FILE și mergem să vedem 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.
Este nevoie de mult timp pentru a descrie, dar în practică totul se face rapid, mai ales când apare îndemânarea inițială.
Mai detaliat, cum să schimbați anumite elemente:
Asta e tot pentru azi, nu te mai deranjez cu coduri. Sper că acum tu însuți poți găsi și schimba cu ușurință orice element al codului html, sau mai bine zis, codul css - experții să mă ierte că l-am simplificat. Și dacă nu vă dați seama, vizitați totuși pagina. Nu-ți pierde timpul cu prostii.
Vă sugerez să vizionați videoclipul lui 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-a plăcut:
Ați putea fi, de asemenea, interesat să știți:
1 vot O zi bună, dragi cititori ai blogului meu. Uneori găsiți o caracteristică frumoasă pe un site web și începeți să vă întrebați cum a obținut creatorul un efect atât de interesant.
Se pare că răspunsul este destul de simplu. Și dacă aveți anumite abilități, puteți colecta multe dintre aceste caracteristici și puteți crea propriul site unic într-un timp scurt.
Astăzi vom vorbi despre cum să deschideți codul unei pagini, un anumit element și să învățăm cum să folosiți această abilitate în beneficiul dumneavoastră.
Cunoștințe de bază de cod
Site-ul meu este destinat începătorilor și mai întâi aș dori să vorbesc pe scurt despre site-uri și cod în general.
Pentru a desena o imagine, apoi tăiați-o în părți mici, scrieți codul, astfel încât browserul să reasambla toate elementele într-un singur întreg. Totul pare foarte complicat? Deloc și nu are rost să te întristezi din cauza asta.
Acesta este modul în care sunt create site-uri web de înaltă calitate. Dacă vrei, implică-te în această chestiune și studiază-o; dacă nu vrei, nimeni nu te poate forța.
Voi spune un singur lucru... nimic nu este mai plăcut decât să vezi cum cuvintele de neînțeles pe care le-ai scris se transformă într-un singur întreg și prind viață: linkurile funcționează, butoanele se mișcă, imaginile se mișcă, textul se târăște. Cred că știu cum s-a simțit Victor Frankenstein.
Când începi să înțelegi limbajul secret și vezi că totul este de fapt mult mai simplu decât părea inițial, nu poți să nu crezi în propriile tale forțe și capacități ale creierului. Este foarte misto.
Cum sunt realizate site-urile web? În mod ideal, în primul rând. El doar pictează un tablou. De exemplu, așa cum se arată în imaginea de mai jos. Deocamdată este doar o imagine, o fotografie. Niciun link nu funcționează, când dați clic nu mergeți nicăieri, nu se efectuează nicio căutare.
Conform acestui desen. Uită-te la captura de ecran de mai jos. Puteți crede că acesta este un set ridicol și foarte complex de simboluri. De fapt, totul nu este atât de complicat, există un anumit algoritm.
Există doar aproximativ 150 de etichete și fiecare dintre ele este responsabilă pentru o anumită acțiune: link, silabe, bold, culoare, titlu și așa mai departe. Înțelegerea lor nu este atât de dificilă dacă aveți dorință și nu vă deranjează timpul.
Datorită cunoașterii acestor atribute, puteți rezolva aproape orice problemă. Dar fiecare dezvoltator își găsește propriile modalități de a atinge obiectivul.
Creatorii cu experiență văd imediat cum să obțină rezultate, în timp ce alții trebuie să gândească, să caute răspunsul în articole sau în codul sursă al concurenților. Pur și simplu iau partea necesară de pe un site terță parte și o editează singuri. Acest lucru scurtează semnificativ procesul de lucru.
Puțin mai târziu, vă voi arăta un exemplu concret.
Vedeți codul
Deci, permiteți-mi mai întâi să vă arăt cum să acționați dacă trebuie să aflați codul html al altcuiva. Apoi ne vom uita la toate celelalte întrebări mai detaliat.
Cel mai bun mod
Metoda pe care o voi descrie mai întâi este puțin complicată pentru începători, dar ca introducere, citiți-o. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. Selectați „Salvați ca...”
Salvați întreaga pagină web. După cum puteți vedea în captură de ecran, am descărcat deja totul în avans. Aici avem două foldere.
Tot ce ai nevoie este aici. Fiecare element. Dacă înțelegeți acest lucru, puteți obține rapid tot ce aveți nevoie. Dar o astfel de sarcină devine din ce în ce mai imposibilă. Nu există nicio descărcare. Ce să faci dacă este interzisă copierea unei pagini?
Acesta este Google Chrome
După cum probabil ați observat deja, eu folosesc cel mai adesea Google Chrome și să învăț codul altcuiva în acest browser este la fel de ușor ca decojirea perelor. Ca în principiu cu oricare altul. Schema nu numai că va fi similară, ci și identică. Deschideți pagina al cărei cod vrem să-l cunoaștem și faceți clic dreapta oriunde. În fereastra care apare, faceți clic pe „Vizualizare codul paginii”.
O foaie de cod se va deschide într-o fereastră nouă, ceea ce este destul de greu de înțeles pentru un începător. Dar nu vă alarmați dinainte.
Dacă trebuie să cunoașteți codul unui singur element, treceți cu mouse-ul peste el și faceți clic dreapta. Selectați o altă funcție Chrome: „Vedeți codul elementului”.
De exemplu, m-ar putea interesa modul în care a fost realizat logo-ul, folosind o imagine sau un limbaj de programare? La urma urmei, puteți desena un pătrat folosind CSS. Mulți experți recomandă să scrieți cât mai multe informații posibil în cod. Cum funcționează pe site-uri populare?
Acum au apărut informațiile necesare. html în partea de sus, css în jos. Acestea sunt două limbi. Primul este responsabil pentru componenta text, iar al doilea pentru design. Dacă nu ar exista CSS, atunci ar trebui să specificați culoarea și dimensiunea fontului de fiecare dată. Pentru fiecare pagină, aceasta este foarte lungă. Dar dacă nu ar exista html, atunci nu am avea texte. Am explicat-o aproximativ, dar, în general, așa este.
Apropo, dacă sunteți interesat de modul în care funcționează aici, vă puteți uita la linkul către imaginea de mai jos. Iată răspunsul tău.
Mozilla Firefox
Dacă vă place să lucrați în mastic, atunci totul va fi exact la fel. Deschideți pagina și faceți clic pe butonul din dreapta al mouse-ului. „Codul sursă paginii” dacă doriți să vedeți întregul cod.
Când treceți cu mouse-ul peste un element, puteți deschide codul acestuia.
Aici datele sunt afișate în partea de jos a ecranului, dar în rest totul este exact la fel.
browser Yandex
În browserul Yandex, totul este exact la fel ca în cele două opțiuni anterioare, deschideți pagina, faceți clic dreapta, vedeți codul paginii.
Plasăm cursorul peste un element dacă vrem să aflăm exact codul acestuia.
Totul este afișat aici exact la fel ca în Chrome.
Operă
Și în sfârșit, Opera.
Apropo, poate ai observat că nu trebuie să folosești un mouse. Există o comandă rapidă de la tastatură pentru a deschide codul și este aceeași pentru toate browserele: CTRL+U.
Pentru elemente: Ctrl+Shift+C.
Așa arată rezultatul.
Acest lucru va fi interesant pentru începători
Acum uite cum funcționează totul. Găsiți un site și vă place foarte mult un element. De exemplu, acesta. Știți deja cum să deschideți codul elementului.
Acum copiați-l.
Folosesc , lipim acest cod într-un fișier html nou, în eticheta body (body în engleză).
Acum să vedem cum va arăta totul în browser.
Gata. Pentru ca textul să fie aliniat la margini și să dobândească o culoare verzuie, trebuie să conectați css la acest document și să copiați un alt cod de pe site-ul de pe care l-am copiat pe acesta.
Nu voi face asta acum. Acest lucru necesită mai mult timp: atât al meu, cât și al tău. Cred că voi descrie toate detaliile în viitoarele mele publicații. Abonează-te la newsletter și fii primul care află când apare un articol.
Dacă nu suportați, dar doriți să aflați mai multe despre html și css acum, atunci vă pot recomanda în mod tradițional cursuri de formare gratuite.
Iată 33 de lecții care vă vor permite să stăpâniți html - „Curs gratuit despre HTML” .
Și aici sunt informații complete despre css - „Curs gratuit despre CSS (45 de lecții video!)” .
Acum știi puțin mai mult. Îți doresc succes în demersurile tale. Ne mai vedem!
Fiecare internaut are propriile site-uri preferate pe care petrece mult timp. Și numai leneșii nu s-au gândit să se uite cum a fost creat și în ce constă. Este imposibil să răspunzi la toate aceste întrebări, deoarece există multe modalități de a crea un site web, dar să te uiți la comenzile și codurile care îl compun este posibil și disponibil public pentru toată lumea.
O altă întrebare este dacă o persoană care nu este implicată în programare va înțelege vreunul dintre simbolurile care compun codul. Dar din exemplele care vor fi date 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ă efectuați următorii pași:
Aceste două elemente diferă prin funcționalitatea și informațiile 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:
- „Vizualizare codul 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 rămân în folderul creatorului site-ului). Această structură nu este potrivită pentru crearea propriei pagini prin „copiere-lipire”, dar vă va permite să vedeți exact ce a făcut programatorul și în ce secvență pentru a vă asigura că site-ul din browserul Google Chrome are un astfel de design extern.
- „Vizualizare cod” afișează o structură detaliată, evidențiind 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 aceasta nu este o funcție mai puțin utilă.
- „Vizualizare cod” este modificabil și puteți edita orice element într-un mod convenabil pentru dvs. 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 de ce este nevoie de această sau atare valoare și ce se va întâmpla dacă o schimbi. Nu trebuie să presupuneți că, prin astfel de acțiuni, vă veți face rău dvs. sau site-ului - aceste modificări afectează doar codul Google Chrome și nu intră online.
Luăm în considerare întrebarea cum să vedem codul elementului
Dacă ar fi să răspundem la o astfel de întrebare, atunci singura opțiune care se sugerează este un exemplu. Pentru că într-un articol este foarte greu să devii o persoană care înțelege acest subiect (dezvoltator web), dar să arăți cu un exemplu astfel încât întrebarea să fie rezolvată este mult mai ușor.
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ăspundeți la întrebarea cum să priviți codul unui element ș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:
- Vezi structura site-ului pornind de la head (“site header”) ș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 nu este în niciun caz o listă finită. 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 pentru un utilizator obișnuit.
Elementul „Vizualizare cod element” nu funcționează
Trebuie spus imediat că fiecare site va avea acces deschis la codurile de elemente. Adică, chiar și cele mai populare și mai scumpe site-uri vor fi deschise pentru vizualizarea codului lor. Prin urmare, dacă elementul din browserul Google Chrome nu este activ sau generează o eroare, are următoarele motive posibile:
- Profilul utilizatorului este corupt;
- Prezența malware pe computer;
- Blocarea printr-o anumită extensie pentru a crește performanța (chiar și acest lucru se poate întâmpla).
Remedierea unui profil de utilizator deteriorat
Pentru a crea un profil nou, trebuie să-l ștergeți pe cel vechi de pe computer. Pentru a face acest lucru facem 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, astfel încât să arate astfel: „Backup Default”.
- Acum, după repornirea browserului Chrome, va fi creat un nou profil.
Îndepărtăm programele malware sau rămășițele acestuia
Dacă noul profil nu ne oferă acces la codul elementului de pagină și încă vedem eroarea, ar trebui să facem următoarele:
- Deschideți linia de comandă 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, introduceți acest lucru: 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.
Ctrl+U
Cum pot vedea codul sursă al unui element?
Faceți clic dreapta pe elementul de interes al paginii.
Google Chrome: „Vedeți codul elementului”
Operă: "Inspectează elementul"
Firefox: „Analiza element”
În alte browsere, căutați un element de meniu cu un înțeles similar.
Salutare tuturor!
Am expus totul în mod special la începutul articolului, 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 referință este un must-have.
În viitor, veți studia cu siguranță codul sursă al paginilor și elementelor individuale.
Să ne uităm la un exemplu specific despre cum puteți utiliza vizualizarea codului sursă al unei pagini.
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 un fragment de cod. În acest caz, introducem cuvântul „ Cuvinte cheie". Veți fi redirecționat automat către o bucată 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 element sau fragment individual.
Să folosim un exemplu specific de vizualizare a codului unui element. De exemplu, să vedem dacă linkul are un atribut nofollow. Faceți clic dreapta pe linkul care ne interesează și în meniul contextual derulant, faceți 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ă codul de link conține rel="nofollow” . Aceasta înseamnă că PR nu va „scurge” prin acest link. Vom vorbi despre asta mai detaliat în articolele următoare. Acum, lucrul important este că acum știți cum să vizualizați codul sursă al paginii și codul sursă al unui element individual.
Am lansat o nouă carte, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make them to Love with Your Brand.
Codul sursă al unui site este o colecție de markup HTML, stiluri CSS și scripturi JavaScript pe care browserul le primește de la serverul web.
Mai multe videoclipuri pe canalul nostru - învață marketingul pe internet cu SEMANTICA
Poate fi comparat cu un set de comenzi date soldaților de către un comandant. Imaginați-vă că publicul nu îl vede și nu îl aude pe șeful. Din punctul lor de vedere, militarii desfășoară acțiuni în mod independent. În cazul nostru, comandantul este browserul, comenzile sunt codul sursă, iar soldații în marș sunt rezultatul final.
Site-ul este stocat pe un server web, care trimite pagina la cererea utilizatorului. O solicitare înseamnă introducerea unei adrese URL în bara de adrese, clic pe un link sau clic pe un buton de trimitere dintr-un formular. Nu contează în ce limbă sunt scrise paginile web sau dacă includ o componentă software. Rezultatul final al oricărui algoritm de pe partea serverului este un set de etichete HTML și text.
Codul sursă al paginii este un set de date care include:
- marcaj html;
- foaia de stil sau link la fișier;
- programe scrise în JavaScript sau link-uri către fișiere cu cod.
Aceste trei secțiuni sunt procesate de browser. Pentru server, acesta este pur și simplu textul care trebuie trimis ca răspuns la cerere.
De ce ar putea fi nevoie să studiem codul sursă
Tot ceea ce vedem, putem analiza și aplica pentru a rezolva anumite probleme care apar în timpul lucrului cu site-ul, mai ales la optimizarea acestuia. Privind codul sursă, putem:
- Vedeți metaetichetele site-ului dvs. sau al altcuiva pentru a le analiza.
- Vedeți prezența sau absența anumitor elemente pe site: contoare, coduri de identificare în diverse sisteme, anumite scripturi și alte lucruri.
- Aflați parametrii elementelor: dimensiuni, culori, fonturi.
- Găsiți calea către fotografii și alte elemente aflate pe pagină.
- Explorați linkurile din pagină.
- Găsiți probleme cu codul care interferează cu procesul de optimizare a site-ului web: stiluri care nu sunt plasate în fișiere separate, scripturi, cod invalid.
Acestea sunt caracteristicile de bază, dar, de fapt, putând citi codul, puteți afla multe mai multe despre pagină.
Cum să vizualizați codul sursă al unui site
Nu va fi posibil să faceți acest lucru complet în forma în care este postat pe server din browser. Dar puteți vedea toate marcajele făcând clic dreapta pe pagină. Aici și mai jos folosind Google Chrome ca exemplu.
Selectați opțiunea „Vizualizare codul paginii” și obțineți lista completă într-o filă separată.
Este doar un text pe care trebuie să îl analizezi pentru a-l înțelege. Dar puteți obține cod interactiv folosind instrumentele pentru dezvoltatori.
Cum să găsiți codul sursă al unei pagini de site web
Faceți clic pe pictograma meniului din browser. Cel mai adesea este în dreapta și arată ca trei puncte sau dungi.
În secțiunea de instrumente suplimentare, selectați „Instrumente pentru dezvoltatori”.
Se va deschide o fereastră care arată starea activă a codului. Aceasta înseamnă că atunci când faceți clic pe marcaj, stilul elementului va apărea lângă acesta, iar blocurile selectate vor fi evidențiate pe pagină.
În fila „Sursă” puteți vizualiza conținutul unor fișiere: scripturi, fonturi, imagini.
În fila „Securitate”, puteți verifica certificatul site-ului.
Fila „Audituri” vă va ajuta să verificați resursa postată pe găzduire.
Dacă locația panoului din dreapta este incomodă, puteți face clic pe cele trei puncte și îl puteți modifica selectând elementul dorit.
Cum să vizualizați metaetichetele
Fiecare document HTML include etichete de structură. Aici sunt câțiva dintre ei:
- HTML – întregul document.
- Head – secțiunea antetelor de serviciu.
- Titlu – titlul paginii (afisat pe fila).
- Corp – corpul documentului.
- H1-H6 – titlurile textului paginii.
- Articol – articol.
- Sectiune - sectiune.
- Meniu – meniu.
- Div – bloc.
- Span – sfoară.
- P – paragraful.
- Masa – masa.
Elementele sunt concepute pentru a delimita logic secțiunile dintr-o pagină; dacă este necesar, sunt proiectate folosind stiluri. Acestea conțin text care este cumva vizibil pe pagină. Dar eticheta Head conține informații de serviciu. Meta-etichetele sunt folosite pentru a o indica. Tot ceea ce este scris în ele este destinat serverului și motoarelor de căutare.
Conținutul lor nu poate fi aflat în niciun alt mod.
Să acordăm atenție etichetei Link. Cu ajutorul acestuia, sunt specificate link-uri către fișiere externe incluse. Dacă doriți, puteți vedea conținutul și puteți salva pe disc. Pentru a face acest lucru, mutați indicatorul la adresă și apăsați RMB. Selectați „Deschideți într-o filă nouă”.
Fișierul specificat se va deschide într-o filă nouă, pe care o puteți vizualiza sau salva.
Cum să vizualizați codul sursă al unei pagini pentru a depana un script
În acest caz, cel mai convenabil este să deschideți pagina pe mașina locală. Dacă trebuie doar să corectați marcajul, stilurile și scripturile, atunci acest lucru se poate face direct din folder. Codul HTML este vizualizat în același mod. Dar erorile de cod JavaScript pot fi văzute în fila „Consolă”. Aceasta arată descrierea erorii și numărul rândului în care a apărut.
Sintaxa poate fi văzută direct în cod. Pentru asta este fila „Sursă”.
Cum să vizualizați codul unui anumit element
Pentru paginile mari cu multe elemente, este dificil să găsești codul necesar în toate markupurile. În acest caz, ar trebui să utilizați o comandă specială din meniu contextual. Deplasați mouse-ul peste fragment și apăsați RMB. Selectați comanda „Vizualizare cod”.
Se va deschide aceeași fereastră, dar cu accent pe obiectul selectat.
rezumat
V-am spus care este codul sursă al paginii. Este suficient să stăpâniți cunoștințele de bază despre HTML și CSS și, folosind instrumente convenabile pentru dezvoltatori, veți putea să vă depanați propriile documente HTML.
Revizuirea codului de resurse de pe Internet vă va permite să învățați nu numai din propria experiență, ci și să folosiți exemple reale de lucru. Iar pentru specialiștii SEO vor fi utile meta tag-urile, informațiile în care pot spune multe despre site.
