Codul sursă al tastelor rapide ale paginii. Google Chrome - instrumente pentru webmasteri

Așadar, astăzi ne vom uita la câteva instrumente utile pentru webmasteri care ușurează viața atunci când proiectează un site web. Să începem cu consola pentru web master în Google Chrome. Și să trecem prin întrebările care apar cel mai adesea unui webmaster în timpul amenajării site-ului.

Pentru a ajunge la consolă, deschideți site-ul dvs. în Google Chrome, faceți clic dreapta oriunde pe pagina web și selectați „Vizualizare codul paginii” în meniul derulant contextual sau pe un anumit element de studiat selectând „Vizualizare element de cod”. ".

În partea de sus veți avea mai multe file listate. Astăzi vom vorbi despre fila „Elemente”. , care prezintă elementele unei pagini web cu evidențierea etichetelor, proprietăților, evidențierea imbricației elementelor, o reprezentare a ierarhiei elementului în arborele DOM (un indiciu în jos, de la părintele rădăcină la cel curent), capacitatea pentru a edita elemente, o listă a proprietăților lor, luați în considerare căutarea după elemente, precum și Să ne familiarizăm cu vizualizarea stilurilor CSS etc., asociate elementelor.

Cum pot vedea toate stilurile care sunt asociate cu un anumit element? Care este folosit acum? În ce fișiere se află?

Deci, nimic nu poate fi mai ușor! Deschideți browserul Google Chrome, deschideți site-ul nostru web - sursa întrebărilor, faceți clic dreapta pe elementul dorit dacă este vizibil în contextul paginii și selectați „Vizualizare cod element” în meniul contextual.

În partea de jos avem o consolă cu o filă evidențiată în stânga „Elemente” și toate stilurile asociate cu elementul din dreapta, unde: Stiluri calculate– acestea sunt stiluri generale „rezumat” care au fost atribuite elementului din regulile și setările css ale browserului utilizatorului (mediul său) și în același timp fila este restrânsă.

Dar ne interesează fila „Stiluri”, extinsă sub ea, care listează pe rând toate stilurile alocate elementului, precum și fișierele în care aceste reguli sunt specificate pentru acest element după tipul, id-ul, clasa, numele, proprietatea acestuia. , atribut etc. Mai mult, dacă o regulă css este tăiată, înseamnă că a fost redefinită mai devreme/mai târziu (ceea ce face ușor de urmărit care dintre regulile css are prioritate și este aplicată în acest caz elementului).

Sub consolă există o linie care arată elementul din ierarhia documentului, permițându-vă ușor să vizualizați întreaga listă de elemente părinte de la rădăcină la elementul selectat. Ceva de genul „pesmet”.

Eticheta HTML nu este vizibilă în contextul paginii? Sau trebuie să găsiți toate etichetele, de exemplu, după o anumită clasă, nume, proprietate, tip?

Deschideți site-ul în Google Chrome, faceți clic dreapta, apelați meniul contextual, selectați « Vizualizați codul paginii » . Apăsați combinația de taste „CTRL + F” în același timp, introduceți expresia de care avem nevoie ( De exemplu: clasa=”umplutura") și treceți prin lista rezultatelor găsite, vizualizând simultan toate stilurile asociate elementelor dorite în partea dreaptă a paginii.

Cum să vizualizați codul html al unui element (ele) încărcat dinamic (de exemplu: prin Ajax)

Asteptam ca pagina sa se incarce in Google Chrome. Efectuăm acțiunile necesare pentru ca Ajax să funcționeze. Faceți clic dreapta pe datele încărcate, selectați „Vizualizare cod element” în meniul contextual și examinați rezultatul în consolă din fila „Elemente” din stânga.

Vedeți modificările stilului CSS în timp real

Apropo, este, de asemenea, convenabil să observați, dacă este necesar, ce stiluri sunt atribuite unui element din mers, de exemplu, atunci când defilați printr-o galerie și alte evenimente cu cronometru. Toate stilurile atribuite prin javascript în timp real vor fi afișate în proprietate stil elementul selectat în fereastra din fila „Elemente”.

Vizualizați interactiv impactul regulilor css asupra prezentării etichetelor html

Google Chrome oferă o consolă interactivă pentru stilurile CSS. Aceasta înseamnă că nu puteți doar să vedeți ce stiluri sunt aplicate elementului, ci și să mutați cursorul mouse-ului peste o anumită proprietate CSS, să o activați folosind caseta de selectare pop-up din dreapta sau să o dezactivați prin ștergerea steagului și vizualizați rezultatul rezultat pe pagină.

Schimbăm structura de prezentare a elementelor html din mers (direct în browser)

Deci, am învățat deja cum să explorăm structura unui document web în Google Chrome, acum ne vom uita pe scurt la editarea elementelor din mers. Mergem la consolă în orice mod convenabil pentru noi. Găsim elementul dorit în fila „Elemente”, faceți clic dreapta pe el, apelând astfel meniul contextual pop-up:

Adăugați un atribut– adaugă un atribut pentru elementul specificat. De îndată ce cursorul devine activ, începem să setăm proprietatea dorită. De exemplu: să scriem name="itemImage", care va fi adăugat imediat la elementul nostru.
Editați atributul– dacă faceți clic dreapta pe un atribut de element, articolul devine disponibil editaatribut. Faceți clic și editați.

Exemplu de utilizare: Am uitat parola salvată sub asteriscuri în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic dreapta pe elementul cu parola introdusă, faceți clic pe „Vedeți codul elementului” , în consola din fila din stânga Elemente faceți clic dreapta pe atributul type="parolă", faceți clic stânga pe Editaatribut schimba atributul tip =”parolă" pe tip =”text", iar acum, în loc de asteriscuri, aceeași parolă este afișată sub formă de text.

Editahtml– faceți clic dreapta pe elementul din consolă Elemente, selectați Editahtml, schimba codul dupa bunul plac.
CopiecaHTML– copiem porțiunea de HTML de care avem nevoie pentru cercetări ulterioare, să zicem, într-un bloc de note sau pentru alte scopuri în care trebuie să aplicăm exact același aspect. Economisim timp.
CopieXPATH– copiează reprezentarea XPATH a structurii de la rădăcina elementului părinte în elementul selectat.
Ştergenodul– dacă trebuie să eliminați elementul selectat curent și toți copiii acestuia din contextul paginii web și să vedeți rezultatul.
Cuvântînfășura– va reda o vizualizare a paginii web în contextul consolei Elemente mai lizibil.

În următoarele articole vom continua să luăm în considerare instrumentele pentru webmasteri și, în special, ne vom familiariza cu filele rămase de instrumente pentru webmasteri în Google Chrome, și luați în considerare, de asemenea, depanarea erorilor javascript utilizând browsere diferite

Dacă deschideți orice pagină web, aceasta va conține elemente tipice care nu se schimbă în funcție de tipul și focalizarea site-ului. Exemplul 4.1 arată codul pentru un document simplu care conține etichete de bază.

Exemplul 4.1. Codul sursă al paginii web

Exemplu de pagină web

Titlu

Primul paragraf.

Al doilea paragraf.

Copiați conținutul acestui exemplu și salvați-l în folderul c:\www\ ca example41.html. După aceea, lansați browserul și deschideți fișierul prin elementul de meniu Fișier > Deschideți fișier (Ctrl+O). În dialogul de selecție a documentului, selectați fișierul example41.html. Pagina web prezentată în Fig. 1 se va deschide în browser. 4.1.

Orez. 4.1. Rezultatul rulării exemplului

Elementare scopul de a indica tipul documentului curent - DTD (definirea tipului de document, descrierea tipului de document). Acest lucru este necesar pentru ca browserul să înțeleagă cum să interpreteze pagina web curentă, deoarece HTML există în mai multe versiuni, în plus, există XHTML (EXtensible HyperText Markup Language), care este similar cu HTML, dar diferă de acesta în sintaxă. Pentru ca browserul „să nu se încurce” și să înțeleagă în funcție de ce standard să afișeze pagina web, este necesar să se stabilească în prima linie de cod .

Există mai multe tipuri, acestea diferă în funcție de versiunea HTML pe care o vizează. În tabel 4.1. Sunt date principalele tipuri de documente cu descrierile lor.

Masă 4.1. DTD-uri valide

DOCTYPE	Descriere
HTML 4.01
	Sintaxă HTML strictă.
	Sintaxă HTML tranzițională.
	Un document HTML folosește cadre.
HTML 5
	Această versiune de HTML are un singur tip de document.
XHTML 1.0
	Sintaxă XHTML strictă.
	Sintaxă de tranziție XHTML.
	Documentul este scris în XHTML și conține cadre.
XHTML 1.1
	Dezvoltatorii XHTML 1.1 se așteaptă ca acesta să înlocuiască treptat HTML. După cum puteți vedea, această definiție nu are nicio împărțire în tipuri, deoarece sintaxa este aceeași și respectă reguli clare.

Diferența dintre o descriere strictă și cea de tranziție a unui document este o abordare diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și este neiertător. HTML de tranziție este mai relaxat cu privire la unele defecte de cod, așa că acest tip este de preferat să fie utilizat în anumite cazuri.

De exemplu, în HTML și XHTML strict, prezența etichetei este necesară , iar în HTML tranzițional poate fi omis și nespecificat. În același timp, ne amintim că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. Acest tip de verificare se realizează cu ajutorul unui validator și este destinat în primul rând dezvoltatorilor să urmărească erorile din document.</p> <p>În viitor vom folosi în principal stricte<!DOCTYPE>, dacă nu se specifică altfel. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.</p> <p>Puteți găsi adesea cod HTML fără a utiliza niciunul<!DOCTYPE>, pagina web va fi afișată în continuare în acest caz. Cu toate acestea, se poate întâmpla ca același document să apară diferit în browser atunci când îl utilizați<!DOCTYPE>si fara ea. În plus, browserele pot afișa astfel de documente în felul lor, ca urmare pagina „se prăbușește”, adică. va fi afișat complet diferit de ceea ce cere dezvoltatorul. Pentru a evita astfel de situații, adăugați întotdeauna<!DOCTYPE>până la începutul documentului.</p><p>Etichetă <html>definește începutul fișierului HTML, antetul este stocat în interiorul acestuia ( <head>) și corpul documentului ( <body> ).</p><p>Titlul documentului, numit și bloc <head>, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, decât în container <title> .</p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </p><p>Etichetă <meta>este universal și adaugă o întreagă clasă de capabilități, în special, cu ajutorul meta tag-urilor, așa cum se numește în general această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele.</p><p> <title>Exemplu de pagină web

Etichetă Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (format de transformare Unicode), iar această linie este adăugată.</p> <p><img src='https://i0.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>determină titlul unei pagini web acesta este unul dintre elementele importante menite să rezolve multe probleme. În sistemul de operare Windows, textul titlului este afișat în colțul din stânga sus al ferestrei browserului (Figura 4.2).</p> <p>Etichetă <title>Orez. 4.2. Vedere antet în browser</p><p>este obligatoriu și cu siguranță trebuie să fie prezent în codul documentului.</head> Trebuie să adăugați o etichetă de închidere</p><p>pentru a indica faptul că cartușul documentului este complet. <body>Corpul documentului</p><p> <h1>Titlu</h1> </p><p>destinat plasării de etichete și conținut al unei pagini web. <h1>HTML oferă șase titluri de text de diferite niveluri care indică importanța relativă a secțiunii care urmează titlului. Da, etichetă <h6>reprezintă cel mai important titlu de prim nivel și eticheta <h1>...<h6>servește la indicarea titlului de nivelul șase și este cel mai puțin semnificativ.</p><p>  </p><p>În mod implicit, titlul de la primul nivel este afișat cu cel mai mare font aldine, iar titlurile de nivel ulterioare sunt mai mici. Etichete</p> <p>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.</p> <p>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 modificări de design și pentru a edita toate fișierele site-ului, iar după testare, pentru a transfera modificările corespunzătoare direct pe site.</p> <p>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.</p> <h2>Instrucțiunea 1: cum să vizualizați întregul cod HTML al unui site într-un browser</h2> <p>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:</p> <p>Figura 1. Vizualizarea întregului cod HTML al unei pagini web în browserul Chrome</p> <p><b>Important:</b> Comenzile din meniul derulant pot diferi, de exemplu, pentru elementele active (linkuri, imagini, videoclipuri) și cele inactive (text, fundal, div-uri):</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%92%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E%D1%89%D0%B5%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B0-Chrome.jpg' width="100%" loading=lazy loading=lazy></p><p>Figura 2. Meniul derulant al browserului Chrome</p> <p>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.</p> <p>Să revenim la Figura 1, arată comanda necesară pentru a vizualiza tot codul HTML al paginii web sursă, se numește „ <b>Vizualizați codul paginii</b>". 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:</p> <p><img src='https://i2.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%A4%D1%80%D0%B0%D0%B3%D0%BC%D0%B5%D0%BD%D1%82-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Figura 3. Fragment de cod al acestui site</p> <p>Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.</p> <h3>Modalități alternative de vizualizare a întregului cod HTML al unei pagini web</h3> <p>Pentru un acces mai rapid, puteți folosi alte modalități de a apela acest instrument</p> <ol><li>În Figura 1 vedem, de asemenea, că această comandă este disponibilă printr-o comandă rapidă de la tastatură <Ctrl>+<U> ;</li> <li>Lipiți view-source:site în bara de adrese a browserului în loc de domeniul meu, introduceți adresa;</li> </ol><p>Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.</p> <p>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. .</p> <p>Combinație de taste rapide <Ctrl>+<F>deschide fereastra de căutare, în browserul Chrome apare în dreapta sus:</p> <p><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%BF%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D1%83.jpg' width="100%" loading=lazy loading=lazy></p><p>Figura 3. Căutare după codul site-ului</p> <p>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:</p> <p><img src='https://i0.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA-%D0%BF%D0%BE-HTML-%D0%BA%D0%BE%D0%B4%D1%83-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg' width="100%" loading=lazy loading=lazy></p><p>Figura 4. Căutare după codul site-ului HTML</p> <h2>Instrucțiunea 2: cum să vizualizați și să editați codul HTML și CSS al unui site în browserul Google Chrome</h2> <p>Acum, cea mai importantă parte, î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.</p> <br><img src='https://i1.wp.com/samsebewebmaster.ru/wp-content/uploads/2015/12/%D0%9A%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0-%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80%D0%B5%D1%82%D1%8C-%D0%BA%D0%BE%D0%B4.jpg' width="100%" loading=lazy loading=lazy><p>Acest instrument util este întotdeauna disponibil în browserul dvs., experimentați cu alte comenzi care vă vor facilita editarea site-ului.</p> <p>" Același articol se află și în meniul contextual, pe care, dacă faceți clic dreapta pe text <b>pagini</b>. Puteți folosi și comanda rapidă de la tastatură CTRL + U. Mozilla FireFox nu folosește programe externe - original <b>cod</b> <b>pagini</b> cu evidențierea sintaxă va fi deschis într-o fereastră separată a browserului.</p> <p>În Internet Explorer, faceți clic pe meniul Fișier și selectați Editați în Notepad. În loc de numele Notepad, poate fi scris un alt nume, l-ați atribuit în setările browserului pentru a vizualiza originalul <b>cod</b> O. La clic <b>pagini</b> cu butonul din dreapta al mouse-ului apare un meniu contextual, care are și un element care vă permite să deschideți sursa <b>cod</b> <b>pagini</b>într-un program extern - „Vizualizare HTML- <b>cod</b> O".</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95df96052552b95df9bd.jpg' height="669" width="663" loading=lazy loading=lazy></p> <p>În browserul Opera, deschideți meniul, accesați secțiunea „Pagină” și veți avea posibilitatea de a selecta „Sursă” în subsecțiunea „Instrumente de dezvoltare” <b>cod</b>„sau articolul „Original <b>cod</b> cadru." Aceste selecții sunt alocate tastelor rapide CTRL + U și respectiv CTRL + SHIFT + U. Într-un meniu contextual legat de un clic <b>pagini</b> faceți clic dreapta, există și un element „Inițial <b>cod</b>" Sursa opera <b>pagini</b>într-un program extern care este atribuit în sistemul de operare sau în setările browserului pentru editarea fișierelor HTML.</p> <p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p> <p>Browserul Google Chrome are, fără îndoială, cea mai bună organizare pentru vizualizarea originalului <b>cod</b> O. Făcând clic dreapta pe mouse, puteți selecta Vizualizare <b>cod</b> O <b>pagini</b>„și apoi codul sursă cu evidențierea sintaxelor va fi deschis într-o filă separată. Sau puteți selecta linia „Vizualizare” în același meniu <b>cod</b> element” și în aceeași filă se vor deschide două cadre suplimentare în care puteți inspecta HTML și CSS <b>cod</b> element <b>pagini</b>. Browserul va răspunde la mișcarea cursorului pe linii <b>cod</b>și, evidențierea elementelor din pagină care corespund acestei secțiuni de HTML <b>cod</b> O.</p> <p><img src='https://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p> <p>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.</p> <p>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.</p> <h2>Cum se vede codul paginii?</h2> <p>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:</p> <ul><li>spate;</li> <li>redirecţiona;</li> <li>repornire;</li> <li>salvează ca;</li> <li>sigiliu;</li> <li>traduceți în rusă;</li> <li><b>vizualiza codul paginii</b>;</li> <li>vizualiza codul.</li> </ul><p>Trebuie să facem clic pe <b>vizualiza codul paginii</b>, iar codul html al paginii site-ului se va deschide în fața noastră.</p> <h2>Vizualizarea codului paginii: la ce să acordați atenție?</h2> <p>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.</p> <p>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.</p> <p>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.</p> <p>De exemplu:</p> <p><i>//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3</i></p> <p>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'.</p> <p>Acest site este optimizat folosind plugin-ul Yoast SEO. Acest lucru poate fi văzut din această secțiune de cod comentată:</p> <p><i>Acest site este optimizat cu pluginul Yoast SEO v3.4.2 - https://yoast.com/wordpress/plugins/seo/</i></p> <p>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:</p> <p><i>/Yandex.Metrika contor</i></p> <p><img src='https://i2.wp.com/vlad-tver.ru/wp-content/uploads/2016/08/metrika.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Să rezumam</h2> <p>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:</p> <ul><li>CMS WordPress;</li> <li>Font Google Source Sans Pro;</li> <li>Tema WordPress – Sydney;</li> <li>pluginuri Yoast;</li> <li>Contor de valori Yandex.</li> </ul><p>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. În acest fel, îl puteți studia mai profund în orice moment și puteți găsi mai multe informații utile pentru dvs.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="comment_box" id="comments"> </div> </div> <div id="sidebar"> <div class="widget widget_nav_menu" id="nav_menu-2"> <div class="menu-mainmenu-container"> <ul id="menu-mainmenu-2" class="menu"> <li class="submenu"><a href="https://viws.ru/ro/category/internet/">Internet</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/programs/">Programe</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/browsers/">Browsere</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/windows-10/">Windows 10</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/android/">Android</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/ios/">iOS</a> </li> <li class="submenu"><a href="https://viws.ru/ro/category/communication/">Conexiune</a> </li> </ul> </div> </div> <div class="widget"> <div class="heading star">Ultimele postări</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/ro/startovalo-testirovanie-kriptovalyuty-kotoruyu-mozhno.html" class="thumb"><img width="95" height="95" src="/uploads/a31ebacfc77ea9a8eebf8fb9a102c333.jpg" class="attachment-mini size-mini wp-post-image" alt="Cum poți câștiga bani alergând și cine dă bani pentru mers pe jos?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/startovalo-testirovanie-kriptovalyuty-kotoruyu-mozhno.html">Cum poți câștiga bani alergând și cine dă bani pentru mers pe jos?</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/test-polochnoi-hi-fi-akustiki-srednei-cenovoi-kategorii-v-poiskah.html" class="thumb"><img width="95" height="95" src="/uploads/4a78f9dd11997c90d8ceb543ce0d42d6.jpg" class="attachment-mini size-mini wp-post-image" alt="În căutarea sunetului real" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/test-polochnoi-hi-fi-akustiki-srednei-cenovoi-kategorii-v-poiskah.html">În căutarea sunetului real</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/obzor-htc-one-m8-staryi-novyi-flagman-obzor-htc-one-m8---krasivyi-flagman-ot-htc-vse.html" class="thumb"><img width="95" height="95" src="/uploads/4b7bd500dd29e639d90c4dff16e9ee9d.jpg" class="attachment-mini size-mini wp-post-image" alt="Recenzie HTC One (M8). Vechi-nou flagship. Recenzie HTC ONE M8 - un flagship frumos de la HTC Toate modificările htc one m8" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/obzor-htc-one-m8-staryi-novyi-flagman-obzor-htc-one-m8---krasivyi-flagman-ot-htc-vse.html">Recenzie HTC One (M8). Vechi-nou flagship. Recenzie HTC ONE M8 - un flagship frumos de la HTC Toate modificările htc one m8</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/gromkaya-svyaz-na-noutbuke-kak-otklyuchit-vklyuchenie-gromkoi.html" class="thumb"><img width="95" height="95" src="/uploads/8c7c03958397fae9367958df0c0334ec.jpg" class="attachment-mini size-mini wp-post-image" alt="Porniți difuzorul pe Samsung Galaxy" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/gromkaya-svyaz-na-noutbuke-kak-otklyuchit-vklyuchenie-gromkoi.html">Porniți difuzorul pe Samsung Galaxy</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/kak-proverit-nalichie-shim-v-monitore-bolshoi-test-zhk-televizorov-ishchem-model.html" class="thumb"><img width="95" height="95" src="/uploads/8fbf4c509c2f496e01fb9e916022aac0.jpg" class="attachment-mini size-mini wp-post-image" alt="Test mare de televizoare LCD: caut un model fara ondulatie" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/kak-proverit-nalichie-shim-v-monitore-bolshoi-test-zhk-televizorov-ishchem-model.html">Test mare de televizoare LCD: caut un model fara ondulatie</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading star">Popular</div> <div class="popular_posts"> <div class="news_box"> <a href="https://viws.ru/ro/vhod-v-adminku-wordpress-kak-popast-v-admin-panel-wordpress-gde-v-adminke.html" class="thumb"><img width="95" height="95" src="/uploads/2858f108d0cdbb7d1b58389099c93518.jpg" class="attachment-mini size-mini wp-post-image" alt="Cum să ajungeți la panoul de administrare WordPress Unde în panoul de administrare WordPress" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/vhod-v-adminku-wordpress-kak-popast-v-admin-panel-wordpress-gde-v-adminke.html">Cum să ajungeți la panoul de administrare WordPress Unde în panoul de administrare WordPress</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/rasshirenie-dlya-integracii-download-master-v-google-chrome-opera-i-drugie.html" class="thumb"><img width="95" height="95" src="/uploads/8724b748c8b14da05772a884fa3a1fc9.jpg" class="attachment-mini size-mini wp-post-image" alt="Eliminarea (adăugarea) integrării Download Master în browserele Internet Explorer, Chrome, Firefox, Opera, Safari, Netscape Navigator Integrarea extensiei Download Master în Moz" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/rasshirenie-dlya-integracii-download-master-v-google-chrome-opera-i-drugie.html">Eliminarea (adăugarea) integrării Download Master în browserele Internet Explorer, Chrome, Firefox, Opera, Safari, Netscape Navigator Integrarea extensiei Download Master în Moz</a> </div> </div> </div> <div class="news_box"> <a href="https://viws.ru/ro/kak-uznat-chto-chelovek-zashel-vkontakte-kak-uznat-kto-zahodil-na-moyu-stranicu.html" class="thumb"><img width="95" height="95" src="/uploads/037ff2496e04b33136a28469395b7e4e.jpg" class="attachment-mini size-mini wp-post-image" alt="Cum pot afla cine mi-a vizitat pagina VKontakte?" sizes="(max-width: 95px) 100vw, 95px" / loading=lazy loading=lazy></a> <div class="element"> <div class="title"> <a href="https://viws.ru/ro/kak-uznat-chto-chelovek-zashel-vkontakte-kak-uznat-kto-zahodil-na-moyu-stranicu.html">Cum pot afla cine mi-a vizitat pagina VKontakte?</a> </div> </div> </div> </div> </div> <div class="widget"> <div class="heading">Ştiri</div> <div class="business_news"> <div class="news"> <div class="date">2024-07-21 01:33:12</div> <a href="https://viws.ru/ro/proshivki-xiaomi-vazhnaya-informaciya-samostoyatelnaya-proshivka.html" class="title">Auto-firmware pentru telefoane, smartphone-uri și tablete Xiaomi Acum puteți lucra cu firmware-ul</a> </div> <div class="news"> <div class="date">2024-07-19 01:33:33</div> <a href="https://viws.ru/ro/huavei-meit-8-obzor-ne-gorit-i-ne-vzryvaetsya-tehnologii-mobilnoi-svyazi.html" class="title">nu arde sau explodează</a> </div> <div class="news"> <div class="date">2024-07-19 01:33:33</div> <a href="https://viws.ru/ro/planshet-dlya-chainikov-instrukciya-po-ispolzovaniyu-planshet.html" class="title">Tabletă pentru manechine: instrucțiuni de utilizare Vizualizarea informațiilor despre dispozitiv</a> </div> <div class="news"> <div class="date">2024-07-17 01:35:12</div> <a href="https://viws.ru/ro/sistemy-aktivnoi-reklamy-frame-ili-iframe-iframe-trafik-chto-takoe.html" class="title">Sisteme de publicitate active frame sau iframe</a> </div> <div class="news"> <div class="date">2024-07-14 01:31:28</div> <a href="https://viws.ru/ro/kodaki-pod-10-obzor-besplatnoi-versii-k-lite-codec-pack-chto-takoe-kodeki.html" class="title">Revizuirea versiunii gratuite a K-Lite Codec Pack</a> </div> </div> </div> <div class="widget ai_widget" id="ai_widget-5"> <div class='dynamic dynamic-13' style='margin: 8px 0; clear: both;'> </div> </div> </div> </div> </div> </div> <div id="footer"> <div class="fixed"> <div class="inner"> <div class="footer_l"> <a href="https://viws.ru/ro/" class="logo" style="background:none;">views.ru</a> <div class="copyright"> <p>views.ru - Totul despre tehnologia modernă. Defecțiuni, rețele sociale, internet, viruși</p> <p><span>2024 - Toate drepturile rezervate</span></p> </div> </div> <div class="footer_c"> <ul id="menu-topmenu-1" class="nav"> <li><a href="https://viws.ru/ro/feedback.html">Contacte</a></li> <li><a href="">Despre site</a></li> <li><a href="">Publicitate pe site</a></li> </ul> <div class="footer_menu"> <ul id="menu-nizhnee-1" class=""> <li id="menu-item-"><a href="https://viws.ru/ro/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/programs/">Programe</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/browsers/">Browsere</a></li> </ul> <ul id="menu-nizhnee-2" class=""> <li id="menu-item-"><a href="https://viws.ru/ro/category/internet/">Internet</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/programs/">Programe</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/instructions/">Instrucţiuni</a></li> <li id="menu-item-"><a href="https://viws.ru/ro/category/browsers/">Browsere</a></li> </ul> </div> </div> </div> </div> </div> </div> <script type="text/javascript">jQuery(function($) { $(document).on("click", ".pseudo-link", function(){ window.open($(this).data("uri")); } );} );</script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9.2'></script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://viws.ru/wp-content/themes/delo/assets/scripts/theme.js'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 60, "margin_bottom" : 200, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['text-8','ai_widget-5'] } ; </script> <script type='text/javascript' src='https://viws.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script async="async" type='text/javascript' src='https://viws.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.1'></script> </body> </html>