Unde este codul sursă al paginii. Cum să vizualizați codul sursă al paginii și codul elementului

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 pentru a explica 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 deloc 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 unui 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.

Căutând prin nenumărate site-uri de pe Internet, puteți întâlni unele care ne plac foarte mult. Imediat apar o serie de întrebări. Site-ul a fost realizat folosind cod de casă sau un fel de CMS? Ce stiluri CSS are? Care sunt metaetichetele sale? Și așa mai departe.

Există multe instrumente care pot fi folosite pentru a extrage informații despre codul paginii unui site web. Dar avem întotdeauna butonul drept al mouse-ului la îndemână. Acesta este ceea ce vom folosi, folosind site-ul meu ca exemplu.

Cum se vede codul paginii?

Pentru a vizualiza codul sursă al unei pagini de site, trebuie să plasați mouse-ul peste orice zonă a paginii web (cu excepția imaginilor și a linkurilor). După aceasta, faceți clic pe butonul din dreapta al mouse-ului. În fața noastră se va deschide o fereastră cu mai multe opțiuni (acestea pot diferi ușor în diferite browsere). În browserul Google Chrome, de exemplu, acestea sunt comenzile:

înapoi;
redirecţiona;
repornire;
Salvează ca;
sigiliu;
traduce în rusă;
vizualiza codul paginii;
vizualiza codul.

Trebuie să facem clic pe vizualiza codul paginii, iar codul html al paginii site-ului se va deschide în fața noastră.

Vizualizarea codului paginii: la ce să acordați atenție?

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. Pentru a învăța rapid să înțelegeți acest număr mare de semne și simboluri speciale, trebuie să faceți distincția între diferitele secțiuni ale codului.

De exemplu, liniile de cod din interiorul etichetei head conțin informații pentru motoarele de căutare și webmasteri. Ele nu sunt afișate pe site. Aici puteți vedea pentru ce cuvinte cheie este promovată această pagină, cum sunt scrise titlul și descrierea acesteia. Tot aici găsiți un link, în urma căruia vom afla despre familia de fonturi Google folosite 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 o temă WordPress sau șablon de site Joomla. O puteți vedea citind conținutul linkurilor evidențiate cu albastru. Un link arată un șablon de site.

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, se folosește fontul. Acest lucru poate fi văzut aici - font-family: 'Source Sans Pro'.

Acest site este optimizat folosind plugin-ul Yoast SEO. Acest lucru poate fi văzut din această secțiune de cod comentată:

Acest site este optimizat cu pluginul Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Toate informațiile conținute în interiorul etichetei corporale sunt afișate de browser pe ecranul monitorului. Aici vedem codul html al paginii, iar în partea de jos este codul de script Yandex Metrics. Este înconjurat de o etichetă comentată cu textul:

/Yandex.Metrika contor

Să rezumam

După ce am efectuat o analiză destul de superficială a codului paginii principale a site-ului, putem trage o concluzie despre ce instrumente a fost realizată această pagină. Am vazut pe el:

CMS WordPress;
Font Google Source Sans Pro;
Tema WordPress – Sydney;
pluginuri Yoast;
Contor de valori Yandex.

Acum principiul analizei codului html al unei pagini de site este destul de clar. Nu este deloc necesar să păstrați pagina pe care o căutați 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 orice editor de text (de preferință Notepad++) și salvați-l 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.

Trebuie 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, schimbați schema de culori a unui 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 o copie completă a site-ului pe computerul lor. Această metodă este universală și potrivită pentru profesioniști, poate fi folosită pentru a testa funcționarea diferitelor scripturi și plugin-uri, pentru a experimenta modificarea designului și a edita toate fișierele site-ului, iar după testare, pentru a 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 unui site într-un browser

Deschideți pagina web necesară a site-ului dvs. Faceți 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 elementele active (linkuri, imagini, videoclipuri) și cele inactive (text, fundal, div-uri):

Figura 2. Meniul derulant al browserului Chrome

Deci, 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.

Să revenim la Figura 1, arată comanda necesară pentru a vizualiza tot codul HTML al paginii web sursă, se numește „ Vizualizați codul paginii". Faceți clic pe comandă, se va deschide o nouă filă cu codul complet al paginii web sursă, un mare plus pentru tot - vizualizarea este disponibilă cu evidențierea sintaxelor:

Figura 3. Fragment de cod al acestui site

Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.

Modalități alternative de vizualizare a întregului cod HTML al unei pagini web

Pentru un acces mai rapid, puteți utiliza alte modalități de a apela acest instrument

În Figura 1 vedem, de asemenea, că această comandă este disponibilă printr-o comandă rapidă de la tastatură + ;

Lipiți view-source:site în bara de adrese a browserului în loc de domeniul meu, introduceți adresa;

Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.

La început, unii pot crede că acesta nu este deloc un instrument necesar, dar vizualizarea întregului cod HTML al unui site este grozavă pentru a găsi elementele necesare în cod, acestea pot fi linkuri, etichete, metaetichete, atribute și alte elemente. .

Combinație de taste rapide +deschide fereastra de căutare, în browserul Chrome apare în dreapta sus:

Figura 3. Căutare după codul site-ului

După ce introduceți o cerere în formularul 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ă codul site-ului HTML

Instrucțiunea 2: cum să vizualizați și să editați codul HTML și CSS al unui site în browserul Google Chrome

Acum partea cea mai importantă, în care voi arăta cum puteți edita codul HTML și CSS al unui site web într-un browser. apoi transferați modificările în browser.

Acest instrument util este întotdeauna disponibil în browserul dvs., experimentați cu alte comenzi care vă vor facilita editarea site-ului.

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:

markup 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 etc.
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, prin posibilitatea de a 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 pe 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.

Mărimea ș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 face modificări în 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 de mult, când am avut prima mea mașină, era foarte veche, cablajul era putrezit, siguranțele se ardeau adesea și de fiecare dată o remorcam la benzinărie. Imaginează-ți câți bani s-au irosit, în ciuda faptului că înlocuirea lor personală, 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 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, ci 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 in acest exemplu dorim sa schimbam culoarea numelui site-ului, copiez linia evidentiata in dreptunghiul rosu din a doua poza. Î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 ei:

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, copiem valoarea ei 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 accesați din nou pagina - 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 degrabă, 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: