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 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.
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 filă nouă cu codul complet al paginii web sursă, un mare plus pentru toate - 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 folosi 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 HTML al site-ului
Instrucțiunea 2: cum să vizualizați și să editați codul HTML și CSS al unui site în browserul Google Chrome
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.
Acest instrument util este întotdeauna disponibil în browserul dvs., experimentați cu alte comenzi care vă vor facilita editarea site-ului.
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.
Masa 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ă XHTML de tranziție. |
|
|
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 o împărțire în tipuri, deoarece sintaxa este aceeași și se supune unor 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. Această verificare este efectuată folosind un 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>, 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>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 va „destrama”, 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. 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>
<title>Exemplu de pagină web
Etichetă
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><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 în browser</p>
<p>Etichetă <title>este obligatoriu și cu siguranță trebuie să fie prezent în codul documentului.</p><p>Trebuie să 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>destinat plasării de etichete și conținut al unei pagini web.</p><p>
<h1>Titlu</h1>
</p><p>HTML oferă șase titluri de text de diferite niveluri care indică importanța relativă a secțiunii care urmează titlului. Da, etichetă <h1>reprezintă cel mai important titlu de prim nivel și eticheta <h6>servește la indicarea titlului de nivelul șase și este cel mai puțin semnificativ. Î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 <h1>...<h6>Faceți referire la elementele bloc, ele încep întotdeauna pe o linie nouă, iar după ele, alte elemente apar pe linia următoare. În plus, spațiul alb este adăugat înainte și după titlu.</p><p>
<!-- Комментарий -->
</p><p>Un text poate fi ascuns pentru a fi afișat în browser făcându-l un comentariu. Deși acest text nu va fi văzut de utilizator, el va fi totuși transmis în document, așa că dacă te uiți la codul sursă, poți descoperi note ascunse.</p>
<h3>Ctrl+U</h3>
<h3>Cum pot vedea codul sursă al unui element?</h3>
<p>Faceți clic dreapta pe elementul de interes al paginii.</p>
<p>Google Chrome: <b>„Vedeți codul elementului”</b></p>
<p>Operă: <b>"Inspectează elementul"</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_opera.png' height="402" width="261" loading=lazy loading=lazy></p>
<p>Firefox: <b>„Analiza element”</b></p>
<p><img src='https://i1.wp.com/wordpress-life.ru/wp-content/uploads/2013/10/code_firefox.png' height="298" width="222" loading=lazy loading=lazy></p>
<p>În alte browsere, căutați un element de meniu cu un înțeles similar.</p>
<p>Salutare tuturor!</p>
<p>Am expus totul în mod special la începutul articolului, pentru cei care caută un răspuns rapid.</p>
<p>Informația poate fi cunoscută de mulți, dar deoarece scriu pentru bloggeri începători, programatori web și alți prospectori, acest articol de referință este un must-have.</p>
<p>În viitor, veți studia cu siguranță codul sursă al paginilor și elementelor individuale.</p>
<p>Să ne uităm la un exemplu specific despre modul în care puteți utiliza vizualizarea codului sursă al unei pagini.</p>
<p>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 <span>pentru a căuta un fragment de cod. În acest caz, introducem cuvântul „ <i>Cuvinte cheie".</i> Veți fi redirecționat automat către o bucată de cod cu această metaetichetă și cuvântul căutat va fi evidențiat.</p>
<p>Prin analogie, puteți căuta și studia alte fragmente de cod.</p>
<p>Vizualizarea întregului cod sursă al unei pagini nu este în cele mai multe cazuri foarte convenabilă, astfel încât în toate browserele este posibil să vizualizați codul unui element sau fragment individual.</p>
<p>Să folosim un exemplu specific de vizualizare a codului unui element. De exemplu, să vedem dacă linkul are un atribut nofollow. Faceți clic dreapta pe linkul care ne interesează și în meniul contextual derulant, faceți clic stânga pe element <span>„Vedeți codul elementului”</span> sau similar (în funcție de browser). Mai jos, într-o fereastră specială pentru analiza codului, obținem ceva similar.</p>
<p>Vedem că codul de link conține rel="nofollow” . Aceasta înseamnă că PR nu va „scurge” prin acest link. Vom vorbi despre asta mai detaliat în articolele următoare. Acum, lucrul important este că acum știți cum să vizualizați codul sursă al paginii și codul sursă al unui element individual.</p>
<p>" Același articol se află și în meniul contextual, pe care, dacă faceți clic dreapta pe text <b>pagini</b>. De asemenea, puteți utiliza 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> A. 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> A".</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://i1.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> A. Făcând clic dreapta pe mouse, puteți selecta Vizualizare <b>cod</b> A <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> A.</p> <p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p>
<p>Probabilitatea de a privi inițiala <b>cod</b> web <b>pagini</b>, primit de browser ca urmare a unei solicitări către server, este disponibil practic în fiecare browser de internet. Accesul la comanda corespunzătoare este organizat aproximativ identic, dar există diferențe semnificative în metoda și forma în care inițial <b>cod</b> .</p>
<h3>Instrucțiuni</h3>
<p><b>1.
</b>În browserul Mozilla FireFox, extindeți secțiunea „Vizualizare” din meniu și faceți clic pe „Inițială” <b>cod</b> <b>pagini</b>" Același articol se află și în meniul contextual care apare dacă faceți clic dreapta pe text <b>pagini</b>. De asemenea, puteți utiliza combinația de taste CTRL + U. Mozilla FireFox nu folosește programe externe - inițial <b>cod</b> <b>pagini</b> cu evidențierea sintaxă va fi deschis într-o fereastră separată a browserului.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95d5fa552552b95d5fe3.jpg' height="748" width="680" loading=lazy loading=lazy></p><p><b>2.
</b>În Internet Explorer, faceți clic pe meniul Fișier ș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 <b>cod</b> A. La clic <b>pagini</b> cu butonul drept al mouse-ului apare un meniu contextual, care are și un element care permite deschiderea inițialei <b>cod</b> <b>pagini</b>într-un program extern – „Vizualizare HTML- <b>cod</b> A".</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><b>3.
</b>În browserul Opera, deschideți meniul, accesați secțiunea „Pagină” și veți avea șansa de a selecta elementul „Start” din subsecțiunea „Instrumente de dezvoltare” <b>cod</b>"sau elementul "Initial <b>cod</b> cadru." Tastele rapide CTRL + U și, respectiv, CTRL + SHIFT + U sunt alocate acestei selecții. Într-un meniu contextual legat de un clic <b>pagini</b> faceți clic dreapta, există și un element „Inițial <b>cod</b>" Opera deschide sursa <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://i1.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b95eb30952552b95eb346.jpg' width="100%" loading=lazy loading=lazy></p><p><b>4.
</b> Browserul Google Chrome are, fără îndoială, cea mai bună organizare pentru vizualizarea inițialei <b>cod</b> A. Făcând clic dreapta pe pagină, puteți alege să vizualizați <b>cod</b> A <b>pagini</b>„și apoi codul sursă cu evidențierea sintaxelor va fi deschis într-o filă separată. Sau ați putea prefera linia „Vizualizare” din același meniu <b>cod</b> element” iar browserul din aceeași filă va deschide două cadre suplimentare în care puteți inspecta HTML și CSS <b>cod</b> fiecare 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> A.</p><p><img src='https://i2.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b9603c4652552b9603c84.jpg' width="100%" loading=lazy loading=lazy></p><p><b>5.
</b>În browserul Apple Safari, extindeți secțiunea Vizualizare și selectați Vizualizare HTML <b>cod</b> A". În meniul care apare când faceți clic dreapta pe deschide <b>pagini</b>, elementul corespunzător se numește „Vizualizare sursă”. Această acțiune este atribuită tastelor rapide CTRL + ALT + U. Inițială <b>cod</b> se deschide într-o fereastră separată de browser.</p><p><img src='https://i0.wp.com/st03.kakprosto.ru/tumb/680/images/article/2011/7/8/1_52552b960eafe52552b960eb45.jpg' width="100%" loading=lazy loading=lazy></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">Cele mai bune articole pe această temă</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/oborudovanie-vvodov-nup-montazh-oborudovaniya-svyazi-kabelnye-linii.html">
<div class="img_container"><img src="/uploads/ea22d722d6ce7576c5d0dc1b49c267d1.jpg" border="0" alt="Instalarea echipamentelor de comunicații" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Instalarea echipamentelor de comunicații</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/sistemy-aktivnoi-raskrutki-sistemy-aktivnoi-raskrutki-prochie-sposoby.html">
<div class="img_container"><img src="/uploads/c2df7dcc9108eb87febaaa3a00d22840.jpg" border="0" alt="Sisteme active de promovare Alte metode de optimizare externă" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Sisteme active de promovare Alte metode de optimizare externă</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/ro/yazyk-programmirovaniya-java-naznachenie-i-osobennosti-yazyk-programmirovaniya-java-yava-preimushchestva.html">
<div class="img_container"><img src="/uploads/7ccb52a36b2331a10a3cff17c3e8d815.jpg" border="0" alt="limbaj de programare Java (Java)" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">limbaj de programare Java (Java)</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="https://vk.com/share.php?url=https://bumotors.ru/kak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" class="vk social-ico"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/kak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" class="fb social-ico"></a>
<a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Fro%2Fkak-pokazat-kod-stranicy-google-chrome-instrumenty-dlya-web-mastera.html" 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">© 2024 bumotors.ru. Cum se configurează smartphone-uri și PC-uri. Portal informativ.</span>
</div>
</div>
</div>
</div>
</body>
</html> 