Codul sursă al paginii este online. Google Chrome - instrumente pentru webmasteri

06.09.2019 Interesant

Ctrl + U

Cum pot vedea codul sursă al unui articol?

Faceți clic dreapta pe elementul de interes din pagină.

Google Chrome: „Vedeți codul articolului”

Operă: "Inspectează elementul"

FireFox: „Analiza element”

Căutați un element de meniu similar în alte browsere.

Salutare tuturor!

Mai ales la începutul articolului am expus întreaga idee, pentru cei care caută un răspuns rapid.

Informația poate fi cunoscută de mulți, dar deoarece scriu pentru bloggeri începători, programatori web și alți prospectori, acest articol de ajutor trebuie să fie prezent.

În viitor, veți studia cu siguranță codul sursă al paginilor și elementelor individuale.

Să ne uităm la un exemplu concret despre cum puteți utiliza vizualizarea sursă a paginii.

De exemplu, vrem să vedem ce cuvinte cheie sunt folosite pentru o anumită pagină. Mergem la pagina web care ne interesează și apăsăm Ctrl + U. Codul sursă al acestei pagini se va deschide într-o fereastră separată sau într-o filă separată. Apăsați Ctrl + F pentru a găsi o bucată de cod. În acest caz, introducem în caseta de căutare cuvântul „ Cuvinte cheie ". Veți fi redirecționat automat către un fragment de cod cu această metaetichetă și veți evidenția cuvântul dorit.

Prin analogie, puteți căuta și studia alte bucăți de cod.

Vizualizarea întregului cod sursă al unei pagini nu este foarte convenabilă în majoritatea cazurilor, astfel încât în toate browserele este posibil să vizualizați codul unui element sau fragment individual.

Să folosim un exemplu specific pentru a vizualiza codul unui element. De exemplu, să vedem dacă un link 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 articolului” sau similar (în funcție de browser). Mai jos, într-o fereastră specială pentru analiza codului, obținem ceva similar.

Putem vedea că rel = "nofollow" este prezent în codul de link. Aceasta înseamnă că această legătură nu va „scurge” și PR. Vom vorbi despre asta mai detaliat în articolele următoare. Ceea ce este important acum este că acum știți cum să vizualizați codul sursă al paginii și codul sursă al unui element individual.

". Există același element în meniul contextual, care, dacă faceți clic dreapta pe text pagini... De asemenea, puteți utiliza comanda rapidă de la tastatură CTRL + U. Mozilla FireFox nu folosește programe externe - originalul Codul pagini cu evidențierea sintaxă se va deschide într-o fereastră separată a browserului.

În Internet Explorer, faceți clic pe secțiunea Fișier din meniu și selectați Editați în Notepad. În loc de numele Notepad, se poate scrie un altul, pe care l-ați atribuit în setările browserului pentru a vizualiza originalul Codul A. La clic pagini făcând clic dreapta pe meniul contextual, care are și un element care vă permite să deschideți originalul Codul paginiîntr-un program extern - „Vizualizare HTML- Codul A".

În browser Opera, deschideți meniul, accesați secțiunea „Pagină” și veți putea selecta în subsecțiunea „Instrumente de dezvoltare” articolul „Sursă”. Codul„Sau articolul” Inițiala Codul cadru". Comenzile rapide CTRL + U și, respectiv, CTRL + SHIFT + U sunt alocate acestei selecții. În meniul contextual ancorat la un clic pagini faceți clic dreapta, există și elementul „Inițial Codul". Sursa opera paginiîntr-un program extern care este alocat în sistemul de operare sau în setările browserului pentru editarea fișierelor HTML.

Browserul Google Chrome are, fără îndoială, cea mai bună organizare pentru vizualizarea originalului Codul A. Făcând clic dreapta, puteți selecta Vizualizare Codul A pagini„Și apoi sursa cu evidențierea sintaxelor va fi deschisă într-o filă separată. Sau puteți selecta linia „Vizualizare Codul un element „și în aceeași filă se vor deschide două cadre suplimentare în care puteți inspecta HTML și CSS Codul element pagini... Browserul va reacționa la mutarea cursorului de-a lungul liniilor Codul a, evidențiind elementele de pe pagină care corespund acestei secțiuni a HTML- Codul A.

Îndemânare schimba codul sursa al paginii Este o abilitate utilă pentru un utilizator avansat de internet. Prin înlocuirea codului HTML, puteți schimba pagina web deschisă după cum doriți. În acest articol vă vom spune, cum se schimbă codul paginiiîn Google Chrome. Cu toate acestea, în alte browsere totul se face la fel, așa că nu ar trebui să existe dificultăți.

Care este codul HTML al unei pagini?

Fiecare pagină pe care o deschideți într-un browser are propriul său limbaj de marcare HTML. Acest cod este etichete și text. Etichetele sunt un fel de etichete care spun browserului cum să afișeze o anumită parte a site-ului. Textul este conținutul paginii, ceea ce vede utilizatorul. De asemenea, stilurile CSS pot fi conectate la pagină, care stabilesc aspectul elementelor paginii. La schimba codul sursa al site-ului Nu trebuie să cunoașteți HTML și CSS în profunzime și în curând le veți vedea singur.

De ce să schimbi o pagină web?

Puteți modifica datele de pe site, puteți schimba textul mesajului, puteți face o captură de ecran falsă. Rețineți că toate modificările sunt vizibile numai pentru dvs. și când reîncărcați pagina, acestea vor dispărea. De asemenea, datele modificate nu vor fi reale. De exemplu, dacă nu am 10 dolari și mă schimb la 100, atunci nu voi mai avea bani. Aceasta este doar afișarea paginii de către browser. Exemplu:

După:

Ca exemplu, voi lua același site și voi modifica anunțul anterior al articolului „” Deschiderea paginii de start în Google Chrome. Faceți clic dreapta pe elementul pe care vreau să-l schimb, de exemplu, titlul anunțului și selectați „Vizualizare cod”.

În fereastra care se deschide, accesați fila Elemente și vedeți codul HTML al paginii. În el trebuie să găsiți textul care ne interesează. (subliniat cu rosu)

Acum voi șterge textul vechi și voi introduce pe cel nou.

Atât, titlul anunțului a fost schimbat. Acum voi schimba anunțul în sine, etichetele și titlul.

Puteți insera o altă imagine schimbând atributul src din eticheta img.

Probabilitatea de a privi inițiala Codul web pagini, primit de browser ca urmare a unei solicitări către server, se află în aproape fiecare browser de Internet. Accesul la comanda corespunzătoare este organizat aproximativ în același mod, dar există diferențe semnificative în ce metodă și sub ce formă vi se va prezenta prima Codul .

Instrucțiuni

1. În browserul Mozilla FireFox, deschideți secțiunea „Vizualizare” din meniu și faceți clic pe „Inițială Codul pagini". Același articol se află și în meniul contextual care apare când faceți clic dreapta pe text pagini... De asemenea, este permisă utilizarea combinației de taste CTRL + U. Mozilla FireFox nu utilizează programe externe - inițial Codul pagini cu evidențierea sintaxă se va deschide într-o fereastră separată a browserului.

2. În Internet Explorer, faceți clic pe secțiunea Fișier din meniu și selectați Editați în Notepad. În loc de numele Notepad, se poate scrie un alt program pe care l-ați atribuit în setările browserului pentru a vizualiza inițiala Codul A. La clic pagini făcând clic dreapta pe meniul contextual, care are și un element care vă permite să deschideți inițiala Codul paginiîntr-un program extern - „Vizualizare HTML- Codul A".

3. În browser Opera, deschideți meniul, accesați secțiunea „Pagină” și probabil veți prefera elementul „Inițial Codul„Sau articolul” Inițiala Codul cadru". Tastele rapide CTRL + U și, respectiv, CTRL + SHIFT + U sunt alocate acestei selecții. În meniul contextual ancorat la un clic pagini faceți clic dreapta, există și elementul „Inițial Codul". Opera deschide sursa paginiîntr-un program extern care este alocat în sistemul de operare sau în setările browserului pentru editarea fișierelor HTML.

4. Browserul Google Chrome are, fără îndoială, cea mai bună organizare de navigare a inițialei Codul A. Când faceți clic dreapta pe o pagină, este posibil să preferați Vizualizare Codul A pagini„Și apoi sursa cu evidențierea sintaxelor va fi deschisă într-o filă separată. Sau puteți prefera linia „Vizualizare Codul un element „și browserul din aceeași filă va deschide două cadre suplimentare în care puteți inspecta HTML și CSS Codul orice element pagini... Browserul va reacționa la mutarea cursorului de-a lungul liniilor Codul a, evidențiind elementele de pe pagină care corespund acestei secțiuni a HTML- Codul A.

5. În browserul Apple Safari, extindeți secțiunea „Vizualizare” și selectați linia „Previzualizare HTML- Codul A". În meniul care apare când faceți clic dreapta pe un deschis pagini, elementul corespunzător se numește „Vizualizare sursă”. CTRL + ALT + U sunt atribuite acestei acțiuni. Inițial Codul se deschide într-o fereastră separată de browser.

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 fișier (Ctrl + O)... În caseta de dialog Selectare document, specificați fișierul example41.html. Pagina web prezentată în Figura 4 se va deschide în browser. 4.1.

Orez. 4.1. Exemplu de rezultat al execuției

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

Există mai multe tipuri, ele diferă în funcție de versiunea HTML pe care o vizează. Masa 4.1. enumeră principalele tipuri de documente cu descrierile lor.

Tab. 4.1. DTD-uri valide

DOCTYPE	Descriere
HTML 4.01
	Sintaxă HTML strictă.
	Sintaxă HTML tranzițională.
	Cadrele sunt folosite în documentul HTML.
HTML 5
	Există un singur doctype în această versiune de HTML.
XHTML 1.0
	Sintaxă XHTML puternică.
	Sintaxă XHTML de tranziție.
	Documentul este scris în XHTML și conține cadre.
XHTML 1.1
	Dezvoltatorii XHTML 1.1 anticipează că va înlocui treptat HTML. După cum puteți vedea, această definiție nu are o împărțire în tipuri, deoarece sintaxa este aceeași și se supune unor reguli clare.

Diferența dintre descrierile stricte și tranzitorii ale documentelor este abordarea diferită a scrierii codului documentului. HTML strict necesită respectarea strictă a specificațiilor HTML și este neiertător. HTML tranzițional este mai „relaxat” cu privire la unele defecte ale codului, așa că acest tip este de preferat în anumite cazuri.

De exemplu, în HTML și XHTML strict, eticheta poate fi omis sau omis în HTML tranzițional. În același timp, rețineți că browserul va afișa documentul în orice caz, indiferent dacă se potrivește sau nu cu sintaxa. O astfel de verificare este efectuată folosind un validator și este destinată în primul rând dezvoltatorilor să urmărească erorile din document.</p> <p>În cele ce urmează, vom folosi în principal strictul<!DOCTYPE>, cu excepția cazului în care se prevede altfel. Acest lucru ne va permite să evităm greșelile comune și ne va învăța să scriem cod corect sintactic.</p> <p>Este adesea posibil să găsiți cod HTML fără a utiliza deloc<!DOCTYPE>, pagina web va fi afișată în continuare într-un astfel de caz. Cu toate acestea, se poate întâmpla ca același document să fie afișat diferit în browser în timpul utilizării<!DOCTYPE>si fara el. În plus, browserele pot afișa astfel de documente în felul lor; ca urmare, pagina se va „fărâmi”, adică. va fi afișat într-un mod complet diferit decât dorește dezvoltatorul să fie. 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, în interiorul acestuia se află antetul ( <head>) și corpul documentului ( <body> ).</p><p>Titlul documentului, așa cum este numit și blocul <head>, poate conține text și etichete, dar conținutul acestei secțiuni nu este afișat direct pe pagină, cu excepția containerului <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, folosind meta-etichete, așa cum se numește generic această etichetă, puteți schimba codarea paginii, puteți adăuga cuvinte cheie, descriere document și multe altele. Pentru ca browserul să înțeleagă că are de-a face cu codificarea UTF-8 (formatul de transformare Unicode), acest șir este adăugat.</p><p> <title>Exemplu de pagină web

Etichetă definește titlul paginii web, acesta fiind 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 browser (Fig. 4.2).</p> <p><img src='https://i1.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p> <p>Orez. 4.2. Vedere antet browser</p> <p>Etichetă <title>este obligatoriu și trebuie să fie prezent în codul documentului.</p><p>Asigurați-vă că adăugați o etichetă de închidere</head> pentru a indica faptul că blocul de titlu al documentului este complet.</p><p>Corpul documentului <body>este destinat să găzduiască etichetele și conținutul paginii web.</p><p> <h1>Titlu</h1> </p><p>HTML oferă șase niveluri diferite de titluri de text care indică importanța relativă a secțiunii de după titlu. Deci, eticheta <h1>reprezintă cel mai important titlu de prim nivel și eticheta <h6>servește pentru a desemna un titlu de nivel al șaselea și este cel mai puțin semnificativ. În mod implicit, titlul de la primul nivel este afișat cu cel mai mare caracter aldine, titlurile de la nivelul următor sunt mai mici. Etichete <h1>...<h6>sunt elemente bloc, ele încep întotdeauna pe o linie nouă, iar după ele alte elemente sunt afișate pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu.</p><p>  </p><p>Unele texte pot fi ascunse de afișare în browser făcându-l un comentariu. Deși utilizatorul nu va vedea un astfel de text, acesta va fi totuși transmis în document, așa că, privind codul sursă, puteți găsi note ascunse.</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="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">Top articole similare</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/fallout-4-izmenenie-vneshnosti-konsol-otlichaetsya-dvizhenie-myshi-po.html"> <div class="img_container"><img src="/uploads/686669656a5df8de6a6f9d463fe60026.jpg" border="0" alt="Mișcare diferită a mouse-ului pe verticală și pe orizontală" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Mișcare diferită a mouse-ului pe verticală și pe orizontală</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/kak-szhat-tekstury-v-fallout-4-ruchnaya-nastroika-grafiki.html"> <div class="img_container"><img src="/uploads/d7c98012600dd0a7e0e0c14fa8d2e1eb.jpg" border="0" alt="Cum să comprimați texturile în Fallout 4" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Cum să comprimați texturile în Fallout 4</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/ro/nizkie-nastroiki-grafiki-fallout-4-ostalos-tolko-ponyat-nuzhnyi-uroven.html"> <div class="img_container"><img src="/uploads/da3d853bd41405e0322c2a1e985df14b.jpg" border="0" alt="Rămâne doar să înțelegem nivelul cerut" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">Rămâne doar să înțelegem nivelul cerut</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">Categorii:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/ro/category/programs/">Programe</a></li> <li class=""><a href="https://bumotors.ru/ro/category/safety/">Siguranță</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-10/">Windows 10</a></li> <li class=""><a href="https://bumotors.ru/ro/category/iron/">Fier</a></li> <li class=""><a href="https://bumotors.ru/ro/category/windows-8/">Windows 8</a></li> <li class=""><a href="https://bumotors.ru/ro/category/vkontakte/">In contact cu</a></li> <li class=""><a href="https://bumotors.ru/ro/category/errors/">Erori</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2021 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.</span> </div> </div> </div> </div> </body> </html>