Codul sursă al browserului. Cum să vizualizați codul sursă al unei pagini în Google Chrome

17.09.2019 Panoul Straturi

Am eliberat carte noua„Marketingul de conținut în rețelele sociale: Cum să intri în capul abonaților tăi și să-i faci să se îndrăgostească de marca ta.”

Abonați-vă

Codul sursă al site-ului este un set de markup HTML, Stiluri CSSŞi Scripturi JavaScript, pe care browserul îl 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 cod 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, dacă acestea includ parte 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;
  • foaie 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: cele care nu sunt abordate în fişiere separate stiluri, scripturi, cod nevalid.

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 markupurile făcând clic pe pagină butonul din dreapta soareci. Aici și mai departe Exemplu Google Chrome.

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ă. Iată câteva dintre ele:

  • 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țiuni 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 indica acest lucru. 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ă fim atenți Etichetă de 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. Iată care sunt greșelile Cod JavaScript poate fi văzut î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 pagini mari cu un număr mare elementele sunt greu de găsit codul necesar pe tot parcursul markupului. În acest caz, ar trebui să utilizați echipa speciala meniul 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.

    Relua

    V-am spus care este codul sursă al paginii. Este suficient să stăpânești elementele de bază Cunoștințe HTMLși CSS și folosind instrumente convenabile dezvoltator, vă puteți depana propriile documente HTML.

    Vizualizarea codului de resurse pe Internet vă va permite să învățați nu numai de la propria experiență, dar folosiți ș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.

    Sărbătoarea se apropie - Ziua Internațională a Femeii. Să ne pregătim din timp pentru asta. Poți felicita fetele și femeile într-un mod original folosind serviciile de cărți poștale, despre care vom vorbi de mai jos.

    Puteți utiliza aceleași servicii pentru care am folosit. Servicii de cărți poștale gata făcute

    Creați o carte poștală pentru 8 martie online

  • Utilizați următoarele servicii pentru a crea o carte poștală practic de la zero.
  • Canva este un editor foto funcțional bine-cunoscut. Aici veți găsi multe șabloane. Este necesară înregistrarea. Printclick Dacă aveți propria afacere, atunci puteți comanda un lot de cărți poștale cu logo-ul companiei și contacte. Puteți utiliza generatorul de cărți poștale princlick. Excelent promovare
  • si ieftin. Crello este un editor care necesită înregistrare. Nu te speria Limba engleză
  • , în setări poți trece la rusă.
  • O carte poștală online este pentru cei care au o imaginație bine dezvoltată, deoarece va trebui să creați o carte poștală de la zero. Mumotiki - pregătiți frumoasa poza
  • , și puteți adăuga un text de felicitare aici. Apropo, dacă trebuie doar să adăugați text la o imagine, atunci puteți verifica.

    Autor: Ivanova Natalya 2019-02-17

    Conținutul articolului:

    Google Plus Platforma Google Plus nu s-a ridicat la nivelul sperantelor dezvoltatorilor si va fi eliminata complet pe 2 aprilie 2019. Albumele asociate cu acesta vor dispărea odată cu acesta. Google Foto, va deveni autorizații inaccesibile pe site-uri cu un cont Google Plus. Din 4 februarie, funcția de creare a profilurilor, canalelor și paginilor Google Plus a devenit indisponibilă. Dacă contul dvs. a stocat conținut valoros, atunci puteți descărca copie de rezervă.
    Modificările vor afecta cel mai mult bloggerii care își conduc blogurile pe Blogspot. Unele widget-uri G+, comentarii G+ și profil Google+. Acest lucru este menționat în notificarea din zona de administrare Blogger:
    După anunţarea rezilierii Funcționează API Google+, care este programat să fie lansat în martie 2019, va introduce o serie de modificări în integrarea Blogger cu Google+ pe 4 februarie.
    Widgeturi Google+. Design-urile blogurilor nu vor mai accepta widget-urile Butonul +1, Adepții Google+ și Insigna Google+. Toate aparițiile acestor widget-uri vor fi eliminate de pe blogul dvs.
    butoane +1. Butoanele +1 și G+ vor fi eliminate, la fel și linkurile „Publicați pe Google+” din postările de pe blog și din bara de navigare.
    Vă rugăm să rețineți că, dacă utilizați un șablon personalizat care are Caracteristici Google+, poate fi necesar să fie schimbat. Vă rugăm să contactați persoana care v-a furnizat acest șablon pentru recomandări.
    Comentarii Google+. Asistența pentru comentarii va fi întreruptă folosind Google+ și toate blogurile care folosesc această funcție vor avea comentariile standard Blogger restaurate. Din păcate, comentariile postate prin Google+ nu pot fi transferate pe Blogger, așa că nu vor mai apărea pe blogul tău. Ștergerea comentariilor Google Plus Din păcate, comentariile care au fost publicate în sistem vor fi șterse definitiv. Puteți folosi doar același instrument https://takeout.google.com pentru a spune comentarii de rezervă din Google+ pe computer. Numai că nu există încărcător de încărcare pentru el și puteți restabili comentariile doar manual într-un mod destul de strâmb. Este bine că am fost la timp la timp Cum să înlocuiți un profil Google Plus cu un profil Blogger Dacă blogați pe Blogspot, atunci este recomandabil să reveniți acum de la profilul Google Plus la profilul Blogger (pentru cei care au trecut. la Google Plus la un moment dat). Recomand să faceți acest lucru chiar acum pentru a evita situațiile neprevăzute care pot apărea în timpul ștergerii Plus. Cum să-ți recuperezi profilul Blogger Acest lucru este ușor de făcut în setările de administrator Blogger:
    Setări –> Setări utilizator –> Profil utilizator – aici selectați Blogger


    Salvați modificările.

    Confirmați trecerea la și introduceți numele sau porecla dvs.

    Nu uitați să încărcați un avatar în profilul dvs. Blogger.

    Cum să ștergeți un profil Google Plus Dacă decideți să scăpați de profilul dvs. G+ odată pentru totdeauna, atunci accesați pagina dvs. Google Plus -> Setări -> derulați în partea de jos a paginii -> ștergeți contul Google Plus:


    Autor: Ivanova Natalya

    Astăzi vă voi spune ce este CSS3, cu ce se folosește, unde să îl căutați și cum să îl scrieți corect. Vă avertizez, voi spune de la mine, simplificat pentru publicul larg, așa cum văd eu + exemple. Deci, să începem de departe.
    CSS sunt stiluri în care sunt scrise proprietățile unui obiect. Aceasta înseamnă că sunt în toate motoarele existente, dacă nu le puteți găsi, atunci fie că căutați în locul greșit, fie ele chiar nu există ( site strâmb). Unde se găsesc de obicei? De obicei aceasta este rădăcina site-ului, numele fișierului style.css, deși, în principiu, numele nu este la fel de important ca extensia .css dacă fișierul cu o astfel de extensie este un fișier de stil.
    Vezi si pe blogul meu.

    Unde să le cauți? Calea către fișier este atribuită în șablonul între